Feature: Add chip button component to lookbook

Gemfile.lock

@@ -254,11 +254,13 @@ GEM
       net-protocol
     net-ssh (7.1.0)
     netrc (0.11.0)
-    newrelic_rpm (9.2.2)
-    nio4r (2.5.9)
-    nokogiri (1.14.3)
+    newrelic_rpm (9.0.0)
+    nio4r (2.5.8)
+    nokogiri (1.14.2)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
+    nokogiri (1.14.2-x86_64-linux)
+      racc (~> 1.4)
     oj (3.14.3)
     open_uri_redirections (0.2.1)
     parallel (1.23.0)
@@ -322,17 +324,17 @@ GEM
     recaptcha (5.9.0)
       json
     redcarpet (3.6.0)
-    regexp_parser (2.8.0)
-    reline (0.3.3)
+    regexp_parser (2.7.0)
+    reline (0.3.2)
       io-console (~> 0.5)
     rest-client (2.1.0)
       http-accept (>= 1.7.0, < 2.0)
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 4.0)
       netrc (~> 0.8)
     rexml (3.2.5)
-    rouge (4.1.0)
-    rspec-core (3.12.2)
+    rouge (4.1.1)
+    rspec-core (3.12.1)
       rspec-support (~> 3.12.0)
     rspec-expectations (3.12.3)
       diff-lcs (>= 1.2.0, < 2.0)
@@ -443,10 +445,11 @@ GEM
     xpath (3.2.0)
       nokogiri (~> 1.8)
     yard (0.9.34)
-    zeitwerk (2.6.8)
+    zeitwerk (2.6.7)
 
 PLATFORMS
   ruby
+  x86_64-linux
 
 DEPENDENCIES
   bcrypt_pbkdf (>= 1.0, < 2.0)

app/assets/stylesheets/components/chip_button.scss

@@ -0,0 +1,18 @@
+.chip_button_container {
+    background-color: #F6F6F6;
+    padding: 10px;
+    border-radius: 5px;
+    color: #777777 !important;
+    font-weight: 500;
+    font-size: 15px;
+}
+.chip_button_container_clickable{
+    background-color: var(--light-color);
+    padding: 10px;
+    border-radius: 5px;
+    color: var(--primary-color);
+    font-weight: 500;
+    font-size: 15px;
+}
+
+

app/assets/stylesheets/components/index.scss

@@ -1,2 +1,3 @@
 @import 'chips';
-@import 'card_message'
+@import 'card_message';
+@import 'chip_button';

app/assets/stylesheets/theme-variables.scss.erb

@@ -6,24 +6,28 @@
             --primary-color: #31B404;
             --hover-color: #40C811;
             --secondary-color: #ffc107;
+            --light-color: #F1FAED;
         }
     <% when "stageportal" %>
         :root{
             --primary-color: #76A7CC;
             --hover-color: #6B96B7;
             --secondary-color: #ffc107;
+            --light-color: #F1F6FA;
         }
     <% when "bioportal" %>
         :root{
             --primary-color: #76A7CC;
             --hover-color: #6B96B7;
             --secondary-color: #ffc107;
+            --light-color: #F1F6FA;
         }
     <% when "ontoportal" %>
         :root{
             --primary-color: #6E98A2;
             --hover-color: #7BABB6;
             --secondary-color: #ffc107;
+            --light-color: #F0F5F6;
         }
     <%# Here to add a new theme ... %>
     <% end %>

app/components/chip_button_component.rb

@@ -0,0 +1,7 @@
+class ChipButtonComponent < ViewComponent::Base
+    def initialize(url: nil, text:, type: "static")
+        @url = url
+        @text = text
+        @type = type
+    end
+end

app/components/chip_button_component/chip_button_component.html.haml

@@ -0,0 +1,5 @@
+- if @type == "static"
+    .chip_button_container
+        = @text
+- else
+    %a.chip_button_container_clickable{href: @url}= @text

test/components/previews/chip_button_component_preview.rb

@@ -0,0 +1,19 @@
+class ChipButtonComponentPreview < ViewComponent::Preview
+
+    # @param url text
+    # @param text text
+
+    def standard(url: "nil", text: "text")
+        render(ChipButtonComponent.new(url: url, text: text, type: "static"))
+    end
+
+    # @param url text
+    # @param text text
+
+    def clickable(url: "nil", text: "text")
+        render(ChipButtonComponent.new(url: url, text: text, type: "clickable"))
+    end
+
+
+
+end