[Feature] Add analytics passthroughs for Alert

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

@@ -67,17 +67,17 @@ export const Expandable: Story = {
     description: 'Description',
     children: children,
     expandable: true,
+    analytics: {
+      onExpand: () => console.log('expanded'),
+      onCollapse: () => console.log('collapsed'),
+    },
     primaryButton: {
       label: 'Button Text',
-      onPress: () => {
-        null
-      },
+      onPress: () => console.log('primary press'),
     },
     secondaryButton: {
       label: 'Button Text',
-      onPress: () => {
-        null
-      },
+      onPress: () => console.log('secondary press'),
     },
   },
 }

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

@@ -17,6 +17,11 @@ import { Icon, IconProps } from '../Icon/Icon'
 /** Convenience function to set children content color correctly with light/dark mode */
 export const AlertContentColor = BaseColor
 
+export type AlertAnalytics = {
+  onExpand?: () => void
+  onCollapse?: () => void
+}
+
 export type AlertProps = {
   /** Alert variant */
   variant: 'info' | 'success' | 'warning' | 'error'
@@ -33,6 +38,8 @@ export type AlertProps = {
   primaryButton?: ButtonProps
   /** Optional secondary action button */
   secondaryButton?: ButtonProps
+  /** Optional analytics event logging */
+  analytics?: AlertAnalytics
   /** Optional testID */
   testId?: string
 } & (
@@ -66,6 +73,7 @@ export const Alert: FC<AlertProps> = ({
   children,
   expandable,
   initializeExpanded,
+  analytics,
   primaryButton,
   secondaryButton,
   testId,
@@ -77,6 +85,12 @@ export const Alert: FC<AlertProps> = ({
     expandable ? initializeExpanded : true,
   )
 
+  const toggleExpand = () => {
+    if (expanded && analytics?.onCollapse) analytics.onCollapse()
+    if (!expanded && analytics?.onExpand) analytics.onExpand()
+    setExpanded(!expanded)
+  }
+
   // TODO: Replace with sizing/dimension tokens
   const Sizing = {
     _8: 8,
@@ -232,7 +246,7 @@ export const Alert: FC<AlertProps> = ({
     if (expandable) {
       return (
         <Pressable
-          onPress={() => setExpanded(!expanded)}
+          onPress={toggleExpand}
           role="tab"
           aria-expanded={expanded}
           aria-label={a11yLabel}

packages/components/src/components/Link/Link.tsx

@@ -276,7 +276,7 @@ export const Link: FC<LinkProps> = ({
         ? isDarkMode
           ? Colors.grayDark
           : Colors.grayLighter
-        : 'none',
+        : 'transparent',
     }),
     testOnly_pressed: testOnlyPressed,
   }