@boostdev/design-system-react-native 0.2.6 → 0.4.0

package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Text } from 'react-native';
+import { Text, View, Pressable } from 'react-native';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { NotificationBanner } from './NotificationBanner';
 
@@ -13,6 +13,37 @@ describe('NotificationBanner (native)', () => {
     expect(screen.getByText('Update available')).toBeInTheDocument();
   });
 
+  it('renders non-text children such as a view with an action', () => {
+    const onPress = vi.fn();
+    renderWithTheme(
+      <NotificationBanner variant="warning">
+        <View>
+          <Text>Session expiring</Text>
+          <Pressable accessibilityRole="button" onPress={onPress}>
+            <Text>Extend</Text>
+          </Pressable>
+        </View>
+      </NotificationBanner>,
+    );
+    expect(screen.getByText('Session expiring')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Extend' }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the resolved text color to a function child', () => {
+    let receivedColor = '';
+    renderWithTheme(
+      <NotificationBanner variant="info">
+        {({ color }) => {
+          receivedColor = color;
+          return <Text style={{ color }}>Themed content</Text>;
+        }}
+      </NotificationBanner>,
+    );
+    expect(screen.getByText('Themed content')).toBeInTheDocument();
+    expect(receivedColor).not.toBe('');
+  });
+
   it('has alert role for error variant', () => {
     renderWithTheme(
       <NotificationBanner variant="error">Something went wrong</NotificationBanner>,

package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View, Text, Pressable } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { NotificationBanner } from './NotificationBanner';
@@ -35,3 +36,32 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+// A string child keeps the default body styling. A non-text child renders as-is.
+export const WithRichContent: Story = {
+  args: { children: '', variant: 'warning' },
+  render: (args) => (
+    <NotificationBanner {...args}>
+      <View style={{ gap: 2 }}>
+        <Text style={{ fontSize: 13, fontWeight: '600' }}>Session expiring</Text>
+        <Text style={{ fontSize: 13 }}>You will be signed out in 2 minutes.</Text>
+      </View>
+    </NotificationBanner>
+  ),
+};
+
+// Pass a function child to receive the variant's resolved text color, so custom
+// content matches the banner's theme automatically.
+export const WithThemedContent: Story = {
+  args: { children: '', variant: 'error' },
+  render: (args) => (
+    <NotificationBanner {...args}>
+      {({ color }) => (
+        <View style={{ gap: 2 }}>
+          <Text style={{ color, fontSize: 13, fontWeight: '600' }}>Sync failed</Text>
+          <Text style={{ color, fontSize: 13 }}>Check your connection and try again.</Text>
+        </View>
+      )}
+    </NotificationBanner>
+  ),
+};

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -5,9 +5,13 @@ import { useTheme } from '../../../native/ThemeContext';
 
 type BannerVariant = 'info' | 'success' | 'warning' | 'error';
 
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the banner's theme. */
+type BannerContentRenderProp = (props: { color: string }) => ReactNode;
+
 interface NotificationBannerProps {
   variant?: BannerVariant;
-  children: ReactNode;
+  children: ReactNode | BannerContentRenderProp;
   action?: ReactNode;
   onDismiss?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -21,8 +25,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.m,
     gap: spacing.xs,
   },
-  content: {
+  body: {
     flex: 1,
+  },
+  content: {
     fontSize: font.size.bodyS,
     fontFamily: font.family.body,
     lineHeight: lineHeight.bodyS,
@@ -51,6 +57,7 @@ export function NotificationBanner({
   };
 
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === 'function' ? children({ color: text }) : children;
 
   return (
     <View
@@ -58,7 +65,13 @@ export function NotificationBanner({
       accessibilityLiveRegion={isUrgent ? 'assertive' : 'polite'}
       style={[styles.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style]}
     >
-      <Text style={[styles.content, { color: text }]}>{children}</Text>
+      <View style={styles.body}>
+        {typeof resolvedChildren === 'string' || typeof resolvedChildren === 'number' ? (
+          <Text style={[styles.content, { color: text }]}>{resolvedChildren}</Text>
+        ) : (
+          resolvedChildren
+        )}
+      </View>
       {action}
       {onDismiss && (
         <Pressable