From 7da8c968ef20fa3c19e1c6850886694a942facda Mon Sep 17 00:00:00 2001 From: River Lynn Bailey Date: Mon, 8 Aug 2022 11:55:29 -0500 Subject: [PATCH] Move Primer::CounterComponent to Primer::Beta::Counter (#1279) * search for component file, and exit with error info if zero or more than one are found * added changeset * initial move of Primer::Counter to Primer::Beta::Counter * added changeset * removed file that jumped in from merge conflict resolution * removing component_status_migrator changes that i didn't mean to put in this PR --- .changeset/tidy-dryers-grin.md | 5 + .../primer/beta/auto_complete/item.rb | 4 +- app/components/primer/beta/counter.rb | 113 ++++++++++++++++++ app/components/primer/button_component.rb | 6 +- app/components/primer/counter_component.rb | 108 +---------------- app/components/primer/menu_component.rb | 2 +- .../primer/navigation/tab_component.rb | 4 +- docs/content/index.md | 2 +- docs/content/migration.md | 2 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- .../helpers/deprecated_components_helpers.rb | 1 + .../cop/primer/component_name_migration.rb | 1 + lib/tasks/docs.rake | 2 +- static/arguments.yml | 66 +++++----- static/audited_at.json | 1 + static/constants.json | 36 +++--- static/statuses.json | 3 +- .../counter_stories.rb} | 6 +- .../counter_test.rb} | 46 +++---- test/components/component_test.rb | 3 +- .../primer/counter_component_preview.rb | 4 +- 21 files changed, 220 insertions(+), 197 deletions(-) create mode 100644 .changeset/tidy-dryers-grin.md create mode 100644 app/components/primer/beta/counter.rb rename stories/primer/{counter_component_stories.rb => beta/counter_stories.rb} (51%) rename test/components/{counter_component_test.rb => beta/counter_test.rb} (59%) diff --git a/.changeset/tidy-dryers-grin.md b/.changeset/tidy-dryers-grin.md new file mode 100644 index 0000000000..39d0d28443 --- /dev/null +++ b/.changeset/tidy-dryers-grin.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +moving Primer::Counter to Primer::Beta::Counter, and replace original with a deprecated version" diff --git a/app/components/primer/beta/auto_complete/item.rb b/app/components/primer/beta/auto_complete/item.rb index 31785c0967..2258d9f99e 100644 --- a/app/components/primer/beta/auto_complete/item.rb +++ b/app/components/primer/beta/auto_complete/item.rb @@ -22,11 +22,11 @@ class Item < Primer::Component # The trailing visual rendered after the link. # - # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::CounterComponent) %> + # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::Beta::Counter) %> renders_one :trailing_visual, types: { icon: Primer::OcticonComponent, label: Primer::LabelComponent, - counter: Primer::CounterComponent + counter: Primer::Beta::Counter } # Optional description diff --git a/app/components/primer/beta/counter.rb b/app/components/primer/beta/counter.rb new file mode 100644 index 0000000000..f5b898bc59 --- /dev/null +++ b/app/components/primer/beta/counter.rb @@ -0,0 +1,113 @@ +# frozen_string_literal: true + +module Primer + module Beta + # Use `Counter` to add a count to navigational elements and buttons. + # + # @accessibility + # Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter` + # should be accompanied with text such as `issues` or `pull requests`. + # + class Counter < Primer::Component + status :beta + + DEFAULT_SCHEME = :default + SCHEME_MAPPINGS = { + DEFAULT_SCHEME => "", + :primary => "Counter--primary", + :secondary => "Counter--secondary", + # deprecated + :gray => "Counter--primary", + :light_gray => "Counter--secondary" + }.freeze + DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze + SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze + + # + # @example Default + # <%= render(Primer::Beta::Counter.new(count: 25)) %> + # + # @example Schemes + # <%= render(Primer::Beta::Counter.new(count: 25, scheme: :primary)) %> + # <%= render(Primer::Beta::Counter.new(count: 25, scheme: :secondary)) %> + # + # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests) + # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::Counter::SCHEME_OPTIONS) %> + # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+") + # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero. + # @param text [String] Text to display instead of count. + # @param round [Boolean] Whether to apply our standard rounding logic to value. + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize( + count: 0, + scheme: DEFAULT_SCHEME, + limit: 5_000, + hide_if_zero: false, + text: "", + round: false, + **system_arguments + ) + @count = count + @limit = limit + @hide_if_zero = hide_if_zero + @text = text + @round = round + @system_arguments = deny_tag_argument(**system_arguments) + + @has_limit = !@limit.nil? + @system_arguments[:title] = title + @system_arguments[:tag] = :span + @system_arguments[:classes] = class_names( + "Counter", + @system_arguments[:classes], + SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)] + ) + @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate + end + + def call + render(Primer::BaseComponent.new(**@system_arguments)) { value } + end + + private + + def title + if @text.present? + @text + elsif @count.nil? + "Not available" + elsif @count == Float::INFINITY + "Infinity" + else + count = @count.to_i + str = number_with_delimiter(@has_limit ? [count, @limit].min : count) + str += "+" if @has_limit && count > @limit + str + end + end + + def value + if @text.present? + @text + elsif @count.nil? + "" # CSS will hide it + elsif @count == Float::INFINITY + "∞" + else + if @round + count = @has_limit ? [@count.to_i, @limit].min : @count.to_i + precision = count.between?(100_000, 999_999) ? 0 : 1 + units = { thousand: "k", million: "m", billion: "b" } + str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u") + else + @count = @count.to_i + str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count) + end + + str += "+" if @has_limit && @count.to_i > @limit + str + end + end + end + end +end diff --git a/app/components/primer/button_component.rb b/app/components/primer/button_component.rb index 49230f62cc..6a890dd702 100644 --- a/app/components/primer/button_component.rb +++ b/app/components/primer/button_component.rb @@ -44,14 +44,14 @@ class ButtonComponent < Primer::Component # # Use: # - # - `trailing_visual_counter` for a <%= link_to_component(Primer::CounterComponent) %>. + # - `trailing_visual_counter` for a <%= link_to_component(Primer::Beta::Counter) %>. # - # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::CounterComponent) %>. + # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>. renders_one :trailing_visual, types: { counter: lambda { |**system_arguments| system_arguments[:ml] = 2 - Primer::CounterComponent.new(**system_arguments) + Primer::Beta::Counter.new(**system_arguments) } } alias counter trailing_visual_counter # remove alias when all buttons are migrated to new slot names diff --git a/app/components/primer/counter_component.rb b/app/components/primer/counter_component.rb index c7270bd682..1e51e28312 100644 --- a/app/components/primer/counter_component.rb +++ b/app/components/primer/counter_component.rb @@ -1,111 +1,7 @@ # frozen_string_literal: true module Primer - # Use `Counter` to add a count to navigational elements and buttons. - # - # @accessibility - # Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter` - # should be accompanied with text such as `issues` or `pull requests`. - # - class CounterComponent < Primer::Component - status :beta - - DEFAULT_SCHEME = :default - SCHEME_MAPPINGS = { - DEFAULT_SCHEME => "", - :primary => "Counter--primary", - :secondary => "Counter--secondary", - # deprecated - :gray => "Counter--primary", - :light_gray => "Counter--secondary" - }.freeze - DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze - SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze - - # - # @example Default - # <%= render(Primer::CounterComponent.new(count: 25)) %> - # - # @example Schemes - # <%= render(Primer::CounterComponent.new(count: 25, scheme: :primary)) %> - # <%= render(Primer::CounterComponent.new(count: 25, scheme: :secondary)) %> - # - # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests) - # @param scheme [Symbol] Color scheme. <%= one_of(Primer::CounterComponent::SCHEME_OPTIONS) %> - # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+") - # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero. - # @param text [String] Text to display instead of count. - # @param round [Boolean] Whether to apply our standard rounding logic to value. - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize( - count: 0, - scheme: DEFAULT_SCHEME, - limit: 5_000, - hide_if_zero: false, - text: "", - round: false, - **system_arguments - ) - @count = count - @limit = limit - @hide_if_zero = hide_if_zero - @text = text - @round = round - @system_arguments = deny_tag_argument(**system_arguments) - - @has_limit = !@limit.nil? - @system_arguments[:title] = title - @system_arguments[:tag] = :span - @system_arguments[:classes] = class_names( - "Counter", - @system_arguments[:classes], - SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)] - ) - @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate - end - - def call - render(Primer::BaseComponent.new(**@system_arguments)) { value } - end - - private - - def title - if @text.present? - @text - elsif @count.nil? - "Not available" - elsif @count == Float::INFINITY - "Infinity" - else - count = @count.to_i - str = number_with_delimiter(@has_limit ? [count, @limit].min : count) - str += "+" if @has_limit && count > @limit - str - end - end - - def value - if @text.present? - @text - elsif @count.nil? - "" # CSS will hide it - elsif @count == Float::INFINITY - "∞" - else - if @round - count = @has_limit ? [@count.to_i, @limit].min : @count.to_i - precision = count.between?(100_000, 999_999) ? 0 : 1 - units = { thousand: "k", million: "m", billion: "b" } - str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u") - else - @count = @count.to_i - str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count) - end - - str += "+" if @has_limit && @count.to_i > @limit - str - end - end + class CounterComponent < Primer::Beta::Counter + status :deprecated end end diff --git a/app/components/primer/menu_component.rb b/app/components/primer/menu_component.rb index 03d2b4b960..9c9cc1d015 100644 --- a/app/components/primer/menu_component.rb +++ b/app/components/primer/menu_component.rb @@ -53,7 +53,7 @@ class MenuComponent < Primer::Component # <% c.item(href: "#url") do %> # <%= render(Primer::OcticonComponent.new("check")) %> # With Icon and Counter - # <%= render(Primer::CounterComponent.new(count: 25)) %> + # <%= render(Primer::Beta::Counter.new(count: 25)) %> # <% end %> # <% end %> # diff --git a/app/components/primer/navigation/tab_component.rb b/app/components/primer/navigation/tab_component.rb index c1ba0e15e6..9f4e55d9b0 100644 --- a/app/components/primer/navigation/tab_component.rb +++ b/app/components/primer/navigation/tab_component.rb @@ -57,8 +57,8 @@ class TabComponent < Primer::Component # Counter to be rendered in the Tab right. # - # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::CounterComponent) %>. - renders_one :counter, Primer::CounterComponent + # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>. + renders_one :counter, Primer::Beta::Counter attr_reader :selected diff --git a/docs/content/index.md b/docs/content/index.md index 231a730061..69dc8046fb 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -13,7 +13,7 @@ Primer ViewComponents is an implementation of the Primer Design System, using [V Render Primer ViewComponents from templates: ```erb -<%= render(Primer::CounterComponent.new(count: 25)) %> +<%= render(Primer::Beta::Counter.new(count: 25)) %> ``` ## Installation diff --git a/docs/content/migration.md b/docs/content/migration.md index bef03f875e..ff34147b0a 100644 --- a/docs/content/migration.md +++ b/docs/content/migration.md @@ -12,6 +12,6 @@ stable status. |------------------|---------------| | [`State`](https://primer.style/css/components/labels#states) | [`Primer::StateComponent`](https://primer.style/view-components/components/state) | | [`breadcrumb-item`](https://primer.style/css/components/breadcrumb) | [`Primer::Beta::Breadcrumbs`](https://primer.style/view-components/components/beta/breadcrumbs) | -| [`Counter`](https://primer.style/css/stickersheet/labels#counters) | [`Primer::CounterComponent`](https://primer.style/view-components/components/counter) | +| [`Counter`](https://primer.style/css/stickersheet/labels#counters) | [`Primer::Beta::Counter`](https://primer.style/view-components/components/counter) | | [`Subhead`](https://primer.style/css/components/subhead) | [`Primer::SubheadComponent`](https://primer.style/view-components/components/subhead) | | [`blankslate`](https://primer.style/css/components/blankslate) | [`Primer::Beta::Blankslate`](https://primer.style/view-components/components/beta/blankslate) | diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 00a6ac236d..2041eafe08 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -42,7 +42,7 @@ - title: CloseButton url: "/components/beta/closebutton" - title: Counter - url: "/components/counter" + url: "/components/beta/counter" - title: Details url: "/components/details" - title: Dropdown 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 d48633dccd..bd7ab06209 100644 --- a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +++ b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb @@ -9,6 +9,7 @@ module DeprecatedComponentsHelpers COMPONENT_TO_USE_INSTEAD = { "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup", "Primer::CloseButton" => "Primer::Beta::CloseButton", + "Primer::CounterComponent" => "Primer::Beta::Counter", "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item", "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete", "Primer::BlankslateComponent" => "Primer::Beta::Blankslate", diff --git a/lib/rubocop/cop/primer/component_name_migration.rb b/lib/rubocop/cop/primer/component_name_migration.rb index 8dc3f178e2..96746a1676 100644 --- a/lib/rubocop/cop/primer/component_name_migration.rb +++ b/lib/rubocop/cop/primer/component_name_migration.rb @@ -18,6 +18,7 @@ class ComponentNameMigration < BaseCop "Primer::BoxComponent" => "Primer::Box", "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup", "Primer::CloseButton" => "Primer::Beta::CloseButton", + "Primer::CounterComponent" => "Primer::Beta::Counter", "Primer::BlankslateComponent" => "Primer::Beta::Blankslate", "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox", "Primer::BaseButton" => "Primer::Beta::BaseButton", diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 5082bae5fe..07bee89743 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -51,7 +51,7 @@ namespace :docs do Primer::Alpha::ButtonMarketing, Primer::ClipboardCopy, Primer::Beta::CloseButton, - Primer::CounterComponent, + Primer::Beta::Counter, Primer::DetailsComponent, Primer::Dropdown, Primer::DropdownMenuComponent, diff --git a/static/arguments.yml b/static/arguments.yml index cb8bbdc675..fe5dcc8966 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -488,6 +488,39 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" +- component: Counter + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/counter.rb + parameters: + - name: count + type: Integer, Float::INFINITY, nil + default: "`0`" + description: 'The number to be displayed (e.x. # of issues, pull requests)' + - name: scheme + type: Symbol + default: "`:default`" + description: Color scheme. One of `:default`, `:primary`, or `:secondary`. + - name: limit + type: Integer, nil + default: "`5_000`" + description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count` + == 6,000 and `limit` == 5000, counter will display "5,000+") + - name: hide_if_zero + type: Boolean + default: "`false`" + description: If true, a `hidden` attribute is added to the counter if `count` + is zero. + - name: text + type: String + default: '`""`' + description: Text to display instead of count. + - name: round + type: Boolean + default: "`false`" + description: Whether to apply our standard rounding logic to value. + - name: system_arguments + type: Hash + default: N/A + description: "[System arguments](/system-arguments)" - component: Flash source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb parameters: @@ -599,39 +632,6 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" -- component: Counter - source: https://github.com/primer/view_components/tree/main/app/components/primer/counter_component.rb - parameters: - - name: count - type: Integer, Float::INFINITY, nil - default: "`0`" - description: 'The number to be displayed (e.x. # of issues, pull requests)' - - name: scheme - type: Symbol - default: "`:default`" - description: Color scheme. One of `:default`, `:primary`, or `:secondary`. - - name: limit - type: Integer, nil - default: "`5_000`" - description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count` - == 6,000 and `limit` == 5000, counter will display "5,000+") - - name: hide_if_zero - type: Boolean - default: "`false`" - description: If true, a `hidden` attribute is added to the counter if `count` - is zero. - - name: text - type: String - default: '`""`' - description: Text to display instead of count. - - name: round - type: Boolean - default: "`false`" - description: Whether to apply our standard rounding logic to value. - - name: system_arguments - type: Hash - default: N/A - description: "[System arguments](/system-arguments)" - component: Details source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb parameters: diff --git a/static/audited_at.json b/static/audited_at.json index ec7d68e0c6..0e84cd9666 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -24,6 +24,7 @@ "Primer::Beta::Breadcrumbs::Item": "", "Primer::Beta::ButtonGroup": "", "Primer::Beta::CloseButton": "", + "Primer::Beta::Counter": "", "Primer::Beta::Flash": "", "Primer::Beta::Text": "", "Primer::Beta::Truncate": "", diff --git a/static/constants.json b/static/constants.json index d62d0556da..63b4df40e7 100644 --- a/static/constants.json +++ b/static/constants.json @@ -307,6 +307,25 @@ "submit" ] }, + "Primer::Beta::Counter": { + "DEFAULT_SCHEME": "default", + "DEPRECATED_SCHEME_OPTIONS": [ + "gray", + "light_gray" + ], + "SCHEME_MAPPINGS": { + "default": "", + "primary": "Counter--primary", + "secondary": "Counter--secondary", + "gray": "Counter--primary", + "light_gray": "Counter--secondary" + }, + "SCHEME_OPTIONS": [ + "default", + "primary", + "secondary" + ] + }, "Primer::Beta::Flash": { "DEFAULT_SCHEME": "default", "SCHEME_MAPPINGS": { @@ -372,23 +391,6 @@ "Primer::Content": { }, "Primer::CounterComponent": { - "DEFAULT_SCHEME": "default", - "DEPRECATED_SCHEME_OPTIONS": [ - "gray", - "light_gray" - ], - "SCHEME_MAPPINGS": { - "default": "", - "primary": "Counter--primary", - "secondary": "Counter--secondary", - "gray": "Counter--primary", - "light_gray": "Counter--secondary" - }, - "SCHEME_OPTIONS": [ - "default", - "primary", - "secondary" - ] }, "Primer::DetailsComponent": { "BODY_TAG_DEFAULT": "div", diff --git a/static/statuses.json b/static/statuses.json index ca56846d9f..79f495a10c 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -24,6 +24,7 @@ "Primer::Beta::Breadcrumbs::Item": "alpha", "Primer::Beta::ButtonGroup": "beta", "Primer::Beta::CloseButton": "beta", + "Primer::Beta::Counter": "beta", "Primer::Beta::Flash": "beta", "Primer::Beta::Text": "beta", "Primer::Beta::Truncate": "beta", @@ -38,7 +39,7 @@ "Primer::CloseButton": "deprecated", "Primer::ConditionalWrapper": "alpha", "Primer::Content": "stable", - "Primer::CounterComponent": "beta", + "Primer::CounterComponent": "deprecated", "Primer::DetailsComponent": "beta", "Primer::Dropdown": "alpha", "Primer::Dropdown::Menu": "alpha", diff --git a/stories/primer/counter_component_stories.rb b/stories/primer/beta/counter_stories.rb similarity index 51% rename from stories/primer/counter_component_stories.rb rename to stories/primer/beta/counter_stories.rb index a96d183fc7..0114f0ce9d 100644 --- a/stories/primer/counter_component_stories.rb +++ b/stories/primer/beta/counter_stories.rb @@ -1,12 +1,14 @@ # frozen_string_literal: true -class Primer::CounterComponentStories < ViewComponent::Storybook::Stories +require "primer/beta/counter" + +class Primer::Beta::CounterStories < ViewComponent::Storybook::Stories layout "storybook_preview" story(:counter) do controls do count 0 - select(:scheme, Primer::CounterComponent::SCHEME_MAPPINGS.keys, :primary) + select(:scheme, Primer::Beta::Counter::SCHEME_MAPPINGS.keys, :primary) limit 5000 hide_if_zero false round false diff --git a/test/components/counter_component_test.rb b/test/components/beta/counter_test.rb similarity index 59% rename from test/components/counter_component_test.rb rename to test/components/beta/counter_test.rb index 06e2a17a8f..eb74dc8c80 100644 --- a/test/components/counter_component_test.rb +++ b/test/components/beta/counter_test.rb @@ -2,141 +2,141 @@ require "test_helper" -class CounterComponentTest < Minitest::Test +class PrimerBetaCounterTest < Minitest::Test include Primer::ComponentTestHelpers def test_hidden_by_css_if_count_is_nil - render_inline(Primer::CounterComponent.new(count: nil)) + render_inline(Primer::Beta::Counter.new(count: nil)) assert_selector(".Counter") assert_selector("[title='Not available']") end def test_shows_when_count_is_0 - render_inline(Primer::CounterComponent.new(count: 0)) + render_inline(Primer::Beta::Counter.new(count: 0)) assert_selector("[title='0']", text: "0") end def test_renders_when_count_is_5 - render_inline(Primer::CounterComponent.new(count: 5)) + render_inline(Primer::Beta::Counter.new(count: 5)) assert_selector("[title='5']", text: "5") end def test_hide_if_count_is_0_and_if_hide_if_zero_is_true - render_inline(Primer::CounterComponent.new(count: 0, hide_if_zero: true)) + render_inline(Primer::Beta::Counter.new(count: 0, hide_if_zero: true)) assert_selector("[hidden='hidden']", text: "0", visible: false) end def test_renders_count_limit - render_inline(Primer::CounterComponent.new(count: 1000, limit: 100)) + render_inline(Primer::Beta::Counter.new(count: 1000, limit: 100)) assert_selector("[title='100+']", text: "100+") end def test_scheme_falls_back_to_default without_fetch_or_fallback_raises do - render_inline(Primer::CounterComponent.new(scheme: :pink, count: 2)) + render_inline(Primer::Beta::Counter.new(scheme: :pink, count: 2)) assert_selector(".Counter[title='2']") end end def test_render_small_number - render_inline(Primer::CounterComponent.new(count: 123)) + render_inline(Primer::Beta::Counter.new(count: 123)) assert_selector("[title='123']", text: "123") end def test_render_999 - render_inline(Primer::CounterComponent.new(count: 999)) + render_inline(Primer::Beta::Counter.new(count: 999)) assert_selector("[title='999']", text: "999") end def test_simplify_the_number_using_the_former_social_count_logic_if_round_true - render_inline(Primer::CounterComponent.new(count: 1_234, round: true)) + render_inline(Primer::Beta::Counter.new(count: 1_234, round: true)) assert_selector("[title='1,234']", text: "1.2k") end def test_simplify_the_number_using_the_former_social_count_logic_with_limit - render_inline(Primer::CounterComponent.new(count: 5_001, round: true)) + render_inline(Primer::Beta::Counter.new(count: 5_001, round: true)) assert_selector("[title='5,000+']", text: "5k+") end def test_render_when_over_limit - render_inline(Primer::CounterComponent.new(count: 5_001)) + render_inline(Primer::Beta::Counter.new(count: 5_001)) assert_selector("[title='5,000+']", text: "5,000+") end def test_rounds_hundreds_of_thousands - render_inline(Primer::CounterComponent.new(count: 123_456, limit: 1_000_000_000, round: true)) + render_inline(Primer::Beta::Counter.new(count: 123_456, limit: 1_000_000_000, round: true)) assert_selector("[title='123,456']", text: "123k") end def test_rounds_millions - render_inline(Primer::CounterComponent.new(count: 1_234_567, limit: 1_000_000_000, round: true)) + render_inline(Primer::Beta::Counter.new(count: 1_234_567, limit: 1_000_000_000, round: true)) assert_selector("[title='1,234,567']", text: "1.2m") end def test_rounds_billions - render_inline(Primer::CounterComponent.new(count: 1_234_567_890, limit: 10_000_000_000, round: true)) + render_inline(Primer::Beta::Counter.new(count: 1_234_567_890, limit: 10_000_000_000, round: true)) assert_selector("[title='1,234,567,890']", text: "1.2b") end def test_no_limit - render_inline(Primer::CounterComponent.new(count: 5_001, limit: nil)) + render_inline(Primer::Beta::Counter.new(count: 5_001, limit: nil)) assert_selector("[title='5,001']", text: "5,001") end def test_rounds_no_limit - render_inline(Primer::CounterComponent.new(count: 1_234_567_890, limit: nil, round: true)) + render_inline(Primer::Beta::Counter.new(count: 1_234_567_890, limit: nil, round: true)) assert_selector("[title='1,234,567,890']", text: "1.2b") end def test_renders_with_the_css_class_scheme_mapping_to_the_provided_scheme - render_inline(Primer::CounterComponent.new(count: 20, scheme: :primary)) + render_inline(Primer::Beta::Counter.new(count: 20, scheme: :primary)) assert_selector(".Counter.Counter--primary") assert_selector("[title='20']", text: "20") end def test_renders_with_the_css_class_scheme_mapping_to_the_provided_deprecated_scheme - render_inline(Primer::CounterComponent.new(count: 20, scheme: :gray)) + render_inline(Primer::Beta::Counter.new(count: 20, scheme: :gray)) assert_selector(".Counter.Counter--primary") assert_selector("[title='20']", text: "20") end def test_render_active_support_safe_buffer_as_count - render_inline(Primer::CounterComponent.new(count: ActiveSupport::SafeBuffer.new("20"), limit: 10)) + render_inline(Primer::Beta::Counter.new(count: ActiveSupport::SafeBuffer.new("20"), limit: 10)) assert_selector("[title='10+']", text: "10+") end def test_render_infinity - render_inline(Primer::CounterComponent.new(count: Float::INFINITY)) + render_inline(Primer::Beta::Counter.new(count: Float::INFINITY)) assert_selector("[title='Infinity']", text: "∞") end def test_render_arbitrary_string - render_inline(Primer::CounterComponent.new(text: "?")) + render_inline(Primer::Beta::Counter.new(text: "?")) assert_selector("[title='?']", text: "?") end def test_status - assert_component_state(Primer::CounterComponent, :beta) + assert_component_state(Primer::Beta::Counter, :beta) end end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index d1b46b62e7..168678e49f 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -43,7 +43,7 @@ class PrimerComponentTest < Minitest::Test [Primer::ClipboardCopy, { "aria-label": "String that will be read to screenreaders", value: "String that will be copied" }], [Primer::ConditionalWrapper, { condition: true, tag: :div }], [Primer::Beta::CloseButton, {}], - [Primer::CounterComponent, { count: 1 }], + [Primer::Beta::Counter, { count: 1 }], [Primer::DetailsComponent, {}, lambda do |component| component.summary { "Foo" } component.body { "Bar" } @@ -89,6 +89,7 @@ def test_registered_components ignored_components = [ "Primer::ButtonGroup", "Primer::CloseButton", + "Primer::CounterComponent", "Primer::Component", "Primer::OcticonsSymbolComponent", "Primer::Content", diff --git a/test/previews/primer/counter_component_preview.rb b/test/previews/primer/counter_component_preview.rb index cab3ff946b..2d10e5d3bf 100644 --- a/test/previews/primer/counter_component_preview.rb +++ b/test/previews/primer/counter_component_preview.rb @@ -11,12 +11,12 @@ class CounterComponentPreview < ViewComponent::Preview # @param round toggle # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]] def default(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default) - render(Primer::CounterComponent.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme)) + render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme)) end # @label With Text def with_text - render(Primer::CounterComponent.new(text: "∞")) + render(Primer::Beta::Counter.new(text: "∞")) end end end