yattho_view_components 0.0.1

data/previews/docs/tooltip_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Docs
+  class TooltipPreview < ViewComponent::Preview
+    def default; end
+
+    def wrapping_another_component; end
+
+    def with_a_direction; end
+
+    def with_an_alignment; end
+
+    def without_a_delay; end
+  end
+end

data/previews/docs/truncate_preview/custom_size.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>

data/previews/docs/truncate_preview/default.html.erb

@@ -0,0 +1,3 @@
+<div class="col-2">
+  <%= render(Yattho::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+</div>

data/previews/docs/truncate_preview/expandable.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>

data/previews/docs/truncate_preview/inline.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>

data/previews/docs/truncate_preview/with_html_content.html.erb

@@ -0,0 +1,3 @@
+<%= render(Yattho::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
+  <span>branch-name-that-is-really-long</span>
+<% end %>

data/previews/docs/truncate_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Docs
+  class TruncatePreview < ViewComponent::Preview
+    def default; end
+
+    def inline; end
+
+    def expandable; end
+
+    def custom_size; end
+
+    def with_html_content; end
+  end
+end

data/previews/yattho/alpha/action_list_preview/heading.html.erb

@@ -0,0 +1,4 @@
+<%# this <ul> is necessary here to make axe happy %>
+<ul>
+  <%= render(Yattho::Alpha::ActionList::Heading.new(scheme: scheme, list_id: list_id, title: title, subtitle: subtitle)) %>
+</ul>

data/previews/yattho/alpha/action_list_preview.rb

@@ -0,0 +1,367 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label ActionList
+    class ActionListPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def playground(
+        role: Yattho::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Yattho::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Yattho::Alpha::ActionList.new(
+                 role: role,
+                 scheme: scheme,
+                 show_dividers: show_dividers,
+                 aria: { label: "Action List" }
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+          component.with_item(label: "Item two", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+          component.with_item(label: "Item three", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+          end
+        end
+      end
+
+      # @label Default
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def default(
+        role: Yattho::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Yattho::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Yattho::Alpha::ActionList.new(
+                 role: role,
+                 scheme: scheme,
+                 show_dividers: show_dividers,
+                 aria: { label: "Action List" }
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+          component.with_item(label: "Item two", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+          component.with_item(label: "Item three", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+          end
+        end
+      end
+
+      # @label Leading visuals
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def leading_visuals(
+        role: Yattho::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Yattho::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Yattho::Alpha::ActionList.new(
+                 role: role,
+                 scheme: scheme,
+                 show_dividers: show_dividers,
+                 aria: { label: "Action List" }
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Leading SVG visual", href: "/") do |item|
+            item.with_leading_visual_svg do
+              '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe
+            end
+          end
+          component.with_item(label: "Custom content", href: "/") do |item|
+            item.with_leading_visual_content do
+              '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe
+            end
+          end
+        end
+      end
+
+      # @label Divider
+      #
+      # @param scheme [Symbol] select [subtle, filled]
+      def divider(
+        scheme: Yattho::Alpha::ActionList::Divider::DEFAULT_SCHEME
+      )
+        render(Yattho::Alpha::ActionList::Divider.new(scheme: scheme))
+      end
+
+      # @label Heading
+      #
+      # @param scheme [Symbol] select [subtle, filled]
+      # @param title text
+      # @param subtitle text
+      # @param list_id text
+      def heading(
+        scheme: Yattho::Alpha::ActionList::Heading::DEFAULT_SCHEME,
+        title: "This is a title",
+        list_id: "unique-id",
+        subtitle: "This is a subtitle"
+      )
+        render_with_template(
+          locals: {
+            scheme: scheme,
+            title: title,
+            list_id: list_id,
+            subtitle: subtitle
+          }
+        )
+      end
+
+      # @label Item [playground]
+      #
+      # @param label text
+      # @param truncate_label toggle
+      # @param href text
+      # @param size [Symbol] select [medium, large, xlarge]
+      # @param scheme [Symbol] select [default, danger]
+      # @param disabled toggle
+      # @param description text
+      # @param description_scheme [Symbol] select [inline, block]
+      # @param active toggle
+      # @param leading_visual_icon [Symbol] octicon
+      # @param leading_visual_avatar_src text
+      # @param trailing_visual_icon [Symbol] octicon
+      # @param trailing_visual_label text
+      # @param trailing_visual_counter number
+      # @param trailing_visual_text text
+      # @param private_leading_action_icon [Symbol] octicon
+      # @param private_trailing_action_icon [Symbol] octicon
+      # @param trailing_action toggle
+      # @param trailing_action_on_hover toggle
+      # @param tooltip toggle
+      def item(
+        label: "Label",
+        truncate_label: false,
+        href: nil,
+        size: Yattho::Alpha::ActionList::Item::DEFAULT_SIZE,
+        scheme: Yattho::Alpha::ActionList::Item::DEFAULT_SCHEME,
+        disabled: false,
+        description: nil,
+        description_scheme: Yattho::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME,
+        active: false,
+        expanded: false,
+        leading_visual_icon: nil,
+        leading_visual_avatar_src: nil,
+        trailing_visual_icon: nil,
+        trailing_visual_label: nil,
+        trailing_visual_counter: nil,
+        trailing_visual_text: nil,
+        private_leading_action_icon: nil,
+        private_trailing_action_icon: nil,
+        trailing_action_on_hover: false,
+        trailing_action: false,
+        tooltip: false
+      )
+        list = Yattho::Alpha::ActionList.new(aria: { label: "Action List" })
+        list.with_item(
+          label: label,
+          truncate_label: truncate_label,
+          href: href,
+          size: size,
+          scheme: scheme,
+          disabled: disabled,
+          description_scheme: description_scheme,
+          active: active,
+          expanded: expanded,
+          id: "tooltip-test"
+        ) do |item|
+          if leading_visual_icon && leading_visual_icon != :none
+            item.with_leading_visual_icon(icon: leading_visual_icon)
+          elsif leading_visual_avatar_src
+            item.with_leading_visual_avatar(src: leading_visual_avatar_src, alt: "An avatar")
+          end
+
+          if trailing_visual_icon && trailing_visual_icon != :none
+            item.with_trailing_visual_icon(icon: trailing_visual_icon)
+          elsif trailing_visual_label
+            item.with_trailing_visual_label { trailing_visual_label }
+          elsif trailing_visual_counter
+            item.with_trailing_visual_counter(count: trailing_visual_counter)
+          elsif trailing_visual_text
+            item.with_trailing_visual_text(trailing_visual_text)
+          end
+
+          if private_leading_action_icon && private_leading_action_icon != :none
+            item.with_private_leading_action_icon(icon: private_leading_action_icon)
+          elsif private_trailing_action_icon
+            item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
+          end
+
+          item.with_trailing_action(show_on_hover: trailing_action_on_hover, icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
+
+          item.description { description } if description
+
+          item.with_tooltip(text: "Tooltip text", for_id: "tooltip-test", type: :description) if tooltip
+        end
+
+        render(list)
+      end
+
+      # @label Item [default]
+      def item_default
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/")
+        end
+      end
+
+      # @label Item [size large]
+      def item_size_large
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", size: :large)
+        end
+      end
+
+      # @label Item [size xlarge]
+      def item_size_xlarge
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", size: :xlarge)
+        end
+      end
+
+      # @label Item [leading visual]
+      def item_leading_visual
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Item with leading visual", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+        end
+      end
+
+      # @label Item [trailing visual]
+      def item_trailing_visual
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Item with trailing visual", href: "/") do |item|
+            item.with_trailing_visual_icon(icon: :star)
+          end
+        end
+      end
+
+      # @label Item [leading and trailing visual]
+      def item_leading_trailing_visual
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Item with trailing visual", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+            item.with_trailing_visual_icon(icon: :star)
+          end
+        end
+      end
+
+      # @label Item [description]
+      def item_with_description
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
+            item.with_description.with_content("This is a description")
+          end
+        end
+      end
+
+      # @label Item [inline description]
+      def item_with_description_inline
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
+            item.with_description.with_content("This is a description")
+          end
+        end
+      end
+
+      # @label Item [trailing action]
+      def item_trailing_action
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
+            item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
+          end
+        end
+      end
+
+      # @label Item [trailing action on hover]
+      def item_trailing_action_hover
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
+            item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
+          end
+        end
+      end
+
+      # @label Item [danger]
+      def item_danger
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Danger item", href: "/", scheme: :danger)
+        end
+      end
+
+      # @label Item [disabled]
+      def item_disabled
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Disabled item", href: "/", disabled: true)
+        end
+      end
+
+      # @label Item [wrap label]
+      def item_wrap_label
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
+        end
+      end
+
+      # @label Item [truncate label]
+      def item_truncate_label
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
+        end
+      end
+
+      # @label Item [active]
+      def item_active
+        render(Yattho::Alpha::ActionList.new(
+                 aria: { label: "List heading" }
+               )) do |component|
+          component.with_item(label: "Active item", href: "/", active: true)
+        end
+      end
+    end
+  end
+end

data/previews/yattho/alpha/auto_complete_preview.rb

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+
+require_relative "../url_helpers"
+
+module Yattho
+  module Alpha
+    # @label AutoComplete
+    class AutoCompletePreview < ViewComponent::Preview
+      # @label Playground
+      # @param label_text text
+      # @param is_label_visible toggle
+      # @param is_label_inline toggle
+      # @param with_icon toggle
+      # @param is_clearable toggle
+      def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Yattho/ComponentNameMigration
+        render(
+          Yattho::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
+        # rubocop:enable Yattho/ComponentNameMigration
+      end
+
+      # @label Default Options
+      # @param label_text text
+      # @param is_label_visible toggle
+      # @param is_label_inline toggle
+      # @param with_icon toggle
+      # @param is_clearable toggle
+      def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Yattho/ComponentNameMigration
+        render(
+          Yattho::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
+        # rubocop:enable Yattho/ComponentNameMigration
+      end
+
+      # @!group More examples
+
+      # @label AutoComplete with non-visible label
+      def with_non_visible_label
+        # rubocop:disable Yattho/ComponentNameMigration
+        render(
+          Yattho::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-1",
+            list_id: "test-id-1",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: false
+          )
+        )
+        # rubocop:enable Yattho/ComponentNameMigration
+      end
+
+      # @label AutoComplete with inline label
+      def with_inline_label
+        # rubocop:disable Yattho/ComponentNameMigration
+        render(
+          Yattho::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-2",
+            list_id: "test-id-2",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_inline: true
+          )
+        )
+        # rubocop:enable Yattho/ComponentNameMigration
+      end
+
+      # @label AutoComplete with search icon
+      def with_icon
+        # rubocop:disable Yattho/ComponentNameMigration
+        render(
+          Yattho::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-3",
+            list_id: "test-id-3",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            with_icon: true
+          )
+        )
+        # rubocop:enable Yattho/ComponentNameMigration
+      end
+
+      # @label AutoComplete with clear button
+      def with_clear_button
+        # rubocop:disable Yattho/ComponentNameMigration
+        render(
+          Yattho::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-4",
+            list_id: "test-id-4",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_clearable: true
+          )
+        )
+        # rubocop:enable Yattho/ComponentNameMigration
+      end
+
+      # @!endgroup
+    end
+  end
+end

data/previews/yattho/alpha/banner_preview/with_action_button.html.erb

@@ -0,0 +1,4 @@
+<%= render(Yattho::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+  <% component.with_action_button(size: :medium) { "Take action" } %>
+  <%= content %>
+<% end %>

data/previews/yattho/alpha/banner_preview/with_action_content.html.erb

@@ -0,0 +1,6 @@
+<%= render(Yattho::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+  <% component.with_action_content do %>
+    <%= render(Yattho::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
+  <% end %>
+  <%= content %>
+<% end %>

data/previews/yattho/alpha/banner_preview.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label Banner
+    class BannerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param full_when_narrow toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param description text
+      # @param reappear [Boolean]
+      def playground(full: false, full_when_narrow: false, dismissible: false, icon: :people, scheme: Yattho::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner!", description: nil)
+        icon = nil if icon == :none
+        render(Yattho::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, description: description, reappear: reappear)) { content }
+      end
+
+      # @label Default
+      def default
+        render(Yattho::Alpha::Banner.new) { "This is a banner." }
+      end
+
+      # @!group Schemes
+      #
+      # @label Default scheme
+      def scheme_default
+        render(Yattho::Alpha::Banner.new) { "This is a default banner." }
+      end
+
+      # @label Danger
+      def scheme_danger
+        render(Yattho::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
+      end
+
+      # @label Success
+      def scheme_success
+        render(Yattho::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
+      end
+
+      # @label Warning
+      def scheme_warning
+        render(Yattho::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
+      end
+      #
+      # @!endgroup
+
+      # @label Dismissable
+      def dismissable
+        render(Yattho::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
+      end
+
+      # @!group Full Width
+      #
+      # @label Full width
+      def full_width
+        render(Yattho::Alpha::Banner.new(full: true)) { "This is a full width banner." }
+      end
+
+      # @label Full width in Narrow Viewport
+      def full_width_in_narrow_viewport
+        render(Yattho::Alpha::Banner.new(full: true, full_when_narrow: true)) { "This is a full width banner in a narrow viewport." }
+      end
+      #
+      # @!endgroup
+
+      # @label With action button
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param reappear [Boolean]
+      def with_action_button(full: false, dismissible: false, icon: :people, scheme: Yattho::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
+      end
+
+      # @label With action content
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param reappear [Boolean]
+      def with_action_content(full: false, dismissible: false, icon: :people, scheme: Yattho::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
+      end
+    end
+  end
+end