openproject-primer_view_components 0.6.3

data/app/components/primer/beta/button_group.css.json

@@ -0,0 +1,14 @@
+{
+  "name": "beta/button_group",
+  "selectors": [
+    ".ButtonGroup",
+    ".ButtonGroup .Button",
+    ".ButtonGroup .Button:active",
+    ".ButtonGroup .Button:focus",
+    ".ButtonGroup .Button:hover",
+    ".ButtonGroup>.Button-withTooltip:first-child .Button",
+    ".ButtonGroup>:first-child",
+    ".ButtonGroup>.Button-withTooltip:last-child .Button",
+    ".ButtonGroup>:last-child"
+  ]
+}

data/app/components/primer/beta/button_group.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,wDAAqD,CADrD,qDAEF,CAEA,6EAGE,yDAAsD,CADtD,sDAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n\n  & .Button {\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  & > :first-child,\n  & > :first-child.Button-withTooltip .Button {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & > :last-child,\n  & > :last-child.Button-withTooltip .Button {\n    border-top-right-radius: var(--borderRadius-medium);\n    border-bottom-right-radius: var(--borderRadius-medium);\n  }\n}\n"]}

data/app/components/primer/beta/button_group.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% buttons.each do |button| %>
+    <%= button %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/button_group.pcss

@@ -0,0 +1,27 @@
+.ButtonGroup {
+  display: inline-flex;
+
+  & .Button {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+
+    &:focus,
+    &:active,
+    &:hover {
+      z-index: 1;
+    }
+  }
+
+  & > :first-child,
+  & > :first-child.Button-withTooltip .Button {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+  & > :last-child,
+  & > :last-child.Button-withTooltip .Button {
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
+  }
+}

data/app/components/primer/beta/button_group.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # 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::Beta::Button) %>
+      renders_many :buttons, lambda { |**kwargs|
+        kwargs[:size] = @size
+        kwargs[:scheme] = @scheme
+
+        if kwargs[:icon]
+          Primer::Beta::IconButton.new(**kwargs)
+        else
+          Primer::Beta::Button.new(**kwargs)
+        end
+      }
+
+      # @example Default
+      #
+      #   <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+      #     <% component.with_button { "Button 1" } %>
+      #     <% component.with_button { "Button 2" } %>
+      #     <% component.with_button { "Button 3" } %>
+      #   <% end %>
+      #
+      # @example Sizes
+      #
+      #   <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
+      #     <% component.with_button { "Button 1" } %>
+      #     <% component.with_button { "Button 2" } %>
+      #     <% component.with_button { "Button 3" } %>
+      #   <% end %>
+      #
+      # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(scheme: Primer::Beta::Button::DEFAULT_SCHEME, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @size = size
+        @scheme = scheme
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+
+        @system_arguments[:classes] = class_names(
+          "ButtonGroup",
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        buttons.any?
+      end
+    end
+  end
+end

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

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

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

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

data/app/components/primer/beta/clipboard_copy.js

@@ -0,0 +1,43 @@
+import '@github/clipboard-copy-element';
+const CLIPBOARD_COPY_TIMER_DURATION = 2000;
+function showSVG(svg) {
+    svg.style.display = 'inline-block';
+}
+function hideSVG(svg) {
+    svg.style.display = 'none';
+}
+// Toggle a copy button.
+function showCopy(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    showSVG(copyIcon);
+    hideSVG(checkIcon);
+}
+// Toggle a copy button.
+function showCheck(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    hideSVG(copyIcon);
+    showSVG(checkIcon);
+}
+const clipboardCopyElementTimers = new WeakMap();
+document.addEventListener('clipboard-copy', ({ target }) => {
+    if (!(target instanceof HTMLElement))
+        return;
+    if (!target.hasAttribute('data-view-component'))
+        return;
+    const currentTimeout = clipboardCopyElementTimers.get(target);
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        showCheck(target);
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(() => {
+        showCopy(target);
+        clipboardCopyElementTimers.delete(target);
+    }, CLIPBOARD_COPY_TIMER_DURATION));
+});

data/app/components/primer/beta/clipboard_copy.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
+    #
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    class ClipboardCopy < Primer::Component
+      status :beta
+
+      # @example Default
+      #   <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
+      #
+      # @example With text instead of icons
+      #   <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy")) do %>
+      #     Click to copy!
+      #   <% end %>
+      #
+      # @example Copying from an element
+      #   <%= render(Primer::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
+      #   <div id="blob-path">src/index.js</div>
+      #
+      # @param aria-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 for [String] Element id from where to get the copied value.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(value: nil, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @value = value
+
+        validate!
+
+        @system_arguments[:tag] = "clipboard-copy"
+        @system_arguments[:value] = value if value.present?
+      end
+
+      # :nodoc:
+      def before_render
+        validate_aria_label if content.blank?
+      end
+
+      private
+
+      def validate!
+        raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
+      end
+    end
+  end
+end

data/app/components/primer/beta/clipboard_copy.ts

@@ -0,0 +1,55 @@
+import '@github/clipboard-copy-element'
+
+const CLIPBOARD_COPY_TIMER_DURATION = 2000
+
+function showSVG(svg: SVGElement) {
+  svg.style.display = 'inline-block'
+}
+
+function hideSVG(svg: SVGElement) {
+  svg.style.display = 'none'
+}
+
+// Toggle a copy button.
+function showCopy(button: HTMLElement) {
+  const [copyIcon, checkIcon] = button.querySelectorAll<SVGElement>('.octicon')
+
+  if (!copyIcon || !checkIcon) return
+
+  showSVG(copyIcon)
+  hideSVG(checkIcon)
+}
+
+// Toggle a copy button.
+function showCheck(button: HTMLElement) {
+  const [copyIcon, checkIcon] = button.querySelectorAll<SVGElement>('.octicon')
+
+  if (!copyIcon || !checkIcon) return
+
+  hideSVG(copyIcon)
+  showSVG(checkIcon)
+}
+
+const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
+
+document.addEventListener('clipboard-copy', ({target}) => {
+  if (!(target instanceof HTMLElement)) return
+  if (!target.hasAttribute('data-view-component')) return
+
+  const currentTimeout = clipboardCopyElementTimers.get(target)
+
+  if (currentTimeout) {
+    clearTimeout(currentTimeout)
+    clipboardCopyElementTimers.delete(target)
+  } else {
+    showCheck(target)
+  }
+
+  clipboardCopyElementTimers.set(
+    target,
+    setTimeout(() => {
+      showCopy(target)
+      clipboardCopyElementTimers.delete(target)
+    }, CLIPBOARD_COPY_TIMER_DURATION)
+  )
+})

data/app/components/primer/beta/close_button.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # 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
+      status :beta
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::CloseButton.new) %>
+      #
+      # @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %>
+      # @param disabled [Boolean] Whether or not the button is disabled.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(type: DEFAULT_TYPE, disabled: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**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"] = aria("label", system_arguments) || "Close"
+        @system_arguments[:disabled] = disabled
+      end
+
+      def call
+        render(Primer::Beta::BaseButton.new(**@system_arguments)) do
+          render(Primer::Beta::Octicon.new("x"))
+        end
+      end
+    end
+  end
+end

data/app/components/primer/beta/counter.css

@@ -0,0 +1 @@
+.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-muted,var(--color-fg-muted))}

data/app/components/primer/beta/counter.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "beta/counter",
+  "selectors": [
+    ".Counter",
+    ".Counter:empty",
+    ".Counter .octicon",
+    ".Counter--primary",
+    ".Counter--secondary"
+  ]
+}

data/app/components/primer/beta/counter.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,wEAA0E,CAC1E,6GAAgE,CAChE,iBAAkB,CAJlB,oDAA6B,CAN7B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,uEAAiD,CADjD,2DAEF,CAEA,oBAEE,yEAA8C,CAD9C,gDAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n  display: inline-block;\n  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n  padding: 0 6px;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n  color: var(--fgColor-default);\n  text-align: center;\n  background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n  border: var(--borderWidth-thin) solid var(--counter-borderColor);\n  border-radius: 2em;\n\n  &:empty {\n    display: none;\n  }\n\n  /* Is this selector used? could not find any use of it */\n  & .octicon {\n    vertical-align: text-top;\n    opacity: 0.8;\n  }\n}\n\n.Counter--primary {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n}\n\n.Counter--secondary {\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-neutral-muted);\n}\n"]}

data/app/components/primer/beta/counter.pcss

@@ -0,0 +1,35 @@
+/* Counter */
+
+.Counter {
+  display: inline-block;
+  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */
+  padding: 0 6px;
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
+  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
+  color: var(--fgColor-default);
+  text-align: center;
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+  border: var(--borderWidth-thin) solid var(--counter-borderColor);
+  border-radius: 2em;
+
+  &:empty {
+    display: none;
+  }
+
+  /* Is this selector used? could not find any use of it */
+  & .octicon {
+    vertical-align: text-top;
+    opacity: 0.8;
+  }
+}
+
+.Counter--primary {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-neutral-emphasis);
+}
+
+.Counter--secondary {
+  color: var(--fgColor-muted);
+  background-color: var(--bgColor-neutral-muted);
+}

data/app/components/primer/beta/counter.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Counter` to add a count to navigational elements and buttons.
+    #
+    # @accessibility
+    #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
+    #   should be accompanied with text such as `issues` or `pull requests`.
+    #
+    class Counter < Primer::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Counter--primary",
+        :secondary => "Counter--secondary",
+        # deprecated
+        :gray => "Counter--primary",
+        :light_gray => "Counter--secondary"
+      }.freeze
+      DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
+      SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
+
+      #
+      # @example Default
+      #   <%= render(Primer::Beta::Counter.new(count: 25)) %>
+      #
+      # @example Schemes
+      #   <%= render(Primer::Beta::Counter.new(count: 25, scheme: :primary)) %>
+      #   <%= render(Primer::Beta::Counter.new(count: 25, scheme: :secondary)) %>
+      #
+      # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
+      # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::Counter::SCHEME_OPTIONS) %>
+      # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
+      # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
+      # @param text [String] Text to display instead of count.
+      # @param round [Boolean] Whether to apply our standard rounding logic to value.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        count: 0,
+        scheme: DEFAULT_SCHEME,
+        limit: 5_000,
+        hide_if_zero: false,
+        text: "",
+        round: false,
+        **system_arguments
+      )
+        @count = count
+        @limit = limit
+        @hide_if_zero = hide_if_zero
+        @text = text
+        @round = round
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @has_limit = !@limit.nil?
+        @system_arguments[:title] = title
+        @system_arguments[:tag] = :span
+        @system_arguments[:classes] = class_names(
+          "Counter",
+          @system_arguments[:classes],
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)]
+        )
+        @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { value }
+      end
+
+      private
+
+      def title
+        if @text.present?
+          @text
+        elsif @count.nil?
+          "Not available"
+        elsif @count == Float::INFINITY
+          "Infinity"
+        else
+          count = @count.to_i
+          str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
+          str += "+" if @has_limit && count > @limit
+          str
+        end
+      end
+
+      def value
+        if @text.present?
+          @text
+        elsif @count.nil?
+          "" # CSS will hide it
+        elsif @count == Float::INFINITY
+          "∞"
+        else
+          if @round
+            count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
+            precision = count.between?(100_000, 999_999) ? 0 : 1
+            units = { thousand: "k", million: "m", billion: "b" }
+            str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
+          else
+            @count = @count.to_i
+            str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
+          end
+
+          str += "+" if @has_limit && @count.to_i > @limit
+          str
+        end
+      end
+    end
+  end
+end

data/app/components/primer/beta/details.html.erb

@@ -0,0 +1,8 @@
+<% if disabled? %>
+  <%= summary %>
+<% else %>
+  <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+    <%= summary %>
+    <%= body %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/details.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `DetailsComponent` to reveal content after clicking a button.
+    class Details < Primer::Component
+      status :beta
+
+      BODY_TAG_DEFAULT = :div
+      BODY_TAG_OPTIONS = [:ul, :"details-menu", :"details-dialog", BODY_TAG_DEFAULT].freeze
+      NO_OVERLAY = :none
+      OVERLAY_MAPPINGS = {
+        NO_OVERLAY => "",
+        :default => "details-overlay",
+        :dark => "details-overlay details-overlay-dark"
+      }.freeze
+
+      attr_reader :disabled
+      alias disabled? disabled
+
+      renders_one :summary, lambda { |button: true, **system_arguments|
+        system_arguments[:tag] = :summary
+        system_arguments[:role] = "button"
+
+        if disabled?
+          # rubocop:disable Primer/ComponentNameMigration
+          Primer::ButtonComponent.new(**system_arguments, disabled: true)
+          # rubocop:enable Primer/ComponentNameMigration
+        elsif button
+          # rubocop:disable Primer/ComponentNameMigration
+          Primer::ButtonComponent.new(**system_arguments)
+          # rubocop:enable Primer/ComponentNameMigration
+        else
+          Primer::BaseComponent.new(**system_arguments)
+        end
+      }
+
+      # Use the Body slot as the main content to be shown when triggered by the Summary.
+      #
+      # @param tag [Symbol] (Primer::Beta::Details::BODY_TAG_DEFAULT) <%= one_of(Primer::Beta::Details::BODY_TAG_OPTIONS) %>
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_one :body, lambda { |tag: BODY_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, tag, BODY_TAG_DEFAULT)
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #
+      #   <%= render Primer::Beta::Details.new do |component| %>
+      #     <% component.with_summary do %>
+      #       Summary
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       Body
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
+      # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
+      # @param disabled [Boolean] Whether or not to disable the summary button.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(overlay: NO_OVERLAY, reset: false, disabled: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :details
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
+          "details-reset" => reset
+        )
+        @disabled = disabled
+        @summary_info = nil
+      end
+
+      def render?
+        summary.present? && body.present?
+      end
+    end
+  end
+end

data/app/components/primer/beta/flash.css

@@ -0,0 +1 @@
+.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}

data/app/components/primer/beta/flash.css.json

@@ -0,0 +1,27 @@
+{
+  "name": "beta/flash",
+  "selectors": [
+    ".flash:not(.Banner)",
+    ".flash:not(.Banner) .octicon",
+    ".flash:not(.Banner) p:last-child",
+    ".flash-messages",
+    ".flash-close:not(.Banner-close)",
+    ".flash-close:not(.Banner-close):hover",
+    ".flash-close:not(.Banner-close):active",
+    ".flash-close:not(.Banner-close) .octicon",
+    ".flash-action:not(.Banner-actions)",
+    ".flash-action.btn:not(.Banner-actions) .octicon",
+    ".flash-action.btn-primary:not(.Banner-actions)",
+    ".flash-action.btn-primary:not(.Banner-actions) .octicon",
+    ".flash-warn:not(.Banner)",
+    ".flash-warn:not(.Banner) .octicon",
+    ".flash-error:not(.Banner)",
+    ".flash-error:not(.Banner) .octicon",
+    ".flash-success:not(.Banner)",
+    ".flash-success:not(.Banner) .octicon",
+    ".flash-full:not(.Banner)",
+    ".flash-banner",
+    ".flash-full",
+    ".warning"
+  ]
+}

data/app/components/primer/beta/flash.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  padding: var(--control-medium-paddingInline-spacious);\n  margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}

data/app/components/primer/beta/flash.html.erb

@@ -0,0 +1,10 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= primer_octicon @icon if @icon %><%= content %>
+  <% if @dismissible %>
+    <button class="flash-close js-flash-close" type="button" aria-label="Close">
+      <%= primer_octicon "x" %>
+    </button>
+  <% end %>
+
+  <%= action %>
+<% end %>