openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
+    # input field. This list is populated by server search results.
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    #
+    #   * `label_text` is required and visible by default.
+    #   * If you must use a non-visible label, set `is_label_visible` to `false`.
+    #   However, please note that a visible label should almost always
+    #   be used unless there is compelling reason not to. A placeholder is not a label.
+    class AutoComplete < Primer::Component
+      status :deprecated
+
+      # Customizable results list.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :results, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :ul
+        system_arguments[:id] = @list_id
+        system_arguments[:classes] = class_names(
+          "autocomplete-results",
+          system_arguments[:classes]
+        )
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Customizable input used to search for results.
+      # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :input, lambda { |**system_arguments|
+        sanitized_args = deny_tag_argument(**system_arguments)
+        sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
+        deny_aria_key(
+          :label,
+          "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :id,
+          "`id` will always be set to @input_id.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :name,
+          "Set @input_name on the component initializer instead with `input_name`.",
+          **sanitized_args
+        )
+        sanitized_args[:id] = @input_id
+        sanitized_args[:name] = @input_name
+        sanitized_args[:tag] = :input
+        sanitized_args[:autocomplete] = "off"
+        sanitized_args[:type] = :text
+        sanitized_args[:classes] = class_names(
+          "form-control",
+          sanitized_args[:classes]
+        )
+        Primer::BaseComponent.new(**sanitized_args)
+      }
+
+      # @example Default
+      #   @description
+      #     Labels are stacked by default.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
+      #
+      # @example With inline label
+      #   @description
+      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #
+      # @example With non-visible label
+      #   @description
+      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
+      #
+      # @example With icon
+      #   @description
+      #     To display a search icon, set `with_icon` to `true`.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
+      #
+      # @example With icon and non-visible label
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
+      #
+      # @example With clear button
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
+      #
+      # @example With custom classes for the input
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
+      #     <% component.with_input(classes: "custom-class") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
+      #     <% component.with_results(classes: "custom-class") do %>
+      #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
+      #         Apple
+      #       <% end %>
+      #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
+      #         Orange
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label_text [String] The label of the input.
+      # @param src [String] The route to query.
+      # @param input_id [String] Id of the input element.
+      # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
+      # @param list_id [String] Id of the list element.
+      # @param with_icon [Boolean] Controls if a search icon is visible, defaults to `false`.
+      # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
+      # @param is_clearable [Boolean] Adds optional clear button.
+      # @param is_label_inline [Boolean] Controls if the label is inline. On smaller screens, label will always become stacked.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false, **system_arguments)
+        @label_text = label_text
+        @list_id = list_id
+        @input_id = input_id
+        @input_name = input_name || input_id
+        @is_label_visible = is_label_visible
+        @with_icon = with_icon
+        @is_clearable = is_clearable
+        @label_classes = label_classes(is_label_visible: is_label_visible, is_label_inline: is_label_inline)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "auto-complete"
+        @system_arguments[:src] = src
+        @system_arguments[:for] = list_id
+      end
+
+      # add `input` and `results` without needing to explicitly call them in the view
+      def before_render
+        with_results(classes: "") unless results?
+        with_input(classes: "") unless input?
+      end
+
+      private
+
+      # Private: determines the label classes based on component configration.
+      #
+      # If the label is not visible, return an empty string.
+      #
+      # @param args [Hash] The component configuration.
+      # @return [String] The label classes.
+      def label_classes(**args)
+        return "" if args[:is_label_visible] == false
+
+        args[:is_label_inline] ? "autocomplete-label-inline" : "autocomplete-label-stacked"
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,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,.5rem);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,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.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(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{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))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{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))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{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))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--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(--borderWidth-thin,max(1px, .0625rem))*-1)}}

data/app/components/primer/alpha/banner.css.json

@@ -0,0 +1,24 @@
+{
+  "name": "alpha/banner",
+  "selectors": [
+    ".Banner",
+    ".Banner .Banner-actions",
+    ".Banner .Banner-visual",
+    ".Banner .Banner-visual>.octicon",
+    ".Banner .Banner-visual>*",
+    ".Banner .Banner-message",
+    ".Banner .Banner-message p:last-child",
+    ".Banner .Banner-message .Banner-title:not(:only-child)",
+    ".Banner .Banner-actions:last-child",
+    ".Banner .Banner-close",
+    ".Banner .Banner-visual .octicon",
+    ".Banner.Banner--warning",
+    ".Banner.Banner--warning .Banner-visual .octicon",
+    ".Banner.Banner--error",
+    ".Banner.Banner--error .Banner-visual .octicon",
+    ".Banner.Banner--success",
+    ".Banner.Banner--success .Banner-visual .octicon",
+    ".Banner.Banner--full",
+    ".Banner.Banner--full-whenNarrow"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,+IAA2F,CAC3F,gHAAqE,CACrE,4CAAyC,CAHzC,oDAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,gCAA2B,CAF3B,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,4DACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,wCAWF,CAPE,gCACE,8CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,wCAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,0DACF,CAEA,gCACE,kDACF,CAEA,wBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,gDACE,wDACF,CAGF,sBAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,8CACE,kDACF,CAGF,wBAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,gDACE,oDACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\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) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: 0.375rem var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: 0.375rem var(--base-size-8);\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);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\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    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\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    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\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    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

data/app/components/primer/alpha/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::Beta::Octicon.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="flash-action Banner-actions">
+        <%= action %>
+      </div>
+    <% end %>
+    <% if @dismiss_scheme != :none %>
+      <div class="flash-close 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/alpha/banner.pcss

@@ -0,0 +1,126 @@
+/* Banner alert */
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: var(--base-size-8);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);
+  border-radius: var(--borderRadius-medium);
+  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) 0 0 var(--base-size-8);
+    }
+  }
+
+  /* Elements */
+
+  & .Banner-visual {
+    display: grid;
+    padding: 0.375rem var(--base-size-8);
+    grid-area: visual;
+    align-self: start;
+
+    & > .octicon {
+      margin-block: calc(var(--base-size-4) / 2);
+    }
+
+    & > * {
+      align-self: center;
+    }
+  }
+
+  & .Banner-message {
+    padding: 0.375rem var(--base-size-8);
+    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);
+    }
+  }
+
+  & .Banner-actions {
+    grid-area: actions;
+
+    &:last-child {
+      align-self: center;
+    }
+  }
+
+  /* is this used anywhere? could not find any use, but unsure */
+  & .Banner-close {
+    grid-area: close;
+    margin-left: var(--controlStack-medium-gap-condensed);
+  }
+
+  & .Banner-visual .octicon {
+    color: var(--fgColor-accent);
+  }
+
+  &.Banner--warning {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+    border-color: var(--borderColor-attention-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--fgColor-attention);
+    }
+  }
+
+  &.Banner--error {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+    border-color: var(--borderColor-danger-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--fgColor-danger);
+    }
+  }
+
+  &.Banner--success {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+    border-color: var(--borderColor-success-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--fgColor-success);
+    }
+  }
+
+  /* Full-width */
+
+  &.Banner--full {
+    margin-top: calc(var(--borderWidth-thin) * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  @media (max-width: 767.98px) {
+    &.Banner--full-whenNarrow {
+      margin-top: calc(var(--borderWidth-thin) * -1);
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,141 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `Banner` to highlight important information.
+    class Banner < Primer::Component
+      status :alpha
+
+      # 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
+
+      LEGACY_SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "flash-warn",
+        :danger => "flash-error",
+        :success => "flash-success"
+      }.freeze
+
+      DEFAULT_ICONS = {
+        default: :bell,
+        warning: :alert,
+        danger: :stop,
+        success: :"check-circle"
+      }.freeze
+
+      DEFAULT_DISMISS_SCHEME = :none
+      DISMISS_SCHEMES = [
+        DEFAULT_DISMISS_SCHEME,
+        :remove,
+        :hide
+      ].freeze
+
+      # @example Schemes
+      #   <div style="display: grid; row-gap: 15px">
+      #     <%= render(Primer::Alpha::Banner.new) { "This is a banner message!" } %>
+      #     <%= render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
+      #     <%= render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
+      #     <%= render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" } %>
+      #   </div>
+      #
+      # @example Full width
+      #   <%= render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Primer::Alpha::Banner.new(dismissible: :remove)) { "This is a dismissible banner!" } %>
+      #
+      # @example Custom icon
+      #   <%= render(Primer::Alpha::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
+      #
+      # @example With action button
+      #   <%= render(Primer::Alpha::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::Alpha::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 dismiss_scheme [Symbol] Whether the component can be dismissed with an "x" button. <%= one_of(Primer::Alpha::Banner::DISMISS_SCHEMES) %>
+      # @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::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+        @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)
+        @icon = icon || DEFAULT_ICONS[@scheme]
+        @dismiss_scheme = dismiss_scheme
+        @description = description
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Banner",
+          "flash", # legacy
+          SCHEME_MAPPINGS[@scheme],
+          LEGACY_SCHEME_MAPPINGS[@scheme],
+          "Banner--full": full,
+          "flash-full": full, # legacy
+          "Banner--full-whenNarrow": full_when_narrow
+        )
+
+        @message_arguments = {
+          tag: :div,
+          classes: "Banner-message"
+        }
+
+        @wrapper_arguments = {
+          tag: custom_element_name,
+          data: { dismiss_scheme: @dismiss_scheme }
+        }
+      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/alpha/button_marketing.css

@@ -0,0 +1 @@
+.btn-mktg{-webkit-appearance:none!important;appearance:none!important;background:linear-gradient(180deg,#ffffff26 0,#fff0 100%),var(--color-mktg-btn-bg)!important;border:0;border-radius:.375rem;color:var(--bgColor-default,var(--color-canvas-default));display:inline-block;font-size:1rem;font-weight:var(--base-text-weight-semibold,600);line-height:1;padding:.9rem 1.5rem 1.1rem;position:relative;text-align:center;transition:box-shadow .2s,outline .2s ease;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;z-index:1}.btn-mktg:before{background:linear-gradient(180deg,#ffffff26,#fff0)!important;background-blend-mode:normal;border-radius:inherit;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s;z-index:-1}.btn-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover)!important;text-decoration:none}.btn-mktg.focus:before,.btn-mktg:focus-visible:before,.btn-mktg:focus:before,.btn-mktg:hover:before{opacity:1}.btn-mktg:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.btn-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-mktg:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.btn-mktg:active:before{opacity:.5!important}.btn-mktg.disabled,.btn-mktg[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn-muted-mktg{background:none!important;box-shadow:var(--color-mktg-btn-shadow-outline);color:var(--fgColor-default,var(--color-fg-default))!important}.btn-muted-mktg:before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-muted-mktg:active{box-shadow:var(--fgColor-default,var(--color-fg-default)) 0 0 0 3px inset!important}.btn-muted-mktg:disabled{box-shadow:var(--fgColor-default,var(--color-fg-default)) 0 0 0 1px inset!important}.btn-subtle-mktg{box-shadow:none!important;color:var(--fgColor-default,var(--color-fg-default))!important}.btn-subtle-mktg,.btn-subtle-mktg:before{background:none!important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-signup-mktg{background:linear-gradient(180deg,#34b75926,#2ea44f00),#2ea44f!important;color:#fff}.btn-signup-mktg:before{background:linear-gradient(180deg,#34b75926,#2ea44f00)!important}.btn-signup-mktg:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.btn-signup-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-signup-mktg:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{font-size:1.25rem;padding:16px 30px 20px!important}

data/app/components/primer/alpha/button_marketing.css.json

@@ -0,0 +1,33 @@
+{
+  "name": "alpha/button_marketing",
+  "selectors": [
+    ".btn-mktg",
+    ".btn-mktg:before",
+    ".btn-mktg:hover",
+    ".btn-mktg.focus:before",
+    ".btn-mktg:focus-visible:before",
+    ".btn-mktg:focus:before",
+    ".btn-mktg:hover:before",
+    ".btn-mktg:focus",
+    ".btn-mktg:focus:not(:focus-visible)",
+    ".btn-mktg:focus-visible",
+    ".btn-mktg:active:before",
+    ".btn-mktg.disabled",
+    ".btn-mktg[disabled]",
+    ".btn-muted-mktg",
+    ".btn-muted-mktg:before",
+    ".btn-muted-mktg:hover",
+    ".btn-muted-mktg:active",
+    ".btn-muted-mktg:disabled",
+    ".btn-subtle-mktg",
+    ".btn-subtle-mktg:before",
+    ".btn-subtle-mktg:hover",
+    ".btn-signup-mktg",
+    ".btn-signup-mktg:before",
+    ".btn-signup-mktg:focus",
+    ".btn-signup-mktg:focus:not(:focus-visible)",
+    ".btn-signup-mktg:focus-visible",
+    ".btn-small-mktg",
+    ".btn-large-mktg"
+  ]
+}

data/app/components/primer/alpha/button_marketing.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UAwBE,iCAA2B,CAA3B,yBAA2B,CAP3B,4FACqC,CACrC,QAAS,CAGT,qBAAuB,CAVvB,wDAA6B,CAT7B,oBAAqB,CAMrB,cAAe,CACf,gDAA6C,CAC7C,aAAc,CALd,2BAA6B,CAL7B,iBAAkB,CAYlB,iBAAkB,CAUlB,0CAA8C,CAP9C,wBAAiB,CAAjB,gBAAiB,CADjB,qBAAsB,CADtB,kBAAmB,CAZnB,SAmFF,CA3DE,iBAUE,4DAAyG,CAIzG,4BAA6B,CAH7B,qBAAsB,CAPtB,QAAS,CAGT,UAAW,CAFX,MAAO,CAOP,SAAU,CAXV,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAWN,sBAAwB,CAPxB,UASF,CAEA,gBAEE,uDAAyD,CADzD,oBAEF,CAME,oGACE,SACF,CAIF,gBCvDA,eAAgB,CAFhB,kEAAgC,CAChC,kBDgEA,CAJE,oCAEE,eAAgB,CADhB,uBAEF,CAIF,wBClEA,eAAgB,CAFhB,kEAAgC,CAChC,kBDqEA,CAGE,wBACE,oBACF,CAGF,uCAGE,cAAe,CACf,UAAY,CAFZ,mBAGF,CAGF,gBAEE,yBAA2B,CAC3B,+CAAgD,CAFhD,8DAqBF,CAjBE,uBACE,YACF,CAEA,sBACE,6DACF,CAEA,uBAEE,mFACF,CAEA,yBAEE,mFACF,CAGF,iBAGE,yBAA2B,CAF3B,8DAWF,CAPE,yCAHA,yBAKA,CAEA,uBACE,6DACF,CAGF,iBAKE,wEAAuH,CAHvH,UAyBF,CApBE,wBAEE,gEACF,CAGA,uBCvIA,eAAgB,CAFhB,kEAAgC,CAChC,kBDgJA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BClJA,eAAgB,CAFhB,kEAAgC,CAChC,kBDqJA,CAKF,gBAEE,6BACF,CAEA,gBAKE,iBAAkB,CAHlB,gCAIF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold);\n  line-height: 1;\n  color: var(--bgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--fgColor-default) !important;\n  background: none !important;\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--fgColor-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n  /* stylelint-disable-next-line primer/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--focus-outlineColor);\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}