primer_view_components 0.0.33 → 0.0.38

data/app/components/primer/button_component.rb

@@ -3,14 +3,19 @@
 module Primer
   # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonComponent < Primer::Component
-    DEFAULT_BUTTON_TYPE = :default
-    BUTTON_TYPE_MAPPINGS = {
-      DEFAULT_BUTTON_TYPE => "",
+    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
-    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     DEFAULT_VARIANT = :medium
     VARIANT_MAPPINGS = {
@@ -20,56 +25,56 @@ module Primer
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
-    DEFAULT_TAG = :button
-    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
-
-    DEFAULT_TYPE = :button
-    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
-
-    # @example Button types
+    # @example Schemes
     #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
+    #   <%= 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" } %>
     #
-    # @param button_type [Symbol] <%= one_of(Primer::ButtonComponent::BUTTON_TYPE_OPTIONS) %>
+    # @example Block
+    #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
+    #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
+    #
+    # @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`.
     def initialize(
-      button_type: DEFAULT_BUTTON_TYPE,
+      scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,
-      tag: DEFAULT_TAG,
-      type: DEFAULT_TYPE,
       group_item: false,
+      block: false,
       **system_arguments
     )
+      @scheme = scheme
       @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
-
       @system_arguments[:classes] = class_names(
-        "btn",
         system_arguments[:classes],
-        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        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 }
+      render(Primer::BaseButton.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def link?
+      @scheme == LINK_SCHEME
     end
   end
 end

data/app/components/primer/button_component.rb.orig

@@ -0,0 +1,138 @@
+# 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.
+  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",
+      :invisible => "btn-invisible",
+      LINK_SCHEME => "btn-link"
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+    DEFAULT_VARIANT = :medium
+    VARIANT_MAPPINGS = {
+      :small => "btn-sm",
+      DEFAULT_VARIANT => "",
+      :large => "btn-large"
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+<<<<<<< HEAD
+=======
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+    DEFAULT_ICON_ALIGN = :left
+    ICON_ALIGN_OPTIONS = [DEFAULT_ICON_ALIGN, :right].freeze
+
+    # Icon to be rendered in the button.
+    #
+    # @param align [Symbol] <%= one_of(Primer::ButtonComponent::ICON_ALIGN_OPTIONS) %>
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+    renders_one :icon, lambda { |align: DEFAULT_ICON_ALIGN, **system_arguments|
+      @icon_align = fetch_or_fallback(ICON_ALIGN_OPTIONS, align, DEFAULT_ICON_ALIGN)
+
+      Primer::OcticonComponent.new(**system_arguments)
+    }
+
+    # Counter to be rendered in the button.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::CounterComponent) %>.
+    renders_one :counter, Primer::CounterComponent
+
+>>>>>>> 05bacd3 (add icon and counter slots to button)
+    # @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 %>
+    #   <%= render(Primer::ButtonComponent.new) do |c| %>
+    #     <% c.icon(icon: :star, align: :right) %>
+    #     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 %>
+    #   <%= render(Primer::ButtonComponent.new) do |c| %>
+    #     <% c.icon(icon: :star, align: :right) %>
+    #     <% c.counter(count: 15) %>
+    #     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::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`.
+    def initialize(
+      scheme: DEFAULT_SCHEME,
+      variant: DEFAULT_VARIANT,
+      group_item: false,
+      block: false,
+      **system_arguments
+    )
+      @scheme = scheme
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        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
+
+<<<<<<< HEAD
+    def call
+      render(Primer::BaseButton.new(**@system_arguments)) { content }
+    end
+
+=======
+>>>>>>> 05bacd3 (add icon and counter slots to button)
+    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

@@ -3,14 +3,14 @@
 module Primer
   # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonMarketingComponent < Primer::Component
-    DEFAULT_BUTTON_TYPE = :default
-    BUTTON_TYPE_MAPPINGS = {
-      DEFAULT_BUTTON_TYPE => "",
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :primary => "btn-primary-mktg",
       :outline => "btn-outline-mktg",
       :transparent => "btn-transparent"
     }.freeze
-    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     DEFAULT_VARIANT = :default
     VARIANT_MAPPINGS = {
@@ -25,49 +25,44 @@ module Primer
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
 
-    # @example Button types
+    # @example Schemes
     #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
-    #   <%= render(Primer::ButtonMarketingComponent.new(button_type: :primary, mr: 2)) { "Primary" } %>
-    #   <%= render(Primer::ButtonMarketingComponent.new(button_type: :outline)) { "Outline" } %>
-    #   <div class="bg-gray-dark">
-    #     <%= render(Primer::ButtonMarketingComponent.new(button_type: :transparent)) { "Transparent" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(scheme: :primary, mr: 2)) { "Primary" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(scheme: :outline)) { "Outline" } %>
+    #   <div class="color-bg-canvas-inverse">
+    #     <%= render(Primer::ButtonMarketingComponent.new(scheme: :transparent)) { "Transparent" } %>
     #   </div>
     #
     # @example Sizes
     #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
     #   <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
     #
-    # @param button_type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::BUTTON_TYPE_OPTIONS) %>
+    # @param scheme [Symbol] <%= one_of(Primer::ButtonMarketingComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
     # @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
     # @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
-      button_type: DEFAULT_BUTTON_TYPE,
+      scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,
       tag: DEFAULT_TAG,
       type: DEFAULT_TYPE,
       **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",
-        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
         system_arguments[:classes]
       )
     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,25 @@
+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) {
+        toggleSVG(clippyIcon);
+    }
+    if (checkIcon) {
+        toggleSVG(checkIcon);
+    }
+}
+document.addEventListener('clipboard-copy', function ({ target }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    toggleCopyButton(target);
+    setTimeout(toggleCopyButton, 2000, target);
+});