sdr_view_components 0.3.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69a8ea2f413d71c60cab404598d4e5f0b65c4c0bf7b4aa332e657ea4ea3fae61
-  data.tar.gz: db647210ffedcfbec61c8a16602b3a0b25de94faf04c595c5b00dfdafdbd9321
+  metadata.gz: 4925b643ff3bbb773d0583382c635d876b270fe449561a106b0766fc85865938
+  data.tar.gz: d226b6b48db3c1ca228633f9e6c3c78a53beb4ea6336e9c41c980bc425871a3e
 SHA512:
-  metadata.gz: 1bd2d7d88d402446d0d033ba6d189eb7b211efe4357110244b908a4f603a4824e104af724d518d2e8a4b86d243e5a06e37971cdd4b526e2279e54de45e1bb8f9
-  data.tar.gz: 7bd1f0afcc43c17014331278c1e9515c4f4fd2c857ad5f02f5944327ab30074e2885fd8b7017188dd46f8f8b2b0300225e918d53666d1d0e109717bf11c77c55
+  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/Rakefile

@@ -26,7 +26,7 @@ begin
   desc 'Run herb against ERB files'
   task herb: :environment do
     puts 'Running ERB linter...'
-    sh('bin/herb analyze app --no-timing --non-interactive')
+    sh('bin/herb analyze app --no-timing')
   end
 
   desc 'Run all configured linters'

data/app/assets/sdr_view_components.css

@@ -116,3 +116,25 @@ table.table-data th {
 	cursor: default;
 	opacity: .5;
 }
+
+/* Toasts */
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    max-height: 200px;
+    visibility: visible;
+  }
+  79%  { opacity: 1; }
+  80%  { max-height: 200px; }
+
+  100% {
+    opacity: 0;
+    max-height: 0;
+    visibility: hidden;
+  }
+}
+
+.toast-disappear {
+  animation: fade-out 5s ease-in forwards;
+}
+

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

@@ -1,8 +1,4 @@
-<div
-  class="toast align-items-center show"
-  role="alert"
-  aria-live="assertive"
-  aria-atomic="true">
+<%= 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
@@ -29,4 +25,4 @@
       </div>
     </div>
   <% end %>
-</div>
+<% end %>

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

@@ -3,21 +3,32 @@
 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)
+      def initialize(title:, text: nil, close_text: nil, variant: :black, disappearing: false)
         @title = title
         @text = text
         @close_text = close_text
         @variant = variant
+        @disappearing = disappearing
         super()
       end
 
-      attr_reader :title, :text, :close_text, :variant
+      attr_reader :title, :text, :close_text, :variant, :disappearing
+
+      def classes
+        merge_classes('toast align-items-center show', ('toast-disappear' if disappearing))
+      end
 
       def toast_body_classes
         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.3.0'
+  VERSION = '0.4.1'
 end

data/spec/components/previews/sdr_view_components/elements/toast_component_preview/disappearing.html.erb

@@ -0,0 +1,5 @@
+<%= render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Non-Disappearing Toast text') %>
+
+<%= render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Disappearing Toast text. Wait 5 secs.', disappearing: true, variant: :green) %>
+
+<%= render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Non-Disappearing Toast text') %>

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

@@ -21,6 +21,10 @@ 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
         render SdrViewComponents::Elements::ToastComponent.new(title: 'Alert!', text: 'Black Toast text', close_text: 'Undo')
       end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.3.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
@@ -190,6 +191,7 @@ files:
 - 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
 - spec/components/previews/sdr_view_components/elements/toast_component_preview.rb
+- spec/components/previews/sdr_view_components/elements/toast_component_preview/disappearing.html.erb
 - spec/components/previews/sdr_view_components/elements/tooltip_component_preview.rb
 - spec/components/previews/sdr_view_components/elements/tooltip_component_preview/default.html.erb
 - spec/components/previews/sdr_view_components/forms/basic/basic_checkbox_component_preview.rb