fixup! Feat(web): Add Message and Link for ToastBar #DS-1213

lmc-eu · May 24, 2024 · f3fd50a · f3fd50a
1 parent e5dac0f
commit f3fd50a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
@@ -57,10 +57,7 @@ type Config = {
   containerId: string;
   enableAutoClose: boolean;
   message: HTMLElement | string;
-  link: {
-    href: string;
-    text: string;
-  };
+  link: HTMLElement | string;
   hasIcon: boolean;
   iconName: string;
   id: string;
@@ -205,8 +202,8 @@ class Toast extends BaseComponent {
 
     messageElement!.innerHTML = typeof config.message === 'string' ? config.message : config.message.outerHTML;
 
-    linkElement!.setAttribute('href', config.link.href);
-    linkElement!.textContent = config.link.text;
+    linkElement!.setAttribute('href', '#');
+    linkElement!.innerHTML = typeof config.link === 'string' ? config.link : config.link.outerHTML;
 
     return itemElement;
   }

diff --git a/packages/web/src/scss/components/Toast/dynamic-toast.mjs b/packages/web/src/scss/components/Toast/dynamic-toast.mjs
@@ -6,8 +6,9 @@ export const addDynamicToast = (event, containerId) => {
     containerId,
     autoCloseInterval: formElement.querySelector('#toast-auto-close-interval').value,
     color: formElement.querySelector('#toast-color').value,
-    content: formElement.querySelector('#toast-content').value,
     enableAutoClose: formElement.querySelector('#toast-enable-auto-close').checked,
+    message: formElement.querySelector('#toast-message').value,
+    link: formElement.querySelector('#toast-link').value,
     hasIcon: formElement.querySelector('#toast-has-icon').checked,
     id: `my-dynamic-toast-${Date.now()}`,
     isDismissible: formElement.querySelector('#toast-is-dismissible').checked,

diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
@@ -195,8 +195,13 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
             <input type="number" min="0" max="60000" step="500" value="3000" id="toast-auto-close-interval" name="auto-close-interval" class="TextField__input" />
           </div>
           <div class="TextArea">
-            <label for="toast-content" class="TextArea__label">Message</label>
-            <textarea id="toast-content" class="TextArea__input" autocomplete="off">This is a new toast message.</textarea>
+            <label for="toast-message" class="TextArea__label">Message</label>
+            <textarea id="toast-message" class="TextArea__input" autocomplete="off">This is a new toast message.</textarea>
+            <div class="TextArea__helperText">Can contain HTML.</div>
+          </div>
+          <div class="TextArea">
+            <label for="toast-link" class="TextArea__label">Link</label>
+            <textarea id="toast-link" class="TextArea__input" autocomplete="off">This is a toast link.</textarea>
             <div class="TextArea__helperText">Can contain HTML.</div>
           </div>
           <div>