primer_view_components 0.0.20 → 0.0.21

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dbf044be0f96f8b0e1e7e7f3d06b6e1c6a5a9171b87ae19eb6ba4034724567db
-  data.tar.gz: 116e2fedfe01623fb65cde89990f6988c9ccc557702c73428dd48c6a199ecf0f
+  metadata.gz: 62c2e7e2e043daf8288aa72a91d674af96180cc0430c8d59c5fdbf5764e19b59
+  data.tar.gz: 75b205867ce0f2835ee32d9a859032d02eef6dbb98b8ff5c9d485001893fce5b
 SHA512:
-  metadata.gz: d114ba5fb5d3ff3d18f77d709befab2b9a6eb86a3f1abdc8bffb613af25e66874972d69e6aaabae553007c61cee947c46d7c37db75b504fe5fd49dd1f95d933a
-  data.tar.gz: 53cf3366dc7d0bebe8c0754ec411317da160a3cc549d0bfe02616ef4ed769a05e2d4a244be7c5038fcacf2626a232fb998af0ad340f19eda58306c6d0469b89b
+  metadata.gz: f6ad3831ccbb77616d668036954108e3642ffe747ee2837714761ebc54ca353b654813cad3396bb31e4a94f03f6e84f5ae52c75cf07387fffd24758d73967b70
+  data.tar.gz: 79d4aca35c8556fcbbcbab8fb6cf5d4e5440f920508af5ed880bb200a03820869a576ebafd3200ff756a3b7a580855c8b1c77ba71a65f085367fc80ac063e49f

data/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## main
 
+## 0.0.21
+
+* **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 +26,7 @@
 
 * Add support for functional colors to `color` system argument.
 
-    *Jake Shorty
+    *Jake Shorty*
 
 * Add `AvatarStack`, `Dropdown`, `Markdown` and `Menu` components.
 

data/app/components/primer/avatar_component.rb

@@ -16,11 +16,11 @@ module Primer
     # @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

data/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,

data/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 @@ module Primer
     #     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 @@ module Primer
       @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

data/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 %>

data/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 @@ module Primer
     # @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 @@ module Primer
     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

data/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 %>

data/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 @@ module Primer
       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 @@ module Primer
           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

data/lib/primer/view_components/version.rb

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

data/static/statuses.json

@@ -1 +1 @@
-{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"alpha","Primer::BlankslateComponent":"alpha","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"alpha","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"alpha","Primer::ProgressBarComponent":"alpha","Primer::SpinnerComponent":"beta","Primer::StateComponent":"alpha","Primer::SubheadComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimelineItemComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}
+{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"alpha","Primer::BlankslateComponent":"alpha","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"alpha","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"alpha","Primer::ProgressBarComponent":"alpha","Primer::SpinnerComponent":"beta","Primer::StateComponent":"alpha","Primer::SubheadComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimelineItemComponent":"alpha","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.20
+  version: 0.0.21
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-19 00:00:00.000000000 Z
+date: 2021-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: octicons_helper