primer_view_components 0.0.3 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: adc437081b46691abf1c8946de200196e1ceb5b535aa47e7925c03495ae73f3d
-  data.tar.gz: fbbeda9a022db4a9799daf8c0b509481f0ef57c122ac50c51c487a50445a9d65
+  metadata.gz: 25626f31190d4622e822db5eb8f435f103c0a77668cb78c1db16eec60ac4dfb9
+  data.tar.gz: e551785879e69a0bd7c2ae62a97a39f311dc3dbc415bc5dade637d97fa297910
 SHA512:
-  metadata.gz: 648cb2d8145c520fdf7f3da6af9b4047954343d7311caa7b5579adab5dc67b9ca697815e0f0b9c0f9f8d702edd82f9948fbf14ae3ee9397175aa0f3a8d12ec0e
-  data.tar.gz: 90e55106cc699d69f4473cb2844687b4b77597b85c5038be41acf3f56575f0c7e8dbce27ec7fe407b80b91ee12345bc272d2442b84af8ebf837be4451f0983b8
+  metadata.gz: 6a77219748e0c7018f789df844cd6f6e83159b2fef82a5b81985c277d0427d85442e4e14c6f9934e387afc3f1d2291f31a3d88c9630c8f4910bae992d39a0188
+  data.tar.gz: 15b0b2a9faa1603f57d263a2a6b18f2eb4e1aa325d8c261bfce9f803571ae9a5075b1d51f8a5f3bf31bc7f12662dbe914f7380f71518fe6896b947f2d000757b

data/CHANGELOG.md

@@ -1,5 +1,68 @@
 # main
 
+# 0.0.8
+
+* Add support for border margins, such as: `border_top: 0`.
+
+    *Natasha Umer*
+
+* Add FlashComponent and OcticonComponent.
+
+    *Joel Hawksley*
+
+## Breaking changes
+
+* BlankslateComponent accepts `icon_size` instead of `icon_height`.
+
+    *Joel Hawksley*
+
+# 0.0.7
+
+* Use `octicons_helper` v11.0.0.
+
+    *Joel Hawksley*
+
+# 0.0.6
+
+* Updated the invalid class name error message
+
+    *emplums*
+
+* Updated README with testing instructions
+
+    *emplums*
+
+* Add large and spacious option to BlankslateComponent
+
+    *simurai*
+
+* Add option for `ButtonComponent` to render a `summary` tag
+
+    *Manuel Puyol*
+
+## Breaking changes
+
+* Changed `DetailsComponent` summary and body to be slots
+
+    *Manuel Puyol*
+
+# 0.0.5
+
+* Add support for box_shadow
+* Add components:
+    * Popover
+
+    *Sarah Vessels*
+
+# 0.0.4
+
+* Added support for mx: and my: :auto.
+
+    *Christian Giordano*
+
+* Added support for custom layout sizes.
+
+    *Manuel Puyol*
 # 0.0.3
 
 * Add support for responsive `float` style argument.

data/README.md

@@ -77,10 +77,15 @@ Some components have their own specific arguments, but they can all be styled wi
 | `font_weight`     | `text-<value>` | `font_weight: :bold` → `.text-bold` |
 | `border`     | `border-<value>` | `border: :bottom` → `.border-bottom` |
 | `border_color`     | `border-<value>` | `border: :green` → `.border-green` |
+| `border_top`     | `border-top-<value>` | `border_top: 0` → `.border-top-0` |
+| `border_bottom`     | `border-bottom-<value>` | `border_bottom: 0` → `.border-bottom-0` |
+| `border_left`     | `border-left-<value>` | `border_left: 0` → `.border-left-0` |
+| `border_right`     | `border-right-<value>` | `border_right: 0` → `.border-right-0` |
 | `word_break`     | `wb-<value>` | `word_break: :break_all` → `.wb-break-all` |
 | `direction`     | `flex-<value>` | `direction: :row` → `.flex-row` |
 | `justify_content`    | `flex-justify-<value>` | `justify_content: :center` → `.flex-justify-center` |
 | `align_items`   | `flex-items-<value>` | `align_items: :baseline` → `.flex-items-baseline` |
+| `box_shadow` | `box-shadow-<value>` | `box_shadow: :medium` → `.box-shadow-medium` |
 
 #### Boolean arguments
 | Component arguments | True    | False |
@@ -123,6 +128,15 @@ script/setup
 
 to install all necessary dependencies
 
+
+### Running tests
+
+To run the full test suite:
+
+```bash
+bundle exec rake
+```
+
 ### Storybook
 
 *We recommend having [overmind](https://github.com/DarthSim/overmind) installed to run both rails and storybook, but it is not required.*
@@ -153,6 +167,10 @@ Remember that restarting the Rails server is necessary to see changes, as the ge
 To minimize the number of restarts, we recommend checking the component in Storybook first, and then when it's in a good state,
 you can check it in your app.
 
+### Documentation
+
+Document components with [YARD](https://yardoc.org/). Docs are published to [RubyDoc.info](https://rubydoc.info/github/primer/view_components).
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/primer/base_component.rb

@@ -23,9 +23,7 @@ module Primer
     end
 
     def call
-      tag.public_send(
-        @tag, content, **@content_tag_args.merge(@result)
-      )
+      content_tag(@tag, content, **@content_tag_args.merge(@result))
     end
 
     private

data/app/components/primer/blankslate_component.html.erb

@@ -1,13 +1,19 @@
 <%= render Primer::BaseComponent.new(**@kwargs) do %>
   <% if @icon.present? %>
-    <%= octicon @icon, height: @icon_height, class: "blankslate-icon" %>
+    <%= render(Primer::OcticonComponent.new(
+      icon: @icon,
+      size: @icon_size,
+      class: "blankslate-icon"
+    )) %>
   <% end %>
 
   <% if @image_src.present? && @image_alt.present? %>
     <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
   <% end %>
 
-  <<%= @title_tag %> class="mb-1"><%= @title %></<%= @title_tag %>>
+  <% if @title.present? %>
+    <%= render Primer::BaseComponent.new(tag: @title_tag, mb: 1) do %><%= @title %><% end %>
+  <% end %>
 
   <% if @description.present? %>
     <p><%= @description %></p>
@@ -16,11 +22,11 @@
   <%= content %>
 
   <% if @button_text.present? && @button_url.present? %>
-    <p><a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a></p>
+    <a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
   <% end %>
 
   <% if @link_text.present? && @link_url.present? %>
-    <p class="mt-3">
+    <p>
       <%= link_to "#{@link_url}" do %><%= @link_text %><% end %>
     </p>
   <% end %>

data/app/components/primer/blankslate_component.rb

@@ -7,7 +7,7 @@ module Primer
   #
   # The `Primer::BlankslateComponent` supports the following arguments to add a basic blankslate:
   #
-  # 1. `title` (`String` required). Text that appears in a larger bold font.
+  # 1. `title` (`String` optional). Text that appears in a larger bold font.
   # 2. `description` (`String` optional). Text that appears below the title. Typically a whole sentence.
   #
   # ```ruby
@@ -98,6 +98,8 @@ module Primer
   # There are a few variations of how the Blankslate appears:
   #
   # - `narrow` (`Boolean` optional). Adds a maximum width.
+  # - `large` (`Boolean` optional). Increaeses the font size.
+  # - `spacious` (`Boolean` optional). Adds extra padding.
   #
   # ```ruby
   # <%= render Primer::BlankslateComponent.new(
@@ -106,42 +108,45 @@ module Primer
   #   description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
   #
   #   narrow: true,
+  #   large: true,
+  #   spacious: true,
   # ) %>
   # ```
   class BlankslateComponent < Primer::Component
     def initialize(
-      # required
-      title:,
-
-      # optional
+      title: "",
       title_tag: :h3,
       icon: "",
-      icon_height: 32,
+      icon_size: :medium,
       image_src: "",
       image_alt: " ",
       description: "",
       button_text: "",
       button_url: "",
-      button_classes: "btn-sm btn-primary",
+      button_classes: "btn-primary my-3",
       link_text: "",
       link_url: "",
 
       #variations
       narrow: false,
+      large: false,
+      spacious: false,
 
       **kwargs
     )
       @kwargs = kwargs
-      @kwargs[:tag] = :div
+      @kwargs[:tag] ||= :div
       @kwargs[:classes] = class_names(
         @kwargs[:classes],
         "blankslate",
         "blankslate-narrow": narrow,
+        "blankslate-large": large,
+        "blankslate-spacious": spacious,
       )
 
       @title_tag = title_tag
       @icon = icon
-      @icon_height = icon_height
+      @icon_size = icon_size
       @image_src = image_src
       @image_alt = image_alt
       @title = title

data/app/components/primer/button_component.rb

@@ -20,7 +20,7 @@ module Primer
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
     DEFAULT_TAG = :button
-    TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
+    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
 
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
@@ -34,20 +34,20 @@ module Primer
       **kwargs
     )
       @kwargs = kwargs
-      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag.to_sym, DEFAULT_TAG)
 
       if @kwargs[:tag] == :a
         @kwargs[:role] = :button
       else
-        @kwargs[:type] = type
+        @kwargs[:type] = type.to_sym
       end
 
       @kwargs[:classes] = class_names(
         "btn",
         kwargs[:classes],
         BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type.to_sym, DEFAULT_BUTTON_TYPE)],
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
-        group_item ? "BtnGroup-item" : ""
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant.to_sym, DEFAULT_VARIANT)],
+        "BtnGroup-item" => group_item
       )
     end
 

data/app/components/primer/counter_component.rb

@@ -9,6 +9,13 @@ module Primer
       :light_gray => "Counter Counter--gray-light",
     }.freeze
 
+    # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
+    # @param scheme [Symbol] Color scheme. One of `SCHEME_MAPPINGS.keys`.
+    # @param limit [Integer] Maximum value to display. (e.x. if count == 6,000 and limit == 5000, counter will display "5,000+")
+    # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
+    # @param text [String] Text to display instead of count.
+    # @param round [Boolean] Whether to apply our standard rounding logic to value.
+    # @param kwargs [Hash] Style arguments to be passed to Primer::Classify
     def initialize(
       count: 0,
       scheme: DEFAULT_SCHEME,

data/app/components/primer/details_component.html.erb

@@ -1,6 +1,8 @@
 <%= render Primer::BaseComponent.new(**@kwargs) do %>
-  <%= render Primer::BaseComponent.new(**@summary_kwargs) do %>
-    <%= summary %>
+  <%= render summary.component do %>
+    <%= summary.content %>
+  <% end %>
+  <%= render body.component do %>
+    <%= body.content %>
   <% end %>
-  <%= body %>
 <% end %>

data/app/components/primer/details_component.rb

@@ -7,6 +7,8 @@ module Primer
   #          reset will remove all styles from the <summary> element.
   #
   class DetailsComponent < Primer::Component
+    include ViewComponent::Slotable
+
     OVERLAY_DEFAULT = :none
     OVERLAY_MAPPINGS = {
       OVERLAY_DEFAULT => "",
@@ -14,25 +16,48 @@ module Primer
       :dark => "details-overlay details-overlay-dark",
     }.freeze
 
-    BUTTON_DEFAULT = :default
-    BUTTON_RESET = :reset
-    BUTTON_OPTIONS = [BUTTON_DEFAULT, BUTTON_RESET]
-
-    with_content_areas :summary, :body
-
-    def initialize(overlay: OVERLAY_DEFAULT, button: BUTTON_DEFAULT, **kwargs)
-      @button = fetch_or_fallback(BUTTON_OPTIONS, button, BUTTON_DEFAULT)
+    with_slot :body, class_name: "Body"
+    with_slot :summary, class_name: "Summary"
 
+    def initialize(overlay: OVERLAY_DEFAULT, reset: false, **kwargs)
       @kwargs = kwargs
       @kwargs[:tag] = :details
       @kwargs[:classes] = class_names(
         kwargs[:classes],
-        OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, OVERLAY_DEFAULT)],
-        "details-reset" => @button == BUTTON_RESET
+        OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay.to_sym, OVERLAY_DEFAULT)],
+        "details-reset" => reset
       )
+    end
+
+    def render?
+      summary.present? && body.present?
+    end
+
+    class Summary < Primer::Slot
+      def initialize(button: true, **kwargs)
+        @button = button
+
+        @kwargs = kwargs
+        @kwargs[:tag] = :summary
+        @kwargs[:role] = "button"
+      end
+
+      def component
+        return Primer::BaseComponent.new(**@kwargs) unless @button
+
+        Primer::ButtonComponent.new(**@kwargs)
+      end
+    end
+
+    class Body < Primer::Slot
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] ||= :div
+      end
 
-      @summary_kwargs = { tag: :summary, role: "button" }
-      @summary_kwargs[:classes] = "btn" if @button == BUTTON_DEFAULT
+      def component
+        Primer::BaseComponent.new(**@kwargs)
+      end
     end
   end
 end

data/app/components/primer/flash_component.html.erb

@@ -0,0 +1,14 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render(Primer::OcticonComponent.new(icon: @icon)) if @icon %>
+  <%= content %>
+  <% if @dismissible %>
+    <button class="flash-close js-flash-close" type="button" aria-label="Close">
+      <%= render(Primer::OcticonComponent.new(icon: "x")) %>
+    </button>
+  <% end %>
+  <% if actions.present? %>
+    <%= render Primer::BaseComponent.new(**actions.kwargs) do %>
+      <%= actions.content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/flash_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  class FlashComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :actions, class_name: "Actions"
+
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :warning => "flash-warn",
+      :danger => "flash-error",
+      :success => "flash-success"
+    }.freeze
+
+    def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **kwargs)
+      @icon = icon
+      @dismissible = dismissible
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "flash",
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant.to_sym, DEFAULT_VARIANT)],
+        "flash-full": full
+      )
+      @kwargs[:mb] ||= spacious ? 4 : nil
+    end
+
+    class Actions < ViewComponent::Slot
+      include ClassNameHelper
+
+      attr_reader :kwargs
+
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(@kwargs[:classes], "flash-action")
+      end
+    end
+  end
+end

data/app/components/primer/layout_component.html.erb

@@ -1,16 +1,16 @@
 <%= render(Primer::FlexComponent.new(**@kwargs)) do %>
   <% if @side == :left %>
-    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, 3] : 3), mb: (@responsive ? [4, nil, 0] : nil)) do %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
       <%= sidebar %>
     <% end %>
   <% end %>
 
-  <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, 9] : 9), mb: (@responsive ? [4, nil, 0] : nil)) do %>
+  <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @main_col] : @main_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
     <%= main %>
   <% end %>
 
   <% if @side == :right %>
-    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, 3] : 3)) do %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)) do %>
       <%= sidebar %>
     <% end %>
   <% end %>

data/app/components/primer/layout_component.rb

@@ -5,17 +5,24 @@ module Primer
     with_content_areas :main, :sidebar
 
     DEFAULT_SIDE = :right
-    ALLOWED_SIDES = [DEFAULT_SIDE, :left]
+    ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
 
-    def initialize(responsive: false, side: DEFAULT_SIDE, **kwargs)
+    MAX_COL = 12
+    DEFAULT_SIDEBAR_COL = 3
+    ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
+
+    def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **kwargs)
       @kwargs = kwargs
-      @side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
+      @side = fetch_or_fallback(ALLOWED_SIDES, side.to_sym, DEFAULT_SIDE)
       @responsive = responsive
       @kwargs[:classes] = class_names(
         "gutter-condensed gutter-lg",
         @kwargs[:classes]
       )
       @kwargs[:direction] = responsive ? [:column, nil, :row] : nil
+
+      @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
+      @main_col = MAX_COL - @sidebar_col
     end
   end
 end

data/app/components/primer/octicon_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  class OcticonComponent < Primer::Component
+    include Primer::ClassNameHelper
+    include OcticonsHelper
+
+    SIZE_DEFAULT = :small
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => 16,
+      :medium => 32,
+      :large => 64,
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(icon:, size: SIZE_DEFAULT, **kwargs)
+      @icon, @kwargs = icon, kwargs
+
+      @kwargs[:height] = SIZE_MAPPINGS[size.to_sym]
+      @kwargs[:class] = class_names(@kwargs[:class], Primer::Classify.call(**@kwargs)[:class])
+    end
+
+    def call
+      octicon(@icon, **@kwargs)
+    end
+  end
+end

data/app/components/primer/popover_component.html.erb

@@ -0,0 +1,10 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render body.component do %>
+    <% if heading %>
+      <%= render heading.component do %>
+        <%= heading.content %>
+      <% end %>
+    <% end %>
+    <%= body.content %>
+  <% end %>
+<% end %>

data/app/components/primer/popover_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Primer
+  class PopoverComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :heading, class_name: "Heading"
+    with_slot :body, class_name: "Body"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] ||= :div
+      @kwargs[:classes] = class_names(
+        kwargs[:classes],
+        "Popover"
+      )
+      @kwargs[:position] ||= :relative
+      @kwargs[:right] = false unless kwargs.key?(:right)
+      @kwargs[:left] = false unless kwargs.key?(:left)
+    end
+
+    def render?
+      body.present?
+    end
+
+    class Heading < ViewComponent::Slot
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:mb] ||= 2
+        @kwargs[:tag] ||= :h4
+      end
+
+      def component
+        Primer::HeadingComponent.new(**@kwargs)
+      end
+    end
+
+    class Body < Slot
+      CARET_DEFAULT = :top
+      CARET_MAPPINGS = {
+        CARET_DEFAULT => "",
+        :bottom => "Popover-message--bottom",
+        :bottom_right => "Popover-message--bottom-right",
+        :bottom_left => "Popover-message--bottom-left",
+        :left => "Popover-message--left",
+        :left_bottom => "Popover-message--left-bottom",
+        :left_top => "Popover-message--left-top",
+        :right => "Popover-message--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"
+      }.freeze
+
+      def initialize(caret: CARET_DEFAULT, large: false, **kwargs)
+        @kwargs = kwargs
+        @kwargs[:classes] = class_names(
+          kwargs[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @kwargs[:p] ||= 4
+        @kwargs[:mt] ||= 2
+        @kwargs[:mx] ||= :auto
+        @kwargs[:text_align] ||= :left
+        @kwargs[:box_shadow] ||= :large
+      end
+
+      def component
+        Primer::BoxComponent.new(**@kwargs)
+      end
+    end
+  end
+end

data/app/components/primer/view_components.rb

@@ -33,12 +33,15 @@ require_relative "button_component"
 require_relative "counter_component"
 require_relative "details_component"
 require_relative "dropdown_menu_component"
+require_relative "flash_component"
 require_relative "flex_component"
 require_relative "flex_item_component"
 require_relative "heading_component"
 require_relative "label_component"
 require_relative "layout_component"
 require_relative "link_component"
+require_relative "octicon_component"
+require_relative "popover_component"
 require_relative "progress_bar_component"
 require_relative "state_component"
 require_relative "subhead_component"

data/lib/primer/classify.rb

@@ -12,10 +12,10 @@ module Primer
     BREAKPOINTS = ["", "-sm", "-md", "-lg"]
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text].freeze
+    CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
 
     COLOR_KEY = :color
     BG_KEY = :bg
@@ -28,6 +28,7 @@ module Primer
     ALIGN_SELF_KEY = :align_self
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
+    BOX_SHADOW_KEY = :box_shadow
 
 
     BOOLEAN_MAPPINGS = {
@@ -77,11 +78,13 @@ module Primer
       }
     }.freeze
     BORDER_KEYS = [:border, :border_color].freeze
+    BORDER_MARGIN_KEYS = [:border_top, :border_bottom, :border_left, :border_right].freeze
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_KEYS +
+      BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       [
@@ -98,7 +101,8 @@ module Primer
         FLEX_SHRINK_KEY,
         ALIGN_SELF_KEY,
         WIDTH_KEY,
-        HEIGHT_KEY
+        HEIGHT_KEY,
+        BOX_SHADOW_KEY
       ]
     ).freeze
 
@@ -129,7 +133,7 @@ module Primer
             raise ArgumentError.new(
               "Primer CSS class #{'name'.pluralize(invalid_class_names.length)} \
               #{invalid_class_names.to_sentence} #{'is'.pluralize(invalid_class_names.length)} \
-              not allowed, use hash syntax instead. This warning will not be raised in production.",
+              not allowed, use style arguments instead (https://github.com/primer/view_components#built-in-styling-arguments). This warning will not be raised in production.",
             )
           end
         end
@@ -161,9 +165,9 @@ module Primer
 
             if SPACING_KEYS.include?(key)
               if MARGIN_DIRECTION_KEYS.include?(key)
-                raise ArgumentError, "value must be between -6 and 6" if (val < -6 || val > 6)
-              else
-                raise ArgumentError, "value must be between 0 and 6" if (val < 0 || val > 6)
+                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
 
@@ -194,6 +198,8 @@ module Primer
               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
@@ -221,6 +227,12 @@ module Primer
               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

data/lib/primer/fetch_or_fallback_helper.rb

@@ -23,7 +23,7 @@ module Primer
       if allowed_values.include?(given_value)
         given_value
       else
-        if fallback_raises && ENV["RAILS_ENV"] != "production"
+        if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
           raise InvalidValueError, <<~MSG
             fetch_or_fallback was called with an invalid value.
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 3
+      PATCH = 8
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.8
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-13 00:00:00.000000000 Z
+date: 2020-09-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -59,7 +59,7 @@ dependencies:
         version: 9.0.0
     - - "<"
       - !ruby/object:Gem::Version
-        version: 11.0.0
+        version: 12.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -69,7 +69,7 @@ dependencies:
         version: 9.0.0
     - - "<"
       - !ruby/object:Gem::Version
-        version: 11.0.0
+        version: 12.0.0
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -126,7 +126,49 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.13.0
-description: 
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.18.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.18.0
+- !ruby/object:Gem::Dependency
+  name: simplecov-console
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.7.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.7.2
+- !ruby/object:Gem::Dependency
+  name: yard
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.9.25
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.9.25
+description:
 email:
 - opensource+primer_view_components@github.com
 executables: []
@@ -152,6 +194,8 @@ files:
 - app/components/primer/details_component.rb
 - app/components/primer/dropdown_menu_component.html.erb
 - app/components/primer/dropdown_menu_component.rb
+- app/components/primer/flash_component.html.erb
+- app/components/primer/flash_component.rb
 - app/components/primer/flex_component.rb
 - app/components/primer/flex_item_component.rb
 - app/components/primer/heading_component.rb
@@ -159,6 +203,9 @@ files:
 - app/components/primer/layout_component.html.erb
 - app/components/primer/layout_component.rb
 - app/components/primer/link_component.rb
+- app/components/primer/octicon_component.rb
+- app/components/primer/popover_component.html.erb
+- app/components/primer/popover_component.rb
 - app/components/primer/progress_bar_component.html.erb
 - app/components/primer/progress_bar_component.rb
 - app/components/primer/slot.rb
@@ -182,7 +229,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -198,7 +245,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.2
-signing_key: 
+signing_key:
 specification_version: 4
 summary: ViewComponents for the Primer Design System
 test_files: []