7 avatar component

app/components/itacomp/avatar_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Itacomp
+  # Make a bootstrap-italia compatible [Avatar](https://italia.github.io/bootstrap-italia/docs/componenti/avatar/) tag.
+  #
+  # ==== Example
+  # With no params 
+  #   <%= render Itacomp::Avatar.new %>
+  #   <div class=\"avatar\"></div>
+  # With content
+  #   <%= render itacomp::avatar.new.with_content('a') %>
+  #   <div class="avatar">a</div>
+  # With content
+  #   <%= render Itacomp::Avatar.new.with_content(image_tag(@user.avatar)) %>
+  #   <div class="avatar">A</div>
+  # With yield content
+  #   <%= render Itacomp::Avatar.new do %>
+  #     <% if @user.avatar.present? %>
+  #       <%= image_tag @user.avatar %>
+  #     <% else %>
+  #       <%= @user.name.first %>
+  #     <% end %>
+  #   <% end %>
+  #   <div class="avatar">A</div>
+  # With size options (:xs, :sm, :md, :lg, :xl, :xxl)
+  #   <%= render itacomp::avatar(size: :xs).new.with_content('a') %>
+  #   <div class="avatar size-xs">a</div>
+  # With bg options (:primary, :secondary, ecc.)
+  #   <%= render itacomp::avatar(bg: :primary).new.with_content('a') %>
+  #   <div class="avatar avatar-primary">a</div>
+  # With additional class
+  #   <%= render itacomp::avatar(class: 'test').new.with_content('a') %>
+  #   <div class="avatar test">a</div>
+  # 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
+    # Initialize avatar component
+    #
+    # ==== Options
+    # * <tt>size</tt> [Symbol,String], default: <tt>nil</tt>, add ita_size style
+    # * <tt>bg</tt> [Symbol,String], default <tt>nil</tt>, add avatar_bg style
+    # * <tt>class</tt> [String,Array] default <tt>nil</tt> if present is add class style after <tt>avatar</tt>
+    # * <tt>**opts</tt> each key is delegated as tag options
+    # * <tt>yield</tt> avatar content
+    def initialize(size: nil, bg: nil, class: nil ,**opts)
+      opts[:class] = ["avatar", opts[:class]]
+      opts[:class] << ita_size(size) if size.present?
+      opts[:class] << avatar_bg(bg) if bg.present?
+      @opts = opts
+    end
+
+    # generate avatar backgrond class from ITA_TYPES
+    #
+    # ==== Options
+    # * <tt>bg</tt> [Symbol,String], string to make avatar backgrond class
+    def avatar_bg(bg)
+      "avatar-#{ITA_TYPES[bg]}"
+    end
+  end
+end

app/components/itacomp/avatar_component/avatar_component.html.erb

@@ -0,0 +1 @@
+<%= tag.div(content, **@opts) %>

app/components/itacomp/turbo_frame_component.rb

@@ -3,23 +3,24 @@
 module Itacomp
   # Make a bootstrap-italia compatible structure for a [turbo Frame](https://turbo.hotwired.dev/handbook/frames) tag.
   #
-  # @example empty turbo frame
+  # ==== Example  
+  # Empty turbo frame
   #   = render Itacomp::TurboFrameComponent.new
   #
   #   <turbo-frame></turbo-frame>
   #
-  # @example each arguments key is passed to turbo-frame tag
+  # Each arguments key is passed to turbo-frame tag
   #   = render Itacomp::TurboFrameComponent.new(id: 'test', class: 'primary')
   #
   #   <turbo-frame id='test' class='primary'></turbo-frame>
   #
-  # @example turbo fram with block content
+  # Turbo fram with block content
   #   = render Itacomp::TurboFrameComponent.new(id: 'test', class: 'primary') do
   #     <p>text content</p>
   #
   #   <turbo-frame id='test' class='primary'><p>test content</p></turbo-frame>
   #
-  # @example with id and src (to load remote content) and no block content is automatically added a load icon
+  # With id and src (to load remote content) and no block content is automatically added a load icon
   #   = render Itacomp::TurboFrameComponent.new(id: 'nav1', src: books_path )
   #
   #   <turbo-frame id='nav1' src='/books'>
@@ -28,15 +29,16 @@
   #     </div>
   #   </turbo-frame>
   #
-  # @example with id, src and block content
+  # With id, src and block content
   #   = render Itacomp::TurboFrameComponent.new(id: 'nav1', src: books_path ) do
   #     text content
   #
   #   <turbo-frame id='nav1' src='/books'>text content</turbo-frame>
   class TurboFrameComponent < BaseComponent
-    # @option opts [String] :*
-    #   each other key going as tag option
-    # @yield [optional] turbo frame content
+    # Initialize TurboFrameComponent
+    # ==== Options
+    # * <tt>*</tt> [Symbol], each key going as tag option
+    # * <tt>yield</yy> optional turbo frame content
     def initialize(**keys)
       @keys = keys
     end

app/helpers/itacomp/common_helper.rb

@@ -105,7 +105,7 @@
     #
     # ==== Options
     # * <tt>value</tt> [Integer] default <tt>nil</tt>, integer intended as a percentage, if present is percentage of prograss bar, if nil progress bar is set as indeterminate
-    # * <tt>:type</tt> [Stm,String] default <tt>nil</tt>, if present set color of progress bar from the bootstrap-italia type (primary, info, success, warning, alert)
+    # * <tt>:type</tt> [Sym,String] default <tt>nil</tt>, if present set color of progress bar from the bootstrap-italia type (primary, info, success, warning, alert)
     #
     # ==== Examples
     # Without options
@@ -132,5 +132,62 @@
       end
       tag.div tag.div(**opts), class: progress_class
     end
+
+    # return size class from bootstrap-italia size types.
+    #
+    # ==== Options
+    # * <tt>type</tt> [String] default <tt>nil</tt>, if nin or a value not included in ITA_SIZES is set as <tt>:md</tt>
+    #
+    # ==== Example
+    # Whitout params
+    #   ita_size()
+    #   # => "size-md"
+    # with valid params (:xs, :sm, :md, :lg, :xl, :xxl)
+    #   ita_size(:xs)
+    #   # => "size-xs"
+    # with invalid params
+    #   ira_size(:other)
+    #   # => "size-md"
+    def ita_size(type=nil)
+      "size-#{ITA_SIZES[type]}"
+    end
+
+    # return background class from bootstrap-italia color types.
+    #
+    # ==== Options
+    # * <tt>type</tt> [String] default <tt>nil</tt>, if nin or a value not included in ITA_TYPES is set as <tt>:primary</tt>
+    #
+    # ==== Example
+    # Whitout params
+    #   ita_type()
+    #   # => "bg-primary"
+    # with valid params (:primary, :secondary, :success, :danger, :warning, :white, :dark, :black)
+    #   ita_size(:secondary)
+    #   # => "bg-secondary"
+    # with invalid params
+    #   ira_size(:other)
+    #   # => "size-primary"
+    def ita_bg(type=nil)
+      "bg-#{ITA_TYPES[type]}"
+    end
+
+    # return text class from bootstrap-italia color types.
+    #
+    # ==== Options
+    # * <tt>type</tt> [String] default <tt>nil</tt>, if nin or a value not included in ITA_TYPES is set as <tt>:primary</tt>
+    #
+    # ==== Example
+    # Whitout params
+    #   ita_text()
+    #   # => "text-primary"
+    # with valid params (:primary, :secondary, :success, :danger, :warning, :white, :dark, :black)
+    #   ita_text(:secondary)
+    #   # => "text-secondary"
+    # with invalid params
+    #   ira_text(:other)
+    #   # => "text-primary"
+    def ita_text(type=nil)
+      "text-#{ITA_TYPES[type]}"
+    end
   end
 end

lib/itacomp.rb

@@ -3,5 +3,6 @@
 
 module Itacomp
   # this constant define available bootstrap-italia type
-  ITA_TYPES = Hash.new { :primary }.with_indifferent_access.merge(primary: "primary", info: "info", success: "success", warning: "warning", danger: "danger")
+  ITA_TYPES = Hash.new { :primary }.with_indifferent_access.merge(primary: "primary", secondary: "secondary", info: "info", success: "success", warning: "warning", danger: "danger", white: "white", dark: "dark", black: 'black')
+  ITA_SIZES = Hash.new { :md}.with_indifferent_access.merge(xs: "xs", sm: "sm", md: "md", lg: "md", xl: "xl", xxl: "xxl")
 end

test/components/itacomp/avatar_component_test.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Itacomp::AvatarComponentTest < ViewComponent::TestCase
+  test "without params return an empty avatar div" do
+    render_inline Itacomp::AvatarComponent.new
+    assert_selector "div.avatar", text: nil
+  end
+
+  test "avatar with content" do
+    render_inline Itacomp::AvatarComponent.new.with_content('test')
+    assert_selector "div.avatar", text: 'test'
+  end
+
+  test "set size" do
+    render_inline Itacomp::AvatarComponent.new(size: 'md')
+    assert_selector "div.avatar.size-md", text: nil   
+  end
+
+  test "set bg" do
+    render_inline Itacomp::AvatarComponent.new(bg: 'md')
+    assert_selector "div.avatar.avatar-primary", text: nil   
+  end
+
+  test "add id" do
+    render_inline Itacomp::AvatarComponent.new(id: 'test')
+    assert_selector "div#test.avatar", text: nil
+  end
+
+  test "add data" do
+    render_inline Itacomp::AvatarComponent.new(data: {test: 'tost'})
+    assert_selector "div.avatar[data-test='tost']", text: nil   
+  end
+end

test/components/previews/itacomp/avatar_component_preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Itacomp
+  class AvatarComponentPreview < ViewComponent::Preview
+    def default
+      render(AvatarComponent.new(content: "content", size: "l", bg: "primary", class: "class"))
+    end
+  end
+end

test/helpers/common_helper_test.rb

@@ -32,4 +32,25 @@ class CommonHelperTest < ActionView::TestCase
     assert_equal '<div class="progress"><div class="progress-bar" role="progressbar" style="width: 50%" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div></div>', ita_progress(50)
     assert_equal '<div class="progress progress-color"><div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div></div>', ita_progress(50, type: "primary")
   end
+
+  test "ita_size" do
+    assert_equal "size-md", ita_size
+    assert_equal "size-xs", ita_size(:xs)
+    assert_equal "size-xs", ita_size("xs")
+    assert_equal "size-md", ita_size(:other)
+  end
+
+  test "ita_bg" do
+    assert_equal "bg-primary", ita_bg
+    assert_equal "bg-secondary", ita_bg(:secondary)
+    assert_equal "bg-secondary", ita_bg("secondary")
+    assert_equal "bg-primary", ita_bg(:other)
+  end
+
+  test "ita_text" do
+    assert_equal "text-primary", ita_text
+    assert_equal "text-secondary", ita_text(:secondary)
+    assert_equal "text-secondary", ita_text("secondary")
+    assert_equal "text-primary", ita_text(:other)
+  end
 end