[Feature] Alert Collapse/Expand

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.4",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

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,6 @@
 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 } from 'react-native'
+import React, { FC, useState } from 'react'
 
 import { BaseColor, Spacer, useColorScheme } from '../../utils'
 import { Button, ButtonProps, ButtonVariants } from '../Button/Button'
@@ -29,15 +23,15 @@ 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 */
+  initialExpandedState?: 'collapsed' | 'expanded'
   /** 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
 }
 
@@ -52,41 +46,23 @@ export const Alert: FC<AlertProps> = ({
   description,
   descriptionA11yLabel,
   children,
+  expandable,
+  initialExpandedState = 'collapsed',
   primaryButton,
   secondaryButton,
-  // focusOnError = true,
-  // scrollViewRef,
   testId,
 }) => {
   const colorScheme = useColorScheme()
   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 ? initialExpandedState === 'expanded' : true,
+  )
 
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {
     _8: 8,
     _12: 12,
+    _16: 16,
     _20: 20,
     _30: 30,
   }
@@ -151,7 +127,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 = {
@@ -170,14 +146,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 +162,52 @@ export const Alert: FC<AlertProps> = ({
     lineHeight: 30,
   }
 
+  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
+        : ''
+
+    /**
+     * 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 +243,29 @@ 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>
+              {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>
-          ) : 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'