Develop

package.json

@@ -14,7 +14,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "2.0.10",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.1",
+    "uuid": "^10.0.0"
   },
   "scripts": {
     "predev": "rimraf .parcel-cache dist",

src/components/App/App.js

@@ -2,11 +2,14 @@ import React from 'react';
 
 import ToastPlayground from '../ToastPlayground';
 import Footer from '../Footer';
+import ToastProvider from '../ToastProvider/ToastProvider';
 
 function App() {
   return (
     <>
-      <ToastPlayground />
+      <ToastProvider>
+        <ToastPlayground />
+      </ToastProvider>
       <Footer />
     </>
   );

src/components/Toast/Toast.js

@@ -10,6 +10,7 @@ import {
 import VisuallyHidden from '../VisuallyHidden';
 
 import styles from './Toast.module.css';
+import { ToastContext } from '../ToastProvider/ToastProvider.js';
 
 const ICONS_BY_VARIANT = {
   notice: Info,
@@ -18,18 +19,26 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast() {
+function Toast({ children, variant, id }) {
+  const { dismissToast } = React.useContext(ToastContext)
+  const className = `${styles.toast} ${styles[variant]}`
+  const Icon = ICONS_BY_VARIANT[variant]
+
   return (
-    <div className={`${styles.toast} ${styles.notice}`}>
+    <div className={className} id={id}>
       <div className={styles.iconContainer}>
-        <Info size={24} />
+        <Icon size={24} />
       </div>
       <p className={styles.content}>
-        16 photos have been uploaded
+        <VisuallyHidden>{variant} -</VisuallyHidden>
+        {children}
       </p>
-      <button className={styles.closeButton}>
+      <button className={styles.closeButton}
+        onClick={() => dismissToast(id)}
+        aria-label='Dismiss message'
+        aria-live='off'
+      >
         <X size={24} />
-        <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
     </div>
   );

src/components/ToastPlayground/ToastPlayground.js

@@ -1,20 +1,36 @@
 import React from 'react';
-
 import Button from '../Button';
-
 import styles from './ToastPlayground.module.css';
+import ToastShelf from '../ToastShelf/ToastShelf'
+import { ToastContext } from '../ToastProvider/ToastProvider';
 
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
+  const [message, setMessage] = React.useState("")
+  const [variant, setVariant] = React.useState(VARIANT_OPTIONS[0])
+  const { createToast } = React.useContext(ToastContext)
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    if (message !== '' && variant !== '') {
+      createToast(message, variant)
+    }
+    setMessage('')
+    setVariant(VARIANT_OPTIONS[0])
+  }
+
   return (
     <div className={styles.wrapper}>
       <header>
         <img alt="Cute toast mascot" src="/toast.png" />
         <h1>Toast Playground</h1>
       </header>
-
-      <div className={styles.controlsWrapper}>
+      <ToastShelf />
+      <form className={styles.controlsWrapper}
+        onSubmit={handleSubmit}
+      >
         <div className={styles.row}>
           <label
             htmlFor="message"
@@ -24,7 +40,9 @@ function ToastPlayground() {
             Message
           </label>
           <div className={styles.inputWrapper}>
-            <textarea id="message" className={styles.messageInput} />
+            <textarea id="message" className={styles.messageInput} value={message}
+              onChange={(e) => setMessage(e.target.value)}
+            />
           </div>
         </div>
 
@@ -33,17 +51,20 @@ function ToastPlayground() {
           <div
             className={`${styles.inputWrapper} ${styles.radioWrapper}`}
           >
-            <label htmlFor="variant-notice">
-              <input
-                id="variant-notice"
-                type="radio"
-                name="variant"
-                value="notice"
-              />
-              notice
-            </label>
-
-            {/* TODO Other Variant radio buttons here */}
+            {VARIANT_OPTIONS.map((option) => {
+              const id = `variant-${option}`
+              return (<label htmlFor={id} key={id}>
+                <input
+                  id={id}
+                  type='radio'
+                  name='variant'
+                  value={option}
+                  onChange={(e) => setVariant(e.target.value)}
+                  checked={variant === option}
+                />
+                {option}
+              </label>)
+            })}
           </div>
         </div>
 
@@ -52,10 +73,10 @@ function ToastPlayground() {
           <div
             className={`${styles.inputWrapper} ${styles.radioWrapper}`}
           >
-            <Button>Pop Toast!</Button>
+            <Button type='submit' >Pop Toast!</Button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }

src/components/ToastPlayground/ToastPlayground.module.css

@@ -106,3 +106,7 @@
   width: 100%;
   height: 4rem;
 }
+
+.hidden {
+  display: none;
+}

src/components/ToastProvider/ToastProvider.js

@@ -0,0 +1,49 @@
+import React, { Children, useCallback } from 'react';
+import useEscapeKey from '../../hooks/useEscapeKey.js'
+export const ToastContext = React.createContext()
+
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React.useState([
+    {
+      id: crypto.randomUUID(),
+      message: 'Please enter the information',
+      variant: 'error'
+    },
+    {
+      id: crypto.randomUUID(),
+      message: 'Please enter the information',
+      variant: 'notice'
+    }
+  ])
+
+  const handleEscape = useCallback(() => {
+    setToasts([])
+  }, [])
+
+  useEscapeKey(handleEscape)
+
+  const createToast = (message, variant) => {
+    const nextToasts = [
+      ...toasts,
+      {
+        id: crypto.randomUUID(),
+        message,
+        variant,
+      }
+    ]
+    setToasts(nextToasts)
+  }
+
+  const dismissToast = (id) => {
+    const nextToasts = toasts.filter((toast) => { return toast.id !== id })
+    setToasts(nextToasts)
+  }
+
+  return (
+    <ToastContext.Provider value={{ toasts, createToast, dismissToast }} >
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export default ToastProvider;

src/components/ToastProvider/index.js

@@ -0,0 +1,2 @@
+export * from './ToastProvider';
+export { default } from './ToastProvider';

src/components/ToastShelf/ToastShelf.js

@@ -2,16 +2,24 @@ import React from 'react';
 
 import Toast from '../Toast';
 import styles from './ToastShelf.module.css';
+import { ToastContext } from '../ToastProvider/ToastProvider';
 
 function ToastShelf() {
+  const { toasts } = React.useContext(ToastContext)
   return (
-    <ol className={styles.wrapper}>
-      <li className={styles.toastWrapper}>
-        <Toast variant="notice">Example notice toast</Toast>
-      </li>
-      <li className={styles.toastWrapper}>
-        <Toast variant="error">Example error toast</Toast>
-      </li>
+    <ol
+      className={styles.wrapper}
+      role='region'
+      aria-live='polite'
+      aria-label='Notification'
+    >
+      {
+        toasts.map(({ id, variant, message }) => (
+          <li className={styles.toastWrapper} key={id}>
+            <Toast variant={variant} id={id}>{message}</Toast>
+          </li>
+        ))
+      }
     </ol>
   );
 }

src/hooks/useEscapeKey.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function useEscapeKey(callback) {
+    React.useEffect(() => {
+        function handleKeyDown(event) {
+            if (event.code === 'Escape') {
+                callback(event)
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [callback])
+}

src/utils/useToggle.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function useToggle(initialValue = false) {
+    if (typeof initialValue !== 'boolean') {
+      console.warn('Invalid type for useToggle');
+    }
+
+    const [value, setValue] = React.useState(
+      initialValue
+    );
+
+    const toggleValue = React.useCallback(() => {
+      setValue((currentValue) => !currentValue);
+    }, []);
+
+    return [value, toggleValue];
+  }