yattho_view_components 0.0.1

data/app/components/yattho/alpha/tab_nav.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
+    # For panel navigation, use <%= link_to_component(Yattho::Alpha::TabPanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an
+    #     implicit landmark role of `navigation` which should be reserved for main links.
+    #     For all other set of links, set tag to `:div`.
+    #   - See <%= link_to_component(Yattho::Navigation::TabComponent) %> for additional
+    #     accessibility considerations.
+    class TabNav < Yattho::Component
+      include Yattho::TabbedComponentHelper
+      include Yattho::TabNavHelper
+
+      status :alpha
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Yattho::Navigation::TabComponent) %>.
+      #
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |selected: false, **system_arguments|
+        system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
+        Yattho::Navigation::TabComponent.new(
+          list: true,
+          selected: selected,
+          **system_arguments
+        )
+      }
+
+      # Renders extra content to the `TabNav`. This will be rendered after the tabs.
+      #
+      # @param align [Symbol] <%= one_of(Yattho::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
+      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+
+        view_context.capture { block&.call }
+      }
+
+      # @example Default with `<nav>`
+      #   @description
+      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Yattho::Alpha::TabNav.new(label: "Default")) do |component| %>
+      #       <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% component.with_tab(href: "#") { "Tab 2" } %>
+      #       <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% end %>
+      #
+      # @example Default with `<div>`
+      #   <%= render(Yattho::Alpha::TabNav.new(label: "Default")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Yattho::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 2" } %>
+      #       <% tab.with_counter(count: 10) %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 3" } %>
+      #       <% tab.with_counter(count: 10) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With extra content
+      #   <%= render(Yattho::Alpha::TabNav.new(label: "With extra content")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra do %>
+      #       <%= render(Yattho::ButtonComponent.new(float: :right)) { "Button" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Adding extra content after the tabs
+      #   <%= render(Yattho::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra(align: :right) do %>
+      #       <div>
+      #         <%= render(Yattho::ButtonComponent.new) { "Button" } %>
+      #       </div>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Yattho::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @param tag [Symbol] <%= one_of(Yattho::Alpha::TabNav::TAG_OPTIONS) %>
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, tag: TAG_DEFAULT, body_arguments: {}, **system_arguments)
+        @align = EXTRA_ALIGN_DEFAULT
+        @system_arguments = system_arguments
+        @body_arguments = body_arguments
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = tab_nav_classes(system_arguments[:classes])
+
+        @body_arguments[:tag] = BODY_TAG_DEFAULT
+        @body_arguments[:classes] = tab_nav_body_classes(body_arguments[:classes])
+
+        aria_label_for_page_nav(label)
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/tab_panels.html.erb

@@ -0,0 +1,14 @@
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
+  <%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+    <%= extra if @align == :left %>
+    <%= render Yattho::BaseComponent.new(**@body_arguments) do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    <% end %>
+    <%= extra if @align == :right %>
+  <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
+  <% end %>
+<% end %>

data/app/components/yattho/alpha/tab_panels.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `TabPanels` for tabs with panel navigation.
+    class TabPanels < Yattho::Component
+      include Yattho::TabbedComponentHelper
+      include Yattho::TabNavHelper
+
+      status :alpha
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Yattho::Navigation::TabComponent) %>.
+      #
+      # @param id [String] Unique ID of tab.
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |id:, selected: false, **system_arguments|
+        system_arguments[:id] = id
+        system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
+
+        Yattho::Navigation::TabComponent.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Renders extra content to the `TabPanels`. This will be rendered after the tabs.
+      #
+      # @param align [Symbol] <%= one_of(Yattho::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
+      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+
+        view_context.capture { block&.call }
+      }
+
+      # @example Default
+      #   <%= render(Yattho::Alpha::TabPanels.new(label: "With panels")) do |component| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
+      #       <% tab.with_text { "Tab 1" } %>
+      #       <% tab.with_panel do %>
+      #         Panel 1
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_tab(id: "tab-2") do |tab| %>
+      #       <% tab.with_text { "Tab 2" } %>
+      #       <% tab.with_panel do %>
+      #         Panel 2
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+      # @param align [Symbol] <%= one_of(Yattho::TabNavHelper::EXTRA_ALIGN_OPTIONS) %> - Defaults to <%= Yattho::TabNavHelper::EXTRA_ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = EXTRA_ALIGN_DEFAULT
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = tab_nav_classes(@system_arguments[:classes])
+
+        @body_arguments = deny_tag_argument(**body_arguments)
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = tab_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:'aria-label'] = label
+      end
+    end
+  end
+end