openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Spinner` to let users know that content is being loaded.
+    class Spinner < Primer::Component
+      status :beta
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => 16,
+        DEFAULT_SIZE => 32,
+        :large => 64
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+      # Setting `box-sizing: content-box` allows consumers to add padding
+      # to the spinner without shrinking the icon
+      DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
+
+      #
+      # @example Default
+      #   <%= render(Primer::Beta::Spinner.new) %>
+      #
+      # @example Small
+      #   <%= render(Primer::Beta::Spinner.new(size: :small)) %>
+      #
+      # @example Large
+      #   <%= render(Primer::Beta::Spinner.new(size: :large)) %>
+      #
+      # @param size [Symbol] <%= one_of(Primer::Beta::Spinner::SIZE_MAPPINGS) %>
+      # @param style [String] Custom element styles.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :svg
+        @system_arguments[:style] ||= style
+        @system_arguments[:animation] = :rotate
+        @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        @system_arguments[:viewBox] = "0 0 16 16"
+        @system_arguments[:fill] = :none
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed,.State--merged{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis))}.State--small{font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-24,1.5rem);padding:0 10px}.State--small .octicon{width:1em}

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

@@ -0,0 +1,13 @@
+{
+  "name": "beta/state",
+  "selectors": [
+    ".State",
+    ".state",
+    ".State--draft",
+    ".State--open",
+    ".State--merged",
+    ".State--closed",
+    ".State--small",
+    ".State--small .octicon"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,8CAAuC,CACvC,8CAA2C,CAC3C,uDAAgD,CAHhD,6DAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,uEAAiD,CACjD,4DACF,CAEA,yCALE,2DAQF,CAHA,aAEE,wEACF,CAEA,eAEE,wEACF,CAEA,8BAJE,2DAOF,CAHA,eAEE,4EACF,CAIA,cAEE,4CAAsC,CACtC,sCAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

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

@@ -0,0 +1,50 @@
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  padding: 5px var(--control-medium-paddingInline-normal);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  line-height: var(--control-medium-lineBoxHeight);
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-neutral-emphasis);
+  border: var(--borderWidth-thin) solid transparent;
+}
+
+.State--open {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
+}
+
+.State--merged {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
+}
+
+.State--closed {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
+}
+
+/* Small 24px */
+
+.State--small {
+  padding: 0 10px;
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-24);
+
+  & .octicon {
+    width: 1em; /* Ensures different icons don't change State indicator width */
+  }
+}

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

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `State` for rendering the status of an item.
+    class State < Primer::Component
+      status :beta
+
+      SCHEME_DEFAULT = :default
+      NEW_SCHEME_MAPPINGS = {
+        open: "State--open",
+        closed: "State--closed",
+        merged: "State--merged"
+      }.freeze
+
+      DEPRECATED_SCHEME_MAPPINGS = {
+        SCHEME_DEFAULT => "",
+        :green => "State--open",
+        :red => "State--closed",
+        :purple => "State--merged"
+      }.freeze
+      SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      SIZE_DEFAULT = :default
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => "",
+        :small => "State--small"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      TAG_DEFAULT = :span
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::State.new(title: "title")) { "State" } %>
+      #
+      # @example Schemes
+      #   <%= render(Primer::Beta::State.new(title: "title")) { "Default" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", scheme: :open)) { "Open" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", scheme: :closed)) { "Closed" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", scheme: :merged)) { "Merged" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::State.new(title: "title")) { "Default" } %>
+      #   <%= render(Primer::Beta::State.new(title: "title", size: :small)) { "Small" } %>
+      #
+      # @param title [String] `title` HTML attribute.
+      # @param scheme [Symbol] Background color. <%= one_of(Primer::Beta::State::SCHEME_OPTIONS) %>
+      # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::Beta::State::TAG_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::State::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        title:,
+        scheme: SCHEME_DEFAULT,
+        tag: TAG_DEFAULT,
+        size: SIZE_DEFAULT,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:title] = title
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "State",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}

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

@@ -0,0 +1,12 @@
+{
+  "name": "beta/subhead",
+  "selectors": [
+    ".Subhead",
+    ".Subhead--spacious",
+    ".Subhead-heading",
+    ".Subhead-heading--danger",
+    ".Subhead-description",
+    ".Subhead-actions",
+    ".Subhead-actions+.Subhead-description"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= heading %>
+  <%= description %>
+  <%= actions %>
+<% end %>

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

@@ -0,0 +1,49 @@
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  padding-bottom: var(--stack-padding-condensed);
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* Modifier class to give a lot of breathing room between sections of content. */
+.Subhead--spacious {
+  margin-top: var(--base-size-40);
+}
+
+/* <h2> sized heading with normal font weight */
+.Subhead-heading {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* Make the text bold and red for dangerous content */
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-danger);
+}
+
+/* One-liner of supporting text */
+.Subhead-description {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+.Subhead-actions {
+  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+
+  & + .Subhead-description {
+    margin-top: var(--base-size-4);
+  }
+}

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

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
+    #
+    # - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
+    # - Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
+    # - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::Beta::Link) %>.
+    #
+    # @accessibility
+    #   The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
+    #   <%= link_to_heading_practices %>
+    class Subhead < Primer::Component
+      status :beta
+
+      DEFAULT_HEADING_TAG = :div
+      HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
+
+      # The heading
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::Subhead::HEADING_TAG_OPTIONS)%>
+      # @param danger [Boolean] Whether to style the heading as dangerous.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Subhead-heading",
+          "Subhead-heading--danger": danger
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Actions
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # The description
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :description, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3) do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With dangerous heading
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3, danger: true) do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With long description
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3) do %>
+      #       My Heading
+      #     <% end %>
+      #   <% end %>
+      #   <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
+      #
+      # @example Without border
+      #   <%= render(Primer::Beta::Subhead.new(hide_border: true)) do |component| %>
+      #     <% component.with_heading do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With actions
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #     <% component.with_actions do %>
+      #       <%= render(
+      #         Primer::ButtonComponent.new(
+      #           tag: :a, href: "http://www.google.com", scheme: :danger
+      #         )
+      #       ) { "Action" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param spacious [Boolean] Whether to add spacing to the Subhead.
+      # @param hide_border [Boolean] Whether to hide the border under the heading.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(spacious: false, hide_border: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "Subhead",
+            "Subhead--spacious": spacious,
+            "border-bottom-0": hide_border
+          )
+        @system_arguments[:mb] ||= hide_border ? 0 : nil
+      end
+
+      def render?
+        heading.present?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Text` is a wrapper component that will apply typography styles to the text inside.
+    class Text < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+
+      # @example Default
+      #   <%= render(Primer::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
+      #   <%= render(Primer::Beta::Text.new(tag: :p, color: :danger)) { "Danger Text" } %>
+      #
+      # @param tag [Symbol]
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = tag
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-fg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}

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

@@ -0,0 +1,16 @@
+{
+  "name": "beta/timeline_item",
+  "selectors": [
+    ".TimelineItem",
+    ".TimelineItem:before",
+    ".TimelineItem:target .TimelineItem-badge",
+    ".TimelineItem-badge",
+    ".TimelineItem-badge--success",
+    ".TimelineItem-body",
+    ".TimelineItem-avatar",
+    ".TimelineItem-break",
+    ".TimelineItem--condensed",
+    ".TimelineItem--condensed:last-child",
+    ".TimelineItem--condensed .TimelineItem-badge"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,mEAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,sEAAgD,CAChD,6EACF,CAGF,oBASE,kBAAmB,CACnB,4EAA8C,CAC9C,yGAA6D,CAC7D,iBAAkB,CAJlB,gDAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,wEAAiD,CACjD,4DAAiD,CAFjD,2DAGF,CAEA,mBAIE,gDAA2B,CAC3B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,mEAAwC,CACxC,QAAS,CACT,kHAAuE,CANvE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--stack-padding-normal) 0;\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  margin-right: var(--controlStack-medium-gap-condensed);\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n    background-color: var(--bgColor-default);\n    border: 0;\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= avatar %>
+  <%= badge %>
+  <%= body %>
+<% end %>

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

@@ -0,0 +1,93 @@
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: var(--stack-padding-normal) 0;
+  margin-left: var(--stack-gap-normal);
+
+  /* The Timeline */
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--borderWidth-thick);
+    content: '';
+    background-color: var(--borderColor-muted);
+  }
+
+  &:target .TimelineItem-badge {
+    border-color: var(--borderColor-accent-emphasis);
+    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
+  }
+}
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--control-medium-size);
+  height: var(--control-medium-size);
+  margin-right: var(--controlStack-medium-gap-condensed);
+  margin-left: calc(var(--control-medium-size) / -2 + 1px);
+  color: var(--fgColor-muted);
+  align-items: center;
+  background-color: var(--timelineBadge-bgColor);
+  border: var(--borderWidth-thick) solid var(--bgColor-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-success-emphasis);
+  border: var(--borderWidth-thin) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4);
+  color: var(--fgColor-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--stack-gap-spacious);
+  margin: 0;
+  margin-bottom: calc(var(--stack-gap-normal) * -1);
+  margin-left: -56px;
+  background-color: var(--bgColor-default);
+  border: 0;
+  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+  &:last-child {
+    padding-bottom: var(--stack-gap-normal);
+  }
+
+  & .TimelineItem-badge {
+    height: var(--base-size-16);
+    margin-top: var(--base-size-8);
+    margin-bottom: var(--base-size-8);
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-default);
+    border: 0;
+  }
+}

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

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
+    class TimelineItem < Primer::Component
+      status :beta
+
+      # Avatar to be rendered to the left of the Badge.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
+      renders_one :avatar, lambda { |src:, size: 40, shape: :square, **system_arguments|
+        system_arguments[:classes] = class_names(
+          "TimelineItem-avatar",
+          system_arguments[:classes]
+        )
+
+        Primer::Beta::Avatar.new(src: src, size: size, shape: shape, **system_arguments)
+      }
+
+      # Badge that will be connected to other TimelineItems.
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :badge, "Badge"
+
+      # Body to be rendered to the left of the Badge.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "TimelineItem-body",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <div style="padding-left: 60px">
+      #     <%= render(Primer::Beta::TimelineItem.new) do |component| %>
+      #       <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
+      #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
+      #       <% component.with_body { "Success!" } %>
+      #     <% end %>
+      #   </div>
+      #
+      # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(condensed: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "TimelineItem",
+          condensed ? "TimelineItem--condensed" : "",
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        avatar? || badge? || body?
+      end
+
+      # This component is part of `Primer::Beta::TimelineItem` and should not be
+      # used as a standalone component.
+      class Badge < Primer::Component
+        status :beta
+
+        def initialize(icon: nil, **system_arguments)
+          @icon = icon
+
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "TimelineItem-badge",
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            render(Primer::Beta::Octicon.new(@icon))
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Truncate>.Truncate-text+.Truncate-text{margin-left:var(--control-small-gap,.25rem)}.Truncate>.Truncate-text.Truncate-text--primary{flex-basis:200%}.Truncate>.Truncate-text.Truncate-text--expandable:active,.Truncate>.Truncate-text.Truncate-text--expandable:focus,.Truncate>.Truncate-text.Truncate-text--expandable:hover{cursor:pointer;flex-shrink:0;max-width:100%!important}