playbook_ui_docs 14.13.0.pre.rc.5 → 14.13.0.pre.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9720211a2bcc05321d1b3b49a548d97375b762cc232ab93629a983373853e38
-  data.tar.gz: 78eb408cc2f68ca733f7a7ab5bf449f548e085bef7b39a38526e195eae16187d
+  metadata.gz: 6779ed94ba3c4c709776ccfc734a8dd9bc577054f2470f1d8fd462bc11e989cb
+  data.tar.gz: 425067fcf4814285d4c2cd863e27ad9da5bd2df1f33f493c7f95fc9ad9162ecc
 SHA512:
-  metadata.gz: 06e175260810bdf99c91829cbb61999e566cc42fb8105ce1154ce2736eb11606901a85446cfe83973f0d56162a4d681008a34fcc73d764c989f5f2d241c3dc7c
-  data.tar.gz: e836df5798c20bd93c3c6d5f243d84e16d9540ee4c5c8f6fb035c4c5dbd2f6f1a083a5e39f5620063c8f0360d608e2846951053c2e17152927a957ac1566e1a8
+  metadata.gz: da79f8f9fca0ea7574c74dd9f2c3fb0fcda40bb02bd230309363bc413a6b44368669ea9d591804754646bcf1b005a2217b1ed7365a10401ba98cb305557433ff
+  data.tar.gz: 64b4e5bf2af287f06f15232cf507d8e22ac3e44b5e2c4a6a2cfd40e6f5b4af78a878dd81cd8c01d73548b29409eba57daa65c259c44ac545c5f200355f3583e7

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
+<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 3000,
+  classname: "toast-to-hide",
+  id: "toast-auto-close",
+  text: "I will disappear in 3 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 10000,
+  closeable: true,
+  id: "toast-auto-close-closeable",
+  text: "I will disappear in 10 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize toast elements and buttons
+  const toasts = {
+    '#toast-auto-close': document.querySelector("#toast-auto-close"),
+    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
+  }
+  
+  const buttons = {
+    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
+    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
+  }
+
+  // Store original toasts and remove them from DOM
+  const originalToasts = {}
+  Object.entries(toasts).forEach(([id, toast]) => {
+    if (toast) {
+      originalToasts[id] = toast.cloneNode(true)
+      toast.remove()
+    }
+  })
+
+  // Set up button click handlers
+  Object.keys(buttons).forEach((toastId) => {
+    const button = buttons[toastId]
+    if (button) {
+      button.onclick = () => {
+        const newToast = originalToasts[toastId].cloneNode(true)
+        newToast.style.display = "flex"
+        document.body.appendChild(newToast)
+      }
+    }
+  })
+})
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -0,0 +1,3 @@
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
+
+The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.13.0.pre.rc.5
+  version: 14.13.0.pre.rc.6
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-30 00:00:00.000000000 Z
+date: 2025-01-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -811,8 +811,10 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/example.yml
 - app/pb_kits/playbook/pb_filter/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_react.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md