sdr_view_components 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a5c75fc70087db7f22de6555353858ad37e5e1eca8b22fb3bf0ef97fa875cb50
-  data.tar.gz: 4d08732919f119eb589ba79c4e194ff98868c6dcd7c7b105e6b008232100c00b
+  metadata.gz: e251b4177b159e8978b41116e020d3d58d5f95071c6dbccd9b212d3751c9a118
+  data.tar.gz: be45e43ececfc02ed410b67844418c80371a28a1b89596a56630f3d81ce2df22
 SHA512:
-  metadata.gz: a37dc109660769c562ff43176deaeb796396fa5039f472e4bbbdd3ef1983028913567dc9d4ccd21b6e1ff122a3d57dac4e158369df119565c3ca02c8e0aa8b0d
-  data.tar.gz: 858f08586f7682571637115a94ae7aaf93d263de9675155f2fbcdfda262c6e83fe4a26d41d5448ccf4cda2c2a2be4159bbdbb641f6169381c7e96df62a255306
+  metadata.gz: 638147ae953c62036f9553375bbac77530a7b6dfdc4dcd9243954b4bf702250a70a5953fb9b4444f2d1c5c249f45a797816a0def51f323c57d6fad91a57d566c
+  data.tar.gz: c7a3458363dfe0bc1000fb4b24ce6415fece60c20f3d06722c5f626204eff3582badefe1a9ab0696000aa949777484dbd3c6a50938762c1e600a8782d08907c8

data/README.md

@@ -65,6 +65,19 @@ application.register("sdr-tab-link", TabLinkController)
 application.register("sdr-tab-nav", TabNavController)
 ```
 
+`SdrViewComponents::Elements::Tabs::TabListComponent`'s `collapse_below` option (see [General usage](#general-usage) below) ships `sdr_view_components/tab_select_controller`, registered as `sdr-tab-select`:
+
+```ruby
+pin "sdr_view_components/tab_select_controller", to: "sdr_view_components/tab_select_controller.js"
+```
+
+```javascript
+import { application } from "controllers/application"
+import TabSelectController from "sdr_view_components/tab_select_controller"
+
+application.register("sdr-tab-select", TabSelectController)
+```
+
 ## Usage
 
 ### Form components
@@ -151,6 +164,23 @@ See the Lookbook preview for `SdrViewComponents::TabForm::TabListComponent` for
 
 ### General usage:
 
+`SdrViewComponents::Elements::Tabs::TabListComponent` accepts a `collapse_below:` option (one of `:sm`, `:md`, `:lg`, `:xl`, `:xxl`). When given, the tabs are replaced with a `<select>` below that Bootstrap breakpoint instead of wrapping or scrolling -- the `<select>` drives the same Bootstrap tab JavaScript as the tabs, so panes switch the same way regardless of which control is visible. Leave it unset (the default) to always render the tabs. This requires the `sdr-tab-select` controller -- see [JavaScript](#javascript) above.
+
+```erb
+<%= render SdrViewComponents::Elements::Tabs::TabListComponent.new(variant: :underline, collapse_below: :xl) do |tab_list| %>
+  <% tab_list.with_tab(label: 'Details', id: 'details-tab', pane_id: 'details-pane', active: true) %>
+  <% tab_list.with_tab(label: 'History', id: 'history-tab', pane_id: 'history-pane') %>
+
+  <% tab_list.with_pane(id: 'details-pane', tab_id: 'details-tab', active: true) do %>
+    <p>Details pane content.</p>
+  <% end %>
+
+  <% tab_list.with_pane(id: 'history-pane', tab_id: 'history-tab') do %>
+    <p>History pane content.</p>
+  <% end %>
+<% end %>
+```
+
 ```
 <% render SdrViewComponent::....>
 ```

data/app/components/sdr_view_components/elements/heading_component.rb

@@ -4,13 +4,14 @@ module SdrViewComponents
   module Elements
     # Applies an h# component with the expected styling.
     class HeadingComponent < BaseComponent
-      def initialize(level:, text: nil, variant: nil, classes: [])
+      def initialize(level:, text: nil, variant: nil, classes: [], **options)
         raise ArgumentError, 'Invalid level' unless %i[h1 h2 h3 h4 h5 h6].include?(level.to_sym)
 
         @level = level
         @variant = variant
         @classes = classes
         @text = text # Provide text or content
+        @options = options
         super()
       end
 
@@ -22,7 +23,7 @@ module SdrViewComponents
       def call
         return unless tag.respond_to?(@level)
 
-        tag.public_send(@level, class: classes) do
+        tag.public_send(@level, class: classes, **@options) do
           @text || content
         end
       end

data/app/components/sdr_view_components/elements/tabs/tab_list_component.html.erb

@@ -1,9 +1,21 @@
-<%= tag.ul class: classes, role: 'tablist' do %>
-  <% tabs.each do |tab| %><%= tab %><% end %>
+<% if collapse_below? %>
+  <div data-controller="sdr-tab-select" data-action="shown.bs.tab->sdr-tab-select#sync">
+    <%= tag.select class: select_classes, 'aria-label': 'Select a tab', data: { sdr_tab_select_target: 'select', action: 'sdr-tab-select#change' } do %>
+      <% tabs.each do |tab| %><%= tag.option(tab.label, value: tab.id, selected: tab.active?) %><% end %>
+    <% end %>
+
+    <%= tag.ul class: classes, role: 'tablist' do %>
+      <% tabs.each do |tab| %><%= tab %><% end %>
+    <% end %>
+  </div>
+<% else %>
+  <%= tag.ul class: classes, role: 'tablist' do %>
+    <% tabs.each do |tab| %><%= tab %><% end %>
+  <% end %>
 <% end %>
 
 <%= header %>
 
-<div class="tab-content">
+<%= tag.div class: content_classes do %>
   <% panes.each do |pane| %><%= pane %><% end %>
-</div>
+<% end %>

data/app/components/sdr_view_components/elements/tabs/tab_list_component.rb

@@ -5,21 +5,48 @@ module SdrViewComponents
     module Tabs
       # Component for rendering a list of tabs in a tabbed interface.
       class TabListComponent < BaseComponent
+        BREAKPOINTS = %i[sm md lg xl xxl].freeze
+
         renders_one :header # optional
         renders_many :tabs, Elements::Tabs::TabComponent
         renders_many :panes, Elements::Tabs::PaneComponent
 
-        def initialize(classes: [], variant: :default)
+        # @param classes [Array<String>, String] additional classes for the tab list.
+        # @param content_classes [Array<String>, String] additional classes for the tab content container.
+        # @param variant [Symbol] the visual style of the tabs (:default or :underline).
+        # @param collapse_below [Symbol, nil] if given, the tabs are replaced with a `<select>`
+        #   below this Bootstrap breakpoint (one of :sm, :md, :lg, :xl, :xxl). The tabs remain
+        #   fully functional (the `<select>` drives the same Bootstrap tab JavaScript) -- this
+        #   only changes how they're presented at narrow viewports. Leave nil (the default) to
+        #   always render the tabs.
+        def initialize(classes: [], content_classes: [], variant: :default, collapse_below: nil)
           @classes = classes
+          @content_classes = content_classes
           @variant = variant
+          @collapse_below = collapse_below
 
           raise ArgumentError, "Invalid variant: #{variant}" unless %i[underline default].include?(variant)
+          if collapse_below && BREAKPOINTS.exclude?(collapse_below)
+            raise ArgumentError, "Invalid collapse_below: #{collapse_below}"
+          end
 
           super()
         end
 
+        def collapse_below?
+          @collapse_below.present?
+        end
+
         def classes
-          merge_classes('nav', @classes, variant_classes)
+          merge_classes('nav', @classes, variant_classes, collapse_below? ? ['d-none', "d-#{@collapse_below}-flex"] : nil)
+        end
+
+        def select_classes
+          merge_classes('form-select', "d-#{@collapse_below}-none", @classes)
+        end
+
+        def content_classes
+          merge_classes('tab-content', @content_classes)
         end
 
         private

data/app/javascript/sdr_view_components/tab_select_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Drives a <select> that stands in for a tab list on narrow viewports (see
+// TabListComponent's `collapse_below` option). Selecting an option shows the
+// corresponding tab; activating a tab some other way (e.g. clicking the tab
+// list above the collapse breakpoint) keeps the select's value in sync.
+//
+// Uses window.bootstrap rather than `import * as bootstrap from 'bootstrap'`:
+// the UMD bootstrap.bundle.min.js has no ES module exports, so an ESM import
+// of it resolves to an empty namespace object even though the script itself
+// still assigns the real API to window.bootstrap as a side effect.
+export default class extends Controller {
+  static targets = ['select']
+
+  change (event) {
+    window.bootstrap.Tab.getOrCreateInstance(document.getElementById(event.target.value)).show()
+  }
+
+  sync (event) {
+    this.selectTarget.value = event.target.id
+  }
+}

data/lib/sdr_view_components/version.rb

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

data/spec/components/previews/sdr_view_components/elements/button_link_component_preview.rb

@@ -33,6 +33,12 @@ module SdrViewComponents
         render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Info Link Button',
                                                                     variant: :info)
       end
+
+      def nil
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Nil Variant Link Button',
+                                                                    variant: nil)
+      end
+
       # @!endgroup
 
       # @!group Button Sizes

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/collapsible.html.erb

@@ -0,0 +1,14 @@
+<%# Resize the preview frame below the sm breakpoint to see the tabs collapse into a select. %>
+<%# The sdr-tab-select controller isn't registered in this dummy app, so the select won't switch panes here -- see the consuming app for a working example. %>
+<%= render SdrViewComponents::Elements::Tabs::TabListComponent.new(variant: :underline, collapse_below: :sm) do |tab_list| %>
+  <% tab_list.with_tab(label: 'Details', id: 'details-tab', pane_id: 'details-pane', active: true) %>
+  <% tab_list.with_tab(label: 'History', id: 'history-tab', pane_id: 'history-pane') %>
+
+  <% tab_list.with_pane(id: 'details-pane', tab_id: 'details-tab', active: true) do %>
+    <p>Details pane content.</p>
+  <% end %>
+
+  <% tab_list.with_pane(id: 'history-pane', tab_id: 'history-tab') do %>
+    <p>History pane content.</p>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview.rb

@@ -10,6 +10,8 @@ module SdrViewComponents
         # @!endgroup
 
         def with_header; end
+
+        def collapsible; end
       end
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Aaron Collier
@@ -170,6 +170,7 @@ files:
 - app/javascript/sdr_view_components/tab_error_controller.js
 - app/javascript/sdr_view_components/tab_link_controller.js
 - app/javascript/sdr_view_components/tab_nav_controller.js
+- app/javascript/sdr_view_components/tab_select_controller.js
 - app/javascript/sdr_view_components/toast_controller.js
 - app/views/layouts/lookbook.html.erb
 - config/routes.rb
@@ -199,6 +200,7 @@ files:
 - 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
+- spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/collapsible.html.erb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/default_variant.html.erb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/underline_variant.html.erb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/with_header.html.erb