primer_view_components 0.0.109 → 0.0.111

data/app/components/primer/primer.pcss

@@ -1,5 +1,21 @@
 /* CSS component styles here */
 @import "./alpha/action_list.pcss";
-@import './alpha/segmented_control.pcss';
-@import "./beta/banner.pcss";
+@import "./alpha/banner.pcss";
+@import "./alpha/toggle_switch.pcss";
+@import "./alpha/segmented_control.pcss";
+@import "./beta/avatar.pcss";
+@import "./beta/avatar_stack.pcss";
+@import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
+@import "./beta/counter.pcss";
+@import "./beta/flash.pcss";
+@import "./beta/label.pcss";
+@import "./beta/blankslate.pcss";
+@import "./beta/progress_bar.pcss";
+@import "./beta/truncate.pcss";
+@import "./dropdown.pcss";
+@import "./popover_component.pcss";
+@import "./state_component.pcss";
+@import "./subhead_component.pcss";
+@import "./timeline_item_component.pcss";
+@import "./truncate.pcss";

data/app/components/primer/primer.ts

@@ -4,8 +4,8 @@ import './alpha/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'
+import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
-import './beta/x_banner'
 import './clipboard_copy'
 import './dropdown'
 import './local_time'

data/app/components/primer/progress_bar_component.rb

@@ -1,70 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `ProgressBar` to visualize task completion.
-  class ProgressBarComponent < Primer::Component
-    status :beta
-
-    # Use the Item slot to add an item to the progress bas
-    #
-    # @param percentage [Integer] The percent complete
-    # @param bg [Symbol] The background color
-    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :span
-      system_arguments[:bg] = bg
-      system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
-      system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    SIZE_DEFAULT = :default
-
-    SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :small => "Progress--small",
-      :large => "Progress--large"
-    }.freeze
-
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example Default
-    #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.item(percentage: 25) %>
-    #   <% end %>
-    #
-    # @example Small
-    #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
-    #   <% end %>
-    #
-    # @example Large
-    #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
-    #   <% end %>
-    #
-    # @example Multiple items
-    #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.item(percentage: 10) %>
-    #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
-    #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
-    #   <% end %>
-    #
-    # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(size: SIZE_DEFAULT, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Progress",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-      )
-      @system_arguments[:tag] = :span
-    end
-
-    def render?
-      items.any?
-    end
+  class ProgressBarComponent < Primer::Beta::ProgressBar
+    status :deprecated
   end
 end

data/app/components/primer/state_component.css

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

data/app/components/primer/state_component.css.json

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

data/app/components/primer/state_component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["state_component.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,kDAAoD,CACpD,8CAAgD,CAChD,2DAA6D,CAH7D,kEAAoE,CAIpE,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,aAEE,2CACF,CAEA,4BAJE,iCAOF,CAHA,eAEE,2CACF,CAEA,eAEE,6CAA8C,CAD9C,iCAEF,CAIA,cAEE,iDAAmD,CACnD,oCAAsC,CAFtC,cAOF,CAHE,uBACE,SACF","file":"state_component.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--primer-control-medium-paddingInline-normal, 12px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: var(--primer-control-medium-lineBoxHeight, 20px);\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(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.State--open {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-open-emphasis);\n}\n\n.State--merged {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-done-emphasis);\n}\n\n.State--closed {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--primer-text-body-size-small, 12px);\n  line-height: var(--base-size-24, 24px);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

data/app/components/primer/state_component.pcss

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

data/app/components/primer/subhead_component.css

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

data/app/components/primer/subhead_component.css.json

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

data/app/components/primer/subhead_component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["subhead_component.pcss"],"names":[],"mappings":"AAEA,SAIE,gFAAkF,CAHlF,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,iDAAmD,CADnD,wDAKF,CAGA,mBACE,mCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAAgD,CAEhD,OACF,CAGA,yBAEE,4BAA6B,CAD7B,gDAEF,CAGA,qBAEE,2BAA4B,CAC5B,WAAY,CAFZ,kDAAoD,CAGpD,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,6EAAiF,CAGjF,OAKF,CAHE,sCACE,iCACF","file":"subhead_component.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--primer-stack-padding-condensed, 8px);\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-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, 40px);\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, 400);\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, 600);\n  color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--primer-text-body-size-medium, 14px);\n  color: var(--color-fg-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, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4, 4px);\n  }\n}\n"]}

data/app/components/primer/subhead_component.pcss

@@ -0,0 +1,49 @@
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  padding-bottom: var(--primer-stack-padding-condensed, 8px);
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-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, 40px);
+}
+
+/* <h2> sized heading with normal font weight */
+.Subhead-heading {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal, 400);
+  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, 600);
+  color: var(--color-danger-fg);
+}
+
+/* One-liner of supporting text */
+.Subhead-description {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  color: var(--color-fg-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+.Subhead-actions {
+  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+
+  & + .Subhead-description {
+    margin-top: var(--base-size-4, 4px);
+  }
+}

data/app/components/primer/timeline_item_component.css

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

data/app/components/primer/timeline_item_component.css.json

@@ -0,0 +1 @@
+{"name":"timeline_item_component","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/timeline_item_component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["timeline_item_component.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item_component.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--primer-stack-padding-normal, 16px) 0;\n  margin-left: var(--primer-stack-gap-normal, 16px);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--primer-borderWidth-thick, 2px);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--primer-control-medium-size, 32px);\n  height: var(--primer-control-medium-size, 32px);\n  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4, 4px);\n  color: var(--color-fg-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(--primer-stack-gap-spacious, 24px);\n  margin: 0;\n  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4, 4px);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--primer-stack-gap-normal, 16px);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16, 16px);\n    margin-top: var(--base-size-8, 8px);\n    margin-bottom: var(--base-size-8, 8px);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}\n"]}

data/app/components/primer/timeline_item_component.pcss

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

data/app/components/primer/truncate.css

@@ -0,0 +1 @@
+.css-truncate .css-truncate-overflow,.css-truncate .css-truncate-target,.css-truncate.css-truncate-overflow,.css-truncate.css-truncate-target{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.css-truncate .css-truncate-target,.css-truncate.css-truncate-target{display:inline-block;max-width:125px;vertical-align:top}.css-truncate.expandable.css-truncate-target:hover,.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target{max-width:10000px!important}

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

@@ -0,0 +1 @@
+{"name":"truncate","selectors":[".css-truncate .css-truncate-overflow",".css-truncate .css-truncate-target",".css-truncate.css-truncate-overflow",".css-truncate.css-truncate-target",".css-truncate.expandable.css-truncate-target:hover",".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",".css-truncate.expandable:hover .css-truncate-target"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAME,8IAIE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAGA,qEAEE,oBAAqB,CACrB,eAAgB,CAChB,kBACF,CAEA,gPAIE,2BACF","file":"truncate.css","sourcesContent":["/* CSS truncate */\n\n/* css-truncate will shorten text with an ellipsis. */\n\n.css-truncate {\n  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */\n  &.css-truncate-overflow,\n  & .css-truncate-overflow,\n  &.css-truncate-target,\n  & .css-truncate-target {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* css-truncate-target will shorten text with an ellipsis and a max width */\n  &.css-truncate-target,\n  & .css-truncate-target {\n    display: inline-block;\n    max-width: 125px;\n    vertical-align: top;\n  }\n\n  &.expandable.zeroclipboard-is-hover .css-truncate-target,\n  &.expandable.zeroclipboard-is-hover.css-truncate-target,\n  &.expandable:hover .css-truncate-target,\n  &.expandable:hover.css-truncate-target {\n    max-width: 10000px !important;\n  }\n}\n"]}

data/app/components/primer/truncate.pcss

@@ -0,0 +1,30 @@
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+.css-truncate {
+  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+  &.css-truncate-overflow,
+  & .css-truncate-overflow,
+  &.css-truncate-target,
+  & .css-truncate-target {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* css-truncate-target will shorten text with an ellipsis and a max width */
+  &.css-truncate-target,
+  & .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+  &.expandable.zeroclipboard-is-hover .css-truncate-target,
+  &.expandable.zeroclipboard-is-hover.css-truncate-target,
+  &.expandable:hover .css-truncate-target,
+  &.expandable:hover.css-truncate-target {
+    max-width: 10000px !important;
+  }
+}

data/lib/primer/deprecations.rb

@@ -12,10 +12,10 @@ module Primer
       "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
       "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
       "Primer::BoxComponent" => "Primer::Box",
-      "Primer::CounterComponent" => "Primer::Beta::Counter",
       "Primer::DropdownMenuComponent" => nil,
       "Primer::IconButton" => "Primer::Beta::IconButton",
-      "Primer::Tooltip" => "Primer::Alpha::Tooltip"
+      "Primer::Tooltip" => "Primer::Alpha::Tooltip",
+      "Primer::ProgressBarComponent" => "Primer::Beta::ProgressBar"
     }.freeze
 
     def self.deprecated?(name)

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 109
+      PATCH = 111
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -44,7 +44,7 @@ namespace :docs do
       Primer::Beta::Avatar,
       Primer::Beta::AvatarStack,
       Primer::Beta::BaseButton,
-      Primer::Beta::Banner,
+      Primer::Alpha::Banner,
       Primer::Beta::Blankslate,
       Primer::Beta::BorderBox,
       Primer::Beta::BorderBox::Header,
@@ -71,7 +71,7 @@ namespace :docs do
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
       Primer::PopoverComponent,
-      Primer::ProgressBarComponent,
+      Primer::Beta::ProgressBar,
       Primer::StateComponent,
       Primer::SpinnerComponent,
       Primer::SubheadComponent,
@@ -103,7 +103,7 @@ namespace :docs do
       Primer::LocalTime,
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,
-      Primer::Beta::Banner,
+      Primer::Alpha::Banner,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TimeAgoComponent,

data/lib/tasks/test.rake

@@ -27,6 +27,14 @@ namespace :test do
     ]
   end
 
+  Rake::TestTask.new(:component_css) do |t|
+    t.warning = false
+    t.libs << "test"
+    t.test_files = FileList[
+      "test/css/**/*_test.rb"
+    ]
+  end
+
   Rake::TestTask.new(:lib) do |t|
     t.warning = false
     t.libs << "test"

data/previews/primer/alpha/banner_preview/with_action_button.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+  <% component.with_action_button(size: :medium) { "Take action" } %>
+  <%= content %>
+<% end %>

data/previews/primer/{beta → alpha}/banner_preview/with_action_content.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Beta::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+<%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
   <% component.with_action_content do %>
     <%= render(Primer::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
   <% end %>

data/previews/primer/alpha/banner_preview.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Banner
+    class BannerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param full_when_narrow toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param description text
+      # @param reappear [Boolean]
+      def playground(full: false, full_when_narrow: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner!", description: nil)
+        icon = nil if icon == :none
+        render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, description: description, reappear: reappear)) { content }
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::Banner.new) { "This is a banner." }
+      end
+
+      # @!group Schemes
+      #
+      # @label Default scheme
+      def scheme_default
+        render(Primer::Alpha::Banner.new) { "This is a default banner." }
+      end
+
+      # @label Danger
+      def scheme_danger
+        render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
+      end
+
+      # @label Success
+      def scheme_success
+        render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
+      end
+
+      # @label Warning
+      def scheme_warning
+        render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
+      end
+      #
+      # @!endgroup
+
+      # @label Dismissable
+      def dismissable
+        render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
+      end
+
+      # @!group Full Width
+      #
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner." }
+      end
+
+      # @label Full width in Narrow Viewport
+      def full_width_in_narrow_viewport
+        render(Primer::Alpha::Banner.new(full: true, full_when_narrow: true)) { "This is a full width banner in a narrow viewport." }
+      end
+      #
+      # @!endgroup
+
+      # @label With action button
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param reappear [Boolean]
+      def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
+      end
+
+      # @label With action content
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      # @param reappear [Boolean]
+      def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
+        icon = nil if icon == :none
+        render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
+      end
+    end
+  end
+end