@boostdev/design-system-components 1.0.2 → 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.module.css

@@ -8,9 +8,9 @@
     align-items: center;
     justify-content: center;
     margin: var(--bds-space_l) auto var(--bds-space_m);
-    background: var(--icon-wrapper-color, var(--bds-bg));
-    color: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
-    fill: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
+    background: var(--icon-wrapper-color, var(--bds-color_bg));
+    color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
+    fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
     position: relative;
     transition: var(--bds-animation_transition);
   }

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.module.css

@@ -7,13 +7,13 @@
   }
 
   .title {
-    color: var(--sectionHeader-title-color, var(--bds-on-bg));
+    color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
     margin: 0;
     font-family: var(--bds-font_family--body);
   }
 
   .subtitle {
-    color: var(--sectionHeader_subtitle-color, var(--bds-grey--strong));
+    color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
     margin: 0;
     font-family: var(--bds-font_family--body);
     font-weight: var(--bds-font_weight--medium);

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.module.css

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     border: var(--accordion_border, none);
-    --bdc_color: var(--bds-bg--subtle);
+    --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
 
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -13,7 +13,7 @@
   }
 
   .item {
-    border-bottom: 1px solid var(--bds-bg--subtle);
+    border-bottom: 1px solid var(--bds-color_bg--subtle);
   }
 
   .item:last-child {
@@ -34,7 +34,7 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     cursor: pointer;
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
@@ -53,7 +53,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .trigger:not(:disabled):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
@@ -79,7 +79,7 @@
 
   .panelContent {
     padding: 0 var(--bds-space_m) var(--bds-space_m);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }

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.module.css

@@ -5,35 +5,35 @@
         gap: var(--bds-space_s);
         padding: var(--bds-space_m);
         border-radius: var(--bds-border_radius--s);
-        border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-blue));
-        background-color: var(--alert_bg, var(--bds-blue--subtle));
-        color: var(--alert_text, var(--bds-on-blue--subtle));
+        border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-color_blue));
+        background-color: var(--alert_bg, var(--bds-color_blue--subtle));
+        color: var(--alert_text, var(--bds-color_on-blue--subtle));
         font-size: var(--bds-font_size--body);
         line-height: var(--bds-font_line-height--body);
     }
 
     .--variant_info {
-        --alert_bg: var(--bds-blue--subtle);
-        --alert_text: var(--bds-on-blue--subtle);
-        --alert_border: var(--bds-blue);
+        --alert_bg: var(--bds-color_blue--subtle);
+        --alert_text: var(--bds-color_on-blue--subtle);
+        --alert_border: var(--bds-color_blue);
     }
 
     .--variant_success {
-        --alert_bg: var(--bds-success--subtle);
-        --alert_text: var(--bds-on-success--subtle);
-        --alert_border: var(--bds-success);
+        --alert_bg: var(--bds-color_success--subtle);
+        --alert_text: var(--bds-color_on-success--subtle);
+        --alert_border: var(--bds-color_success);
     }
 
     .--variant_warning {
-        --alert_bg: var(--bds-orange--subtle);
-        --alert_text: var(--bds-on-orange--subtle);
-        --alert_border: var(--bds-warning);
+        --alert_bg: var(--bds-color_orange--subtle);
+        --alert_text: var(--bds-color_on-orange--subtle);
+        --alert_border: var(--bds-color_warning);
     }
 
     .--variant_error {
-        --alert_bg: rgb(from var(--bds-error) r g b / 12%);
-        --alert_text: var(--bds-on-bg);
-        --alert_border: var(--bds-error);
+        --alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
+        --alert_text: var(--bds-color_on-bg);
+        --alert_border: var(--bds-color_error);
     }
 
     .icon {

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>
+  ),
+};