Added Dimmer component

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)

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() %>
+  #   <div class="dimmable">
+  #     <div class="dimmer fade show" id="dimmer-125408335">
+  #       <div class="dimmer-inner"></div>
+  #     </div>
+  #   </div>
+  #
+  # With option show false (default true)
+  #   <%= render Itacomp::DimmerComponent.new(show: false) %>
+  #   <div class="dimmable">
+  #     <div class="dimmer fade" id="dimmer-125408335" aria-hidden="true">
+  #       <div class="dimmer-inner"></div>
+  #     </div>
+  #   </div>
+  #
+  # With options in dimmable tag
+  #   <%= render Itacomp::DimmerComponent.new(class: 'my-class', data: {action: none}) %>
+  #   <div class="dimmable myclass" data-action="none">
+  #     <div class="dimmer fade show" id="dimmer-125408335">
+  #       <div class="dimmer-inner"></div>
+  #     </div>
+  #   </div>
+  #
+  # With simple dimmer icon and text
+  #   <%= render Itacomp::DimmerComponent.new(icon: 'it-unlocked', text: 'text') %>
+  #   <div class="dimmable">
+  #     <div class="dimmer fade show" id="dimmer-125408335">
+  #       <div class="dimmer-inner">
+  #         <div class="dimmer-icon"><svg class="icon icon-xl"><use href="/itacomp/sprites.svg#unlocked" xlink:href="/itacomp/sprites.svg#unlocked" /></svg></div>
+  #         <p>test</p>
+  #       </div>
+  #     </div>
+  #   </div>
+  #
+  # With dimmer div options
+  #   <%= render Itacomp::DimmerComponent.new(dimmer: {id: 'my-dimmer', class: 'my-dimmer-class', data: {test: 'tost'}}) %>
+  #   <div class="dimmable">
+  #     <div class="dimmer fade my-dimmer-class show" id="my-dymmer" data-test="tost">
+  #       <div class="dimmer-inner"></div>
+  #     </div>
+  #   </div>
+  #
+  # with free dimmable content
+  # <%= render Itacomp::DimmerComponent.new() do %>
+  #   <h4>my dimmable content</h4>
+  # <% end %>
+  #   <div class="dimmable">
+  #     <div class="dimmer fade show" id="dimmer-125408335">
+  #       <div class="dimmer-inner"></div>
+  #     </div>
+  #     <h4>my dimmable content</h4>
+  #   </div>
+  #
+  # with free dimmer content
+  # <%= render Itacomp::DimmerComponent.new() do |component| %>
+  #   <% component.with_inner_content do%>
+  #     <h4>My dimmer content</h4>
+  #   <% end %>
+  #   <h4>my dimmable content</h4>
+  # <% end %>
+  #   <div class="dimmable">
+  #     <div class="dimmer fade show" id="dimmer-125408335">
+  #       <div class="dimmer-inner">
+  #         <h4>My mimmer content</h4>
+  #       </div>
+  #     </div>
+  #     <h4>my dimmable content</h4>
+  #   </div>
+  class DimmerComponent < BaseComponent
+    renders_one :inner_content
+    # Initialize dimmer component
+    #
+    # ==== Options
+    # * <tt>show</tt> [Boolean], default: <tt>true</tt>, add show class on dimmer element
+    # * <tt>icon</tt> [String] default <tt>nil</tt> if present add a dimmer_icon in dimmer element
+    # * <tt>text</tt> [Atring] default <tt>nil</tt> if present add a p tag with the content in dimmer element
+    # * <tt>dimmer</tt> [Hash], default <tt>{id: "dimmer_#{Time.now.strftime("%H%M%S%L"}"}</tt>, each key present in this hash is passed as tag option for dimmer element,
+    # * <tt>**opts</tt> each key is delegated as tag options for dimmable element.
+    # * <tt>yield</tt> dimmable content, is added in dimmable element after dimmer element
+    # * <tt>yield.with_dimmer_content</tt> 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
+    # * <tt>dicon</tt> [String], ita_icon id to render an icon
+    # * <tt>**opts</tt> 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

app/components/itacomp/dimmer_component/dimmer_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.div **@dimmable do %>
+  <%= tag.div **@dimmer do %>
+    <div class="dimmer-inner">
+      <%= dimmer_icon @icon if @icon.present? %>
+      <%= tag.p @text if @text.present? %>
+      <%= inner_content %>
+    </div>
+  <% end %>
+  <%= content %>
+<% end %>

app/components/itacomp/dimmer_component/dimmer_component.yml

@@ -0,0 +1,3 @@
+---
+en:
+  open: Open

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

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