pulse_view_components 0.3.0

data/app/components/pulse/layout.css

@@ -0,0 +1,239 @@
+/* Layout */
+
+@define-mixin flow-as-row {
+  grid-auto-flow: row;
+  grid-template-columns: 1fr !important;
+
+  & .Layout-sidebar,
+  & .Layout-divider,
+  & .Layout-main {
+    @apply pulse-w-full pulse-col-[1];
+  }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    & .Layout-sidebar {
+      @apply pulse-row-[1];
+    }
+
+    & .Layout-main {
+      @apply pulse-row-[2_/_span_2];
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    & .Layout-sidebar {
+      @apply pulse-row-[2_/_span_2];
+    }
+
+    & .Layout-main {
+      @apply pulse-row-[1];
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    & .Layout-sidebar {
+      @apply pulse-hidden;
+    }
+  }
+
+  &.Layout--divided {
+    @mixin flow-as-row-divider;
+
+    & .Layout-main {
+      @apply pulse-row-[3_/_span_1];
+    }
+
+    &.Layout--sidebarPosition-flowRow-end {
+      & .Layout-sidebar {
+        @apply pulse-row-[3_/_span_1];
+      }
+
+      & .Layout-main {
+        @apply pulse-row-[1];
+      }
+    }
+  }
+}
+
+@define-mixin flow-as-row-divider {
+  --Layout-gutter: 0;
+
+  & .Layout-divider {
+    @apply pulse-h-px pulse-row-[2];
+
+    &.Layout-divider--flowRow-hidden {
+      @apply pulse-hidden;
+    }
+
+    &.Layout-divider--flowRow-shallow {
+      @apply pulse-h-2 pulse-border-[color:var(--borderColor-default)] pulse-border-[var(--borderWidth-thin)_0] pulse-mr-0 pulse-border-solid;
+      background: var(--bgColor-inset);
+    }
+  }
+}
+
+.Layout {
+  @apply pulse-grid pulse-grid-flow-col pulse-grid-cols-[auto_0_minmax(0,calc(100%_-_var(--Layout-sidebar-width)_-_var(--Layout-gutter)))] pulse-gap-[var(--Layout-gutter)];
+  --Layout-sidebar-width: 220px;
+  --Layout-gutter: 16px;
+}
+@media (max-width: calc(544px - 0.02px)) {
+  .Layout {
+    @mixin flow-as-row;
+  }
+}
+@media (max-width: calc(768px - 0.02px)) {
+  .Layout.Layout--flowRow-until-md {
+    @mixin flow-as-row;
+  }
+}
+@media (max-width: calc(1012px - 0.02px)) {
+  .Layout.Layout--flowRow-until-lg {
+    @mixin flow-as-row;
+  }
+}
+
+/* Flow as column */
+
+/* sidebar column, separator, main column */
+.Layout .Layout-sidebar {
+  @apply pulse-col-[1];
+}
+.Layout .Layout-divider {
+  @apply pulse-hidden;
+}
+.Layout .Layout-main {
+  @apply pulse-col-[2_/_span_2];
+}
+
+/* Gutter spacing */
+@media (min-width: 1012px) {
+  .Layout {
+    --Layout-gutter: 24px;
+  }
+}
+.Layout.Layout--gutter-none {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --Layout-gutter: 0px;
+
+  /* Neds px in value */
+}
+.Layout.Layout--gutter-condensed {
+  --Layout-gutter: 16px;
+}
+@media (min-width: 1012px) {
+  .Layout.Layout--gutter-spacious {
+    --Layout-gutter: 32px;
+  }
+}
+@media (min-width: 1280px) {
+  .Layout.Layout--gutter-spacious {
+    --Layout-gutter: 40px;
+  }
+}
+
+/* Sidebar width */
+@media (min-width: 544px) {
+  .Layout {
+    --Layout-sidebar-width: 220px;
+  }
+}
+@media (min-width: 768px) {
+  .Layout {
+    --Layout-sidebar-width: 256px;
+  }
+}
+@media (min-width: 1012px) {
+  .Layout {
+    --Layout-sidebar-width: 296px;
+  }
+}
+@media (min-width: 768px) {
+  .Layout.Layout--sidebar-narrow {
+    --Layout-sidebar-width: 240px;
+  }
+}
+@media (min-width: 1012px) {
+  .Layout.Layout--sidebar-narrow {
+    --Layout-sidebar-width: 256px;
+  }
+}
+@media (min-width: 1012px) {
+  .Layout.Layout--sidebar-wide {
+    --Layout-sidebar-width: 320px;
+  }
+}
+@media (min-width: 1280px) {
+  .Layout.Layout--sidebar-wide {
+    --Layout-sidebar-width: 336px;
+  }
+}
+
+/* Sidebar position */
+.Layout.Layout--sidebarPosition-start .Layout-sidebar {
+  @apply pulse-col-[1];
+}
+.Layout.Layout--sidebarPosition-start .Layout-main {
+  @apply pulse-col-[2_/_span_2];
+}
+.Layout.Layout--sidebarPosition-end {
+  @apply pulse-grid-cols-[minmax(0,calc(100%_-_var(--Layout-sidebar-width)_-_var(--Layout-gutter)))_0_auto];
+}
+.Layout.Layout--sidebarPosition-end .Layout-main {
+  @apply pulse-col-[1];
+}
+.Layout.Layout--sidebarPosition-end .Layout-sidebar {
+  @apply pulse-col-[2_/_span_2];
+}
+
+/* Sidebar divider */
+.Layout.Layout--divided .Layout-divider {
+  @apply pulse-block pulse-col-[2] pulse-w-px -pulse-mr-px;
+  background: var(--borderColor-default);
+}
+.Layout.Layout--divided .Layout-main {
+  @apply pulse-col-[3_/_span_1];
+}
+.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
+  @apply pulse-col-[3_/_span_1];
+}
+.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
+  @apply pulse-col-[1];
+}
+.Layout-divider {
+  @apply pulse-hidden pulse-w-px;
+}
+.Layout-sidebar {
+  @apply pulse-w-[var(--Layout-sidebar-width)];
+}
+.Layout-main {
+  @apply pulse-min-w-0;
+}
+
+/* Centered main column
+  ** FIXME: right-aligned sidebar */
+.Layout-main .Layout-main-centered-md,
+.Layout-main .Layout-main-centered-lg,
+.Layout-main .Layout-main-centered-xl {
+  @apply pulse-mx-auto;
+}
+.Layout-main .Layout-main-centered-md > .container-md,
+.Layout-main .Layout-main-centered-md > .container-lg,
+.Layout-main .Layout-main-centered-md > .container-xl,
+.Layout-main .Layout-main-centered-lg > .container-md,
+.Layout-main .Layout-main-centered-lg > .container-lg,
+.Layout-main .Layout-main-centered-lg > .container-xl,
+.Layout-main .Layout-main-centered-xl > .container-md,
+.Layout-main .Layout-main-centered-xl > .container-lg,
+.Layout-main .Layout-main-centered-xl > .container-xl {
+  @apply pulse-ml-0;
+}
+.Layout-main .Layout-main-centered-md {
+  @apply pulse-max-w-[calc(var(--breakpoint-medium)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
+}
+.Layout-main .Layout-main-centered-lg {
+  @apply pulse-max-w-[calc(var(--breakpoint-large)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
+}
+.Layout-main .Layout-main-centered-xl {
+  @apply pulse-max-w-[calc(var(--breakpoint-xlarge)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
+}

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

@@ -0,0 +1,7 @@
+/! components/pulse/layout
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  - if @first_in_source == :main
+    = main
+  = sidebar
+  - if @first_in_source == :sidebar
+    = main

data/app/components/pulse/layout.rb

@@ -0,0 +1,141 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a two-column page layout
+  class Layout < Pulse::Component
+    FIRST_IN_SOURCE_DEFAULT = :sidebar
+    FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze
+
+    GUTTER_DEFAULT = :default
+    GUTTER_MAPPINGS = {
+      # :none => "Layout--gutter-none",
+      # :condensed => "Layout--gutter-condensed",
+      # :spacious => "Layout--gutter-spacious",
+      GUTTER_DEFAULT => ''
+    }.freeze
+    GUTTER_OPTIONS = GUTTER_MAPPINGS.keys.freeze
+
+    SIDEBAR_WIDTH_DEFAULT = :default
+    SIDEBAR_WIDTH_MAPPINGS = {
+      SIDEBAR_WIDTH_DEFAULT => ''
+      # :narrow => "Layout--sidebar-narrow",
+      # :wide => "Layout--sidebar-wide"
+    }.freeze
+    SIDEBAR_WIDTH_OPTIONS = SIDEBAR_WIDTH_MAPPINGS.keys.freeze
+
+    # The layout's main content.
+    #
+    # @param width [Symbol] <%= one_of(Layout::Main::WIDTH_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :main, 'Pulse::Layout::Main'
+
+    # The layout's sidebar.
+    #
+    # @param width [Symbol] <%= one_of(Layout::SIDEBAR_WIDTH_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :sidebar, lambda { |
+      width: SIDEBAR_WIDTH_DEFAULT,
+      **system_arguments
+    |
+      # These classes have to be set in the parent `Layout` element, so we modify its system arguments.
+      @system_arguments[:classes] = merge_classes(
+        @system_arguments[:classes],
+        SIDEBAR_WIDTH_MAPPINGS[fetch_or_fallback(SIDEBAR_WIDTH_OPTIONS, width,
+                                                 SIDEBAR_WIDTH_DEFAULT)]
+      )
+
+      Pulse::Layout::Sidebar.new(**system_arguments)
+    }
+
+    # @param first_in_source [Symbol] Which element to render first in the HTML. This will change the keyboard navigation order. <%= one_of(Layout::FIRST_IN_SOURCE_OPTIONS) %>
+    # @param gutter [Symbol] The amount of space between the main section and the sidebar. <%= one_of(Layout::GUTTER_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default,
+                   **system_arguments)
+      @first_in_source = fetch_or_fallback(
+        FIRST_IN_SOURCE_OPTIONS,
+        first_in_source,
+        FIRST_IN_SOURCE_OPTIONS
+      )
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = merge_classes(
+        'pulse-grid pulse-grid-flow-col',
+        'pulse-grid-cols-[auto_0_minmax(0,calc(100%_-_var(--pulse-layout' \
+        '-sidebar-width)_-_var(--pulse-layout-gutter)))]',
+        'pulse-gap-[var(--pulse-layout-gutter)]',
+        GUTTER_MAPPINGS[fetch_or_fallback(GUTTER_OPTIONS, gutter,
+                                          GUTTER_DEFAULT)],
+        system_arguments[:classes]
+      )
+    end
+
+    def render?
+      main? && sidebar?
+    end
+
+    # The layout's main content.
+    class Main < Pulse::Component
+      WIDTH_DEFAULT = :full
+      WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze
+
+      TAG_DEFAULT = :div
+      TAG_OPTIONS = [TAG_DEFAULT, :main].freeze
+
+      # @param width [Symbol] <%= one_of(Layout::Main::WIDTH_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments)
+        @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] =
+          fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = merge_classes(
+          'pulse-col-[2_/_span_2]',
+          system_arguments[:classes]
+        )
+      end
+
+      def call
+        render(Pulse::BaseComponent.new(**@system_arguments)) do
+          if @width == :full
+            content
+          else
+            render(
+              Pulse::BaseComponent.new(
+                tag: :div,
+                classes: "pulse-mx-auto Layout-main-centered-#{@width}"
+              )
+            ) do
+              render(Pulse::BaseComponent.new(tag: :div, container: @width)) do
+                content
+              end
+            end
+          end
+        end
+      end
+    end
+
+    # The layout's sidebar content.
+    class Sidebar < Pulse::Component
+      TAG_DEFAULT = :div
+      TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze
+
+      def initialize(tag: TAG_DEFAULT, **system_arguments)
+        @system_arguments = system_arguments
+
+        @system_arguments[:tag] =
+          fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = merge_classes(
+          'pulse-col-[1]',
+          @system_arguments[:classes]
+        )
+      end
+
+      def call
+        render(Pulse::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+/! components/pulse/link
+= render Pulse::BaseComponent.new(**@options) do
+  // TODO: is there a way to check existence of icon file?? Or at least not
+  // bork the layout if it is missing
+  - if leading_visual
+    = leading_visual
+  = content

data/app/components/pulse/link.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Use `Link` for navigating from one page to another.
+  # `Link` styles anchor tags with default styling and hover
+  # text-decoration.
+  class Link < Pulse::Component
+    DEFAULT_SCHEME = :tertiary
+    SCHEME_MAPPINGS = {
+      primary: 'pulse-text-primary hover:pulse-text-primary',
+      secondary: 'pulse-text-secondary hover:pulse-text-secondary',
+      tertiary: 'pulse-text-tertiary hover:pulse-text-tertiary',
+      reversed: 'pulse-text-gray-300 hover:pulse-text-gray-300 ' \
+                'focus:pulse-text-gray-300'
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+    renders_one :leading_visual, types: {
+      icon: lambda { |**options|
+        Pulse::Icon.new(**options)
+      }
+    }
+
+    def initialize(href: nil, scheme: DEFAULT_SCHEME, bold: false,
+                   underline: true, condition: true, **options)
+      @condition = condition
+      @options = options
+      @options[:tag] = condition ? :a : :span
+      @options[:href] = href if condition
+      @options[:classes] = merge_classes(
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme,
+                                          DEFAULT_SCHEME)],
+        @options[:classes],
+        'pulse-font-bold': bold,
+        'pulse-underline hover:pulse-no-underline': condition && underline
+      )
+    end
+
+    def before_render
+      if @options[:href].nil? && @condition && !Rails.env.production?
+        raise ArgumentError, 'href is required'
+      end
+
+      return unless leading_visual
+
+      @options[:classes] = class_names(
+        @options[:classes],
+        'pulse-flex pulse-items-center pulse-gap-1.5'
+      )
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+= turbo_frame_tag 'pulse_modal' do
+  = render Pulse::BaseComponent.new(**@system_arguments) do
+    - unless auto_close
+      div class="pulse-flex pulse-items-center pulse-justify-center pulse-min-h-screen pulse-p-6 pulse-box-border"
+        /! bg overlay
+        div{
+          data-pulse--modal-target="wrapper" data-action="#{close_on_overlay_click ? 'click->pulse--modal#close' : ''}" aria-hidden="true"
+          data-transition-enter="pulse-ease-out pulse-duration-300"
+          data-transition-enter-start="pulse-opacity-0"
+          data-transition-enter-end="pulse-opacity-100"
+          data-transition-leave="pulse-ease-in pulse-duration-200"
+          data-transition-leave-start="pulse-opacity-100"
+          data-transition-leave-end="pulse-opacity-0"
+          class="pulse-fixed pulse-inset-0 pulse-bg-neutral-700/75 pulse-transition-opacity" }
+
+        /! modal
+        div{
+          data-pulse--modal-target="body"
+          data-transition-enter="pulse-ease-out pulse-duration-300"
+          data-transition-enter-start="pulse-opacity-0 pulse-translate-y-4 sm:pulse-translate-y-0 sm:pulse-scale-95"
+          data-transition-enter-end="pulse-opacity-100 pulse-translate-y-0 sm:pulse-scale-100"
+          data-transition-leave="pulse-ease-in pulse-duration-200"
+          data-transition-leave-start="pulse-opacity-100 pulse-translate-y-0 sm:pulse-scale-100"
+          data-transition-leave-end="pulse-opacity-0 pulse-translate-y-4 sm:pulse-translate-y-0 sm:pulse-scale-95"
+          class="pulse-relative pulse-z-50 pulse-bg-white pulse-shadow-xl pulse-rounded-lg pulse-transition-all #{modal_classes}"
+          role="dialog"
+          aria-modal="true"}
+
+          /! header
+          div class="pulse-flex pulse-items-center pulse-justify-between pulse-gap-4 pulse-p-4 md:pulse-p-5 pulse-border-b"
+            - if title?
+              = render Pulse::Text.new(type: :h4, el_tag: :h2, classes: 'pulse-tracking-tight pulse-text-gray pulse-truncate')
+                = title
+
+            - if close_button
+              button{
+                class="pulse-ms-auto pulse-inline-flex pulse-items-center pulse-justify-center pulse-w-10 pulse-h-7 pulse-bg-transparent pulse-border-none pulse-text-gray"
+                data-action="pulse--modal#close"
+                aria-label="Close Modal"}
+
+                = render Pulse::Icon.new(icon: :close, width: 16, height: 16)
+
+
+          /! body
+          div class="pulse-p-4 md:pulse-p-5 #{'pulse-mb-4' unless footer}"
+            = content
+
+          /! footer
+          - if footer
+            div class="pulse-flex pulse-items-center pulse-p-4 md:pulse-p-5 pulse-border-t pulse-border-gray-300"
+              = footer

data/app/components/pulse/modal.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a modal component targetable by turbo frame
+  class Modal < Pulse::Component
+    include Turbo::FramesHelper
+
+    renders_one :title
+    renders_one :footer
+
+    DEFAULT_SIZE = :md
+    SIZE_MAPPINGS = {
+      sm: 'pulse-max-w-md',
+      md: 'pulse-max-w-2xl',
+      lg: 'pulse-max-w-4xl',
+      xl: 'pulse-max-w-5xl',
+      xxl: 'pulse-max-w-6xl'
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
+
+    def initialize(size: DEFAULT_SIZE, close_button: true,
+                   close_on_esc: true, close_on_overlay_click: true,
+                   close_on_submit: true, auto_close: false, **system_arguments)
+      @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+      @system_arguments = system_arguments
+      @modal_classes = merge_classes(
+        'pulse-w-full',
+        SIZE_MAPPINGS[@size],
+        @system_arguments.delete(:classes)
+      )
+      @close_button = close_button
+      @close_on_esc = close_on_esc
+      @close_on_overlay_click = close_on_overlay_click
+      @close_on_submit = close_on_submit
+      @auto_close = auto_close
+
+      @system_arguments[:'aria-labelledby'] = 'modal-title'
+      @system_arguments[:'aria-modal'] = true
+      @system_arguments[:classes] = 'pulse-fixed pulse-z-9999 pulse-inset-0 ' \
+                                    'pulse-overflow-y-auto'
+      @system_arguments[:data] = data_attributes
+      @system_arguments[:role] = 'dialog'
+      @system_arguments[:tabindex] = 0
+      @system_arguments[:tag] = :div
+    end
+
+    private
+
+    attr_reader :modal_classes, :close_button, :close_on_esc,
+                :close_on_overlay_click, :close_on_submit, :auto_close
+
+    def data_attributes
+      merge_attributes(
+        @system_arguments[:data],
+        {
+          controller: 'pulse--modal',
+          'pulse--modal-close-on-esc-value': close_on_esc,
+          'pulse--modal-close-on-submit-value': close_on_submit,
+          'pulse--modal-auto-close-value': auto_close
+        }
+      )
+    end
+  end
+end

data/app/components/pulse/modal_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "@hotwired/stimulus"
+import { enter, leave } from "el-transition"
+
+// Connects to data-controller="pulse--modal"
+export default class extends Controller {
+  static targets = ["wrapper", "body"]
+  static values = {
+    closeOnEsc: { type: Boolean, default: true },
+    closeOnSubmit: { type: Boolean, default: true },
+    autoClose: { type: Boolean, default: false },
+  }
+
+  connect() {
+    if (!this.autoCloseValue) {
+      document.addEventListener("keydown", this.handleKeyDown)
+
+      if (this.closeOnSubmitValue) {
+        document.addEventListener("turbo:submit-end", this.handleSubmit)
+      }
+      this.lastFocusedElement = null
+      this.open()
+    } else {
+      this.autoClose()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeyDown)
+
+    if (this.closeOnSubmitValue) {
+      document.removeEventListener("turbo:submit-end", this.handleSubmit)
+    }
+  }
+
+  handleKeyDown = e => {
+    if (this.closeOnEscValue && e.key === "Escape") {
+      e.stopPropagation()
+      this.close()
+    }
+  }
+
+  open() {
+    this.lastFocusedElement = document.activeElement
+    enter(this.wrapperTarget)
+    enter(this.bodyTarget)
+    document.body.classList.add("pulse-overflow-hidden")
+  }
+
+  close(e) {
+    leave(this.wrapperTarget)
+    leave(this.bodyTarget).then(() => {
+      // Remove the modal element after the fade out so it doesn't blanket the
+      // screen
+      this.element.remove()
+    })
+
+    document.body.classList.remove("pulse-overflow-hidden")
+
+    // Return focus to the last focused element
+    if (this.lastFocusedElement) this.lastFocusedElement.focus()
+
+    // Remove src reference from parent frame element
+    // Without this, turbo won't re-open the modal on subsequent clicks
+    this.element.closest("turbo-frame").src = undefined
+  }
+
+  autoClose(e) {
+    this.element.remove()
+    document.body.classList.remove("pulse-overflow-hidden")
+  }
+
+  handleSubmit = e => {
+    if (e.detail.success) {
+      this.close()
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+/! components/pulse/nav_link
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  - if @variant == :desktop
+    = active_link_to @path, active: @active_mode,
+                            class_active: 'pulse-text-white hover:pulse-text-white hover:pulse-no-underline pulse-px-3 pulse-py-2 pulse-font-medium pulse-relative pulse-group pulse-is-active',
+                            class_inactive: 'pulse-text-white hover:pulse-text-white hover:pulse-no-underline pulse-px-3 pulse-py-2 pulse-font-medium pulse-relative pulse-group' do
+      = @label
+      span class="pulse-absolute -pulse-bottom-0.5 pulse-left-1/2 pulse-w-0 pulse-h-0.5 pulse-bg-gray-300 group-hover:pulse-w-1/2 group-hover:pulse-transition-all pulse-duration-200"
+      span class="pulse-absolute -pulse-bottom-0.5 pulse-right-1/2 pulse-w-0 pulse-h-0.5 pulse-bg-gray-300 group-hover:pulse-w-1/2 group-hover:pulse-transition-all pulse-duration-200"
+      span class="pulse-absolute -pulse-bottom-0.5 pulse-start-0 pulse-w-full pulse-h-0.5 pulse-bg-primary pulse-hidden group-[.pulse-is-active]:pulse-block"
+  - else
+    = active_link_to @path, active: @active_mode,
+                            class_active: 'pulse-text-primary-800 hover:pulse-no-underline pulse-block pulse-px-3 pulse-py-2',
+                            class_inactive: 'pulse-text-gray hover:pulse-no-underline pulse-block pulse-px-3 pulse-py-2',
+                            data: { action: 'dropdown#toggle' } do
+      = @label

data/app/components/pulse/nav_link.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Links in navbars
+  class NavLink < Pulse::Component
+    DEFAULT_VARIANT = :desktop
+    VARIANT_MAPPINGS = {
+      desktop: 'pulse-px-3 pulse-py-2',
+      mobile: 'pulse-px-3 pulse-py-2'
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys.freeze
+
+    delegate :active_link_to, to: :helpers
+
+    def initialize(label:, path:, active_mode: :inclusive, variant: :desktop,
+                   **system_arguments)
+      @label = label
+      @path = path
+      @active_mode = active_mode
+      @variant = variant
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+    end
+  end
+end

data/app/components/pulse/nav_list/divider.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Pulse
+  class NavList
+    # Separator with optional text rendered above groups or between individual
+    # items.
+    class Divider < Pulse::ActionList::Divider
+      def kind
+        :divider
+      end
+    end
+  end
+end