From 1913192854ce4cf333f24ebdd35ad998446aaf64 Mon Sep 17 00:00:00 2001 From: MDreW Date: Fri, 3 Oct 2025 09:37:34 +0200 Subject: [PATCH] Added Dimmer component --- README.md | 1 + app/components/itacomp/dimmer_component.rb | 118 ++++++++++++++++++ .../dimmer_component.html.erb | 10 ++ .../dimmer_component/dimmer_component.yml | 3 + .../itacomp/dimmer_component_test.rb | 45 +++++++ .../itacomp/dimmer_component_preview.rb | 9 ++ 6 files changed, 186 insertions(+) create mode 100644 app/components/itacomp/dimmer_component.rb create mode 100644 app/components/itacomp/dimmer_component/dimmer_component.html.erb create mode 100644 app/components/itacomp/dimmer_component/dimmer_component.yml create mode 100644 test/components/itacomp/dimmer_component_test.rb create mode 100644 test/components/previews/itacomp/dimmer_component_preview.rb diff --git a/README.md b/README.md index 03b1a53..8918182 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Itacomp is a [View Component](https://viewcomponent.org/) and [Helper](https://a ### Components * [AlertComponent](app/components/itacomp/alert_component.rb) * [AvatorComponent](app/components/itacomp/avator_component.rb) +* [DimmerComponent](app/components/itacomp/dimmer_component.rb) * [NotificationComponent](app/components/itacomp/notification_component.rb) * [TabComponent](app/components/itacomp/tab_component.rb) * [TurboFrameComponent](app/components/itacomp/turbo_frame_component.rb) diff --git a/app/components/itacomp/dimmer_component.rb b/app/components/itacomp/dimmer_component.rb new file mode 100644 index 0000000..fbd92af --- /dev/null +++ b/app/components/itacomp/dimmer_component.rb @@ -0,0 +1,118 @@ +# frozen_string_literal: true + +module Itacomp + # make a strcture for [dimmer component](https://italia.github.io/bootstrap-italia/docs/componenti/dimmer/) + # ==== Example + # With no params + # <%= render Itacomp::DimmerComponent.new() %> + #
+ #
+ #
+ #
+ #
+ # + # With option show false (default true) + # <%= render Itacomp::DimmerComponent.new(show: false) %> + #
+ # + #
+ # + # With options in dimmable tag + # <%= render Itacomp::DimmerComponent.new(class: 'my-class', data: {action: none}) %> + #
+ #
+ #
+ #
+ #
+ # + # With simple dimmer icon and text + # <%= render Itacomp::DimmerComponent.new(icon: 'it-unlocked', text: 'text') %> + #
+ #
+ #
+ #
+ #

test

+ #
+ #
+ #
+ # + # With dimmer div options + # <%= render Itacomp::DimmerComponent.new(dimmer: {id: 'my-dimmer', class: 'my-dimmer-class', data: {test: 'tost'}}) %> + #
+ #
+ #
+ #
+ #
+ # + # with free dimmable content + # <%= render Itacomp::DimmerComponent.new() do %> + #

my dimmable content

+ # <% end %> + #
+ #
+ #
+ #
+ #

my dimmable content

+ #
+ # + # with free dimmer content + # <%= render Itacomp::DimmerComponent.new() do |component| %> + # <% component.with_inner_content do%> + #

My dimmer content

+ # <% end %> + #

my dimmable content

+ # <% end %> + #
+ #
+ #
+ #

My mimmer content

+ #
+ #
+ #

my dimmable content

+ #
+ class DimmerComponent < BaseComponent + renders_one :inner_content + # Initialize dimmer component + # + # ==== Options + # * show [Boolean], default: true, add show class on dimmer element + # * icon [String] default nil if present add a dimmer_icon in dimmer element + # * text [Atring] default nil if present add a p tag with the content in dimmer element + # * dimmer [Hash], default {id: "dimmer_#{Time.now.strftime("%H%M%S%L"}"}, each key present in this hash is passed as tag option for dimmer element, + # * **opts each key is delegated as tag options for dimmable element. + # * yield dimmable content, is added in dimmable element after dimmer element + # * yield.with_dimmer_content dimmer content, is added into dimmer element + # + # ==== Note + # you can set an arbitrary ID in dimmer element to activate it with javascript: + # render Itacomp::DimmerComponent.new(dimmer: {id: 'my-dimmer'}) + # + # To add arbitrary code in dimmer element you can use self.dimmer_content: + # render Itacomp::DimmerComponent.new do |component| + # component.with_inner_content do + # "my dimmer content" + # end + def initialize(show: true, icon: nil, text: nil, dimmer: {}, **opts) + @dimmable = opts + @dimmable[:class] = [ "dimmable", opts[:class] ] + @dimmer = dimmer + @dimmer[:class] = [ "dimmer fade", @dimmer[:class] ] + @dimmer["id"] = "dimmer-#{Time.now.strftime("%H%M%S%L")}" if @dimmer[:id].blank? + show == true ? @dimmer[:class] << "show" : @dimmer[:aria] = { hidden: true } + @icon = icon + @text = text + end + + # helper to add a dimmer icon + # + # ==== Options + # * dicon [String], ita_icon id to render an icon + # * **opts each key is delegated as tag options for icon element. + def dimmer_icon(icon, **opts) + opts = { class: "icon-xl" }.merge opts + tag.div ita_icon(@icon, **opts), class: "dimmer-icon" + end + end +end diff --git a/app/components/itacomp/dimmer_component/dimmer_component.html.erb b/app/components/itacomp/dimmer_component/dimmer_component.html.erb new file mode 100644 index 0000000..6df6459 --- /dev/null +++ b/app/components/itacomp/dimmer_component/dimmer_component.html.erb @@ -0,0 +1,10 @@ +<%= tag.div **@dimmable do %> + <%= tag.div **@dimmer do %> +
+ <%= dimmer_icon @icon if @icon.present? %> + <%= tag.p @text if @text.present? %> + <%= inner_content %> +
+ <% end %> + <%= content %> +<% end %> diff --git a/app/components/itacomp/dimmer_component/dimmer_component.yml b/app/components/itacomp/dimmer_component/dimmer_component.yml new file mode 100644 index 0000000..281a550 --- /dev/null +++ b/app/components/itacomp/dimmer_component/dimmer_component.yml @@ -0,0 +1,3 @@ +--- +en: + open: Open diff --git a/test/components/itacomp/dimmer_component_test.rb b/test/components/itacomp/dimmer_component_test.rb new file mode 100644 index 0000000..dd8153b --- /dev/null +++ b/test/components/itacomp/dimmer_component_test.rb @@ -0,0 +1,45 @@ +# frozen_string_literal: true + +require "test_helper" + +class Itacomp::DimmerComponentTest < ViewComponent::TestCase + test "empty" do + render_inline Itacomp::DimmerComponent.new() + assert_selector "div.dimmable div.dimmer.show div.dimmer-inner", text: nil + end + + test "with dimmable element option" do + render_inline Itacomp::DimmerComponent.new(id: "idtest", class: "classtest", data: { test: "test" }) + assert_selector "div#idtest.dimmable.classtest[data-test='test'] div.dimmer div.dimmer-inner", text: nil + end + + test "with dimmer element option" do + render_inline Itacomp::DimmerComponent.new(dimmer: { id: "idtest", class: "classtest", data: { test: "test" } }) + assert_selector "div.dimmable div#idtest.dimmer.classtest[data-test='test'] div.dimmer-inner", text: nil + end + + test "hidden dimmer" do + render_inline Itacomp::DimmerComponent.new(show: false) + assert_selector "div.dimmable div.dimmer[aria-hidden='true'] div.dimmer-inner", text: nil + end + + test "with options for icon and text" do + render_inline Itacomp::DimmerComponent.new(icon: "test", text: "text") + assert_selector "div.dimmable div.dimmer div.dimmer-inner p", text: "text" + assert_selector "div.dimmable div.dimmer div.dimmer-inner div.dimmer-icon svg.icon.icon-xl use", text: nil + end + + test "with content" do + render_inline Itacomp::DimmerComponent.new() do + "dimmable_text" + end + assert_selector "div.dimmable", text: "dimmable_text" + end + + test "with inner_content" do + render_inline Itacomp::DimmerComponent.new() do |component| + component.with_inner_content { "dimmer_text" } + end + assert_selector "div.dimmable div.dimmer div.dimmer-inner", text: "dimmer_text" + end +end diff --git a/test/components/previews/itacomp/dimmer_component_preview.rb b/test/components/previews/itacomp/dimmer_component_preview.rb new file mode 100644 index 0000000..333f496 --- /dev/null +++ b/test/components/previews/itacomp/dimmer_component_preview.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +module Itacomp + class DimmerComponentPreview < ViewComponent::Preview + def default + render(DimmerComponent.new(open: "open")) + end + end +end