Merge pull request #262 from ontoportal-lirmm/feature/add-rounded-but…

…ton-component-to-lookbook

Feature: Add rounded button to lookbook

Gemfile.lock

@@ -256,11 +256,11 @@ GEM
     netrc (0.11.0)
     newrelic_rpm (9.2.2)
     nio4r (2.5.9)
+    nokogiri (1.14.2-x86_64-linux)
+      racc (~> 1.4)
     nokogiri (1.15.2)
       mini_portile2 (~> 2.8.2)
       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)

app/assets/stylesheets/application.css.scss.erb

@@ -49,7 +49,7 @@
 @import "login";
 @import "components/index";
 @import "account";
-@import "ontology_details_header";
+
 @import "nav_bar";
 
 /* Bootstrap and Font Awesome */

app/assets/stylesheets/components/index.scss

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

app/assets/stylesheets/components/rounded_button.scss

@@ -0,0 +1,17 @@
+.rounded-button {
+    border: 1px solid var(--primary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: 40px;
+    transition: background-color ease 0.3s;
+}
+
+.rounded-button:hover {
+    background-color: var(--primary-color);
+
+}
+
+.rounded-button:hover svg path {
+    fill: white;
+}

app/components/rounded_button_component.rb

@@ -0,0 +1,19 @@
+class RoundedButtonComponent < ViewComponent::Base
+    def initialize(icon: "json.svg", link: "#", size: "small")
+        @icon = icon
+        @link = link
+        @size = size
+    end
+
+    def size
+        case @size
+            when "small"
+                ["32px", "1", "16px"]
+            when "medium"
+                ["64px", "2", "32px"]
+            when "big"
+                ["100px", "2.5", "50px"]
+            end
+    end
+
+end

app/components/rounded_button_component/rounded_button_component.html.haml

@@ -0,0 +1,2 @@
+%a.rounded-button{:href => @link, style: "height:"+size[0]+"; width:"+size[0]+"; border-radius:"+size[2]+";"}
+    = inline_svg_tag @icon, style: "transform: scale("+size[1]+");"

test/components/previews/rounded_button_component_preview.rb

@@ -0,0 +1,14 @@
+class RoundedButtonComponentPreview < ViewComponent::Preview
+
+    # @param icon text
+    # @param link text
+    # @param size select [small, medium, big]
+
+    def default(icon: "json.svg", link: "text", size: "small")
+        render(RoundedButtonComponent.new(icon: icon, link: link, size: size))
+    end
+
+
+
+
+end