primer_view_components 0.0.33 → 0.0.38

data/app/components/primer/clipboard_copy_component.ts

@@ -0,0 +1,28 @@
+import '@github/clipboard-copy-element'
+
+function toggleSVG(svg: SVGElement) {
+  if (svg.style.display === '' || svg.style.display === 'block') {
+    svg.style.display = 'none'
+  } else {
+    svg.style.display = 'block'
+  }
+}
+
+// Toggle a copy button.
+function toggleCopyButton(button: HTMLElement) {
+  const [clippyIcon, checkIcon] = button.querySelectorAll<SVGElement>('.octicon')
+
+  if (clippyIcon) {
+    toggleSVG(clippyIcon)
+  }
+  if (checkIcon) {
+    toggleSVG(checkIcon)
+  }
+}
+
+document.addEventListener('clipboard-copy', function ({target}) {
+  if (!(target instanceof HTMLElement)) return
+  toggleCopyButton(target)
+
+  setTimeout(toggleCopyButton, 2000, target)
+})

data/app/components/primer/close_button.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use CloseButton to render an `×` without default button styles.
+  #
+  # @accessibility
+  #   CloseButton has a default `aria-label` of "Close" to provides assistive technologies with an accessible label.
+  #   You may choose to override this label with something more descriptive via [system_arguments][0].
+  # [0]: https://primer.style/view-components/system-arguments#html-attributes
+  class CloseButton < Primer::Component
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
+
+    # @example Default
+    #   <%= render(Primer::CloseButton.new) %>
+    #
+    # @param type [Symbol] <%= one_of(Primer::CloseButton::TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(type: DEFAULT_TYPE, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :button
+      @system_arguments[:block] = false
+      @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+      @system_arguments[:classes] = class_names(
+        "close-button",
+        system_arguments[:classes]
+      )
+      @system_arguments[:"aria-label"] ||= "Close"
+    end
+
+    def call
+      render(Primer::BaseButton.new(**@system_arguments)) do
+        render(Primer::OcticonComponent.new("x"))
+      end
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -10,6 +10,7 @@ module Primer
     include ClassNameHelper
     include FetchOrFallbackHelper
     include OcticonsHelper
+    include TestSelectorHelper
     include JoinStyleArgumentsHelper
     include ViewHelper
     include Status::Dsl

data/app/components/primer/dropdown_component.rb

@@ -11,7 +11,7 @@ module Primer
     # Required context menu for the dropdown
     #
     # @param direction [Symbol] <%= one_of(Primer::Dropdown::MenuComponent::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass :dark for dark mode theming
+    # @param scheme [Symbol] Pass `:dark` for dark mode theming
     # @param header [String] Optional string to display as the header
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :menu, Primer::Dropdown::MenuComponent

data/app/components/primer/dropdown_menu_component.rb

@@ -36,7 +36,7 @@ module Primer
     #   </div>
     #
     # @param direction [Symbol] <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass :dark for dark mode theming
+    # @param scheme [Symbol] Pass `:dark` for dark mode theming
     # @param header [String] Optional string to display as the header
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)

data/app/components/primer/flash_component.rb

@@ -15,18 +15,18 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
-    DEFAULT_VARIANT = :default
-    VARIANT_MAPPINGS = {
-      DEFAULT_VARIANT => "",
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :warning => "flash-warn",
       :danger => "flash-error",
       :success => "flash-success"
     }.freeze
-    # @example Variants
+    # @example Schemes
     #   <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
+    #   <%= render(Primer::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
+    #   <%= render(Primer::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
+    #   <%= render(Primer::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
     #
     # @example Full width
     #   <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
@@ -49,9 +49,9 @@ module Primer
     # @param spacious [Boolean] Whether to add margin to the bottom of the component.
     # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
     # @param icon [String] Name of Octicon icon to use.
-    # @param variant [Symbol] <%= one_of(Primer::FlashComponent::VARIANT_MAPPINGS.keys) %>
+    # @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **system_arguments)
+    def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
       @icon = icon
       @dismissible = dismissible
       @system_arguments = system_arguments
@@ -59,7 +59,7 @@ module Primer
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "flash",
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
         "flash-full": full
       )
       @system_arguments[:mb] ||= spacious ? 4 : nil

data/app/components/primer/foo_bar.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/primer/foo_bar.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/primer/heading_component.rb

@@ -1,19 +1,47 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use the Heading component to wrap a component that will create a heading element
+  # Heading can be used to communicate page organization and hierarchy.
+  #
+  # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is
+  #   appropriate for the page context.
+  # - Use Heading as the title of a section or sub section.
+  # - Do not use Heading for styling alone. To style text without conveying heading semantics,
+  #   consider using <%= link_to_component(Primer::TextComponent) %> with relevant <%= link_to_typography_docs %>.
+  # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should
+  #   increase by one in ascending order.
+  #
+  # @accessibility
+  #   Headings convey semantic meaning. Assistive technology users rely on headings to quickly navigate and scan information on a page.
+  #   Inappropriate use of headings can lead to a confusing experience.
+  #   [Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)
   class HeadingComponent < Primer::Component
     status :beta
 
+    TAG_FALLBACK = :h2
+    TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
     # @example Default
-    #   <%= render(Primer::HeadingComponent.new) { "H1 Text" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
     #   <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
     #   <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
+    #
+    # @example With `font_size`
+    #   <%= render(Primer::HeadingComponent.new(tag: :h1, font_size: 6)) { "h1 tag, font_size 6" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h2, font_size: 3)) { "h2 tag, font_size 3" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h3, font_size: 2)) { "h3 tag, font_size 2" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h4, font_size: 0)) { "h4 tag, font_size 0" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h5, font_size: 1)) { "h5 tag, font_size 1" } %>
+    #   <%= render(Primer::HeadingComponent.new(tag: :h6, font_size: 4)) { "h6 tag, font_size 4" } %>
     #
+    # @param tag [String]  <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
+    def initialize(tag:, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :h1
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_FALLBACK)
     end
 
     def call

data/app/components/primer/hidden_text_expander.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use HiddenTextExpander to indicate and toggle hidden text.
+  class HiddenTextExpander < Primer::Component
+    # @example Default
+    #   <%= render(Primer::HiddenTextExpander.new) %>
+    #
+    # @example Inline
+    #   <%= render(Primer::HiddenTextExpander.new(inline: true)) %>
+    #
+    # @example Styling the button
+    #   <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "my-custom-class" })) %>
+    #
+    # @param inline [Boolean] Whether or not the expander is inline.
+    # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(inline: false, button_arguments: {}, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span
+      @system_arguments[:classes] = class_names(
+        "hidden-text-expander",
+        @system_arguments[:classes],
+        "inline" => inline
+      )
+
+      @button_arguments = button_arguments
+      @button_arguments[:"aria-expanded"] = false
+      @button_arguments[:classes] = class_names(
+        "ellipsis-expander",
+        button_arguments[:classes]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) do
+        render(Primer::BaseButton.new(**@button_arguments)) { "&hellip;" }
+      end
+    end
+  end
+end

data/app/components/primer/link_component.rb

@@ -5,9 +5,9 @@ module Primer
   class LinkComponent < Primer::Component
     status :beta
 
-    DEFAULT_VARIANT = :default
-    VARIANT_MAPPINGS = {
-      DEFAULT_VARIANT => "",
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :primary => "Link--primary",
       :secondary => "Link--secondary"
     }.freeze
@@ -21,9 +21,9 @@ module Primer
     # @example Muted
     #   <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
     #
-    # @example Variants
-    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
-    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
+    # @example Schemes
+    #   <%= render(Primer::LinkComponent.new(href: "#", scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", scheme: :secondary)) { "Secondary" } %>
     #
     # @example Without underline
     #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
@@ -33,17 +33,17 @@ module Primer
     #
     # @param tag [String]  <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
     # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
-    # @param variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
+    # @param scheme [Symbol] <%= one_of(Primer::LinkComponent::SCHEME_MAPPINGS.keys) %>
     # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
     # @param underline [Boolean] Whether or not to underline the link.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(href: nil, tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
+    def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:href] = href
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
         "Link" => tag == :span,
         "Link--muted" => muted,
         "no-underline" => !underline

data/app/components/primer/navigation/tab_component.html.erb

@@ -1,9 +1,11 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= icon %>
-  <% if text.present? %>
-    <%= text %>
-  <% else %>
-    <%= content %>
+<%= wrapper do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <%= icon %>
+    <% if text.present? %>
+      <%= text %>
+    <% else %>
+      <%= content %>
+    <% end %>
+    <%= counter %>
   <% end %>
-  <%= counter %>
 <% end %>

data/app/components/primer/navigation/tab_component.rb

@@ -65,30 +65,43 @@ module Primer
       #     <% c.counter(count: 10) %>
       #   <% end %>
       #
+      # @example Inside a list
+      #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
+      #     <% c.text { "Tab" } %>
+      #   <% end %>
+      #
       # @example With custom HTML
-      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do %>
       #     <div>
       #       This is my <strong>custom HTML</strong>
       #     </div>
       #   <% end %>
       #
+      # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
       # @param selected [Boolean] Whether the Tab is selected or not.
       # @param with_panel [Boolean] Whether the Tab has an associated panel.
       # @param icon_classes [Boolean] Classes that must always be applied to icons.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments)
+      def initialize(list: false, selected: false, with_panel: false, icon_classes: "", wrapper_arguments: {}, **system_arguments)
         @selected = selected
         @icon_classes = icon_classes
+        @list = list
+
         @system_arguments = system_arguments
-        @system_arguments[:role] = :tab
 
         if with_panel
           @system_arguments[:tag] ||= :button
           @system_arguments[:type] = :button
+          @system_arguments[:role] = :tab
         else
           @system_arguments[:tag] ||= :a
         end
 
+        @wrapper_arguments = wrapper_arguments
+        @wrapper_arguments[:tag] = :li
+        @wrapper_arguments[:display] ||= :flex
+
         return unless @selected
 
         if @system_arguments[:tag] == :a
@@ -97,6 +110,17 @@ module Primer
           @system_arguments[:"aria-selected"] = true
         end
       end
+
+      def wrapper
+        unless @list
+          yield
+          return # returning `yield` caused a double render
+        end
+
+        render(Primer::BaseComponent.new(**@wrapper_arguments)) do
+          yield
+        end
+      end
     end
   end
 end

data/app/components/primer/octicon_component.rb

@@ -5,10 +5,6 @@ module Primer
   class OcticonComponent < Primer::Component
     status :beta
 
-    include ClassNameHelper
-    include TestSelectorHelper
-    include OcticonsHelper
-
     SIZE_DEFAULT = :small
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,

data/app/components/primer/primer.d.ts

@@ -1,3 +1,4 @@
-import './auto_complete_component';
+import './auto_complete/auto_complete';
+import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,3 +1,4 @@
-import './auto_complete_component';
+import './auto_complete/auto_complete';
+import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1,3 +1,4 @@
-import './auto_complete_component'
+import './auto_complete/auto_complete'
+import './clipboard_copy_component'
 import './tab_container_component'
 import './time_ago_component'

data/app/components/primer/state_component.rb

@@ -5,21 +5,21 @@ module Primer
   class StateComponent < Primer::Component
     status :beta
 
-    COLOR_DEFAULT = :default
-    NEW_COLOR_MAPPINGS = {
+    SCHEME_DEFAULT = :default
+    NEW_SCHEME_MAPPINGS = {
       open: "State--open",
       closed: "State--closed",
       merged: "State--merged"
     }.freeze
 
-    DEPRECATED_COLOR_MAPPINGS = {
-      COLOR_DEFAULT => "",
+    DEPRECATED_SCHEME_MAPPINGS = {
+      SCHEME_DEFAULT => "",
       :green => "State--open",
       :red => "State--closed",
       :purple => "State--merged"
     }.freeze
-    COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
-    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+    SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
@@ -29,29 +29,29 @@ module Primer
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
+    TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
 
     # @example Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
     #
-    # @example Colors
+    # @example Schemes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :open)) { "Open" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :closed)) { "Closed" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :merged)) { "Merged" } %>
     #
     # @example Sizes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
     #
     # @param title [String] `title` HTML attribute.
-    # @param color [Symbol] Background color. <%= one_of(Primer::StateComponent::COLOR_OPTIONS) %>
+    # @param scheme [Symbol] Background color. <%= one_of(Primer::StateComponent::SCHEME_OPTIONS) %>
     # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       title:,
-      color: COLOR_DEFAULT,
+      scheme: SCHEME_DEFAULT,
       tag: TAG_DEFAULT,
       size: SIZE_DEFAULT,
       **system_arguments
@@ -62,7 +62,7 @@ module Primer
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "State",
-        COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end