primer_view_components 0.0.9 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee845a3614e0d347957e7f16cf83750c9616bc63828d6ef9adaac62d6b5eb18d
-  data.tar.gz: 24d5d20ee47acdc6ed411c0ec609870fa7b8788d1debbdf15001a7851f7be54f
+  metadata.gz: 9cb2ccfdc2a705a1395c0b18dd535b305cf0b00ef77f778fe6bbc9b6417c3f4a
+  data.tar.gz: fa2cea6523b0281502b65d654c11ab4224d345d25a3608a63e92f8680aaeb742
 SHA512:
-  metadata.gz: ade2e2c9febaa32e5be37d60efe47c5ef8c7b17f41602e6f470bee8c21a499ab98ff52992aa484c4de3ab2f40f654f1ddc226fa1ac45077285e4349834dec542
-  data.tar.gz: 3d1eed4c85f4d513234f6ea9cdde584f83e54f7f2b6cf9197137b8e0ca6eeb6f15e2f51798b411d502452f910c5d1309ef0c1269b2b91559920048a2dfeb05f8
+  metadata.gz: c4506031b1c2e99c36aa9b868e210b15b396b8b38a8347e1b06785510e3caee7b6edb2e4fe0eafb178effa74cd2287e6e7d421d5c04394f5bead62cb0c3b9ffa
+  data.tar.gz: 7e3a7b3a2ca8932cbdb563738d040b5ceb1239736ecf7603a3c9cdfa3cf3bc24aa9df3faa251568b9f8020a119bb75ed439a9881342e7e307b708a742fa42897

data/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 ## main
 
+## 0.0.14
+
+* Add functional colors to Label.
+
+    *Joel Hawksley*
+
+## 0.0.13
+
+* Add support for `xl` breakpoint.
+
+    *Joel Hawksley*
+
+## 0.0.12
+
+* Adds support for disabling inline box-sizing style for `SpinnerComponent` via style parameter `Primer::SpinnerComponent.new(style: nil)`.
+
+    *Chris Wilson*
+
+## 0.0.11
+
+* Renames DetailsComponent::OVERLAY_DEFAULT to DetailsComponent::NO_OVERLAY to more correctly describe its value.
+
+    *Justin Kenyon*
+
+## 0.0.10
+
+* Add SpinnerComponent
+
+    *Cole Bemis*
+
 ## 0.0.9
 
 * BREAKING CHANGE: OcticonComponent no longer accepts `class` parameter; use `classes` instead.
@@ -70,7 +100,7 @@
 
 ## 0.0.3
 
-* Add support for responsive `float` style argument.
+* Add support for responsive `float` system argument.
 
     *Joel Hawksley*
 

data/README.md

@@ -8,182 +8,9 @@
 
 _Note: This library is in pre-release development and should not be considered stable._
 
-## Design philosophy
+## Documentation
 
-Primer ViewComponents aims to mimic the API of [Primer Components](https://github.com/primer/components), while using [Primer CSS](https://github.com/primer/css) under the hood.
-
-## Installation
-
-In `Gemfile`, add:
-
-```ruby
-gem "primer_view_components"
-```
-
-In `config/application.rb`, add **after the application definition**
-
-```ruby
-require "primer/view_components/engine"
-```
-
-## Usage
-
-### Built-in styling arguments
-
-Primer components should be styled using the built-in arguments when possible. Most Primer utility classes for spacing, alignment, display, and colors have equivalent component arguments.
-
-Example label built with Primer CSS:
-
-```html
-<span title="Label: Suggested" class="Label Label--outline Label--outline-green ml-2 v-align-middle">Suggested</span>
-```
-
-The same label using `Primer::LabelComponent`:
-
-```erb
-<%= render Primer::LabelComponent.new(ml: 2, vertical_align: :middle, scheme: :green, title: "Label: Suggested") do %>
-  Suggested
-<% end %>
-```
-
-Some components have their own specific arguments, but they can all be styled with the following arguments.
-
-| Component argument | Primer class    | Example |
-| --------------- | --------------- | -------- |
-| `m`            | `m-<value>`     | `m: 4` → `.m-4` |
-| `my`            | `my-<value>`   | `my: 4` → `.my-4` |
-| `mx`            | `my-<value>`   | `mx: 4` → `.mx-4` |
-| `mt`            | `mt-<value>`   | `mt: 4` → `.mt-4` |
-| `mb`            | `mb-<value>`   | `mb: 4` → `.mb-4` |
-| `ml`            | `ml-<value>`   | `ml: 4` → `.ml-4` |
-| `mr`            | `mr-<value>`   | `mr: 4` → `.mr-4` |
-| `p`             | `p-<value>`    | `p: 4` → `.p-4` |
-| `py`            | `py-<value>`   | `py: 4` → `.py-4` |
-| `px`            | `py-<value>`   | `px: 4` → `.px-4` |
-| `pt`            | `pt-<value>`   | `pt: 4` → `.pt-4` |
-| `pb`            | `pb-<value>`   | `pb: 4` → `.pb-4` |
-| `pl`            | `pl-<value>`   | `pl: 4` → `.pl-4` |
-| `pr`            | `pr-<value>`   | `pr: 4` → `.pr-4` |
-| `pr`            | `pr-<value>`   | `pr: 4` → `.pr-4` |
-| `f`            | `f-<value>`   | `f: 4` → `.f-4` |
-| `color`            | `color-<value>`   | `color: :red_500` → `.color-red-500` |
-| `text`         | `text-<value>`   | `text: :green` → `.text-green` |
-| `bg`         | `bg-<value>`   | `bg: :blue_light` → `.bg-blue-light` |
-| `display`     | `d-<value>` | `display: :none` → `.d-none` |
-| `float`         | `float-<value>`   | `float: :right` → `.float-right` |
-| `vertical_align`         | `v-align-<value>`   | `vertical_align: :baseline` → `.v-align-baseline` |
-| `text_align`     | `text-<value>` | `text_align: :right` → `.text-right` |
-| `font_size`     | `f<value>` | `font_size: 4` → `.f4` |
-| `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 |
-| -------------- | ------- | ------ |
-| `underline`   | `underline: true` → `.text-underline`  | `underline: false` → `.no-underline` |
-| `top`    | n/a | `top: false` → `.top-0`  |
-| `bottom` | n/a | `bottom: false` → `.bottom-0`  |
-| `left`   | n/a | `left: false` → `.left-0`  |
-| `right`  | n/a | `right: false` → `.right-0`  |
-
-#### Responsive arguments
-
-Different classes can be used for different breakpoints just like in Primer CSS. Simply use an array with the four values required for `[none, small, medium, large]`. If no breakpoint is needed for a breakpoint, pass `nil`.
-
-Example heading built with Primer CSS:
-
-```html
-<h1 class="mt-0 mt-lg-4">Hello world</h1>
-```
-
-The same label using `Primer::HeadingComponent`:
-
-```erb
-<%= render Primer::HeadingComponent.new(mt: [0, nil, nil, 4]) do %>
-  Hello world
-<% end %>
-```
-
-## Contributing
-
-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
-
-Run
-
-```bash
-script/setup
-```
-
-To install all necessary dependencies.
-
-### Running tests
-
-To run the full test suite:
-
-```bash
-bundle exec rake
-```
-
-### Writing documentation
-
-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).
-
-### Storybook / Documentation
-
-To run Storybook and the documentation site, run:
-
-```bash
-script/dev
-```
-
-_Note: Overmind is required to run script/dev._
-
-### Developing with another app
-
-In your `Gemfile`, change:
-
-```ruby
-gem "primer_view_components"
-```
-
-to
-
-```ruby
-gem "primer_view_components", path: "path_to_the_gem" # e.g. path: "~/primer/view_components"
-```
-
-Then, `bundle install` to update references. You'll now be able to see changes from the gem without having to build it.
-Remember that restarting the Rails server is necessary to see changes, as the gem is loaded at boot time.
-
-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.
+Visit [https://primer.style/view-components/](https://primer.style/view-components//) to view documentation.
 
 ## License
 

data/app/components/primer/avatar_component.rb

@@ -1,28 +1,39 @@
 # 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
 
-    def initialize(src:, alt:, size: 20, square: false, **kwargs)
-      @kwargs = kwargs
-      @kwargs[:tag] = :img
-      @kwargs[:src] = src
-      @kwargs[:alt] = alt
-      @kwargs[:size] = size
-      @kwargs[:height] = size
-      @kwargs[:width] = size
+    #
+    # @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, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :img
+      @system_arguments[:src] = src
+      @system_arguments[:alt] = alt
+      @system_arguments[:size] = size
+      @system_arguments[:height] = size
+      @system_arguments[:width] = size
 
-      @kwargs[:classes] = class_names(
+      @system_arguments[:classes] = class_names(
         "avatar",
-        kwargs[:classes],
+        system_arguments[:classes],
         "avatar--small" => size < SMALL_THRESHOLD,
         "CircleBadge" => !square
       )
     end
 
     def call
-      render(Primer::BaseComponent.new(**@kwargs)) { content }
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
   end
 end

data/app/components/primer/base_component.rb

@@ -1,25 +1,70 @@
 # frozen_string_literal: true
 
 module Primer
-  # Base component used by other Primer components.
+  # All Primer ViewComponents accept a standard set of options called System Arguments, mimicking the [styled-system API](https://styled-system.com/table) [used by Primer React](https://primer.style/components/system-props).
   #
-  # 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
+  # Under the hood, System Arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
+  #
+  # ## Responsive values
+  #
+  # To apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.
+  #
+  # For example:
+  #
+  # ```erb
+  # <%= render Primer::HeadingComponent.new(mt: [0, nil, nil, 4, 2]) do %>
+  #   Hello world
+  # <% end %>
+  # ```
+  #
+  # Renders:
+  #
+  # ```html
+  # <h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>
+  # ```
   #
-  # 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
 
-    def initialize(tag:, classes: nil, **args)
+    # @param m [Integer] Margin. <%= one_of((-6..6).to_a) %>
+    # @param mt [Integer] Margin left. <%= one_of((-6..6).to_a) %>
+    # @param mr [Integer] Margin right. <%= one_of((-6..6).to_a) %>
+    # @param mb [Integer] Margin bottom. <%= one_of((-6..6).to_a) %>
+    # @param ml [Integer] Margin left. <%= one_of((-6..6).to_a) %>
+    # @param mx [Integer] Horizontal margins. <%= one_of((-6..6).to_a + [:auto]) %>
+    # @param my [Integer] Vertical margins. <%= one_of((-6..6).to_a) %>
+    # @param m [Integer] Padding. <%= one_of((0..6).to_a) %>
+    # @param mt [Integer] Padding left. <%= one_of((0..6).to_a) %>
+    # @param mr [Integer] Padding right. <%= one_of((0..6).to_a) %>
+    # @param mb [Integer] Padding bottom. <%= one_of((0..6).to_a) %>
+    # @param ml [Integer] Padding left. <%= one_of((0..6).to_a) %>
+    # @param mx [Integer] Horizontal padding. <%= one_of((0..6).to_a) %>
+    # @param my [Integer] Vertical padding. <%= one_of((0..6).to_a) %>
+    #
+    # @param position [Symbol] <%= one_of([:relative, :absolute, :fixed]) %>
+    #
+    # @param top [Boolean] If `false`, sets `top: 0`.
+    # @param right [Boolean] If `false`, sets `right: 0`.
+    # @param bottom [Boolean] If `false`, sets `bottom: 0`.
+    # @param left [Boolean] If `false`, sets `left: 0`.
+    #
+    # @param display [Symbol] <%= one_of([:block, :none, :inline, :inline_block, :table, :table_cell]) %>
+    #
+    # @param hide [Symbol] Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %>
+    #
+    # @param vertical_align [Symbol] <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %>
+    #
+    # @param float [Symbol] <%= one_of([:left, :right]) %>
+    #
+    # @param font_size [String] <%= one_of(["00", "0", "1", "2", "3", "4", "5", "6"]) %>
+    # @param tag [Symbol] HTML tag name to be passed to `tag.send`
+    # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes
+    def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
-      @result = Primer::Classify.call(**args.merge(classes: classes))
+      @result = Primer::Classify.call(**system_arguments.merge(classes: classes))
 
       # Filter out Primer keys so they don't get assigned as HTML attributes
-      @content_tag_args = add_test_selector(args).except(*Primer::Classify::VALID_KEYS)
+      @content_tag_args = add_test_selector(system_arguments).except(*Primer::Classify::VALID_KEYS)
     end
 
     def call

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

@@ -1,4 +1,4 @@
-<%= render Primer::BaseComponent.new(**@kwargs) do %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if @icon.present? %>
     <%= render(Primer::OcticonComponent.new(
       icon: @icon,

data/app/components/primer/blankslate_component.rb

@@ -1,118 +1,73 @@
 # 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` optional). 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.
-  # - `large` (`Boolean` optional). Increaeses the font size.
-  # - `spacious` (`Boolean` optional). Adds extra padding.
-  #
-  # ```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,
-  #   large: true,
-  #   spacious: 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) %>
+    # @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(
       title: "",
       title_tag: :h3,
@@ -132,12 +87,12 @@ module Primer
       large: false,
       spacious: false,
 
-      **kwargs
+      **system_arguments
     )
-      @kwargs = kwargs
-      @kwargs[:tag] ||= :div
-      @kwargs[:classes] = class_names(
-        @kwargs[:classes],
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
         "blankslate",
         "blankslate-narrow": narrow,
         "blankslate-large": large,