diff --git a/app/assets/images/itacomp/upload-drag-drop-icon.svg b/app/assets/images/itacomp/upload-drag-drop-icon.svg new file mode 100755 index 0000000..3b52627 --- /dev/null +++ b/app/assets/images/itacomp/upload-drag-drop-icon.svg @@ -0,0 +1,21 @@ + + + + icon + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/components/itacomp/avatar_component.rb b/app/components/itacomp/avatar_component.rb new file mode 100644 index 0000000..fcd9c48 --- /dev/null +++ b/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 %> + #
+ # With content + # <%= render itacomp::avatar.new.with_content('a') %> + #
a
+ # With content + # <%= render Itacomp::Avatar.new.with_content(image_tag(@user.avatar)) %> + #
A
+ # With yield content + # <%= render Itacomp::Avatar.new do %> + # <% if @user.avatar.present? %> + # <%= image_tag @user.avatar %> + # <% else %> + # <%= @user.name.first %> + # <% end %> + # <% end %> + #
A
+ # With size options (:xs, :sm, :md, :lg, :xl, :xxl) + # <%= render itacomp::avatar(size: :xs).new.with_content('a') %> + #
a
+ # With bg options (:primary, :secondary, ecc.) + # <%= render itacomp::avatar(bg: :primary).new.with_content('a') %> + #
a
+ # With additional class + # <%= render itacomp::avatar(class: 'test').new.with_content('a') %> + #
a
+ # With other options + # <%= render itacomp::avatar(id: "my_avatar", data: {turbo_frame: 'main'}).new.with_content('a') %> + #
a
+ class AvatarComponent < BaseComponent + # Initialize avatar component + # + # ==== Options + # * size [Symbol,String], default: nil, add ita_size style + # * bg [Symbol,String], default nil, add avatar_bg style + # * class [String,Array] default nil if present is add class style after avatar + # * **opts each key is delegated as tag options + # * yield 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 + # * bg [Symbol,String], string to make avatar backgrond class + def avatar_bg(bg) + "avatar-#{ITA_TYPES[bg]}" + end + end +end diff --git a/app/components/itacomp/avatar_component/avatar_component.html.erb b/app/components/itacomp/avatar_component/avatar_component.html.erb new file mode 100644 index 0000000..fc71c09 --- /dev/null +++ b/app/components/itacomp/avatar_component/avatar_component.html.erb @@ -0,0 +1 @@ +<%= tag.div(content, **@opts) %> diff --git a/app/components/itacomp/turbo_frame_component.rb b/app/components/itacomp/turbo_frame_component.rb index 6410f0e..dfd63a8 100644 --- a/app/components/itacomp/turbo_frame_component.rb +++ b/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 # # # - # @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') # # # - # @example turbo fram with block content + # Turbo fram with block content # = render Itacomp::TurboFrameComponent.new(id: 'test', class: 'primary') do #

text content

# #

test content

 # - # @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 ) # # @@ -28,15 +29,16 @@ module Itacomp # # # - # @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 # # text content class TurboFrameComponent < BaseComponent - # @option opts [String] :* - # each other key going as tag option - # @yield [optional] turbo frame content + # Initialize TurboFrameComponent + # ==== Options + # * * [Symbol], each key going as tag option + # * yield optional turbo frame content def initialize(**keys) @keys = keys end diff --git a/app/helpers/itacomp/common_helper.rb b/app/helpers/itacomp/common_helper.rb index 1b59b3e..30c137c 100644 --- a/app/helpers/itacomp/common_helper.rb +++ b/app/helpers/itacomp/common_helper.rb @@ -105,7 +105,7 @@ def ita_donut(value = 0, **opts) # # ==== Options # * value [Integer] default nil, integer intended as a percentage, if present is percentage of prograss bar, if nil progress bar is set as indeterminate - # * :type [Stm,String] default nil, if present set color of progress bar from the bootstrap-italia type (primary, info, success, warning, alert) + # * :type [Sym,String] default nil, if present set color of progress bar from the bootstrap-italia type (primary, info, success, warning, alert) # # ==== Examples # Without options @@ -132,5 +132,62 @@ def ita_progress(value = nil, type: nil) end tag.div tag.div(**opts), class: progress_class end + + # return size class from bootstrap-italia size types. + # + # ==== Options + # * type [String] default nil, if nin or a value not included in ITA_SIZES is set as :md + # + # ==== 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 + # * type [String] default nil, if nin or a value not included in ITA_TYPES is set as :primary + # + # ==== 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 + # * type [String] default nil, if nin or a value not included in ITA_TYPES is set as :primary + # + # ==== 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 diff --git a/lib/itacomp.rb b/lib/itacomp.rb index 8a43170..a0e54e9 100644 --- a/lib/itacomp.rb +++ b/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 diff --git a/test/components/itacomp/avatar_component_test.rb b/test/components/itacomp/avatar_component_test.rb new file mode 100644 index 0000000..b4a710c --- /dev/null +++ b/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 diff --git a/test/components/previews/itacomp/avatar_component_preview.rb b/test/components/previews/itacomp/avatar_component_preview.rb new file mode 100644 index 0000000..73525e5 --- /dev/null +++ b/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 diff --git a/test/helpers/common_helper_test.rb b/test/helpers/common_helper_test.rb index 9c0624d..43d4887 100644 --- a/test/helpers/common_helper_test.rb +++ b/test/helpers/common_helper_test.rb @@ -32,4 +32,25 @@ class CommonHelperTest < ActionView::TestCase assert_equal '
', ita_progress(50) assert_equal '
', 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