20 component overlay

app/components/itacomp/alert_component.rb

@@ -27,7 +27,7 @@ module Itacomp
   # @example with other key params
   #   <%= render ItacompAlertComponent.new(id: 'my-id', data: {test: 'test'}) %>
   #   <div class="alert alert-primary" id="my-id" data-test="test" role="alert"></div>
-  class AlertComponent < BaseComponent
+  class AlertComponent < ApplicationComponent
     # @param [String,Sym] :type of alert, default 'primary'
     # @param [Boolean] :close if true is added close button
     # @param [String] :class add other class after "alsert alert-#{type}" classes

app/components/itacomp/application_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Itacomp
+  # Common method and incluion for Itacomp components
+  #
+  # ==== Inclusion
+  # * include ApplicationHelper
+  # * include CommonHelper
+  class ApplicationComponent < ViewComponent::Base
+    include ApplicationHelper
+    include CommonHelper
+
+    # retur value if key is true
+    #
+    # ==== Options
+    # <tt>Value</tt> [Any], mandatory, return value if <TT>key</TT> is true
+    # <tt>Key</tt> [Boolean], if true, return <tt>value</tt>
+    def if_key(value, key)
+      value if key == true
+    end
+  end
+end

app/components/itacomp/avatar_component.rb

@@ -34,7 +34,7 @@ module Itacomp
   # With other options
   #   <%= render itacomp::avatar(id: "my_avatar", data: {turbo_frame: 'main'}).new.with_content('a') %>
   #   <div id="my_avatar" class="avatar" data-turbo-frame="main">a</div>
-  class AvatarComponent < BaseComponent
+  class AvatarComponent < ApplicationComponent
     # Initialize avatar component
     #
     # ==== Options

app/components/itacomp/dimmer_component.rb

@@ -72,7 +72,7 @@ module Itacomp
   #     </div>
   #     <h4>my dimmable content</h4>
   #   </div>
-  class DimmerComponent < BaseComponent
+  class DimmerComponent < ApplicationComponent
     renders_one :inner_content
     # Initialize dimmer component
     #

app/components/itacomp/notification_component.rb

@@ -9,7 +9,7 @@ module Itacomp
   # Mo dismissable and no show
   #  <%= render Itacomp::NotificationComponent.new(title: 'test', dismissable: false, show: false) %>
   #  <div class="notification" id="not-171959203" aria-labelledby="not-171959203-title" role="alert">  <h2 id="not-171959203-title" class="h5">test</h2> </div>
-  class NotificationComponent < BaseComponent
+  class NotificationComponent < ApplicationComponent
     # Initialize notification component
     #
     # ==== Options

app/components/itacomp/overlay_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Itacomp
+  # make a strcture for [overlay] component](https://italia.github.io/bootstrap-italia/docs/componenti/ove/)
+  # ==== Example
+  # With only required img
+  #   <%= render Itacomp::OverlayComponent.new('test.jpg') %>
+  #   <figure class="overlay-wrapper"><img src="/images/test.jpg" /><figcaption class="overlay-panel"><span></span></figcaption></figure>
+  # With text
+  #   <%= render Itacomp::OverlayComponent.new('test.jpg', text: 'My text') %>
+  #   <figure class="overlay-wrapper"><img src="/images/test.jpg" /><figcaption class="overlay-panel"><span>My text</span></figcaption></figure>
+  # With black background
+  #   <%= render Itacomp::OverlayComponent.new('test.jpg', text: 'My text', black: true) %>
+  #   <figure class="overlay-wrapper"><img src="/images/test.jpg" /><figcaption class="overlay-panel overlay-black"><span>My text</span></figcaption></figure>
+  # With full height
+  #   <%= render Itacomp::OverlayComponent.new('test.jpg', text: 'My text', full: true) %>
+  #   <figure class="overlay-wrapper"><img src="/images/test.jpg" /><figcaption class="overlay-panel overlay-panel-fullheight"><span>My text</span></figcaption></figure>
+  # With icon and full height
+  #   <%= render Itacomp::OverlayComponent.new('test.jpg', text: 'My text', icon: 'lock', full: true) %>
+  #   <figure class="overlay-wrapper"><img src="/images/test.jpg" /><figcaption class="overlay-panel overlay-panel-fullheight"><span class="visually-hidden">my text</span><svg class="icon"><use href="/itacomp/sprites.svg#lock" xlink:href="/itacomp/sprites.svg#lock" /></svg></figcaption></figure>
+  # With content
+  #   <%= render Itacomp::OverlayComponent.new('test.jpg').with_content('My text') %>
+  #   <figure class="overlay-wrapper"><img src="/images/test.jpg" /><figcaption class="overlay-panel"><span>My text</span></figcaption></figure>
+  class OverlayComponent < ApplicationComponent
+    # Initialize Overlay component
+    # ==== Options
+    # * <tt>img</tt> [String], mandatory, default: <tt>nil</tt>, image url or asset;
+    # * <tt>text</tt> [String], default <tt>nil</tt>, Overlay span content
+    # * <tt>icon</tt> [String] default <tt>nil</tt> if present is add icon content in overlay
+    # * <tt>black</tt> [Boolean] default <tt>false</tt> if true add overlay-black class
+    # * <tt>full</tt> [Boolean] default <tt>false</tt> if true add overlay-panel-fullheight clas
+    # * <tt>**opts</tt> each key is delegated as image_tag options. Default: {}, useful for add class or alternate image description
+    # * <tt>yield</tt> figcaption content in a span tag
+    def initialize(img = nil, text: nil, icon: nil, black: false, full: false, **opts)
+      @opts = opts
+      @figcaption_opts = { class: [ "overlay-panel", if_key("overlay-panel-fullheight", full), if_key("overlay-black", black), if_key("overlay-icon", icon.present?) ] }
+
+      @text = text
+      @img = img
+      @icon = icon
+    end
+  end
+end

app/components/itacomp/overlay_component/overlay_component.html.erb

@@ -0,0 +1,11 @@
+<figure class="overlay-wrapper">
+  <%= image_tag @img, **@opts %>
+  <%= tag.figcaption **@figcaption_opts do %>
+    <% if @icon.present? %>
+      <span class="visually-hidden"><%= content || @text %></span>
+      <%= ita_icon @icon %>
+    <% else %>
+      <span><%= content? ? content : @text %></span>
+    <% end %>
+  <% end %>
+</figure>

app/components/itacomp/tab_component.rb

@@ -15,7 +15,7 @@ module Itacomp
   #     <li class="nav-item"><a class="nav-link active" role="tab" href="/">Home</a></li>
   #     <li class="nav-item"><a class="nav-link" role="tab" href="/books">Books</a></li>
   #   </ul>
-  class TabComponent < ViewComponent::Base
+  class TabComponent < ApplicationComponent
     # Initialize tab component
     #
     # ==== options

app/components/itacomp/turbo_frame_component.rb

@@ -34,7 +34,7 @@ module Itacomp
   #     text content
   #
   #   <turbo-frame id='nav1' src='/books'>text content</turbo-frame>
-  class TurboFrameComponent < BaseComponent
+  class TurboFrameComponent < ApplicationComponent
     # Initialize TurboFrameComponent
     # ==== Options
     # * <tt>*</tt> [Symbol], each key going as tag option

test/components/itacomp/application_component_test.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Itacomp::ApplicationComponentTest < ViewComponent::TestCase
+  test "if_key method" do
+    assert_equal "yes", Itacomp::ApplicationComponent.new.if_key("yes", true)
+    assert_nil Itacomp::ApplicationComponent.new.if_key("yes", false)
+    assert_nil Itacomp::ApplicationComponent.new.if_key("yes", "test")
+    assert_nil Itacomp::ApplicationComponent.new.if_key("yes", nil)
+  end
+end

test/components/itacomp/overlay_component_test.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Itacomp::OverlayComponentTest < ViewComponent::TestCase
+  test "with only image" do
+    render_inline(Itacomp::OverlayComponent.new("/image.png"))
+    assert_selector 'figure.overlay-wrapper img[src="/image.png"]'
+    assert_selector "figure.overlay-wrapper figcaption span", text: nil
+  end
+
+  test "with text fegcaption description" do
+    render_inline(Itacomp::OverlayComponent.new("/image.png", text: "test"))
+    assert_selector "figure.overlay-wrapper figcaption span", text: "test"
+  end
+
+  test "with black figcaption background" do
+    render_inline(Itacomp::OverlayComponent.new("/image.png", text: "test", black: true))
+    assert_selector "figure.overlay-wrapper figcaption.overlay-black span", text: "test"
+  end
+
+  test "with icon, fullheight figcaption overlay and visually hidden text description" do
+    render_inline(Itacomp::OverlayComponent.new("/image.png", text: "test", full: true, icon: "test"))
+    assert_selector "figure.overlay-wrapper figcaption.overlay-panel-fullheight.overlay-icon span.visually-hidden", text: "test"
+    assert_selector "figure.overlay-wrapper figcaption.overlay-panel-fullheight.overlay-icon svg.icon use"
+  end
+end