diff --git a/.changeset/moody-readers-punch.md b/.changeset/moody-readers-punch.md new file mode 100644 index 0000000000..c68a1e4a43 --- /dev/null +++ b/.changeset/moody-readers-punch.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +migrating `Primer::BorderBoxComponent` to `Primer::Beta::BorderBox` diff --git a/app/components/primer/border_box_component.html.erb b/app/components/primer/beta/border_box.html.erb similarity index 100% rename from app/components/primer/border_box_component.html.erb rename to app/components/primer/beta/border_box.html.erb diff --git a/app/components/primer/beta/border_box.rb b/app/components/primer/beta/border_box.rb new file mode 100644 index 0000000000..10dfc25c10 --- /dev/null +++ b/app/components/primer/beta/border_box.rb @@ -0,0 +1,147 @@ +# frozen_string_literal: true + +module Primer + module Beta + # `BorderBox` is a Box component with a border. + class BorderBox < Primer::Component + status :beta + + DEFAULT_PADDING = :default + PADDING_MAPPINGS = { + DEFAULT_PADDING => "", + :condensed => "Box--condensed", + :spacious => "Box--spacious" + }.freeze + PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?" + + DEFAULT_ROW_SCHEME = :default + ROW_SCHEME_MAPPINGS = { + DEFAULT_ROW_SCHEME => "", + :neutral => "Box-row--gray", + :info => "Box-row--blue", + :warning => "Box-row--yellow" + }.freeze + + # Optional Header. + # + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + # @accessibility + # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc. + renders_one :header, "Primer::Beta::BorderBox::Header" + + # Optional Body. + # + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :body, lambda { |**system_arguments| + system_arguments[:tag] = :div + system_arguments[:classes] = class_names( + "Box-body", + system_arguments[:classes] + ) + + Primer::BaseComponent.new(**system_arguments) + } + + # Optional Footer. + # + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :footer, lambda { |**system_arguments| + system_arguments[:tag] = :div + system_arguments[:classes] = class_names( + "Box-footer", + system_arguments[:classes] + ) + + Primer::BaseComponent.new(**system_arguments) + } + + # Use Rows to add rows with borders and maintain the same padding. + # + # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::BorderBox::ROW_SCHEME_MAPPINGS.keys) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments| + system_arguments[:tag] = :li + system_arguments[:classes] = class_names( + "Box-row", + ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)], + system_arguments[:classes] + ) + + Primer::BaseComponent.new(**system_arguments) + } + + # @example Header with title, body, rows, and footer + # <%= render(Primer::Beta::BorderBox.new) do |component| %> + # <% component.header do |h| %> + # <% h.title(tag: :h2) do %> + # Header + # <% end %> + # <% end %> + # <% component.body do %> + # Body + # <% end %> + # <% component.row do %> + # <% if true %> + # Row one + # <% end %> + # <% end %> + # <% component.row do %> + # Row two + # <% end %> + # <% component.footer do %> + # Footer + # <% end %> + # <% end %> + # + # @example Padding density + # <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %> + # <% component.header do %> + # Header + # <% end %> + # <% component.body do %> + # Body + # <% end %> + # <% component.row do %> + # Row two + # <% end %> + # <% component.footer do %> + # Footer + # <% end %> + # <% end %> + # + # @example Row colors + # <%= render(Primer::Beta::BorderBox.new) do |component| %> + # <% component.row do %> + # Default + # <% end %> + # <% component.row(scheme: :neutral) do %> + # Neutral + # <% end %> + # <% component.row(scheme: :info) do %> + # Info + # <% end %> + # <% component.row(scheme: :warning) do %> + # Warning + # <% end %> + # <% end %> + # + # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(padding: DEFAULT_PADDING, **system_arguments) + @system_arguments = deny_tag_argument(**system_arguments) + @system_arguments[:tag] = :div + @system_arguments[:classes] = class_names( + "Box", + PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)], + system_arguments[:classes] + ) + + @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION } + end + + def render? + rows.any? || header.present? || body.present? || footer.present? + end + end + end +end diff --git a/app/components/primer/alpha/border_box/header.html.erb b/app/components/primer/beta/border_box/header.html.erb similarity index 100% rename from app/components/primer/alpha/border_box/header.html.erb rename to app/components/primer/beta/border_box/header.html.erb diff --git a/app/components/primer/alpha/border_box/header.rb b/app/components/primer/beta/border_box/header.rb similarity index 83% rename from app/components/primer/alpha/border_box/header.rb rename to app/components/primer/beta/border_box/header.rb index 3bdf5588e0..00edcc3d42 100644 --- a/app/components/primer/alpha/border_box/header.rb +++ b/app/components/primer/beta/border_box/header.rb @@ -1,8 +1,8 @@ # frozen_string_literal: true module Primer - module Alpha - module BorderBox + module Beta + class BorderBox # `BorderBox::Header` is used inside `BorderBox` to render its header slot. # # @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %> @@ -12,7 +12,7 @@ class Header < Primer::Component # Optional Title. # - # @param tag [Symbol] <%= one_of(Primer::Alpha::BorderBox::Header::TITLE_TAG_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::BorderBox::Header::TITLE_TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :title, lambda { |tag:, **system_arguments| system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK) @@ -24,14 +24,14 @@ class Header < Primer::Component Primer::BaseComponent.new(**system_arguments) } - # @example default use case + # @example Default # - # <%= render(Primer::Alpha::BorderBox::Header.new) do %> + # <%= render(Primer::Beta::BorderBox::Header.new) do %> # Header # <% end %> # # @example with title - # <%= render(Primer::Alpha::BorderBox::Header.new) do |h| %> + # <%= render(Primer::Beta::BorderBox::Header.new) do |h| %> # <% h.title(tag: :h3) do %>I am a title<% end %> # <% end %> # diff --git a/app/components/primer/border_box_component.rb b/app/components/primer/border_box_component.rb index 280fc110c9..12eb98a1be 100644 --- a/app/components/primer/border_box_component.rb +++ b/app/components/primer/border_box_component.rb @@ -1,145 +1,7 @@ # frozen_string_literal: true module Primer - # `BorderBox` is a Box component with a border. - class BorderBoxComponent < Primer::Component - status :beta - - DEFAULT_PADDING = :default - PADDING_MAPPINGS = { - DEFAULT_PADDING => "", - :condensed => "Box--condensed", - :spacious => "Box--spacious" - }.freeze - PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?" - - DEFAULT_ROW_SCHEME = :default - ROW_SCHEME_MAPPINGS = { - DEFAULT_ROW_SCHEME => "", - :neutral => "Box-row--gray", - :info => "Box-row--blue", - :warning => "Box-row--yellow" - }.freeze - - # Optional Header. - # - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - # @accessibility - # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc. - renders_one :header, "Primer::Alpha::BorderBox::Header" - - # Optional Body. - # - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :body, lambda { |**system_arguments| - system_arguments[:tag] = :div - system_arguments[:classes] = class_names( - "Box-body", - system_arguments[:classes] - ) - - Primer::BaseComponent.new(**system_arguments) - } - - # Optional Footer. - # - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :footer, lambda { |**system_arguments| - system_arguments[:tag] = :div - system_arguments[:classes] = class_names( - "Box-footer", - system_arguments[:classes] - ) - - Primer::BaseComponent.new(**system_arguments) - } - - # Use Rows to add rows with borders and maintain the same padding. - # - # @param scheme [Symbol] Color scheme. <%= one_of(Primer::BorderBoxComponent::ROW_SCHEME_MAPPINGS.keys) %> - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments| - system_arguments[:tag] = :li - system_arguments[:classes] = class_names( - "Box-row", - ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)], - system_arguments[:classes] - ) - - Primer::BaseComponent.new(**system_arguments) - } - - # @example Header with title, body, rows, and footer - # <%= render(Primer::BorderBoxComponent.new) do |component| %> - # <% component.header do |h| %> - # <% h.title(tag: :h2) do %> - # Header - # <% end %> - # <% end %> - # <% component.body do %> - # Body - # <% end %> - # <% component.row do %> - # <% if true %> - # Row one - # <% end %> - # <% end %> - # <% component.row do %> - # Row two - # <% end %> - # <% component.footer do %> - # Footer - # <% end %> - # <% end %> - # - # @example Padding density - # <%= render(Primer::BorderBoxComponent.new(padding: :condensed)) do |component| %> - # <% component.header do %> - # Header - # <% end %> - # <% component.body do %> - # Body - # <% end %> - # <% component.row do %> - # Row two - # <% end %> - # <% component.footer do %> - # Footer - # <% end %> - # <% end %> - # - # @example Row colors - # <%= render(Primer::BorderBoxComponent.new) do |component| %> - # <% component.row do %> - # Default - # <% end %> - # <% component.row(scheme: :neutral) do %> - # Neutral - # <% end %> - # <% component.row(scheme: :info) do %> - # Info - # <% end %> - # <% component.row(scheme: :warning) do %> - # Warning - # <% end %> - # <% end %> - # - # @param padding [Symbol] <%= one_of(Primer::BorderBoxComponent::PADDING_MAPPINGS.keys) %> - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(padding: DEFAULT_PADDING, **system_arguments) - @system_arguments = deny_tag_argument(**system_arguments) - @system_arguments[:tag] = :div - @system_arguments[:classes] = class_names( - "Box", - PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)], - system_arguments[:classes] - ) - - @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION } - end - - def render? - rows.any? || header.present? || body.present? || footer.present? - end + class BorderBoxComponent < Primer::Beta::BorderBox + status :deprecated end end diff --git a/app/components/primer/icon_button.rb b/app/components/primer/icon_button.rb index 8f6d63474b..82315855b3 100644 --- a/app/components/primer/icon_button.rb +++ b/app/components/primer/icon_button.rb @@ -31,7 +31,7 @@ class IconButton < Primer::Component # # @example In a BorderBox # - # <%= render(Primer::BorderBoxComponent.new) do |component| %> + # <%= render(Primer::Beta::BorderBox.new) do |component| %> # <% component.body do %> # <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %> # <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %> @@ -54,10 +54,10 @@ class IconButton < Primer::Component # @param icon [String] Name of <%= link_to_octicons %> to use. # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %> # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %> - # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::BorderBoxComponent) %>. If `true`, the button will have the `Box-btn-octicon` class. # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information. # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information. # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %> + # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::Beta::BorderBox) %>. If `true`, the button will have the `Box-btn-octicon` class. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments) @icon = icon diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index b75a47624f..99e9e0d3ad 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -26,7 +26,7 @@ - title: Blankslate url: "/components/beta/blankslate" - title: BorderBox - url: "/components/borderbox" + url: "/components/beta/borderbox" - title: Box url: "/components/box" - title: Breadcrumbs diff --git a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb index 0e8dc58323..fa55e37867 100644 --- a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +++ b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb @@ -10,6 +10,7 @@ module DeprecatedComponentsHelpers "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item", "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete", "Primer::BlankslateComponent" => "Primer::Beta::Blankslate", + "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox", "Primer::DropdownMenuComponent" => nil, "Primer::Tooltip" => "Primer::Alpha::Tooltip", "Primer::FlexComponent" => nil, diff --git a/lib/rubocop/cop/primer/component_name_migration.rb b/lib/rubocop/cop/primer/component_name_migration.rb index 9694d542db..89e1aff3b7 100644 --- a/lib/rubocop/cop/primer/component_name_migration.rb +++ b/lib/rubocop/cop/primer/component_name_migration.rb @@ -16,6 +16,7 @@ module Primer class ComponentNameMigration < BaseCop DEPRECATIONS = { "Primer::BlankslateComponent" => "Primer::Beta::Blankslate", + "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox", "Primer::BaseButton" => "Primer::Beta::BaseButton", "Primer::TestComponent" => "Primer::Beta::Test" }.freeze diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 408cf95300..6d67bb5ddb 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -31,7 +31,6 @@ namespace :docs do components = [ Primer::Alpha::Layout, Primer::HellipButton, - Primer::Alpha::BorderBox::Header, Primer::Image, Primer::LocalTime, Primer::OcticonSymbolsComponent, @@ -43,7 +42,8 @@ namespace :docs do Primer::Beta::AvatarStack, Primer::Beta::BaseButton, Primer::Beta::Blankslate, - Primer::BorderBoxComponent, + Primer::Beta::BorderBox, + Primer::Beta::BorderBox::Header, Primer::BoxComponent, Primer::Beta::Breadcrumbs, Primer::ButtonComponent, diff --git a/static/arguments.yml b/static/arguments.yml index 4a91769c2f..64fcfb6872 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -1,11 +1,4 @@ --- -- component: BorderBoxHeader - source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/border_box/header.rb - parameters: - - name: system_arguments - type: Hash - default: N/A - description: "[System arguments](/system-arguments)" - component: ButtonMarketing source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb parameters: @@ -444,6 +437,24 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" +- component: BorderBox + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box.rb + parameters: + - name: padding + type: Symbol + default: "`:default`" + description: One of `:condensed`, `:default`, or `:spacious`. + - name: system_arguments + type: Hash + default: N/A + description: "[System arguments](/system-arguments)" +- component: BorderBoxHeader + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb + parameters: + - name: system_arguments + type: Hash + default: N/A + description: "[System arguments](/system-arguments)" - component: Breadcrumbs source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb parameters: @@ -496,17 +507,6 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" -- component: BorderBox - source: https://github.com/primer/view_components/tree/main/app/components/primer/border_box_component.rb - parameters: - - name: padding - type: Symbol - default: "`:default`" - description: One of `:condensed`, `:default`, or `:spacious`. - - name: system_arguments - type: Hash - default: N/A - description: "[System arguments](/system-arguments)" - component: Box source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb parameters: @@ -783,11 +783,6 @@ type: Symbol default: N/A description: One of `:button`, `:reset`, or `:submit`. - - name: box - type: Boolean - default: "`false`" - description: Whether the button is in a [BorderBox](/components/borderbox). If - `true`, the button will have the `Box-btn-octicon` class. - name: aria-label type: String default: N/A @@ -803,6 +798,11 @@ type: Symbol default: "`:s`" description: One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`. + - name: box + type: Boolean + default: "`false`" + description: Whether the button is in a [BorderBox](/components/beta/borderbox). + If `true`, the button will have the `Box-btn-octicon` class. - name: system_arguments type: Hash default: N/A diff --git a/static/audited_at.json b/static/audited_at.json index af5468eefc..ca8fbc9a8f 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -1,7 +1,6 @@ { "Primer::Alpha::AutoComplete": "", "Primer::Alpha::AutoComplete::Item": "", - "Primer::Alpha::BorderBox::Header": "", "Primer::Alpha::ButtonMarketing": "", "Primer::Alpha::Layout": "", "Primer::Alpha::Layout::Main": "", @@ -19,6 +18,8 @@ "Primer::Beta::AvatarStack": "", "Primer::Beta::BaseButton": "", "Primer::Beta::Blankslate": "", + "Primer::Beta::BorderBox": "", + "Primer::Beta::BorderBox::Header": "", "Primer::Beta::Breadcrumbs": "", "Primer::Beta::Breadcrumbs::Item": "", "Primer::Beta::Flash": "", diff --git a/static/constants.json b/static/constants.json index dc10ab0207..0a6c5e5d83 100644 --- a/static/constants.json +++ b/static/constants.json @@ -4,17 +4,6 @@ }, "Primer::Alpha::AutoComplete::Item": { }, - "Primer::Alpha::BorderBox::Header": { - "TITLE_TAG_FALLBACK": "h2", - "TITLE_TAG_OPTIONS": [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6" - ] - }, "Primer::Alpha::ButtonMarketing": { "DEFAULT_SCHEME": "default", "DEFAULT_TAG": "button", @@ -267,6 +256,34 @@ "image" ] }, + "Primer::Beta::BorderBox": { + "DEFAULT_PADDING": "default", + "DEFAULT_ROW_SCHEME": "default", + "Header": "Primer::Beta::BorderBox::Header", + "PADDING_MAPPINGS": { + "default": "", + "condensed": "Box--condensed", + "spacious": "Box--spacious" + }, + "PADDING_SUGGESTION": "Perhaps you could consider using :padding options of default, condensed, and spacious?", + "ROW_SCHEME_MAPPINGS": { + "default": "", + "neutral": "Box-row--gray", + "info": "Box-row--blue", + "warning": "Box-row--yellow" + } + }, + "Primer::Beta::BorderBox::Header": { + "TITLE_TAG_FALLBACK": "h2", + "TITLE_TAG_OPTIONS": [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6" + ] + }, "Primer::Beta::Breadcrumbs": { "ARGS_DENYLIST": { "[:p, :pt, :pb, :pr, :pl, :px, :py]": "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead.", @@ -301,20 +318,6 @@ "Primer::BlankslateComponent": { }, "Primer::BorderBoxComponent": { - "DEFAULT_PADDING": "default", - "DEFAULT_ROW_SCHEME": "default", - "PADDING_MAPPINGS": { - "default": "", - "condensed": "Box--condensed", - "spacious": "Box--spacious" - }, - "PADDING_SUGGESTION": "Perhaps you could consider using :padding options of default, condensed, and spacious?", - "ROW_SCHEME_MAPPINGS": { - "default": "", - "neutral": "Box-row--gray", - "info": "Box-row--blue", - "warning": "Box-row--yellow" - } }, "Primer::BoxComponent": { }, diff --git a/static/statuses.json b/static/statuses.json index 36671b2dc0..78d9e87c63 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -1,7 +1,6 @@ { "Primer::Alpha::AutoComplete": "deprecated", "Primer::Alpha::AutoComplete::Item": "deprecated", - "Primer::Alpha::BorderBox::Header": "alpha", "Primer::Alpha::ButtonMarketing": "alpha", "Primer::Alpha::Layout": "alpha", "Primer::Alpha::Layout::Main": "alpha", @@ -19,6 +18,8 @@ "Primer::Beta::AvatarStack": "beta", "Primer::Beta::BaseButton": "beta", "Primer::Beta::Blankslate": "beta", + "Primer::Beta::BorderBox": "beta", + "Primer::Beta::BorderBox::Header": "alpha", "Primer::Beta::Breadcrumbs": "beta", "Primer::Beta::Breadcrumbs::Item": "alpha", "Primer::Beta::Flash": "beta", @@ -26,7 +27,7 @@ "Primer::Beta::Truncate": "beta", "Primer::Beta::Truncate::TruncateText": "alpha", "Primer::BlankslateComponent": "deprecated", - "Primer::BorderBoxComponent": "beta", + "Primer::BorderBoxComponent": "deprecated", "Primer::BoxComponent": "stable", "Primer::ButtonComponent": "beta", "Primer::ButtonGroup": "beta", diff --git a/stories/primer/alpha/border_box/header_stories.rb b/stories/primer/beta/border_box/header_stories.rb similarity index 66% rename from stories/primer/alpha/border_box/header_stories.rb rename to stories/primer/beta/border_box/header_stories.rb index 84a5674be9..295abed050 100644 --- a/stories/primer/alpha/border_box/header_stories.rb +++ b/stories/primer/beta/border_box/header_stories.rb @@ -1,8 +1,8 @@ # frozen_string_literal: true -require "primer/alpha/border_box/header" +require "primer/beta/border_box/header" -class Primer::Alpha::BorderBox::HeaderStories < ViewComponent::Storybook::Stories +class Primer::Beta::BorderBox::HeaderStories < ViewComponent::Storybook::Stories layout "storybook_preview" story(:default) do diff --git a/stories/primer/border_box_component_stories.rb b/stories/primer/beta/border_box_stories.rb similarity index 57% rename from stories/primer/border_box_component_stories.rb rename to stories/primer/beta/border_box_stories.rb index 5559ca62da..ae7ca65c0f 100644 --- a/stories/primer/border_box_component_stories.rb +++ b/stories/primer/beta/border_box_stories.rb @@ -1,11 +1,13 @@ # frozen_string_literal: true -class Primer::BorderBoxComponentStories < ViewComponent::Storybook::Stories +require "primer/beta/border_box" + +class Primer::Beta::BorderBoxStories < ViewComponent::Storybook::Stories layout "storybook_preview" story(:full_box) do controls do - select(:padding, Primer::BorderBoxComponent::PADDING_MAPPINGS.keys, Primer::BorderBoxComponent::DEFAULT_PADDING) + select(:padding, Primer::Beta::BorderBox::PADDING_MAPPINGS.keys, Primer::Beta::BorderBox::DEFAULT_PADDING) end content do |component| @@ -20,7 +22,7 @@ class Primer::BorderBoxComponentStories < ViewComponent::Storybook::Stories story(:header) do controls do - select(:padding, Primer::BorderBoxComponent::PADDING_MAPPINGS.keys, Primer::BorderBoxComponent::DEFAULT_PADDING) + select(:padding, Primer::Beta::BorderBox::PADDING_MAPPINGS.keys, Primer::Beta::BorderBox::DEFAULT_PADDING) end content do |component| @@ -30,7 +32,7 @@ class Primer::BorderBoxComponentStories < ViewComponent::Storybook::Stories story(:header_title) do controls do - select(:padding, Primer::BorderBoxComponent::PADDING_MAPPINGS.keys, Primer::BorderBoxComponent::DEFAULT_PADDING) + select(:padding, Primer::Beta::BorderBox::PADDING_MAPPINGS.keys, Primer::Beta::BorderBox::DEFAULT_PADDING) end content do |component| @@ -42,7 +44,7 @@ class Primer::BorderBoxComponentStories < ViewComponent::Storybook::Stories story(:body) do controls do - select(:padding, Primer::BorderBoxComponent::PADDING_MAPPINGS.keys, Primer::BorderBoxComponent::DEFAULT_PADDING) + select(:padding, Primer::Beta::BorderBox::PADDING_MAPPINGS.keys, Primer::Beta::BorderBox::DEFAULT_PADDING) end content do |component| @@ -52,7 +54,7 @@ class Primer::BorderBoxComponentStories < ViewComponent::Storybook::Stories story(:footer) do controls do - select(:padding, Primer::BorderBoxComponent::PADDING_MAPPINGS.keys, Primer::BorderBoxComponent::DEFAULT_PADDING) + select(:padding, Primer::Beta::BorderBox::PADDING_MAPPINGS.keys, Primer::Beta::BorderBox::DEFAULT_PADDING) end content do |component| @@ -62,7 +64,7 @@ class Primer::BorderBoxComponentStories < ViewComponent::Storybook::Stories story(:rows) do controls do - select(:padding, Primer::BorderBoxComponent::PADDING_MAPPINGS.keys, Primer::BorderBoxComponent::DEFAULT_PADDING) + select(:padding, Primer::Beta::BorderBox::PADDING_MAPPINGS.keys, Primer::Beta::BorderBox::DEFAULT_PADDING) end content do |component| diff --git a/test/components/primer/alpha/border_box/header_test.rb b/test/components/beta/border_box/header_test.rb similarity index 57% rename from test/components/primer/alpha/border_box/header_test.rb rename to test/components/beta/border_box/header_test.rb index 3a1b294b99..608af1a004 100644 --- a/test/components/primer/alpha/border_box/header_test.rb +++ b/test/components/beta/border_box/header_test.rb @@ -2,17 +2,17 @@ require "test_helper" -class Primer::Alpha::BorderBox::HeaderTest < Minitest::Test +class Primer::Beta::BorderBox::HeaderTest < Minitest::Test include Primer::ComponentTestHelpers def test_renders_content - render_inline(Primer::Alpha::BorderBox::Header.new) { "Header" } + render_inline(Primer::Beta::BorderBox::Header.new) { "Header" } assert_text("Header") end def test_renders_title - render_inline(Primer::Alpha::BorderBox::Header.new) do |h| + render_inline(Primer::Beta::BorderBox::Header.new) do |h| h.title(tag: :h3) { "Title" } end diff --git a/test/components/border_box_component_test.rb b/test/components/beta/border_box_test.rb similarity index 70% rename from test/components/border_box_component_test.rb rename to test/components/beta/border_box_test.rb index d8780c5c0e..e8556a82f6 100644 --- a/test/components/border_box_component_test.rb +++ b/test/components/beta/border_box_test.rb @@ -2,11 +2,11 @@ require "test_helper" -class PrimerBorderBoxComponentTest < Minitest::Test +class PrimerBetaBorderBoxTest < Minitest::Test include Primer::ComponentTestHelpers def test_does_not_render_an_empty_box - render_inline(Primer::BorderBoxComponent.new) + render_inline(Primer::Beta::BorderBox.new) refute_selector("div.Box") refute_selector(".Box-header") @@ -16,7 +16,7 @@ def test_does_not_render_an_empty_box end def test_renders_header - render_inline(Primer::BorderBoxComponent.new) do |component| + render_inline(Primer::Beta::BorderBox.new) do |component| component.header { "Header" } end @@ -24,7 +24,7 @@ def test_renders_header end def test_renders_body - render_inline(Primer::BorderBoxComponent.new) do |component| + render_inline(Primer::Beta::BorderBox.new) do |component| component.body { "Body" } end @@ -32,7 +32,7 @@ def test_renders_body end def test_renders_footer - render_inline(Primer::BorderBoxComponent.new) do |component| + render_inline(Primer::Beta::BorderBox.new) do |component| component.footer { "Footer" } end @@ -40,7 +40,7 @@ def test_renders_footer end def test_renders_multiple_rows - render_inline(Primer::BorderBoxComponent.new) do |component| + render_inline(Primer::Beta::BorderBox.new) do |component| component.row { "First" } component.row { "Second" } component.row { "Third" } @@ -51,7 +51,7 @@ def test_renders_multiple_rows end def test_renders_condensed - render_inline(Primer::BorderBoxComponent.new(padding: :condensed)) do |component| + render_inline(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| component.body { "Body" } end @@ -59,7 +59,7 @@ def test_renders_condensed end def test_renders_spacious - render_inline(Primer::BorderBoxComponent.new(padding: :spacious)) do |component| + render_inline(Primer::Beta::BorderBox.new(padding: :spacious)) do |component| component.body { "Body" } end @@ -67,13 +67,13 @@ def test_renders_spacious end def test_status - assert_component_state(Primer::BorderBoxComponent, :beta) + assert_component_state(Primer::Beta::BorderBox, :beta) end def test_restricts_allowed_system_arguments with_raise_on_invalid_options(true) do error = assert_raises(ArgumentError) do - render_inline(Primer::BorderBoxComponent.new(p: 4)) do |component| + render_inline(Primer::Beta::BorderBox.new(p: 4)) do |component| component.body { "Body" } end end @@ -84,7 +84,7 @@ def test_restricts_allowed_system_arguments def test_strips_denied_system_arguments with_raise_on_invalid_options(false) do - render_inline(Primer::BorderBoxComponent.new(p: 4)) do |component| + render_inline(Primer::Beta::BorderBox.new(p: 4)) do |component| component.body { "Body" } end end @@ -94,7 +94,7 @@ def test_strips_denied_system_arguments def test_renders_row_with_schemes { neutral: "gray", info: "blue", warning: "yellow" }.each_pair do |scheme, color| - render_inline(Primer::BorderBoxComponent.new) do |component| + render_inline(Primer::Beta::BorderBox.new) do |component| component.row(scheme: scheme) { "Row, row, row your boat" } end @@ -103,7 +103,7 @@ def test_renders_row_with_schemes end def test_renders_row_with_default_scheme - render_inline(Primer::BorderBoxComponent.new) do |component| + render_inline(Primer::Beta::BorderBox.new) do |component| component.row { "Row, row, row your boat" } end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 22bf2cf7bf..e9685f82cf 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -12,7 +12,6 @@ class PrimerComponentTest < Minitest::Test component.sidebar(tag: :div) { "Bar" } }], [Primer::HellipButton, { "aria-label": "No action" }], - [Primer::Alpha::BorderBox::Header, {}], [Primer::Alpha::TabPanels, { label: "label" }], [Primer::Alpha::TabNav, { label: "label" }], [Primer::Alpha::UnderlinePanels, { label: "Panel label" }], @@ -33,7 +32,8 @@ class PrimerComponentTest < Minitest::Test [Primer::Beta::Blankslate, {}, proc { |component| component.heading(tag: :h2) { "Foo" } }], - [Primer::BorderBoxComponent, {}, proc { |component| component.header { "Foo" } }], + [Primer::Beta::BorderBox, {}, proc { |component| component.header { "Foo" } }], + [Primer::Beta::BorderBox::Header, {}], [Primer::BoxComponent, {}], [Primer::Beta::Breadcrumbs, {}, proc { |component| component.item(href: "/") { "Foo" } }], [Primer::ButtonComponent, {}, proc { "Button" }], @@ -89,7 +89,8 @@ def test_registered_components "Primer::Component", "Primer::OcticonsSymbolComponent", "Primer::Content", - "Primer::BlankslateComponent" + "Primer::BlankslateComponent", + "Primer::BorderBoxComponent" ] primer_component_files_count = Dir["app/components/**/*.rb"].count diff --git a/test/rubocop/deprecated_components_test.rb b/test/rubocop/deprecated_components_test.rb index 01bc2c4c80..b1d5328858 100644 --- a/test/rubocop/deprecated_components_test.rb +++ b/test/rubocop/deprecated_components_test.rb @@ -28,9 +28,10 @@ def test_raises_offense_if_calling_legacy_component Primer::Tooltip.new Primer::BlankslateComponent.new Primer::FlexComponent.new + Primer::BorderBoxComponent.new RUBY - assert_equal 3, cop.offenses.count + assert_equal 4, cop.offenses.count end def test_raises_offense_if_calling_legacy_component_with_args