From dad6912566d826d11d019aa23055b076ab4fad6f Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Fri, 26 Apr 2024 16:49:58 +0800
Subject: [PATCH] DEV: add toast progress bar to styleguide (#26767)

---
 .../discourse/components/sections/molecules/toasts.hbs     | 6 ++++++
 .../discourse/components/sections/molecules/toasts.js      | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.hbs
index 5ccec27b466..8a83e8984a2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.hbs
@@ -61,6 +61,12 @@
         {{on "click" this.toggleAutoClose}}
       />
     </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="[@options.showProgressBar]">
+      <DToggleSwitch
+        @state={{this.showProgressBar}}
+        {{on "click" this.toggleShowProgressBar}}
+      />
+    </Styleguide::Controls::Row>
     {{#if this.autoClose}}
       <Styleguide::Controls::Row @name="[@options.duration] ms">
         <Input @value={{this.duration}} @type="number" />
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
index 2703cbe0d49..81db0d8cb90 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
@@ -12,6 +12,7 @@ export default class Toasts extends Component {
   @tracked message = "Message";
   @tracked duration = TOAST.options.duration;
   @tracked autoClose = TOAST.options.autoClose;
+  @tracked showProgressBar = TOAST.options.showProgressBar;
   @tracked class;
   @tracked action = true;
   @tracked icon;
@@ -48,6 +49,7 @@ export default class Toasts extends Component {
     this.toasts[theme]({
       duration: this.duration,
       autoClose: this.autoClose,
+      showProgressBar: this.showProgressBar,
       class: this.class,
       data: {
         title: this.title,
@@ -67,4 +69,9 @@ export default class Toasts extends Component {
   toggleAutoClose() {
     this.autoClose = !this.autoClose;
   }
+
+  @action
+  toggleShowProgressBar() {
+    this.showProgressBar = !this.showProgressBar;
+  }
 }