diff --git a/.changeset/flat-frogs-lie.md b/.changeset/flat-frogs-lie.md new file mode 100644 index 0000000000..331bdd409f --- /dev/null +++ b/.changeset/flat-frogs-lie.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': minor +--- + +Add format_style to RelativeTime component diff --git a/app/components/primer/beta/relative_time.rb b/app/components/primer/beta/relative_time.rb index da49c7bb3f..37330d3fd4 100644 --- a/app/components/primer/beta/relative_time.rb +++ b/app/components/primer/beta/relative_time.rb @@ -12,6 +12,9 @@ class RelativeTime < Primer::Component FORMAT_DEFAULT = :auto FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze + FORMAT_STYLE_DEFAULT = nil + FORMAT_STYLE_OPTIONS = [FORMAT_STYLE_DEFAULT, :long, :short, :narrow].freeze + SECOND_DEFAULT = nil SECOND_MAPPINGS = { SECOND_DEFAULT => nil, @@ -104,6 +107,7 @@ class RelativeTime < Primer::Component # @param threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute. # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %> # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %> + # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %> # @param lang [string] The language to use. # @param title [string] Provide a custom title to the element. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> @@ -122,6 +126,7 @@ def initialize( threshold: nil, precision: PRECISION_DEFAULT, format: nil, + format_style: nil, lang: nil, title: nil, **system_arguments @@ -143,6 +148,7 @@ def initialize( @system_arguments[:title] = title if title.present? @system_arguments[:lang] = lang if lang.present? @system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present? + @system_arguments[:"format-style"] = format_style if format_style.present? if datetime.present? && datetime.respond_to?(:iso8601) @datetime = datetime @system_arguments[:datetime] = datetime.iso8601 diff --git a/package-lock.json b/package-lock.json index 3de6058302..1cd0433347 100644 --- a/package-lock.json +++ b/package-lock.json @@ -838,9 +838,9 @@ "license": "MIT" }, "node_modules/@github/relative-time-element": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.0.0.tgz", - "integrity": "sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g==" + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.1.5.tgz", + "integrity": "sha512-WAf1EQV5Sn6jGuAIQur/ztKlEV9R+VHDNwqEbeaOb6s9fiwM5z7+ujlWNZtgFkDp3lF0H8D/f0vdiPlfHz0ZTQ==" }, "node_modules/@github/tab-container-element": { "version": "3.2.0", @@ -9914,9 +9914,9 @@ "dev": true }, "@github/relative-time-element": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.0.0.tgz", - "integrity": "sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g==" + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.1.5.tgz", + "integrity": "sha512-WAf1EQV5Sn6jGuAIQur/ztKlEV9R+VHDNwqEbeaOb6s9fiwM5z7+ujlWNZtgFkDp3lF0H8D/f0vdiPlfHz0ZTQ==" }, "@github/tab-container-element": { "version": "3.2.0", diff --git a/previews/primer/beta/relative_time_preview.rb b/previews/primer/beta/relative_time_preview.rb index 71683ecea5..dc57e6689b 100644 --- a/previews/primer/beta/relative_time_preview.rb +++ b/previews/primer/beta/relative_time_preview.rb @@ -21,6 +21,7 @@ class RelativeTimePreview < ViewComponent::Preview # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic] # @param precision [Symbol] select [~, second, minute, hour, day, month, year] # @param format [Symbol] select [~, auto, micro, elapsed] + # @param format_style [Symbol] select [~, long, short, narrow] # @param lang [String] text # @param title [String] text def playground( @@ -37,6 +38,7 @@ def playground( threshold: nil, precision: nil, format: nil, + format_style: nil, datetime: Time.utc(2020, 1, 1, 0, 0, 0), lang: nil, title: nil @@ -55,6 +57,7 @@ def playground( threshold: threshold, precision: precision, format: format, + format_style: format_style, datetime: datetime, lang: lang, title: title @@ -75,6 +78,7 @@ def playground( # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic] # @param precision [Symbol] select [~, second, minute, hour, day, month, year] # @param format [Symbol] select [~, auto, micro, elapsed] + # @param format_style [Symbol] select [~, long, short, narrow] # @param lang [String] text # @param title [String] text def default( @@ -91,6 +95,7 @@ def default( threshold: nil, precision: nil, format: nil, + format_style: nil, datetime: Time.now.utc, lang: nil, title: nil @@ -109,6 +114,7 @@ def default( threshold: threshold, precision: precision, format: format, + format_style: format_style, datetime: datetime, lang: lang, title: title @@ -128,6 +134,7 @@ def default( # @param year [Symbol] select [~, numeric, two_digit] # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic] # @param precision [Symbol] select [~, second, minute, hour, day, month, year] + # @param format_style [Symbol] select [~, long, short, narrow] # @param lang [String] text # @param title [String] text def micro_format( @@ -143,6 +150,7 @@ def micro_format( time_zone_name: nil, threshold: nil, precision: nil, + format_style: nil, datetime: Time.now.iso8601, lang: nil, title: nil @@ -161,6 +169,7 @@ def micro_format( threshold: threshold, precision: precision, format: :micro, + format_style: format_style, datetime: datetime, lang: lang, title: title @@ -181,6 +190,7 @@ def micro_format( # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic] # @param precision [Symbol] select [~, second, minute, hour, day, month, year] # @param format [Symbol] select [~, auto, micro, elapsed] + # @param format_style [Symbol] select [~, long, short, narrow] # @param lang [String] text # @param title [String] text def recent_time( @@ -197,6 +207,7 @@ def recent_time( threshold: nil, precision: nil, format: nil, + format_style: nil, datetime: Time.now.iso8601, lang: nil, title: nil @@ -215,6 +226,7 @@ def recent_time( threshold: threshold, precision: precision, format: format, + format_style: format_style, datetime: datetime, lang: lang, title: title @@ -232,6 +244,7 @@ def recent_time( # @param year [Symbol] select [~, numeric, two_digit] # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic] # @param precision [Symbol] select [~, second, minute, hour, day, month, year] + # @param format_style [Symbol] select [~, long, short, narrow] # @param lang [String] text # @param title [String] text def count_down_timer( @@ -245,6 +258,7 @@ def count_down_timer( time_zone_name: nil, threshold: nil, precision: nil, + format_style: nil, datetime: Time.utc(2038, 1, 19, 0o3, 14, 8), lang: nil, title: nil @@ -261,6 +275,7 @@ def count_down_timer( threshold: threshold, precision: precision, format: :elapsed, + format_style: format_style, datetime: datetime, lang: lang, title: title