From e6430a4eb619e1c1c7c6b63385a14ca5b42329e7 Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Fri, 21 Mar 2025 13:16:58 -0700
Subject: [PATCH 1/8] feat(toast): DLT-2418 support multiple layouts within
 toast

---
 .../toast/layouts/toast_layout_alternate.vue  | 140 ++++++++++++
 .../toast/layouts/toast_layout_default.vue    | 193 +++++++++++++++++
 .../dialtone-vue2/components/toast/toast.mdx  |   1 -
 .../components/toast/toast.test.js            |   4 +-
 .../dialtone-vue2/components/toast/toast.vue  | 199 +++++++++---------
 .../components/toast/toast_constants.js       |   2 +
 .../components/toast/toast_default.story.vue  |   3 +-
 7 files changed, 444 insertions(+), 98 deletions(-)
 create mode 100644 packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
 create mode 100644 packages/dialtone-vue2/components/toast/layouts/toast_layout_default.vue

diff --git a/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue b/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
new file mode 100644
index 0000000000..c749a13dad
--- /dev/null
+++ b/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
@@ -0,0 +1,140 @@
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- stub for the new alternate toast layout -->
+<template>
+  <div
+    v-if="isShown"
+    :class="[
+      'd-toast',
+    ]"
+    data-qa="dt-toast"
+    :aria-hidden="(!isShown).toString()"
+  >
+    <div class="d-toast__dialog">
+      New Toast Layout Placeholder
+    </div>
+  </div>
+</template>
+
+<script>
+import utils from '@/common/utils';
+import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import { TOAST_ROLES } from '../toast_constants.js';
+export default {
+  name: 'ToastLayoutAlternate',
+
+  components: {
+  },
+
+  mixins: [SrOnlyCloseButtonMixin],
+
+  props: {
+    isShown: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
+     */
+    title: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Message of the toast. Overridden by default slot.
+     */
+    message: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
+     * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
+     */
+    role: {
+      type: String,
+      default: 'status',
+      validator: (role) => {
+        return TOAST_ROLES.includes(role);
+      },
+    },
+
+    /**
+     * Severity level of the toast, sets the icon and background
+     * @values base, success, error, gradient
+     */
+    kind: {
+      type: String,
+      default: 'base',
+    },
+
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Props for the toast close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    /**
+     * Hides the close button from the toast
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+  },
+};
+</script>
diff --git a/packages/dialtone-vue2/components/toast/layouts/toast_layout_default.vue b/packages/dialtone-vue2/components/toast/layouts/toast_layout_default.vue
new file mode 100644
index 0000000000..95dc9be95b
--- /dev/null
+++ b/packages/dialtone-vue2/components/toast/layouts/toast_layout_default.vue
@@ -0,0 +1,193 @@
+<template>
+  <div
+    v-if="isShown"
+    :class="[
+      'd-toast',
+      kindClass,
+      { 'd-toast--important': important },
+    ]"
+    data-qa="dt-toast"
+    :aria-hidden="(!isShown).toString()"
+  >
+    <div class="d-toast__dialog">
+      <dt-notice-icon
+        v-if="!hideIcon"
+        :kind="kind"
+        v-on="$listeners"
+      >
+        <!-- @slot Slot for custom icon -->
+        <slot name="icon" />
+      </dt-notice-icon>
+      <dt-notice-content
+        :title-id="titleId"
+        :content-id="contentId"
+        :title="title"
+        :role="role"
+        v-on="$listeners"
+      >
+        <template #titleOverride>
+          <!-- @slot Allows you to override the title, only use this if you need to override
+          with something other than text. Otherwise use the "title" prop. -->
+          <slot name="titleOverride" />
+        </template>
+        <!-- @slot the main textual content of the toast -->
+        <slot>
+          {{ message }}
+        </slot>
+      </dt-notice-content>
+      <dt-notice-action
+        :hide-action="hideAction"
+        :hide-close="hideClose"
+        :close-button-props="closeButtonProps"
+        :visually-hidden-close="visuallyHiddenClose"
+        :visually-hidden-close-label="visuallyHiddenCloseLabel"
+        v-on="$listeners"
+      >
+        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
+        <slot name="action" />
+      </dt-notice-action>
+    </div>
+  </div>
+</template>
+
+<script>
+import utils from '@/common/utils';
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';
+import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import { TOAST_ROLES } from '../toast_constants.js';
+export default {
+  name: 'ToastLayoutDefault',
+
+  components: {
+    DtNoticeIcon,
+    DtNoticeContent,
+    DtNoticeAction,
+  },
+
+  mixins: [SrOnlyCloseButtonMixin],
+
+  props: {
+    isShown: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
+     */
+    title: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Message of the toast. Overridden by default slot.
+     */
+    message: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
+     * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
+     */
+    role: {
+      type: String,
+      default: 'status',
+      validator: (role) => {
+        return TOAST_ROLES.includes(role);
+      },
+    },
+
+    /**
+     * Severity level of the toast, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: 'base',
+      validator: (kind) => {
+        return NOTICE_KINDS.includes(kind);
+      },
+    },
+
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Props for the toast close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    /**
+     * Hides the close button from the toast
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    kindClass () {
+      const kindClasses = {
+        error: 'd-toast--error',
+        info: 'd-toast--info',
+        success: 'd-toast--success',
+        warning: 'd-toast--warning',
+        base: 'd-toast--base',
+      };
+
+      return kindClasses[this.kind];
+    },
+  },
+};
+</script>
diff --git a/packages/dialtone-vue2/components/toast/toast.mdx b/packages/dialtone-vue2/components/toast/toast.mdx
index 209775d154..e678f3e30a 100644
--- a/packages/dialtone-vue2/components/toast/toast.mdx
+++ b/packages/dialtone-vue2/components/toast/toast.mdx
@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/blocks';
-
 import * as ToastStories from './toast.stories';
 import RedirectToDocs from "@/common/snippets/redirect-to-docs.mdx"
 
diff --git a/packages/dialtone-vue2/components/toast/toast.test.js b/packages/dialtone-vue2/components/toast/toast.test.js
index c8c999d40a..d826116b30 100644
--- a/packages/dialtone-vue2/components/toast/toast.test.js
+++ b/packages/dialtone-vue2/components/toast/toast.test.js
@@ -23,6 +23,8 @@ describe('DtToast Tests', () => {
       localVue: testContext.localVue,
     });
 
+    console.log(wrapper.html());
+
     toast = wrapper.find('[data-qa="dt-toast"]');
     actionChildStub = wrapper.find('dt-notice-action-stub');
     contentChildStub = wrapper.find('dt-notice-content-stub');
@@ -44,7 +46,7 @@ describe('DtToast Tests', () => {
 
   describe('Presentation Tests', () => {
     describe('When the toast renders', () => {
-      it('should exist', () => {
+      it.only('should exist', () => {
         expect(wrapper.exists()).toBeTruthy();
       });
 
diff --git a/packages/dialtone-vue2/components/toast/toast.vue b/packages/dialtone-vue2/components/toast/toast.vue
index 36b559f3ec..bfe891a39e 100644
--- a/packages/dialtone-vue2/components/toast/toast.vue
+++ b/packages/dialtone-vue2/components/toast/toast.vue
@@ -1,60 +1,81 @@
 <template>
-  <div
-    v-if="isShown"
-    :class="[
-      'd-toast',
-      kindClass,
-      { 'd-toast--important': important },
-    ]"
-    data-qa="dt-toast"
-    :aria-hidden="(!isShown).toString()"
+  <toast-layout-alternate
+    v-if="layout === 'alternate'"
+    :is-shown="isShown"
+    :title-id="titleId"
+    :content-id="contentId"
+    :title="title"
+    :message="message"
+    :role="role"
+    :kind="kind"
+    :important="important"
+    :close-button-props="closeButtonProps"
+    :hide-close="hideClose"
+    :hide-icon="hideIcon"
+    :hide-action="hideAction"
+    v-on="$listeners"
+    @close="handleClose"
   >
-    <div class="d-toast__dialog">
-      <dt-notice-icon
-        v-if="!hideIcon"
-        :kind="kind"
-        v-on="$listeners"
-      >
-        <!-- @slot Slot for custom icon -->
-        <slot name="icon" />
-      </dt-notice-icon>
-      <dt-notice-content
-        :title-id="titleId"
-        :content-id="contentId"
-        :title="title"
-        :role="role"
-        v-on="$listeners"
-      >
-        <template #titleOverride>
-          <!-- @slot Allows you to override the title, only use this if you need to override
+    <!-- @slot Slot for custom icon -->
+    <template #icon>
+      <slot name="icon" />
+    </template>
+    <template #titleOverride>
+      <!-- @slot Allows you to override the title, only use this if you need to override
           with something other than text. Otherwise use the "title" prop. -->
-          <slot name="titleOverride" />
-        </template>
-        <!-- @slot the main textual content of the toast -->
-        <slot>
-          {{ message }}
-        </slot>
-      </dt-notice-content>
-      <dt-notice-action
-        :hide-action="hideAction"
-        :hide-close="hideClose"
-        :close-button-props="closeButtonProps"
-        :visually-hidden-close="visuallyHiddenClose"
-        :visually-hidden-close-label="visuallyHiddenCloseLabel"
-        v-on="noticeActionListeners"
-      >
-        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
-        <slot name="action" />
-      </dt-notice-action>
-    </div>
-  </div>
+      <slot name="titleOverride" />
+    </template>
+    <!-- @slot the main textual content of the toast -->
+    <slot>
+      {{ message }}
+    </slot>
+    <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
+    <template #action>
+      <slot name="action" />
+    </template>
+  </toast-layout-alternate>
+  <toast-layout-default
+    v-else
+    :is-shown="isShown"
+    :title-id="titleId"
+    :content-id="contentId"
+    :title="title"
+    :message="message"
+    :role="role"
+    :kind="kind"
+    :important="important"
+    :close-button-props="closeButtonProps"
+    :hide-close="hideClose"
+    :hide-icon="hideIcon"
+    :hide-action="hideAction"
+    v-on="$listeners"
+    @close="handleClose"
+  >
+    <!-- @slot Slot for custom icon -->
+    <template #icon>
+      <slot name="icon" />
+    </template>
+    <template #titleOverride>
+      <!-- @slot Allows you to override the title, only use this if you need to override
+          with something other than text. Otherwise use the "title" prop. -->
+      <slot name="titleOverride" />
+    </template>
+    <!-- @slot the main textual content of the toast -->
+    <slot>
+      {{ message }}
+    </slot>
+    <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
+    <template #action>
+      <slot name="action" />
+    </template>
+  </toast-layout-default>
 </template>
 
 <script>
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';
-import utils from '@/common/utils';
-import { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';
+import { TOAST_MIN_DURATION, TOAST_LAYOUTS } from './toast_constants.js';
 import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import ToastLayoutDefault from './layouts/toast_layout_default.vue';
+import ToastLayoutAlternate from './layouts/toast_layout_alternate.vue';
 
 /**
  * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.
@@ -65,9 +86,8 @@ export default {
   name: 'DtToast',
 
   components: {
-    DtNoticeIcon,
-    DtNoticeContent,
-    DtNoticeAction,
+    ToastLayoutDefault,
+    ToastLayoutAlternate,
   },
 
   mixins: [SrOnlyCloseButtonMixin],
@@ -79,7 +99,7 @@ export default {
      */
     titleId: {
       type: String,
-      default () { return utils.getUniqueString(); },
+      default: undefined,
     },
 
     /**
@@ -88,7 +108,7 @@ export default {
      */
     contentId: {
       type: String,
-      default () { return utils.getUniqueString(); },
+      default: undefined,
     },
 
     /**
@@ -96,7 +116,7 @@ export default {
      */
     title: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     /**
@@ -104,7 +124,7 @@ export default {
      */
     message: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     /**
@@ -114,22 +134,16 @@ export default {
      */
     role: {
       type: String,
-      default: 'status',
-      validator: (role) => {
-        return TOAST_ROLES.includes(role);
-      },
+      default: undefined,
     },
 
     /**
-     * Severity level of the toast, sets the icon and background
-     * @values base, error, info, success, warning
+     * Severity level of the toast, could be different depending on which toast layout is used.
+     * @values base, error, info, success, warning, gradient
      */
     kind: {
       type: String,
-      default: 'base',
-      validator: (kind) => {
-        return NOTICE_KINDS.includes(kind);
-      },
+      default: undefined,
     },
 
     /**
@@ -158,7 +172,7 @@ export default {
      */
     closeButtonProps: {
       type: Object,
-      default: () => ({}),
+      default: undefined,
     },
 
     /**
@@ -167,7 +181,7 @@ export default {
      */
     hideClose: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
 
     /**
@@ -176,7 +190,7 @@ export default {
      */
     hideIcon: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
 
     /**
@@ -185,7 +199,7 @@ export default {
      */
     hideAction: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
 
     /**
@@ -200,6 +214,20 @@ export default {
         return duration >= TOAST_MIN_DURATION;
       },
     },
+
+    /**
+     * The duration in ms the toast will display before disappearing.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
+     * @values default, alternate
+     */
+    layout: {
+      type: String,
+      default: 'default',
+      validator: (layout) => {
+        return TOAST_LAYOUTS.includes(layout);
+      },
+    },
   },
 
   emits: [
@@ -226,30 +254,6 @@ export default {
   },
 
   computed: {
-    kindClass () {
-      const kindClasses = {
-        error: 'd-toast--error',
-        info: 'd-toast--info',
-        success: 'd-toast--success',
-        warning: 'd-toast--warning',
-        base: 'd-toast--base',
-      };
-
-      return kindClasses[this.kind];
-    },
-
-    noticeActionListeners () {
-      return {
-        ...this.$listeners,
-
-        close: event => {
-          this.isShown = false;
-          this.$emit('update:show', false);
-          this.$emit('close', event);
-        },
-      };
-    },
-
     shouldSetTimeout () {
       return !!this.duration && this.duration >= this.minDuration;
     },
@@ -285,6 +289,11 @@ export default {
         }, this.duration);
       }
     },
+
+    handleClose () {
+      this.isShown = false;
+      this.$emit('update:show', false);
+    },
   },
 };
 </script>
diff --git a/packages/dialtone-vue2/components/toast/toast_constants.js b/packages/dialtone-vue2/components/toast/toast_constants.js
index 5ab15dc8ca..8e3d47452e 100644
--- a/packages/dialtone-vue2/components/toast/toast_constants.js
+++ b/packages/dialtone-vue2/components/toast/toast_constants.js
@@ -1,7 +1,9 @@
 export const TOAST_ROLES = ['status', 'alert'];
 export const TOAST_MIN_DURATION = 6000;
+export const TOAST_LAYOUTS = ['default', 'alternate'];
 
 export default {
   TOAST_ROLES,
   TOAST_MIN_DURATION,
+  TOAST_LAYOUTS,
 };
diff --git a/packages/dialtone-vue2/components/toast/toast_default.story.vue b/packages/dialtone-vue2/components/toast/toast_default.story.vue
index b844adfe4f..ab0c291214 100644
--- a/packages/dialtone-vue2/components/toast/toast_default.story.vue
+++ b/packages/dialtone-vue2/components/toast/toast_default.story.vue
@@ -18,10 +18,11 @@
         :hide-action="$attrs.hideAction"
         :hide-icon="$attrs.hideIcon"
         :duration="$attrs.duration"
+        :layout="$attrs.layout"
         :close-button-props="buttonCloseProps"
         :visually-hidden-close="$attrs.visuallyHiddenClose"
         :visually-hidden-close-label="$attrs.visuallyHiddenCloseLabel"
-        @close="$attrs.onClose($event)"
+        @close="$attrs.onClose"
       >
         <span
           v-if="$attrs.default"

From 54aeff7cde64acfc37e000adee5b1e973ec35a77 Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Fri, 21 Mar 2025 15:48:04 -0700
Subject: [PATCH 2/8] fix tests

---
 .../components/toast/toast.test.js            | 74 +++++--------------
 .../dialtone-vue2/components/toast/toast.vue  |  2 +-
 2 files changed, 21 insertions(+), 55 deletions(-)

diff --git a/packages/dialtone-vue2/components/toast/toast.test.js b/packages/dialtone-vue2/components/toast/toast.test.js
index d826116b30..847b4edeb2 100644
--- a/packages/dialtone-vue2/components/toast/toast.test.js
+++ b/packages/dialtone-vue2/components/toast/toast.test.js
@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import DtToast from './toast.vue';
 import { TOAST_MIN_DURATION } from './toast_constants';
 
@@ -12,23 +12,21 @@ const testContext = {};
 describe('DtToast Tests', () => {
   let wrapper;
   let toast;
-  let actionChildStub;
-  let contentChildStub;
-  let iconChildStub;
+  let actionChild;
+  let contentChild;
+  let iconChild;
 
   const updateWrapper = () => {
-    wrapper = shallowMount(DtToast, {
+    wrapper = mount(DtToast, {
       propsData: { ...baseProps, ...mockProps },
       slots: { ...baseSlots, ...mockSlots },
       localVue: testContext.localVue,
     });
 
-    console.log(wrapper.html());
-
     toast = wrapper.find('[data-qa="dt-toast"]');
-    actionChildStub = wrapper.find('dt-notice-action-stub');
-    contentChildStub = wrapper.find('dt-notice-content-stub');
-    iconChildStub = wrapper.find('dt-notice-icon-stub');
+    actionChild = wrapper.findComponent({ name: 'dt-notice-action' });
+    contentChild = wrapper.findComponent({ name: 'dt-notice-content' });
+    iconChild = wrapper.findComponent({ name: 'dt-notice-icon' });
   };
 
   beforeAll(() => {
@@ -46,7 +44,7 @@ describe('DtToast Tests', () => {
 
   describe('Presentation Tests', () => {
     describe('When the toast renders', () => {
-      it.only('should exist', () => {
+      it('should exist', () => {
         expect(wrapper.exists()).toBeTruthy();
       });
 
@@ -67,15 +65,15 @@ describe('DtToast Tests', () => {
       });
 
       it('action slot is passed down correctly', () => {
-        expect(actionChildStub.text()).toBe(mockSlots.action);
+        expect(actionChild.text()).toBe(mockSlots.action);
       });
 
       it('default slot is passed down correctly', () => {
-        expect(contentChildStub.text()).toBe(mockSlots.default);
+        expect(contentChild.text()).toBe(mockSlots.default);
       });
 
       it('icon slot is passed down correctly', () => {
-        expect(iconChildStub.text()).toBe(mockSlots.icon);
+        expect(iconChild.text()).toBe(mockSlots.icon);
       });
     });
 
@@ -93,23 +91,23 @@ describe('DtToast Tests', () => {
       });
 
       it('titleId prop is passed down correctly', () => {
-        expect(contentChildStub.props('titleId')).toBe(mockProps.titleId);
+        expect(contentChild.props('titleId')).toBe(mockProps.titleId);
       });
 
       it('contentId prop is passed down correctly', () => {
-        expect(contentChildStub.props('contentId')).toBe(mockProps.contentId);
+        expect(contentChild.props('contentId')).toBe(mockProps.contentId);
       });
 
       it('title prop is passed down correctly', () => {
-        expect(contentChildStub.props('title')).toBe(mockProps.title);
+        expect(contentChild.props('title')).toBe(mockProps.title);
       });
 
       it('message prop is passed down correctly', () => {
-        expect(contentChildStub.text()).toBe(mockProps.message);
+        expect(contentChild.find('[data-qa="notice-content-message"]').text()).toBe(mockProps.message);
       });
 
       it('hideClose prop is passed down correctly', () => {
-        expect(actionChildStub.props('hideClose')).toBe(mockProps.hideClose);
+        expect(actionChild.props('hideClose')).toBe(mockProps.hideClose);
       });
     });
 
@@ -189,7 +187,7 @@ describe('DtToast Tests', () => {
       const MOCK_ROLE = DtToast.props.role.default;
 
       it('shows correct default role', () => {
-        expect(contentChildStub.attributes('role')).toBe(MOCK_ROLE);
+        expect(contentChild.attributes('role')).toBe(MOCK_ROLE);
       });
 
       it('should have aria-hidden set to false when toast is shown', () => {
@@ -203,44 +201,12 @@ describe('DtToast Tests', () => {
 
         updateWrapper();
 
-        expect(contentChildStub.attributes('role')).toBe('alert');
+        expect(contentChild.attributes('role')).toBe('alert');
       });
     });
   });
 
   describe('Validation Tests', () => {
-    describe('Role Validator', () => {
-      const MOCK_PROP = DtToast.props.role;
-
-      describe('When provided role is in TOAST_ROLES', () => {
-        it('passes custom prop validation', () => {
-          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
-        });
-      });
-
-      describe('When provided role is not in TOAST_ROLES', () => {
-        it('fails custom prop validation', () => {
-          expect(MOCK_PROP.validator(`INVALID_ROLE`)).toBe(false);
-        });
-      });
-    });
-
-    describe('Kind Validator', () => {
-      const MOCK_PROP = DtToast.props.kind;
-
-      describe('When provided kind is in NOTICE_KINDS', () => {
-        it('passes custom prop validation', () => {
-          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
-        });
-      });
-
-      describe('When provided kind is not in NOTICE_KINDS', () => {
-        it('fails custom prop validation', () => {
-          expect(MOCK_PROP.validator(`INVALID_KIND`)).toBe(false);
-        });
-      });
-    });
-
     describe('Duration Validator', () => {
       const MOCK_PROP = DtToast.props.duration;
       const MOCK_DURATION = TOAST_MIN_DURATION;
@@ -274,7 +240,7 @@ describe('DtToast Tests', () => {
 
         updateWrapper();
 
-        MOCK_ELEMENT = actionChildStub;
+        MOCK_ELEMENT = actionChild;
 
         expect(MOCK_ELEMENT.props(MOCK_PROP_NAME)).toBe(MOCK_PROP_VALUE);
       });
diff --git a/packages/dialtone-vue2/components/toast/toast.vue b/packages/dialtone-vue2/components/toast/toast.vue
index bfe891a39e..6fb32e00e7 100644
--- a/packages/dialtone-vue2/components/toast/toast.vue
+++ b/packages/dialtone-vue2/components/toast/toast.vue
@@ -134,7 +134,7 @@ export default {
      */
     role: {
       type: String,
-      default: undefined,
+      default: 'status',
     },
 
     /**

From 2ee9ccbe5bdea077f1187d178ea30ea98fb1cf63 Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Tue, 25 Mar 2025 10:36:53 -0700
Subject: [PATCH 3/8] review fixes

---
 .../dialtone-vue2/components/toast/toast.vue  | 49 +++----------------
 1 file changed, 8 insertions(+), 41 deletions(-)

diff --git a/packages/dialtone-vue2/components/toast/toast.vue b/packages/dialtone-vue2/components/toast/toast.vue
index 6fb32e00e7..43a11107b0 100644
--- a/packages/dialtone-vue2/components/toast/toast.vue
+++ b/packages/dialtone-vue2/components/toast/toast.vue
@@ -1,6 +1,6 @@
 <template>
-  <toast-layout-alternate
-    v-if="layout === 'alternate'"
+  <component
+    :is="selectedLayout"
     :is-shown="isShown"
     :title-id="titleId"
     :content-id="contentId"
@@ -33,42 +33,7 @@
     <template #action>
       <slot name="action" />
     </template>
-  </toast-layout-alternate>
-  <toast-layout-default
-    v-else
-    :is-shown="isShown"
-    :title-id="titleId"
-    :content-id="contentId"
-    :title="title"
-    :message="message"
-    :role="role"
-    :kind="kind"
-    :important="important"
-    :close-button-props="closeButtonProps"
-    :hide-close="hideClose"
-    :hide-icon="hideIcon"
-    :hide-action="hideAction"
-    v-on="$listeners"
-    @close="handleClose"
-  >
-    <!-- @slot Slot for custom icon -->
-    <template #icon>
-      <slot name="icon" />
-    </template>
-    <template #titleOverride>
-      <!-- @slot Allows you to override the title, only use this if you need to override
-          with something other than text. Otherwise use the "title" prop. -->
-      <slot name="titleOverride" />
-    </template>
-    <!-- @slot the main textual content of the toast -->
-    <slot>
-      {{ message }}
-    </slot>
-    <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
-    <template #action>
-      <slot name="action" />
-    </template>
-  </toast-layout-default>
+  </component>
 </template>
 
 <script>
@@ -216,9 +181,7 @@ export default {
     },
 
     /**
-     * The duration in ms the toast will display before disappearing.
-     * The toast won't disappear if the duration is not provided.
-     * If it's provided, it should be equal to or greater than 6000.
+     * The layout / styling you wish to use for the toast.
      * @values default, alternate
      */
     layout: {
@@ -257,6 +220,10 @@ export default {
     shouldSetTimeout () {
       return !!this.duration && this.duration >= this.minDuration;
     },
+
+    selectedLayout () {
+      return this.layout === 'alternate' ? ToastLayoutAlternate : ToastLayoutDefault;
+    },
   },
 
   watch: {

From bccc3002b5dfa39b8cc694c709e1ffe08c1daf1f Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Tue, 25 Mar 2025 11:57:29 -0700
Subject: [PATCH 4/8] add tests

---
 .../layouts/toast_layout_default.test.js      | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 packages/dialtone-vue2/components/toast/layouts/toast_layout_default.test.js

diff --git a/packages/dialtone-vue2/components/toast/layouts/toast_layout_default.test.js b/packages/dialtone-vue2/components/toast/layouts/toast_layout_default.test.js
new file mode 100644
index 0000000000..052694d35a
--- /dev/null
+++ b/packages/dialtone-vue2/components/toast/layouts/toast_layout_default.test.js
@@ -0,0 +1,44 @@
+import { createLocalVue } from '@vue/test-utils';
+import ToastLayoutDefault from './toast_layout_default.vue';
+
+const testContext = {};
+
+describe('Toast Default Layout Tests', () => {
+  beforeAll(() => {
+    testContext.localVue = createLocalVue();
+  });
+
+  describe('Validation Tests', () => {
+    describe('Role Validator', () => {
+      const MOCK_PROP = ToastLayoutDefault.props.role;
+
+      describe('When provided role is in TOAST_ROLES', () => {
+        it('passes custom prop validation', () => {
+          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
+        });
+      });
+
+      describe('When provided role is not in TOAST_ROLES', () => {
+        it('fails custom prop validation', () => {
+          expect(MOCK_PROP.validator(`INVALID_ROLE`)).toBe(false);
+        });
+      });
+    });
+
+    describe('Kind Validator', () => {
+      const MOCK_PROP = ToastLayoutDefault.props.kind;
+
+      describe('When provided kind is in NOTICE_KINDS', () => {
+        it('passes custom prop validation', () => {
+          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
+        });
+      });
+
+      describe('When provided kind is not in NOTICE_KINDS', () => {
+        it('fails custom prop validation', () => {
+          expect(MOCK_PROP.validator(`INVALID_KIND`)).toBe(false);
+        });
+      });
+    });
+  });
+});

From 4dfa0453377c900d3623a19b333e29f1cdb025e7 Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Thu, 27 Mar 2025 10:31:41 -0700
Subject: [PATCH 5/8] vue 3

---
 .../toast/layouts/toast_layout_alternate.vue  | 140 +++++++++++++
 .../layouts/toast_layout_default.test.js      |  37 ++++
 .../toast/layouts/toast_layout_default.vue    | 195 ++++++++++++++++++
 .../dialtone-vue3/components/toast/toast.mdx  |   1 -
 .../components/toast/toast.stories.js         |   7 +
 .../components/toast/toast.test.js            |  34 +--
 .../dialtone-vue3/components/toast/toast.vue  | 152 +++++++-------
 .../components/toast/toast_constants.js       |   2 +
 .../components/toast/toast_default.story.vue  |   3 +-
 9 files changed, 456 insertions(+), 115 deletions(-)
 create mode 100644 packages/dialtone-vue3/components/toast/layouts/toast_layout_alternate.vue
 create mode 100644 packages/dialtone-vue3/components/toast/layouts/toast_layout_default.test.js
 create mode 100644 packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue

diff --git a/packages/dialtone-vue3/components/toast/layouts/toast_layout_alternate.vue b/packages/dialtone-vue3/components/toast/layouts/toast_layout_alternate.vue
new file mode 100644
index 0000000000..c749a13dad
--- /dev/null
+++ b/packages/dialtone-vue3/components/toast/layouts/toast_layout_alternate.vue
@@ -0,0 +1,140 @@
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- stub for the new alternate toast layout -->
+<template>
+  <div
+    v-if="isShown"
+    :class="[
+      'd-toast',
+    ]"
+    data-qa="dt-toast"
+    :aria-hidden="(!isShown).toString()"
+  >
+    <div class="d-toast__dialog">
+      New Toast Layout Placeholder
+    </div>
+  </div>
+</template>
+
+<script>
+import utils from '@/common/utils';
+import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import { TOAST_ROLES } from '../toast_constants.js';
+export default {
+  name: 'ToastLayoutAlternate',
+
+  components: {
+  },
+
+  mixins: [SrOnlyCloseButtonMixin],
+
+  props: {
+    isShown: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
+     */
+    title: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Message of the toast. Overridden by default slot.
+     */
+    message: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
+     * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
+     */
+    role: {
+      type: String,
+      default: 'status',
+      validator: (role) => {
+        return TOAST_ROLES.includes(role);
+      },
+    },
+
+    /**
+     * Severity level of the toast, sets the icon and background
+     * @values base, success, error, gradient
+     */
+    kind: {
+      type: String,
+      default: 'base',
+    },
+
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Props for the toast close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    /**
+     * Hides the close button from the toast
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+  },
+};
+</script>
diff --git a/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.test.js b/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.test.js
new file mode 100644
index 0000000000..ec447f682c
--- /dev/null
+++ b/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.test.js
@@ -0,0 +1,37 @@
+import ToastLayoutDefault from './toast_layout_default.vue';
+
+describe('Toast Default Layout Tests', () => {
+  describe('Validation Tests', () => {
+    describe('Role Validator', () => {
+      const MOCK_PROP = ToastLayoutDefault.props.role;
+
+      describe('When provided role is in TOAST_ROLES', () => {
+        it('passes custom prop validation', () => {
+          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
+        });
+      });
+
+      describe('When provided role is not in TOAST_ROLES', () => {
+        it('fails custom prop validation', () => {
+          expect(MOCK_PROP.validator(`INVALID_ROLE`)).toBe(false);
+        });
+      });
+    });
+
+    describe('Kind Validator', () => {
+      const MOCK_PROP = ToastLayoutDefault.props.kind;
+
+      describe('When provided kind is in NOTICE_KINDS', () => {
+        it('passes custom prop validation', () => {
+          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
+        });
+      });
+
+      describe('When provided kind is not in NOTICE_KINDS', () => {
+        it('fails custom prop validation', () => {
+          expect(MOCK_PROP.validator(`INVALID_KIND`)).toBe(false);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue b/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue
new file mode 100644
index 0000000000..4c00f7f3fb
--- /dev/null
+++ b/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue
@@ -0,0 +1,195 @@
+<template>
+  <div
+    v-if="isShown"
+    :class="[
+      'd-toast',
+      kindClass,
+      { 'd-toast--important': important },
+    ]"
+    data-qa="dt-toast"
+    :aria-hidden="(!isShown).toString()"
+  >
+    <div class="d-toast__dialog">
+      <dt-notice-icon
+        v-if="!hideIcon"
+        :kind="kind"
+        v-bind="$attrs"
+      >
+        <!-- @slot Slot for custom icon -->
+        <slot name="icon" />
+      </dt-notice-icon>
+      <dt-notice-content
+        :title-id="titleId"
+        :content-id="contentId"
+        :title="title"
+        :role="role"
+        v-bind="$attrs"
+      >
+        <template #titleOverride>
+          <!-- @slot Allows you to override the title, only use this if you need to override
+          with something other than text. Otherwise use the "title" prop. -->
+          <slot name="titleOverride" />
+        </template>
+        <!-- @slot the main textual content of the toast -->
+        <slot>
+          {{ message }}
+        </slot>
+      </dt-notice-content>
+      <dt-notice-action
+        :hide-action="hideAction"
+        :hide-close="hideClose"
+        :close-button-props="closeButtonProps"
+        :visually-hidden-close="visuallyHiddenClose"
+        :visually-hidden-close-label="visuallyHiddenCloseLabel"
+        v-bind="$attrs"
+      >
+        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
+        <slot name="action" />
+      </dt-notice-action>
+    </div>
+  </div>
+</template>
+
+<script>
+import utils from '@/common/utils';
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';
+import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import { TOAST_ROLES } from '../toast_constants.js';
+export default {
+  name: 'ToastLayoutDefault',
+
+  components: {
+    DtNoticeIcon,
+    DtNoticeContent,
+    DtNoticeAction,
+  },
+
+  mixins: [SrOnlyCloseButtonMixin],
+
+  inheritAttrs: false,
+
+  props: {
+    isShown: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default () { return utils.getUniqueString(); },
+    },
+
+    /**
+     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
+     */
+    title: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Message of the toast. Overridden by default slot.
+     */
+    message: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
+     * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
+     */
+    role: {
+      type: String,
+      default: 'status',
+      validator: (role) => {
+        return TOAST_ROLES.includes(role);
+      },
+    },
+
+    /**
+     * Severity level of the toast, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: 'base',
+      validator: (kind) => {
+        return NOTICE_KINDS.includes(kind);
+      },
+    },
+
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Props for the toast close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    /**
+     * Hides the close button from the toast
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    kindClass () {
+      const kindClasses = {
+        error: 'd-toast--error',
+        info: 'd-toast--info',
+        success: 'd-toast--success',
+        warning: 'd-toast--warning',
+        base: 'd-toast--base',
+      };
+
+      return kindClasses[this.kind];
+    },
+  },
+};
+</script>
diff --git a/packages/dialtone-vue3/components/toast/toast.mdx b/packages/dialtone-vue3/components/toast/toast.mdx
index 209775d154..e678f3e30a 100644
--- a/packages/dialtone-vue3/components/toast/toast.mdx
+++ b/packages/dialtone-vue3/components/toast/toast.mdx
@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/blocks';
-
 import * as ToastStories from './toast.stories';
 import RedirectToDocs from "@/common/snippets/redirect-to-docs.mdx"
 
diff --git a/packages/dialtone-vue3/components/toast/toast.stories.js b/packages/dialtone-vue3/components/toast/toast.stories.js
index 0017626c1e..23550a229c 100644
--- a/packages/dialtone-vue3/components/toast/toast.stories.js
+++ b/packages/dialtone-vue3/components/toast/toast.stories.js
@@ -4,6 +4,7 @@ import DtToast from './toast.vue';
 
 import DtToastDefaultTemplate from './toast_default.story.vue';
 import { NOTICE_KINDS } from '../notice';
+import { TOAST_LAYOUTS } from './toast_constants.js';
 
 const iconsList = getIconNames();
 
@@ -75,6 +76,12 @@ export const argTypesData = {
       type: 'select',
     },
   },
+  layout: {
+    options: TOAST_LAYOUTS,
+    control: {
+      type: 'select',
+    },
+  },
   show: {
     table: {
       defaultValue: {
diff --git a/packages/dialtone-vue3/components/toast/toast.test.js b/packages/dialtone-vue3/components/toast/toast.test.js
index 5cf709641a..a59f885e5a 100644
--- a/packages/dialtone-vue3/components/toast/toast.test.js
+++ b/packages/dialtone-vue3/components/toast/toast.test.js
@@ -100,7 +100,7 @@ describe('DtToast Tests', () => {
       });
 
       it('message prop is passed down correctly', () => {
-        expect(contentChild.text()).toBe(mockProps.message);
+        expect(contentChild.find('[data-qa="notice-content-message"]').text()).toBe(mockProps.message);
       });
 
       it('hideClose prop is passed down correctly', () => {
@@ -204,38 +204,6 @@ describe('DtToast Tests', () => {
   });
 
   describe('Validation Tests', () => {
-    describe('Role Validator', () => {
-      const MOCK_PROP = DtToast.props.role;
-
-      describe('When provided role is in TOAST_ROLES', () => {
-        it('passes custom prop validation', () => {
-          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
-        });
-      });
-
-      describe('When provided role is not in TOAST_ROLES', () => {
-        it('fails custom prop validation', () => {
-          expect(MOCK_PROP.validator(`INVALID_ROLE`)).toBe(false);
-        });
-      });
-    });
-
-    describe('Kind Validator', () => {
-      const MOCK_PROP = DtToast.props.kind;
-
-      describe('When provided kind is in NOTICE_KINDS', () => {
-        it('passes custom prop validation', () => {
-          expect(MOCK_PROP.validator(MOCK_PROP.default)).toBe(true);
-        });
-      });
-
-      describe('When provided kind is not in NOTICE_KINDS', () => {
-        it('fails custom prop validation', () => {
-          expect(MOCK_PROP.validator(`INVALID_KIND`)).toBe(false);
-        });
-      });
-    });
-
     describe('Duration Validator', () => {
       const MOCK_PROP = DtToast.props.duration;
       const MOCK_DURATION = TOAST_MIN_DURATION;
diff --git a/packages/dialtone-vue3/components/toast/toast.vue b/packages/dialtone-vue3/components/toast/toast.vue
index f9c8295a62..f0b02ac340 100644
--- a/packages/dialtone-vue3/components/toast/toast.vue
+++ b/packages/dialtone-vue3/components/toast/toast.vue
@@ -1,58 +1,46 @@
 <template>
-  <div
-    v-if="isShown"
-    :class="[
-      'd-toast',
-      kindClass,
-      { 'd-toast--important': important },
-    ]"
-    data-qa="dt-toast"
-    :aria-hidden="(!isShown).toString()"
+  <component
+    :is="selectedLayout"
+    :is-shown="isShown"
+    :title-id="titleId"
+    :content-id="contentId"
+    :title="title"
+    :message="message"
+    :role="role"
+    :kind="kind"
+    :important="important"
+    :close-button-props="closeButtonProps"
+    :hide-close="hideClose"
+    :hide-icon="hideIcon"
+    :hide-action="hideAction"
+    v-bind="$attrs"
+    @close="handleClose"
   >
-    <div class="d-toast__dialog">
-      <dt-notice-icon
-        v-if="!hideIcon"
-        :kind="kind"
-      >
-        <!-- @slot Slot for custom icon -->
-        <slot name="icon" />
-      </dt-notice-icon>
-      <dt-notice-content
-        :title-id="titleId"
-        :content-id="contentId"
-        :title="title"
-        :role="role"
-      >
-        <template #titleOverride>
-          <!-- @slot Allows you to override the title, only use this if you need to override
+    <!-- @slot Slot for custom icon -->
+    <template #icon>
+      <slot name="icon" />
+    </template>
+    <template #titleOverride>
+      <!-- @slot Allows you to override the title, only use this if you need to override
           with something other than text. Otherwise use the "title" prop. -->
-          <slot name="titleOverride" />
-        </template>
-        <!-- @slot the main textual content of the toast -->
-        <slot>
-          {{ message }}
-        </slot>
-      </dt-notice-content>
-      <dt-notice-action
-        :hide-action="hideAction"
-        :hide-close="hideClose"
-        :close-button-props="closeButtonProps"
-        :visually-hidden-close="visuallyHiddenClose"
-        :visually-hidden-close-label="visuallyHiddenCloseLabel"
-        @close="closeToast"
-      >
-        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
-        <slot name="action" />
-      </dt-notice-action>
-    </div>
-  </div>
+      <slot name="titleOverride" />
+    </template>
+    <!-- @slot the main textual content of the toast -->
+    <slot>
+      {{ message }}
+    </slot>
+    <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
+    <template #action>
+      <slot name="action" />
+    </template>
+  </component>
 </template>
 
 <script>
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';
-import utils from '@/common/utils';
-import { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';
+import { TOAST_MIN_DURATION, TOAST_LAYOUTS } from './toast_constants.js';
 import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import ToastLayoutDefault from './layouts/toast_layout_default.vue';
+import ToastLayoutAlternate from './layouts/toast_layout_alternate.vue';
 
 /**
  * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.
@@ -64,13 +52,14 @@ export default {
   name: 'DtToast',
 
   components: {
-    DtNoticeIcon,
-    DtNoticeContent,
-    DtNoticeAction,
+    ToastLayoutDefault,
+    ToastLayoutAlternate,
   },
 
   mixins: [SrOnlyCloseButtonMixin],
 
+  inheritAttrs: false,
+
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -78,7 +67,7 @@ export default {
      */
     titleId: {
       type: String,
-      default () { return utils.getUniqueString(); },
+      default: undefined,
     },
 
     /**
@@ -87,7 +76,7 @@ export default {
      */
     contentId: {
       type: String,
-      default () { return utils.getUniqueString(); },
+      default: undefined,
     },
 
     /**
@@ -95,7 +84,7 @@ export default {
      */
     title: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     /**
@@ -103,7 +92,7 @@ export default {
      */
     message: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     /**
@@ -114,21 +103,15 @@ export default {
     role: {
       type: String,
       default: 'status',
-      validator: (role) => {
-        return TOAST_ROLES.includes(role);
-      },
     },
 
     /**
-     * Severity level of the toast, sets the icon and background
-     * @values base, error, info, success, warning
+     * Severity level of the toast, could be different depending on which toast layout is used.
+     * @values base, error, info, success, warning, gradient
      */
     kind: {
       type: String,
-      default: 'base',
-      validator: (kind) => {
-        return NOTICE_KINDS.includes(kind);
-      },
+      default: undefined,
     },
 
     /**
@@ -157,7 +140,7 @@ export default {
      */
     closeButtonProps: {
       type: Object,
-      default: () => ({}),
+      default: undefined,
     },
 
     /**
@@ -166,7 +149,7 @@ export default {
      */
     hideClose: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
 
     /**
@@ -175,7 +158,7 @@ export default {
      */
     hideIcon: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
 
     /**
@@ -184,7 +167,7 @@ export default {
      */
     hideAction: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
 
     /**
@@ -199,6 +182,18 @@ export default {
         return duration >= TOAST_MIN_DURATION;
       },
     },
+
+    /**
+     * The layout / styling you wish to use for the toast.
+     * @values default, alternate
+     */
+    layout: {
+      type: String,
+      default: 'default',
+      validator: (layout) => {
+        return TOAST_LAYOUTS.includes(layout);
+      },
+    },
   },
 
   emits: [
@@ -233,21 +228,13 @@ export default {
   },
 
   computed: {
-    kindClass () {
-      const kindClasses = {
-        error: 'd-toast--error',
-        info: 'd-toast--info',
-        success: 'd-toast--success',
-        warning: 'd-toast--warning',
-        base: 'd-toast--base',
-      };
-
-      return kindClasses[this.kind];
-    },
-
     shouldSetTimeout () {
       return !!this.duration && this.duration >= this.minDuration;
     },
+
+    selectedLayout () {
+      return this.layout === 'alternate' ? ToastLayoutAlternate : ToastLayoutDefault;
+    },
   },
 
   watch: {
@@ -283,6 +270,11 @@ export default {
         }, this.duration);
       }
     },
+
+    handleClose () {
+      this.isShown = false;
+      this.$emit('update:show', false);
+    },
   },
 };
 </script>
diff --git a/packages/dialtone-vue3/components/toast/toast_constants.js b/packages/dialtone-vue3/components/toast/toast_constants.js
index 5ab15dc8ca..8e3d47452e 100644
--- a/packages/dialtone-vue3/components/toast/toast_constants.js
+++ b/packages/dialtone-vue3/components/toast/toast_constants.js
@@ -1,7 +1,9 @@
 export const TOAST_ROLES = ['status', 'alert'];
 export const TOAST_MIN_DURATION = 6000;
+export const TOAST_LAYOUTS = ['default', 'alternate'];
 
 export default {
   TOAST_ROLES,
   TOAST_MIN_DURATION,
+  TOAST_LAYOUTS,
 };
diff --git a/packages/dialtone-vue3/components/toast/toast_default.story.vue b/packages/dialtone-vue3/components/toast/toast_default.story.vue
index 6552f09bff..f1b1fd6014 100644
--- a/packages/dialtone-vue3/components/toast/toast_default.story.vue
+++ b/packages/dialtone-vue3/components/toast/toast_default.story.vue
@@ -18,10 +18,11 @@
         :hide-action="$attrs.hideAction"
         :hide-icon="$attrs.hideIcon"
         :duration="$attrs.duration"
+        :layout="$attrs.layout"
         :close-button-props="buttonCloseProps"
         :visually-hidden-close="$attrs.visuallyHiddenClose"
         :visually-hidden-close-label="$attrs.visuallyHiddenCloseLabel"
-        @close="$attrs.onClose($event)"
+        @close="$attrs.onClose"
       >
         <span
           v-if="defaultSlot"

From 0fc15f7e272d0774b8f545c10ae566ce602c2505 Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Thu, 27 Mar 2025 11:15:58 -0700
Subject: [PATCH 6/8] fix vue 3 close event

---
 .../components/toast/layouts/toast_layout_default.vue    | 3 +++
 packages/dialtone-vue3/components/toast/toast.vue        | 9 +--------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue b/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue
index 4c00f7f3fb..ab46fc093a 100644
--- a/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue
+++ b/packages/dialtone-vue3/components/toast/layouts/toast_layout_default.vue
@@ -42,6 +42,7 @@
         :visually-hidden-close="visuallyHiddenClose"
         :visually-hidden-close-label="visuallyHiddenCloseLabel"
         v-bind="$attrs"
+        @close="$emit('close')"
       >
         <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
         <slot name="action" />
@@ -178,6 +179,8 @@ export default {
     },
   },
 
+  emits: ['close'],
+
   computed: {
     kindClass () {
       const kindClasses = {
diff --git a/packages/dialtone-vue3/components/toast/toast.vue b/packages/dialtone-vue3/components/toast/toast.vue
index f0b02ac340..cf30bb305f 100644
--- a/packages/dialtone-vue3/components/toast/toast.vue
+++ b/packages/dialtone-vue3/components/toast/toast.vue
@@ -204,14 +204,6 @@ export default {
      */
     'close',
 
-    /**
-     * Native click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    'click',
-
     /**
      * Sync show value
      *
@@ -273,6 +265,7 @@ export default {
 
     handleClose () {
       this.isShown = false;
+      this.$emit('close');
       this.$emit('update:show', false);
     },
   },

From 28b19fd28fd1d413cf30e679d839feded160cf9a Mon Sep 17 00:00:00 2001
From: ankitdialpad <ankit.raj@dialpad.com>
Date: Thu, 10 Apr 2025 17:52:07 +0530
Subject: [PATCH 7/8] fix lint issue

---
 .../components/notice/notice_constants.js     |  2 +-
 .../components/notice/notice_icon.vue         | 10 ++++++
 .../toast/layouts/toast_layout_alternate.vue  | 32 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/dialtone-vue2/components/notice/notice_constants.js b/packages/dialtone-vue2/components/notice/notice_constants.js
index af02d3f07e..cce3c53d2e 100644
--- a/packages/dialtone-vue2/components/notice/notice_constants.js
+++ b/packages/dialtone-vue2/components/notice/notice_constants.js
@@ -1,4 +1,4 @@
-export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];
+export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning', 'assist', 'playbook', 'chat', 'system'];
 export const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];
 
 export default {
diff --git a/packages/dialtone-vue2/components/notice/notice_icon.vue b/packages/dialtone-vue2/components/notice/notice_icon.vue
index 0c871105bf..8c0365a78c 100644
--- a/packages/dialtone-vue2/components/notice/notice_icon.vue
+++ b/packages/dialtone-vue2/components/notice/notice_icon.vue
@@ -21,6 +21,9 @@ import {
   DtIconAlertTriangle,
   DtIconAlertCircle,
   DtIconBell,
+  DtIconDialpadSparkle,
+  DtIconMessage,
+  DtIconClipboardList,
 } from '@dialpad/dialtone-icons/vue2';
 import { NOTICE_KINDS } from './notice_constants.js';
 
@@ -30,6 +33,10 @@ const kindToIcon = new Map([
   ['warning', DtIconAlertTriangle],
   ['error', DtIconAlertCircle],
   ['base', DtIconBell],
+  ['assist', DtIconDialpadSparkle],
+  ['chat', DtIconMessage],
+  ['playbook', DtIconClipboardList],
+  ['system', DtIconInfo],
 ]);
 
 export default {
@@ -41,6 +48,9 @@ export default {
     DtIconAlertTriangle,
     DtIconAlertCircle,
     DtIconBell,
+    DtIconDialpadSparkle,
+    DtIconMessage,
+    DtIconClipboardList,
   },
 
   props: {
diff --git a/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue b/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
index c749a13dad..a939d4720e 100644
--- a/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
+++ b/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
@@ -10,7 +10,20 @@
     :aria-hidden="(!isShown).toString()"
   >
     <div class="d-toast__dialog">
-      New Toast Layout Placeholder
+      <dt-notice-icon
+        v-if="!hideIcon"
+        :kind="kind"
+        v-on="$listeners"
+      >
+        <!-- @slot Slot for custom icon -->
+        <slot name="icon" />
+      </dt-notice-icon>
+      <div>
+        <p> {{ kind }}</p>
+      </div>
+      <div>
+        {{ getCurrentTime() }}
+      </div>
     </div>
   </div>
 </template>
@@ -18,11 +31,13 @@
 <script>
 import utils from '@/common/utils';
 import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
+import { DtNoticeIcon } from '@/components/notice';
 import { TOAST_ROLES } from '../toast_constants.js';
 export default {
   name: 'ToastLayoutAlternate',
 
   components: {
+    DtNoticeIcon,
   },
 
   mixins: [SrOnlyCloseButtonMixin],
@@ -134,7 +149,22 @@ export default {
     },
   },
 
+  computed: {
+  },
+
   methods: {
+    getCurrentTime () {
+      const time = new Date();
+      let hours = time.getHours();
+      const minutes = time.getMinutes().toString().padStart(2, '0');
+      const amPm = hours >= 12 ? 'pm' : 'am';
+
+      // Convert to 12-hour format
+      hours = (hours % 12) || 12; // Convert 0 to 12 for midnight
+      hours = hours.toString().padStart(2, '0'); // Ensure two digits for hours
+
+      return `${hours}:${minutes}${amPm}`;
+    },
   },
 };
 </script>

From 09a7c9957d2ec66e088b1e517fc23b49e788262d Mon Sep 17 00:00:00 2001
From: ankitdialpad <ankit.raj@dialpad.com>
Date: Fri, 11 Apr 2025 12:54:07 +0530
Subject: [PATCH 8/8] border

---
 .../lib/build/less/components/notice.less     | 39 +++++++++++++++++++
 .../components/notice/notice_icon.vue         |  6 +--
 .../toast/layouts/toast_layout_alternate.vue  | 14 +++++++
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/dialtone-css/lib/build/less/components/notice.less b/packages/dialtone-css/lib/build/less/components/notice.less
index 6ed13e7913..c9fc12d898 100644
--- a/packages/dialtone-css/lib/build/less/components/notice.less
+++ b/packages/dialtone-css/lib/build/less/components/notice.less
@@ -41,6 +41,14 @@
     box-shadow: var(--notice-box-shadow);
 }
 
+.d-toast-alternate {
+  --notice-alternate-border: var(--dt-size-100) solid;
+  --notice-alternate-border-color: var(--dt-color-border-subtle);
+
+  border: var(--notice-alternate-border);
+  border-color: var(--notice-alternate-border-color);
+}
+
 //  ============================================================================
 //  $   NOTICE AREAS
 //  ============================================================================
@@ -122,6 +130,10 @@
     }
 }
 
+.d-toast--failure {
+  --notice-alternate-border-color: var(--dt-color-border-critical-subtle);
+}
+
 //  $$  INFO
 //  ----------------------------------------------------------------------------
 .d-notice--info,
@@ -154,6 +166,10 @@
     }
 }
 
+.d-toast--positive {
+  --notice-alternate-border-color: var(--dt-color-border-success-subtle);
+}
+
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-notice--warning,
@@ -170,6 +186,29 @@
     }
 }
 
+.d-toast--neutral {
+  --notice-alternate-border-color: var(--dt-color-border-subtle);
+}
+
+//  $$  ASSIST
+// ----------------------------------------------------------------------------
+.d-toast--assist {
+  --notice-alternate-border-color: var(--dt-color-border-accent);
+}
+
+//  $$  PLAYBOOK
+// ----------------------------------------------------------------------------
+.d-toast--playbook {
+  --notice-alternate-border-color: var(--dt-color-border-accent);
+}
+
+//  $$  CHAT
+// ----------------------------------------------------------------------------
+.d-toast--chat {
+  --notice-alternate-border-color: var(--dt-color-border-subtle);
+}
+
+
 //  $$  TRUNCATE TEXT
 //  ----------------------------------------------------------------------------
 .d-notice.d-notice--truncate {
diff --git a/packages/dialtone-vue2/components/notice/notice_icon.vue b/packages/dialtone-vue2/components/notice/notice_icon.vue
index 8c0365a78c..b76706c32c 100644
--- a/packages/dialtone-vue2/components/notice/notice_icon.vue
+++ b/packages/dialtone-vue2/components/notice/notice_icon.vue
@@ -23,7 +23,7 @@ import {
   DtIconBell,
   DtIconDialpadSparkle,
   DtIconMessage,
-  DtIconClipboardList,
+  DtIconNotes,
 } from '@dialpad/dialtone-icons/vue2';
 import { NOTICE_KINDS } from './notice_constants.js';
 
@@ -35,7 +35,7 @@ const kindToIcon = new Map([
   ['base', DtIconBell],
   ['assist', DtIconDialpadSparkle],
   ['chat', DtIconMessage],
-  ['playbook', DtIconClipboardList],
+  ['playbook', DtIconNotes],
   ['system', DtIconInfo],
 ]);
 
@@ -50,7 +50,7 @@ export default {
     DtIconBell,
     DtIconDialpadSparkle,
     DtIconMessage,
-    DtIconClipboardList,
+    DtIconNotes,
   },
 
   props: {
diff --git a/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue b/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
index a939d4720e..c80ea96676 100644
--- a/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
+++ b/packages/dialtone-vue2/components/toast/layouts/toast_layout_alternate.vue
@@ -5,6 +5,8 @@
     v-if="isShown"
     :class="[
       'd-toast',
+      'd-toast-alternate',
+      kindClass,
     ]"
     data-qa="dt-toast"
     :aria-hidden="(!isShown).toString()"
@@ -150,6 +152,18 @@ export default {
   },
 
   computed: {
+    kindClass () {
+      const kindClasses = {
+        assist: 'd-toast--assist',
+        chat: 'd-toast--chat',
+        playbook: 'd-toast--playbook',
+        success: 'd-toast--positive',
+        error: 'd-toast--failure',
+        warning: 'd-toast--neutral',
+      };
+
+      return kindClasses[this.kind];
+    },
   },
 
   methods: {