sdr_view_components 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a3b49086535a4be91b25b4f4a5b68f51c72fd2478f5fc72d54c2b77afe5f7cf
-  data.tar.gz: dff1e70705204abaf6202df28826379dd8993d584445506e39f905250fed4795
+  metadata.gz: 4925b643ff3bbb773d0583382c635d876b270fe449561a106b0766fc85865938
+  data.tar.gz: d226b6b48db3c1ca228633f9e6c3c78a53beb4ea6336e9c41c980bc425871a3e
 SHA512:
-  metadata.gz: a34d248d460b3af61fdb39db821d45620e5444defed6de2505f260cce700b3c6babb9000d10063b98e59a52a171b2df7ca0162bbac8476648efa28b2ee008993
-  data.tar.gz: ed9d2ef885985c68e38f640ce30a67382be3cb9f258ac3d03946d896fdcaa651f09acd7059482b3a7f006163730748375a712f498e89832bd87dbe838a293292
+  metadata.gz: d2ed8d3c294e718797978c170bbf247d9721122f0b8811da747b0ab1d71d6b724b074562e872adbf090d4b5f049400da88f922dfff4ec5f0d81d9524e961915a
+  data.tar.gz: 1c8464a8b72bb93c65068cb3b3ab5f47f10e691c5c286757368ac1f87c116adb34ef1f21dcebfe0d3905b304e1f5b021af0169bad069ca47e1fac95893755754

data/README.md

@@ -25,6 +25,27 @@ This set of components relies on the component library stylesheets, add:
 
 with the most recent date tagged release to your `application.html.erb` layout file.
 
+## JavaScript
+
+Some components require JavaScript. The gem ships Stimulus controllers under `app/javascript/sdr_view_components/` and registers that path with the asset pipeline automatically.
+
+Here is an example of how to add a Stimulus controller:
+
+The disappearing toast uses `sdr_view_components/toast_controller` to remove itself from the DOM after its fade-out animation completes.
+
+Add to `config/importmap.rb`:
+```ruby
+pin "sdr_view_components/toast_controller", to: "sdr_view_components/toast_controller.js"
+```
+
+Register the controller in `app/javascript/controllers/index.js`:
+```javascript
+import { application } from "controllers/application"
+import ToastController from "sdr_view_components/toast_controller"
+
+application.register("sdr-toast", ToastController)
+```
+
 ## Usage
 
 ### Form components

data/app/components/sdr_view_components/elements/toast_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div class: classes, role: 'alert', aria: { live: 'assertive', atomic: 'true' } do %>
+<%= tag.div class: classes, role: 'alert', aria: { live: 'assertive', atomic: 'true' }, data: do %>
   <%= tag.div class: toast_body_classes do %>
     <div class="d-flex">
       <div

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

@@ -3,6 +3,8 @@
 module SdrViewComponents
   module Elements
     # Component for rendering a toast element.
+    # The disappearing toast uses `sdr_view_components/toast_controller` to remove itself from the DOM after its
+    # fade-out animation completes.
     class ToastComponent < BaseComponent
       def initialize(title:, text: nil, close_text: nil, variant: :black, disappearing: false)
         @title = title
@@ -23,6 +25,10 @@ module SdrViewComponents
         merge_classes([background_color], %w[toast-body text-white])
       end
 
+      def data
+        { controller: 'sdr-toast' } if disappearing
+      end
+
       def background_color
         case variant
         when :red

data/app/javascript/sdr_view_components/toast_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener("animationend", () => this.element.remove(), { once: true })
+  }
+}

data/lib/sdr_view_components/engine.rb

@@ -26,6 +26,7 @@ module SdrViewComponents
     initializer 'sdr_view_components.assets' do |app|
       app.config.assets.paths << Engine.root.join('app', 'assets').to_s
       app.config.assets.paths << Engine.root.join('app', 'assets', 'stylesheets').to_s
+      app.config.assets.paths << Engine.root.join('app', 'javascript').to_s
     end
 
     initializer 'sdr_view_components.helpers' do

data/lib/sdr_view_components/version.rb

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

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

@@ -21,6 +21,8 @@ module SdrViewComponents
       end
       # @!endgroup
 
+      # The disappearing toast uses `sdr_view_components/toast_controller` to remove itself from the DOM after its
+      # fade-out animation completes.
       def disappearing; end
 
       def with_close_text

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.1
 platform: ruby
 authors:
 - Aaron Collier
@@ -158,6 +158,7 @@ files:
 - app/components/sdr_view_components/tables/row_component.html.erb
 - app/components/sdr_view_components/tables/row_component.rb
 - app/components/sdr_view_components/tables/table_component.rb
+- app/javascript/sdr_view_components/toast_controller.js
 - app/views/layouts/lookbook.html.erb
 - config/routes.rb
 - lib/sdr_view_components.rb