primer_view_components 0.0.53 → 0.0.57

data/app/components/primer/tab_nav_component.rb

@@ -1,151 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
-  class TabNavComponent < Primer::Component
-    include Primer::TabbedComponentHelper
-
-    status :beta
-
-    DEFAULT_EXTRA_ALIGN = :left
-    EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
-
-    # Tabs to be rendered. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
-    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
-    #
-    # @param panel_id [String] Only applies if `with_panel` is `true`. Unique ID of panel.
-    # @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] = class_names(
-        "tabnav-tab",
-        system_arguments[:classes]
-      )
-
-      Primer::Navigation::TabComponent.new(
-        selected: selected,
-        with_panel: @with_panel,
-        **system_arguments
-      )
-    }
-
-    # Renders extra content to the `TabNav`. This will be rendered after the tabs.
-    #
-    # @param align [Symbol] <%= one_of(Primer::TabNavComponent::EXTRA_ALIGN_OPTIONS) %>
-    renders_one :extra, lambda { |align: DEFAULT_EXTRA_ALIGN, &block|
-      @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, DEFAULT_EXTRA_ALIGN)
-
-      view_context.capture { block&.call }
-    }
-
-    # @example Default
-    #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @example With icons and counters
-    #   <%= render(Primer::TabNavComponent.new(label: "With icons and counters")) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 2" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 3" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With panels
-    #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true, panel_id: "panel-1", id: "tab-1") do |t| %>
-    #       <% t.text { "Tab 1" } %>
-    #       <% t.panel do %>
-    #         Panel 1
-    #       <% end %>
-    #     <% end %>
-    #     <% c.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
-    #       <% t.text { "Tab 2" } %>
-    #       <% t.panel do %>
-    #         Panel 2
-    #       <% end %>
-    #     <% end %>
-    #     <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
-    #       <% t.text { "Tab 3" } %>
-    #       <% t.panel do %>
-    #         Panel 3
-    #       <% end %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With extra content
-    #   <%= render(Primer::TabNavComponent.new(label: "With extra content")) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #     <% c.extra do %>
-    #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Adding extra content after the tabs
-    #   <%= render(Primer::TabNavComponent.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #     <% c.extra(align: :right) do %>
-    #       <div>
-    #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
-    #       </div>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Customizing the body
-    #   <%= render(Primer::TabNavComponent.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @example Customizing the wrapper
-    #   <%= render(Primer::TabNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %>
-    #   is rendered along with JavaScript behavior. Additionally, the `tab` slot will render as a button as opposed to an anchor.
-    # @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. Only applies if `with_panel` is `true`.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
-      @align = DEFAULT_EXTRA_ALIGN
-      @with_panel = with_panel
-      @system_arguments = system_arguments
-      @body_arguments = body_arguments
-      @wrapper_arguments = wrapper_arguments
-
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        "tabnav",
-        system_arguments[:classes]
-      )
-
-      @body_arguments[:tag] = navigation_tag(with_panel)
-      @body_arguments[:"aria-label"] = label
-      @body_arguments[:role] = :tablist if @with_panel
-      @body_arguments[:classes] = class_names(
-        "tabnav-tabs",
-        body_arguments[:classes]
-      )
-    end
-  end
-end

data/app/components/primer/underline_nav_component.rb

@@ -1,187 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `UnderlineNav` to style navigation with a minimal
-  # underlined selected state, typically used for navigation placed at the top
-  # of the page.
-  class UnderlineNavComponent < Primer::Component
-    include Primer::TabbedComponentHelper
-
-    ALIGN_DEFAULT = :left
-    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
-
-    BODY_TAG_DEFAULT = :div
-    BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
-
-    ACTIONS_TAG_DEFAULT = :div
-    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
-
-    # Use the tabs to list navigation items. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
-    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
-    #
-    # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
-    # @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] = class_names(
-        "UnderlineNav-item",
-        system_arguments[:classes]
-      )
-
-      Primer::Navigation::TabComponent.new(
-        list: list?,
-        selected: selected,
-        with_panel: @with_panel,
-        icon_classes: "UnderlineNav-octicon",
-        **system_arguments
-      )
-    }
-
-    # Use actions for a call to action.
-    #
-    # @param tag [Symbol] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
-      system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
-      system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default")) do |component| %>
-    #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
-    #     <% component.tab(href: "#") { "Item 2" } %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With icons and counters
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "With icons and counters")) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 2" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 3" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Align right
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Align right", align: :right)) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 2" } %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example As a list
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "As a list", body_arguments: { tag: :ul })) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 2" } %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With panels
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
-    #     <% component.tab(selected: true, id: "tab-1", panel_id: "panel-1") do |t| %>
-    #       <% t.text { "Item 1" } %>
-    #       <% t.panel do %>
-    #         Panel 1
-    #       <% end %>
-    #     <% end %>
-    #     <% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
-    #       <% t.text { "Item 2" } %>
-    #       <% t.panel do %>
-    #         Panel 2
-    #       <% end %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Customizing the body
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", body_arguments: { tag: :ul, classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @example Customizing the wrapper
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @param label [String] The `aria-label` on top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the `UnderlineNav` should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %> is
-    #   rendered along with JavaScript behavior.
-    # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::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. Only applies if `with_panel` is `true`.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, wrapper_arguments: {}, **system_arguments)
-      @with_panel = with_panel
-      @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
-      @wrapper_arguments = wrapper_arguments
-
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = navigation_tag(with_panel)
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "UnderlineNav",
-        "UnderlineNav--right" => @align == :right
-      )
-
-      @body_arguments = body_arguments
-      @body_tag = fetch_or_fallback(BODY_TAG_OPTIONS, body_arguments[:tag]&.to_sym, BODY_TAG_DEFAULT)
-
-      @body_arguments[:tag] = @body_tag
-      @body_arguments[:classes] = class_names(
-        "UnderlineNav-body",
-        @body_arguments[:classes],
-        "list-style-none" => list?
-      )
-
-      if with_panel
-        @body_arguments[:role] = :tablist
-        @body_arguments[:"aria-label"] = label
-      else
-        @system_arguments[:"aria-label"] = label
-      end
-    end
-
-    private
-
-    def list?
-      @body_tag == :ul
-    end
-
-    def body
-      Primer::BaseComponent.new(**@body_arguments)
-    end
-  end
-end

data/lib/primer/classify/functional_text_colors.rb

@@ -1,64 +0,0 @@
-# frozen_string_literal: true
-
-require_relative "functional_colors"
-
-module Primer
-  class Classify
-    # Text specific functional colors.
-    # https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#text
-    class FunctionalTextColors < FunctionalColors
-      FUNCTIONAL_OPTIONS = {
-        primary: :text_primary,
-        secondary: :text_secondary,
-        tertiary: :text_tertiary,
-        link: :text_link,
-        success: :text_success,
-        warning: :text_warning,
-        danger: :text_danger,
-        white: :text_white,
-        inverse: :text_inverse
-      }.freeze
-
-      # colors mapping to `nil` will preserve the old classes.
-      # e.g. `text: :orange` will generate `text-orange`.
-      MAPPINGS = {
-        gray_dark: FUNCTIONAL_OPTIONS[:primary],
-        gray: FUNCTIONAL_OPTIONS[:secondary],
-        gray_light: FUNCTIONAL_OPTIONS[:tertiary],
-        blue: FUNCTIONAL_OPTIONS[:link],
-        green: FUNCTIONAL_OPTIONS[:success],
-        yellow: FUNCTIONAL_OPTIONS[:warning],
-        red: FUNCTIONAL_OPTIONS[:danger],
-        white: FUNCTIONAL_OPTIONS[:white]
-      }.freeze
-
-      OPTIONS = [
-        :icon_primary,
-        :icon_secondary,
-        :icon_tertiary,
-        :icon_info,
-        :icon_success,
-        :icon_warning,
-        :icon_danger,
-        *FUNCTIONAL_OPTIONS.values
-      ].freeze
-      OPTIONS_WITHOUT_MAPPINGS = [:black, :orange, :orange_light, :purple, :pink, :inherit].freeze
-      DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
-
-      class << self
-        def color(val)
-          functional_color(
-            key: "color",
-            value: val,
-            mappings: MAPPINGS,
-            non_functional_prefix: "text",
-            functional_prefix: "color",
-            number_prefix: "color",
-            functional_options: OPTIONS,
-            options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
-          )
-        end
-      end
-    end
-  end
-end