sdr_view_components 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20d06b21754a66cf773ed738934dca7b897e95de724e6ca8fc70942f56a8bf1c
-  data.tar.gz: 605b5ae6c58e73324e9bdbbac7d53ff6e0ddf9d53b845c75393255d411ef701d
+  metadata.gz: 2a7f0502701fd4d8fa40f595c582e8d3639edd747efabae9a9453386b23c3bff
+  data.tar.gz: 17b95f5d8d01a6af4af3dbb8a0d15b9a843a03e44ab8428793de0fae84dcaf79
 SHA512:
-  metadata.gz: b99a2ffdfb693b1780e6b44b93a51d0ba6ab62e9958336056ccacd59fd5e4b5d063961bcfe55d688d0b5c907ea0fc323872808cdd52743c1dfe44b7ceb676a39
-  data.tar.gz: 17849d2bfd15fd3e540ed8a6e0307825c00efbf53143836c2547d10f5a812ac490b71b5ae0cb0007aced34068b68debfe9970449633d8005969018497869ba29
+  metadata.gz: 6411da75700daee1d917a8bd7bdc47cdebe312af9d63b535a974d5114fee4697024532d7b31fa95150b5f4fa438897df0e97a7500dddfef7907e05a5b0fc1aa8
+  data.tar.gz: 4a062e6024b31b4c83439615ecfd6533f293b8798d36327c3dca1280a56ac9e041b205a2e92f6509ba4d5deb78ff460cfc4593ded78feddd4f46395267459ee3

data/README.md

@@ -189,6 +189,37 @@ See the Lookbook preview for `SdrViewComponents::TabForm::TabListComponent` for
 <% render SdrViewComponent::....>
 ```
 
+### Navigation components
+
+SdrViewComponents provides components for building navigation bar items and dropdown menus:
+
+- `SdrViewComponents::Elements::Navigation::NavItemComponent` -- a single navigation link (or plain text, if no `path:` is given).
+- `SdrViewComponents::Elements::Navigation::DropdownMenuComponent` -- a Bootstrap dropdown menu. Items are added via `with_item`, and can be any renderable object -- typically one of the components below.
+- `SdrViewComponents::Elements::Navigation::DropdownLinkComponent` -- a link within a dropdown menu (renders with the `dropdown-item` class via `link_to`). Accepts `label:`, `link:`, `classes:`, `disabled:` (adds the `disabled` class), and any additional options passed on to `link_to`.
+- `SdrViewComponents::Elements::Navigation::DropdownHeaderComponent` -- a non-interactive section label within a dropdown menu.
+- `SdrViewComponents::Elements::Navigation::DropdownDividerComponent` -- a horizontal divider between groups of items within a dropdown menu.
+
+```erb
+<ul class="navbar-nav">
+  <%= render SdrViewComponents::Elements::Navigation::NavItemComponent.new(text: 'Home', path: '/') %>
+
+  <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Options') do |dropdown| %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownHeaderComponent.new(text: 'Section 1') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Action', link: '#') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownDividerComponent.new %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Another action', link: '#') %>
+    <% end %>
+  <% end %>
+</ul>
+```
+
 ## Component library version
 The [component-library](https://github.com/sul-dlss/component-library/) version is set in `lib/sdr_view_components/configuration.rb`.
 

data/app/components/sdr_view_components/elements/navigation/dropdown_divider_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a divider within a dropdown menu.
+      class DropdownDividerComponent < BaseComponent
+        def initialize(classes: [])
+          @classes = classes
+          super()
+        end
+
+        def call
+          tag.hr class: classes
+        end
+
+        def classes
+          merge_classes('dropdown-divider', @classes)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/dropdown_header_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a header within a dropdown menu.
+      class DropdownHeaderComponent < BaseComponent
+        def initialize(text:, classes: [])
+          @text = text
+          @classes = classes
+          super()
+        end
+
+        attr_reader :text
+
+        def call
+          tag.span text, class: classes, role: 'heading'
+        end
+
+        def classes
+          merge_classes('dropdown-header', @classes)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/dropdown_link_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      # Component for rendering a link within a dropdown menu.
+      class DropdownLinkComponent < BaseComponent
+        def initialize(label:, link:, classes: [], disabled: false, **options)
+          @label = label
+          @link = link
+          @classes = classes
+          @disabled = disabled
+          @options = options
+          super()
+        end
+
+        attr_reader :label, :link, :disabled
+
+        def call
+          link_to label, link, class: classes, **@options
+        end
+
+        def classes
+          merge_classes('dropdown-item', disabled ? 'disabled' : nil, @classes)
+        end
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/elements/navigation/nav_item_component.rb

@@ -5,10 +5,11 @@ module SdrViewComponents
     module Navigation
       # Component for navigation item link.
       class NavItemComponent < BaseComponent
-        def initialize(text:, path: nil, data: {})
+        def initialize(text:, path: nil, data: {}, classes: [])
           @text = text
           @path = path
           @data = data
+          @classes = classes
           super()
         end
 
@@ -17,12 +18,16 @@ module SdrViewComponents
         def call
           tag.li class: 'nav-item' do
             if path.present?
-              link_to text, path, class: 'nav-link', data:
+              link_to text, path, class: classes, data:
             else
-              tag.span text, class: 'nav-link'
+              tag.span text, class: classes
             end
           end
         end
+
+        def classes
+          merge_classes('nav-link', @classes)
+        end
       end
     end
   end

data/lib/sdr_view_components/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SdrViewComponents
-  VERSION = '0.7.0'
+  VERSION = '0.8.0'
 end

data/spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/default.html.erb

@@ -0,0 +1,10 @@
+<ul class="navbar-nav">
+  <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Options') do |dropdown| %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Action', link: '#') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Another action', link: '#') %>
+    <% end %>
+  <% end %>
+</ul>

data/spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/with_header_and_divider.html.erb

@@ -0,0 +1,16 @@
+<ul class="navbar-nav">
+  <%= render SdrViewComponents::Elements::Navigation::DropdownMenuComponent.new(text: 'Options') do |dropdown| %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownHeaderComponent.new(text: 'Section 1') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Action', link: '#') %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownDividerComponent.new %>
+    <% end %>
+    <% dropdown.with_item do %>
+      <%= render SdrViewComponents::Elements::Navigation::DropdownLinkComponent.new(label: 'Another action', link: '#') %>
+    <% end %>
+  <% end %>
+</ul>

data/spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    module Navigation
+      class DropdownMenuComponentPreview < ViewComponent::Preview
+        def default; end
+
+        def with_header_and_divider; end
+      end
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Aaron Collier
@@ -88,6 +88,9 @@ files:
 - app/components/sdr_view_components/elements/modal_component.rb
 - app/components/sdr_view_components/elements/nav_link_component.html.erb
 - app/components/sdr_view_components/elements/nav_link_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_divider_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_header_component.rb
+- app/components/sdr_view_components/elements/navigation/dropdown_link_component.rb
 - app/components/sdr_view_components/elements/navigation/dropdown_menu_component.html.erb
 - app/components/sdr_view_components/elements/navigation/dropdown_menu_component.rb
 - app/components/sdr_view_components/elements/navigation/nav_item_component.rb
@@ -201,6 +204,9 @@ files:
 - spec/components/previews/sdr_view_components/elements/modal_component_preview/default.html.erb
 - spec/components/previews/sdr_view_components/elements/modal_component_preview/with_header_and_footer.html.erb
 - spec/components/previews/sdr_view_components/elements/modal_component_preview/without_size.html.erb
+- spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview.rb
+- spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/default.html.erb
+- spec/components/previews/sdr_view_components/elements/navigation/dropdown_menu_component_preview/with_header_and_divider.html.erb
 - spec/components/previews/sdr_view_components/elements/progress_bar_component_preview.rb
 - spec/components/previews/sdr_view_components/elements/spinner_component_preview.rb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview.rb