@boostdev/design-system-components 1.0.3 → 1.1.0

package/src/components/layout/Card/Card.native.tsx

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+type CardPadding = 'none' | 'small' | 'medium' | 'large';
+type CardAlign = 'start' | 'center' | 'end';
+
+interface CardProps {
+  children: ReactNode;
+  variant?: CardVariant;
+  padding?: CardPadding;
+  textAlign?: CardAlign;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+}
+
+const paddingMap: Record<CardPadding, number> = {
+  none:   0,
+  small:  spacing.s,
+  medium: spacing.m,
+  large:  spacing.xxl,
+};
+
+const alignMap: Record<CardAlign, 'flex-start' | 'center' | 'flex-end'> = {
+  start:  'flex-start',
+  center: 'center',
+  end:    'flex-end',
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: border.radius.s,
+    overflow: 'hidden',
+  },
+});
+
+export function Card({
+  children,
+  variant = 'default',
+  padding = 'medium',
+  textAlign = 'start',
+  style,
+  onPress,
+  accessibilityLabel,
+}: CardProps) {
+  const { colors } = useTheme();
+
+  const variantStyle: ViewStyle = {
+    backgroundColor: colors.colorBg,
+    ...(variant === 'elevated' && {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 4,
+    }),
+    ...(variant === 'outlined' && {
+      borderWidth: 1,
+      borderColor: colors.colorBgSubtle,
+    }),
+  };
+
+  const inner: ViewStyle = {
+    padding: paddingMap[padding],
+    alignItems: alignMap[textAlign],
+  };
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        style={({ pressed }) => [styles.card, variantStyle, inner, pressed && { opacity: 0.8 }, style]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={[styles.card, variantStyle, inner, style]}>
+      {children}
+    </View>
+  );
+}

package/src/components/layout/Card/Card.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Card } from './Card';
 
 const meta = {
-  title: 'Layout/Card',
+  title: 'React/Layout/Card',
   component: Card,
   argTypes: {
     variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },

package/src/components/layout/Card/Card.tsx

@@ -1,10 +1,10 @@
 import { CSSProperties, ReactNode } from 'react';
 import css from './Card.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface CardProps {
+interface CardProps extends WithClassName {
   children: ReactNode;
-  className?: string | undefined;
   variant?: 'default' | 'elevated' | 'outlined';
   padding?: 'none' | 'small' | 'medium' | 'large';
   textAlign?: 'start' | 'center' | 'end';

package/src/components/layout/IconWrapper/IconWrapper.mdx

@@ -28,8 +28,8 @@ Circular container that sizes to its own `font-size`. Use to give an SVG icon a
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--icon-wrapper_color`</td><td>`var(--bds-cta--subtle)`</td><td>Background colour</td></tr>
-<tr><td>`--icon-wrapper_on-color`</td><td>`var(--bds-on-cta--subtle)`</td><td>Icon colour</td></tr>
+<tr><td>`--icon-wrapper-color`</td><td>`var(--bds-color_bg)`</td><td>Background colour</td></tr>
+<tr><td>`--bds-on-icon-wrapper-color`</td><td>`var(--bds-color_on-bg)`</td><td>Icon colour</td></tr>
 </tbody>
 </table>
 

package/src/components/layout/IconWrapper/IconWrapper.native.spec.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { IconWrapper } from './IconWrapper.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('IconWrapper (native)', () => {
+  it('renders children', () => {
+    renderWithTheme(
+      <IconWrapper>
+        <span data-testid="icon">★</span>
+      </IconWrapper>,
+    );
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders without error when accessibilityElementsHidden is true', () => {
+    // accessibilityElementsHidden={true} hides the element from iOS VoiceOver.
+    // importantForAccessibility="no-hide-descendants" hides it from Android TalkBack.
+    // Both are applied when this prop is set.
+    renderWithTheme(
+      <IconWrapper accessibilityElementsHidden>
+        <span data-testid="icon">★</span>
+      </IconWrapper>,
+    );
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders without error when accessibilityElementsHidden is false', () => {
+    renderWithTheme(
+      <IconWrapper accessibilityElementsHidden={false}>
+        <span data-testid="icon">★</span>
+      </IconWrapper>,
+    );
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+});

package/src/components/layout/IconWrapper/IconWrapper.native.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { IconWrapper } from './IconWrapper.native';
+
+// Simple SVG icon for demonstration
+const StarIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Layout/IconWrapper',
+  component: IconWrapper,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof IconWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <IconWrapper {...args}>
+        <StarIcon />
+      </IconWrapper>
+    </ThemeProvider>
+  ),
+};
+export const HiddenFromAccessibility: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <IconWrapper {...args} accessibilityElementsHidden>
+        <StarIcon />
+      </IconWrapper>
+    </ThemeProvider>
+  ),
+};

package/src/components/layout/IconWrapper/IconWrapper.native.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
+
+export interface IconWrapperProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  accessibilityElementsHidden?: boolean;
+}
+
+export function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps) {
+  return (
+    <View
+      style={[{ alignItems: 'center', justifyContent: 'center' }, style]}
+      importantForAccessibility={accessibilityElementsHidden ? 'no-hide-descendants' : 'auto'}
+      accessibilityElementsHidden={accessibilityElementsHidden}
+    >
+      {children}
+    </View>
+  );
+}

package/src/components/layout/IconWrapper/IconWrapper.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { IconWrapper } from './IconWrapper';
 
 const meta = {
-  title: 'Layout/IconWrapper',
+  title: 'React/Layout/IconWrapper',
   component: IconWrapper,
 } satisfies Meta<typeof IconWrapper>;
 

package/src/components/layout/IconWrapper/IconWrapper.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import css from './IconWrapper.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-export interface IconWrapperProps {
+export interface IconWrapperProps extends WithClassName {
   children: ReactNode;
-  className?: string;
   'aria-hidden'?: boolean | 'true' | 'false';
 }
 

package/src/components/layout/SectionHeader/SectionHeader.mdx

@@ -32,6 +32,19 @@ Heading block with optional subtitle for introducing a content section.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--sectionHeader_subtitle-color`</td><td>`var(--bds-color_grey--strong)`</td><td>Subtitle text colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Title renders as `<h2>` by default — override with `titleAs` to fit document outline

package/src/components/layout/SectionHeader/SectionHeader.native.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { SectionHeader } from './SectionHeader.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Layout/SectionHeader',
+  component: SectionHeader,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    alignment: { control: 'select', options: ['start', 'center', 'end'] },
+  },
+} satisfies Meta<typeof SectionHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { title: 'Section Title' } };
+export const WithSubtitle: Story = { args: { title: 'Section Title', subtitle: 'Optional subtitle text.' } };
+export const Small: Story = { args: { title: 'Small Section', size: 'small' } };
+export const Large: Story = { args: { title: 'Large Section', size: 'large' } };
+export const Centered: Story = {
+  args: { title: 'Centered Header', subtitle: 'Centered subtitle text.', alignment: 'center' },
+};
+export const AllSizes: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        <SectionHeader size="large" title="Large Heading" subtitle="Large section subtitle." />
+        <SectionHeader size="medium" title="Medium Heading" subtitle="Medium section subtitle." />
+        <SectionHeader size="small" title="Small Heading" subtitle="Small section subtitle." />
+      </div>
+    </ThemeProvider>
+  ),
+};

package/src/components/layout/SectionHeader/SectionHeader.native.tsx

@@ -0,0 +1,79 @@
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type SectionHeaderAlignment = 'start' | 'center' | 'end';
+type SectionHeaderSize = 'small' | 'medium' | 'large';
+
+interface SectionHeaderProps {
+  title: string;
+  subtitle?: string;
+  alignment?: SectionHeaderAlignment;
+  size?: SectionHeaderSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+const alignMap: Record<SectionHeaderAlignment, 'flex-start' | 'center' | 'flex-end'> = {
+  start:  'flex-start',
+  center: 'center',
+  end:    'flex-end',
+};
+
+const titleStyles = StyleSheet.create({
+  small: {
+    fontSize: font.size.heading3,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading3,
+  },
+  medium: {
+    fontSize: font.size.heading2,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading2,
+  },
+  large: {
+    fontSize: font.size.heading1,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading1,
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  subtitle: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS,
+  },
+});
+
+export function SectionHeader({
+  title,
+  subtitle,
+  alignment = 'start',
+  size = 'medium',
+  style,
+}: Readonly<SectionHeaderProps>) {
+  const { colors } = useTheme();
+  const align = alignMap[alignment];
+
+  return (
+    <View style={[styles.container, { alignItems: align }, style]}>
+      <Text
+        accessibilityRole="header"
+        style={[titleStyles[size], { color: colors.colorOnBg }]}
+      >
+        {title}
+      </Text>
+      {subtitle && (
+        <Text style={[styles.subtitle, { color: colors.colorOnBgSubtle }]}>
+          {subtitle}
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/components/layout/SectionHeader/SectionHeader.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SectionHeader } from './SectionHeader';
 
 const meta = {
-  title: 'Layout/SectionHeader',
+  title: 'React/Layout/SectionHeader',
   component: SectionHeader,
   argTypes: {
     alignment: { control: 'select', options: ['start', 'center', 'end'] },

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -1,13 +1,13 @@
 import type { JSX } from 'react';
 import css from './SectionHeader.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 type IntrinsicElement = keyof JSX.IntrinsicElements;
 
-type SectionHeaderProps = {
+type SectionHeaderProps = WithClassName & {
   title: string;
   subtitle?: string;
-  className?: string;
   alignment?: 'start' | 'center' | 'end';
   size?: 'small' | 'medium' | 'large';
   titleAs?: IntrinsicElement;

package/src/components/ui/Accordion/Accordion.mdx

@@ -33,6 +33,20 @@ Vertically stacked sections that can be expanded and collapsed independently.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--accordion_border`</td><td>`none`</td><td>Container border</td></tr>
+<tr><td>`--accordion_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Implements ARIA disclosure pattern: trigger buttons use `aria-expanded` and `aria-controls`

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Accordion } from './Accordion';
 
 const meta = {
-  title: 'UI/Accordion',
+  title: 'React/UI/Accordion',
   component: Accordion,
 } satisfies Meta<typeof Accordion>;
 

package/src/components/ui/Accordion/Accordion.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useId, useState } from 'react';
 import css from './Accordion.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface AccordionItem {
   id: string;
@@ -9,11 +10,10 @@ export interface AccordionItem {
   disabled?: boolean;
 }
 
-interface AccordionProps {
+interface AccordionProps extends WithClassName {
   items: AccordionItem[];
   allowMultiple?: boolean;
   defaultOpen?: string[];
-  className?: string;
 }
 
 export function Accordion({

package/src/components/ui/Alert/Alert.native.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Alert } from './Alert.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Alert',
+  component: Alert,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = { args: { children: 'This is an informational message.', variant: 'info' } };
+export const Success: Story = { args: { children: 'Your changes have been saved.', variant: 'success' } };
+export const Warning: Story = { args: { children: 'Please review before continuing.', variant: 'warning' } };
+export const Error: Story = { args: { children: 'Something went wrong. Please try again.', variant: 'error' } };
+export const WithTitle: Story = {
+  args: { children: 'More details about the alert.', variant: 'info', title: 'Heads up' },
+};
+export const Dismissible: Story = {
+  args: { children: 'You can dismiss this alert.', variant: 'success', onDismiss: () => {} },
+};
+export const AllVariants: Story = {
+  args: { children: '' },
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 400 }}>
+        {(['info', 'success', 'warning', 'error'] as const).map(v => (
+          <Alert key={v} variant={v} title={v.charAt(0).toUpperCase() + v.slice(1)}>
+            This is a {v} alert.
+          </Alert>
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};

package/src/components/ui/Alert/Alert.native.tsx

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+interface AlertProps {
+  variant?: AlertVariant;
+  icon?: ReactNode;
+  title?: string;
+  children: ReactNode;
+  onDismiss?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  alert: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: spacing.m,
+    borderRadius: border.radius.s,
+    gap: spacing.xs,
+  },
+  icon: {
+    flexShrink: 0,
+    marginTop: 2,
+  },
+  content: {
+    flex: 1,
+    gap: spacing.xxs,
+  },
+  title: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.body,
+  },
+  body: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS,
+  },
+  dismiss: {
+    padding: spacing.xxs,
+    flexShrink: 0,
+  },
+});
+
+export function Alert({
+  variant = 'info',
+  icon,
+  title,
+  children,
+  onDismiss,
+  style,
+}: Readonly<AlertProps>) {
+  const { colors } = useTheme();
+  const isUrgent = variant === 'error' || variant === 'warning';
+
+  const variantColors: Record<AlertVariant, { bg: string; text: string }> = {
+    info:    { bg: colors.colorBlueSubtle,   text: colors.colorOnBlueSubtle },
+    success: { bg: colors.colorSuccessSubtle, text: colors.colorOnSuccessSubtle },
+    warning: { bg: colors.colorOrangeSubtle, text: colors.colorOnOrangeSubtle },
+    error:   { bg: colors.colorRedSubtle,    text: colors.colorOnRedSubtle },
+  };
+
+  const { bg, text } = variantColors[variant];
+
+  return (
+    <View
+      accessibilityRole={isUrgent ? 'alert' : 'none'}
+      accessibilityLiveRegion={isUrgent ? 'assertive' : 'polite'}
+      style={[styles.alert, { backgroundColor: bg }, style]}
+    >
+      {icon && <View style={styles.icon}>{icon}</View>}
+      <View style={styles.content}>
+        {title && <Text style={[styles.title, { color: text }]}>{title}</Text>}
+        <Text style={[styles.body, { color: text }]}>{children}</Text>
+      </View>
+      {onDismiss && (
+        <Pressable
+          onPress={onDismiss}
+          style={styles.dismiss}
+          accessibilityLabel="Dismiss alert"
+          accessibilityRole="button"
+          hitSlop={8}
+        >
+          <Text style={{ color: text, fontSize: 16 }}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Alert } from './Alert';
 
 const meta = {
-  title: 'UI/Alert',
+  title: 'React/UI/Alert',
   component: Alert,
   argTypes: {
     variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },

package/src/components/ui/Alert/Alert.tsx

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import css from './Alert.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface AlertProps {
+interface AlertProps extends WithClassName {
   variant?: 'info' | 'success' | 'warning' | 'error';
   icon?: ReactNode;
   title?: string;
   children: ReactNode;
   onDismiss?: () => void;
-  className?: string;
 }
 
 export function Alert({