fix(Stack): rewrite responsive arg logic

Co-authored-by: Cameron Dutro <camertron@gmail.com>

app/components/primer/alpha/stack.rb

@@ -20,7 +20,7 @@ class JustifyArg < Primer::ResponsiveArg
         OPTIONS = MAPPING.keys.freeze
 
         def initialize(values)
-          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT).map do |value|
+          @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT) do |value|
             MAPPING[value]
           end
         end

app/components/primer/responsive_arg.rb

@@ -3,12 +3,13 @@
 module Primer
   # Base class for responsive Stack and StackItem arguments. Used internally.
   class ResponsiveArg
+    # TODO: rewrite
     # 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]
+    # { "justify-narrow" => "start" }. 
+    BREAKPOINTS = [:narrow, :regular, :wide].freeze
 
     include FetchOrFallbackHelper
 
@@ -37,16 +38,26 @@ def to_data_attributes
     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
+      if values.is_a?(Hash)
+        values.slice(*BREAKPOINTS).each_with_object({}) do |(key, value), memo|
+          next unless value
+          property_with_breakpoint = "#{property}-#{key}"
+          memo[property_with_breakpoint] = value
+        end
+      else
+        {property => values}
       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)
+    def fetch_or_fallback_all(options, values, default)
+      if values.is_a?(Hash)
+        values.each_with_object({}) do |(key, value), memo|
+          value = block_given? ? yield(value) : value
+          memo[key] = fetch_or_fallback(options, value, default)
+        end
+      else
+        value = block_given? ? yield(values) : values
+        fetch_or_fallback(options, value, default)
       end
     end
 

previews/primer/alpha/stack_item_preview.rb

@@ -25,16 +25,16 @@ def playground(
         render_with_template(locals: {
           system_arguments: {
             tag: tag,
-            grow: [
-              grow,
-              grow_narrow,
-              grow_regular,
-              grow_wide,
-              grow_wide
-            ]
+            grow: get_control_values(grow, grow_narrow, grow_regular, grow_wide)
           }
         })
       end
+
+      private
+
+      def get_control_values(normal, narrow, regular, wide)
+        [narrow, regular, wide].any? ? {narrow:, regular:, wide:} : normal
+      end
     end
   end
 end

previews/primer/alpha/stack_preview.rb

@@ -69,56 +69,26 @@ def playground(
           system_arguments: {
             tag: tag,
 
-            justify: [
-              justify,
-              justify_narrow,
-              justify_regular,
-              justify_wide,
-              justify_wide
-            ],
+            justify: get_control_values(justify, justify_narrow, justify_regular, justify_wide),
 
-            gap: [
-              gap,
-              gap_narrow,
-              gap_regular,
-              gap_wide,
-              gap_wide
-            ],
+            gap: get_control_values(gap, gap_narrow, gap_regular, gap_wide),
 
-            direction: [
-              direction,
-              direction_narrow,
-              direction_regular,
-              direction_wide,
-              direction_wide
-            ],
+            direction: get_control_values(direction, direction_narrow, direction_regular, direction_wide),
 
-            wrap: [
-              wrap,
-              wrap_narrow,
-              wrap_regular,
-              wrap_wide,
-              wrap_wide
-            ],
+            wrap: get_control_values(wrap, wrap_narrow, wrap_regular, wrap_wide),
 
-            padding: [
-              padding,
-              padding_narrow,
-              padding_regular,
-              padding_wide,
-              padding_wide
-            ],
+            padding: get_control_values(padding, padding_narrow, padding_regular, padding_wide),
 
-            align: [
-              align,
-              align_narrow,
-              align_regular,
-              align_wide,
-              align_wide
-            ],
+            align: get_control_values(align, align_narrow, align_regular, align_wide),
           }
         })
       end
+
+      private
+
+      def get_control_values(normal, narrow, regular, wide)
+        [narrow, regular, wide].any? ? : {narrow:, regular:, wide:} : normal
+      end
     end
   end
 end