pulse_view_components 0.3.0 → 0.4.0

data/app/components/pulse/base_component.rb

@@ -23,14 +23,38 @@ module Pulse
   # ```
   #
   class BaseComponent < Pulse::Component
-    def initialize(tag:, classes: nil, **system_arguments)
+    status :stable
+
+    # @param system_arguments_denylist [Hash] Maps arrays of denied argument
+    #   keys to help text. Consumed here and never rendered as an attribute.
+    def initialize(tag:, classes: nil, system_arguments_denylist: {},
+                   **system_arguments)
       @tag = tag
       @classes = classes
       @system_arguments = system_arguments
+      validate_denylist(system_arguments_denylist)
     end
 
     def call
       content_tag(@tag, content, class: @classes, **@system_arguments)
     end
+
+    private
+
+    def validate_denylist(denylist)
+      denylist.each do |keys, help_text|
+        denied = keys & @system_arguments.keys
+        next if denied.empty?
+
+        if should_raise_error?
+          raise ArgumentError,
+                "#{denied.map { |key| "`#{key}`" }.to_sentence} " \
+                "#{denied.one? ? 'is an' : 'are'} invalid " \
+                "#{denied.one? ? 'argument' : 'arguments'}. #{help_text}"
+        end
+
+        @system_arguments.except!(*denied)
+      end
+    end
   end
 end

data/app/components/pulse/blank_slate.rb

@@ -3,6 +3,8 @@
 module Pulse
   # Use as placeholder when content is missing
   class BlankSlate < Pulse::Component
+    status :stable
+
     renders_one :title
     renders_one :description
 
@@ -10,8 +12,8 @@ module Pulse
       @system_arguments = system_arguments
       @system_arguments[:tag] ||= :div
       @system_arguments[:classes] = merge_classes(
-        'pulse-container pulse-text-center pulse-pt-16 pulse-pb-20',
-        'pulse-bg-secondary-50',
+        'pulse:container pulse:text-center pulse:pt-16 pulse:pb-20',
+        'pulse:bg-secondary-50',
         system_arguments[:classes]
       )
     end

data/app/components/pulse/border_box/header.rb

@@ -6,6 +6,8 @@ module Pulse
     #
     # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
     class Header < Pulse::Component
+      status :beta
+
       attr_reader :id
 
       TITLE_TAG_FALLBACK = :h2
@@ -35,9 +37,9 @@ module Pulse
         @system_arguments[:id] ||= self.class.generate_id
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = class_names(
-          'pulse-px-4 pulse-py-5 pulse-bg-gray-50 sm:pulse-p-6',
-          'pulse-rounded-t-md pulse-border-b pulse-border-gray-300',
-          'pulse-border-solid',
+          'pulse:px-4 pulse:py-5 pulse:bg-neutral-50 pulse:sm:p-6',
+          'pulse:rounded-t-md pulse:border-b pulse:border-neutral-300',
+          'pulse:border-solid',
           'Box-header',
           system_arguments[:classes]
         )

data/app/components/pulse/border_box.rb

@@ -3,6 +3,10 @@
 module Pulse
   # `BorderBox` is a Box component with a border.
   class BorderBox < Pulse::Component
+    # Header, body, rows and footer work. The `padding:` option and row
+    # `scheme:` values emit Primer classes that have no styles.
+    status :beta
+
     DEFAULT_PADDING = :default
     PADDING_MAPPINGS = {
       DEFAULT_PADDING => '',
@@ -33,11 +37,11 @@ module Pulse
     renders_one :body, lambda { |**system_arguments|
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(
-        'pulse-px-4 pulse-py-5 pulse-bg-white sm:pulse-p-6',
-        'pulse-border-b pulse-border-gray-300 pulse-border-solid',
-        'first-of-type:pulse-rounded-t-md',
-        'last-of-type:pulse-rounded-b-md',
-        'last-of-type:pulse-border-b-0',
+        'pulse:px-4 pulse:py-5 pulse:bg-white pulse:sm:p-6',
+        'pulse:border-b pulse:border-neutral-300 pulse:border-solid',
+        'pulse:first-of-type:rounded-t-md',
+        'pulse:last-of-type:rounded-b-md',
+        'pulse:last-of-type:border-b-0',
         system_arguments[:classes]
       )
 
@@ -50,9 +54,9 @@ module Pulse
     renders_one :footer, lambda { |**system_arguments|
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(
-        'pulse-px-4 pulse-py-5 pulse-bg-white sm:pulse-p-6',
-        'pulse-border-t pulse-border-gray-300 pulse-border-solid',
-        '-pulse-mt-1 pulse-rounded-b-md',
+        'pulse:px-4 pulse:py-5 pulse:bg-white pulse:sm:p-6',
+        'pulse:border-t pulse:border-neutral-300 pulse:border-solid',
+        'pulse:-mt-1 pulse:rounded-b-md',
         'Box-footer',
         system_arguments[:classes]
       )
@@ -60,7 +64,7 @@ module Pulse
       Pulse::BaseComponent.new(**system_arguments)
     }
 
-    # @apply pulse-pt-[var(--stack-padding-normal)] pulse-pr-[var(--stack-padding-normal)] pulse-pb-[var(--stack-padding-normal)] pulse-pl-[var(--stack-padding-normal)] pulse-mt-[calc(var(--borderWidth-thin)_*_-1)] pulse-list-none pulse-border-t-[color:var(--borderColor-muted)] pulse-border-t-[length:var(--borderWidth-thin)] first-of-type:pulse-rounded-tl-[var(--borderRadius-medium)] first-of-type:pulse-rounded-tr-[var(--borderRadius-medium)] last-of-type:pulse-rounded-br-[var(--borderRadius-medium)] last-of-type:pulse-rounded-bl-[var(--borderRadius-medium)]; /* To account for applying Box component to a list */
+    # @apply pulse:pt-[var(--stack-padding-normal)] pulse:pr-[var(--stack-padding-normal)] pulse:pb-[var(--stack-padding-normal)] pulse:pl-[var(--stack-padding-normal)] pulse:mt-[calc(var(--borderWidth-thin)_*_-1)] pulse:list-none pulse:border-t-[color:var(--borderColor-muted)] pulse:border-t-[length:var(--borderWidth-thin)] pulse:first-of-type:rounded-tl-[var(--borderRadius-medium)] pulse:first-of-type:rounded-tr-[var(--borderRadius-medium)] pulse:last-of-type:rounded-br-[var(--borderRadius-medium)] pulse:last-of-type:rounded-bl-[var(--borderRadius-medium)]; /* To account for applying Box component to a list */
     # border-top-style: solid;
 
     # Use Rows to add rows with borders and maintain the same padding.
@@ -71,10 +75,10 @@ module Pulse
                                   **system_arguments|
       system_arguments[:tag] = :li
       system_arguments[:classes] = class_names(
-        'pulse-px-4 pulse-py-5 pulse-bg-white sm:pulse-p-6',
-        'pulse-border-b pulse-border-gray-300 pulse-border-solid',
-        'last:pulse-border-b-0',
-        'first-of-type:pulse-rounded-t-md last-of-type:pulse-rounded-b-md',
+        'pulse:px-4 pulse:py-5 pulse:bg-white pulse:sm:p-6',
+        'pulse:border-b pulse:border-neutral-300 pulse:border-solid',
+        'pulse:last:border-b-0',
+        'pulse:first-of-type:rounded-t-md pulse:last-of-type:rounded-b-md',
         ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys,
                                               scheme, DEFAULT_ROW_SCHEME)],
         system_arguments[:classes]
@@ -89,8 +93,8 @@ module Pulse
       @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
-        'pulse-bg-white pulse-border pulse-border-gray-300 pulse-border-solid',
-        'pulse-border-[1px] pulse-rounded-md',
+        'pulse:bg-white pulse:border pulse:border-neutral-300',
+        'pulse:border-solid pulse:rounded-md',
         PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding,
                                            DEFAULT_PADDING)],
         system_arguments[:classes]
@@ -101,8 +105,8 @@ module Pulse
       @list_arguments = {
         tag: :ul,
         class: class_names
-        # 'pulse-divide-y pulse-divide-gray-300',
-        # 'pulse-border-b pulse-border-gray-300 pulse-border-solid'
+        # 'pulse:divide-y pulse:divide-neutral-300',
+        # 'pulse:border-b pulse:border-neutral-300 pulse:border-solid'
 
       }
     end

data/app/components/pulse/box.rb

@@ -3,6 +3,8 @@
 module Pulse
   # `Box` is a basic wrapper component for most layout related needs.
   class Box < Pulse::Component
+    status :stable
+
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/pulse/breadcrumb_item.rb

@@ -3,7 +3,9 @@
 module Pulse
   # Renders a breadcrumb item
   class BreadcrumbItem < Pulse::Component
-    DEFAULT_LINK_CLASSES = 'pulse-underline'
+    status :stable
+
+    DEFAULT_LINK_CLASSES = 'pulse:underline'
     DEFAULT_TEXT_CLASSES = ''
 
     attr_reader :text, :href

data/app/components/pulse/breadcrumbs.html.slim

@@ -1,9 +1,9 @@
 /! components/pulse/breadcrumbs
 = render Pulse::BaseComponent.new(**@system_arguments) do
-  ol class="pulse-list-none pulse-list-reset pulse-flex pulse-m-0 pulse-text-xs"
+  ol class="pulse:list-none pulse:flex pulse:m-0 pulse:text-xs"
     - items.filter { |i| i.text.present? }.each_with_index do |item, idx|
       - if idx != 0
-        li class="pulse-mx-1" aria-hidden="true"
+        li class="pulse:mx-1" aria-hidden="true"
           | >
       li
         = item

data/app/components/pulse/breadcrumbs.rb

@@ -3,6 +3,8 @@
 module Pulse
   # Renders a breadcrumb navigation list
   class Breadcrumbs < Pulse::Component
+    status :stable
+
     renders_many :items, Pulse::BreadcrumbItem
 
     def initialize(**system_arguments)

data/app/components/pulse/button.rb

@@ -3,6 +3,8 @@
 module Pulse
   # Renders a button or link button
   class Button < Pulse::Component
+    status :stable
+
     attr_reader :kwargs, :label, :url, :tag, :button_to_helper,
                 :disabled
 
@@ -10,28 +12,29 @@ module Pulse
 
     DEFAULT_SCHEME = :secondary
     SCHEME_MAPPINGS = {
-      primary: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
-               'pulse-bg-green-700 pulse-text-white hover:pulse-bg-green-800 ' \
-               'focus-visible:pulse-bg-green-800 hover:pulse-text-white ' \
-               'focus-visible:pulse-text-white ' \
-               'focus-visible:pulse-shadow-btn-inset',
-      secondary: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
-                 'pulse-bg-gray-50 pulse-text-gray hover:pulse-bg-gray-100 ' \
-                 'focus-visible:pulse-bg-gray-100',
-      danger: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
-              'pulse-bg-gray-50 pulse-text-danger-800 ' \
-              'hover:pulse-bg-danger-800 focus-visible:pulse-bg-danger-800 ' \
-              'hover:pulse-text-white focus-visible:pulse-text-white ' \
-              'focus-visible:pulse-shadow-btn-inset'
+      primary: 'pulse:border pulse:border-solid pulse:border-neutral-300 ' \
+               'pulse:bg-green-700 pulse:text-white pulse:hover:bg-green-800 ' \
+               'pulse:focus-visible:bg-green-800 pulse:hover:text-white ' \
+               'pulse:focus-visible:text-white ' \
+               'pulse:focus-visible:shadow-btn-inset',
+      secondary: 'pulse:border pulse:border-solid pulse:border-neutral-300 ' \
+                 'pulse:bg-neutral-50 pulse:text-neutral-700 ' \
+                 'pulse:hover:bg-neutral-100 ' \
+                 'pulse:focus-visible:bg-neutral-100',
+      danger: 'pulse:border pulse:border-solid pulse:border-neutral-300 ' \
+              'pulse:bg-neutral-50 pulse:text-danger-800 ' \
+              'pulse:hover:bg-danger-800 pulse:focus-visible:bg-danger-800 ' \
+              'pulse:hover:text-white pulse:focus-visible:text-white ' \
+              'pulse:focus-visible:shadow-btn-inset'
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     DEFAULT_SIZE = :md
     SIZE_MAPPINGS = {
-      xs: 'pulse-text-xs pulse-leading-5 pulse-font-medium pulse-py-0.5 ' \
-          'pulse-px-4',
-      sm: 'pulse-text-sm pulse-font-medium pulse-py-1 pulse-px-5',
-      md: 'pulse-text-base pulse-font-bold pulse-py-1.5 pulse-px-6'
+      xs: 'pulse:text-xs pulse:leading-5 pulse:font-medium pulse:py-0.5 ' \
+          'pulse:px-4',
+      sm: 'pulse:text-sm pulse:font-medium pulse:py-1 pulse:px-5',
+      md: 'pulse:text-base pulse:font-bold pulse:py-1.5 pulse:px-6'
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -45,7 +48,7 @@ module Pulse
     renders_one :leading_visual, types: {
       icon: lambda { |**system_arguments|
         system_arguments[:classes] = merge_classes(
-          'pulse-me-2',
+          'pulse:me-2',
           system_arguments[:classes]
         )
 
@@ -82,13 +85,13 @@ module Pulse
 
     def btn_class
       merge_classes(
-        'pulse-appearance-none pulse-inline-flex pulse-justify-center',
-        'pulse-items-center pulse-rounded-md pulse-no-underline',
-        'hover:pulse-no-underline focus-visible:pulse-no-underline',
-        'focus-visible:-pulse-outline-offset-2',
-        'focus-visible:pulse-outline-[2px] focus-visible:pulse-outline-solid',
-        'focus-visible:pulse-outline-[var(--pulse-focus-outlineColor)]',
-        'disabled:pulse-opacity-25 disabled:pulse-cursor-not-allowed',
+        'pulse:appearance-none pulse:inline-flex pulse:justify-center',
+        'pulse:items-center pulse:rounded-md pulse:no-underline',
+        'pulse:hover:no-underline pulse:focus-visible:no-underline',
+        'pulse:focus-visible:-outline-offset-2',
+        'pulse:focus-visible:outline-2 pulse:focus-visible:outline-solid',
+        'pulse:focus-visible:outline-(--pulse-focus-outlineColor)',
+        'pulse:disabled:opacity-25 pulse:disabled:cursor-not-allowed',
         SIZE_MAPPINGS[@size],
         SCHEME_MAPPINGS[@scheme],
         kwargs.fetch(:classes, '')

data/app/components/pulse/component.rb

@@ -6,11 +6,12 @@ module Pulse
   # This core `Component` class provides a place to include shared modules
   # and helper methods that can be used by any child component.
   class Component < ViewComponent::Base
-    TW_MERGE = TailwindMerge::Merger.new(config: { prefix: 'pulse-' })
+    TW_MERGE = TailwindMerge::Merger.new(config: { prefix: 'pulse' })
 
     include AttributesHelper
     include FetchOrFallbackHelper
     include SvgHelper
+    include Status
 
     # include Pulse::ViewHelper
 

data/app/components/pulse/conditional_wrapper.rb

@@ -5,6 +5,8 @@ module Pulse
   # is true, a `BaseComponent` will render around the content. If the condition is false, only
   # the content is rendered.
   class ConditionalWrapper < Pulse::Component
+    status :stable
+
     # @param condition [Boolean] Whether or not to wrap the content in a `BaseComponent`.
     # @param base_component_arguments [Hash] The arguments to pass to `BaseComponent`.
     def initialize(condition:, **base_component_arguments)

data/app/components/pulse/content.rb

@@ -4,6 +4,8 @@ module Pulse
   # Use `Content` as a helper to render content passed to a slot without adding
   # any tags.
   class Content < Pulse::Component
+    status :stable
+
     def call
       content
     end

data/app/components/pulse/counter.css

@@ -1,10 +1,10 @@
 /* Counter */
 .Counter {
-  @apply pulse-inline-block pulse-min-w-[var(--base-size-20)] pulse-text-[length:var(--text-body-size-small)] pulse-font-[number:var(--base-text-weight-medium)] pulse-leading-[calc(var(--base-size-20)_-_var(--borderWidth-thin)_*_2)] pulse-text-[color:var(--fgColor-default)] pulse-text-center bg-[color:var(--bgColor-neutral-muted,var(--color-neutral-muted))] pulse-border-[length:var(--borderWidth-thin)] pulse-border-[color:var(--counter-borderColor)] pulse-px-1.5 pulse-py-0 pulse-rounded-[2em] pulse-border-solid empty:pulse-hidden; /* makes sure it's a circle with just one digit */ /* 20px - 2px for the borders */
+  @apply pulse:inline-block pulse:min-w-[var(--base-size-20)] pulse:text-[length:var(--text-body-size-small)] pulse:font-[number:var(--base-text-weight-medium)] pulse:leading-[calc(var(--base-size-20)_-_var(--borderWidth-thin)_*_2)] pulse:text-[color:var(--fgColor-default)] pulse:text-center pulse:bg-[color:var(--bgColor-neutral-muted,var(--color-neutral-muted))] pulse:border-[length:var(--borderWidth-thin)] pulse:border-[color:var(--counter-borderColor)] pulse:px-1.5 pulse:py-0 pulse:rounded-[2em] pulse:border-solid pulse:empty:hidden; /* makes sure it's a circle with just one digit */ /* 20px - 2px for the borders */
 }
 .Counter--primary {
-  @apply pulse-text-[color:var(--pulse-fgColor-onEmphasis)] pulse-bg-[color:var(--bgColor-neutral-emphasis)];
+  @apply pulse:text-[color:var(--pulse-fgColor-onEmphasis)] pulse:bg-[color:var(--bgColor-neutral-emphasis)];
 }
 .Counter--secondary {
-  @apply pulse-text-[color:var(--fgColor-muted)] pulse-bg-[color:var(--bgColor-neutral-muted)];
+  @apply pulse:text-[color:var(--fgColor-muted)] pulse:bg-[color:var(--bgColor-neutral-muted)];
 }

data/app/components/pulse/counter.rb

@@ -8,6 +8,10 @@ module Pulse
   #   should be accompanied with text such as `issues` or `pull requests`.
   #
   class Counter < Pulse::Component
+    # Incomplete: relies on Primer's `Counter` CSS, which is not in the built
+    # stylesheet, so the counter renders as unstyled text.
+    status :alpha
+
     DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
       DEFAULT_SCHEME => '',

data/app/components/pulse/flash.rb

@@ -3,6 +3,10 @@
 module Pulse
   # Use `Flash` to inform users of successful or pending actions.
   class Flash < Pulse::Component
+    # Messages, schemes, icons and actions work. `dismissible: true` raises
+    # because `Pulse::IconButton` does not exist, and `full: true` has no styles.
+    status :beta
+
     # Optional action content showed on the right side of the component.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -20,10 +24,10 @@ module Pulse
     # TODO: Style icon in scheme color
     DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
-      default: 'pulse-bg-[#ddf4ff] pulse-border pulse-border-[#54aeff]',
-      warning: 'pulse-bg-[#fff8c5] pulse-border pulse-border-[#f6e05e]',
-      danger: 'pulse-bg-[#ffebe9] pulse-border pulse-border-[#ff8182]',
-      success: 'pulse-bg-[#dafbe1] pulse-border pulse-border-[#4ac26b]'
+      default: 'pulse:bg-[#ddf4ff] pulse:border pulse:border-[#54aeff]',
+      warning: 'pulse:bg-[#fff8c5] pulse:border pulse:border-[#f6e05e]',
+      danger: 'pulse:bg-[#ffebe9] pulse:border pulse:border-[#ff8182]',
+      success: 'pulse:bg-[#dafbe1] pulse:border pulse:border-[#4ac26b]'
     }.freeze
 
     # @param full [Boolean] Whether the component should take up the full width of the screen.
@@ -39,8 +43,8 @@ module Pulse
       @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
-        'pulse-px-3 pulse-py-2 pulse-font-medium pulse-rounded-lg pulse-my-3',
-        'pulse-flex pulse-gap-2 pulse-items-center pulse-justify-start',
+        'pulse:px-3 pulse:py-2 pulse:font-medium pulse:rounded-lg pulse:my-3',
+        'pulse:flex pulse:gap-2 pulse:items-center pulse:justify-start',
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme,
                                           DEFAULT_SCHEME)],
         system_arguments[:classes],

data/app/components/pulse/forms/error_explanation.html.slim

@@ -1,8 +1,8 @@
 /! components/pulse/forms/error_explanation
-= render Pulse::BaseComponent.new(tag: :div, **@options) do
+= render Pulse::BaseComponent.new(**@system_arguments) do
   = render Pulse::Text.new(type: :body1, tag: :h2) do
-    = t('errors.template.header', count: resource.errors.count, model: resource.class.model_name.human.downcase)
+    = header
 
-  ul class="pulse-list-disc pulse-list-inside"
+  ul class="pulse:list-disc pulse:list-inside"
     - errors.full_messages.each do |msg|
       li = msg

data/app/components/pulse/forms/error_explanation.rb

@@ -3,25 +3,42 @@
 module Pulse
   module Forms
     # Render error message box for an ActiveModel resource
-    class ErrorExplanation < ViewComponent::Base
-      def initialize(resource:, **options)
+    class ErrorExplanation < Pulse::Component
+      status :stable
+
+      # @param resource [ActiveModel::Validations] The record whose errors are listed.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(resource:, **system_arguments)
         @resource = resource
-        @options = options
-        @options[:classes] = class_names(
-          'pulse-bg-error-50 pulse-text-error pulse-px-3 pulse-py-2',
-          'pulse-font-medium pulse-rounded-lg pulse-my-3',
-          options[:classes]
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = merge_classes(
+          'pulse:bg-error-50 pulse:text-error pulse:px-3 pulse:py-2',
+          'pulse:font-medium pulse:rounded-lg pulse:my-3',
+          system_arguments[:classes]
         )
       end
 
       def errors
-        @errors = ActiveModel::Errors.new(resource)
-        # Only display the last of each attribute error, to avoid needless
-        # duplication.
-        resource.errors.group_by(&:attribute).values.map(&:last).each do |error|
-          @errors.add(error.attribute, error.message)
+        @errors ||= ActiveModel::Errors.new(resource).tap do |errors|
+          # Only display the last of each attribute error, to avoid needless
+          # duplication.
+          resource.errors.group_by(&:attribute).each_value do |group|
+            errors.add(group.last.attribute, group.last.message)
+          end
         end
-        @errors
+      end
+
+      # Prefers the app's `errors.template.header` so existing wording is
+      # kept. The sidecar is English-only, so other locales fall back to its
+      # English text rather than raising under `raise_on_missing_translations`.
+      def header
+        options = { count: errors.count,
+                    model: resource.class.model_name.human.downcase }
+
+        t('errors.template.header', **options,
+          default: t('.header', **options,
+                     default: t('.header', **options, locale: :en)))
       end
 
       def render?

data/app/components/pulse/forms/error_explanation.yml

@@ -0,0 +1,4 @@
+en:
+  header:
+    one: "1 error prohibited this %{model} from being saved:"
+    other: "%{count} errors prohibited this %{model} from being saved:"

data/app/components/pulse/icon.rb

@@ -3,6 +3,8 @@
 module Pulse
   # Render icons from the images/pulse_view_components/icons directory.
   class Icon < Pulse::Component
+    status :stable
+
     SIZE_DEFAULT = :sm
     SIZE_MAPPINGS = {
       xs: 12,

data/app/components/pulse/label.rb

@@ -5,6 +5,8 @@ module Pulse
   # consolidated with badges?
   # Accepts Hex color value for bg_color, with or without a leading "#"
   class Label < Pulse::Component
+    status :stable
+
     attr_reader :title, :bg_color
 
     def initialize(title:, bg_color: 'ffffff', **options)
@@ -12,8 +14,8 @@ module Pulse
       @bg_color = bg_color || 'ffffff'
       @options = options
       @options[:classes] = merge_classes(
-        'pulse-px-2 pulse-inline-flex pulse-text-xs print:pulse-text-2xs',
-        'pulse-leading-5 pulse-font-semibold pulse-rounded-full',
+        'pulse:px-2 pulse:inline-flex pulse:text-xs pulse:print:text-2xs',
+        'pulse:leading-5 pulse:font-semibold pulse:rounded-full',
         text_color,
         options[:classes]
       )
@@ -36,7 +38,7 @@ module Pulse
       luminance = (0.2126 * r_norm) + (0.7152 * g_norm) + (0.0722 * b_norm)
 
       # Choose text color based on luminance
-      luminance > 0.5 ? 'pulse-text-black' : 'pulse-text-white'
+      luminance > 0.5 ? 'pulse:text-black' : 'pulse:text-white'
     end
   end
 end