Merge branch 'main' into split-up-tests-for-clarity

primer · Feb 23, 2021 · ebe0a6a · ebe0a6a
2 parents 1e9ea79 + 739792c
commit ebe0a6a
Show file tree

Hide file tree

Showing 21 changed files with 174 additions and 173 deletions.
diff --git a/.github/workflows/docs-build.yml b/.github/workflows/docs-build.yml
@@ -2,32 +2,37 @@ name: Docs Build
 
 on:
   push:
-    branches:
+    branches-ignore:
       - main
+
 
 jobs:
-    runs-on: ubuntu-latest
+  build-docs:
     name: Build Docs
-    - uses: actions/checkout@master
-    - name: Setup Ruby
-      uses: actions/setup-ruby@v1
-      with:
-        ruby-version: 2.7.x
-    - uses: actions/cache@v2
-      with:
-        path: vendor/bundle
-        key: gems-build-rails-main-ruby-2.7.x-${{ hashFiles('**/Gemfile.lock') }}
-    - name: Generate docs and statuses
-      run: |
-        gem install bundler:2.2.9
-        bundle config path vendor/bundle
-        bundle update
-        bundle exec rake docs:build
-        bundle exec rake statuses:dump
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7.x
+      - uses: actions/cache@v2
+        with:
+          path: vendor/bundle
+          key: gems-build-rails-main-ruby-2.7.x-${{ hashFiles('**/Gemfile.lock') }}
+      - name: Generate docs and statuses
+        run: |
+          gem install bundler:2.2.9
+          bundle config path vendor/bundle
+          bundle update
+          bundle exec rake docs:build
+          bundle exec rake statuses:dump
       - name: Commit & Push Docs Data
         run: |
           git config --local user.email "[email protected]"
           git config --local user.name "Actions Auto Build"
           git add -f docs static/statuses.json
           git commit -m "docs: build docs" || true
-          git push --force origin HEAD:refs/heads/main
+          git push
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## main
 
+* **Breaking change**: Upgrade `FlashComponent` to use Slots V2.
+
+    *Joel Hawksley, Simon Taranto*
+
+* **Breaking change**: Upgrade `BlankslateComponent` to use Slots V2.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Upgrade `TimelineItemComponent` to use Slots V2.
+
+    *Manuel Puyol*
+
 ## 0.0.20
 
 * Fix bug when empty string was passed to Classify.
@@ -12,7 +24,7 @@
 
 * Add support for functional colors to `color` system argument.
 
-    *Jake Shorty
+    *Jake Shorty*
 
 * Add `AvatarStack`, `Dropdown`, `Markdown` and `Menu` components.
 

diff --git a/app/components/primer/avatar_component.rb b/app/components/primer/avatar_component.rb
@@ -16,11 +16,11 @@ class AvatarComponent < Primer::Component
     # @example auto|Link
     #   <%= render(Primer::AvatarComponent.new(href: "#", 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 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.
-    # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag
+    # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
       @href = href

diff --git a/app/components/primer/blankslate_component.html.erb b/app/components/primer/blankslate_component.html.erb
@@ -1,6 +1,6 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if spinner.present? %>
-    <%= render spinner.component %>
+    <%= spinner %>
   <% elsif @icon.present? %>
     <%= render(Primer::OcticonComponent.new(
       icon: @icon,

diff --git a/app/components/primer/blankslate_component.rb b/app/components/primer/blankslate_component.rb
@@ -3,9 +3,15 @@
 module Primer
   # 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
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :spinner, class_name: "Spinner"
+    # Optional Spinner.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.
+    renders_one :spinner, lambda { |**system_arguments|
+      system_arguments[:mb] ||= 3
+      Primer::SpinnerComponent.new(**system_arguments)
+    }
 
     #
     # @example auto|Basic
@@ -26,7 +32,7 @@ class BlankslateComponent < Primer::Component
     #     title: "Title",
     #     description: "Description",
     #   ) do |component| %>
-    #     <% component.slot(:spinner, size: :large) %>
+    #     <% component.spinner(size: :large) %>
     #   <% end %>
     #
     # @example auto|Custom content|Pass custom content as a block in place of `description`.
@@ -124,19 +130,5 @@ def initialize(
       @link_text = link_text
       @link_url = link_url
     end
-
-    # :nodoc:
-    class Spinner < Primer::Slot
-      # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:mb] ||= 3
-      end
-
-      def component
-        Primer::SpinnerComponent.new(**@system_arguments)
-      end
-    end
   end
 end
diff --git a/app/components/primer/flash_component.html.erb b/app/components/primer/flash_component.html.erb
@@ -6,9 +6,6 @@
       <%= render(Primer::OcticonComponent.new(icon: "x")) %>
     </button>
   <% end %>
-  <% if actions.present? %>
-    <%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
-      <%= actions.content %>
-    <% end %>
-  <% end %>
+
+  <%= action %>
 <% end %>
diff --git a/app/components/primer/flash_component.rb b/app/components/primer/flash_component.rb
@@ -3,9 +3,17 @@
 module Primer
   # Use the Flash component to inform users of successful or pending actions.
   class FlashComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :actions, class_name: "Actions"
+    # Optional action content showed on the right side of the component.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :action, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     DEFAULT_VARIANT = :default
     VARIANT_MAPPINGS = {
@@ -32,7 +40,7 @@ class FlashComponent < Primer::Component
     # @example auto|With actions
     #   <%= render(Primer::FlashComponent.new) do |component| %>
     #     This is a flash message with actions!
-    #     <% component.slot(:actions) do %>
+    #     <% component.action do %>
     #       <%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
     #     <% end %>
     #   <% end %>
@@ -60,17 +68,5 @@ def initialize(full: false, spacious: false, dismissible: false, icon: nil, vari
     def self.status
       Primer::Component::STATUSES[:beta]
     end
-
-    # :nodoc:
-    class Actions < Primer::Slot
-      attr_reader :system_arguments
-
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(@system_arguments[:classes], "flash-action")
-      end
-    end
   end
 end
diff --git a/app/components/primer/timeline_item_component.html.erb b/app/components/primer/timeline_item_component.html.erb
@@ -1,17 +1,5 @@
-<%= render Primer::BaseComponent.new(**system_arguments) do %>
-  <% if avatar %>
-    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.system_arguments) %>
-  <% end %>
-
-  <% if badge %>
-    <%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
-      <%= octicon badge.icon %>
-    <% end %>
-  <% end %>
-
-  <% if body %>
-    <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
-      <%= body.content %>
-    <% end %>
-  <% end %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= avatar %>
+  <%= badge %>
+  <%= body %>
 <% end %>
diff --git a/app/components/primer/timeline_item_component.rb b/app/components/primer/timeline_item_component.rb
@@ -3,20 +3,45 @@
 module Primer
   # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :avatar, class_name: "Avatar"
-    with_slot :badge, class_name: "Badge"
-    with_slot :body, class_name: "Body"
+    # Avatar to be rendered to the left of the Badge.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
+    renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "TimelineItem-avatar",
+        system_arguments[:classes]
+      )
+
+      Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
+    }
 
-    attr_reader :system_arguments
+    # Badge that will be connected to other TimelineItems.
+    #
+    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :badge, "BadgeComponent"
+
+    # Body to be rendered to the left of the Badge.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        "TimelineItem-body",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     # @example auto|Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
-    #       <% component.slot(:body) { "Success!" } %>
+    #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.badge(bg: :green, color: :white, icon: :check) %>
+    #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
     #
@@ -36,36 +61,9 @@ def render?
       avatar.present? || badge.present? || body.present?
     end
 
-    # :nodoc:
-    class Avatar < Primer::Slot
-      attr_reader :system_arguments, :alt, :src, :size, :square
-
-      # @param alt [String] Alt text for avatar image.
-      # @param src [String] Src attribute for avatar image.
-      # @param size [Integer] Image size.
-      # @param square [Boolean] Whether to round the edges of the image.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
-        @alt = alt
-        @src = src
-        @size = size
-        @square = square
-
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-avatar",
-          system_arguments[:classes]
-        )
-      end
-    end
-
-    # :nodoc:
-    class Badge < Primer::Slot
-      attr_reader :system_arguments, :icon
-
-      # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    # This component is part of `Primer::TimelineItemComponent` and should not be
+    # used as a standalone component.
+    class BadgeComponent < Primer::Component
       def initialize(icon: nil, **system_arguments)
         @icon = icon
 
@@ -76,20 +74,11 @@ def initialize(icon: nil, **system_arguments)
           system_arguments[:classes]
         )
       end
-    end
-
-    # :nodoc:
-    class Body < Primer::Slot
-      attr_reader :system_arguments
 
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-body",
-          system_arguments[:classes]
-        )
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::OcticonComponent.new(icon: @icon))
+        end
       end
     end
   end

diff --git a/docs/content/components/avatar.md b/docs/content/components/avatar.md
@@ -40,9 +40,9 @@ for organizations or any other non-human avatars.
 
 | Name | Type | Default | Description |
 | :- | :- | :- | :- |
-| `src` | `String` | N/A | The source url of the avatar image |
-| `alt` | `String` | N/A | Passed through to alt on img tag |
-| `size` | `Integer` | `20` | Adds the avatar-small class if less than 24 |
+| `src` | `String` | N/A | The source url of the avatar image. |
+| `alt` | `String` | N/A | Passed through to alt on img tag. |
+| `size` | `Integer` | `20` | Adds the avatar-small class if less than 24. |
 | `square` | `Boolean` | `false` | Used to create a square avatar. |
-| `href` | `String` | `nil` | The URL to link to. If used, component will be wrapped by an `<a>` tag |
+| `href` | `String` | `nil` | The URL to link to. If used, component will be wrapped by an `<a>` tag. |
 | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) |
diff --git a/docs/content/components/blankslate.md b/docs/content/components/blankslate.md
@@ -46,7 +46,7 @@ Add a [SpinnerComponent](https://primer.style/view-components/components/spinner
   title: "Title",
   description: "Description",
 ) do |component| %>
-  <% component.slot(:spinner, size: :large) %>
+  <% component.spinner(size: :large) %>
 <% end %>
 ```
 
@@ -134,9 +134,12 @@ There are a few variations of how the Blankslate appears: `narrow` adds a maximu
 | `large` | `Boolean` | `false` | Increases the font size. |
 | `spacious` | `Boolean` | `false` | Adds extra padding. |
 
-### `spinner` slot
+## Slots
+
+### `Spinner`
+
+Optional Spinner.
 
 | Name | Type | Default | Description |
 | :- | :- | :- | :- |
-| `size` | `Symbol` | N/A | One of `:small` (`16`), `:medium` (`32`), or `:large` (`64`). |
-| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) |
+| `kwargs` | `Hash` | N/A | The same arguments as [Spinner](/components/spinner). |