Improve StackItem previews

app/components/primer/alpha/stack.rb

@@ -7,7 +7,7 @@ class Stack < Primer::Component
       DEFAULT_TAG = :div
 
       # Stack's justify argument. Used internally.
-      class JustifyArg < Primer::Alpha::ResponsiveArg
+      class JustifyArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = :start
         MAPPING = {
@@ -31,7 +31,7 @@ def self.arg_name
       end
 
       # Stack's direction argument. Used internally.
-      class DirectionArg < Primer::Alpha::ResponsiveArg
+      class DirectionArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = :vertical
         OPTIONS = [
@@ -49,7 +49,7 @@ def self.arg_name
       end
 
       # Stack's align argument. Used internally.
-      class AlignArg < Primer::Alpha::ResponsiveArg
+      class AlignArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = :stretch
         OPTIONS = [
@@ -70,7 +70,7 @@ def self.arg_name
       end
 
       # Stack's wrap argument. Used internally.
-      class WrapArg < Primer::Alpha::ResponsiveArg
+      class WrapArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = :nowrap
         OPTIONS = [
@@ -88,7 +88,7 @@ def self.arg_name
       end
 
       # Stack's padding argument. Used internally.
-      class PaddingArg < Primer::Alpha::ResponsiveArg
+      class PaddingArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = :none
         OPTIONS = [
@@ -108,7 +108,7 @@ def self.arg_name
       end
 
       # Stack's gap argument. Used internally.
-      class GapArg < Primer::Alpha::ResponsiveArg
+      class GapArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = nil
         OPTIONS = [

app/components/primer/alpha/stack_item.rb

@@ -7,7 +7,7 @@ class StackItem < Primer::Component
       DEFAULT_TAG = :div
 
       # StackItem's grow argument. Used internally.
-      class GrowArg < Primer::Alpha::ResponsiveArg
+      class GrowArg < Primer::ResponsiveArg
         attr_reader :values
         DEFAULT = false
         OPTIONS = [
@@ -18,6 +18,7 @@ class GrowArg < Primer::Alpha::ResponsiveArg
         def initialize(values)
           @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
         end
+
         def self.arg_name
           :grow
         end

app/components/primer/responsive_arg.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# TODO: should this "live" here?
+module Primer
+  # Base class for responsive Stack and StackItem arguments. Used internally.
+  class ResponsiveArg
+    # The primer/react Stack component defines three breakpoints, but PVC uses five.
+    # We define this array as an index-based mapping between the two systems. The first
+    # element is the default and results in eg. { "justify" => "start" }, while the
+    # other breakpoints result in keys with breakpoint suffixes, eg.
+    # { "justify-narrow" => "start" }.
+    BREAKPOINTS = [nil, :narrow, :regular, :wide, :wide]
+
+    include FetchOrFallbackHelper
+
+    class << self
+      def for(values)
+        cache[[values, arg_name].hash] ||= new(values)
+      end
+
+      private
+
+      def cache
+        Thread.current[:pvc_stack_cache] ||= {}
+      end
+    end
+
+    def arg_name
+      raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
+    end
+
+    def to_data_attributes
+      @data_attributes ||= data_attributes_for(self.class.arg_name, values)
+    end
+
+    private
+
+    def data_attributes_for(property, values)
+      values.take(BREAKPOINTS.size).each_with_object({}).with_index do |(value, memo), i|
+        next unless value
+        property_with_breakpoint = [property, BREAKPOINTS[i]].compact.join("-")
+        memo[property_with_breakpoint] = value
+      end
+    end
+
+    def fetch_or_fallback_all(allowed_values, given_values, default_value)
+      Array(given_values).map do |given_value|
+        fetch_or_fallback(allowed_values, given_value, default_value)
+      end
+    end
+
+    def values
+      raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
+    end
+  end
+end

previews/primer/alpha/stack_item_preview.rb

@@ -4,13 +4,33 @@ module Primer
   module Alpha
     # @label StackItem
     class StackItemPreview < ViewComponent::Preview
+      # @label Default
+      def default
+      end
+
       # @label Playground
       #
+      # @param tag text
       # @param grow toggle
-      def playground(grow: false)
+      # @param grow_narrow toggle
+      # @param grow_regular toggle
+      # @param grow_wide toggle
+      def playground(
+        tag: Primer::Alpha::StackItem::DEFAULT_TAG,
+        grow: Primer::Alpha::StackItem::GrowArg::DEFAULT,
+        grow_narrow: Primer::Alpha::StackItem::GrowArg::DEFAULT,
+        grow_regular: Primer::Alpha::StackItem::GrowArg::DEFAULT,
+        grow_wide: Primer::Alpha::StackItem::GrowArg::DEFAULT
+      )
         render_with_template(locals: {
           system_arguments: {
-            grow: grow
+            grow: [
+              grow,
+              grow_narrow,
+              grow_regular,
+              grow_wide,
+              grow_wide
+            ]
           }
         })
       end

previews/primer/alpha/stack_item_preview/default.html.erb

@@ -0,0 +1,5 @@
+<div class="d-flex border color-border-success-emphasis">
+  <%= render(Primer::Alpha::StackItem.new(border: true, border_color: :danger_emphasis)) do %>
+    Hello, world!
+  <% end %>
+</div>

previews/primer/alpha/stack_item_preview/playground.html.erb

@@ -1,5 +1,11 @@
-<div class="d-flex border color-border-success-emphasis">
-  <%= render(Primer::Alpha::StackItem.new(**system_arguments, border: true, border_color: :danger_emphasis)) do %>
-    Hello, world!
+<div class="d-flex">
+  <%= render(Primer::Alpha::StackItem.new(**system_arguments, p: 3, m: 1, bg: :success, border_radius: 2)) do %>
+    Adjust this item
+  <% end %>
+  <%= render(Primer::Alpha::StackItem.new(p: 3, m: 1, bg: :accent, border_radius: 2)) do %>
+    Fixed width
+  <% end %>
+  <%= render(Primer::Alpha::StackItem.new(p: 3, m: 1, bg: :attention, border_radius: 2)) do %>
+    Fixed width
   <% end %>
 </div>

previews/primer/alpha/stack_preview.rb

@@ -39,7 +39,7 @@ def default
       # @param padding_regular [Symbol] select {{ Primer::Alpha::Stack::PaddingArg::OPTIONS }}
       # @param padding_wide [Symbol] select {{ Primer::Alpha::Stack::PaddingArg::OPTIONS }}
       def playground(
-        tag: :div,
+        tag: Primer::Alpha::StackItem::DEFAULT_TAG,
         justify: Primer::Alpha::Stack::JustifyArg::DEFAULT,
         justify_narrow: Primer::Alpha::Stack::JustifyArg::DEFAULT,
         justify_regular: Primer::Alpha::Stack::JustifyArg::DEFAULT,