primer_view_components 0.0.1 → 0.0.3

data/app/components/primer/flex_item_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  class FlexItemComponent < Primer::Component
+    FLEX_AUTO_DEFAULT = false
+    FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true]
+
+    def initialize(flex_auto: FLEX_AUTO_DEFAULT, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:classes] =
+        class_names(
+          @kwargs[:classes],
+          "flex-auto" => fetch_or_fallback(FLEX_AUTO_ALLOWED_VALUES, flex_auto, FLEX_AUTO_DEFAULT)
+        )
+    end
+
+    def call
+      render(Primer::BoxComponent.new(**@kwargs)) { content }
+    end
+  end
+end

data/app/components/primer/heading_component.rb

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

data/app/components/primer/label_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Primer
+  class LabelComponent < Primer::Component
+    SCHEME_MAPPINGS = {
+      # gray
+      gray: "Label--gray",
+      dark_gray: "Label--gray-darker",
+
+      # colored
+      yellow: "Label--yellow",
+      orange: "Label--orange",
+      red: "Label--red",
+      green: "Label--green",
+      blue: "Label--blue",
+      purple: "Label--purple",
+      pink: "Label--pink",
+
+      # Deprecated
+      outline: "Label--outline",
+      green_outline: "Label--outline-green",
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
+
+    VARIANT_MAPPINGS = {
+      large: "Label--large",
+      inline: "Label--inline",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
+
+    def initialize(title:, scheme: nil, variant: nil, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:bg] = :blue if scheme.nil?
+      @kwargs[:tag] ||= :span
+      @kwargs[:title] = title
+      @kwargs[:classes] = class_names(
+        "Label",
+        kwargs[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme)],
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render(Primer::FlexComponent.new(**@kwargs)) do %>
+  <% if @side == :left %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, 3] : 3), mb: (@responsive ? [4, nil, 0] : nil)) do %>
+      <%= sidebar %>
+    <% end %>
+  <% end %>
+
+  <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, 9] : 9), mb: (@responsive ? [4, nil, 0] : nil)) do %>
+    <%= main %>
+  <% end %>
+
+  <% if @side == :right %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, 3] : 3)) do %>
+      <%= sidebar %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/layout_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  class LayoutComponent < Primer::Component
+    with_content_areas :main, :sidebar
+
+    DEFAULT_SIDE = :right
+    ALLOWED_SIDES = [DEFAULT_SIDE, :left]
+
+    def initialize(responsive: false, side: DEFAULT_SIDE, **kwargs)
+      @kwargs = kwargs
+      @side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
+      @responsive = responsive
+      @kwargs[:classes] = class_names(
+        "gutter-condensed gutter-lg",
+        @kwargs[:classes]
+      )
+      @kwargs[:direction] = responsive ? [:column, nil, :row] : nil
+    end
+  end
+end

data/app/components/primer/link_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Primer
+  class LinkComponent < Primer::Component
+    def initialize(href:, muted: false, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :a
+      @kwargs[:href] = href
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "muted-link" => fetch_or_fallback([true, false], muted, false)
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

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

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

data/app/components/primer/progress_bar_component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+##
+# Use progress components to visualize task completion.
+
+## Basic example
+#
+# The `Primer::ProgressBarComponent` can take the following arguments:
+#
+# 1. `size` (string). Can be "small" or "large". Increases the height of the progress bar.
+#
+# The `Primer::ProgressBarComponent` 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 accepts a `percentage` parameter, which is used to set the width of the completed bar.
+#
+# ```ruby
+#   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
+#     <% component.slot(:item, bg: :blue-4, percentage: 50) %>
+#   <% end %>
+# ```
+##
+module Primer
+  class ProgressBarComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :item, collection: true, class_name: "Item"
+
+    SIZE_DEFAULT = :default
+
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :small => "Progress--small",
+      :large => "Progress--large",
+    }.freeze
+
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(size: SIZE_DEFAULT, percentage: 0, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "Progress",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+      )
+      @kwargs[:tag] = :span
+
+    end
+
+    def render?
+      items.any?
+    end
+
+    class Item < ViewComponent::Slot
+      include ClassNameHelper
+      attr_reader :kwargs
+
+      def initialize(percentage: 0, bg: :green, **kwargs)
+        @percentage = percentage
+        @kwargs = kwargs
+
+        @kwargs[:tag] = :span
+        @kwargs[:bg] = bg
+        @kwargs[:style] = "width: #{@percentage}%;"
+        @kwargs[:classes] = class_names("Progress-item", @kwargs[:classes])
+      end
+    end
+  end
+end

data/app/components/primer/slot.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Primer
+  class Slot < ViewComponent::Slot
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+  end
+end

data/app/components/primer/state_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Primer
+  class StateComponent < Primer::Component
+    # Component for rendering the status of an item
+    #
+    # title(string): (required) title attribute
+    # color(symbol): label background color
+    # size(symbol): label size
+    # counter(integer): counter value
+    # **args(hash): utility parameters for Primer::Classify
+    COLOR_DEFAULT = :default
+    COLOR_MAPPINGS = {
+      COLOR_DEFAULT => "",
+      :green => "State--green",
+      :red => "State--red",
+      :purple => "State--purple",
+    }.freeze
+    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+
+    SIZE_DEFAULT = :default
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :small => "State--small",
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    TAG_DEFAULT = :span
+    TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
+
+    def initialize(
+      title:,
+      color: COLOR_DEFAULT,
+      tag: TAG_DEFAULT,
+      size: SIZE_DEFAULT,
+      **kwargs
+    )
+      @kwargs = kwargs
+      @kwargs[:title] = title
+      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "State",
+        COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

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

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

data/app/components/primer/subhead_component.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+# This component consists of a .Subhead container, which has a light gray bottom border.
+
+# Use a heading element whenever possible as they can be
+# used as navigation for assistive technologies, and avoid skipping levels.
+
+# ## Basic example
+
+# The `Primer::SubheadComponent` can take the following arguments:
+
+# 1. `heading` (string). The heading to be rendered.
+# 2. `actions` (content). Slot to render any actions to the right of heading.
+# 3. `description` (string). Slot to render description under the heading.
+
+# ```erb
+# <%= Primer::SubheadComponent.new(heading: "Hello world")) do |component| %>
+#   <% component.slot(:actions) do %>
+#     My Actions
+#   <% end %>
+# <% end %>
+# ```
+module Primer
+  class SubheadComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :heading, class_name: "Heading"
+    with_slot :actions, class_name: "Actions"
+    with_slot :description, class_name: "Description"
+
+    def initialize(spacious: false, hide_border: false, **kwargs)
+      @kwargs = kwargs
+
+      @kwargs[:tag] = :div
+      @kwargs[:classes] =
+        class_names(
+          @kwargs[:classes],
+          "Subhead hx_Subhead--responsive",
+          "Subhead--spacious": spacious,
+          "border-bottom-0": hide_border
+        )
+      @kwargs[:mb] ||= hide_border ? 0 : nil
+    end
+
+    def render?
+      heading.present?
+    end
+
+    class Heading < ViewComponent::Slot
+      include ClassNameHelper
+
+      attr_reader :kwargs
+
+      def initialize(danger: false, **kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] ||= :div
+        @kwargs[:classes] = class_names(
+          @kwargs[:classes],
+          "Subhead-heading",
+          "Subhead-heading--danger": danger
+        )
+      end
+    end
+
+    class Actions < ViewComponent::Slot
+      include ClassNameHelper
+
+      attr_reader :kwargs
+
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(@kwargs[:classes], "Subhead-actions")
+      end
+    end
+
+    class Description < ViewComponent::Slot
+      include ClassNameHelper
+
+      attr_reader :kwargs
+
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(@kwargs[:classes], "Subhead-description")
+      end
+    end
+  end
+end

data/app/components/primer/text_component.rb

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

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

@@ -0,0 +1,17 @@
+<%= render Primer::BaseComponent.new(**kwargs) do %>
+  <% if avatar %>
+    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.kwargs) %>
+  <% end %>
+
+  <% if badge %>
+    <%= render Primer::BaseComponent.new(**badge.kwargs) do %>
+      <%= octicon badge.icon %>
+    <% end %>
+  <% end %>
+
+  <% if body %>
+    <%= render Primer::BaseComponent.new(**body.kwargs) do %>
+      <%= body.content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/timeline_item_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Primer
+  class TimelineItemComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :avatar, class_name: "Avatar"
+    with_slot :badge, class_name: "Badge"
+    with_slot :body, class_name: "Body"
+
+    attr_reader :kwargs
+    def initialize(condensed: false, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+      @kwargs[:classes] = class_names(
+        "TimelineItem",
+        condensed ? "TimelineItem--condensed" : "",
+        kwargs[:classes]
+      )
+    end
+
+    def render?
+      avatar.present? || badge.present? || body.present?
+    end
+
+    class Avatar < Primer::Slot
+      attr_reader :kwargs, :alt, :src, :size, :square
+      def initialize(alt: nil, src: nil, size: 40, square: true, **kwargs)
+        @alt = alt
+        @src = src
+        @size = size
+        @square = square
+
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "TimelineItem-avatar",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Badge < Primer::Slot
+      attr_reader :kwargs, :icon
+      def initialize(icon: nil, **kwargs)
+        @icon = icon
+
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "TimelineItem-badge",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Body < Primer::Slot
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "TimelineItem-body",
+          kwargs[:classes]
+        )
+      end
+    end
+  end
+end