fixes

user-interviews · May 6, 2024 · 2bd50c6 · 2bd50c6
1 parent 9284d2d
commit 2bd50c6
Show file tree

Hide file tree

Showing 26 changed files with 162 additions and 942 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^18.3",
+    "react-hook-form": "^7.51.4",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
     "react-tracking": "^9.3"
@@ -113,6 +114,7 @@
     "@types/jest": "^29.5.12",
     "@types/react-dom": "^18.3.0",
     "@types/react-toggle": "^4",
+    "@types/react-transition-group": "^4",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -145,6 +147,7 @@
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-test-renderer": "^18.3.1",

diff --git a/src/Accordion/Accordion.stories.tsx b/src/Accordion/Accordion.stories.tsx
@@ -24,7 +24,7 @@ export default {
 
 export const Default = (args) => (
   <Accordion>
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         leadingIcon={faCreditCard}
@@ -38,7 +38,7 @@ export const Default = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem>
+    <AccordionItem eventKey="1">
       <AccordionToggle
         eventKey="1"
         leadingIcon={faCreditCard}
@@ -64,7 +64,7 @@ Default.args = {
 
 export const DefaultOpen = (args) => (
   <Accordion defaultActiveKey="1">
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         leadingIcon={faCreditCard}
@@ -78,7 +78,7 @@ export const DefaultOpen = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem>
+    <AccordionItem eventKey="1">
       <AccordionToggle
         eventKey="1"
         leadingIcon={faCreditCard}
@@ -102,7 +102,7 @@ DefaultOpen.args = {
 
 export const ChevronLeft = (args) => (
   <Accordion>
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         {...args}
@@ -115,7 +115,7 @@ export const ChevronLeft = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem>
+    <AccordionItem eventKey="1">
       <AccordionToggle
         eventKey="1"
         {...args}
@@ -140,7 +140,7 @@ ChevronLeft.args = {
 
 export const ChevronLeftLateral = (args) => (
   <Accordion>
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         {...args}
@@ -153,7 +153,7 @@ export const ChevronLeftLateral = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem>
+    <AccordionItem eventKey="1">
       <AccordionToggle
         eventKey="1"
         {...args}
@@ -179,7 +179,7 @@ ChevronLeftLateral.args = {
 
 export const ChevronLateral = (args) => (
   <Accordion>
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         {...args}
@@ -192,7 +192,7 @@ export const ChevronLateral = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem>
+    <AccordionItem eventKey="1">
       <AccordionToggle
         eventKey="1"
         {...args}
@@ -217,7 +217,7 @@ ChevronLateral.args = {
 
 export const CollapsedText = (args) => (
   <Accordion defaultActiveKey="1">
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         {...args}
@@ -230,7 +230,7 @@ export const CollapsedText = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem>
+    <AccordionItem eventKey="1">
       <AccordionToggle
         eventKey="1"
         {...args}
@@ -255,7 +255,7 @@ CollapsedText.args = {
 
 export const Borderless = (args) => (
   <Accordion flush>
-    <AccordionItem borderless>
+    <AccordionItem borderless eventKey="0">
       <AccordionToggle
         eventKey="0"
         leadingIcon={faCreditCard}
@@ -269,7 +269,7 @@ export const Borderless = (args) => (
         </ul>
       </AccordionCollapse>
     </AccordionItem>
-    <AccordionItem borderless>
+    <AccordionItem borderless eventKey="1">
       <AccordionToggle
         eventKey="1"
         leadingIcon={faCreditCard}
@@ -297,7 +297,7 @@ export const InCard = (args) => (
   <>
     <Card noPadding size="sm">
       <Accordion defaultActiveKey="0" flush>
-        <AccordionItem borderless>
+        <AccordionItem borderless eventKey="0">
           <AccordionToggle
             eventKey="0"
             {...args}
@@ -330,7 +330,7 @@ InCard.args = {
 export const Separate = (args) => (
   <>
     <Accordion>
-      <AccordionItem>
+      <AccordionItem eventKey="0">
         <AccordionToggle
           eventKey="0"
           {...args}
@@ -344,7 +344,7 @@ export const Separate = (args) => (
     </Accordion>
     <br />
     <Accordion>
-      <AccordionItem>
+      <AccordionItem eventKey="1">
         <AccordionToggle
           eventKey="1"
           {...args}
@@ -368,7 +368,7 @@ Separate.args = {
 
 export const Disabled = (args) => (
   <Accordion>
-    <AccordionItem>
+    <AccordionItem eventKey="0">
       <AccordionToggle
         eventKey="0"
         {...args}

diff --git a/src/Accordion/AccordionToggle.tsx b/src/Accordion/AccordionToggle.tsx
@@ -23,6 +23,7 @@ type AccordionToggleProps = {
    Aligns the Chevron icon to the right (default)
   */
   chevronRight?: boolean;
+  children?: React.ReactNode;
   collapsedText?: string;
   /**
    A unique key used to control this item's collapse/expand.
@@ -34,7 +35,6 @@ type AccordionToggleProps = {
   title?: string;
   // eslint-disable-next-line camelcase
   UNSAFE_className?: string;
-  children: React.ReactNode;
 };
 
 const AccordionToggle = ({

diff --git a/src/Accordion/index.js b/src/Accordion/index.js
diff --git a/src/Alert/Alert.stories.tsx b/src/Alert/Alert.stories.tsx
@@ -1,9 +1,8 @@
 import React, { Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGoogle } from '@fortawesome/free-brands-svg-icons';
-import { Alert, MessageTypes } from '.';
+import { Alert, MessageTypes } from 'src/Alert';
+
 import mdx from './Alert.mdx';
 
 export default {
@@ -81,27 +80,6 @@ export const WithDismiss = () => (
   />
 );
 
-const GoogleCalendarButton = () => (
-  <button
-    style={{
-      backgroundColor: '#4285F4',
-      border: '1px solid #4285F4',
-      borderRadius: '4px',
-      fontSize: '0.875rem',
-      fontWeight: 'bold',
-      lineHeight: '1.25rem',
-      margin: '16px 0',
-      padding: '8px 16px',
-      color: '#FFFFFF',
-      whiteSpace: 'nowrap',
-    }}
-    type="button"
-  >
-    <FontAwesomeIcon icon={faGoogle} style={{ height: '16px', marginRight: '8px' }} />
-    Connect Google Calendar
-  </button>
-);
-
 export const WithCallToAction = () => (
   <>
     <p>Default CTA rendered by component</p>
@@ -150,34 +128,5 @@ export const WithCallToAction = () => (
       type={MessageTypes.FEATURE}
       onDismiss={onDismiss}
     />
-
-    <p>Custom CTA via <code>message</code> prop</p>
-    <Alert
-      id="7"
-      message={(
-        <Fragment>
-          <div>When you confirm a session we’ll automatically
-            add an event and reminders to your Google Calendar.
-          </div>
-          <GoogleCalendarButton />
-        </Fragment>
-      )}
-      removeBorderLeft={false}
-      title="Connect to Google Calendar to create reminders automatically"
-      type={MessageTypes.ANNOUNCEMENT}
-      onDismiss={onDismiss}
-    />
-
-    <p>Custom CTA via <code>action</code> prop</p>
-    <Alert
-      action={<GoogleCalendarButton />}
-      id="8"
-      message={`When you confirm a session we’ll automatically
-      add an event and reminders to your Google Calendar.`}
-      removeBorderLeft={false}
-      title="Connect to Google Calendar to create reminders automatically"
-      type={MessageTypes.ANNOUNCEMENT}
-      onDismiss={onDismiss}
-    />
   </>
 );
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
@@ -78,15 +78,15 @@ type AlertProps = {
    Determines whether the Alert will disappear automatically
   */
   autoDismiss?: boolean;
-  id: string;
+  id?: string;
   message: string | React.ReactNode;
   removeBorderLeft?: boolean;
   title?: string;
   /**
    One of the MessageTypes
   */
   type: MessageType;
-  onDismiss?: (arg0: string) => void;
+  onDismiss?: (arg0?: string) => void;
 };
 
 function Alert(props: AlertProps) {
@@ -162,13 +162,4 @@ function Alert(props: AlertProps) {
   );
 }
 
-Alert.defaultProps = {
-  action: undefined,
-  actionTarget: undefined,
-  autoDismiss: false,
-  removeBorderLeft: false,
-  title: undefined,
-  onDismiss: undefined,
-};
-
 export default React.memo(Alert);
diff --git a/src/Alert/index.js b/src/Alert/index.js
diff --git a/src/Avatar/index.js b/src/Avatar/index.js
diff --git a/src/CardStack/index.js b/src/CardStack/index.js