primer_view_components 0.0.109 → 0.0.110

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

@@ -0,0 +1,26 @@
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  outline: 1px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: 2px;
+}

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

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `ProgressBar` to visualize task completion.
+    class ProgressBar < Primer::Component
+      status :beta
+
+      # Use the Item slot to add an item to the progress bar
+      #
+      # @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::Beta::ProgressBar.new) do |component| %>
+      #     <% component.item(percentage: 25) %>
+      #   <% end %>
+      #
+      # @example Small
+      #   <%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %>
+      #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %>
+      #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
+      #   <% end %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::ProgressBar.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::Beta::ProgressBar::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
+    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}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--primer-control-small-gap,4px)}.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}

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

@@ -0,0 +1 @@
+{"name":"beta/truncate","selectors":[".Truncate",".Truncate>.Truncate-text",":is(.Truncate>.Truncate-text)+.Truncate-text",".Truncate>.Truncate-text.Truncate-text--primary",".Truncate>.Truncate-text.Truncate-text--expandable:active",".Truncate>.Truncate-text.Truncate-text--expandable:focus",".Truncate>.Truncate-text.Truncate-text--expandable:hover"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,6CACE,+CACF,CAEA,gDACE,eACF,CAEA,4KAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      margin-left: var(--primer-control-small-gap, 4px);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

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

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

data/app/components/primer/primer.d.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/primer.js

@@ -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/primer.pcss

@@ -1,5 +1,15 @@
 /* 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/breadcrumbs.pcss";
 @import "./beta/button.pcss";
+@import "./beta/counter.pcss";
+@import "./beta/label.pcss";
+@import "./beta/blankslate.pcss";
+@import "./beta/progress_bar.pcss";
+@import "./beta/truncate.pcss";
+@import "./state_component.pcss";
+@import "./subhead_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/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

@@ -15,7 +15,8 @@ module Primer
       "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 = 110
 
       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