primer_view_components 0.0.34 → 0.0.39

data/app/components/primer/base_button.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+  class BaseButton < Primer::Component
+    status :beta
+
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+    # @example Block
+    #   <%= render(Primer::BaseButton.new(block: :true)) { "Block" } %>
+    #   <%= render(Primer::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
+    #
+    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param block [Boolean] Whether button is full-width with `display: block`.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      type: DEFAULT_TYPE,
+      block: false,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+      if @system_arguments[:tag] == :button
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+      else
+        @system_arguments[:role] = :button
+      end
+
+      @system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        "btn-block" => block
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/base_component.rb

@@ -25,8 +25,6 @@ module Primer
   class BaseComponent < Primer::Component
     status :beta
 
-    include TestSelectorHelper
-
     # ## HTML attributes
     #
     # System arguments include most HTML attributes. For example:
@@ -71,12 +69,14 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `align_items` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %> |
-    # | `align_self` | Symbol | <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %> |
+    # | `align_items` | Symbol | <%= one_of(Primer::Classify::Flex::ALIGN_ITEMS_VALUES) %> |
+    # | `align_self` | Symbol | <%= one_of(Primer::Classify::Flex::ALIGN_SELF_VALUES) %> |
+    # | `direction` | Symbol | <%= one_of(Primer::Classify::Flex::DIRECTION_VALUES) %> |
+    # | `flex` | Integer, Symbol | <%= one_of(Primer::Classify::Flex::FLEX_VALUES) %> |
     # | `flex_grow` | Integer | To enable, set to `0`. |
     # | `flex_shrink` | Integer | To enable, set to `0`. |
-    # | `flex` | Integer, Symbol | <%= one_of([1, :auto]) %> |
-    # | `justify_content` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %> |
+    # | `flex_wrap` | Symbol | <%= one_of(Primer::Classify::Flex::WRAP_MAPPINGS.keys) %> |
+    # | `justify_content` | Symbol | <%= one_of(Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES) %> |
     # | `width` | Symbol | <%= one_of([:fit, :fill]) %> |
     #
     # ## Grid
@@ -89,7 +89,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %> |
+    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
     # | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
     # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
@@ -140,7 +140,6 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
-    # | tag | Symbol | HTML tag name to be passed to `content_tag`. |
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag

data/app/components/primer/blankslate_component.rb

@@ -1,7 +1,10 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Primer::BlankslateComponent when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
+  # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
+  # @accessibility
+  #   `BlankSlate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
+  #   [Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)
   class BlankslateComponent < Primer::Component
     status :beta
 

data/app/components/primer/border_box_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # BorderBox is a Box component with a border.
+  # `BorderBox` is a Box component with a border.
   class BorderBoxComponent < Primer::Component
     status :beta
 

data/app/components/primer/box_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # A basic wrapper component for most layout related needs.
+  # `Box` is a basic wrapper component for most layout related needs.
   class BoxComponent < Primer::Component
     status :stable
 

data/app/components/primer/breadcrumb_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use breadcrumbs to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
+  # Use `Breadcrumb` to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
   class BreadcrumbComponent < Primer::Component
     status :beta
 

data/app/components/primer/button_component.html.erb

@@ -0,0 +1,9 @@
+<%= render Primer::BaseButton.new(**@system_arguments) do %>
+  <%= icon %>
+  <%= content %>
+  <%= counter %>
+
+  <% if @caret %>
+    <%= primer_octicon("triangle-down") %>
+  <% end %>
+<% end %>

data/app/components/primer/button_component.rb

@@ -1,14 +1,19 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonComponent < Primer::Component
+    status :beta
+
     DEFAULT_SCHEME = :default
+    LINK_SCHEME = :link
     SCHEME_MAPPINGS = {
       DEFAULT_SCHEME => "",
       :primary => "btn-primary",
       :danger => "btn-danger",
-      :outline => "btn-outline"
+      :outline => "btn-outline",
+      :invisible => "btn-invisible",
+      LINK_SCHEME => "btn-link"
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
@@ -20,56 +25,90 @@ module Primer
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
-    DEFAULT_TAG = :button
-    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+    # Icon to be rendered in the button.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+    renders_one :icon, Primer::OcticonComponent
 
-    DEFAULT_TYPE = :button
-    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+    # Counter to be rendered in the button.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::CounterComponent) %>.
+    renders_one :counter, Primer::CounterComponent
 
     # @example Schemes
     #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
     #   <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
     #   <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
     #   <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
     #
     # @example Variants
     #   <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
     #
+    # @example Block
+    #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
+    #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
+    #
+    # @example With icons
+    #   <%= render(Primer::ButtonComponent.new) do |c| %>
+    #     <% c.icon(icon: :star) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With counter
+    #   <%= render(Primer::ButtonComponent.new) do |c| %>
+    #     <% c.counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With icons and counter
+    #   <%= render(Primer::ButtonComponent.new) do |c| %>
+    #     <% c.icon(icon: :star) %>
+    #     <% c.counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With caret
+    #   <%= render(Primer::ButtonComponent.new(caret: true)) do %>
+    #     Button
+    #   <% end %>
+    #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
-    # @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
+    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
+    # @param block [Boolean] Whether button is full-width with `display: block`.
+    # @param caret [Boolean] Whether or not to render a caret.
     def initialize(
       scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,
-      tag: DEFAULT_TAG,
-      type: DEFAULT_TYPE,
       group_item: false,
+      block: false,
+      caret: false,
       **system_arguments
     )
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-
-      if @system_arguments[:tag] == :a
-        @system_arguments[:role] = :button
-      else
-        @system_arguments[:type] = type
-      end
+      @scheme = scheme
+      @caret = caret
 
+      @system_arguments = system_arguments
       @system_arguments[:classes] = class_names(
-        "btn",
         system_arguments[:classes],
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
+        "btn" => !link?,
+        "btn-block" => block,
         "BtnGroup-item" => group_item
       )
     end
 
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    private
+
+    def link?
+      @scheme == LINK_SCHEME
     end
   end
 end

data/app/components/primer/button_group.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `ButtonGroup` to render a series of buttons.
+  class ButtonGroup < Primer::Component
+    status :beta
+
+    # Required list of buttons to be rendered.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `variant` and `group_item`.
+    renders_many :buttons, lambda { |**kwargs|
+      kwargs[:group_item] = true
+      kwargs[:variant] = @variant
+
+      Primer::ButtonComponent.new(**kwargs)
+    }
+
+    # @example Default
+    #
+    #   <%= render(Primer::ButtonGroup.new) do |component| %>
+    #     <% component.button { "Default" } %>
+    #     <% component.button(scheme: :primary) { "Primary" } %>
+    #     <% component.button(scheme: :danger) { "Danger" } %>
+    #     <% component.button(scheme: :outline) { "Outline" } %>
+    #     <% component.button(classes: "my-class") { "Custom class" } %>
+    #   <% end %>
+    #
+    # @example Variants
+    #
+    #   <%= render(Primer::ButtonGroup.new(variant: :small)) do |component| %>
+    #     <% component.button { "Default" } %>
+    #     <% component.button(scheme: :primary) { "Primary" } %>
+    #     <% component.button(scheme: :danger) { "Danger" } %>
+    #     <% component.button(scheme: :outline) { "Outline" } %>
+    #   <% end %>
+    #
+    #   <%= render(Primer::ButtonGroup.new(variant: :large)) do |component| %>
+    #     <% component.button { "Default" } %>
+    #     <% component.button(scheme: :primary) { "Primary" } %>
+    #     <% component.button(scheme: :danger) { "Danger" } %>
+    #     <% component.button(scheme: :outline) { "Outline" } %>
+    #   <% end %>
+    #
+    # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(variant: Primer::ButtonComponent::DEFAULT_VARIANT, **system_arguments)
+      @variant = variant
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+
+      @system_arguments[:classes] = class_names(
+        "BtnGroup",
+        system_arguments[:classes]
+      )
+    end
+
+    def render?
+      buttons.any?
+    end
+  end
+end

data/app/components/primer/button_marketing_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  # Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonMarketingComponent < Primer::Component
     DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
@@ -50,14 +50,9 @@ module Primer
       **system_arguments
     )
       @system_arguments = system_arguments
+      @system_arguments[:block] = false
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-
-      if @system_arguments[:tag] == :a
-        @system_arguments[:role] = :button
-      else
-        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-      end
-
+      @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
       @system_arguments[:classes] = class_names(
         "btn-mktg",
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
@@ -67,7 +62,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      render(Primer::BaseButton.new(**@system_arguments)) { content }
     end
   end
 end

data/app/components/primer/clipboard_copy.html.erb

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= render Primer::OcticonComponent.new("clippy") %>
+    <%= render Primer::OcticonComponent.new("check", color: :icon_success, style: "display: none;") %>
+  <% end %>
+<% end %>

data/app/components/primer/clipboard_copy.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
+  class ClipboardCopy < Primer::Component
+    status :alpha
+
+    # @example Default
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) %>
+    #
+    # @example With text instead of icons
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) do %>
+    #     Click to copy!
+    #   <% end %>
+    #
+    # @param label [String] String that will be read to screenreaders when the component is focused
+    # @param value [String] Text to copy into the users clipboard when they click the component
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(label:, value:, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "clipboard-copy"
+      @system_arguments[:value] = value
+      @system_arguments[:"aria-label"] = label
+    end
+  end
+end

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

@@ -0,0 +1 @@
+import '@github/clipboard-copy-element';

data/app/components/primer/clipboard_copy_component.js

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

data/app/components/primer/clipboard_copy_component.ts

@@ -0,0 +1,26 @@
+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 || !checkIcon) return
+
+  toggleSVG(clippyIcon)
+  toggleSVG(checkIcon)
+}
+
+document.addEventListener('clipboard-copy', function ({target}) {
+  if (!(target instanceof HTMLElement)) return
+  toggleCopyButton(target)
+
+  setTimeout(toggleCopyButton, 2000, target)
+})