openproject-primer_view_components 0.6.3

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

@@ -0,0 +1 @@
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,mEAAwC,CACxC,mEAAwC,CAGxC,4CAAyC,CAFzC,kBAAmB,CACnB,sDAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,6EACF,CAGE,6CAGE,gBAAiB,CADjB,mHAA6G,CAD7G,6GAGF,CAGF,yBACE,6EACF,CAIA,2BAEE,gBAAiB,CADjB,4CAEF,CAEA,0BACE,+CACF,CAWE,gGAJA,4CAOA,CAHA,4CAEE,0FACF,CAGF,wBACE,4CACF,CAGF,YAGE,gEAAsC,CACtC,mEAAwC,CACxC,kBAAmB,CAEnB,qDAAkD,CAClD,sDAAmD,CAFnD,sDAAqC,CAJrC,gHAA+E,CAD/E,wCAQF,CAEA,WACE,8CAAuC,CACvC,gDACF,CAEA,UAEE,oHAAuE,CADvE,wCASF,CALE,uBAGE,wDAAqD,CADrD,yDAAsD,CADtD,iEAGF,CAIF,SAME,6GAAyC,CAHzC,oBAAqB,CADrB,8DAA8C,CAD9C,wCAqDF,CA9CE,uBACE,qDAAkD,CAClD,sDACF,CAEA,sBAEE,wDAAqD,CADrD,yDAEF,CAIA,yCAGE,kFACF,CAIE,gDACE,kDAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,gEAMF,CAHE,6DACE,SACF,CAMJ,sCACE,gEACF,CAIA,sCACE,uEACF,CAIA,2BACE,gEACF,CAIA,2BACE,uEACF,CAOA,yBADF,cAEI,oDAA6B,CAC7B,oBAOJ,CALI,oBACE,kDAA4B,CAC5B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,+EAAwE,CADxE,iHAAyC,CAHzC,8DAA8C,CAD9C,wCAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sEAKA,CAHA,uBACE,uEAEF,CAUA,gEACE,sEACF,CAeE,qFACE,4EACF,CAIJ,kBACE,uEAA6C,CAC7C,sEACF,CAIA,iBACE,6EACF,CAEA,eACE,uEACF,CAEA,eACE,gEACF,CAKE,6BAGE,eAAgB,CADhB,gHAA2G,CAD3G,2GAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--bgColor-default);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--stack-padding-spacious);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--text-title-size-medium);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--stack-padding-spacious);\n      margin: calc(var(--stack-gap-spacious) * -1) calc(var(--stack-gap-spacious) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-spacious);\n  }\n}\n\n.Box-header {\n  padding: var(--stack-padding-normal);\n  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n  background-color: var(--bgColor-muted);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n  padding: var(--stack-padding-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--borderWidth-thin) * -1);\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--borderColor-muted);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n\n  &:first-of-type {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--fgColor-accent);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--bgColor-muted);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--bgColor-muted);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--fgColor-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--fgColor-accent);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--borderColor-default);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--borderColor-accent-muted);\n\n  & .Box-header {\n    background-color: var(--bgColor-accent-muted);\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--borderColor-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--borderColor-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n  background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n  background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--control-medium-paddingInline-spacious) var(--control-medium-paddingInline-spacious);\n    margin: calc(var(--controlStack-small-gap-spacious) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= header %>
+  <%= body %>
+  <% if rows.any? %>
+    <ul>
+      <% rows.each do |row| %>
+        <%= row %>
+      <% end %>
+    </ul>
+  <% end %>
+  <%= footer %>
+<% end %>

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

@@ -0,0 +1,284 @@
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match PVC */
+.Box {
+  background-color: var(--bgColor-default);
+  border-color: var(--borderColor-default);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
+}
+
+/* Box padding density options */
+.Box--condensed {
+  line-height: 1.25;
+
+  & .Box-header {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+
+  & .Box-body {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+
+  & .Box-footer {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
+      line-height: 1.25;
+    }
+  }
+
+  & .Box-row {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+}
+
+.Box--spacious {
+  & .Box-header {
+    padding: var(--stack-padding-spacious);
+    line-height: 1.25;
+  }
+
+  & .Box-title {
+    font-size: var(--text-title-size-medium);
+  }
+
+  & .Box-body {
+    padding: var(--stack-padding-spacious);
+  }
+
+  & .Box-footer {
+    padding: var(--stack-padding-spacious);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--stack-padding-spacious);
+      margin: calc(var(--stack-gap-spacious) * -1) calc(var(--stack-gap-spacious) * -1);
+    }
+  }
+
+  & .Box-row {
+    padding: var(--stack-padding-spacious);
+  }
+}
+
+.Box-header {
+  padding: var(--stack-padding-normal);
+  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;
+  background-color: var(--bgColor-muted);
+  border-color: var(--borderColor-default);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
+}
+
+.Box-title {
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.Box-body {
+  padding: var(--stack-padding-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+  &:last-of-type {
+    margin-bottom: calc(var(--borderWidth-thin) * -1);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+}
+
+/* Box rows */
+.Box-row {
+  padding: var(--stack-padding-normal);
+  margin-top: calc(var(--borderWidth-thin) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--borderColor-muted);
+  border-top-style: solid;
+  border-top-width: var(--borderWidth-thin);
+
+  &:first-of-type {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+  /* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+  &.Box-row--unread,
+  /* .unread to be deprecated with .Box-row-unread */
+  &.unread {
+    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    /* Focus styles for when drag icon */
+    & .Box-row--drag-button {
+      color: var(--fgColor-accent);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    /* Grabbing while row is dragged */
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    /* Row dragging styles */
+    &.sortable-chosen {
+      background-color: var(--bgColor-muted);
+    }
+
+    /* Makes dragging row background gray */
+    &.sortable-ghost {
+      background-color: var(--bgColor-muted);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+      & .Box-row--drag-hide {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.Box-row--focus-gray {
+  &.navigation-focus {
+    background-color: var(--bgColor-muted);
+  }
+}
+
+.Box-row--focus-blue {
+  &.navigation-focus {
+    background-color: var(--bgColor-accent-muted);
+  }
+}
+
+.Box-row--hover-gray {
+  &:hover {
+    background-color: var(--bgColor-muted);
+  }
+}
+
+.Box-row--hover-blue {
+  &:hover {
+    background-color: var(--bgColor-accent-muted);
+  }
+}
+
+/* Optional link style
+** Makes links on mobile blue since they don't have hover state,
+** and links are dark-gray with blue hover on desktop. */
+.Box-row-link {
+  @media (min-width: 768px) {
+    color: var(--fgColor-default);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--fgColor-accent);
+      text-decoration: none;
+    }
+  }
+}
+
+/* Optional drag icon styles for reordering items
+** Focus styles included in .Box-row above */
+.Box-row--drag-button {
+  opacity: 0;
+}
+
+.Box-footer {
+  padding: var(--stack-padding-normal);
+  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--borderColor-default);
+  border-top-style: solid;
+  border-top-width: var(--borderWidth-thin);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
+}
+
+/* Option for a box with scrolling content */
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--borderColor-accent-muted);
+
+  & .Box-header {
+    background-color: var(--bgColor-accent-muted);
+    border-color: var(--borderColor-accent-muted);
+  }
+
+  & .Box-body {
+    border-color: var(--borderColor-accent-muted);
+  }
+
+  & .Box-row {
+    border-color: var(--borderColor-accent-muted);
+  }
+
+  & .Box-footer {
+    border-color: var(--borderColor-accent-muted);
+  }
+}
+
+/* Applies and red border to the outside of the box,
+** but not to the border separating rows. */
+.Box--danger {
+  border-color: var(--borderColor-danger-emphasis);
+
+  & .Box-row {
+    &:first-of-type {
+      border-color: var(--borderColor-danger-emphasis);
+    }
+  }
+
+  & .Box-body {
+    &:last-of-type {
+      border-color: var(--borderColor-danger-emphasis);
+    }
+  }
+}
+
+.Box-header--blue {
+  background-color: var(--bgColor-accent-muted);
+  border-color: var(--borderColor-accent-muted);
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--bgColor-attention-muted);
+}
+
+.Box-row--blue {
+  background-color: var(--bgColor-accent-muted);
+}
+
+.Box-row--gray {
+  background-color: var(--bgColor-muted);
+}
+
+/* Box with btn-octicon */
+.Box-btn-octicon {
+  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+  &.btn-octicon {
+    padding: var(--control-medium-paddingInline-spacious) var(--control-medium-paddingInline-spacious);
+    margin: calc(var(--controlStack-small-gap-spacious) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }
+}

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

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `BorderBox` is a Box component with a border.
+    class BorderBox < Primer::Component
+      status :beta
+
+      DEFAULT_PADDING = :default
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => "",
+        :condensed => "Box--condensed",
+        :spacious => "Box--spacious"
+      }.freeze
+      PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
+
+      DEFAULT_ROW_SCHEME = :default
+      ROW_SCHEME_MAPPINGS = {
+        DEFAULT_ROW_SCHEME => "",
+        :neutral => "Box-row--gray",
+        :info => "Box-row--blue",
+        :warning => "Box-row--yellow"
+      }.freeze
+
+      # Optional Header.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @accessibility
+      # When using header.with_title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+      renders_one :header, "Primer::Beta::BorderBox::Header"
+
+      # Optional Body.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-body",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional Footer.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-footer",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Use Rows to add rows with borders and maintain the same padding.
+      #
+      # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::BorderBox::ROW_SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
+        system_arguments[:tag] = :li
+        system_arguments[:classes] = class_names(
+          "Box-row",
+          ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Header with title, body, rows, and footer
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.with_header do |header| %>
+      #       <% header.with_title(tag: :h2) do %>
+      #         Header
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.with_row do %>
+      #       <% if true %>
+      #         Row one
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.with_footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Padding density
+      #   <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %>
+      #     <% component.with_header do %>
+      #       Header
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.with_row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.with_footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Row colors
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.with_row do %>
+      #       Default
+      #     <% end %>
+      #     <% component.with_row(scheme: :neutral) do %>
+      #       Neutral
+      #     <% end %>
+      #     <% component.with_row(scheme: :info) do %>
+      #       Info
+      #     <% end %>
+      #     <% component.with_row(scheme: :warning) do %>
+      #       Warning
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(padding: DEFAULT_PADDING, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Box",
+          PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
+          system_arguments[:classes]
+        )
+
+        @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+      end
+
+      def render?
+        rows.any? || header.present? || body.present? || footer.present?
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis,var(--color-fg-subtle));content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default,var(--color-fg-default))}

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

@@ -0,0 +1,11 @@
+{
+  "name": "beta/breadcrumbs",
+  "selectors": [
+    ".breadcrumb-item",
+    ".breadcrumb-item:after",
+    ".breadcrumb-item:first-child",
+    ".breadcrumb-item-selected:after",
+    ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
+    ".breadcrumb-item-selected a"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,kFAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,oDACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n}\n"]}

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

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <ol>
+    <% items.each_with_index do |item, index| %>
+      <% item.selected = index == items.length - 1 %>
+      <%= item %>
+    <% end %>
+  </ol>
+<% end %>

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

@@ -0,0 +1,30 @@
+.breadcrumb-item {
+  display: inline-block;
+  margin-left: -0.35em;
+  white-space: nowrap;
+  list-style: none;
+
+  &::after {
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 0.5em;
+    content: '';
+    border-right: 0.1em solid var(--borderColor-neutral-emphasis);
+    transform: rotate(15deg);
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current]:not([aria-current='false']) {
+  &::after {
+    content: none;
+  }
+}
+
+.breadcrumb-item-selected a {
+  color: var(--fgColor-default);
+}

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Breadcrumbs` to display page hierarchy.
+    #
+    # #### Known issues
+    #
+    # ##### Responsiveness
+    #
+    # `Breadcrumbs` is not optimized for responsive designs.
+    #
+    # @accessibility
+    #   `Breadcrumbs` renders a list of links within a `nav` element and has an implicit landmark role of `navigation`.
+    #   By default, the component labels the `nav` element with "Breadcrumbs" which helps distinguish the type of navigation.
+    #   Additionally, the component will always render the last link, which should represent the current page, with an `aria-current="page"` attribute.
+    #
+    #   For more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
+    class Breadcrumbs < Primer::Component
+      status :beta
+
+      PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
+      FONT_SIZE_MESSAGE = "Breadcrumbs do not support the font_size system argument."
+      ARIA_LABEL = { label: "Breadcrumb" }.freeze
+      ARGS_DENYLIST = {
+        [:p, :pt, :pb, :pr, :pl, :px, :py] => PADDING_MESSAGE,
+        [:font_size] => FONT_SIZE_MESSAGE
+      }.freeze
+
+      # @param href [String] The URL to link to.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "Item"
+
+      # @example Basic
+      #   <%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
+      #     <% component.with_item(href: "/") do %>Home<% end %>
+      #     <% component.with_item(href: "/about") do %>About<% end %>
+      #     <% component.with_item(href: "/about/team") do %>Team<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :nav
+        @system_arguments[:aria] = ARIA_LABEL
+        @system_arguments[:system_arguments_denylist] = ARGS_DENYLIST
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Primer::Beta::Breadcrumbs` and should not be
+      # used as a standalone component.
+      class Item < Primer::Component
+        attr_accessor :selected, :href
+
+        def initialize(href:, **system_arguments)
+          @href = href
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @selected = false
+
+          @system_arguments[:tag] = :li
+          @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
+        end
+
+        def call
+          link_arguments = { href: @href }
+
+          if selected
+            link_arguments[:"aria-current"] = "page"
+            @system_arguments[:classes] = "#{@system_arguments[:classes]} breadcrumb-item-selected"
+          end
+
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            render(Primer::Beta::Link.new(**link_arguments)) { content }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,6px);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow)),var(--shadow-highlight,var(--color-btn-primary-inset-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link-rest,var(--color-accent-fg));border:none;color:var(--fgColor-link-rest,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled);color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}