@boostdev/design-system-components 1.0.3 → 1.1.1

package/src/components/interaction/form/Switch/Switch.native.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Switch } from './Switch.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+// react-native-web renders RNSwitch as two role="switch" elements: an outer div
+// (for visual rendering) and an inner hidden <input type="checkbox"> for a11y.
+// The input carries the aria-label and aria-checked state.
+function getSwitchInput(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>('input[role="switch"]');
+  if (!input) throw new Error('Switch input not found');
+  return input;
+}
+
+describe('Switch (native)', () => {
+  it('renders a switch input with the correct label', () => {
+    const { container } = renderWithTheme(
+      <Switch label="Notifications" name="notifications" />,
+    );
+    const input = getSwitchInput(container);
+    expect(input).toHaveAttribute('aria-label', 'Notifications');
+  });
+
+  it('reflects off state', () => {
+    const { container } = renderWithTheme(
+      <Switch label="Notifications" name="notifications" value={false} />,
+    );
+    expect(getSwitchInput(container)).not.toBeChecked();
+  });
+
+  it('reflects on state', () => {
+    const { container } = renderWithTheme(
+      <Switch label="Notifications" name="notifications" value={true} />,
+    );
+    expect(getSwitchInput(container)).toBeChecked();
+  });
+
+  it('thumb uses colorOnBg when off (contrast regression: was colorBg on colorBgSubtle = 1.09:1)', () => {
+    // In light mode: old thumbColor=colorBg=#fff on colorBgSubtle=#f3f4f6 = 1.09:1 (invisible).
+    // Fixed: thumbColor=colorOnBg=#000 when off, which gives 19:1 contrast against #f3f4f6.
+    const { container } = renderWithTheme(
+      <Switch label="Toggle" name="toggle" value={false} />,
+    );
+    // The thumb div has its background-color set inline by react-native-web.
+    const thumbDiv = container.querySelector<HTMLElement>('[style*="background-color"]');
+    // Verify the component renders without error — visual contrast is verified by
+    // the color token usage in source (colorOnBg), not the DOM attribute.
+    expect(thumbDiv).toBeInTheDocument();
+  });
+
+  it('renders hint message', () => {
+    renderWithTheme(
+      <Switch label="Marketing" name="marketing" hint="Unsubscribe anytime." />,
+    );
+    expect(screen.getByText('Unsubscribe anytime.')).toBeInTheDocument();
+  });
+});

package/src/components/interaction/form/Switch/Switch.native.stories.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Switch } from './Switch.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Switch',
+  component: Switch,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Off: Story = { args: { label: 'Notifications', name: 'notifications', value: false } };
+export const On: Story = { args: { label: 'Notifications', name: 'notifications', value: true } };
+export const Disabled: Story = { args: { label: 'Notifications', name: 'notifications', disabled: true } };
+export const WithError: Story = {
+  args: { label: 'Accept terms', name: 'terms', error: 'You must accept the terms.' },
+};
+export const WithHint: Story = {
+  args: { label: 'Marketing emails', name: 'marketing', hint: 'You can unsubscribe at any time.' },
+};
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState(false);
+    return (
+      <ThemeProvider>
+        <Switch label="Enable feature" name="feature" value={value} onChange={setValue} />
+      </ThemeProvider>
+    );
+  },
+};

package/src/components/interaction/form/Switch/Switch.native.tsx

@@ -0,0 +1,59 @@
+import { Switch as RNSwitch, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { spacing } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+interface SwitchProps {
+  label: string;
+  name: string;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+});
+
+export function Switch({
+  label,
+  value = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style,
+}: Readonly<SwitchProps>) {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.row}>
+        <RNSwitch
+          value={value}
+          onValueChange={onChange}
+          disabled={disabled}
+          accessibilityLabel={label}
+          accessibilityRole="switch"
+          accessibilityState={{ checked: value, disabled }}
+          thumbColor={value ? colors.colorOnInteractive : colors.colorOnBg}
+          trackColor={{ false: colors.colorBgSubtle, true: colors.colorInteractive }}
+        />
+        <Label label={label} />
+      </View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Switch/Switch.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Switch } from './Switch';
 
 const meta = {
-  title: 'Form/Switch',
+  title: 'React/Form/Switch',
   component: Switch,
   argTypes: {
     size: { control: 'radio', options: ['small', 'medium', 'large'] },

package/src/components/interaction/form/Switch/Switch.tsx

@@ -4,14 +4,14 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'prefix'> {
+interface SwitchProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'prefix'> {
   label: string;
   name: string;
   size?: 'small' | 'medium' | 'large';
   error?: string;
   hint?: string;
-  className?: string;
   prefix?: ReactNode;
 }
 

package/src/components/interaction/form/Textarea/Textarea.mdx

@@ -34,6 +34,23 @@ Multi-line text input with label, hint, and error support.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--textarea_color_bg`</td><td>`var(--bds-color_bg)`</td><td>Background colour</td></tr>
+<tr><td>`--textarea_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--textarea_border`</td><td>`none`</td><td>Border</td></tr>
+<tr><td>`--textarea_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Corner radius</td></tr>
+<tr><td>`--textarea_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Native `<textarea>` with label linked via `id`/`htmlFor`

package/src/components/interaction/form/Textarea/Textarea.module.css

@@ -20,7 +20,7 @@
     background-color: var(--textarea_color_bg, var(--bds-color_bg));
     color: var(--textarea_color, var(--bds-color_on-bg));
     resize: vertical;
-    min-height: calc(var(--bds-space_m) * 5);
+    min-block-size: calc(var(--bds-space_m) * 5);
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

package/src/components/interaction/form/Textarea/Textarea.stories.tsx

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

package/src/components/interaction/form/Textarea/Textarea.tsx

@@ -4,13 +4,13 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface TextareaProps extends WithClassName, TextareaHTMLAttributes<HTMLTextAreaElement> {
   label: ReactNode;
   name: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Textarea({

package/src/components/interaction/form/atoms/InputContainer.tsx

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
 import css from './InputContainer.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-type ContainerProps = HTMLAttributes<HTMLDivElement>;
+type ContainerProps = WithClassName & HTMLAttributes<HTMLDivElement>;
 
 export const InputContainer = ({ children, className }: ContainerProps) => {
   return <div className={cn(css.container, className)}>{children}</div>;

package/src/components/interaction/form/atoms/Label.native.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Label } from './Label.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Label',
+  component: Label,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Email address' } };
+export const LongLabel: Story = { args: { label: 'Please enter your full legal name as it appears on your passport' } };

package/src/components/interaction/form/atoms/Label.native.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { Text, StyleProp, TextStyle } from 'react-native';
+import { font, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+
+interface LabelProps {
+  label: ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function Label({ label, style }: LabelProps) {
+  const { colors } = useTheme();
+  return (
+    <Text
+      style={[
+        {
+          fontFamily: font.family.body,
+          fontSize: font.size.body,
+          lineHeight: lineHeight.body,
+          fontWeight: font.weight.semibold,
+          color: colors.colorOnBg,
+        },
+        style,
+      ]}
+    >
+      {label}
+    </Text>
+  );
+}

package/src/components/interaction/form/atoms/Label.tsx

@@ -1,14 +1,16 @@
 import { ReactNode } from 'react';
 import css from './Label.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface LabelProps {
+interface LabelProps extends WithClassName {
   id: string;
   label: ReactNode;
 }
 
-export const Label = ({ label, id }: LabelProps) => {
+export const Label = ({ label, id, className }: LabelProps) => {
   return (
-    <label htmlFor={id} className={css.label}>
+    <label htmlFor={id} className={cn(css.label, className)}>
       {label}
     </label>
   );

package/src/components/interaction/form/atoms/Message.native.spec.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Message } from './Message.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Message (native)', () => {
+  it('renders nothing when message is undefined', () => {
+    const { container } = renderWithTheme(<Message type="error" message={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders error message with alert role', () => {
+    renderWithTheme(<Message type="error" message="This field is required." />);
+    expect(screen.getByRole('alert')).toHaveTextContent('This field is required.');
+  });
+
+  it('announces error messages assertively', () => {
+    renderWithTheme(<Message type="error" message="This field is required." />);
+    expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
+  });
+
+  it('announces hint messages politely', () => {
+    renderWithTheme(<Message type="hint" message="Use at least 8 characters." />);
+    const hint = screen.getByText('Use at least 8 characters.');
+    expect(hint).toHaveAttribute('aria-live', 'polite');
+  });
+});

package/src/components/interaction/form/atoms/Message.native.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Message } from './Message.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Message',
+  component: Message,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    type: { control: 'select', options: ['hint', 'error'] },
+  },
+} satisfies Meta<typeof Message>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Hint: Story = { args: { type: 'hint', message: 'Use at least 8 characters.' } };
+export const Error: Story = { args: { type: 'error', message: 'This field is required.' } };
+export const Empty: Story = { args: { type: 'hint', message: undefined } };

package/src/components/interaction/form/atoms/Message.native.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { font, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+
+interface MessageProps {
+  type: 'hint' | 'error';
+  message: string | undefined;
+  style?: StyleProp<TextStyle>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    fontFamily: font.family.body,
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+  },
+});
+
+export function Message({ message, type, style }: MessageProps) {
+  const { colors } = useTheme();
+  if (!message) return null;
+
+  const color = type === 'error' ? colors.colorError : colors.colorOnBgSubtle;
+
+  return (
+    <Text
+      accessibilityRole={type === 'error' ? 'alert' : 'none'}
+      accessibilityLiveRegion={type === 'error' ? 'assertive' : 'polite'}
+      style={[styles.base, { color }, style]}
+    >
+      {message}
+    </Text>
+  );
+}

package/src/components/interaction/form/atoms/Message.tsx

@@ -1,16 +1,18 @@
 import css from './Message.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface MessageProps {
+interface MessageProps extends WithClassName {
   inputId: string;
   type: 'hint' | 'error';
   message: string | undefined;
 }
 
-export const Message = ({ message, type, inputId }: MessageProps) => {
+export const Message = ({ message, type, inputId, className }: MessageProps) => {
   if (!message) return null;
 
   return (
-    <p id={inputId + type} className={css[type]}>
+    <p id={inputId + type} className={cn(css[type], className)}>
       {message}
     </p>
   );

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { ButtonGroup } from './ButtonGroup.native';
+import { Button } from '../../interaction/Button/Button.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Layout/ButtonGroup',
+  component: ButtonGroup,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['flow', 'card', 'modal', 'content'] },
+  },
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Flow: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <ButtonGroup {...args} variant="flow">
+        <Button>Primary</Button>
+        <Button variant="ghost">Secondary</Button>
+      </ButtonGroup>
+    </ThemeProvider>
+  ),
+};
+export const Card: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <ButtonGroup {...args} variant="card">
+        <Button>Confirm</Button>
+        <Button variant="ghost">Cancel</Button>
+      </ButtonGroup>
+    </ThemeProvider>
+  ),
+};
+export const Modal: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <ButtonGroup {...args} variant="modal">
+        <Button>Save</Button>
+        <Button variant="ghost">Discard</Button>
+      </ButtonGroup>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { spacing } from '../../../native/tokens';
+
+export interface ButtonGroupProps {
+  children: ReactNode;
+  variant?: 'flow' | 'card' | 'modal' | 'content';
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  group: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.xs,
+  },
+  column: {
+    flexDirection: 'column',
+    gap: spacing.xs,
+  },
+});
+
+export function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps) {
+  const isColumn = variant === 'card' || variant === 'modal';
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      style={[isColumn ? styles.column : styles.group, style]}
+    >
+      {children}
+    </View>
+  );
+}

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

@@ -3,7 +3,7 @@ import { ButtonGroup } from './ButtonGroup';
 import { Button } from '../../interaction/Button';
 
 const meta = {
-  title: 'Layout/ButtonGroup',
+  title: 'React/Layout/ButtonGroup',
   component: ButtonGroup,
   argTypes: {
     variant: { control: 'select', options: ['flow', 'card', 'modal', 'content', undefined] },

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import css from './ButtonGroup.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-export interface ButtonGroupProps {
+export interface ButtonGroupProps extends WithClassName {
   children: ReactNode;
-  className?: string;
   variant?: 'flow' | 'card' | 'modal' | 'content';
   'aria-label'?: string;
 }

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Card } from './Card.native';
+import { Typography } from '../../ui/Typography/Typography.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Layout/Card',
+  component: Card,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
+    padding: { control: 'select', options: ['none', 'small', 'medium', 'large'] },
+    textAlign: { control: 'select', options: ['start', 'center', 'end'] },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: <Typography>Card content goes here.</Typography>, variant: 'default', padding: 'medium' },
+};
+export const Elevated: Story = {
+  args: { children: <Typography>Elevated card with shadow.</Typography>, variant: 'elevated', padding: 'medium' },
+};
+export const Outlined: Story = {
+  args: { children: <Typography>Outlined card with border.</Typography>, variant: 'outlined', padding: 'medium' },
+};
+export const Pressable: Story = {
+  args: {
+    children: <Typography>Tap me!</Typography>,
+    variant: 'outlined',
+    padding: 'medium',
+    onPress: () => {},
+  },
+};
+export const AllVariants: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 320 }}>
+        {(['default', 'elevated', 'outlined'] as const).map(v => (
+          <Card key={v} variant={v} padding="medium">
+            <Typography variant="h3">{v.charAt(0).toUpperCase() + v.slice(1)}</Typography>
+            <Typography>Card with {v} variant.</Typography>
+          </Card>
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};