primer_view_components 0.5.1 → 0.7.0

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

@@ -84,15 +84,6 @@ module Primer
       PRECISION_DEFAULT = nil
       PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
 
-      # @example Default
-      #   <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400))) %>
-      #
-      # @example Past Time
-      #   <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), tense: :past)) %>
-      #
-      # @example Elapsed Time
-      #   <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), format: :elapsed)) %>
-      #
       # @param datetime [Time] The time to be formatted.
       # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
       # @param prefix [sring] What to prefix the relative ime display with.

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

@@ -12,21 +12,13 @@ module Primer
         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 %>

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

@@ -32,19 +32,6 @@ module Primer
       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) %>

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

@@ -55,61 +55,6 @@ module Primer
         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 %>

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

@@ -8,10 +8,6 @@ module Primer
 
       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)

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

@@ -1 +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)}
+.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-emphasis));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-emphasis));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.map

@@ -1 +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"]}
+{"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,4EAAgD,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,8EAAiD,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.rb

@@ -38,15 +38,6 @@ module Primer
         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)

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

@@ -14,56 +14,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :items, "TruncateText"
 
-      # @example Default
-      #   <%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
-      #
-      # @example Multiple items
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(font_weight: :bold) do %>
-      #       <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Advanced multiple items
-      #   <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
-      #     <% component.with_item(tag: :li) do %>primer<% end %>
-      #     <% component.with_item(tag: :li, priority: true) do %>/ css<% end %>
-      #     <% component.with_item(tag: :li) do %>/ Issues<% end %>
-      #     <% component.with_item(tag: :li) do %>/ #123 —<% end %>
-      #     <% component.with_item(tag: :li, priority: true) do %>
-      #       Visual bug on primer.style found in lists
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Expand on hover or focus
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #   <% end %>
-      #
-      # @example Max widths
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #     <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #     <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #
-      # @example Max widths on new lines
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #   <br/>
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #   <br/>
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
         @system_arguments = system_arguments

data/app/components/primer/blankslate_component.rb

@@ -16,82 +16,6 @@ module Primer
       Primer::Beta::Spinner.new(**system_arguments)
     }
 
-    #
-    # @example Basic
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
-    #
-    # @example Icon
-    #   @description
-    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :globe,
-    #       title: "Title",
-    #       description: "Description",
-    #     ) %>
-    #
-    # @example Loading
-    #   @description
-    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       title: "Title",
-    #       description: "Description",
-    #     ) do |component| %>
-    #       <% component.with_spinner(size: :large) %>
-    #     <% end %>
-    #
-    # @example Custom content
-    #   @description
-    #     Pass custom content as a block in place of `description`.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       title: "Title",
-    #     ) do %>
-    #       <em>Your custom content here</em>
-    #     <% end %>
-    #
-    # @example Action button
-    #   @description
-    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #
-    #       button_text: "Create the first page",
-    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #     ) %>
-    #
-    # @example Link
-    #   @description
-    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #       link_text: "Learn more about wikis",
-    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #     ) %>
-    #
-    # @example Variations
-    #   @description
-    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #       narrow: true,
-    #       large: true,
-    #       spacious: true,
-    #     ) %>
-    #
     # @param title [String] Text that appears in a larger bold font.
     # @param title_tag [Symbol] HTML tag to use for title.
     # @param icon [Symbol] Octicon icon to use at top of component.

data/app/components/primer/box.rb

@@ -5,12 +5,6 @@ module Primer
   class Box < Primer::Component
     status :stable
 
-    # @example Default
-    #   <%= render(Primer::Box.new) { "Your content here" } %>
-    #
-    # @example Color and padding
-    #   <%= render(Primer::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>
-    #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/button_component.rb

@@ -71,55 +71,6 @@ module Primer
       Primer::Alpha::Tooltip.new(**system_arguments)
     }
 
-    # @example Schemes
-    #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
-    #
-    # @example Sizes
-    #   <%= render(Primer::ButtonComponent.new(size: :small)) { "Small" } %>
-    #   <%= render(Primer::ButtonComponent.new(size: :medium)) { "Medium" } %>
-    #
-    # @example Block
-    #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
-    #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
-    #
-    # @example With leading visual
-    #   <%= render(Primer::ButtonComponent.new) do |component| %>
-    #     <% component.with_leading_visual_icon(icon: :star) %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With trailing visual
-    #   <%= render(Primer::ButtonComponent.new) do |component| %>
-    #     <% component.with_trailing_visual_counter(count: 15) %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With leading and trailing visuals
-    #   <%= render(Primer::ButtonComponent.new) do |component| %>
-    #     <% component.with_leading_visual_icon(icon: :star) %>
-    #     <% component.with_trailing_visual_counter(count: 15) %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With dropdown caret
-    #   <%= render(Primer::ButtonComponent.new(dropdown: true)) do %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With tooltip
-    #   @description
-    #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
-    #   @code
-    #     <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |component| %>
-    #       <% component.with_tooltip(text: "Tooltip text") %>
-    #       Button
-    #     <% end %>
-    #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>

data/app/components/primer/conditional_wrapper.rb

@@ -4,24 +4,9 @@ module Primer
   # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
   # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
   # the content is rendered.
-  #
-  # @example True conditional
-  #   <%# condition is true, so content will be wrapped in a <span> tag
-  #   <%= render Primer::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
-  #     <%# also rendered %>
-  #     <p class="bazboo">Some text</p>
-  #   <% end %>
-  #
-  # @example False conditional
-  #   <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
-  #   <%= render(Primer::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
-  #     <%# this content will be rendered %>
-  #     <p class="bazboo">Some text</p>
-  #   <% end %>
-  #
-  # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
-  # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
   class ConditionalWrapper < Primer::Component
+    # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
+    # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments

data/app/components/primer/icon_button.rb

@@ -21,36 +21,6 @@ module Primer
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
-    # @example Default
-    #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
-    #
-    # @example Schemes
-    #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
-    #   <%= render(Primer::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
-    #
-    # @example In a BorderBox
-    #
-    #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-    #     <% component.with_body do %>
-    #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
-    #       <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With an `aria-description`
-    #   @description
-    #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
-    #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
-    #     more context and information. See the accessibility section for more information.
-    #   @code
-    #     <%= render(Primer::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
-    #
-    # @example Custom tooltip direction
-    #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
-    #
     # @param scheme [Symbol] <%= one_of(Primer::IconButton::SCHEME_OPTIONS) %>
     # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>

data/app/components/primer/layout_component.rb

@@ -38,18 +38,6 @@ module Primer
     DEFAULT_SIDEBAR_COL = 3
     ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
 
-    # @example Default
-    #   <%= render(Primer::LayoutComponent.new) do |component| %>
-    #     <% component.with_sidebar { "Sidebar" } %>
-    #     <% component.with_main { "Main" } %>
-    #   <% end %>
-    #
-    # @example Left sidebar
-    #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
-    #     <% component.with_sidebar { "Sidebar" } %>
-    #     <% component.with_main { "Main" } %>
-    #   <% end %>
-    #
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
     # @param side [Symbol] Which side to display the sidebar on. <%= one_of(Primer::LayoutComponent::ALLOWED_SIDES) %>
     # @param sidebar_col [Integer] Sidebar column width.

data/app/components/primer/tooltip.rb

@@ -28,33 +28,6 @@ module Primer
       se
     ]
 
-    # @example Default
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
-    #   </div>
-    #
-    # @example Wrapping another component
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder")) do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
-    #     <% end %>
-    #   </div>
-    #
-    # @example With a direction
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
-    #   </div>
-    #
-    # @example With an alignment
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
-    #   </div>
-    #
-    # @example Without a delay
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
-    #   </div>
-    #
     # @param label [String] the text to appear in the tooltip
     # @param direction [String] Direction of the tooltip. <%= one_of(Primer::Tooltip::DIRECTION_OPTIONS) %>
     # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::Tooltip::ALIGN_MAPPING.keys) %>

data/app/components/primer/truncate.rb

@@ -8,25 +8,6 @@ module Primer
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
 
-    # @example Default
-    #   <div class="col-2">
-    #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
-    #   </div>
-    #
-    # @example Inline
-    #   <%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
-    #
-    # @example Expandable
-    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
-    #
-    # @example Custom size
-    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
-    #
-    # @example With HTML content
-    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
-    #     <span>branch-name-that-is-really-long</span>
-    #   <% end %>
-    #
     # @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
     # @param inline [Boolean] Whether the element is inline (or inline-block).
     # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.

data/app/forms/submit_button_form.rb

@@ -14,7 +14,7 @@ class SubmitButtonForm < ApplicationForm
     )
 
     my_form.group(layout: :horizontal) do |button_group|
-      button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3) do |component|
+      button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3, disabled: true) do |component|
         component.with_leading_visual_icon(icon: :"check-circle")
       end
 

data/lib/primer/accessibility.rb

@@ -39,7 +39,7 @@ module Primer
 
     class << self
       def ignore_preview?(preview_class)
-        preview_class.name.start_with?("Docs::") || IGNORED_PREVIEWS.include?(preview_class)
+        IGNORED_PREVIEWS.include?(preview_class)
       end
 
       def axe_rules_to_skip(component: nil, scenario_name: nil, flatten: false)

data/lib/primer/classify/utilities.yml

@@ -1558,6 +1558,8 @@
 :text_transform:
   :uppercase:
   - text-uppercase
+  :capitalize:
+  - text-capitalize
 :text_align:
   :right:
   - text-right

data/lib/primer/deprecations.yml

@@ -20,7 +20,7 @@ deprecations:
   - component: "Primer::ButtonComponent"
     autocorrect: false
     replacement: "Primer::Beta::Button"
-    guide: "https://primer.style/view-components/guides/primer_button_component"
+    guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-button-component"
 
   - component: "Primer::IconButton"
     autocorrect: true
@@ -29,7 +29,7 @@ deprecations:
   - component: "Primer::LayoutComponent"
     autocorrect: false
     replacement: "Primer::Alpha::Layout"
-    guide: "https://primer.style/view-components/guides/primer_layout_component"
+    guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-layout-component"
 
   - component: "Primer::Navigation::TabComponent"
     autocorrect: true
@@ -42,4 +42,4 @@ deprecations:
   - component: "Primer::Truncate"
     autocorrect: false
     replacement: "Primer::Beta::Truncate"
-    guide: "https://primer.style/view-components/guides/primer_truncate"
+    guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-truncate"

data/lib/primer/forms/button.rb

@@ -39,11 +39,6 @@ module Primer
 
         # rails uses a string for this, but PVC wants a symbol
         @input.merge_input_arguments!(type: type.to_sym)
-
-        # Never disable buttons. This overrides the global
-        # ActionView::Base.automatically_disable_submit_tag setting.
-        # Disabling buttons is not accessible.
-        @input.remove_input_data(:disable_with)
       end
 
       def input_arguments

data/lib/primer/forms/dsl/input.rb

@@ -115,6 +115,7 @@ module Primer
           end
 
           add_input_aria(:required, true) if required?
+          add_input_aria(:invalid, true) if invalid?
           add_input_aria(:describedby, ids.values) if ids.any?
 
           # avoid browser-native validation, which doesn't match Primer's style
@@ -147,9 +148,11 @@ module Primer
           input_data[key] = value
         end
 
+        # :nocov:
         def remove_input_data(key)
           input_data.delete(key)
         end
+        # :nocov:
 
         def merge_input_arguments!(arguments)
           arguments.each do |k, v|

data/lib/primer/static/generate_info_arch.rb

@@ -72,6 +72,7 @@ module Primer
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
+              "accessibility_docs" => docs.tags(:accessibility)&.first&.text,
               "is_form_component" => docs.manifest_entry.form_component?,
               "is_published" => docs.manifest_entry.published?,
               "requires_js" => docs.manifest_entry.requires_js?,

data/lib/primer/view_components/linters/details_menu_migration.rb

@@ -11,7 +11,7 @@ module ERBLint
           include Helpers::RuleHelpers
 
           MIGRATE_FROM_DETAILS_MENU = "<details-menu> has been deprecated. Please instead use Primer::Alpha::ActionMenu" \
-            "https://primer.style/design/components/action-menu/rails/alpha"
+            " https://primer.style/design/components/action-menu/rails/alpha"
           DETAILS_MENU_RUBY_PATTERN = /tag:?\s+:"details-menu"/.freeze
 
           def run(processed_source)