primer_view_components 0.0.5 → 0.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ea13d4d8ce56ffb157e20f463e512f3f0b0d8f437202e9cee264edea500344c
-  data.tar.gz: 615a05c503420d654c6d5db7c772e9caca674af934aecc7c89100507d7dc405f
+  metadata.gz: f4ccf1dd55332ea7b350841d78e04a0f56a0f036749638c30041582500cc561c
+  data.tar.gz: f948087b2dba1cd217296a08260db95a8973cf8e58d4e1240a2c45295ef17e24
 SHA512:
-  metadata.gz: 998e0a5a94c8e5a639d636b8a67b41a62fb596d4380d7b0f234709ae03599139df3c8a86d5854db8fc00b102a0b21ad3f0d1a854b1cf93141f9f1feafbfdf7dd
-  data.tar.gz: 9095e97ae9f8d0bcea88bc0ae239f30fb1484dae7ab8f4830f79500e7a122b2e6ecfc899ce28e0b38a0936799efc32af9dcf8ec611c25f8bdad1b429de9c68f4
+  metadata.gz: 2359e308fa78d78b5cb0f4e76791bfcd6a9714b7295320d04f293f0b7e0351c4fbad90a13743c61e9401de9c69c1269ee791167638715e7fafc594a47b8a242b
+  data.tar.gz: 2089d76d7cdef40b4bce9871d2b0ade0f492751ba057dc99e6fabc4654390656e0cdef57004931d66b1ea75f6189581dbf840bedbb7b89ee6d0fbfdb31d13136

data/CHANGELOG.md

@@ -1,14 +1,70 @@
-# main
+# CHANGELOG
 
-# 0.0.5
+## main
+
+## 0.0.10
+
+* Add SpinnerComponent
+
+    *Cole Bemis*
+
+## 0.0.9
+
+* BREAKING CHANGE: OcticonComponent no longer accepts `class` parameter; use `classes` instead.
+
+    *heynan0*
+
+## 0.0.8
+
+* Add support for border margins, such as: `border_top: 0`.
+
+    *Natasha Umer*
+
+* Add FlashComponent and OcticonComponent.
+
+    *Joel Hawksley*
+
+* BREAKING CHANGE: 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 CHANGE: Changed `DetailsComponent` summary and body to be slots
+
+    *Manuel Puyol*
+
+## 0.0.5
 
 * Add support for box_shadow
 * Add components:
-    * Popover
+  * Popover
 
     *Sarah Vessels*
 
-# 0.0.4
+## 0.0.4
 
 * Added support for mx: and my: :auto.
 
@@ -17,19 +73,20 @@
 * Added support for custom layout sizes.
 
     *Manuel Puyol*
-# 0.0.3
+
+## 0.0.3
 
 * Add support for responsive `float` style argument.
 
     *Joel Hawksley*
 
 * Add components:
-    * Avatar
-    * Blankslate
+  * Avatar
+  * Blankslate
 
     *Manuel Puyol, Ben Emdon*
 
-# 0.0.1
+## 0.0.1
 
 * Add initial gem configuration.
 
@@ -44,24 +101,24 @@
     *Manuel Puyol*
 
 * Add components:
-    * BorderBox
-    * Box
-    * Breadcrumb
-    * Button
-    * Counter
-    * Details
-    * Dropdown
-    * Flex
-    * FlexItem
-    * Heading
-    * Label
-    * Layout
-    * Link
-    * ProgressBar
-    * State
-    * Subhead
-    * Text
-    * TimelineItem
-    * UnderlineNav
+  * BorderBox
+  * Box
+  * Breadcrumb
+  * Button
+  * Counter
+  * Details
+  * Dropdown
+  * Flex
+  * FlexItem
+  * Heading
+  * Label
+  * Layout
+  * Link
+  * ProgressBar
+  * State
+  * Subhead
+  * Text
+  * TimelineItem
+  * UnderlineNav
 
     *Manuel Puyol*

data/README.md

@@ -77,6 +77,10 @@ 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` |
@@ -84,6 +88,7 @@ Some components have their own specific arguments, but they can all be styled wi
 | `box_shadow` | `box-shadow-<value>` | `box_shadow: :medium` → `.box-shadow-medium` |
 
 #### Boolean arguments
+
 | Component arguments | True    | False |
 | -------------- | ------- | ------ |
 | `underline`   | `underline: true` → `.text-underline`  | `underline: false` → `.no-underline` |
@@ -112,7 +117,7 @@ The same label using `Primer::HeadingComponent`:
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/primer/view_components. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at [https://github.com/primer/view_components](https://github.com/primer/view_components). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 ### Setting up
 
@@ -122,18 +127,30 @@ Run
 script/setup
 ```
 
-to install all necessary dependencies
+To install all necessary dependencies.
+
+### Running tests
+
+To run the full test suite:
+
+```bash
+bundle exec rake
+```
+
+### Writing documentation
 
-### Storybook
+Documentation is written as [YARD](https://yardoc.org/) comments directly in the source code, compiled into Markdown via `rake docs:build` and served by [Doctocat](https://github.com/primer/doctocat).
 
-*We recommend having [overmind](https://github.com/DarthSim/overmind) installed to run both rails and storybook, but it is not required.*
+### Storybook / Documentation
 
-To run storybook:
+To run Storybook and the documentation site, run:
 
 ```bash
-script/storybook
+script/dev
 ```
 
+_Note: Overmind is required to run script/dev._
+
 ### Developing with another app
 
 In your `Gemfile`, change:
@@ -154,6 +171,20 @@ 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).
+
+## Deploying to Heroku
+
+We have both `staging` and `production` environments. To deploy Storybook to Heroku, run the following in `#primer-view-components-ops`:
+
+```bash
+.deploy primer-view-components</branch> to <environment>
+```
+
+If no `branch` is passed, `main` will be deployed.
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/primer/avatar_component.rb

@@ -1,9 +1,20 @@
 # frozen_string_literal: true
 
 module Primer
+  # Avatars are images used to represent users and organizations on GitHub.
+  # Use the default round avatar for users, and the `square` argument
+  # for organizations or any other non-human avatars.
   class AvatarComponent < Primer::Component
     SMALL_THRESHOLD = 24
 
+    #
+    # @example 34|Default
+    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
+    #
+    # @param src [String] The source url of the avatar image
+    # @param alt [String] Passed through to alt on img tag
+    # @param size [Integer] Adds the avatar-small class if less than 24
+    # @param square [Boolean] Used to create a square avatar.
     def initialize(src:, alt:, size: 20, square: false, **kwargs)
       @kwargs = kwargs
       @kwargs[:tag] = :img

data/app/components/primer/base_component.rb

@@ -2,18 +2,15 @@
 
 module Primer
   # Base component used by other Primer components.
-  #
-  # tag(symbol): HTML tag name to be passed to tag.send(tag)
-  # class_names(string): CSS class name value to be concatenated with generated Primer CSS classes
-  # args(hash): Combination of arguments for classes_from_hash and content_tag
-  #
-  # Example usage:
-  # <%= render Primer::BaseComponent, tag: :a, href: "http://www.google.com", mt: 4 do %>Link<% end %>
-  # generates:
-  # <a href="http://www.google.com" class="mt-4">Link</a>
   class BaseComponent < Primer::Component
     TEST_SELECTOR_TAG = :test_selector
 
+    #
+    # @example 34|Default
+    #   <%= render(Primer::BaseComponent.new(tag: :a, href: "http://www.google.com", mt: 4)) { "Link" } %>
+    #
+    # @param tag [Symbol] HTML tag name to be passed to tag.send(tag)
+    # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes
     def initialize(tag:, classes: nil, **args)
       @tag = tag
       @result = Primer::Classify.call(**args.merge(classes: classes))
@@ -23,9 +20,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,
+      classes: "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>

data/app/components/primer/blankslate_component.rb

@@ -1,122 +1,78 @@
 # frozen_string_literal: true
 
 module Primer
-  # Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there.
-  #
-  # ## Basic example
-  #
-  # The `Primer::BlankslateComponent` supports the following arguments to add a basic blankslate:
-  #
-  # 1. `title` (`String` required). Text that appears in a larger bold font.
-  # 2. `description` (`String` optional). Text that appears below the title. Typically a whole sentence.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   title: "Title",
-  #   description: "Description",
-  # ) %>
-  # ```
-  #
-  # ## Icon or graphic (optional)
-  #
-  # Add an `icon` to give additional context. Please refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "octoface",
-  #   title: "Title",
-  #   description: "Description",
-  # ) %>
-  # ```
-  #
-  # Alternatively you can also add a graphic by providing a path (`image_src`) to an image instead.Also, make sure to add an alternative description (`image_alt`). It will be used for the `alt` tag.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   image_src: "file.svg",
-  #   image_alt: "Description of the image",
-  #   title: "Title",
-  #   description: "Description",
-  # ) %>
-  # ```
-  #
-  # Both icon and graphic will appear above the title.
-  #
-  #
-  # ## Custom content (optional)
-  #
-  # You can add any custom content that typically is used instead of the description:
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "octoface",
-  #   title: "Title",
-  # ) do %>
-  #   <p>Your custom content here</p>
-  # <% end %>
-  # ```
-  #
-  # ## Action button (optional)
-  #
-  # You can provide an action button to help users replace the blankslate. The button will appear below the description and custom content. It takes the following arguments:
-  #
-  # - `button_text` (`String` optional). The text of the button.
-  # - `button_url` (`String` optional). The URL where the user will be taken after clicking the button.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "book",
-  #   title: "Welcome to the mona wiki!",
-  #   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.",
-  #
-  #   button_text: "Create the first page",
-  #   button_url: "https://github.com/monalisa/mona/wiki/_new",
-  # ) %>
-  # ```
-  #
-  # ## Link (optional)
-  #
-  # Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-  #
-  # - `link_text` (`String` optional). The text of the link.
-  # - `link_url` (`String` optional). The URL where the user will be taken after clicking the link.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "book",
-  #   title: "Welcome to the mona wiki!",
-  #   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.",
-  #   button_text: "Create the first page",
-  #   button_url: "https://github.com/monalisa/mona/wiki/_new",
-  #   link_text: "Learn more about wikis",
-  #   link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-  # ) %>
-  # ```
-  #
-  # ## Variations (optional)
-  #
-  # There are a few variations of how the Blankslate appears:
-  #
-  # - `narrow` (`Boolean` optional). Adds a maximum width.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "book",
-  #   title: "Welcome to the mona wiki!",
-  #   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,
-  # ) %>
-  # ```
+  # Use Primer::BlankslateComponent when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
   class BlankslateComponent < Primer::Component
+    #
+    # @example 150|Basic
+    #   <%= render Primer::BlankslateComponent.new(
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @example 190|Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "octoface",
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @example 150|Custom content|Pass custom content as a block in place of `description`.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     title: "Title",
+    #   ) do %>
+    #     <em>Your custom content here</em>
+    #   <% end %>
+    #
+    # @example 270|Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "book",
+    #     title: "Welcome to the mona wiki!",
+    #     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.",
+    #
+    #     button_text: "Create the first page",
+    #     button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #   ) %>
+    #
+    # @example 225|Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "book",
+    #     title: "Welcome to the mona wiki!",
+    #     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.",
+    #     link_text: "Learn more about wikis",
+    #     link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #   ) %>
+    #
+    # @example 340|Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "book",
+    #     title: "Welcome to the mona wiki!",
+    #     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,
+    #   ) %>
+    #
+    # @param title [String] Text that appears in a larger bold font.
+    # @param title_tag [Symbol] HTML tag to use for title.
+    # @param icon [String] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] One of <%= Primer::OcticonComponent::SIZE_MAPPINGS.keys.map { |k| "`:#{k}`" }.to_sentence %>
+    # @param image_src [String] Image to display.
+    # @param image_alt [String] Alt text for image.
+    # @param description [String] Text that appears below the title. Typically a whole sentence.
+    # @param button_text [String] The text of the button.
+    # @param button_url [String] The URL where the user will be taken after clicking the button.
+    # @param button_classes [String] Classes to apply to action button
+    # @param link_text [String] The text of the link.
+    # @param link_url [String] The URL where the user will be taken after clicking the link.
+    # @param narrow [Boolean] Adds a maximum width.
+    # @param large [Boolean] Increases the font size.
+    # @param spacious [Boolean] Adds extra padding.
     def initialize(
-      # required
-      title:,
-
-      # optional
+      title: "",
       title_tag: :h3,
       icon: "",
-      icon_height: 32,
+      icon_size: :medium,
       image_src: "",
       image_alt: " ",
       description: "",
@@ -128,20 +84,24 @@ module Primer
 
       #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
@@ -45,9 +45,9 @@ module Primer
       @kwargs[:classes] = class_names(
         "btn",
         kwargs[:classes],
-        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type.to_sym, DEFAULT_BUTTON_TYPE)],
+        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
-        group_item ? "BtnGroup-item" : ""
+        "BtnGroup-item" => group_item
       )
     end
 

data/app/components/primer/counter_component.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
+  # Use Primer::CounterComponent to add a count to navigational elements and buttons.
   class CounterComponent < Primer::Component
     DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
@@ -9,6 +10,17 @@ module Primer
       :light_gray => "Counter Counter--gray-light",
     }.freeze
 
+    #
+    # @example 34|Default
+    #   <%= render(Primer::CounterComponent.new(count: 25)) %>
+    #
+    # @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
+        "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, 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.rb

@@ -13,7 +13,7 @@ module Primer
 
     def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **kwargs)
       @kwargs = kwargs
-      @side = fetch_or_fallback(ALLOWED_SIDES, side.to_sym, DEFAULT_SIDE)
+      @side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
       @responsive = responsive
       @kwargs[:classes] = class_names(
         "gutter-condensed gutter-lg",

data/app/components/primer/octicon_component.rb

@@ -0,0 +1,32 @@
+# 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[:class] = Primer::Classify.call(**@kwargs)[:class]
+      @kwargs[:height] ||= SIZE_MAPPINGS[size]
+
+      # Filter out classify options to prevent them from becoming invalid html attributes.
+      # Note height and width are both classify options and valid html attributes.
+      octicon_helper_options = @kwargs.slice(:height, :width)
+      @kwargs = @kwargs.except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
+    end
+
+    def call
+      octicon(@icon, **@kwargs)
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
+  </path>
+<% end %>

data/app/components/primer/spinner_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use Primer::SpinnerComponent to let users know that content is being loaded.
+  class SpinnerComponent < Primer::Component
+
+    DEFAULT_SIZE = :medium
+    SIZE_MAPPINGS = {
+      :small => 16,
+      DEFAULT_SIZE => 32,
+      :large => 64,
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    #
+    # @example 48|Default
+    #   <%= render(Primer::SpinnerComponent.new) %>
+    #
+    # @example 32|Small
+    #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
+    #
+    # @example 80|Large
+    #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
+    #
+    # @param size [Symbol] One of <%= Primer::SpinnerComponent::SIZE_OPTIONS.map { |k| "`:#{k}`" }.to_sentence(last_word_connector: ', or ') %>
+    def initialize(size: DEFAULT_SIZE, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :svg
+      @kwargs[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @kwargs[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @kwargs[:viewBox] = "0 0 16 16"
+      @kwargs[:fill] = :none
+      # Setting `box-sizing: content-box` allows consumers to add padding
+      # to the spinner without shrinking the icon
+      @kwargs[:style] = "box-sizing: content-box; color: var(--color-icon-primary);"
+    end
+  end
+end

data/app/components/primer/view_components.rb

@@ -33,14 +33,17 @@ 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 "spinner_component"
 require_relative "state_component"
 require_relative "subhead_component"
 require_relative "text_component"

data/lib/primer/classify.rb

@@ -78,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 +
       [
@@ -131,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
@@ -196,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

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 5
+      PATCH = 10
 
       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.5
+  version: 0.0.10
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-19 00:00:00.000000000 Z
+date: 2020-10-19 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,21 @@ dependencies:
         version: 9.0.0
     - - "<"
       - !ruby/object:Gem::Version
-        version: 11.0.0
+        version: 12.0.0
+- !ruby/object:Gem::Dependency
+  name: listen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -126,7 +140,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 +208,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,11 +217,14 @@ 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
+- app/components/primer/spinner_component.html.erb
+- app/components/primer/spinner_component.rb
 - app/components/primer/state_component.rb
 - app/components/primer/subhead_component.html.erb
 - app/components/primer/subhead_component.rb
@@ -184,7 +245,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -199,8 +260,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
-signing_key:
+rubygems_version: 3.0.3
+signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System
 test_files: []