[Feature] Alert Collapse/Expand

packages/components/src/components/Alert/Alert.stories.tsx

@@ -59,3 +59,25 @@ export const Info: Story = {
     },
   },
 }
+
+export const Expandable: Story = {
+  args: {
+    variant: 'info',
+    header: 'Header',
+    description: 'Description',
+    children: children,
+    expandable: true,
+    primaryButton: {
+      label: 'Button Text',
+      onPress: () => {
+        null
+      },
+    },
+    secondaryButton: {
+      label: 'Button Text',
+      onPress: () => {
+        null
+      },
+    },
+  },
+}

packages/components/src/components/Alert/Alert.tsx

@@ -1,12 +1,13 @@
 import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
-// import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
-import { Text, TextStyle, View, ViewStyle } from 'react-native'
-//      ^ ScrollView,
-import React, { FC } from 'react'
-//                ^ , RefObject, useEffect, useState
-
-// import { triggerHaptic } from 'utils/haptics'
-// import { useAutoScrollToElement } from 'utils/hooks'
+import {
+  Pressable,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native'
+import React, { FC, useState } from 'react'
 
 import { BaseColor, Spacer, useColorScheme } from '../../utils'
 import { Button, ButtonProps, ButtonVariants } from '../Button/Button'
@@ -18,8 +19,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 */
@@ -33,13 +32,25 @@ export type AlertProps = {
   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
-}
+} & (
+  | {
+      /** True to make the Alert expandable */
+      expandable: true
+      /** 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
+    }
+)
 
 /**
  * Work in progress:
@@ -52,41 +63,24 @@ export const Alert: FC<AlertProps> = ({
   description,
   descriptionA11yLabel,
   children,
+  expandable,
+  initializeExpanded,
   primaryButton,
   secondaryButton,
-  // focusOnError = true,
-  // scrollViewRef,
   testId,
 }) => {
   const colorScheme = useColorScheme()
+  const fontScale = useWindowDimensions().fontScale
   const isDarkMode = colorScheme === 'dark'
-  // 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,
-  // ])
+  const [expanded, setExpanded] = useState(
+    expandable ? initializeExpanded : true,
+  )
 
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {
     _8: 8,
     _12: 12,
+    _16: 16,
     _20: 20,
     _30: 30,
   }
@@ -151,14 +145,14 @@ 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 = {
     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',
   }
@@ -170,14 +164,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,
@@ -194,6 +180,43 @@ export const Alert: FC<AlertProps> = ({
     lineHeight: 30,
   }
 
+  const _header = () => {
+    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
+     * Otherwise wrap in View with accessibility props
+     */
+    if (expandable) {
+      return (
+        <Pressable
+          onPress={() => setExpanded(!expanded)}
+          accessibilityRole="tab"
+          accessibilityState={{ expanded }}
+          aria-label={a11yLabel}
+          style={{ flexDirection: 'row' }}>
+          <View style={{ flex: 1 }}>{headerText}</View>
+          <View style={iconViewStyle}>
+            <Spacer horizontal />
+            <Icon
+              fill={contentColor}
+              width={Sizing._16}
+              height={Sizing._16}
+              name={expanded ? 'ChevronUp' : 'ChevronDown'}
+            />
+          </View>
+        </Pressable>
+      )
+    }
+
+    return (
+      <View accessible={true} aria-label={a11yLabel} role="heading">
+        {headerText}
+      </View>
+    )
+  }
+
   const _primaryButton = () => {
     if (!primaryButton) return null
 
@@ -229,31 +252,32 @@ export const Alert: FC<AlertProps> = ({
       <View style={{ flexDirection: 'row' }}>
         {iconDisplay}
         <View style={{ flex: 1 }}>
-          {header ? (
-            <View
-              // ref={viewRef}
-              accessible={true}
-              aria-label={headerA11yLabel || header}
-              role="heading">
-              <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>
+          {_header()}
+          {expanded && (
+            <View style={{ flexDirection: 'row' }}>
+              <View style={{ flex: 1 }}>
+                {header && (description || children) ? <Spacer /> : null}
+                {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>
-          ) : null}
-          {description && children ? <Spacer /> : null}
-          {children}
-          {/* {shouldFocus && vibrate()} */}
+          )}
         </View>
       </View>
-      {_primaryButton()}
-      {_secondaryButton()}
+      {expanded && (
+        <>
+          {_primaryButton()}
+          {_secondaryButton()}
+        </>
+      )}
     </View>
   )
 }

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'