From 6cfe0828b1d2b4995b4557d07be5ad980dd6d3e7 Mon Sep 17 00:00:00 2001 From: Bilelkihal <61744974+Bilelkihal@users.noreply.github.com> Date: Fri, 2 Jun 2023 14:44:58 +0200 Subject: [PATCH] Add rounded button to lookbook --- Gemfile.lock | 4 ++-- app/assets/images/json.svg | 3 +++ .../stylesheets/application.css.scss.erb | 2 +- app/assets/stylesheets/components/index.scss | 3 ++- .../components/rounded_button.scss | 17 +++++++++++++++++ app/components/rounded_button_component.rb | 19 +++++++++++++++++++ .../rounded_button_component.html.haml | 2 ++ .../rounded_button_component_preview.rb | 14 ++++++++++++++ 8 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 app/assets/images/json.svg create mode 100644 app/assets/stylesheets/components/rounded_button.scss create mode 100644 app/components/rounded_button_component.rb create mode 100644 app/components/rounded_button_component/rounded_button_component.html.haml create mode 100644 test/components/previews/rounded_button_component_preview.rb diff --git a/Gemfile.lock b/Gemfile.lock index 91139abec..1b6b17dff 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/images/json.svg b/app/assets/images/json.svg new file mode 100644 index 000000000..e7f7e8898 --- /dev/null +++ b/app/assets/images/json.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb index 80014e7b0..03a6c9d11 100644 --- a/app/assets/stylesheets/application.css.scss.erb +++ b/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 */ diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index 3351092f5..7e1a2f4d6 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -1,3 +1,4 @@ @import 'chips'; @import 'card_message'; -@import 'chip_button'; \ No newline at end of file +@import 'chip_button'; +@import 'rounded_button'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/rounded_button.scss b/app/assets/stylesheets/components/rounded_button.scss new file mode 100644 index 000000000..41e2b7695 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/components/rounded_button_component.rb b/app/components/rounded_button_component.rb new file mode 100644 index 000000000..65a11dd0a --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/components/rounded_button_component/rounded_button_component.html.haml b/app/components/rounded_button_component/rounded_button_component.html.haml new file mode 100644 index 000000000..7eb803aff --- /dev/null +++ b/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]+");" diff --git a/test/components/previews/rounded_button_component_preview.rb b/test/components/previews/rounded_button_component_preview.rb new file mode 100644 index 000000000..1ba6584f1 --- /dev/null +++ b/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 \ No newline at end of file