primer_view_components 0.0.104 → 0.0.106

data/app/components/primer/alpha/segmented_control.pcss

@@ -0,0 +1,121 @@
+/* SegmentedControl */
+
+.SegmentedControl {
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--color-segmented-control-bg);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
+}
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);
+
+  /* Selected ---------------------------------------- */
+  &.SegmentedControl-item--selected {
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-segmented-control-button-selected-border);
+
+    & .Button {
+      font-weight: var(--base-text-weight-semibold, 600);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &::before {
+      border-color: transparent;
+    }
+
+    & + .SegmentedControl-item::before {
+      border-color: transparent;
+    }
+  }
+
+  /* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
+  & .Button-label[data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* Separator lines */
+  &::before {
+    position: absolute;
+    inset: 0 0 0 -1px;
+    margin-top: var(--primer-control-medium-paddingBlock, 6px);
+    margin-bottom: var(--primer-control-medium-paddingBlock, 6px);
+    content: '';
+    border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+  }
+
+  /* Button ----------------------------------------- */
+  & .Button {
+    border: 0;
+    font-weight: var(--base-text-weight-normal, 400);
+    transition: none;
+    color: var(--color-btn-text);
+
+    &:focus-visible {
+      outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
+      border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);
+    }
+  }
+
+  & .Button--small {
+    height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    }
+  }
+
+  & .Button--medium {
+    height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    }
+  }
+
+  & .Button--large {
+    height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    }
+  }
+
+  & .Button--iconOnly {
+    padding: initial;
+  }
+
+  & .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--color-btn-text);
+  }
+}
+
+/* fullWidth */
+.SegmentedControl--fullWidth {
+  display: flex;
+
+  & .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }
+
+  & .Button--iconOnly,
+  & .Button-withTooltip {
+    width: 100%;
+  }
+}

data/app/components/primer/alpha/segmented_control.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use a segmented control to let users select an option from a short list and immediately apply the selection
+    class SegmentedControl < Primer::Component
+      status :alpha
+
+      FULL_WIDTH_DEFAULT = false
+      HIDE_LABELS_DEFAULT = false
+
+      # Use to render an item in the segmented control
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, lambda { |label:, selected: false, icon: nil, **system_arguments|
+        Primer::Alpha::SegmentedControl::Item.new(
+          label: label,
+          selected: selected,
+          icon: icon,
+          hide_labels: @hide_labels,
+          size: @size,
+          block: @full_width,
+          **system_arguments
+        )
+      }
+
+      # @example Basic usage
+      #
+      #   <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
+      #     <%= c.with_item(label: "Preview", selected: true) %>
+      #     <%= c.with_item(label: "Raw") %>
+      #     <%= c.with_item(label: "Blame") %>
+      #   <% end %>
+      #
+      # @example Small
+      #
+      #   <%= render(Primer::Alpha::SegmentedControl.new(size: :small)) do |c| %>
+      #     <%= c.with_item(label: "Preview", selected: true) %>
+      #     <%= c.with_item(label: "Raw") %>
+      #     <%= c.with_item(label: "Blame") %>
+      #   <% end %>
+      #
+      # @example With icons
+      #   <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
+      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @example With icons only
+      #   <%= render(Primer::Alpha::SegmentedControl.new(hide_labels: true)) do |c| %>
+      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @example Fill width of parent
+      #   <%= render(Primer::Alpha::SegmentedControl.new(full_width: true)) do |c| %>
+      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @param hide_labels [Boolean] Whether to hide the labels and only show the icons
+      # @param full_width [Boolean] If the component should be full width
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @full_width = full_width
+        @size = size
+        @hide_labels = hide_labels
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :ul
+        @system_arguments[:role] = "list"
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "SegmentedControl",
+          "SegmentedControl--iconOnly": hide_labels,
+          "SegmentedControl--fullWidth": full_width
+        )
+      end
+
+      def render?
+        valid_items_count = items.count <= (@hide_labels ? 6 : 5) && items.count >= 2
+        raise ArgumentError, "A segmented control should have 2–5 choices with text labels, or up to 6 icon-only buttons." if !valid_items_count && !Rails.env.production?
+
+        valid_items_count
+      end
+    end
+  end
+end

data/app/components/primer/alpha/segmented_control.ts

@@ -0,0 +1,41 @@
+import {controller, targets} from '@github/catalyst'
+
+@controller
+export class SegmentedControlElement extends HTMLElement {
+  @targets items: HTMLElement[]
+
+  connectedCallback() {
+    this.#updateButtonLabels()
+  }
+
+  select(event: Event) {
+    const button = event.currentTarget as HTMLButtonElement
+    for (const item of this.items) {
+      item.classList.remove('SegmentedControl-item--selected')
+      item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false')
+    }
+
+    button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
+    button.setAttribute('aria-current', 'true')
+  }
+
+  // Updates the button labels to have a data-content attribute with the text
+  // This is for selection styling to avoid the text jumping. It only needs to be
+  // setup when the component is first loaded.
+  #updateButtonLabels() {
+    for (const label of this.querySelectorAll('.Button-label')) {
+      label.setAttribute('data-content', label.textContent || '')
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    SegmentedControlElement: typeof SegmentedControlElement
+  }
+}
+
+if (!window.customElements.get('segmented-control')) {
+  window.SegmentedControlElement = SegmentedControlElement
+  window.customElements.define('segmented-control', SegmentedControlElement)
+}

data/app/components/primer/alpha/tooltip.rb

@@ -7,12 +7,12 @@ module Primer
     #
     # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
     # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
-    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::LinkComponent)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
+    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::Beta::Link)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
     # @accessibility
     #   - Tooltip text must be brief and concise whether it is a label or a description.
     #   - Tooltip can only hold string content.
     #   - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
-    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::LinkComponent) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
+    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
     #   - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
     #   content.
     #   ### Which type should I set?

data/app/components/primer/beta/auto_complete/item.rb

@@ -22,10 +22,10 @@ module Primer
 
         # The trailing visual rendered after the link.
         #
-        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::Beta::Counter) %>
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
         renders_one :trailing_visual, types: {
           icon: Primer::OcticonComponent,
-          label: Primer::LabelComponent,
+          label: Primer::Beta::Label,
           counter: Primer::Beta::Counter
         }
 

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

@@ -72,7 +72,7 @@ module Primer
 
       def call
         if @href
-          render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
+          render(Primer::Beta::Link.new(href: @href, classes: @system_arguments[:classes])) do
             render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
           end
         else

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

@@ -0,0 +1 @@
+.Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,8px);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-bottom:calc(var(--base-size-4, 4px)/2);margin-top:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,uFAAyF,CACzF,uFAA2F,CAC3F,mDAAqD,CAHrD,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAiE,CACjE,8BAA+B,CAR/B,8BAAgC,CAFhC,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACI,wDACJ,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,qDAWF,CAPE,gCACE,6CAA+C,CAA/C,0CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,qDAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAAkD,CADlD,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAGF,sBACE,eAAgB,CAChB,+DACF,CAEA,gCACE,4BACF,CAEA,wBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,gDACE,+BACF,CAGF,sBAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,8CACE,4BACF,CAGF,wBAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,gDACE,6BACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CAGA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8, 8px);\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0,auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4, 4px) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold, 600);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--color-accent-fg);\n  }\n\n  &.Banner--warning {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n    border-color: var(--color-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-attention-fg);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n    border-color: var(--color-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-danger-fg);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n    border-color: var(--color-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-success-fg);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  /* --primer-viewportRange-narrowLandscape */\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,33 @@
+<%= render(Primer::BaseComponent.new(**@wrapper_arguments)) do %>
+  <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+    <% if @icon %>
+      <div class="Banner-visual">
+        <%= render(Primer::OcticonComponent.new(icon: @icon)) %>
+      </div>
+    <% end %>
+    <%= render(Primer::BaseComponent.new(**@message_arguments)) do %>
+      <p class="Banner-title" data-target="<%= catalyst_target(field: "titleText") %>"><%= content %></p>
+      <% if @description %>
+        <p><%= @description %></p>
+      <% end %>
+    <% end %>
+    <% if action %>
+      <div class="Banner-actions">
+        <%= action %>
+      </div>
+    <% end %>
+    <% if @dismissible %>
+      <div class="Banner-close">
+        <%= render(
+          Primer::Beta::IconButton.new(
+            scheme: :invisible,
+            icon: :x,
+            aria: { label: "Dismiss" },
+            data: { action: catalyst_action(event: "click", function: "dismiss") },
+            autofocus: true
+          )
+        ) %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,126 @@
+/* Banner alert */
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: var(--base-size-8, 8px);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr minmax(0,auto) min-content;
+  grid-template-rows: min-content;
+
+  /* `sm` breakpoint variantion */
+  @media (max-width: 543.98px) {
+    grid-template-areas:
+      'visual message close'
+      '. actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+
+    & .Banner-actions {
+        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);
+    }
+  }
+
+  /* Elements */
+
+  & .Banner-visual {
+    display: grid;
+    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    grid-area: visual;
+    align-self: start;
+
+    & > .octicon {
+      margin-block: calc(var(--base-size-4, 4px) / 2);
+    }
+
+    & > * {
+      align-self: center;
+    }
+  }
+
+  & .Banner-message {
+    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    grid-area: message;
+    align-self: center;
+
+    & p:last-child {
+      margin-bottom: 0;
+    }
+
+    & .Banner-title:not(:only-child) {
+      margin-bottom: 0;
+      font-weight: var(--base-text-weight-semibold, 600);
+    }
+  }
+
+  & .Banner-actions {
+    grid-area: actions;
+
+    &:last-child {
+      align-self: center;
+    }
+  }
+
+  & .Banner-close {
+    grid-area: close;
+    margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);
+  }
+
+  & .Banner-visual .octicon {
+    color: var(--color-accent-fg);
+  }
+
+  &.Banner--warning {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+    border-color: var(--color-attention-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--color-attention-fg);
+    }
+  }
+
+  &.Banner--error {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+    border-color: var(--color-danger-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--color-danger-fg);
+    }
+  }
+
+  &.Banner--success {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+    border-color: var(--color-success-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--color-success-fg);
+    }
+  }
+
+  /* Full-width */
+
+  &.Banner--full {
+    margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  /* --primer-viewportRange-narrowLandscape */
+  @media (max-width: 767.98px) {
+    &.Banner--full-whenNarrow {
+      margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Banner` to highlight important information.
+    class Banner < Primer::Component
+      status :beta
+
+      # A button or custom content that will render on the right-hand side of the component.
+      #
+      # To render a button, call the `with_action_button` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
+      #
+      # To render custom content, call the `with_action_content` method and pass a block that returns HTML.
+      renders_one :action, types: {
+        button: lambda { |**system_arguments|
+          deny_tag_argument(**system_arguments)
+
+          Primer::Beta::Button.new(**system_arguments)
+        },
+
+        content: lambda { |**system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments[:tag] = :div
+
+          Primer::BaseComponent.new(**system_arguments)
+        }
+      }
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "Banner--warning",
+        :danger => "Banner--error",
+        :success => "Banner--success"
+      }.freeze
+
+      DEFAULT_ICONS = {
+        default: :bell,
+        warning: :alert,
+        danger: :stop,
+        success: :"check-circle"
+      }.freeze
+
+      # @example Schemes
+      #   <div style="display: grid; row-gap: 15px">
+      #     <%= render(Primer::Beta::Banner.new) { "This is a banner message!" } %>
+      #     <%= render(Primer::Beta::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
+      #     <%= render(Primer::Beta::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
+      #     <%= render(Primer::Beta::Banner.new(scheme: :success)) { "This is a success banner!" } %>
+      #   </div>
+      #
+      # @example Full width
+      #   <%= render(Primer::Beta::Banner.new(full: true)) { "This is a full width banner!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Primer::Beta::Banner.new(dismissible: true, reappear: true)) { "This is a dismissible banner!" } %>
+      #
+      # @example Custom icon
+      #   <%= render(Primer::Beta::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
+      #
+      # @example With action button
+      #   <%= render(Primer::Beta::Banner.new) do |component| %>
+      #     This is a banner with an action button!
+      #     <% component.with_action_button(size: :small) { "Take action" } %>
+      #   <% end %>
+      #
+      # @example With custom action
+      #   <%= render(Primer::Beta::Banner.new) do |component| %>
+      #     Comment saved!
+      #     <% component.with_action_content do %>
+      #       <%= render(Primer::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param full [Boolean] Whether the component should take up the full width of the screen.
+      # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports.
+      # @param dismissible [Boolean] Whether the component can be dismissed with an "x" button.
+      # @param description [String] Description text rendered underneath the message.
+      # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Banner::SCHEME_MAPPINGS.keys) %>
+      # @param reappear [Boolean] Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(full: false, full_when_narrow: false, dismissible: false, description: nil, icon: nil, scheme: DEFAULT_SCHEME, reappear: false, **system_arguments)
+        @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)
+        @icon = icon || DEFAULT_ICONS[@scheme]
+        @dismissible = dismissible
+        @description = description
+        @reappear = reappear
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:data] ||= {}
+        @system_arguments[:data][:target] = catalyst_target(field: "root")
+        @system_arguments[:data][:reappear] = @reappear if @reappear
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Banner",
+          SCHEME_MAPPINGS[@scheme],
+          "Banner--full": full,
+          "Banner--full-whenNarrow": full_when_narrow
+        )
+
+        @message_arguments = {
+          tag: :div,
+          classes: "Banner-message"
+        }
+
+        @wrapper_arguments = {
+          tag: custom_element_name
+        }
+      end
+
+      private
+
+      def custom_element_name
+        "x-banner"
+      end
+
+      def catalyst_action(event:, function:)
+        "#{event}:#{custom_element_name}##{function}"
+      end
+
+      def catalyst_target(field:)
+        "#{custom_element_name}.#{field}"
+      end
+    end
+  end
+end

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

@@ -20,7 +20,7 @@ module Primer
       # Use:
       #
       # - `visual_icon` for an <%= link_to_component(Primer::OcticonComponent) %>.
-      # - `visual_image` for an <%= link_to_component(Primer::Image) %>.
+      # - `visual_image` for an <%= link_to_component(Primer::Alpha::Image) %>.
       # - `visual_spinner` for a <%= link_to_component(Primer::SpinnerComponent) %>.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -40,7 +40,7 @@ module Primer
           system_arguments[:size] = "56x56"
           system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
-          Primer::Image.new(**system_arguments)
+          Primer::Alpha::Image.new(**system_arguments)
         }
       }
 
@@ -83,7 +83,7 @@ module Primer
         system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
-        Primer::ButtonComponent.new(**system_arguments) # rubocop:disable Primer/ComponentNameMigration
+        Primer::ButtonComponent.new(**system_arguments)
       }
 
       # Optional secondary action
@@ -96,7 +96,7 @@ module Primer
       renders_one :secondary_action, lambda { |href:, **system_arguments|
         system_arguments[:href] = href
 
-        Primer::LinkComponent.new(**system_arguments)
+        Primer::Beta::Link.new(**system_arguments)
       }
 
       # @example Basic

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

@@ -73,7 +73,7 @@ module Primer
           end
 
           render(Primer::BaseComponent.new(**@system_arguments)) do
-            render(Primer::LinkComponent.new(**link_arguments)) { content }
+            render(Primer::Beta::Link.new(**link_arguments)) { content }
           end
         end
       end

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

@@ -57,7 +57,7 @@ module Primer
       # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
       renders_one :trailing_visual, types: {
         icon: Primer::OcticonComponent,
-        label: Primer::LabelComponent,
+        label: Primer::Beta::Label,
         counter: Primer::CounterComponent
       }