primer_view_components 0.0.22 → 0.0.27

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

@@ -1,17 +1,11 @@
 <%= render(Primer::FlexComponent.new(**@system_arguments)) do %>
   <% if @side == :left %>
-    <%= 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 %>
+    <%= sidebar %>
   <% end %>
 
-  <%= 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 %>
+  <%= main %>
 
   <% if @side == :right %>
-    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)) do %>
-      <%= sidebar %>
-    <% end %>
+    <%= sidebar %>
   <% end %>
 <% end %>

data/app/components/primer/layout_component.rb

@@ -3,7 +3,32 @@
 module Primer
   # Use Layout to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
-    with_content_areas :main, :sidebar
+    include ViewComponent::SlotableV2
+
+    # The main content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :main, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @main_col] : @main_col)
+      system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+
+      Primer::BaseComponent.new(tag: :div, **system_arguments)
+    }
+
+    # The sidebar content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :sidebar, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)
+
+      if @side == :left
+        system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+      end
+
+      Primer::BaseComponent.new(tag: :div, **system_arguments)
+    }
 
     DEFAULT_SIDE = :right
     ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
@@ -14,14 +39,14 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::LayoutComponent.new) do |component| %>
-    #     <% component.with(:sidebar) { "Sidebar" } %>
-    #     <% component.with(:main) { "Main" } %>
+    #     <% component.sidebar { "Sidebar" } %>
+    #     <% component.main { "Main" } %>
     #   <% end %>
     #
     # @example Left sidebar
     #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
-    #     <% component.with(:sidebar) { "Sidebar" } %>
-    #     <% component.with(:main) { "Main" } %>
+    #     <% component.sidebar { "Sidebar" } %>
+    #     <% component.main { "Main" } %>
     #   <% end %>
     #
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.

data/app/components/primer/link_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Use links for moving from one page to another. The Link component styles anchor tags with default blue styling and hover text-decoration.
   class LinkComponent < Primer::Component
+    status :beta
+
     # @example Default
     #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com")) { "Link" } %>
     #
@@ -25,9 +27,5 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

data/app/components/primer/octicon_component.rb

@@ -4,8 +4,10 @@ module Primer
   # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
     view_helper :octicon
+    status :beta
 
-    include Primer::ClassNameHelper
+    include ClassNameHelper
+    include TestSelectorHelper
     include OcticonsHelper
 
     SIZE_DEFAULT = :small
@@ -38,15 +40,11 @@ module Primer
       # 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 = @system_arguments.slice(:height, :width)
-      @system_arguments = @system_arguments.except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
+      @system_arguments = add_test_selector(@system_arguments).except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
     end
 
     def call
       octicon(@icon, { **@system_arguments })
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

data/app/components/primer/primer.js

@@ -1 +1,2 @@
 import './tab_container_component';
+import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1 +1,2 @@
 import './tab_container_component'
+import './time_ago_component'

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

@@ -1,5 +1,5 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% items.each do |item| %>
-    <%= render Primer::BaseComponent.new(**item.system_arguments) %>
+    <%= item %>
   <% end %>
 <% end %>

data/app/components/primer/progress_bar_component.rb

@@ -3,9 +3,25 @@
 module Primer
   # Use ProgressBar to visualize task completion.
   class ProgressBarComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
+    status :beta
 
-    with_slot :item, collection: true, class_name: "Item"
+    # Use the Item slot to add an item to the progress bas
+    #
+    # @param percentage [Integer] The percent complete
+    # @param bg [Symbol] The background color
+    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+    renders_many :items, lambda { |percentage: 0, bg: :green, **system_arguments|
+      percentage = percentage
+      system_arguments = system_arguments
+
+      system_arguments[:tag] = :span
+      system_arguments[:bg] = bg
+      system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
+      system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     SIZE_DEFAULT = :default
 
@@ -18,24 +34,24 @@ module Primer
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
     # @example Default
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.slot(:item, percentage: 25) %>
+    #     <% component.item(percentage: 25) %>
     #   <% end %>
     #
     # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.slot(:item, bg: :blue_4, percentage: 50) %>
+    #     <% component.item(bg: :blue_4, percentage: 50) %>
     #   <% end %>
     #
     # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.slot(:item, bg: :red_4, percentage: 75) %>
+    #     <% component.item(bg: :red_4, percentage: 75) %>
     #   <% end %>
     #
     # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.slot(:item, percentage: 10) %>
-    #     <% component.slot(:item, bg: :blue_4, percentage: 20) %>
-    #     <% component.slot(:item, bg: :red_4, percentage: 30) %>
+    #     <% component.item(percentage: 10) %>
+    #     <% component.item(bg: :blue_4, percentage: 20) %>
+    #     <% component.item(bg: :red_4, percentage: 30) %>
     #   <% end %>
     #
     # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
@@ -53,24 +69,5 @@ module Primer
     def render?
       items.any?
     end
-
-    # :nodoc:
-    class Item < Primer::Slot
-      attr_reader :system_arguments
-
-      # @param percentage [Integer] Percentage completion of item.
-      # @param bg [Symbol] Color of item.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(percentage: 0, bg: :green, **system_arguments)
-        @percentage = percentage
-        @system_arguments = system_arguments
-
-        @system_arguments[:tag] = :span
-        @system_arguments[:bg] = bg
-        @system_arguments[:style] =
-          join_style_arguments(@system_arguments[:style], "width: #{@percentage}%;")
-        @system_arguments[:classes] = class_names("Progress-item", @system_arguments[:classes])
-      end
-    end
   end
 end

data/app/components/primer/spinner_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Use Primer::SpinnerComponent to let users know that content is being loaded.
   class SpinnerComponent < Primer::Component
+    status :beta
+
     DEFAULT_SIZE = :medium
     SIZE_MAPPINGS = {
       :small => 16,
@@ -34,9 +36,5 @@ module Primer
       @system_arguments[:viewBox] = "0 0 16 16"
       @system_arguments[:fill] = :none
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

data/app/components/primer/state_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Component for rendering the status of an item.
   class StateComponent < Primer::Component
+    status :beta
+
     COLOR_DEFAULT = :default
     NEW_COLOR_MAPPINGS = {
       open: "State--open",
@@ -68,9 +70,5 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

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

@@ -1,17 +1,5 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if heading.present? %>
-    <%= render Primer::BaseComponent.new(**heading.system_arguments) do %>
-      <%= heading.content %>
-    <% end %>
-  <% end %>
-  <% if actions.present? %>
-    <%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
-      <%= actions.content %>
-    <% end %>
-  <% end %>
-  <% if description.present? %>
-    <%= render Primer::BaseComponent.new(**description.system_arguments) do %>
-      <%= description.content %>
-    <% end %>
-  <% end %>
+  <%= heading %>
+  <%= actions %>
+  <%= description %>
 <% end %>

data/app/components/primer/subhead_component.rb

@@ -3,41 +3,74 @@
 module Primer
   # Use the Subhead component for page headings.
   class SubheadComponent < Primer::Component
-    include ViewComponent::Slotable
+    status :beta
 
-    with_slot :heading, class_name: "Heading"
-    with_slot :actions, class_name: "Actions"
-    with_slot :description, class_name: "Description"
+    include ViewComponent::SlotableV2
+
+    # The heading
+    #
+    # @param danger [Boolean] Whether to style the heading as dangerous.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :heading, lambda { |danger: false, **system_arguments|
+      system_arguments[:tag] ||= :div
+      system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        "Subhead-heading",
+        "Subhead-heading--danger": danger
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # Actions
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :actions, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # The description
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :description, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     # @example Default
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.slot(:description) do %>
+    #     <% component.description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example Without border
     #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.slot(:description) do %>
+    #     <% component.description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.slot(:description) do %>
+    #     <% component.description do %>
     #       My Description
     #     <% end %>
-    #     <% component.slot(:actions) do %>
+    #     <% component.actions do %>
     #       <%= render(
     #         Primer::ButtonComponent.new(
     #           tag: :a, href: "http://www.google.com", button_type: :danger
@@ -66,52 +99,5 @@ module Primer
     def render?
       heading.present?
     end
-
-    # :nodoc:
-    class Heading < ViewComponent::Slot
-      include ClassNameHelper
-
-      attr_reader :system_arguments
-
-      # @param danger [Boolean] Whether to style the heading as dangerous.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(danger: false, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] ||= :div
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "Subhead-heading",
-          "Subhead-heading--danger": danger
-        )
-      end
-    end
-
-    # :nodoc:
-    class Actions < ViewComponent::Slot
-      include ClassNameHelper
-
-      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], "Subhead-actions")
-      end
-    end
-
-    # :nodoc:
-    class Description < ViewComponent::Slot
-      include ClassNameHelper
-
-      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], "Subhead-description")
-      end
-    end
   end
 end

data/app/components/primer/time_ago_component.js

@@ -0,0 +1 @@
+import '@github/time-elements';

data/app/components/primer/time_ago_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
+  class TimeAgoComponent < Primer::Component
+    #
+    # @example Default
+    #   <%= render(Primer::TimeAgoComponent.new(time: Time.at(628232400))) %>
+    #
+    # @param time [Time] The time to be formatted
+    # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(time:, micro: false, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:datetime] = time.utc.iso8601
+      @system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
+      @system_arguments[:tag] = "time-ago"
+      @system_arguments[:format] = "micro" if micro
+      @time = time
+      @micro = micro
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { time_in_words }
+    end
+
+    private
+
+    def time_in_words
+      return @time.in_time_zone.strftime("%b %-d, %Y") unless @micro
+
+      seconds_ago = Time.current - @time
+
+      if seconds_ago < 1.minute
+        "1m"
+      elsif seconds_ago >= 1.minute && seconds_ago < 1.hour
+        "#{(seconds_ago / 60).floor}m"
+      elsif seconds_ago >= 1.hour && seconds_ago < 1.day
+        "#{(seconds_ago / 60 / 60).floor}h"
+      elsif seconds_ago >= 1.day && seconds_ago < 1.year
+        "#{(seconds_ago / 60 / 60 / 24).floor}d"
+      elsif seconds_ago >= 1.year
+        "#{(seconds_ago / 60 / 60 / 24 / 365).floor}y"
+      end
+    end
+  end
+end