pulse_view_components 0.3.0

data/app/components/pulse/action_list.rb

@@ -0,0 +1,261 @@
+# frozen_string_literal: true
+
+module Pulse
+  # An ActionList is a styled list of links. It acts as the base component for many
+  # other menu-type components, including `ActionMenu` and `SelectPanel`, as well as
+  # the navigational component `NavList`.
+  #
+  # Each item in an action list can be augmented by specifying corresponding leading
+  # and/or trailing visuals.
+  class ActionList < Pulse::Component
+    DEFAULT_ROLE = :list
+
+    MENU_ROLE = :menu
+    DEFAULT_MENU_ITEM_ROLE = :menuitem
+
+    DEFAULT_SCHEME = :full
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => nil,
+      :inset => 'ActionListWrap--inset'
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+    DEFAULT_SELECT_VARIANT = :none
+    SELECT_VARIANT_OPTIONS = [
+      :single,
+      :multiple,
+      :multiple_checkbox,
+      DEFAULT_SELECT_VARIANT
+    ].freeze
+
+    SELECT_VARIANT_ROLE_MAP = {
+      single: :menuitemradio,
+      multiple: :menuitemcheckbox,
+      multiple_checkbox: :menuitemcheckbox
+    }.freeze
+
+    # simplecov:disable
+    # @private
+    def self.custom_element_name
+      @custom_element_name ||= name.split('::').last.underscore.dasherize
+    end
+
+    # @private
+    delegate :custom_element_name, to: :class
+    # simplecov:enable
+
+    # Heading text rendered above the list of items.
+    #
+    # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::ActionList::Heading) %>.
+    renders_one :heading, lambda { |**system_arguments|
+      Heading.new(**system_arguments)
+    }
+
+    # @!parse
+    #   # Adds an item to the list.
+    #   #
+    #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::ActionList::Item) %>
+    #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    #   def with_item(**system_arguments, &block)
+    #   end
+
+    # @!parse
+    #   # Adds a divider to the list. Dividers visually separate items.
+    #   #
+    #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::ActionList::Divider) %>.
+    #   def with_divider(**system_arguments, &block)
+    #   end
+
+    # @!parse
+    #   # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+    #   #
+    #   # @param src [String] The source url of the avatar image.
+    #   # @param username [String] The username associated with the avatar.
+    #   # @param full_name [String] Optional. The user's full name.
+    #   # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Pulse::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+    #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::ActionList::Item) %>
+    #   # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Pulse::Avatar) %>
+    #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    #   def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Pulse::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: ActionList::Item, avatar_arguments: {}, **system_arguments, &block)
+    #   end
+
+    # Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.
+    #
+    renders_many :items, types: {
+      item: {
+        renders: lambda { |**system_arguments|
+          build_item(**system_arguments).tap do |item|
+            will_add_item(item)
+          end
+        },
+
+        as: :item
+      },
+
+      avatar_item: {
+        renders: lambda { |**system_arguments|
+          build_avatar_item(**system_arguments).tap do |item|
+            will_add_item(item)
+          end
+        },
+
+        as: :avatar_item
+      },
+
+      divider: {
+        renders: ActionList::Divider,
+        as: :divider
+      }
+    }
+
+    attr_reader :id, :select_variant, :role
+
+    # @param id [String] HTML ID value.
+    # @param role [Boolean] ARIA role describing the function of the list. listbox and menu are a common values.
+    # @param item_classes [String] Additional CSS classes to attach to items.
+    # @param scheme [Symbol] <%= one_of(Pulse::ActionList::SCHEME_OPTIONS) %> `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges.
+    # @param show_dividers [Boolean] Display a divider above each item in the list when it does not follow a header or divider.
+    # @param select_variant [Symbol] How items may be selected in the list. <%= one_of(Pulse::ActionList::SELECT_VARIANT_OPTIONS) %>
+    # @param form_arguments [Hash] Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an <%= link_to_component(Pulse::ActionMenu) %> instead of using this feature directly.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      id: self.class.generate_id,
+      role: nil,
+      item_classes: nil,
+      scheme: DEFAULT_SCHEME,
+      show_dividers: false,
+      select_variant: DEFAULT_SELECT_VARIANT,
+      form_arguments: {},
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @id = id
+      @system_arguments[:id] = @id
+      @system_arguments[:tag] = :ul
+      @item_classes = item_classes
+      @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+      @show_dividers = show_dividers
+      @select_variant = select_variant
+      @system_arguments[:classes] = merge_classes(
+        SCHEME_MAPPINGS[@scheme],
+        system_arguments[:classes],
+        'ActionListWrap--divided' => @show_dividers
+      )
+
+      @role = role || (allows_selection? ? MENU_ROLE : DEFAULT_ROLE)
+      @system_arguments[:role] = @role
+
+      @list_wrapper_arguments = {}
+
+      @form_builder = form_arguments[:builder]
+      @input_name = form_arguments[:name]
+
+      return unless required_form_arguments_given? && !allows_selection?
+
+      raise ArgumentError,
+            'lists/menus that act as form inputs must also allow item ' \
+            'selection (please pass the `select_variant:` option)'
+    end
+
+    # @private
+    def before_render
+      return unless heading?
+
+      @system_arguments[:'aria-labelledby'] = heading.title_id
+      return unless heading.subtitle?
+
+      @system_arguments[:'aria-describedby'] =
+        heading.subtitle_id
+    end
+
+    # Builds a new item but does not add it to the list. Use this method
+    # instead of the `#with_item` slot if you need to render an item outside
+    # the context of a list, eg. if rendering additional items to append to
+    # an existing list, perhaps via a separate HTTP request.
+    #
+    # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::ActionList::Item) %>
+    # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    def build_item(component_klass: ActionList::Item, **system_arguments)
+      if single_select? &&
+         system_arguments[:active] &&
+         items.any?(&:active?)
+        raise ArgumentError,
+              'only a single item may be active when select_variant is ' \
+              'set to :single'
+      end
+      system_arguments[:classes] = merge_classes(
+        @item_classes,
+        system_arguments[:classes]
+      )
+
+      component_klass.new(list: self, **system_arguments)
+    end
+
+    # Builds a new avatar item but does not add it to the list. Avatar items
+    # are a convenient way to accessibly add an item with a leading avatar
+    # image. Use this method instead of the `#with_avatar_item` slot if you
+    # need to render an avatar item outside the context of a list, eg. if
+    # rendering additional items to append to an existing list, perhaps via
+    # a separate HTTP request.
+    #
+    # @param src [String] The source url of the avatar image.
+    # @param username [String] The username associated with the avatar.
+    # @param full_name [String] Optional. The user's full name.
+    # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Pulse::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+    # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::ActionList::Item) %>
+    # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Pulse::Avatar) %>
+    # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    def build_avatar_item(
+      src:, username:, full_name: nil,
+      full_name_scheme: Pulse::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME,
+      component_klass: ActionList::Item, avatar_arguments: {},
+      **system_arguments
+    )
+      build_item(label: username, description_scheme: full_name_scheme,
+                 component_klass:, **system_arguments).tap do |item|
+        item.with_leading_visual_raw_content do
+          # no alt text necessary for presentational item
+          item.render(Pulse::Avatar.new(src:, **avatar_arguments,
+                                        role: :presentation, size: 16))
+        end
+
+        item.with_description_content(full_name) if full_name
+      end
+    end
+
+    def single_select?
+      select_variant == :single
+    end
+
+    def multi_select?
+      [:multiple, :multiple_checkbox].include?(select_variant)
+    end
+
+    def allows_selection?
+      single_select? || multi_select?
+    end
+
+    def acts_as_menu?
+      @system_arguments[:role] == :menu
+    end
+
+    def required_form_arguments_given?
+      @form_builder && @input_name
+    end
+
+    def acts_as_form_input?
+      required_form_arguments_given? && allows_selection?
+    end
+
+    # @private
+    def will_add_item(_item); end
+
+    private
+
+    def with_post_list_content(&block)
+      @post_list_content_block = block
+    end
+
+    attr_reader :post_list_content_block
+  end
+end

data/app/components/pulse/badge.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a badge component
+  # see: /lookbook/inspect/pulse/badge/default
+  class Badge < Pulse::Component
+    DEFAULT_TAG = :span
+    TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
+
+    DEFAULT_VARIANT = :standard
+    VARIANT_MAPPINGS = {
+      standard: 'pulse-inline-block pulse-rounded pulse-uppercase ' \
+                'pulse-py-0.5 pulse-px-1.5 pulse-text-[10px] ' \
+                'pulse-font-bold',
+      pill: 'pulse-inline-block pulse-rounded-2xl pulse-min-w-[8rem] ' \
+            'pulse-text-center pulse-p-2 pulse-text-sm ' \
+            'pulse-leading-none pulse-font-bold'
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys.freeze
+
+    DEFAULT_SCHEME = :secondary
+    SCHEME_MAPPINGS = {
+      primary: 'pulse-bg-primary pulse-text-white hover:pulse-text-white',
+      secondary: 'pulse-bg-secondary pulse-text-white',
+      secondary_outline: 'pulse-bg-white pulse-border pulse-border-secondary ' \
+                         'pulse-text-secondary ' \
+                         'pulse-hover:pulse-text-secondary',
+      invited: 'pulse-bg-secondary-200 pulse-text-gray ' \
+               'pulse-hover:pulse-text-gray',
+      active: 'pulse-bg-success-200 pulse-text-gray hover:pulse-text-gray',
+      disabled: 'pulse-bg-gray-100 pulse-text-gray hover:pulse-text-gray',
+      info: 'pulse-bg-gray-600 pulse-text-white hover:pulse-text-white'
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+    def initialize(tag: DEFAULT_TAG, variant: DEFAULT_VARIANT,
+                   scheme: DEFAULT_SCHEME, **system_arguments)
+      @system_arguments = system_arguments
+
+      @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)
+      @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+      @system_arguments[:classes] = merge_classes(
+        VARIANT_MAPPINGS[@variant],
+        SCHEME_MAPPINGS[@scheme],
+        system_arguments[:classes]
+      )
+    end
+
+    def call
+      render(Pulse::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/pulse/base_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Pulse
+  # BaseComponent accepts a standard set of options, providing the
+  # foundation for other components to use and build upon. Specify a tag,
+  # optional classes, and any other additional options will be passed to
+  # Rails' `content_tag` helper.
+  #
+  # This is a simplified version of Primer's `BaseComponent`
+  #
+  # For example:
+  #
+  # ```erb
+  # <%= render Pulse::BaseComponent.new(tag: :span, classes: "text-sm") do %>
+  #   Hello world
+  # <% end %>
+  # ```
+  #
+  # Renders:
+  #
+  # ```html
+  # <span class="text-sm">Hello world</span>
+  # ```
+  #
+  class BaseComponent < Pulse::Component
+    def initialize(tag:, classes: nil, **system_arguments)
+      @tag = tag
+      @classes = classes
+      @system_arguments = system_arguments
+    end
+
+    def call
+      content_tag(@tag, content, class: @classes, **@system_arguments)
+    end
+  end
+end

data/app/components/pulse/blank_slate.html.slim

@@ -0,0 +1,10 @@
+/! components/ui/blank_slate
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  / div class="flex items-center justify-center mb-4"
+  /   = render_svg 'blank-graphic'
+  = render Pulse::Text.new(type: :body1) do
+    = title || t('.empty')
+
+  - if description.present?
+    = render Pulse::Text.new(type: :body4) do
+      = description

data/app/components/pulse/blank_slate.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Use as placeholder when content is missing
+  class BlankSlate < Pulse::Component
+    renders_one :title
+    renders_one :description
+
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:classes] = merge_classes(
+        'pulse-container pulse-text-center pulse-pt-16 pulse-pb-20',
+        'pulse-bg-secondary-50',
+        system_arguments[:classes]
+      )
+    end
+  end
+end

data/app/components/pulse/blank_slate.yml

@@ -0,0 +1,2 @@
+en:
+  empty: "Nothing to see here."

data/app/components/pulse/border_box/header.html.slim

@@ -0,0 +1,4 @@
+/! components/pulse/border_box/header
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  = title
+  = content

data/app/components/pulse/border_box/header.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Pulse
+  class BorderBox
+    # `BorderBox::Header` is used inside `BorderBox` to render its header slot.
+    #
+    # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
+    class Header < Pulse::Component
+      attr_reader :id
+
+      TITLE_TAG_FALLBACK = :h2
+      TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+      # Optional Title.
+      #
+      # @param tag [Symbol] <%= one_of(Pulse::BorderBox::Header::TITLE_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :title, lambda { |tag:, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(
+          TITLE_TAG_OPTIONS,
+          tag,
+          TITLE_TAG_FALLBACK
+        )
+        system_arguments[:classes] = class_names(
+          'Box-title',
+          system_arguments[:classes]
+        )
+
+        Pulse::BaseComponent.new(**system_arguments)
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:id] ||= self.class.generate_id
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          'pulse-px-4 pulse-py-5 pulse-bg-gray-50 sm:pulse-p-6',
+          'pulse-rounded-t-md pulse-border-b pulse-border-gray-300',
+          'pulse-border-solid',
+          'Box-header',
+          system_arguments[:classes]
+        )
+        @id = @system_arguments[:id]
+      end
+    end
+  end
+end

data/app/components/pulse/border_box.html.slim

@@ -0,0 +1,10 @@
+/! components/pulse/border_box
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  = header
+  = body
+  - if rows.any?
+    = render Pulse::BaseComponent.new(**@list_arguments) do
+      - rows.each do |row|
+        = row
+
+  = footer

data/app/components/pulse/border_box.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module Pulse
+  # `BorderBox` is a Box component with a border.
+  class BorderBox < Pulse::Component
+    DEFAULT_PADDING = :default
+    PADDING_MAPPINGS = {
+      DEFAULT_PADDING => '',
+      :condensed => 'Box--condensed',
+      :spacious => 'Box--spacious'
+    }.freeze
+    PADDING_SUGGESTION = "Perhaps you could consider using :padding options " \
+                         "of #{PADDING_MAPPINGS.keys.to_sentence}?".freeze
+
+    DEFAULT_ROW_SCHEME = :default
+    ROW_SCHEME_MAPPINGS = {
+      DEFAULT_ROW_SCHEME => '',
+      :neutral => 'Box-row--gray',
+      :info => 'Box-row--blue',
+      :warning => 'Box-row--yellow'
+    }.freeze
+
+    # Optional Header.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    # @accessibility
+    # When using header.with_title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+    renders_one :header, 'Pulse::BorderBox::Header'
+
+    # Optional Body.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        'pulse-px-4 pulse-py-5 pulse-bg-white sm:pulse-p-6',
+        'pulse-border-b pulse-border-gray-300 pulse-border-solid',
+        'first-of-type:pulse-rounded-t-md',
+        'last-of-type:pulse-rounded-b-md',
+        'last-of-type:pulse-border-b-0',
+        system_arguments[:classes]
+      )
+
+      Pulse::BaseComponent.new(**system_arguments)
+    }
+
+    # Optional Footer.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :footer, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        'pulse-px-4 pulse-py-5 pulse-bg-white sm:pulse-p-6',
+        'pulse-border-t pulse-border-gray-300 pulse-border-solid',
+        '-pulse-mt-1 pulse-rounded-b-md',
+        'Box-footer',
+        system_arguments[:classes]
+      )
+
+      Pulse::BaseComponent.new(**system_arguments)
+    }
+
+    # @apply pulse-pt-[var(--stack-padding-normal)] pulse-pr-[var(--stack-padding-normal)] pulse-pb-[var(--stack-padding-normal)] pulse-pl-[var(--stack-padding-normal)] pulse-mt-[calc(var(--borderWidth-thin)_*_-1)] pulse-list-none pulse-border-t-[color:var(--borderColor-muted)] pulse-border-t-[length:var(--borderWidth-thin)] first-of-type:pulse-rounded-tl-[var(--borderRadius-medium)] first-of-type:pulse-rounded-tr-[var(--borderRadius-medium)] last-of-type:pulse-rounded-br-[var(--borderRadius-medium)] last-of-type:pulse-rounded-bl-[var(--borderRadius-medium)]; /* To account for applying Box component to a list */
+    # border-top-style: solid;
+
+    # Use Rows to add rows with borders and maintain the same padding.
+    #
+    # @param scheme [Symbol] Color scheme. <%= one_of(Pulse::BorderBox::ROW_SCHEME_MAPPINGS.keys) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME,
+                                  **system_arguments|
+      system_arguments[:tag] = :li
+      system_arguments[:classes] = class_names(
+        'pulse-px-4 pulse-py-5 pulse-bg-white sm:pulse-p-6',
+        'pulse-border-b pulse-border-gray-300 pulse-border-solid',
+        'last:pulse-border-b-0',
+        'first-of-type:pulse-rounded-t-md last-of-type:pulse-rounded-b-md',
+        ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys,
+                                              scheme, DEFAULT_ROW_SCHEME)],
+        system_arguments[:classes]
+      )
+
+      Pulse::BaseComponent.new(**system_arguments)
+    }
+
+    # @param padding [Symbol] <%= one_of(Pulse::BorderBox::PADDING_MAPPINGS.keys) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(padding: DEFAULT_PADDING, **system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        'pulse-bg-white pulse-border pulse-border-gray-300 pulse-border-solid',
+        'pulse-border-[1px] pulse-rounded-md',
+        PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding,
+                                           DEFAULT_PADDING)],
+        system_arguments[:classes]
+      )
+
+      @system_arguments[:system_arguments_denylist] =
+        { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+      @list_arguments = {
+        tag: :ul,
+        class: class_names
+        # 'pulse-divide-y pulse-divide-gray-300',
+        # 'pulse-border-b pulse-border-gray-300 pulse-border-solid'
+
+      }
+    end
+
+    def render?
+      rows.any? || header.present? || body.present? || footer.present?
+    end
+
+    private
+
+    def before_render
+      return unless header
+
+      @list_arguments[:aria] = {
+        labelledby: header.id
+      }
+    end
+  end
+end

data/app/components/pulse/box.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Pulse
+  # `Box` is a basic wrapper component for most layout related needs.
+  class Box < Pulse::Component
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @system_arguments[:tag] = :div
+    end
+
+    def call
+      render(Pulse::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/pulse/breadcrumb_item.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a breadcrumb item
+  class BreadcrumbItem < Pulse::Component
+    DEFAULT_LINK_CLASSES = 'pulse-underline'
+    DEFAULT_TEXT_CLASSES = ''
+
+    attr_reader :text, :href
+
+    def initialize(text:, href: nil, **system_arguments)
+      @text = text
+      @href = href
+      @classes = system_arguments[:classes]
+      @system_arguments = system_arguments.except(:classes)
+    end
+
+    def link?
+      @href.present?
+    end
+
+    def call
+      if link?
+        link_to(@text, @href, class: link_classes, **@system_arguments)
+      else
+        content_tag(:span, @text, class: text_classes, **@system_arguments)
+      end
+    end
+
+    private
+
+    def link_classes
+      merge_classes(DEFAULT_LINK_CLASSES, @classes)
+    end
+
+    def text_classes
+      merge_classes(DEFAULT_TEXT_CLASSES, @classes)
+    end
+  end
+end

data/app/components/pulse/breadcrumbs.html.slim

@@ -0,0 +1,9 @@
+/! components/pulse/breadcrumbs
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  ol class="pulse-list-none pulse-list-reset pulse-flex pulse-m-0 pulse-text-xs"
+    - items.filter { |i| i.text.present? }.each_with_index do |item, idx|
+      - if idx != 0
+        li class="pulse-mx-1" aria-hidden="true"
+          | >
+      li
+        = item

data/app/components/pulse/breadcrumbs.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a breadcrumb navigation list
+  class Breadcrumbs < Pulse::Component
+    renders_many :items, Pulse::BreadcrumbItem
+
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :nav
+    end
+
+    def render?
+      items.any?
+    end
+  end
+end