pulse_view_components 0.3.0 → 0.4.0

data/app/components/pulse/popover.rb

@@ -9,22 +9,52 @@ module Pulse
   # positioned properly. To render the popover with relative positioning, use
   # the relative property.
   class Popover < Pulse::Component
+    status :stable
+
+    # The caret is a white square rotated 45 degrees and drawn over the edge of
+    # the body, with a border on the two sides that face outward.
+    CARET_BASE = 'pulse:before:absolute pulse:before:size-3 ' \
+                 'pulse:before:rotate-45 pulse:before:bg-white ' \
+                 'pulse:before:border-neutral-300'
+    CARET_TOP = 'pulse:before:-top-1.5 pulse:before:border-t ' \
+                'pulse:before:border-l'
+    CARET_BOTTOM = 'pulse:before:-bottom-1.5 pulse:before:border-b ' \
+                   'pulse:before:border-r'
+    CARET_LEFT = 'pulse:before:-left-1.5 pulse:before:border-b ' \
+                 'pulse:before:border-l'
+    CARET_RIGHT = 'pulse:before:-right-1.5 pulse:before:border-t ' \
+                  'pulse:before:border-r'
+    CARET_CENTER_X = 'pulse:before:left-1/2 pulse:before:-translate-x-1/2'
+    CARET_CENTER_Y = 'pulse:before:top-1/2 pulse:before:-translate-y-1/2'
+
     CARET_DEFAULT = :top
     CARET_MAPPINGS = {
-      CARET_DEFAULT => 'pulse-caret-top',
-      :bottom => 'pulse-caret-bottom',
-      :bottom_right => 'Popover-message--bottom-right',
-      :bottom_left => 'Popover-message--bottom-left',
-      :left => 'pulse-caret-left',
-      :left_bottom => 'Popover-message--left-bottom',
-      :left_top => 'Popover-message--left-top',
-      :right => 'pulse-caret-right',
-      :right_bottom => 'Popover-message--right-bottom',
-      :right_top => 'Popover-message--right-top',
-      :top_left => 'Popover-message--top-left',
-      :top_right => 'Popover-message--top-right'
+      CARET_DEFAULT => "#{CARET_TOP} #{CARET_CENTER_X}",
+      :top_left => "#{CARET_TOP} pulse:before:left-6",
+      :top_right => "#{CARET_TOP} pulse:before:right-6",
+      :bottom => "#{CARET_BOTTOM} #{CARET_CENTER_X}",
+      :bottom_left => "#{CARET_BOTTOM} pulse:before:left-6",
+      :bottom_right => "#{CARET_BOTTOM} pulse:before:right-6",
+      :left => "#{CARET_LEFT} #{CARET_CENTER_Y}",
+      :left_top => "#{CARET_LEFT} pulse:before:top-6",
+      :left_bottom => "#{CARET_LEFT} pulse:before:bottom-6",
+      :right => "#{CARET_RIGHT} #{CARET_CENTER_Y}",
+      :right_top => "#{CARET_RIGHT} pulse:before:top-6",
+      :right_bottom => "#{CARET_RIGHT} pulse:before:bottom-6"
+    }.freeze
+    CARET_OPTIONS = CARET_MAPPINGS.keys.freeze
+
+    # Leaves room for the caret on the side it points from.
+    CARET_MARGIN_MAPPINGS = {
+      top: 'pulse:mt-2',
+      bottom: 'pulse:mb-2',
+      left: 'pulse:ml-2',
+      right: 'pulse:mr-2'
     }.freeze
 
+    DEFAULT_WIDTH = 'pulse:w-64'
+    LARGE_WIDTH = 'pulse:w-80'
+
     DEFAULT_HEADING_TAG = :h4
 
     # The heading
@@ -36,7 +66,7 @@ module Pulse
       system_arguments[:type] = :body3
       system_arguments[:tag] = tag
       system_arguments[:classes] = merge_classes(
-        'pulse-mb-2',
+        'pulse:mb-2',
         system_arguments[:classes]
       )
 
@@ -50,18 +80,19 @@ module Pulse
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :body, lambda { |caret: CARET_DEFAULT, large: false,
                                  **system_arguments|
+      caret = fetch_or_fallback(CARET_OPTIONS, caret, CARET_DEFAULT)
+      side = caret.to_s.split('_').first.to_sym
+      @large = large
+
       @body_arguments = system_arguments
       @body_arguments['data-caret'] = caret
       @body_arguments[:classes] = merge_classes(
-        @body_arguments[:classes],
-        CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret,
-                                         CARET_DEFAULT)],
-        'Popover-message--large' => large
-      )
-      @body_arguments[:classes] = merge_classes(
-        @body_arguments[:classes],
-        'pulse-bg-white pulse-border pulse-border-gray-300 pulse-rounded-lg',
-        'pulse-p-4 pulse-mt-2 pulse-mx-auto pulse-text-left pulse-shadow-lg'
+        'pulse:relative pulse:bg-white pulse:border pulse:border-neutral-300',
+        'pulse:rounded-lg pulse:p-4 pulse:text-left pulse:shadow-lg',
+        CARET_MARGIN_MAPPINGS[side],
+        CARET_BASE,
+        CARET_MAPPINGS[caret],
+        system_arguments[:classes]
       )
 
       Pulse::Content.new
@@ -71,16 +102,24 @@ module Pulse
     def initialize(**system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
-      @system_arguments[:classes] = merge_classes(
-        'pulse-relative pulse-z-10 pulse-w-64',
-        system_arguments[:classes]
-      )
     end
 
     def render?
       body.present?
     end
 
+    # Built from the template because the body slot, which sets `large`, is
+    # only evaluated once rendering starts.
+    def wrapper_arguments
+      @system_arguments.merge(
+        classes: merge_classes(
+          'pulse:relative pulse:z-10',
+          @large ? LARGE_WIDTH : DEFAULT_WIDTH,
+          @system_arguments[:classes]
+        )
+      )
+    end
+
     def body_component
       Pulse::Box.new(**@body_arguments)
     end

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

@@ -1,5 +1,5 @@
 /! components/pulse/progress_bar
 = render Pulse::BaseComponent.new(**@system_attributes) do
-  div class="pulse-h-1 pulse-bg-success" style="width: #{[@percentage, 100].min}%"
+  div class="pulse:h-1 pulse:bg-success" style="width: #{[@percentage, 100].min}%"
   - if @percentage > 100
-    div class="pulse-h-1 pulse-bg-error" style="width: #{@percentage - 100}%"
+    div class="pulse:h-1 pulse:bg-error" style="width: #{@percentage - 100}%"

data/app/components/pulse/progress_bar.rb

@@ -3,13 +3,15 @@
 module Pulse
   # Renders a simple progress bar
   class ProgressBar < Pulse::Component
+    status :stable
+
     def initialize(percentage: 0, **system_attributes)
       @percentage = percentage.to_i
       @system_attributes = system_attributes
       @system_attributes[:tag] ||= :div
-      @system_attributes[:class] = merge_classes(
-        'pulse-flex pulse-flex-row pulse-h-1 pulse-w-full pulse-bg-gray-300',
-        'dark:pulse-bg-gray-600',
+      @system_attributes[:classes] = merge_classes(
+        'pulse:flex pulse:flex-row pulse:h-1 pulse:w-full pulse:bg-neutral-300',
+        'pulse:dark:bg-neutral-600',
         system_attributes[:classes]
       )
     end

data/app/components/pulse/table/cell.html.slim

@@ -1,9 +1,9 @@
 /! components/pulse/tables/cell
 = render Pulse::BaseComponent.new(**options) do
   - if sortable?
-    = link_to request.params.merge(**url_options), class: merge_classes('pulse-inline-flex pulse-items-center pulse-gap-1', title_classes) do
+    = link_to request.params.merge(**url_options), class: merge_classes('pulse:inline-flex pulse:items-center pulse:gap-1', title_classes) do
       = content
-      = render Pulse::Icon.new(icon: icon, width: 9, height: 8, classes: 'pulse-shrink-0', title: t(".#{icon}"))
+      = render Pulse::Icon.new(icon: icon, width: 9, height: 8, classes: 'pulse:shrink-0', title: t(".#{icon}"))
 
   - else
     span class=title_classes

data/app/components/pulse/table/cell.rb

@@ -4,24 +4,28 @@ module Pulse
   class Table
     # Renders a table cell
     class Cell < Pulse::Component
+      status :stable
+
       attr_reader :sort_by, :current_sort_column, :current_sort_direction,
                   :additional_params, :footer
 
       HEAD_DEFAULT_SCHEME = :xs
       HEAD_SCHEME_MAPPINGS = {
-        sm: 'pulse-px-3 pulse-py-4 print:pulse-px-2 print:pulse-py-3 ' \
-            'pulse-text-sm print:pulse-text-xs pulse-font-base',
-        xs: 'pulse-px-2 pulse-py-4 print:pulse-py-2 pulse-text-xs ' \
-            'print:pulse-text-2xs pulse-font-medium'
+        sm: 'pulse:px-3 pulse:py-4 pulse:print:px-2 pulse:print:py-3 ' \
+            'pulse:text-sm pulse:print:text-xs pulse:font-normal',
+        xs: 'pulse:px-2 pulse:py-4 pulse:print:py-2 pulse:text-xs ' \
+            'pulse:print:text-2xs pulse:font-medium'
       }.freeze
       HEAD_SCHEME_OPTIONS = HEAD_SCHEME_MAPPINGS.keys.freeze
 
-      DEFAULT_CELL_CLASSES = 'pulse-text-start first:pulse-ps-4 ' \
-                             'last:pulse-pe-4 pulse-px-2 pulse-text-gray ' \
-                             'print:first:pulse-ps-2 print:last:pulse-pe-2'
-      DEFAULT_TH_CLASSES = 'pulse-uppercase pulse-tracking-wider'
-      DEFAULT_TD_CLASSES = 'pulse-py-2 pulse-whitespace-nowrap ' \
-                           'pulse-text-sm print:pulse-text-xs pulse-text-gray'
+      DEFAULT_CELL_CLASSES = 'pulse:text-start pulse:first:ps-4 ' \
+                             'pulse:last:pe-4 pulse:px-2 ' \
+                             'pulse:text-neutral-700 ' \
+                             'pulse:print:first:ps-2 pulse:print:last:pe-2'
+      DEFAULT_TH_CLASSES = 'pulse:uppercase pulse:tracking-wider'
+      DEFAULT_TD_CLASSES = 'pulse:py-2 pulse:whitespace-nowrap ' \
+                           'pulse:text-sm pulse:print:text-xs ' \
+                           'pulse:text-neutral-700'
 
       def initialize(sort_by: nil, current_sort_column: nil,
                      current_sort_direction: nil, additional_params: {},

data/app/components/pulse/table/column.rb

@@ -4,6 +4,8 @@ module Pulse
   class Table
     # Encapsulates table column properties
     class Column < Pulse::Component
+      status :stable
+
       attr_reader :title, :sr_title, :sort_by, :footer, :options
 
       def initialize(title: '', sr_title: nil, sort_by: nil, footer: nil,

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

@@ -1,7 +1,7 @@
 /! components/pulse/table
 - if collection.present?
-  div class="pulse-flex pulse-flex-col pulse-gap-4"
-    div class=class_names("pulse-w-full pulse-shadow print:pulse-shadow-none sm:pulse-rounded-lg", 'pulse-overflow-x-scroll': scroll)
+  div class="pulse:flex pulse:flex-col pulse:gap-4"
+    div class=class_names("pulse:w-full pulse:shadow pulse:print:shadow-none pulse:sm:rounded-lg", 'pulse:overflow-x-scroll': scroll)
       = render Pulse::BaseComponent.new(**table_options) do
         - if header
           = render Pulse::BaseComponent.new(tag: :thead, classes: head_classes) do
@@ -39,7 +39,7 @@
 
 
     - if pagination? && collection.respond_to?(:total_pages)
-      div class="pulse-text-center pulse-text-gray"
+      div class="pulse:text-center pulse:text-neutral-700"
         = paginate(collection, window: 9)
 
 - else

data/app/components/pulse/table.rb

@@ -5,18 +5,21 @@ module Pulse
   # Inspiration taken from
   # https://github.com/baoagency/polaris_view_components/
   class Table < Pulse::Component
-    DEFAULT_TABLE_CLASSES = 'pulse-min-w-full pulse-divide-y ' \
-                            'pulse-divide-gray-300'
-    DEFAULT_HEAD_CLASSES = 'pulse-bg-gray-100'
-    DEFAULT_TH_CLASSES = 'pulse-text-start pulse-text-gray pulse-uppercase ' \
-                         'pulse-tracking-wider pulse-px-4 print:pulse-px-2 ' \
-                         'pulse-py-4 print:pulse-py-3 text-xs pulse-font-medium'
-    DEFAULT_BODY_CLASSES = 'pulse-bg-white pulse-divide-y pulse-text-sm ' \
-                           'pulse-leading-extra-snug pulse-divide-gray-300 ' \
-                           'print:pulse-divide-gray-400 pulse-tracking-tight ' \
-                           ''
-    DEFAULT_ROW_CLASSES = 'pulse-border-secondary-300'
-    DEFAULT_TD_CLASSES = 'pulse-px-4 print:pulse-px-2 pulse-py-4'
+    status :stable
+
+    DEFAULT_TABLE_CLASSES = 'pulse:min-w-full pulse:divide-y ' \
+                            'pulse:divide-neutral-300'
+    DEFAULT_HEAD_CLASSES = 'pulse:bg-neutral-100'
+    DEFAULT_TH_CLASSES = 'pulse:text-start pulse:text-neutral-700 ' \
+                         'pulse:uppercase ' \
+                         'pulse:tracking-wider pulse:px-4 pulse:print:px-2 ' \
+                         'pulse:py-4 pulse:print:py-3 pulse:text-xs ' \
+                         'pulse:font-medium'
+    DEFAULT_BODY_CLASSES = 'pulse:bg-white pulse:divide-y pulse:text-sm ' \
+                           'pulse:leading-snug pulse:divide-neutral-300 ' \
+                           'pulse:print:divide-neutral-400 pulse:tracking-tight'
+    DEFAULT_ROW_CLASSES = 'pulse:border-secondary-300'
+    DEFAULT_TD_CLASSES = 'pulse:px-4 pulse:print:px-2 pulse:py-4'
 
     delegate :paginate, to: :helpers
 
@@ -58,7 +61,7 @@ module Pulse
       { tag: 'table' }.deep_merge(@options).tap do |args|
         args[:classes] = merge_classes(
           DEFAULT_TABLE_CLASSES,
-          'pulse-container pulse-mx-auto',
+          'pulse:container pulse:mx-auto',
           args[:classes]
         )
         args[:data] ||= {}
@@ -81,8 +84,8 @@ module Pulse
     def body_classes
       merge_classes(
         DEFAULT_BODY_CLASSES,
-        '[&>tr:nth-child(even)]:pulse-bg-gray-50': striped,
-        'pulse-border-b [&>tr]:pulse-border-t [&>tr:first-child]:pulse-border-t-0': !striped # rubocop:disable Layout/LineLength
+        'pulse:[&>tr:nth-child(even)]:bg-neutral-50': striped,
+        'pulse:border-b pulse:[&>tr]:border-t pulse:[&>tr:first-child]:border-t-0': !striped # rubocop:disable Layout/LineLength
       )
     end
 
@@ -90,7 +93,7 @@ module Pulse
       { tag: 'tr' }.tap do |args|
         args[:classes] = merge_classes(
           DEFAULT_ROW_CLASSES,
-          { 'hover:pulse-bg-dark-charcoal-50': hoverable },
+          { 'pulse:hover:bg-neutral-50': hoverable },
           row_classes
         )
         args[:id] = dom_id(row) if row.respond_to?(:to_key)

data/app/components/pulse/text.rb

@@ -3,31 +3,33 @@
 module Pulse
   # Base Text component
   class Text < Pulse::Component
+    status :stable
+
     STYLE_MAPPINGS = {
-      h1: 'pulse-text-3xl pulse-font-bold print:pulse-text-2xl',
-      h2: 'pulse-text-2xl pulse-font-bold print:pulse-text-xl',
-      h3: 'pulse-text-xl pulse-font-bold print:pulse-text-lg',
-      h4: 'pulse-text-lg pulse-font-bold print:pulse-text-base',
-      subtitle: 'pulse-text-xl print:pulse-text-lg pulse-leading-tight ' \
-                'pulse-font-bold tracking-tight',
-      body1: 'pulse-text-lg print:pulse-text-base pulse-font-bold ' \
-             'pulse-leading-6 tracking-tight',
-      body2: 'pulse-text-lg print:pulse-text-base pulse-font-normal ' \
-             'pulse-leading-6 tracking-tight',
-      body3: 'pulse-text-base print:pulse-text-sm pulse-font-bold ' \
-             'pulse-leading-normal',
-      body4: 'pulse-text-base print:pulse-text-sm pulse-font-normal ' \
-             'pulse-leading-normal',
-      body5: 'pulse-text-sm print:pulse-text-xs pulse-font-bold ' \
-             'pulse-leading-snug',
-      body6: 'pulse-text-sm print:pulse-text-xs pulse-font-normal ' \
-             'pulse-leading-snug',
-      body7: 'pulse-text-xs pulse-font-bold pulse-leading-5',
-      body8: 'pulse-text-xs pulse-font-normal pulse-leading-5',
-      caption1: 'pulse-text-2xs pulse-font-bold tracking-normal ' \
-                'pulse-leading-extra-tight',
-      caption2: 'pulse-text-2xs pulse-font-normal tracking-normal ' \
-                'pulse-leading-extra-tight'
+      h1: 'pulse:text-3xl pulse:font-bold pulse:print:text-2xl',
+      h2: 'pulse:text-2xl pulse:font-bold pulse:print:text-xl',
+      h3: 'pulse:text-xl pulse:font-bold pulse:print:text-lg',
+      h4: 'pulse:text-lg pulse:font-bold pulse:print:text-base',
+      subtitle: 'pulse:text-xl pulse:print:text-lg pulse:leading-tight ' \
+                'pulse:font-bold pulse:tracking-tight',
+      body1: 'pulse:text-lg pulse:print:text-base pulse:font-bold ' \
+             'pulse:leading-6 pulse:tracking-tight',
+      body2: 'pulse:text-lg pulse:print:text-base pulse:font-normal ' \
+             'pulse:leading-6 pulse:tracking-tight',
+      body3: 'pulse:text-base pulse:print:text-sm pulse:font-bold ' \
+             'pulse:leading-normal',
+      body4: 'pulse:text-base pulse:print:text-sm pulse:font-normal ' \
+             'pulse:leading-normal',
+      body5: 'pulse:text-sm pulse:print:text-xs pulse:font-bold ' \
+             'pulse:leading-snug',
+      body6: 'pulse:text-sm pulse:print:text-xs pulse:font-normal ' \
+             'pulse:leading-snug',
+      body7: 'pulse:text-xs pulse:font-bold pulse:leading-5',
+      body8: 'pulse:text-xs pulse:font-normal pulse:leading-5',
+      caption1: 'pulse:text-2xs pulse:font-bold pulse:tracking-normal ' \
+                'pulse:leading-tight',
+      caption2: 'pulse:text-2xs pulse:font-normal pulse:tracking-normal ' \
+                'pulse:leading-tight'
     }.freeze
 
     TAG_MAPPINGS = {

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

@@ -1,14 +1,14 @@
 /! components/pulse/toast
 = render Pulse::BaseComponent.new(**@system_arguments) do
-  div class="pulse-flex pulse-w-full" data-theme=(@theme)
-    div class="pulse-flex-1 pulse-flex pulse-justify-between pulse-items-start"
-      div class="pulse-flex-1 pulse-flex pulse-justify-between pulse-items-center pulse-gap-4"
-        = render Pulse::Text.new(type: :body6, classes: 'pulse-mb-0 pulse-min-w-[250px]') do
+  div class="pulse:flex pulse:w-full" data-theme=(@theme)
+    div class="pulse:flex-1 pulse:flex pulse:justify-between pulse:items-start"
+      div class="pulse:flex-1 pulse:flex pulse:justify-between pulse:items-center pulse:gap-4"
+        = render Pulse::Text.new(type: :body6, classes: 'pulse:mb-0 pulse:min-w-62.5') do
           = content
-        div class="pulse-mt-0"
-          div class="pulse-flex pulse-items-center pulse-gap-3.5 -pulse-my-2"
+        div class="pulse:mt-0"
+          div class="pulse:flex pulse:items-center pulse:gap-3.5 pulse:-my-2"
             - if action?
-              = render Pulse::Text.new(type: :body5, classes: merge_classes(link_classes, 'pulse-uppercase pulse-mb-0')) do
+              = render Pulse::Text.new(type: :body5, classes: merge_classes(link_classes, 'pulse:uppercase pulse:mb-0')) do
                 = action
-            button class="pulse-appearance-none pulse-bg-transparent pulse-border-0 pulse-p-2" data-action="click->pulse--toast#dismiss"
+            button class="pulse:appearance-none pulse:bg-transparent pulse:border-0 pulse:p-2" data-action="click->pulse--toast#dismiss"
               = render Pulse::Icon.new(icon: :close, width: 9, height: 9, class: link_classes)

data/app/components/pulse/toast.rb

@@ -3,6 +3,8 @@
 module Pulse
   # Renders a toast popup.
   class Toast < Pulse::Component
+    status :stable
+
     include Turbo::FramesHelper
 
     renders_one :action, lambda { |url:, **system_arguments, &block|
@@ -16,15 +18,15 @@ module Pulse
     }
 
     LINK_MAPPINGS = {
-      default: 'pulse-text-white hover:pulse-text-white',
-      error: 'pulse-text-gray hover:pulse-text-gray',
-      success: 'pulse-text-white hover:pulse-text-white'
+      default: 'pulse:text-white pulse:hover:text-white',
+      error: 'pulse:text-neutral-700 pulse:hover:text-neutral-700',
+      success: 'pulse:text-white pulse:hover:text-white'
     }.freeze
 
     THEME_MAPPINGS = {
-      default: 'pulse-bg-gray-700 pulse-text-white',
-      error: 'pulse-bg-error-100 pulse-text-gray-900',
-      success: 'pulse-bg-gray-700 pulse-text-white'
+      default: 'pulse:bg-neutral-700 pulse:text-white',
+      error: 'pulse:bg-error-100 pulse:text-neutral-900',
+      success: 'pulse:bg-neutral-700 pulse:text-white'
     }.freeze
     DEFAULT_THEME = :default
 
@@ -47,14 +49,14 @@ module Pulse
     def class_attributes
       merge_classes(
         @system_arguments[:classes],
-        # 'pulse-hidden',
-        'pulse-pl-8',
-        'pulse-pr-4',
-        'pulse-py-2.5',
-        'pulse-mb-4',
-        'pulse-rounded',
-        'pulse-shadow-toast',
-        'pulse-z-100',
+        # 'pulse:hidden',
+        'pulse:pl-8',
+        'pulse:pr-4',
+        'pulse:py-2.5',
+        'pulse:mb-4',
+        'pulse:rounded',
+        'pulse:shadow-md',
+        'pulse:z-100',
         THEME_MAPPINGS[@theme]
       )
     end
@@ -65,15 +67,15 @@ module Pulse
         {
           controller: 'pulse--toast',
           pulse__toast_auto_hide_value: @auto_hide,
-          transition_enter: 'pulse-transition pulse-ease-out ' \
-                            'pulse-duration-500',
-          transition_enter_start: 'pulse-transform pulse-opacity-0 ' \
-                                  'pulse-translate-y-full',
-          transition_enter_end: 'pulse-transform pulse-opacity-100 ' \
-                                'pulse-translate-y-0',
-          transition_leave: 'pulse-transition pulse-ease-in pulse-duration-200',
-          transition_leave_start: 'pulse-transform pulse-opacity-100',
-          transition_leave_end: 'pulse-transform pulse-opacity-0'
+          transition_enter: 'pulse:transition pulse:ease-out ' \
+                            'pulse:duration-500',
+          transition_enter_start: 'pulse:transform pulse:opacity-0 ' \
+                                  'pulse:translate-y-full',
+          transition_enter_end: 'pulse:transform pulse:opacity-100 ' \
+                                'pulse:translate-y-0',
+          transition_leave: 'pulse:transition pulse:ease-in pulse:duration-200',
+          transition_leave_start: 'pulse:transform pulse:opacity-100',
+          transition_leave_end: 'pulse:transform pulse:opacity-0'
         }
       )
     end

data/app/lib/pulse/status.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Declares how complete a component is, following Primer's component
+  # lifecycle. Components are `:alpha` until they declare otherwise, so a new
+  # component is never presented as safe by accident.
+  #
+  # - `:alpha`  Incomplete. Options or features may be broken, unstyled, or
+  #             missing, and the API may change without notice.
+  # - `:beta`   Core usage works. Some documented options are not implemented.
+  # - `:stable` Complete and safe to use.
+  # - `:deprecated` Scheduled for removal.
+  #
+  # ```ruby
+  # class Pulse::Thing < Pulse::Component
+  #   status :beta
+  # end
+  #
+  # Pulse::Thing.status # => :beta
+  # ```
+  module Status
+    extend ActiveSupport::Concern
+
+    STATUSES = [:alpha, :beta, :stable, :deprecated].freeze
+    DEFAULT_STATUS = :alpha
+
+    included do
+      # Set once while each class body loads, never at request time.
+      # rubocop:disable-next ThreadSafety/ClassAndModuleAttributes
+      class_attribute :component_status, instance_writer: false,
+                                         default: DEFAULT_STATUS
+    end
+
+    class_methods do
+      def status(value = nil)
+        return component_status if value.nil?
+
+        unless STATUSES.include?(value)
+          raise ArgumentError,
+                "Unknown status #{value.inspect}. Use one of " \
+                "#{STATUSES.to_sentence}."
+        end
+
+        self.component_status = value
+      end
+    end
+  end
+end

data/lib/pulse/view_components/version.rb

@@ -5,7 +5,7 @@ module Pulse
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 3
+      MINOR = 4
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join('.')

data/previews/foundations/colors_preview/palettes.html.slim

@@ -0,0 +1,12 @@
+div class="pulse:flex pulse:flex-col pulse:gap-6"
+  p class="pulse:text-sm pulse:text-neutral-600"
+    ' Primitive palettes have no utility classes. Reach them through a semantic name.
+  - palettes.each do |name, swatches|
+    section
+      h2 class="pulse:mb-2 pulse:text-lg pulse:font-bold pulse:text-neutral-900"
+        code class="pulse:font-mono" = name
+      div class="pulse:grid pulse:grid-cols-10 pulse:gap-1"
+        - swatches.each do |swatch|
+          div class="pulse:flex pulse:flex-col pulse:justify-end pulse:h-20 pulse:p-2 pulse:rounded pulse:text-xs pulse:font-mono" style="background-color: #{swatch.hex}; color: #{swatch.ink}" title="#{name}-#{swatch.shade}"
+            span = swatch.shade
+            span = swatch.hex

data/previews/foundations/colors_preview/semantic.html.slim

@@ -0,0 +1,16 @@
+div class="pulse:flex pulse:flex-col pulse:gap-6"
+  - semantic.each do |name, (palette, default_shade)|
+    section
+      h2 class="pulse:text-lg pulse:font-bold pulse:text-neutral-900"
+        = name
+      p class="pulse:mb-2 pulse:text-sm pulse:text-neutral-600"
+        ' Maps to
+        code class="pulse:font-mono" = palette
+        ' . Bare
+        code class="pulse:font-mono" = "pulse:bg-#{name}"
+        |  is shade #{default_shade}.
+      div class="pulse:grid pulse:grid-cols-10 pulse:gap-1"
+        - palettes.fetch(palette).each do |swatch|
+          div class=class_names('pulse:flex pulse:flex-col pulse:justify-end pulse:h-20 pulse:p-2 pulse:rounded pulse:text-xs pulse:font-mono', 'pulse:ring-2 pulse:ring-offset-2 pulse:ring-neutral-900' => swatch.shade == default_shade) style="background-color: #{swatch.hex}; color: #{swatch.ink}" title="#{name}-#{swatch.shade}"
+            span = "#{name}-#{swatch.shade}"
+            span = swatch.hex

data/previews/foundations/colors_preview.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Foundations
+  # Reads the token stylesheets rather than the built CSS, because Tailwind
+  # only emits the theme variables that some class uses.
+  #
+  # @label Colors
+  class ColorsPreview < ViewComponent::Preview
+    Swatch = Data.define(:shade, :hex) do
+      # Dark text on light swatches, using relative luminance.
+      def ink
+        r, g, b = hex.delete('#').scan(/../).map { it.to_i(16) / 255.0 }
+        luminance = (0.2126 * r) + (0.7152 * g) + (0.0722 * b)
+        luminance > 0.55 ? '#111827' : '#ffffff'
+      end
+    end
+
+    TOKENS_PATH = Pulse::ViewComponents::Engine.root.join(
+      'app/assets/stylesheets/pulse_view_components'
+    )
+    PALETTE_PATTERN = /--palette-([a-z-]+)-(\d+):\s*(#\h{6});/
+    SEMANTIC_PATTERN = /--color-([a-z]+):\s*--theme\(--palette-([a-z-]+)-(\d+)/
+
+    # @label Semantic
+    def semantic
+      render_with_template(
+        locals: { semantic: semantic_tokens, palettes: palette_tokens }
+      )
+    end
+
+    # @label Palettes
+    def palettes
+      render_with_template(locals: { palettes: palette_tokens })
+    end
+
+    private
+
+    # { 'coral-red' => [Swatch('50', '#ffecec'), ...], ... }
+    def palette_tokens
+      TOKENS_PATH.join('tokens.primitives.css').read
+                 .scan(PALETTE_PATTERN)
+                 .group_by(&:first)
+                 .transform_values do |rows|
+                   rows.map { |_, shade, hex| Swatch.new(shade:, hex:) }
+                 end
+    end
+
+    # { 'primary' => ['coral-red', '700'], ... }
+    def semantic_tokens
+      TOKENS_PATH.join('tokens.system.css').read
+                 .scan(SEMANTIC_PATTERN)
+                 .to_h { |name, palette, shade| [name, [palette, shade]] }
+    end
+  end
+end