feat(config): add transition durations for tailwind

- add in durations via (transitionDuration)
- add in new toast notification implementation example
- use new medium durations in example

- demo autodismiss behavior with stack of notifications
- use state to track

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Thu Aug 15 10:40:43 2024 -0400
#
# On branch aholloway/EDS-1385
# Changes to be committed:
#	deleted:    src/components/ToastNotification/ToastNotification.stories.ts
#	new file:   src/components/ToastNotification/ToastNotification.stories.tsx
#	modified:   tailwind.config.ts
#

src/components/ToastNotification/ToastNotification.stories.tsx

@@ -74,7 +74,8 @@ const ToastNotificationManager = (args: Args) => {
     { id: number | string; text: string; show?: boolean }[]
   >([]);
 
-  // TODO: clean up `toasts` after .show is set to false (using useEffect?)
+  // TODO: clean up `toasts` after .show is set to false (using useEffect? and .debounce)
+  // - In a production implementation, you can filter out any toasts where show=false
 
   return (
     <div className="flex h-[90vh] w-[90vw] items-center justify-center">
@@ -90,20 +91,20 @@ const ToastNotificationManager = (args: Args) => {
           ]);
         }}
       >
-        Add Toast
+        Trigger A Toast Notification
       </Button>
       <div
-        className="absolute bottom-0 left-0 flex flex-col gap-size-2"
+        className="dur absolute bottom-0 left-0 flex flex-col gap-size-2"
         id="toast-container"
       >
         {toasts.map((toast) => (
           <Transition
             appear
-            enter="transition-all duration-300"
+            enter="transition-all duration-medium"
             enterFrom="opacity-0 transform-gpu scale-0"
             enterTo="opacity-100 transform-gpu scale-100"
             key={toast.id}
-            leave="ease-in-out transition-all duration-300"
+            leave="ease-in-out transition-all duration-medium"
             leaveFrom="opacity-100 transform-gpu translate-x-[0px]"
             leaveTo="opacity-0 transform-gpu translate-x-[-100%]"
             show={toast.show}
@@ -130,9 +131,15 @@ const ToastNotificationManager = (args: Args) => {
 };
 
 /**
- * This implementation example shows how you can use toasts with state to ghandle multiple, stacking notifications
+ * This implementation example shows how you can use toasts with state to handle multiple, stacking notifications.
+ *
+ * For a full, production-ready implementation, clean up any toasts with show=false after the animation has completed.
+ * - Consider using lodash.debounce to time the re-render, and useEffect that watches the list of toasts
+ * - Any debouncing should map to whatever duration is used in `Transition`
+ *
+ * Here, we use `<Transition>` provided by [HeadlessUI](https://github.com/chanzuckerberg/edu-design-system/blob/main/package.json#L91-L93).
  */
-export const IEDismissingToasts: Story = {
+export const ExampleDismissingToasts: Story = {
   render: (args) => <ToastNotificationManager {...args} />,
   parameters: {
     // For interactive use, low value in snap testing again since already covered in other stories.

tailwind.config.ts

@@ -11,6 +11,19 @@ const {
 // Add a type to the token sizes to avoid literals for keys
 const sizes: { [x: string]: string } = edsTokens.size;
 
+// add a type to the token sizes for movement durations
+const movement: { [x: string]: string } = {
+  ...Object.keys(edsTokens.anim.move)
+    .map((movement) => {
+      return { [movement]: `${edsTokens.anim.move[movement]}s` };
+    })
+    .reduce((accumulate, current) => {
+      const entry = Object.entries(current)[0];
+      accumulate[entry[0]] = entry[1];
+      return accumulate;
+    }, {}),
+};
+
 const sizeTokens = {
   // We pull the spacing tokens and format them such that names are like 'size-${name} = ${value}px'
   ...Object.keys(sizes)
@@ -52,6 +65,9 @@ export default {
       spacing: {
         ...sizeTokens,
       },
+      transitionDuration: {
+        ...movement,
+      },
     },
     fontWeight: {
       normal: edsTokens['font-weight'].light,