primer_view_components 0.0.1 → 0.0.7

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

@@ -0,0 +1,26 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <% if header %>
+    <%= render Primer::BaseComponent.new(**header.kwargs) do %>
+      <%= header.content %>
+    <% end %>
+  <% end %>
+  <% if body %>
+    <%= render Primer::BaseComponent.new(**body.kwargs) do %>
+      <%= body.content %>
+    <% end %>
+  <% end %>
+  <% if rows.any? %>
+    <ul>
+      <% rows.each do |row| %>
+        <%= render Primer::BaseComponent.new(**row.kwargs) do %>
+          <%= row.content %>
+        <% end %>
+      <% end %>
+    </ul>
+  <% end %>
+  <% if footer %>
+    <%= render Primer::BaseComponent.new(**footer.kwargs) do %>
+      <%= footer.content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/border_box_component.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Primer
+  class BorderBoxComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :header, class_name: "Header"
+    with_slot :body, class_name: "Body"
+    with_slot :footer, class_name: "Footer"
+    with_slot :row, collection: true, class_name: "Row"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+      @kwargs[:classes] = class_names(
+        "Box",
+        kwargs[:classes]
+      )
+    end
+
+    def render?
+      rows.any? || header.present? || body.present? || footer.present?
+    end
+
+    class Header < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "Box-header",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Body < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "Box-body",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Footer < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "Box-footer",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Row < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :li
+        @kwargs[:classes] = class_names(
+          "Box-row",
+          kwargs[:classes]
+        )
+      end
+    end
+  end
+end

data/app/components/primer/box_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  class BoxComponent < Primer::Component
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <ol>
+    <% items.each do |item| %>
+      <%# The <li> and <a> need to be on the same line to prevent unwanted whitespace %>
+      <%= render Primer::BaseComponent.new(**item.kwargs) do %><%- if item.href.present? %><a href="<%= item.href %>"><%= item.content %></a><%- else %><%= item.content %><%- end %><%- end %>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/primer/breadcrumb_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+##
+# Breadcrumbs are used to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item which is a plain string indicating the current page.
+#
+# ## Example
+#
+# The `Primer::BreadcrumbComponent` uses the [Slots API](https://github.com/github/view_component#slots-experimental) and at least one slot is required for the component to render. Each slot can accept the following parameters:
+#
+# 1. `href` (string). The URL to link to.
+# 2. `selected` (boolean, default=false). Flag indicating whether or not the item is selected and not rendered as a link.
+#
+# Note that if if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link.
+#
+# ```ruby
+# <%= render(Primer::BreadcrumbComponent.new) do |component| %>
+#   <% component.slot(:item, href: "/") do %>Home<% end %>
+#   <% component.slot(:item, href: "/about") do %>About<% end %>
+#   <% component.slot(:item, selected: true) do %>Team<% end %>
+# <% end %>
+# ```
+##
+module Primer
+  class BreadcrumbComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :item, collection: true, class_name: "BreadcrumbItem"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :nav
+      @kwargs[:aria] = { label: "Breadcrumb" }
+    end
+
+    def render?
+      items.any?
+    end
+
+    class BreadcrumbItem < Primer::Slot
+      attr_reader :href, :kwargs
+
+      def initialize(href: nil, selected: false, **kwargs)
+        @href, @kwargs = href, kwargs
+
+        @href = nil if selected
+        @kwargs[:tag] = :li
+        @kwargs[:"aria-current"] = "page" if selected
+        @kwargs[:classes] = "breadcrumb-item #{@kwargs[:classes]}"
+      end
+    end
+  end
+end

data/app/components/primer/button_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Primer
+  class ButtonComponent < Primer::Component
+    DEFAULT_BUTTON_TYPE = :default
+    BUTTON_TYPE_MAPPINGS = {
+      DEFAULT_BUTTON_TYPE => "",
+      :primary => "btn-primary",
+      :danger => "btn-danger",
+      :outline => "btn-outline"
+    }.freeze
+    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+
+    DEFAULT_VARIANT = :medium
+    VARIANT_MAPPINGS = {
+      :small => "btn-sm",
+      DEFAULT_VARIANT => "",
+      :large => "btn-large",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+    def initialize(
+      button_type: DEFAULT_BUTTON_TYPE,
+      variant: DEFAULT_VARIANT,
+      tag: DEFAULT_TAG,
+      type: DEFAULT_TYPE,
+      group_item: false,
+      **kwargs
+    )
+      @kwargs = kwargs
+      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag.to_sym, DEFAULT_TAG)
+
+      if @kwargs[:tag] == :a
+        @kwargs[:role] = :button
+      else
+        @kwargs[:type] = type.to_sym
+      end
+
+      @kwargs[:classes] = class_names(
+        "btn",
+        kwargs[:classes],
+        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type.to_sym, DEFAULT_BUTTON_TYPE)],
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant.to_sym, DEFAULT_VARIANT)],
+        "BtnGroup-item" => group_item
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Primer
+  class Component < ViewComponent::Base
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include OcticonsHelper
+  end
+end

data/app/components/primer/counter_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Primer
+  class CounterComponent < Primer::Component
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "Counter",
+      :gray => "Counter Counter--gray",
+      :light_gray => "Counter Counter--gray-light",
+    }.freeze
+
+    # @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,
+      limit: 5_000,
+      hide_if_zero: false,
+      text: "",
+      round: false,
+      **kwargs
+    )
+      @count, @limit, @hide_if_zero, @text, @round, @kwargs = count, limit, hide_if_zero, text, round, kwargs
+
+      @kwargs[:title] = title
+      @kwargs[:tag] = :span
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
+      )
+      if count == 0 && hide_if_zero
+        @kwargs[:hidden] = true
+      end
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { value }
+    end
+
+    private
+
+    def title
+      if @text.present?
+        @text
+      elsif @count.nil?
+        "Not available"
+      elsif @count == Float::INFINITY
+        "Infinity"
+      else
+        count = @count.to_i
+        str = number_with_delimiter([count, @limit].min)
+        str += "+" if count > @limit
+        str
+      end
+    end
+
+    def value
+      if @text.present?
+        @text
+      elsif @count.nil?
+        "" # CSS will hide it
+      elsif @count == Float::INFINITY
+        "∞"
+      else
+        if @round
+          count = [@count.to_i, @limit].min
+          precision = count.between?(100_000, 999_999) ? 0 : 1
+          units = {thousand: "k", million: "m", billion: "b"}
+          str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
+        else
+          @count = @count.to_i
+          str = number_with_delimiter([@count, @limit].min)
+        end
+
+        str += "+" if @count.to_i > @limit
+        str
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render summary.component do %>
+    <%= summary.content %>
+  <% end %>
+  <%= render body.component do %>
+    <%= body.content %>
+  <% end %>
+<% end %>

data/app/components/primer/details_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Primer
+  #
+  # overlay - options are `none`, `default` and `dark`. Dictates the type of overlay to render with.
+  # button - options are `default` and `reset`. default will make the target a default primer ``.btn`
+  #          reset will remove all styles from the <summary> element.
+  #
+  class DetailsComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    OVERLAY_DEFAULT = :none
+    OVERLAY_MAPPINGS = {
+      OVERLAY_DEFAULT => "",
+      :default => "details-overlay",
+      :dark => "details-overlay details-overlay-dark",
+    }.freeze
+
+    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.to_sym, OVERLAY_DEFAULT)],
+        "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
+
+      def component
+        Primer::BaseComponent.new(**@kwargs)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <% if @header.present? %>
+    <div class="dropdown-header">
+      <%= @header %>
+    </div>
+  <% end %>
+  <%= content %>
+<% end %>

data/app/components/primer/dropdown_menu_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  class DropdownMenuComponent < Primer::Component
+    SCHEME_DEFAULT = :default
+    SCHEME_MAPPINGS = {
+      SCHEME_DEFAULT => "",
+      :dark => "dropdown-menu-dark",
+    }.freeze
+
+    DIRECTION_DEFAULT = :se
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s]
+
+    def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **kwargs)
+      @header, @direction, @kwargs = header, direction, kwargs
+
+      @kwargs[:tag] = "details-menu"
+      @kwargs[:role] = "menu"
+
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "dropdown-menu",
+        "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
+      )
+    end
+  end
+end