primer_view_components 0.0.13 → 0.0.18

data/app/components/primer/state_component.rb

@@ -8,19 +8,19 @@ module Primer
       COLOR_DEFAULT => "",
       :green => "State--green",
       :red => "State--red",
-      :purple => "State--purple",
+      :purple => "State--purple"
     }.freeze
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
-      :small => "State--small",
+      :small => "State--small"
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
+    TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
 
     # @example 40|Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>

data/app/components/primer/subhead_component.rb

@@ -67,6 +67,7 @@ module Primer
       heading.present?
     end
 
+    # :nodoc
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
@@ -85,6 +86,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
@@ -98,6 +100,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Description < ViewComponent::Slot
       include ClassNameHelper
 

data/app/components/primer/timeline_item_component.rb

@@ -36,6 +36,7 @@ module Primer
       avatar.present? || badge.present? || body.present?
     end
 
+    # :nodoc
     class Avatar < Primer::Slot
       attr_reader :system_arguments, :alt, :src, :size, :square
 
@@ -59,6 +60,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Badge < Primer::Slot
       attr_reader :system_arguments, :icon
 
@@ -76,6 +78,7 @@ module Primer
       end
     end
 
+    # :nodoc
     class Body < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/tooltip_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Primer
+  # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
+  class TooltipComponent < Primer::Component
+    DIRECTION_DEFAULT = :n
+    ALIGN_DEFAULT = :default
+    MULTILINE_DEFAULT = false
+    DELAY_DEFAULT = false
+
+    ALIGN_MAPPING = {
+      ALIGN_DEFAULT => "",
+      :left_1 => "tooltipped-align-left-1",
+      :right_1 => "tooltipped-align-right-1",
+      :left_2 => "tooltipped-align-left-2",
+      :right_2 => "tooltipped-align-right-2"
+    }.freeze
+
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT] + %i[
+      nw
+      ne
+      w
+      e
+      sw
+      s
+      se
+    ]
+
+    # @example 100|Default
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
+    #   </div>
+    #
+    # @example 100|Wrapping another component
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
+    #     <% end %>
+    #   </div>
+    #
+    # @example 100|With a direction
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
+    #   </div>
+    #
+    # @example 100|With an alignment
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
+    #   </div>
+    #
+    # @example 100|Without a delay
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
+    #   </div>
+    #
+    # @param label [String] the text to appear in the tooltip
+    # @param direction [String] Direction of the tooltip. <%= one_of(Primer::TooltipComponent::DIRECTION_OPTIONS) %>
+    # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::TooltipComponent::ALIGN_MAPPING.keys) %>
+    # @param multiline [Boolean] Use this when you have long content
+    # @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      label:,
+      direction: DIRECTION_DEFAULT,
+      align: ALIGN_DEFAULT,
+      multiline: MULTILINE_DEFAULT,
+      no_delay: DELAY_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span
+      @system_arguments[:aria] = { label: label }
+
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "tooltipped",
+        "tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
+        "tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
+        "tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/truncate_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use TruncateComponent to shorten overflowing text with an ellipsis.
+  class TruncateComponent < Primer::Component
+    # @example 25|Default
+    #   <div class="col-2">
+    #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #   </div>
+    #
+    # @example 25|Inline
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example 25|Expandable
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example 25|Custom size
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #
+    # @param inline [Boolean] Whether the element is inline (or inline-block).
+    # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
+    # @param max_width [Integer] Sets the max-width of the text.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(inline: false, expandable: false, max_width: nil, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "css-truncate",
+        "css-truncate-overflow" => !inline,
+        "css-truncate-target" => inline,
+        "expandable" => inline && expandable
+      )
+      @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/underline_nav_component.rb

@@ -1,12 +1,37 @@
 # frozen_string_literal: true
 
 module Primer
+  # Use the UnderlineNav component to style navigation with a minimal
+  # underlined selected state, typically used for navigation placed at the top
+  # of the page.
   class UnderlineNavComponent < Primer::Component
     ALIGN_DEFAULT = :left
-    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right]
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
     with_content_areas :body, :actions
 
+    # @example 70|Default
+    #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
+    #     <% component.with(:body) do %>
+    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% end %>
+    #     <% component.with(:actions) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example 70|Align right
+    #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
+    #     <% component.with(:body) do %>
+    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% end %>
+    #     <% component.with(:actions) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(align: ALIGN_DEFAULT, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
 

data/app/components/primer/view_components.rb

@@ -15,6 +15,7 @@ require "octicons_helper/helper"
 require "primer/class_name_helper"
 require "primer/classify"
 require "primer/fetch_or_fallback_helper"
+require "primer/join_style_arguments_helper"
 
 # Base configurations
 
@@ -30,6 +31,8 @@ require_relative "border_box_component"
 require_relative "box_component"
 require_relative "breadcrumb_component"
 require_relative "button_component"
+require_relative "button_group_component"
+require_relative "button_marketing_component"
 require_relative "counter_component"
 require_relative "details_component"
 require_relative "dropdown_menu_component"
@@ -48,4 +51,6 @@ require_relative "state_component"
 require_relative "subhead_component"
 require_relative "text_component"
 require_relative "timeline_item_component"
+require_relative "tooltip_component"
+require_relative "truncate_component"
 require_relative "underline_nav_component"

data/lib/primer/class_name_helper.rb

@@ -4,6 +4,7 @@
 #
 # Helps build a list of conditional class names
 module Primer
+  # :nodoc:
   module ClassNameHelper
     def class_names(*args)
       classes = []

data/lib/primer/classify.rb

@@ -1,18 +1,19 @@
 # frozen_string_literal: true
 
 module Primer
+  # :nodoc:
   class Classify
-    MARGIN_DIRECTION_KEYS = [:mt, :ml, :mb, :mr]
-    SPACING_KEYS = ([:m, :my, :mx, :p, :py, :px, :pt, :pl, :pb, :pr] + MARGIN_DIRECTION_KEYS).freeze
+    MARGIN_DIRECTION_KEYS = %i[mt ml mb mr].freeze
+    SPACING_KEYS = (%i[m my mx p py px pt pl pb pr] + MARGIN_DIRECTION_KEYS).freeze
     DIRECTION_KEY = :direction
     JUSTIFY_CONTENT_KEY = :justify_content
     ALIGN_ITEMS_KEY = :align_items
     DISPLAY_KEY = :display
     RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
-    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"]
+    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
+    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
       (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
@@ -21,7 +22,7 @@ module Primer
     BG_KEY = :bg
     VERTICAL_ALIGN_KEY = :vertical_align
     WORD_BREAK_KEY = :word_break
-    TEXT_KEYS = [:text_align, :font_weight]
+    TEXT_KEYS = %i[text_align font_weight].freeze
     FLEX_KEY = :flex
     FLEX_GROW_KEY = :flex_grow
     FLEX_SHRINK_KEY = :flex_shrink
@@ -29,20 +30,21 @@ module Primer
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
-
+    VISIBILITY_KEY = :visibility
+    ANIMATION_KEY = :animation
 
     BOOLEAN_MAPPINGS = {
       underline: {
         mappings: [
           {
             value: true,
-            css_class: "text-underline",
+            css_class: "text-underline"
           },
           {
             value: false,
-            css_class: "no-underline",
-          },
-        ],
+            css_class: "no-underline"
+          }
+        ]
       },
       top: {
         mappings: [
@@ -77,8 +79,9 @@ module Primer
         ]
       }
     }.freeze
-    BORDER_KEYS = [:border, :border_color].freeze
-    BORDER_MARGIN_KEYS = [:border_top, :border_bottom, :border_left, :border_right].freeze
+    BORDER_KEYS = %i[border border_color].freeze
+    BORDER_MARGIN_KEYS = %i[border_top border_bottom border_left border_right].freeze
+    BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
       CONCAT_KEYS +
@@ -88,6 +91,7 @@ module Primer
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       [
+        BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
         DISPLAY_KEY,
@@ -102,7 +106,9 @@ module Primer
         ALIGN_SELF_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
-        BOX_SHADOW_KEY
+        BOX_SHADOW_KEY,
+        VISIBILITY_KEY,
+        ANIMATION_KEY
       ]
     ).freeze
 
@@ -110,30 +116,31 @@ module Primer
       def call(classes: "", style: nil, **args)
         extracted_results = extract_hash(args)
 
-        {
-          class: [validated_class_names(classes), extracted_results[:classes]].compact.join(" ").presence,
-          style: [extracted_results[:styles], style].compact.join("").presence,
-        }.merge(extracted_results.except(:classes, :styles))
+        extracted_results[:class] = [
+          validated_class_names(classes),
+          extracted_results.delete(:classes)
+        ].compact.join(" ").presence
+
+        extracted_results[:style] = [
+          extracted_results.delete(:styles),
+          style
+        ].compact.join("").presence
+
+        extracted_results
       end
 
       private
 
       def validated_class_names(classes)
-        return unless classes.present?
+        return if classes.blank?
 
         if ENV["RAILS_ENV"] == "development"
           invalid_class_names =
             classes.split(" ").each_with_object([]) do |class_name, memo|
-              if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
-                memo << class_name
-              end
+              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
             end
 
-          if invalid_class_names.any?
-            raise ArgumentError.new(
-              "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production.",
-            )
-          end
+          raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production." if invalid_class_names.any?
         end
 
         classes
@@ -151,96 +158,111 @@ module Primer
       # Example usage:
       # extract_hash({ mt: 4, py: 2 }) => "mt-4 py-2"
       def extract_hash(styles_hash)
-        out = styles_hash.each_with_object({ classes: [], styles: [] }) do |(key, value), memo|
+        memo = { classes: [], styles: +"" }
+        styles_hash.each do |key, value|
           next unless VALID_KEYS.include?(key)
 
-          if value.is_a?(Array) && !RESPONSIVE_KEYS.include?(key)
-            raise ArgumentError, "#{key} does not support responsive values"
+          if value.is_a?(Array)
+            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
+
+            value.each_with_index do |val, index|
+              extract_value(memo, key, val, BREAKPOINTS[index])
+            end
+          else
+            extract_value(memo, key, value, BREAKPOINTS[0])
           end
+        end
 
-          Array(value).each_with_index do |val, index|
-            next if val.nil?
+        memo[:classes] = memo[:classes].join(" ")
 
-            if SPACING_KEYS.include?(key)
-              if MARGIN_DIRECTION_KEYS.include?(key)
-                raise ArgumentError, "value of #{key} must be between -6 and 6" if (val < -6 || val > 6)
-              elsif !((key == :mx || key == :my) && val == :auto)
-                raise ArgumentError, "value of #{key} must be between 0 and 6" if (val < 0 || val > 6)
-              end
-            end
+        memo
+      end
 
-            dasherized_val = val.to_s.dasherize
-            breakpoint = BREAKPOINTS[index]
-
-            if BOOLEAN_MAPPINGS.has_key?(key)
-              BOOLEAN_MAPPINGS[key][:mappings].map { |m| m[:css_class] if m[:value] == val }.compact.each do |css_class|
-                memo[:classes] << css_class
-              end
-            elsif key == BG_KEY
-              if val.to_s.starts_with?("#")
-                memo[:styles] << "background-color: #{val};"
-              else
-                memo[:classes] << "bg-#{dasherized_val}"
-              end
-            elsif key == COLOR_KEY
-              if val.to_s.chars.last !~ /\D/
-                memo[:classes] << "color-#{dasherized_val}"
-              else
-                memo[:classes] << "text-#{dasherized_val}"
-              end
-            elsif key == DISPLAY_KEY
-              memo[:classes] << "d#{breakpoint}-#{dasherized_val}"
-            elsif key == VERTICAL_ALIGN_KEY
-              memo[:classes] << "v-align-#{dasherized_val}"
-            elsif key == WORD_BREAK_KEY
-              memo[:classes] << "wb-#{dasherized_val}"
-            elsif BORDER_KEYS.include?(key)
-              memo[:classes] << "border-#{dasherized_val}"
-            elsif BORDER_MARGIN_KEYS.include?(key)
-              memo[:classes] << "#{key.to_s.dasherize}-#{val}"
-            elsif key == DIRECTION_KEY
-              memo[:classes] << "flex#{breakpoint}-#{dasherized_val}"
-            elsif key == JUSTIFY_CONTENT_KEY
-              formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
-              memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
-            elsif key == ALIGN_ITEMS_KEY
-              memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub("flex_", "")}"
-            elsif key == FLEX_KEY
-              memo[:classes] << "flex-#{val}"
-            elsif key == FLEX_GROW_KEY
-              memo[:classes] << "flex-grow-#{val}"
-            elsif key == FLEX_SHRINK_KEY
-              memo[:classes] << "flex-shrink-#{val}"
-            elsif key == ALIGN_SELF_KEY
-              memo[:classes] << "flex-self-#{val}"
-            elsif key == WIDTH_KEY || key == HEIGHT_KEY
-              if val == :fit || val == :fill
-                memo[:classes] << "#{key}-#{val}"
-              else
-                memo[key] = val
-              end
-            elsif TEXT_KEYS.include?(key)
-              memo[:classes] << "text-#{dasherized_val}"
-            elsif TYPOGRAPHY_KEYS.include?(key)
-              memo[:classes] << "f#{dasherized_val}"
-            elsif MARGIN_DIRECTION_KEYS.include?(key) && val < 0
-              memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
-            elsif key == BOX_SHADOW_KEY
-              if val == true
-                memo[:classes] << "box-shadow"
-              else
-                memo[:classes] << "box-shadow-#{dasherized_val}"
-              end
-            else
-              memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
-            end
+      def extract_value(memo, key, val, breakpoint)
+        return if val.nil?
+
+        if SPACING_KEYS.include?(key)
+          if MARGIN_DIRECTION_KEYS.include?(key)
+            raise ArgumentError, "value of #{key} must be between -6 and 6" if val < -6 || val > 6
+          elsif !((key == :mx || key == :my) && val == :auto)
+            raise ArgumentError, "value of #{key} must be between 0 and 6" if val.negative? || val > 6
           end
         end
 
-        {
-          classes: out[:classes].join(" "),
-          styles: out[:styles].join(" ")
-        }.merge(out.except(:classes, :styles))
+        if BOOLEAN_MAPPINGS.key?(key)
+          BOOLEAN_MAPPINGS[key][:mappings].map { |m| m[:css_class] if m[:value] == val }.compact.each do |css_class|
+            memo[:classes] << css_class
+          end
+        elsif key == BG_KEY
+          if val.to_s.starts_with?("#")
+            memo[:styles] << "background-color: #{val};"
+          else
+            memo[:classes] << "bg-#{val.to_s.dasherize}"
+          end
+        elsif key == COLOR_KEY
+          char_code = val[-1].ord
+          # Does this string end in a character that is NOT a number?
+          memo[:classes] << if char_code >= 48 && char_code <= 57 # 48 is the charcode for 0; 57 is the charcode for 9
+                              "color-#{val.to_s.dasherize}"
+                            else
+                              "text-#{val.to_s.dasherize}"
+                            end
+        elsif key == DISPLAY_KEY
+          memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
+        elsif key == VERTICAL_ALIGN_KEY
+          memo[:classes] << "v-align-#{val.to_s.dasherize}"
+        elsif key == WORD_BREAK_KEY
+          memo[:classes] << "wb-#{val.to_s.dasherize}"
+        elsif BORDER_KEYS.include?(key)
+          memo[:classes] << "border-#{val.to_s.dasherize}"
+        elsif BORDER_MARGIN_KEYS.include?(key)
+          memo[:classes] << "#{key.to_s.dasherize}-#{val}"
+        elsif key == BORDER_RADIUS_KEY
+          memo[:classes] << "rounded-#{val}"
+        elsif key == DIRECTION_KEY
+          memo[:classes] << "flex#{breakpoint}-#{val.to_s.dasherize}"
+        elsif key == JUSTIFY_CONTENT_KEY
+          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
+        elsif key == ALIGN_ITEMS_KEY
+          memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
+        elsif key == FLEX_KEY
+          memo[:classes] << "flex-#{val}"
+        elsif key == FLEX_GROW_KEY
+          memo[:classes] << "flex-grow-#{val}"
+        elsif key == FLEX_SHRINK_KEY
+          memo[:classes] << "flex-shrink-#{val}"
+        elsif key == ALIGN_SELF_KEY
+          memo[:classes] << "flex-self-#{val}"
+        elsif key == WIDTH_KEY || key == HEIGHT_KEY
+          if val == :fit || val == :fill
+            memo[:classes] << "#{key}-#{val}"
+          else
+            memo[key] = val
+          end
+        elsif TEXT_KEYS.include?(key)
+          memo[:classes] << "text-#{val.to_s.dasherize}"
+        elsif TYPOGRAPHY_KEYS.include?(key)
+          memo[:classes] << "f#{val.to_s.dasherize}"
+        elsif MARGIN_DIRECTION_KEYS.include?(key) && val.negative?
+          memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
+        elsif key == BOX_SHADOW_KEY
+          memo[:classes] << if val == true
+                              "box-shadow"
+                            else
+                              "box-shadow-#{val.to_s.dasherize}"
+                            end
+        elsif key == VISIBILITY_KEY
+          memo[:classes] << "v-#{val.to_s.dasherize}"
+        elsif key == ANIMATION_KEY
+          memo[:classes] << if val == :grow
+                              "hover-grow"
+                            else
+                              "anim-#{val.to_s.dasherize}"
+                            end
+        else
+          memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
+        end
       end
     end
   end