From 8bbbaed94cb2086747814e994f1a7136cda060bf Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 08:59:44 -0700
Subject: [PATCH 01/41] Add expanded component state, collapse functionality,
 collapse icon

---
 .../components/src/components/Alert/Alert.tsx | 58 ++++++++++++++-----
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 7ba2717a..c9f6200e 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,8 +1,8 @@
 import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 // import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
-import { Text, TextStyle, View, ViewStyle } from 'react-native'
+import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
 //      ^ ScrollView,
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 //                ^ , RefObject, useEffect, useState
 
 // import { triggerHaptic } from 'utils/haptics'
@@ -29,6 +29,7 @@ export type AlertProps = {
   /** Optional custom content to nest inside Alert
    * Use AlertContentColor or appropriate component props to set light/dark mode 'base' gray colors */
   children?: React.ReactNode
+  collapsible?: boolean
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */
@@ -52,6 +53,7 @@ export const Alert: FC<AlertProps> = ({
   description,
   descriptionA11yLabel,
   children,
+  collapsible,
   primaryButton,
   secondaryButton,
   // focusOnError = true,
@@ -60,6 +62,7 @@ export const Alert: FC<AlertProps> = ({
 }) => {
   const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
+  const [expanded, setExpanded] = useState(true)
   // const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
   // const [shouldFocus, setShouldFocus] = useState(true)
 
@@ -151,7 +154,7 @@ export const Alert: FC<AlertProps> = ({
     borderLeftWidth: Sizing._8,
     padding: Sizing._20,
     paddingLeft: Sizing._12, // Adds with borderLeftWidth for 20
-    width: '100%' // Ensure Alert fills horizontal space, regardless of flexing content
+    width: '100%', // Ensure Alert fills horizontal space, regardless of flexing content
   }
 
   const iconViewStyle: ViewStyle = {
@@ -194,8 +197,22 @@ export const Alert: FC<AlertProps> = ({
     lineHeight: 30,
   }
 
+  const collapsed = collapsible && !expanded
+
+  const collapseIconDisplay = (
+    <View style={iconViewStyle}>
+      <Icon
+        fill={contentColor}
+        width={16}
+        height={16}
+        name={collapsed ? 'ChevronDown' : 'ChevronUp'}
+      />
+      <Spacer horizontal />
+    </View>
+  )
+
   const _primaryButton = () => {
-    if (!primaryButton) return null
+    if (!primaryButton || collapsed) return null
 
     primaryButton.buttonType = isDarkMode
       ? ButtonVariants.Base
@@ -210,7 +227,7 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const _secondaryButton = () => {
-    if (!secondaryButton) return null
+    if (!secondaryButton || collapsed) return null
 
     secondaryButton.buttonType = isDarkMode
       ? ButtonVariants.BaseSecondary
@@ -238,19 +255,28 @@ export const Alert: FC<AlertProps> = ({
               <Text style={headerFont}>{header}</Text>
             </View>
           ) : null}
-          {header && (description || children) ? <Spacer /> : null}
-          {description ? (
-            <View
-              // ref={!header ? viewRef : undefined}
-              accessible={true}
-              aria-label={descriptionA11yLabel || description}>
-              <Text style={descriptionFont}>{description}</Text>
+          {!collapsed && (
+            <View>
+              {header && (description || children) ? <Spacer /> : null}
+              {description ? (
+                <View
+                  // ref={!header ? viewRef : undefined}
+                  accessible={true}
+                  aria-label={descriptionA11yLabel || description}>
+                  <Text style={descriptionFont}>{description}</Text>
+                </View>
+              ) : null}
+              {description && children ? <Spacer /> : null}
+              {children}
+              {/* {shouldFocus && vibrate()} */}
             </View>
-          ) : null}
-          {description && children ? <Spacer /> : null}
-          {children}
-          {/* {shouldFocus && vibrate()} */}
+          )}
         </View>
+        {collapsible && (
+          <Pressable onPress={() => setExpanded(!expanded)}>
+            {collapseIconDisplay}
+          </Pressable>
+        )}
       </View>
       {_primaryButton()}
       {_secondaryButton()}

From f64e30dc2bad8bd2b0b576c3e23949e4aa9d5db6 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 09:42:31 -0700
Subject: [PATCH 02/41] Add collapsible story

---
 .../src/components/Alert/Alert.stories.tsx    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index ee0a5339..44bb1975 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -59,3 +59,25 @@ export const Info: Story = {
     },
   },
 }
+
+export const Collapsible: Story = {
+  args: {
+    variant: 'info',
+    header: 'Header with enough text to wrap',
+    description: 'Description',
+    children: children,
+    collapsible: true,
+    primaryButton: {
+      label: 'Button Text',
+      onPress: () => {
+        null
+      },
+    },
+    secondaryButton: {
+      label: 'Button Text',
+      onPress: () => {
+        null
+      },
+    },
+  },
+}

From 721c440f13d523447ec7d2d2a8248cc74da85816 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 09:42:57 -0700
Subject: [PATCH 03/41] Remove commented haptics and scrollTo code. Fixed left
 margin for collapse icon

---
 .../components/src/components/Alert/Alert.tsx | 29 +------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index c9f6200e..e8278722 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -56,35 +56,11 @@ export const Alert: FC<AlertProps> = ({
   collapsible,
   primaryButton,
   secondaryButton,
-  // focusOnError = true,
-  // scrollViewRef,
   testId,
 }) => {
   const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
   const [expanded, setExpanded] = useState(true)
-  // const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
-  // const [shouldFocus, setShouldFocus] = useState(true)
-
-  // useEffect(() => {
-  //   if (
-  //     variant === 'error' &&
-  //     scrollViewRef?.current &&
-  //     (header || description)
-  //   ) {
-  //     scrollRef.current = scrollViewRef.current
-  //     scrollToAlert(-boxPadding)
-  //   }
-  //   setShouldFocus(focusOnError)
-  // }, [
-  //   variant,
-  //   header,
-  //   description,
-  //   focusOnError,
-  //   scrollRef,
-  //   scrollToAlert,
-  //   scrollViewRef,
-  // ])
 
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {
@@ -201,13 +177,13 @@ export const Alert: FC<AlertProps> = ({
 
   const collapseIconDisplay = (
     <View style={iconViewStyle}>
+      <Spacer horizontal />
       <Icon
         fill={contentColor}
         width={16}
         height={16}
         name={collapsed ? 'ChevronDown' : 'ChevronUp'}
       />
-      <Spacer horizontal />
     </View>
   )
 
@@ -248,7 +224,6 @@ export const Alert: FC<AlertProps> = ({
         <View style={{ flex: 1 }}>
           {header ? (
             <View
-              // ref={viewRef}
               accessible={true}
               aria-label={headerA11yLabel || header}
               role="heading">
@@ -260,7 +235,6 @@ export const Alert: FC<AlertProps> = ({
               {header && (description || children) ? <Spacer /> : null}
               {description ? (
                 <View
-                  // ref={!header ? viewRef : undefined}
                   accessible={true}
                   aria-label={descriptionA11yLabel || description}>
                   <Text style={descriptionFont}>{description}</Text>
@@ -268,7 +242,6 @@ export const Alert: FC<AlertProps> = ({
               ) : null}
               {description && children ? <Spacer /> : null}
               {children}
-              {/* {shouldFocus && vibrate()} */}
             </View>
           )}
         </View>

From 91ccb43cb4ca720555d80d209fbcf86c6b44c160 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:19:28 -0700
Subject: [PATCH 04/41] Change story header text

---
 packages/components/src/components/Alert/Alert.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index 44bb1975..0a096201 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -63,7 +63,7 @@ export const Info: Story = {
 export const Collapsible: Story = {
   args: {
     variant: 'info',
-    header: 'Header with enough text to wrap',
+    header: 'Header',
     description: 'Description',
     children: children,
     collapsible: true,

From 3e09d1dbeb2d471556d8d3382fb21f329221a471 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:19:56 -0700
Subject: [PATCH 05/41] Refactor to make entire header area pressable

---
 .../components/src/components/Alert/Alert.tsx | 70 +++++++++++++------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index e8278722..c4687be1 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -149,14 +149,6 @@ export const Alert: FC<AlertProps> = ({
     </View>
   )
 
-  // const vibrate = (): void => {
-  //   if (variant === 'error') {
-  //     triggerHaptic(HapticFeedbackTypes.notificationError)
-  //   } else if (variant === 'warning') {
-  //     triggerHaptic(HapticFeedbackTypes.notificationWarning)
-  //   }
-  // }
-
   // TODO: Replace with typography tokens
   const headerFont: TextStyle = {
     color: contentColor,
@@ -217,23 +209,62 @@ export const Alert: FC<AlertProps> = ({
     )
   }
 
+  const _headerText = () => {
+    if (header) {
+      return <Text style={headerFont}>{header}</Text>
+    }
+
+    if (description) {
+      return <Text style={descriptionFont}>{description}</Text>
+    }
+
+    return null
+  }
+
+  const _header = () => {
+    const a11yLabel = header
+      ? headerA11yLabel || header
+      : description
+        ? descriptionA11yLabel || description
+        : ''
+
+    if (collapsible) {
+      return (
+        <Pressable
+          onPress={() => setExpanded(!expanded)}
+          accessibilityRole="tab"
+          accessibilityState={{ expanded }}
+          aria-label={a11yLabel}
+          style={{ flexDirection: 'row' }}>
+          <View style={{ flex: 1 }}>{_headerText()}</View>
+          {collapseIconDisplay}
+        </Pressable>
+      )
+    }
+
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        <View
+          accessible={true}
+          aria-label={a11yLabel}
+          role="heading"
+          style={{ flex: 1 }}>
+          {_headerText()}
+        </View>
+      </View>
+    )
+  }
+
   return (
     <View style={contentBox} testID={testId}>
       <View style={{ flexDirection: 'row' }}>
         {iconDisplay}
         <View style={{ flex: 1 }}>
-          {header ? (
-            <View
-              accessible={true}
-              aria-label={headerA11yLabel || header}
-              role="heading">
-              <Text style={headerFont}>{header}</Text>
-            </View>
-          ) : null}
+          {_header()}
           {!collapsed && (
             <View>
               {header && (description || children) ? <Spacer /> : null}
-              {description ? (
+              {header && description ? (
                 <View
                   accessible={true}
                   aria-label={descriptionA11yLabel || description}>
@@ -245,11 +276,6 @@ export const Alert: FC<AlertProps> = ({
             </View>
           )}
         </View>
-        {collapsible && (
-          <Pressable onPress={() => setExpanded(!expanded)}>
-            {collapseIconDisplay}
-          </Pressable>
-        )}
       </View>
       {_primaryButton()}
       {_secondaryButton()}

From b5f67f3647181d23fce481fa0ac9f603c1fcdfbd Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:21:27 -0700
Subject: [PATCH 06/41] Clean up unneeded imports

---
 packages/components/src/components/Alert/Alert.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index c4687be1..d4bd0e46 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,12 +1,6 @@
 import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
-// import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
 import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
-//      ^ ScrollView,
 import React, { FC, useState } from 'react'
-//                ^ , RefObject, useEffect, useState
-
-// import { triggerHaptic } from 'utils/haptics'
-// import { useAutoScrollToElement } from 'utils/hooks'
 
 import { BaseColor, Spacer, useColorScheme } from '../../utils'
 import { Button, ButtonProps, ButtonVariants } from '../Button/Button'

From bed831d95b1547924d1a1314a70406155f8827bf Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:22:30 -0700
Subject: [PATCH 07/41] Clean up prop comments

---
 packages/components/src/components/Alert/Alert.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index d4bd0e46..46cb532b 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -23,16 +23,13 @@ export type AlertProps = {
   /** Optional custom content to nest inside Alert
    * Use AlertContentColor or appropriate component props to set light/dark mode 'base' gray colors */
   children?: React.ReactNode
+  /** Optional boolean to determine whether the alert should be collapsible */
   collapsible?: boolean
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */
   secondaryButton?: ButtonProps
-  /** Optional boolean for determining when to focus on error alert boxes (e.g. onSaveClicked). */
-  // focusOnError?: boolean
-  /** Optional ref for the parent scroll view. Used for scrolling to error alert boxes. */
-  // scrollViewRef?: RefObject<ScrollView>
-  /** optional testID */
+  /** Optional testID */
   testId?: string
 }
 

From 10bcdb68c52841900050f559d5518a339022db39 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:24:03 -0700
Subject: [PATCH 08/41] Sort internal functions by display order

---
 .../components/src/components/Alert/Alert.tsx | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 46cb532b..c834046c 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -170,36 +170,6 @@ export const Alert: FC<AlertProps> = ({
     </View>
   )
 
-  const _primaryButton = () => {
-    if (!primaryButton || collapsed) return null
-
-    primaryButton.buttonType = isDarkMode
-      ? ButtonVariants.Base
-      : ButtonVariants.Primary
-
-    return (
-      <>
-        <Spacer size={Sizing._20} />
-        <Button {...primaryButton} />
-      </>
-    )
-  }
-
-  const _secondaryButton = () => {
-    if (!secondaryButton || collapsed) return null
-
-    secondaryButton.buttonType = isDarkMode
-      ? ButtonVariants.BaseSecondary
-      : ButtonVariants.Secondary
-
-    return (
-      <>
-        <Spacer size={Sizing._20} />
-        <Button {...secondaryButton} />
-      </>
-    )
-  }
-
   const _headerText = () => {
     if (header) {
       return <Text style={headerFont}>{header}</Text>
@@ -246,6 +216,36 @@ export const Alert: FC<AlertProps> = ({
     )
   }
 
+  const _primaryButton = () => {
+    if (!primaryButton || collapsed) return null
+
+    primaryButton.buttonType = isDarkMode
+      ? ButtonVariants.Base
+      : ButtonVariants.Primary
+
+    return (
+      <>
+        <Spacer size={Sizing._20} />
+        <Button {...primaryButton} />
+      </>
+    )
+  }
+
+  const _secondaryButton = () => {
+    if (!secondaryButton || collapsed) return null
+
+    secondaryButton.buttonType = isDarkMode
+      ? ButtonVariants.BaseSecondary
+      : ButtonVariants.Secondary
+
+    return (
+      <>
+        <Spacer size={Sizing._20} />
+        <Button {...secondaryButton} />
+      </>
+    )
+  }
+
   return (
     <View style={contentBox} testID={testId}>
       <View style={{ flexDirection: 'row' }}>

From f7c17bdd970a4b14762fb5bce7893ad76b4f959e Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:31:02 -0700
Subject: [PATCH 09/41] Remove unneeded collapsed variable

---
 .../components/src/components/Alert/Alert.tsx  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index c834046c..90fef017 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -156,8 +156,6 @@ export const Alert: FC<AlertProps> = ({
     lineHeight: 30,
   }
 
-  const collapsed = collapsible && !expanded
-
   const collapseIconDisplay = (
     <View style={iconViewStyle}>
       <Spacer horizontal />
@@ -165,7 +163,7 @@ export const Alert: FC<AlertProps> = ({
         fill={contentColor}
         width={16}
         height={16}
-        name={collapsed ? 'ChevronDown' : 'ChevronUp'}
+        name={expanded ? 'ChevronUp' : 'ChevronDown'}
       />
     </View>
   )
@@ -217,7 +215,7 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const _primaryButton = () => {
-    if (!primaryButton || collapsed) return null
+    if (!primaryButton) return null
 
     primaryButton.buttonType = isDarkMode
       ? ButtonVariants.Base
@@ -232,7 +230,7 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const _secondaryButton = () => {
-    if (!secondaryButton || collapsed) return null
+    if (!secondaryButton) return null
 
     secondaryButton.buttonType = isDarkMode
       ? ButtonVariants.BaseSecondary
@@ -252,7 +250,7 @@ export const Alert: FC<AlertProps> = ({
         {iconDisplay}
         <View style={{ flex: 1 }}>
           {_header()}
-          {!collapsed && (
+          {expanded && (
             <View>
               {header && (description || children) ? <Spacer /> : null}
               {header && description ? (
@@ -268,8 +266,12 @@ export const Alert: FC<AlertProps> = ({
           )}
         </View>
       </View>
-      {_primaryButton()}
-      {_secondaryButton()}
+      {expanded && (
+        <>
+          {_primaryButton()}
+          {_secondaryButton()}
+        </>
+      )}
     </View>
   )
 }

From 64c104eab82a9549786904733eb03c798d806a3b Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 11:36:12 -0700
Subject: [PATCH 10/41] Clean up

---
 .../components/src/components/Alert/Alert.tsx | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 90fef017..5fa8c33d 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -156,37 +156,37 @@ export const Alert: FC<AlertProps> = ({
     lineHeight: 30,
   }
 
-  const collapseIconDisplay = (
-    <View style={iconViewStyle}>
-      <Spacer horizontal />
-      <Icon
-        fill={contentColor}
-        width={16}
-        height={16}
-        name={expanded ? 'ChevronUp' : 'ChevronDown'}
-      />
-    </View>
-  )
+  const _header = () => {
+    const _headerText = () => {
+      if (header) {
+        return <Text style={headerFont}>{header}</Text>
+      }
 
-  const _headerText = () => {
-    if (header) {
-      return <Text style={headerFont}>{header}</Text>
-    }
+      if (description) {
+        return <Text style={descriptionFont}>{description}</Text>
+      }
 
-    if (description) {
-      return <Text style={descriptionFont}>{description}</Text>
+      return null
     }
 
-    return null
-  }
-
-  const _header = () => {
     const a11yLabel = header
       ? headerA11yLabel || header
       : description
         ? descriptionA11yLabel || description
         : ''
 
+    const collapseIconDisplay = (
+      <View style={iconViewStyle}>
+        <Spacer horizontal />
+        <Icon
+          fill={contentColor}
+          width={16}
+          height={16}
+          name={expanded ? 'ChevronUp' : 'ChevronDown'}
+        />
+      </View>
+    )
+
     if (collapsible) {
       return (
         <Pressable

From b08aada32df62a36fc19bce6b2f783303add336e Mon Sep 17 00:00:00 2001
From: VA Automation Bot <va-mobileapp@adhocteam.us>
Date: Mon, 15 Apr 2024 18:59:41 +0000
Subject: [PATCH 11/41] Version bump: components-v0.12.1-beta.2

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

diff --git a/packages/components/package.json b/packages/components/package.json
index d416c0ca..cdccb31a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.12.0",
+  "version": "0.12.1-beta.2",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

From cf5c3f43813978a1387e9fc533fef5444b3ef906 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 12:11:35 -0700
Subject: [PATCH 12/41] Export Alert

---
 packages/components/src/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index c8dfa04a..f7931a52 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -7,6 +7,7 @@ if (expoApp && App.initiateExpo) {
 }
 
 // Export components here so they are exported through npm
+export { Alert } from './components/Alert/Alert'
 export { Button, ButtonVariants } from './components/Button/Button'
 export { Icon } from './components/Icon/Icon'
 export { Link } from './components/Link/Link'

From eafac84cfe3c9b334ca866923a646f4e5e56f9a2 Mon Sep 17 00:00:00 2001
From: VA Automation Bot <va-mobileapp@adhocteam.us>
Date: Mon, 15 Apr 2024 19:12:52 +0000
Subject: [PATCH 13/41] Version bump: components-v0.12.1-beta.3

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

diff --git a/packages/components/package.json b/packages/components/package.json
index cdccb31a..26b44c7b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.12.1-beta.2",
+  "version": "0.12.1-beta.3",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

From 09c4d9c3cf669c660c24c9888809d24813e079ff Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 12:23:24 -0700
Subject: [PATCH 14/41] Add initialCollapsedState prop

---
 packages/components/src/components/Alert/Alert.stories.tsx | 1 +
 packages/components/src/components/Alert/Alert.tsx         | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index 0a096201..83415eed 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -67,6 +67,7 @@ export const Collapsible: Story = {
     description: 'Description',
     children: children,
     collapsible: true,
+    initialCollapsedState: 'expanded',
     primaryButton: {
       label: 'Button Text',
       onPress: () => {
diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 5fa8c33d..971bc897 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -25,6 +25,8 @@ export type AlertProps = {
   children?: React.ReactNode
   /** Optional boolean to determine whether the alert should be collapsible */
   collapsible?: boolean
+  /** Optional initial state that determines whether an alert renders expanded for collapsed. Defaults to expanded */
+  initialCollapsedState?: 'expanded' | 'collapsed'
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */
@@ -45,13 +47,14 @@ export const Alert: FC<AlertProps> = ({
   descriptionA11yLabel,
   children,
   collapsible,
+  initialCollapsedState = 'expanded',
   primaryButton,
   secondaryButton,
   testId,
 }) => {
   const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
-  const [expanded, setExpanded] = useState(true)
+  const [expanded, setExpanded] = useState(initialCollapsedState === 'expanded')
 
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {

From a6219ffd02df38beb9fa4abece92c5dc5599dbe3 Mon Sep 17 00:00:00 2001
From: VA Automation Bot <va-mobileapp@adhocteam.us>
Date: Mon, 15 Apr 2024 19:24:36 +0000
Subject: [PATCH 15/41] Version bump: components-v0.12.1-beta.4

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

diff --git a/packages/components/package.json b/packages/components/package.json
index 26b44c7b..e45a7829 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.12.1-beta.3",
+  "version": "0.12.1-beta.4",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

From edccedf07f212c4431b79aa7c889359d70b3b7c8 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 12:44:17 -0700
Subject: [PATCH 16/41] Clean up header text logic

---
 .../components/src/components/Alert/Alert.tsx | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 971bc897..3cc7dc82 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -160,17 +160,11 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const _header = () => {
-    const _headerText = () => {
-      if (header) {
-        return <Text style={headerFont}>{header}</Text>
-      }
-
-      if (description) {
-        return <Text style={descriptionFont}>{description}</Text>
-      }
-
-      return null
-    }
+    const headerText = header ? (
+      <Text style={headerFont}>{header}</Text>
+    ) : description ? (
+      <Text style={descriptionFont}>{description}</Text>
+    ) : null
 
     const a11yLabel = header
       ? headerA11yLabel || header
@@ -198,7 +192,7 @@ export const Alert: FC<AlertProps> = ({
           accessibilityState={{ expanded }}
           aria-label={a11yLabel}
           style={{ flexDirection: 'row' }}>
-          <View style={{ flex: 1 }}>{_headerText()}</View>
+          <View style={{ flex: 1 }}>{headerText}</View>
           {collapseIconDisplay}
         </Pressable>
       )
@@ -211,7 +205,7 @@ export const Alert: FC<AlertProps> = ({
           aria-label={a11yLabel}
           role="heading"
           style={{ flex: 1 }}>
-          {_headerText()}
+          {headerText}
         </View>
       </View>
     )

From 5c357f9476619a491815fdf2db24491efd5a2266 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 12:44:21 -0700
Subject: [PATCH 17/41] Remove initial collapsed state from story

---
 packages/components/src/components/Alert/Alert.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index 83415eed..0a096201 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -67,7 +67,6 @@ export const Collapsible: Story = {
     description: 'Description',
     children: children,
     collapsible: true,
-    initialCollapsedState: 'expanded',
     primaryButton: {
       label: 'Button Text',
       onPress: () => {

From 28eb3f165935851dd7bd51bf0aa53aabd3a2ddf0 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 13:24:41 -0700
Subject: [PATCH 18/41] Use expandable terminology instead of collapsible to
 match VADS. Add temp Sizing token

---
 .../src/components/Alert/Alert.stories.tsx    |  2 +-
 .../components/src/components/Alert/Alert.tsx | 23 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index 0a096201..57b09f48 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -66,7 +66,7 @@ export const Collapsible: Story = {
     header: 'Header',
     description: 'Description',
     children: children,
-    collapsible: true,
+    expandable: true,
     primaryButton: {
       label: 'Button Text',
       onPress: () => {
diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 3cc7dc82..b599351e 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -23,10 +23,10 @@ export type AlertProps = {
   /** Optional custom content to nest inside Alert
    * Use AlertContentColor or appropriate component props to set light/dark mode 'base' gray colors */
   children?: React.ReactNode
-  /** Optional boolean to determine whether the alert should be collapsible */
-  collapsible?: boolean
-  /** Optional initial state that determines whether an alert renders expanded for collapsed. Defaults to expanded */
-  initialCollapsedState?: 'expanded' | 'collapsed'
+  /** Optional boolean to determine whether the alert should be expandable */
+  expandable?: boolean
+  /** Optional initial state for expandable alert. Defaults to collapsed */
+  initialExpandedState?: 'expanded' | 'collapsed'
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */
@@ -46,20 +46,23 @@ export const Alert: FC<AlertProps> = ({
   description,
   descriptionA11yLabel,
   children,
-  collapsible,
-  initialCollapsedState = 'expanded',
+  expandable,
+  initialExpandedState = 'collapsed',
   primaryButton,
   secondaryButton,
   testId,
 }) => {
   const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
-  const [expanded, setExpanded] = useState(initialCollapsedState === 'expanded')
+  const [expanded, setExpanded] = useState(
+    expandable ? initialExpandedState === 'expanded' : true,
+  )
 
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {
     _8: 8,
     _12: 12,
+    _16: 16,
     _20: 20,
     _30: 30,
   }
@@ -177,14 +180,14 @@ export const Alert: FC<AlertProps> = ({
         <Spacer horizontal />
         <Icon
           fill={contentColor}
-          width={16}
-          height={16}
+          width={Sizing._16}
+          height={Sizing._16}
           name={expanded ? 'ChevronUp' : 'ChevronDown'}
         />
       </View>
     )
 
-    if (collapsible) {
+    if (expandable) {
       return (
         <Pressable
           onPress={() => setExpanded(!expanded)}

From 66942fc37a9f021f46fef58c20aa38c9d7e3d6e5 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 13:51:06 -0700
Subject: [PATCH 19/41] Rename story

---
 packages/components/src/components/Alert/Alert.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index 57b09f48..e253b20b 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -60,7 +60,7 @@ export const Info: Story = {
   },
 }
 
-export const Collapsible: Story = {
+export const Expandable: Story = {
   args: {
     variant: 'info',
     header: 'Header',

From c07fdd59219fb4225268b258e79d047b5c9bf887 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 16:13:37 -0700
Subject: [PATCH 20/41] Reorder initialExpandedState possible values

---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index b599351e..cf2fdbc3 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -26,7 +26,7 @@ export type AlertProps = {
   /** Optional boolean to determine whether the alert should be expandable */
   expandable?: boolean
   /** Optional initial state for expandable alert. Defaults to collapsed */
-  initialExpandedState?: 'expanded' | 'collapsed'
+  initialExpandedState?: 'collapsed' | 'expanded'
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */

From aefcb0a10ecf7c80092f70ebfcdf17569c5bdb6d Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 16:19:03 -0700
Subject: [PATCH 21/41] Add comments. Remove unneeded View

---
 .../components/src/components/Alert/Alert.tsx | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index cf2fdbc3..1faf4723 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -175,18 +175,9 @@ export const Alert: FC<AlertProps> = ({
         ? descriptionA11yLabel || description
         : ''
 
-    const collapseIconDisplay = (
-      <View style={iconViewStyle}>
-        <Spacer horizontal />
-        <Icon
-          fill={contentColor}
-          width={Sizing._16}
-          height={Sizing._16}
-          name={expanded ? 'ChevronUp' : 'ChevronDown'}
-        />
-      </View>
-    )
-
+    /** Wrap header text and expand icon in Pressable if the Alert is expandable
+     * Otherwise wrap in View with accessibility props
+     */
     if (expandable) {
       return (
         <Pressable
@@ -196,20 +187,26 @@ export const Alert: FC<AlertProps> = ({
           aria-label={a11yLabel}
           style={{ flexDirection: 'row' }}>
           <View style={{ flex: 1 }}>{headerText}</View>
-          {collapseIconDisplay}
+          <View style={iconViewStyle}>
+            <Spacer horizontal />
+            <Icon
+              fill={contentColor}
+              width={Sizing._16}
+              height={Sizing._16}
+              name={expanded ? 'ChevronUp' : 'ChevronDown'}
+            />
+          </View>
         </Pressable>
       )
     }
 
     return (
-      <View style={{ flexDirection: 'row' }}>
-        <View
-          accessible={true}
-          aria-label={a11yLabel}
-          role="heading"
-          style={{ flex: 1 }}>
-          {headerText}
-        </View>
+      <View
+        accessible={true}
+        aria-label={a11yLabel}
+        role="heading"
+        style={{ flex: 1 }}>
+        {headerText}
       </View>
     )
   }

From 0f787b866f38dc9714987089f5581e51cb1c3107 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 16:19:31 -0700
Subject: [PATCH 22/41] Add comments

---
 packages/components/src/components/Alert/Alert.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 1faf4723..33ea06e4 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -175,7 +175,8 @@ export const Alert: FC<AlertProps> = ({
         ? descriptionA11yLabel || description
         : ''
 
-    /** Wrap header text and expand icon in Pressable if the Alert is expandable
+    /**
+     * Wrap header text and expand icon in Pressable if the Alert is expandable
      * Otherwise wrap in View with accessibility props
      */
     if (expandable) {

From 1f33742b3df7104b40248a2099808507a75461d7 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Apr 2024 16:22:24 -0700
Subject: [PATCH 23/41] Remove unneeded flex

---
 packages/components/src/components/Alert/Alert.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 33ea06e4..05bcf90a 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -202,11 +202,7 @@ export const Alert: FC<AlertProps> = ({
     }
 
     return (
-      <View
-        accessible={true}
-        aria-label={a11yLabel}
-        role="heading"
-        style={{ flex: 1 }}>
+      <View accessible={true} aria-label={a11yLabel} role="heading">
         {headerText}
       </View>
     )

From 19bfa387c952ad6776f0d04e718cac3bdda17773 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Apr 2024 13:11:57 -0700
Subject: [PATCH 24/41] Rename initialExpandedState to initializeExpanded and
 made boolean for simplicity. Add right spacer to content body when Alert is
 expandable

---
 .../components/src/components/Alert/Alert.tsx | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 05bcf90a..77014c34 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -26,7 +26,7 @@ export type AlertProps = {
   /** Optional boolean to determine whether the alert should be expandable */
   expandable?: boolean
   /** Optional initial state for expandable alert. Defaults to collapsed */
-  initialExpandedState?: 'collapsed' | 'expanded'
+  initializeExpanded?: boolean
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */
@@ -47,7 +47,7 @@ export const Alert: FC<AlertProps> = ({
   descriptionA11yLabel,
   children,
   expandable,
-  initialExpandedState = 'collapsed',
+  initializeExpanded,
   primaryButton,
   secondaryButton,
   testId,
@@ -55,7 +55,7 @@ export const Alert: FC<AlertProps> = ({
   const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
   const [expanded, setExpanded] = useState(
-    expandable ? initialExpandedState === 'expanded' : true,
+    expandable ? initializeExpanded : true,
   )
 
   // TODO: Replace with sizing/dimension tokens
@@ -245,17 +245,20 @@ export const Alert: FC<AlertProps> = ({
         <View style={{ flex: 1 }}>
           {_header()}
           {expanded && (
-            <View>
-              {header && (description || children) ? <Spacer /> : null}
-              {header && description ? (
-                <View
-                  accessible={true}
-                  aria-label={descriptionA11yLabel || description}>
-                  <Text style={descriptionFont}>{description}</Text>
-                </View>
-              ) : null}
-              {description && children ? <Spacer /> : null}
-              {children}
+            <View style={{ flexDirection: 'row' }}>
+              <View style={{ flex: 1 }}>
+                {header && (description || children) ? <Spacer /> : null}
+                {header && description ? (
+                  <View
+                    accessible={true}
+                    aria-label={descriptionA11yLabel || description}>
+                    <Text style={descriptionFont}>{description}</Text>
+                  </View>
+                ) : null}
+                {description && children ? <Spacer /> : null}
+                {children}
+              </View>
+              {expandable && <Spacer horizontal size={36} />}
             </View>
           )}
         </View>

From e42ceee64fd4b23c17c668ec7a3f3ba0ffcc8bea Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Apr 2024 14:04:02 -0700
Subject: [PATCH 25/41] Add TS prop rules

---
 .../components/src/components/Alert/Alert.tsx | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 77014c34..b74e795e 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -12,8 +12,6 @@ export const AlertContentColor = BaseColor
 export type AlertProps = {
   /** Alert variant */
   variant: 'info' | 'success' | 'warning' | 'error'
-  /** Optional header text */
-  header?: string
   /** Optional a11y override for header */
   headerA11yLabel?: string
   /** Optional description text */
@@ -23,17 +21,27 @@ export type AlertProps = {
   /** Optional custom content to nest inside Alert
    * Use AlertContentColor or appropriate component props to set light/dark mode 'base' gray colors */
   children?: React.ReactNode
-  /** Optional boolean to determine whether the alert should be expandable */
-  expandable?: boolean
-  /** Optional initial state for expandable alert. Defaults to collapsed */
-  initializeExpanded?: boolean
   /** Optional primary action button */
   primaryButton?: ButtonProps
   /** Optional secondary action button */
   secondaryButton?: ButtonProps
   /** Optional testID */
   testId?: string
-}
+} & (
+  | {
+      /** Boolean to determine whether the alert should be expandable */
+      expandable: true
+      /** Header text. Required if expandable. Optional if not */
+      header: string
+      /** Determines whether an expandable Alert should start expanded. Defaults to false */
+      initializeExpanded?: boolean
+    }
+  | {
+      expandable?: false
+      header?: string
+      initializeExpanded?: never
+    }
+)
 
 /**
  * Work in progress:

From 49cd8bce8f51e39b4163ed6c1912b61052d798bb Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Apr 2024 14:09:13 -0700
Subject: [PATCH 26/41] Remove description logic from _header()

---
 .../components/src/components/Alert/Alert.tsx     | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index b74e795e..8da6bf81 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -171,17 +171,8 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const _header = () => {
-    const headerText = header ? (
-      <Text style={headerFont}>{header}</Text>
-    ) : description ? (
-      <Text style={descriptionFont}>{description}</Text>
-    ) : null
-
-    const a11yLabel = header
-      ? headerA11yLabel || header
-      : description
-        ? descriptionA11yLabel || description
-        : ''
+    const headerText = header ? <Text style={headerFont}>{header}</Text> : null
+    const a11yLabel = header ? headerA11yLabel || header : ''
 
     /**
      * Wrap header text and expand icon in Pressable if the Alert is expandable
@@ -256,7 +247,7 @@ export const Alert: FC<AlertProps> = ({
             <View style={{ flexDirection: 'row' }}>
               <View style={{ flex: 1 }}>
                 {header && (description || children) ? <Spacer /> : null}
-                {header && description ? (
+                {description ? (
                   <View
                     accessible={true}
                     aria-label={descriptionA11yLabel || description}>

From a2b5e9f17b8244815ab13517b24a8f7655e10e5a Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Apr 2024 14:11:32 -0700
Subject: [PATCH 27/41] Update expandable comment

---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 8da6bf81..c336ab68 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -29,7 +29,7 @@ export type AlertProps = {
   testId?: string
 } & (
   | {
-      /** Boolean to determine whether the alert should be expandable */
+      /** True to make the Alert expandable */
       expandable: true
       /** Header text. Required if expandable. Optional if not */
       header: string

From 4e4d294f5b7b9ae5f8063accf1c162547f5e7db0 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Apr 2024 14:12:27 -0700
Subject: [PATCH 28/41] Update initializeExpanded comment

---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index c336ab68..6778df82 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -33,7 +33,7 @@ export type AlertProps = {
       expandable: true
       /** Header text. Required if expandable. Optional if not */
       header: string
-      /** Determines whether an expandable Alert should start expanded. Defaults to false */
+      /** True if Alert should start expanded. Defaults to false */
       initializeExpanded?: boolean
     }
   | {

From 99f1a6fc272781f01703edfc2f9d5d1a4d92b9ac Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Apr 2024 20:30:26 -0700
Subject: [PATCH 29/41] Add font scaling for icons

---
 packages/components/src/components/Alert/Alert.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 6778df82..379032c2 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,5 +1,12 @@
 import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
-import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
+import {
+  Pressable,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native'
 import React, { FC, useState } from 'react'
 
 import { BaseColor, Spacer, useColorScheme } from '../../utils'
@@ -61,6 +68,7 @@ export const Alert: FC<AlertProps> = ({
   testId,
 }) => {
   const colorScheme = useColorScheme()
+  const fontScale = useWindowDimensions().fontScale
   const isDarkMode = colorScheme === 'dark'
   const [expanded, setExpanded] = useState(
     expandable ? initializeExpanded : true,
@@ -142,7 +150,7 @@ export const Alert: FC<AlertProps> = ({
     flexDirection: 'row',
     // Below keeps icon aligned with first row of text, centered, and scalable
     alignSelf: 'flex-start',
-    minHeight: Sizing._30,
+    minHeight: Sizing._30 * fontScale,
     alignItems: 'center',
     justifyContent: 'center',
   }

From a604070197c2bb3c7362b097d983669664ed0df4 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 18 Apr 2024 09:29:48 -0700
Subject: [PATCH 30/41] Add expandable and header comments for default prop
 type

---
 packages/components/src/components/Alert/Alert.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 379032c2..78aec87e 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -38,13 +38,15 @@ export type AlertProps = {
   | {
       /** True to make the Alert expandable */
       expandable: true
-      /** Header text. Required if expandable. Optional if not */
+      /** Header text. Required when Alert is expandable */
       header: string
       /** True if Alert should start expanded. Defaults to false */
       initializeExpanded?: boolean
     }
   | {
+      /** True to make the Alert expandable */
       expandable?: false
+      /** Header text. Optional when Alert is not expandable */
       header?: string
       initializeExpanded?: never
     }

From e2ebc33f4a4d159cde081cff68dd832e3b5067e6 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 18 Apr 2024 10:32:45 -0700
Subject: [PATCH 31/41] Set preventScaling on variant icon. Set maxWidth on
 chevron icon to 24. Fix content right spacer width

---
 packages/components/src/components/Alert/Alert.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 78aec87e..73d49a49 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -82,6 +82,8 @@ export const Alert: FC<AlertProps> = ({
     _12: 12,
     _16: 16,
     _20: 20,
+    _24: 24,
+    _26: 26,
     _30: 30,
   }
   const contentColor = AlertContentColor()
@@ -159,7 +161,7 @@ export const Alert: FC<AlertProps> = ({
 
   const iconDisplay = (
     <View style={iconViewStyle}>
-      <Icon fill={contentColor} {...iconProps} />
+      <Icon fill={contentColor} {...iconProps} preventScaling />
       <Spacer horizontal />
     </View>
   )
@@ -203,6 +205,7 @@ export const Alert: FC<AlertProps> = ({
               fill={contentColor}
               width={Sizing._16}
               height={Sizing._16}
+              maxWidth={Sizing._24}
               name={expanded ? 'ChevronUp' : 'ChevronDown'}
             />
           </View>
@@ -267,7 +270,7 @@ export const Alert: FC<AlertProps> = ({
                 {description && children ? <Spacer /> : null}
                 {children}
               </View>
-              {expandable && <Spacer horizontal size={36} />}
+              {expandable && <Spacer horizontal size={Sizing._26} />}
             </View>
           )}
         </View>

From 217fcec8321aef1525de2dc26004f6a884c32ee2 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 18 Apr 2024 21:19:46 -0700
Subject: [PATCH 32/41] Expand touchable area with hitSlop

---
 packages/components/src/components/Alert/Alert.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 73d49a49..8bc9f35b 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -197,6 +197,7 @@ export const Alert: FC<AlertProps> = ({
           accessibilityRole="tab"
           accessibilityState={{ expanded }}
           aria-label={a11yLabel}
+          hitSlop={{ left: 54, top: 20, bottom: expanded ? 10 : 20, right: 20 }}
           style={{ flexDirection: 'row' }}>
           <View style={{ flex: 1 }}>{headerText}</View>
           <View style={iconViewStyle}>

From 6d1726d3e40296c69e4735a64de954a407f9a4b6 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 19 Apr 2024 10:45:51 -0700
Subject: [PATCH 33/41] Clean up hitSlop and spacer

---
 .../components/src/components/Alert/Alert.tsx | 60 ++++++++++++++-----
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 8bc9f35b..915cf085 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,5 +1,6 @@
 import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import {
+  Insets,
   Pressable,
   Text,
   TextStyle,
@@ -79,6 +80,7 @@ export const Alert: FC<AlertProps> = ({
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {
     _8: 8,
+    _10: 10,
     _12: 12,
     _16: 16,
     _20: 20,
@@ -160,9 +162,37 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const iconDisplay = (
+    <View style={{ ...iconViewStyle }}>
+      <Icon fill={contentColor} {...iconProps} />
+      <Spacer horizontal />
+    </View>
+  )
+
+  const expandIconProps: IconProps = {
+    fill: contentColor,
+    width: Sizing._16,
+    height: Sizing._16,
+    maxWidth: Sizing._24,
+    name: expanded ? 'ChevronUp' : 'ChevronDown',
+  }
+
+  const expandableIcon = (
     <View style={iconViewStyle}>
-      <Icon fill={contentColor} {...iconProps} preventScaling />
       <Spacer horizontal />
+      <Icon {...expandIconProps} />
+    </View>
+  )
+
+  /**
+   * When an alert is expandable, the content should have additional padding on
+   * the right to appear within the expandable icon. Since the expandable icon
+   * has a maxWidth, this hidden icon matches the spacing of the icon insteading
+   * instead of adding a <Spacer /> with a calculated value.
+   */
+  const spacerIcon = (
+    <View style={iconViewStyle} aria-hidden>
+      <Spacer horizontal />
+      <Icon {...expandIconProps} fill={backgroundColor} />
     </View>
   )
 
@@ -185,6 +215,14 @@ export const Alert: FC<AlertProps> = ({
   const _header = () => {
     const headerText = header ? <Text style={headerFont}>{header}</Text> : null
     const a11yLabel = header ? headerA11yLabel || header : ''
+    const hitSlop: Insets = {
+      // left border + left padding + spacer + icon width
+      left: Sizing._8 + Sizing._12 + Sizing._10 + Sizing._24,
+      top: Sizing._20,
+      // bottom spacing changes depended on expanded state
+      bottom: expanded ? Sizing._10 : Sizing._20,
+      right: Sizing._20,
+    }
 
     /**
      * Wrap header text and expand icon in Pressable if the Alert is expandable
@@ -197,19 +235,10 @@ export const Alert: FC<AlertProps> = ({
           accessibilityRole="tab"
           accessibilityState={{ expanded }}
           aria-label={a11yLabel}
-          hitSlop={{ left: 54, top: 20, bottom: expanded ? 10 : 20, right: 20 }}
+          hitSlop={hitSlop}
           style={{ flexDirection: 'row' }}>
           <View style={{ flex: 1 }}>{headerText}</View>
-          <View style={iconViewStyle}>
-            <Spacer horizontal />
-            <Icon
-              fill={contentColor}
-              width={Sizing._16}
-              height={Sizing._16}
-              maxWidth={Sizing._24}
-              name={expanded ? 'ChevronUp' : 'ChevronDown'}
-            />
-          </View>
+          {expandableIcon}
         </Pressable>
       )
     }
@@ -252,7 +281,10 @@ export const Alert: FC<AlertProps> = ({
   }
 
   return (
-    <View style={contentBox} testID={testId}>
+    <View
+      style={contentBox}
+      testID={testId}
+      accessibilityRole={expandable ? 'tablist' : 'none'}>
       <View style={{ flexDirection: 'row' }}>
         {iconDisplay}
         <View style={{ flex: 1 }}>
@@ -271,7 +303,7 @@ export const Alert: FC<AlertProps> = ({
                 {description && children ? <Spacer /> : null}
                 {children}
               </View>
-              {expandable && <Spacer horizontal size={Sizing._26} />}
+              {expandable && spacerIcon}
             </View>
           )}
         </View>

From 58f6da82dfdad10af84e24bb3bcf5aa47248f9c9 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 19 Apr 2024 11:31:36 -0700
Subject: [PATCH 34/41] Remove unneeded sizing token

---
 packages/components/src/components/Alert/Alert.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 915cf085..88d55419 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -85,7 +85,6 @@ export const Alert: FC<AlertProps> = ({
     _16: 16,
     _20: 20,
     _24: 24,
-    _26: 26,
     _30: 30,
   }
   const contentColor = AlertContentColor()

From cec6f6973404e124ec9af0c344f86e94e32f590b Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 19 Apr 2024 11:51:15 -0700
Subject: [PATCH 35/41] Cleanup

---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 88d55419..17f22512 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -161,7 +161,7 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const iconDisplay = (
-    <View style={{ ...iconViewStyle }}>
+    <View style={iconViewStyle}>
       <Icon fill={contentColor} {...iconProps} />
       <Spacer horizontal />
     </View>

From 5670a3e1639d1597e27fcd09ee0b2165f33392ae Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 19 Apr 2024 11:52:29 -0700
Subject: [PATCH 36/41] Fix comment typo

---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 17f22512..71af7a7a 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -218,7 +218,7 @@ export const Alert: FC<AlertProps> = ({
       // left border + left padding + spacer + icon width
       left: Sizing._8 + Sizing._12 + Sizing._10 + Sizing._24,
       top: Sizing._20,
-      // bottom spacing changes depended on expanded state
+      // bottom spacing changes depending on expanded state
       bottom: expanded ? Sizing._10 : Sizing._20,
       right: Sizing._20,
     }

From cdf451fadf768616a6891e39a9c4f3496a571728 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Tue, 23 Apr 2024 09:30:20 -0700
Subject: [PATCH 37/41] Add preventScaling to alert icon, clean up header
 logic, change spacer icon fill to none

---
 packages/components/src/components/Alert/Alert.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 71af7a7a..6dfd48dd 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -162,7 +162,7 @@ export const Alert: FC<AlertProps> = ({
 
   const iconDisplay = (
     <View style={iconViewStyle}>
-      <Icon fill={contentColor} {...iconProps} />
+      <Icon fill={contentColor} {...iconProps} preventScaling />
       <Spacer horizontal />
     </View>
   )
@@ -191,7 +191,7 @@ export const Alert: FC<AlertProps> = ({
   const spacerIcon = (
     <View style={iconViewStyle} aria-hidden>
       <Spacer horizontal />
-      <Icon {...expandIconProps} fill={backgroundColor} />
+      <Icon {...expandIconProps} fill="none" />
     </View>
   )
 
@@ -212,8 +212,10 @@ export const Alert: FC<AlertProps> = ({
   }
 
   const _header = () => {
-    const headerText = header ? <Text style={headerFont}>{header}</Text> : null
-    const a11yLabel = header ? headerA11yLabel || header : ''
+    if (!header) return null
+
+    const headerText = <Text style={headerFont}>{header}</Text>
+    const a11yLabel = headerA11yLabel || header
     const hitSlop: Insets = {
       // left border + left padding + spacer + icon width
       left: Sizing._8 + Sizing._12 + Sizing._10 + Sizing._24,

From 27b88cad6d55c845c7a11fe488f14802eded2df1 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:40:18 -0700
Subject: [PATCH 38/41] Replace accessibilityRole with role

Co-authored-by: Tim R <TimRoe@users.noreply.github.com>
---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 6dfd48dd..34e39322 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -285,7 +285,7 @@ export const Alert: FC<AlertProps> = ({
     <View
       style={contentBox}
       testID={testId}
-      accessibilityRole={expandable ? 'tablist' : 'none'}>
+      role={expandable ? 'tablist' : 'none'}>
       <View style={{ flexDirection: 'row' }}>
         {iconDisplay}
         <View style={{ flex: 1 }}>

From bd0fef918f8b7e1d36bea5e47ba0ac9420bd79ee Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:40:35 -0700
Subject: [PATCH 39/41] Replace accessibilityRole with role

Co-authored-by: Tim R <TimRoe@users.noreply.github.com>
---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 34e39322..1e6e9d95 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -233,7 +233,7 @@ export const Alert: FC<AlertProps> = ({
       return (
         <Pressable
           onPress={() => setExpanded(!expanded)}
-          accessibilityRole="tab"
+          role="tab"
           accessibilityState={{ expanded }}
           aria-label={a11yLabel}
           hitSlop={hitSlop}

From 631ae25830ad5d17691b21d3ddef82e2420cd50a Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:40:52 -0700
Subject: [PATCH 40/41] Replace accessibilityState with aria-expanded

Co-authored-by: Tim R <TimRoe@users.noreply.github.com>
---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 1e6e9d95..795fe54d 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -234,7 +234,7 @@ export const Alert: FC<AlertProps> = ({
         <Pressable
           onPress={() => setExpanded(!expanded)}
           role="tab"
-          accessibilityState={{ expanded }}
+          aria-expanded={{ expanded }}
           aria-label={a11yLabel}
           hitSlop={hitSlop}
           style={{ flexDirection: 'row' }}>

From d18b4966e8e83427f904d45457a2f2f06c20f995 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Tue, 23 Apr 2024 11:48:19 -0700
Subject: [PATCH 41/41] Fix aria-expanded value

---
 packages/components/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 795fe54d..d8ee8e40 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -234,7 +234,7 @@ export const Alert: FC<AlertProps> = ({
         <Pressable
           onPress={() => setExpanded(!expanded)}
           role="tab"
-          aria-expanded={{ expanded }}
+          aria-expanded={expanded}
           aria-label={a11yLabel}
           hitSlop={hitSlop}
           style={{ flexDirection: 'row' }}>