From ed94633eea0809962552b2a7e3d1c5ab599aa212 Mon Sep 17 00:00:00 2001
From: sam <sam@cps-MacBook-Pro.local>
Date: Wed, 29 Nov 2023 22:29:35 -0800
Subject: [PATCH 1/5] update to package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6437ffa8f..c072ea843 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "toast-component",
   "version": "0.1.0",
   "private": true,
-  "author": "Josh Comeau <me@joshwcomeau.com>",
+  "author": "Josh Comeau <me@joshwcomeau.com>, Samuel Alvarez",
   "dependencies": {
     "eslint": "^8.49.0",
     "eslint-config-react-app": "^7.0.1",

From 533faba23b773a3f2c67fdd3edb32100f10e5ca9 Mon Sep 17 00:00:00 2001
From: sam <sam@cps-MacBook-Pro.local>
Date: Thu, 30 Nov 2023 22:44:59 -0800
Subject: [PATCH 2/5] VariantInput componented added

---
 .../ToastPlayground/ToastPlayground.js        | 44 +++++++++----------
 src/components/VariantInputs/VariantInputs.js | 22 ++++++++++
 src/components/VariantInputs/index.js         |  2 +
 3 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 src/components/VariantInputs/VariantInputs.js
 create mode 100644 src/components/VariantInputs/index.js

diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index e1c6c6eb2..650be601d 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -4,9 +4,12 @@ import Button from '../Button';
 
 import styles from './ToastPlayground.module.css';
 
+import VariantInputs from '../VariantInputs/VariantInputs';
+
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
+  const [value, setValue] = React.useState('');
   return (
     <div className={styles.wrapper}>
       <header>
@@ -14,7 +17,13 @@ function ToastPlayground() {
         <h1>Toast Playground</h1>
       </header>
 
-      <div className={styles.controlsWrapper}>
+      <form
+        className={styles.controlsWrapper}
+        onSubmit={(e) => {
+          e.preventDefault();
+          setValue('');
+        }}
+      >
         <div className={styles.row}>
           <label
             htmlFor="message"
@@ -24,38 +33,29 @@ function ToastPlayground() {
             Message
           </label>
           <div className={styles.inputWrapper}>
-            <textarea id="message" className={styles.messageInput} />
+            <textarea
+              id="message"
+              className={styles.messageInput}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
           </div>
         </div>
-
         <div className={styles.row}>
           <div className={styles.label}>Variant</div>
-          <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 */}
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
+            {VARIANT_OPTIONS.map((variant) => {
+              return <VariantInputs key={variant} variant={variant} />;
+            })}
           </div>
         </div>
-
         <div className={styles.row}>
           <div className={styles.label} />
-          <div
-            className={`${styles.inputWrapper} ${styles.radioWrapper}`}
-          >
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
             <Button>Pop Toast!</Button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }
diff --git a/src/components/VariantInputs/VariantInputs.js b/src/components/VariantInputs/VariantInputs.js
new file mode 100644
index 000000000..30f1b5f3b
--- /dev/null
+++ b/src/components/VariantInputs/VariantInputs.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+// const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
+
+function VariantInputs({ variant }) {
+  // if (!VARIANT_OPTIONS.includes(variant))
+  //   throw new Error(`${variant} not recognized. Expected ${VARIANT_OPTIONS}`);
+
+  return (
+    <label htmlFor={`variant-${variant}`}>
+      <input
+        id={`variant-${variant}`}
+        type="radio"
+        name="variant"
+        value={variant}
+      />
+      {`${variant}`}
+    </label>
+  );
+}
+
+export default VariantInputs;
diff --git a/src/components/VariantInputs/index.js b/src/components/VariantInputs/index.js
new file mode 100644
index 000000000..f2660baf2
--- /dev/null
+++ b/src/components/VariantInputs/index.js
@@ -0,0 +1,2 @@
+export * from './VariantInputs';
+export { default } from './VariantInputs';

From d1043d6653ae184119c67dd46b37e85f817741ba Mon Sep 17 00:00:00 2001
From: sam <sam@cps-MacBook-Pro.local>
Date: Fri, 1 Dec 2023 15:03:03 -0800
Subject: [PATCH 3/5] controlled inputs for message and radio button

---
 .../ToastPlayground/ToastPlayground.js        | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index 650be601d..a6af9d1fb 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -4,12 +4,12 @@ import Button from '../Button';
 
 import styles from './ToastPlayground.module.css';
 
-import VariantInputs from '../VariantInputs/VariantInputs';
-
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
   const [value, setValue] = React.useState('');
+  const [variant, setVariant] = React.useState();
+
   return (
     <div className={styles.wrapper}>
       <header>
@@ -36,6 +36,7 @@ function ToastPlayground() {
             <textarea
               id="message"
               className={styles.messageInput}
+              style={{ resize: 'none' }}
               value={value}
               onChange={(e) => setValue(e.target.value)}
             />
@@ -44,15 +45,31 @@ function ToastPlayground() {
         <div className={styles.row}>
           <div className={styles.label}>Variant</div>
           <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
-            {VARIANT_OPTIONS.map((variant) => {
-              return <VariantInputs key={variant} variant={variant} />;
+            {VARIANT_OPTIONS.map((option) => {
+              const id = `variant-${option}`;
+              return (
+                <label key={id} htmlFor={id}>
+                  <input
+                    type="radio"
+                    id={id}
+                    key={id}
+                    name="variant"
+                    value={option}
+                    checked={variant === option}
+                    onChange={(e) => setVariant(e.target.value)}
+                  />
+                  {option}
+                </label>
+              );
             })}
           </div>
         </div>
         <div className={styles.row}>
           <div className={styles.label} />
           <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
-            <Button>Pop Toast!</Button>
+            <Button onClick={() => window.alert(`${variant} - ${value}`)}>
+              Pop Toast!
+            </Button>
           </div>
         </div>
       </form>

From 0b4acab98f066e40607535240586c9e2ced13182 Mon Sep 17 00:00:00 2001
From: sam <sam@cps-MacBook-Pro.local>
Date: Sat, 2 Dec 2023 11:21:42 -0800
Subject: [PATCH 4/5] updates to Toast component for composibility

---
 src/components/Toast/Toast.js                 | 15 ++++++++-----
 .../ToastPlayground/ToastPlayground.js        | 11 ++++++----
 src/components/VariantInputs/VariantInputs.js | 22 -------------------
 src/components/VariantInputs/index.js         |  2 --
 4 files changed, 17 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/VariantInputs/VariantInputs.js
 delete mode 100644 src/components/VariantInputs/index.js

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 96af6012c..5e5c37c78 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -18,15 +18,20 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast() {
+function Toast({ variant, value }) {
+  if (!ICONS_BY_VARIANT[variant] === undefined) {
+    throw new Error(
+      `${variant} unrecognized...expected ${Object.keys(ICONS_BY_VARIANT)}`
+    );
+  }
+
+  const Icon = ICONS_BY_VARIANT[variant];
   return (
     <div className={`${styles.toast} ${styles.notice}`}>
       <div className={styles.iconContainer}>
-        <Info size={24} />
+        <Icon size={24} />
       </div>
-      <p className={styles.content}>
-        16 photos have been uploaded
-      </p>
+      <p className={styles.content}>{value}</p>
       <button className={styles.closeButton}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index a6af9d1fb..962d96dcd 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -3,12 +3,14 @@ import React from 'react';
 import Button from '../Button';
 
 import styles from './ToastPlayground.module.css';
+import Toast from '../Toast/Toast';
 
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
   const [value, setValue] = React.useState('');
-  const [variant, setVariant] = React.useState();
+  const [variant, setVariant] = React.useState('');
+  const [showingToast, setShowToast] = React.useState(false);
 
   return (
     <div className={styles.wrapper}>
@@ -17,11 +19,14 @@ function ToastPlayground() {
         <h1>Toast Playground</h1>
       </header>
 
+      {showingToast && <Toast variant={variant} value={value} />}
+
       <form
         className={styles.controlsWrapper}
         onSubmit={(e) => {
           e.preventDefault();
           setValue('');
+          setShowToast(true);
         }}
       >
         <div className={styles.row}>
@@ -67,9 +72,7 @@ function ToastPlayground() {
         <div className={styles.row}>
           <div className={styles.label} />
           <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
-            <Button onClick={() => window.alert(`${variant} - ${value}`)}>
-              Pop Toast!
-            </Button>
+            <Button>Pop Toast!</Button>
           </div>
         </div>
       </form>
diff --git a/src/components/VariantInputs/VariantInputs.js b/src/components/VariantInputs/VariantInputs.js
deleted file mode 100644
index 30f1b5f3b..000000000
--- a/src/components/VariantInputs/VariantInputs.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-// const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
-
-function VariantInputs({ variant }) {
-  // if (!VARIANT_OPTIONS.includes(variant))
-  //   throw new Error(`${variant} not recognized. Expected ${VARIANT_OPTIONS}`);
-
-  return (
-    <label htmlFor={`variant-${variant}`}>
-      <input
-        id={`variant-${variant}`}
-        type="radio"
-        name="variant"
-        value={variant}
-      />
-      {`${variant}`}
-    </label>
-  );
-}
-
-export default VariantInputs;
diff --git a/src/components/VariantInputs/index.js b/src/components/VariantInputs/index.js
deleted file mode 100644
index f2660baf2..000000000
--- a/src/components/VariantInputs/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './VariantInputs';
-export { default } from './VariantInputs';

From d4ad5c9fe68ff7dc02dc0034f4d28a7e92929d0d Mon Sep 17 00:00:00 2001
From: sam <sam@cps-MacBook-Pro.local>
Date: Sat, 2 Dec 2023 13:29:46 -0800
Subject: [PATCH 5/5] addition of two way binding on dismissal of Toast
 component

---
 src/components/Toast/Toast.js                  | 17 ++++++-----------
 .../ToastPlayground/ToastPlayground.js         | 18 +++++++++++++-----
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
index 5e5c37c78..2cadb32c0 100644
--- a/src/components/Toast/Toast.js
+++ b/src/components/Toast/Toast.js
@@ -18,21 +18,16 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast({ variant, value }) {
-  if (!ICONS_BY_VARIANT[variant] === undefined) {
-    throw new Error(
-      `${variant} unrecognized...expected ${Object.keys(ICONS_BY_VARIANT)}`
-    );
-  }
+function Toast({ variant, handleDismiss, children }) {
+  const Tag = ICONS_BY_VARIANT[variant];
 
-  const Icon = ICONS_BY_VARIANT[variant];
   return (
-    <div className={`${styles.toast} ${styles.notice}`}>
+    <div className={`${styles.toast} ${styles[variant]}`}>
       <div className={styles.iconContainer}>
-        <Icon size={24} />
+        <Tag size={24} />
       </div>
-      <p className={styles.content}>{value}</p>
-      <button className={styles.closeButton}>
+      <p className={styles.content}>{children}</p>
+      <button className={styles.closeButton} onClick={handleDismiss}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>
diff --git a/src/components/ToastPlayground/ToastPlayground.js b/src/components/ToastPlayground/ToastPlayground.js
index 962d96dcd..293c68827 100644
--- a/src/components/ToastPlayground/ToastPlayground.js
+++ b/src/components/ToastPlayground/ToastPlayground.js
@@ -9,8 +9,12 @@ const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
   const [value, setValue] = React.useState('');
-  const [variant, setVariant] = React.useState('');
-  const [showingToast, setShowToast] = React.useState(false);
+  const [variant, setVariant] = React.useState(VARIANT_OPTIONS[0]);
+  const [isShowing, setIsShowing] = React.useState(false);
+
+  const handleDismiss = () => {
+    setIsShowing(false);
+  };
 
   return (
     <div className={styles.wrapper}>
@@ -19,14 +23,18 @@ function ToastPlayground() {
         <h1>Toast Playground</h1>
       </header>
 
-      {showingToast && <Toast variant={variant} value={value} />}
+      {isShowing && (
+        <Toast variant={variant} handleDismiss={handleDismiss}>
+          {value}
+        </Toast>
+      )}
 
       <form
         className={styles.controlsWrapper}
         onSubmit={(e) => {
           e.preventDefault();
           setValue('');
-          setShowToast(true);
+          setIsShowing(true);
         }}
       >
         <div className={styles.row}>
@@ -72,7 +80,7 @@ function ToastPlayground() {
         <div className={styles.row}>
           <div className={styles.label} />
           <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
-            <Button>Pop Toast!</Button>
+            <Button onClick={() => setIsShowing(true)}>Pop Toast!</Button>
           </div>
         </div>
       </form>