pulse_view_components 0.3.0 → 0.4.0

data/previews/pulse/action_list_preview.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Pulse
+  # @label ActionList (alpha)
+  class ActionListPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param title text
+    # @param subtitle text
+    # @param heading_level select [1, 2, 3, 4, 5, 6]
+    # @param show_dividers toggle
+    def default(title: 'Account', subtitle: nil, heading_level: 3,
+                show_dividers: false)
+      render(Pulse::ActionList.new(show_dividers:)) do |list|
+        list.with_heading(title:, subtitle: subtitle.presence,
+                          heading_level: heading_level.to_i)
+        list.with_item(label: 'Profile', href: '#')
+        list.with_item(label: 'Notifications', href: '#')
+        list.with_item(label: 'Security', href: '#')
+      end
+    end
+
+    # @label Leading visuals
+    def leading_visuals
+      render(Pulse::ActionList.new) do |list|
+        list.with_item(label: 'Profile', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :person)
+        end
+        list.with_item(label: 'Notifications', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :bell)
+        end
+        list.with_item(label: 'Security', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :key)
+        end
+      end
+    end
+
+    # @label Trailing visuals
+    def trailing_visuals
+      render(Pulse::ActionList.new) do |list|
+        list.with_item(label: 'Members', href: '#') do |item|
+          item.with_trailing_visual_counter(count: 12)
+        end
+        list.with_item(label: 'Starred', href: '#') do |item|
+          item.with_trailing_visual_icon(icon: :star)
+        end
+        list.with_item(label: 'Search', href: '#') do |item|
+          item.with_trailing_visual_text('⌘K')
+        end
+      end
+    end
+
+    # @label Descriptions
+    def descriptions
+      render(Pulse::ActionList.new) do |list|
+        list.with_item(label: 'Edit', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :pencil)
+          item.with_description { 'Change the name and details' }
+        end
+        list.with_item(label: 'Archive', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :archive)
+          item.with_description { 'Hide from the main list' }
+        end
+      end
+    end
+
+    # @label Dividers
+    def dividers
+      render(Pulse::ActionList.new) do |list|
+        list.with_item(label: 'Profile', href: '#')
+        list.with_item(label: 'Notifications', href: '#')
+        list.with_divider
+        list.with_item(label: 'Sign out', href: '#')
+      end
+    end
+  end
+end

data/previews/pulse/border_box_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pulse
-  # @label BorderBox
+  # @label BorderBox (beta)
   class BorderBoxPreview < ViewComponent::Preview
     # @label Default
     def default

data/previews/pulse/counter_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pulse
-  # @label Counter
+  # @label Counter (alpha)
   class CounterPreview < ViewComponent::Preview
     # @label Playground
     #

data/previews/pulse/flash_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pulse
-  # @label Flash
+  # @label Flash (beta)
   class FlashPreview < ViewComponent::Preview
     # @label Playground
     #

data/previews/pulse/forms/error_explanation_preview.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Pulse
+  module Forms
+    # @label ErrorExplanation
+    class ErrorExplanationPreview < ViewComponent::Preview
+      # Previews ship in the gem, so they can't use a host app model.
+      class SampleRecord
+        include ActiveModel::Model
+
+        attr_accessor :title, :description
+
+        validates :title, presence: true
+        validates :description, length: { minimum: 20 }
+
+        def self.model_name
+          ActiveModel::Name.new(self, nil, 'Project')
+        end
+      end
+
+      # @label Playground
+      #
+      # The component renders nothing once both fields are valid.
+      #
+      # @param title text
+      # @param description text
+      def default(title: '', description: 'Too short')
+        render(Pulse::Forms::ErrorExplanation.new(
+                 resource: invalid_record(title:, description:)
+               ))
+      end
+
+      # @label Single error
+      def single_error
+        render(Pulse::Forms::ErrorExplanation.new(
+                 resource: invalid_record(
+                   title: '', description: 'A description that is long enough'
+                 )
+               ))
+      end
+
+      private
+
+      def invalid_record(**attributes)
+        SampleRecord.new(**attributes).tap(&:validate)
+      end
+    end
+  end
+end

data/previews/pulse/layout_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pulse
-  # @label Layout
+  # @label Layout (beta)
   class LayoutPreview < ViewComponent::Preview
     # @label Playground
     # @param first_in_source [Symbol] select [sidebar, main]
@@ -10,10 +10,10 @@ module Pulse
       render(
         Pulse::Layout.new(gutter:, first_in_source:)
       ) do |component|
-        component.with_main(classes: 'pulse-bg-blue-50') do
+        component.with_main(classes: 'pulse:bg-blue-50') do
           'Main content'
         end
-        component.with_sidebar(classes: 'pulse-bg-gray-50') do
+        component.with_sidebar(classes: 'pulse:bg-neutral-50') do
           'Sidebar content'
         end
       end
@@ -22,10 +22,10 @@ module Pulse
     # @label Default
     def default
       render(Pulse::Layout.new) do |component|
-        component.with_main(classes: 'pulse-bg-blue-50') do
+        component.with_main(classes: 'pulse:bg-blue-50') do
           'Main content'
         end
-        component.with_sidebar(classes: 'pulse-bg-gray-50') do
+        component.with_sidebar(classes: 'pulse:bg-neutral-50') do
           'Sidebar content'
         end
       end

data/previews/pulse/nav_list_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pulse
-  # @label NavList
+  # @label NavList (alpha)
   class NavListPreview < ViewComponent::Preview
     # @label default
     def default

data/previews/pulse/popover_preview.rb

@@ -5,7 +5,7 @@ module Pulse
   class PopoverPreview < ViewComponent::Preview
     # @label Playground
     #
-    # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
+    # @param caret [Symbol] select {{ Pulse::Popover::CARET_OPTIONS }}
     def playground(caret: :top)
       render Pulse::Popover.new do |component|
         component.with_heading do
@@ -19,7 +19,7 @@ module Pulse
 
     # @label Default
     #
-    # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
+    # @param caret [Symbol] select {{ Pulse::Popover::CARET_OPTIONS }}
     def default(caret: :top)
       render Pulse::Popover.new do |component|
         component.with_heading do
@@ -41,37 +41,63 @@ module Pulse
     end
 
     # @!group Directions
-    def bottom_right
-      render Pulse::Popover.new do |component|
-        component.with_body(caret: :bottom_right) do
-          'This is the Popover body.'
-        end
-      end
+    def top
+      popover_with_caret(:top)
+    end
+
+    def top_left
+      popover_with_caret(:top_left)
     end
 
     def top_right
-      render Pulse::Popover.new do |component|
-        component.with_body(caret: :top_right) do
-          'This is the Popover body.'
-        end
-      end
+      popover_with_caret(:top_right)
+    end
+
+    def bottom
+      popover_with_caret(:bottom)
     end
 
     def bottom_left
-      render Pulse::Popover.new do |component|
-        component.with_body(caret: :bottom_left) do
-          'This is the Popover body.'
-        end
-      end
+      popover_with_caret(:bottom_left)
     end
 
-    def top_left
-      render Pulse::Popover.new do |component|
-        component.with_body(caret: :top_left) do
+    def bottom_right
+      popover_with_caret(:bottom_right)
+    end
+
+    def left
+      popover_with_caret(:left)
+    end
+
+    def left_top
+      popover_with_caret(:left_top)
+    end
+
+    def left_bottom
+      popover_with_caret(:left_bottom)
+    end
+
+    def right
+      popover_with_caret(:right)
+    end
+
+    def right_top
+      popover_with_caret(:right_top)
+    end
+
+    def right_bottom
+      popover_with_caret(:right_bottom)
+    end
+    # @!endgroup
+
+    private
+
+    def popover_with_caret(caret)
+      render Pulse::Popover.new(classes: 'pulse:m-8') do |component|
+        component.with_body(caret:) do
           'This is the Popover body.'
         end
       end
     end
-    # @!endgroup
   end
 end

data/previews/pulse/progress_bar_preview.rb

@@ -6,7 +6,7 @@ module Pulse
     # @label Playground
     #
     # @display wrapper true
-    # @display wrapper_classes 'flex justify-center items-center p-4 bg-gray-50 h-10 w-24'
+    # @display wrapper_classes 'flex justify-center items-center p-4 bg-neutral-50 h-10 w-24'
     # @param percentage number
     # @param title text
     def playground(percentage: 50, title: nil)

data/previews/pulse/table_preview.rb

@@ -74,7 +74,7 @@ module Pulse
     end
 
     def custom_table_classes
-      render(Pulse::Table.new(COLLECTION, classes: 'pulse-mt-4')) do |c|
+      render(Pulse::Table.new(COLLECTION, classes: 'pulse:mt-4')) do |c|
         c.with_column(title: 'Column 1') do |row|
           row[:column1]
         end
@@ -89,7 +89,7 @@ module Pulse
 
     def custom_head_classes
       render(
-        Pulse::Table.new(COLLECTION, head_classes: 'pulse-bg-secondary-100')
+        Pulse::Table.new(COLLECTION, head_classes: 'pulse:bg-secondary-100')
       ) do |c|
         c.with_column(title: 'Column 1') do |row|
           row[:column1]
@@ -105,7 +105,7 @@ module Pulse
 
     def custom_row_classes
       render(
-        Pulse::Table.new(COLLECTION, row_classes: 'pulse-bg-secondary-50')
+        Pulse::Table.new(COLLECTION, row_classes: 'pulse:bg-secondary-50')
       ) do |c|
         c.with_column(title: 'Column 1') do |row|
           row[:column1]
@@ -124,13 +124,13 @@ module Pulse
         Pulse::Table.new(COLLECTION)
       ) do |c|
         c.with_column(title: 'Column 1',
-                      classes: 'pulse-bg-secondary-50') do |row|
+                      classes: 'pulse:bg-secondary-50') do |row|
           row[:column1]
         end
-        c.with_column(title: 'Column 2', classes: 'pulse-text-primary') do |row|
+        c.with_column(title: 'Column 2', classes: 'pulse:text-primary') do |row|
           row[:column2]
         end
-        c.with_column(classes: 'pulse-font-bold') do |row|
+        c.with_column(classes: 'pulse:font-bold') do |row|
           row[:column3]
         end
       end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pulse_view_components
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Nick Coyne
@@ -55,22 +55,16 @@ dependencies:
   name: tailwind_merge
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 0.10.1
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.0.0
+        version: '1.5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 0.10.1
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.0.0
+        version: '1.5'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -220,11 +214,15 @@ files:
 - app/assets/images/pulse_view_components/icons/zap.svg
 - app/assets/javascripts/pulse_view_components.js
 - app/assets/stylesheets/pulse_view_components/application.tailwind.css
+- app/assets/stylesheets/pulse_view_components/tokens.primitives.css
+- app/assets/stylesheets/pulse_view_components/tokens.system.css
 - app/components/pulse/action_list.css
+- app/components/pulse/action_list.html.slim
 - app/components/pulse/action_list.rb
 - app/components/pulse/action_list/divider.rb
 - app/components/pulse/action_list/form_wrapper.html.slim
 - app/components/pulse/action_list/form_wrapper.rb
+- app/components/pulse/action_list/heading.html.slim
 - app/components/pulse/action_list/heading.rb
 - app/components/pulse/action_list/item.html.slim
 - app/components/pulse/action_list/item.rb
@@ -251,6 +249,7 @@ files:
 - app/components/pulse/flash.rb
 - app/components/pulse/forms/error_explanation.html.slim
 - app/components/pulse/forms/error_explanation.rb
+- app/components/pulse/forms/error_explanation.yml
 - app/components/pulse/icon.rb
 - app/components/pulse/label.html.slim
 - app/components/pulse/label.rb
@@ -270,6 +269,7 @@ files:
 - app/components/pulse/nav_list/group.html.slim
 - app/components/pulse/nav_list/group.rb
 - app/components/pulse/nav_list/heading.rb
+- app/components/pulse/nav_list/item.html.slim
 - app/components/pulse/nav_list/item.rb
 - app/components/pulse/popover.html.slim
 - app/components/pulse/popover.rb
@@ -291,12 +291,17 @@ files:
 - app/javascript/pulse_view_components/application.js
 - app/lib/pulse/attributes_helper.rb
 - app/lib/pulse/fetch_or_fallback_helper.rb
+- app/lib/pulse/status.rb
 - app/lib/pulse/svg_helper.rb
 - lib/pulse/view_components.rb
 - lib/pulse/view_components/engine.rb
 - lib/pulse/view_components/version.rb
 - lib/pulse_view_components.rb
 - lib/tasks/pulse_view_components_tasks.rake
+- previews/foundations/colors_preview.rb
+- previews/foundations/colors_preview/palettes.html.slim
+- previews/foundations/colors_preview/semantic.html.slim
+- previews/pulse/action_list_preview.rb
 - previews/pulse/badge_preview.rb
 - previews/pulse/blank_slate_preview.rb
 - previews/pulse/border_box_preview.rb
@@ -304,6 +309,7 @@ files:
 - previews/pulse/button_preview.rb
 - previews/pulse/counter_preview.rb
 - previews/pulse/flash_preview.rb
+- previews/pulse/forms/error_explanation_preview.rb
 - previews/pulse/icon_preview.rb
 - previews/pulse/label_preview.rb
 - previews/pulse/layout_preview.rb