keystone_ui 0.29.1 → 0.29.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35361b54c51210bbb266661591eca1601b6bb58e79f9c660fd57c10a22ded4ae
-  data.tar.gz: ffef4296a6d940ec1e056c200fffec339699d01b44152b2fae77b64945a821fb
+  metadata.gz: 6957989b7a51f3fdd94ce32536025f31b9f3d1cc35fae4b92c1957da717ffd80
+  data.tar.gz: 9c3a4af4f7a27c7082ca8bf64578de1d96a415cf06019143bf1b9dbbc1f9b0ac
 SHA512:
-  metadata.gz: 8b64c842d2200a213bba1d66f12fda4e13243ee507357d5344504b1d229d270842c4f270fda7ea9eaf5fea48e3e5ba38655ac928e5f8ee254d5f27274e26f349
-  data.tar.gz: '01001180952d14a4d51abe980387aec7e32940012b2e8d917334f732bea4d83c97cec9cbe1badc2818fffde24977ec0be9577ec221a61ac27b6cad475f580394'
+  metadata.gz: 60cb001c00c818f4990338a8ad9575ba48d97fd1874dbc86ac03370959b49223cf82c4bf3b92d4b65ddbd0d92e7a5fceba909cbd558222dc584e96473402e910
+  data.tar.gz: 9148787bdf6de7526e77cd73012d156468183d0f5b3a21e5a873d71c6d677b35fbc2ad8c8adc7735b9ed9f0523912f3b80907bd8cc96eb1fa5ba52fea581d6a7

data/app/assets/javascripts/keystone_ui/index.js

@@ -11,6 +11,7 @@ import ClipboardController from "keystone_ui/clipboard_controller"
 import TabSwitcherController from "keystone_ui/tab_switcher_controller"
 import AccordionController from "keystone_ui/accordion_controller"
 import StatCardInfoController from "keystone_ui/stat_card_info_controller"
+import InfoController from "keystone_ui/info_controller"
 import AutoSubmitController from "keystone_ui/auto_submit_controller"
 import LineChartController from "keystone_ui/line_chart_controller"
 import ThemeToggleController from "keystone_ui/theme_toggle_controller"
@@ -30,10 +31,11 @@ export function registerControllers(application) {
   application.register("tab-switcher", TabSwitcherController)
   application.register("accordion", AccordionController)
   application.register("stat-card-info", StatCardInfoController)
+  application.register("info", InfoController)
   application.register("auto-submit", AutoSubmitController)
   application.register("line-chart", LineChartController)
   application.register("theme-toggle", ThemeToggleController)
   keepPageThemeInStep()
 }
 
-export { ColorPickerController, MultiSelectController, SwipeDeckController, ColumnPickerController, FileUploadController, DropdownController, DismissController, ModalController, ClipboardController, TabSwitcherController, AccordionController, StatCardInfoController, AutoSubmitController, LineChartController }
+export { ColorPickerController, MultiSelectController, SwipeDeckController, ColumnPickerController, FileUploadController, DropdownController, DismissController, ModalController, ClipboardController, TabSwitcherController, AccordionController, StatCardInfoController, InfoController, AutoSubmitController, LineChartController }

data/app/assets/javascripts/keystone_ui/info_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "summary", "detail"]
+
+  peek() {
+    this.summaryTarget.classList.remove("hidden")
+    this.place(this.summaryTarget)
+  }
+
+  unpeek() {
+    this.summaryTarget.classList.add("hidden")
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    const shown = this.hasDetailTarget ? this.detailTarget : this.summaryTarget
+    shown.classList.toggle("hidden")
+    if (!shown.classList.contains("hidden")) this.place(shown)
+  }
+
+  hide(event) {
+    if (this.hasDetailTarget && !this.element.contains(event.target)) this.detailTarget.classList.add("hidden")
+  }
+
+  close() {
+    this.summaryTarget.classList.add("hidden")
+    if (this.hasDetailTarget) this.detailTarget.classList.add("hidden")
+  }
+
+  place(shown) {
+    const button = this.buttonTarget.getBoundingClientRect()
+    Object.assign(shown.style, {
+      position: "fixed",
+      top: `${button.bottom}px`,
+      left: `${Math.max(8, button.right - shown.offsetWidth)}px`,
+      right: "auto"
+    })
+  }
+}

data/app/assets/javascripts/keystone_ui/line_chart_controller.js

@@ -1,13 +1,19 @@
 import { Controller } from "@hotwired/stimulus"
-import { Chart, registerables } from "chart.js"
 
-Chart.register(...registerables)
+const loadChart = async () => {
+  const { Chart, registerables } = await import("chart.js")
+  Chart.register(...registerables)
+  return Chart
+}
 
 export default class extends Controller {
   static targets = ["canvas"]
   static values = { data: Object }
 
-  connect() {
+  async connect() {
+    const Chart = await loadChart()
+    if (!this.element.isConnected) return
+
     this.chart = new Chart(this.canvasTarget, {
       type: "line",
       data: this.resolveColors(this.dataValue),

data/app/components/keystone/ui/info_component.html.erb

@@ -1,7 +1,7 @@
-<span class="relative inline-flex" data-controller="stat-card-info">
-  <button type="button" class="<%= button_classes %>" data-action="click->stat-card-info#toggle" aria-label="More about this"><%= icon.html_safe %></button>
-  <span class="<%= summary_classes %>"<%= ' data-stat-card-info-target="panel"'.html_safe unless content? %>><%= summary %></span>
+<span class="inline-flex" data-controller="info" data-action="click@window->info#hide scroll@window->info#close">
+  <button type="button" class="<%= button_classes %>" data-info-target="button" data-action="mouseenter->info#peek mouseleave->info#unpeek click->info#toggle" aria-label="More about this"><%= icon.html_safe %></button>
+  <span class="<%= summary_classes %>" data-info-target="summary"><%= summary %></span>
   <% if content? %>
-    <span class="<%= detail_classes %>" data-stat-card-info-target="panel"><%= content %></span>
+    <span class="<%= detail_classes %>" data-info-target="detail"><%= content %></span>
   <% end %>
 </span>

data/app/components/keystone/ui/info_component.rb

@@ -5,8 +5,8 @@ module Keystone
     class InfoComponent < ViewComponent::Base
       BUTTON_CLASSES = RadioCardComponent::INFO_BUTTON_CLASSES
       ICON = RadioCardComponent::INFO_ICON
-      SUMMARY_CLASSES = "ks-info-summary #{RadioCardComponent::DISCLOSURE_CLASSES} w-64"
-      DETAIL_CLASSES = "ks-info-detail ks-radio-card-disclosure hidden absolute top-full right-0 z-20 w-72 text-sm"
+      SUMMARY_CLASSES = "ks-info-summary ks-radio-card-disclosure hidden z-30 w-64 text-sm"
+      DETAIL_CLASSES = "ks-info-detail ks-radio-card-disclosure hidden z-30 w-72 text-sm"
 
       def initialize(summary:)
         @summary = summary

data/config/importmap.rb

@@ -12,6 +12,7 @@ pin "keystone_ui/clipboard_controller", to: "keystone_ui/clipboard_controller.js
 pin "keystone_ui/tab_switcher_controller", to: "keystone_ui/tab_switcher_controller.js"
 pin "keystone_ui/accordion_controller", to: "keystone_ui/accordion_controller.js"
 pin "keystone_ui/stat_card_info_controller", to: "keystone_ui/stat_card_info_controller.js"
+pin "keystone_ui/info_controller", to: "keystone_ui/info_controller.js"
 pin "keystone_ui/auto_submit_controller", to: "keystone_ui/auto_submit_controller.js"
 pin "keystone_ui/line_chart_controller", to: "keystone_ui/line_chart_controller.js"
 pin "keystone_ui/theme_toggle_controller", to: "keystone_ui/theme_toggle_controller.js"
@@ -19,4 +20,4 @@ pin "keystone_ui/page_theme", to: "keystone_ui/page_theme.js"
 
 # Chart.js for the line-chart controller, so host apps don't pin it themselves.
 # Vendored as a single self-contained bundle (deps inlined, no external imports).
-pin "chart.js", to: "keystone_ui/chartjs.js"
+pin "chart.js", to: "keystone_ui/chartjs.js", preload: false

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.29.1"
+  VERSION = "0.29.3"
 end

data/the_local/agents/keystone_ui-develop.md

@@ -275,9 +275,16 @@ outer element. See Conventions before using it.
   is optional and holds the full detail. With a block, tapping or clicking the
   button toggles a second floating panel holding the block's content, and the
   summary stays hover-only. With no block, tapping the button toggles the
-  summary itself. Both panels render inside a `<span>`, so the block may hold
-  text and inline elements only, such as a `ui_breakdown`, and never a `<div>`,
-  list or table. Toggling needs the gem's Stimulus controllers registered.
+  summary itself. A second tap closes what the first opened, a click anywhere
+  else on the page closes the detail panel, and scrolling the page closes both
+  panels. Each panel opens just under the button with its right edge on the
+  button's right edge, and stays at least 8 pixels from the left edge of the
+  screen. The panels are placed against the screen, so the button can sit
+  inside a table or any other container that clips its contents without the
+  panels being cut off. Both panels render inside a `<span>`, so the block may
+  hold text and inline elements only, such as a `ui_breakdown`, and never a
+  `<div>`, list or table. Hovering and tapping both need the gem's Stimulus
+  controllers registered, and without them the button shows nothing.
 - `ui_breakdown(lines:, total:)` — no block. A list of amounts ending in their
   total. `lines:` is `[{ amount:, label: }, ...]` and `total:` is one
   `{ amount:, label: }`, both required. Each line renders its amount
@@ -418,7 +425,9 @@ outer element. See Conventions before using it.
    it, with the one-line explanation as `summary:` and, when the figure is a
    sum of parts, a `ui_breakdown` in its block. Which amounts the breakdown
    lists, and the wording of the summary, are the app's own, so ask the
-   developer rather than pick.
+   developer rather than pick. If an info button shows nothing when hovered or
+   tapped, the gem's Stimulus controllers are not registered, so stop and hand
+   that part to `keystone_ui-install`.
    A field whose value must be one of a fixed list is a `:select` with
    `options:`, and a field that accepts any text and offers common values is a
    text field with `suggestions:`. Which one a field is, and which values it

data/the_local/agents/keystone_ui-info.md

@@ -93,7 +93,13 @@ holds the catalog.
   beside anything. It takes a short summary, which is required, and shows it
   when the button is hovered. Given nothing more, a tap shows the summary too.
   Given a block of further detail, a tap opens that detail instead, in a panel
-  under the button, and the summary stays the hover text.
+  under the button, and the summary stays the hover text. Both popups are
+  placed against the screen, not against the element the button sits in, so a
+  table or any other container that clips its contents does not cut them off.
+  Each opens under the button with its right edge on the button's, and is kept
+  on the screen when the button is near the left edge. A second tap closes
+  what the first opened, a click anywhere else closes the detail, and
+  scrolling the page closes both.
 - **A breakdown is text.** A breakdown lists amounts, each beside a label
   saying what it is, and ends with a total set apart from the lines above it.
   Every line and the total are an amount and a label, passed as

data/the_local/agents/keystone_ui-install.md

@@ -81,8 +81,8 @@ built on ViewComponent; hook it in before building any screen with those helpers
 
    - `app/javascript/controllers/index.js not found` — ask the developer where
      the Stimulus application is set up and add those two lines there. Without
-     them, dropdowns, modals, file uploads, the column picker, the theme toggle
-     and the other interactive components do nothing.
+     them, dropdowns, modals, file uploads, the column picker, the theme toggle,
+     the info button's popups and the other interactive components do nothing.
      `registerControllers(application)` also copies `data-theme` and `data-look`
      from each page Turbo renders onto the `<html>` tag. Without it, a Turbo
      visit keeps the theme and look of the first page loaded.
@@ -153,8 +153,8 @@ built on ViewComponent; hook it in before building any screen with those helpers
    checkbox row, radio card, option card, file upload and colour picker read
    these variables. So do the data display components: stat card, chart card,
    card link, CTA banner, feature grid, hero, data table, code, accordion,
-   disclosure, calculation, tab switcher, progress, funnel, bucket, pipeline and
-   swipe deck.
+   disclosure, calculation, info button, breakdown, tab switcher, progress,
+   funnel, bucket, pipeline and swipe deck.
    So do the navigation components: navbar, nav item, nav dropdown, bottom nav,
    mobile header and settings link. The desktop "Back" link and the breadcrumbs
    on form and show pages use the mobile header's back link variables. The
@@ -244,7 +244,8 @@ built on ViewComponent; hook it in before building any screen with those helpers
   exists after a boot, the Stimulus setup calls `registerControllers(application)`,
   and the layout's `<html>` tag contains `<%= keystone_theme_attributes %>`. Then
   load one page that renders a `ui_*` helper and confirm it is styled and that an
-  interactive component (a dropdown, a dismissible alert) responds.
+  interactive component (a dropdown, a dismissible alert, an info button)
+  responds.
 - **Importmap is the supported JS path.** For apps configured with importmap the
   gem pins its own controllers, and the charting library they need, on boot, so
   the host pins nothing. If the app bundles JavaScript instead (esbuild, bun,

data/the_local/interface.yml

@@ -97,6 +97,7 @@ sources:
   - app/components/keystone/ui/calculation_component.rb
   - app/components/keystone/ui/info_component.rb
   - app/components/keystone/ui/info_component.html.erb
+  - app/assets/javascripts/keystone_ui/info_controller.js
   - app/components/keystone/ui/breakdown_component.rb
   - app/components/keystone/ui/breakdown_component.html.erb
   - app/components/keystone/ui/feature_grid_component.rb

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.29.1
+  version: 0.29.3
 platform: ruby
 authors:
 - Tyler Schneider
@@ -62,6 +62,7 @@ files:
 - app/assets/javascripts/keystone_ui/dropdown_controller.js
 - app/assets/javascripts/keystone_ui/file_upload_controller.js
 - app/assets/javascripts/keystone_ui/index.js
+- app/assets/javascripts/keystone_ui/info_controller.js
 - app/assets/javascripts/keystone_ui/line_chart_controller.js
 - app/assets/javascripts/keystone_ui/modal_controller.js
 - app/assets/javascripts/keystone_ui/multi_select_controller.js