@boostdev/design-system-components 1.0.3 → 1.1.0

package/src/components/ui/Avatar/Avatar.native.spec.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Avatar } from './Avatar.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Avatar (native)', () => {
+  describe('initials fallback', () => {
+    it('has image role and accessible label on the container', () => {
+      renderWithTheme(<Avatar name="John Doe" />);
+      expect(screen.getByRole('img', { name: 'John Doe' })).toBeInTheDocument();
+    });
+
+    it('derives initials from a two-word name', () => {
+      renderWithTheme(<Avatar name="John Doe" />);
+      expect(screen.getByText('JD')).toBeInTheDocument();
+    });
+
+    it('uses a single-word name as one initial', () => {
+      renderWithTheme(<Avatar name="Alice" />);
+      expect(screen.getByText('A')).toBeInTheDocument();
+    });
+
+    it('uses the alt prop as accessible label when provided', () => {
+      renderWithTheme(<Avatar name="John Doe" alt="Profile picture" />);
+      expect(screen.getByRole('img', { name: 'Profile picture' })).toBeInTheDocument();
+    });
+  });
+
+  describe('image variant', () => {
+    it('has image role and accessible label on the container', () => {
+      renderWithTheme(<Avatar src="https://example.com/avatar.jpg" alt="Jane Smith" />);
+      expect(screen.getByRole('img', { name: 'Jane Smith' })).toBeInTheDocument();
+    });
+
+    it('does not duplicate the accessible label (regression: duplicate label bug)', () => {
+      // Previously, both the outer View and the inner Image had accessibilityLabel={label},
+      // causing screen readers to announce the name twice.
+      renderWithTheme(<Avatar src="https://example.com/avatar.jpg" alt="Jane Smith" />);
+      // Only one element should have aria-label="Jane Smith".
+      const labeled = screen.getAllByLabelText('Jane Smith');
+      expect(labeled).toHaveLength(1);
+    });
+  });
+});

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Avatar } from './Avatar.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Avatar',
+  component: Avatar,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithInitials: Story = { args: { name: 'John Doe', size: 'medium' } };
+export const Small: Story = { args: { name: 'Jane Smith', size: 'small' } };
+export const Large: Story = { args: { name: 'Alex Brown', size: 'large' } };
+export const SingleName: Story = { args: { name: 'Alice', size: 'medium' } };
+export const AllSizes: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+        {(['small', 'medium', 'large'] as const).map(s => (
+          <Avatar key={s} name="John Doe" size={s} />
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,85 @@
+import { StyleSheet, View, Text, Image, StyleProp, ViewStyle } from 'react-native';
+import { font } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type AvatarSize = 'small' | 'medium' | 'large';
+
+interface AvatarProps {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: AvatarSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap: Record<AvatarSize, { container: number; fontSize: number }> = {
+  small:  { container: 32,  fontSize: font.size.bodyS },
+  medium: { container: 48,  fontSize: font.size.body },
+  large:  { container: 72,  fontSize: font.size.heading3 },
+};
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(word => word[0].toUpperCase())
+    .join('');
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 999,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  initials: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+  },
+});
+
+export function Avatar({ src, alt, name, size = 'medium', style }: Readonly<AvatarProps>) {
+  const { colors } = useTheme();
+  const { container, fontSize } = sizeMap[size];
+  const label = alt ?? name ?? 'User avatar';
+
+  if (src) {
+    return (
+      <View
+        style={[styles.container, { width: container, height: container }, style]}
+        accessibilityLabel={label}
+        accessibilityRole="image"
+      >
+        <Image source={{ uri: src }} style={styles.image} />
+      </View>
+    );
+  }
+
+  const initials = name ? getInitials(name) : '';
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { width: container, height: container, backgroundColor: colors.colorBlue },
+        style,
+      ]}
+      accessibilityLabel={label}
+      accessibilityRole="image"
+    >
+      <Text
+        style={[styles.initials, { fontSize, color: colors.colorOnBlue }]}
+        importantForAccessibility="no"
+        accessibilityElementsHidden={true}
+      >
+        {initials}
+      </Text>
+    </View>
+  );
+}

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

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

package/src/components/ui/Avatar/Avatar.tsx

@@ -1,12 +1,12 @@
 import css from './Avatar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface AvatarProps {
+interface AvatarProps extends WithClassName {
   src?: string;
   alt?: string;
   name?: string;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 function getInitials(name: string): string {

package/src/components/ui/Badge/Badge.mdx

@@ -50,8 +50,8 @@ Override these on a parent element to customise the badge without touching globa
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--badge_color`</td><td>`var(--bds-cta--subtle)`</td><td>Background colour</td></tr>
-<tr><td>`--badge_on-color`</td><td>`var(--bds-on-cta--subtle)`</td><td>Text colour</td></tr>
+<tr><td>`--badge_bg`</td><td>`var(--bds-color_blue)`</td><td>Background colour</td></tr>
+<tr><td>`--badge_text`</td><td>`var(--bds-color_on-blue)`</td><td>Text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Badge } from './Badge.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Badge',
+  component: Badge,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'success', 'error', 'warning'] },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = { args: { children: 'Primary', variant: 'primary' } };
+export const Secondary: Story = { args: { children: 'Secondary', variant: 'secondary' } };
+export const Success: Story = { args: { children: 'Success', variant: 'success' } };
+export const Error: Story = { args: { children: 'Error', variant: 'error' } };
+export const Warning: Story = { args: { children: 'Warning', variant: 'warning' } };
+export const AllVariants: Story = {
+  args: { children: '' },
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        {(['primary', 'secondary', 'success', 'error', 'warning'] as const).map(v => (
+          <Badge key={v} variant={v}>{v}</Badge>
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+
+interface BadgeProps {
+  children: ReactNode;
+  variant?: BadgeVariant;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.xs,
+    borderRadius: 999,
+  },
+  text: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: font.size.bodyS,
+  },
+});
+
+export function Badge({ children, variant = 'primary', style }: BadgeProps) {
+  const { colors } = useTheme();
+
+  const variantColors: Record<BadgeVariant, { bg: string; text: string }> = {
+    primary:   { bg: colors.colorInteractive,  text: colors.colorOnInteractive },
+    secondary: { bg: colors.colorBgSubtle,     text: colors.colorOnBgSubtle },
+    success:   { bg: colors.colorSuccess,      text: colors.colorOnSuccess },
+    error:     { bg: colors.colorError,        text: colors.colorOnError },
+    warning:   { bg: colors.colorWarning,      text: colors.colorOnWarning },
+  };
+
+  const { bg, text } = variantColors[variant];
+
+  return (
+    <View style={[styles.badge, { backgroundColor: bg }, style]}>
+      <Text style={[styles.text, { color: text }]}>{children}</Text>
+    </View>
+  );
+}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Badge } from './Badge';
 
 const meta = {
-  title: 'UI/Badge',
+  title: 'React/UI/Badge',
   component: Badge,
   argTypes: {
     variant: { control: 'select', options: ['primary', 'secondary', 'success', 'error', 'warning'] },

package/src/components/ui/Badge/Badge.tsx

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import css from './Badge.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface BadgeProps {
+interface BadgeProps extends WithClassName {
   children: ReactNode;
   variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-  className?: string;
 }
 
 export function Badge({ children, variant = 'primary', className }: BadgeProps) {

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

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

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,14 +1,14 @@
 import css from './Breadcrumb.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface BreadcrumbItem {
   label: string;
   href?: string;
 }
 
-interface BreadcrumbProps {
+interface BreadcrumbProps extends WithClassName {
   items: BreadcrumbItem[];
-  className?: string;
 }
 
 export function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>) {

package/src/components/ui/Calendar/Calendar.mdx

@@ -26,6 +26,22 @@ Date picker calendar grid. Use standalone or as the popover content inside a dat
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--calendar_border`</td><td>`none`</td><td>Container border</td></tr>
+<tr><td>`--calendar_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+<tr><td>`--calendar_shadow`</td><td>`var(--bds-shadow_s)`</td><td>Container box shadow</td></tr>
+<tr><td>`--calendar_today-border`</td><td>`none`</td><td>Border on today's date cell</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Grid uses `role="grid"` with `role="gridcell"` for each day

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Calendar } from './Calendar';
 
 const meta = {
-  title: 'UI/Calendar',
+  title: 'React/UI/Calendar',
   component: Calendar,
   decorators: [
     Story => (

package/src/components/ui/Calendar/Calendar.tsx

@@ -1,6 +1,7 @@
 import { useState, useId, KeyboardEvent } from 'react';
 import css from './Calendar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const DAY_LABELS: Record<string, string> = {
@@ -12,13 +13,12 @@ const MONTHS = [
   'July', 'August', 'September', 'October', 'November', 'December',
 ];
 
-interface CalendarProps {
+interface CalendarProps extends WithClassName {
   value?: Date;
   defaultValue?: Date;
   min?: Date;
   max?: Date;
   onChange?: (date: Date) => void;
-  className?: string;
 }
 
 function isSameDay(a: Date, b: Date): boolean {

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

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

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,11 +1,11 @@
 import { ReactNode, useRef, useId } from 'react';
 import css from './Carousel.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface CarouselProps {
+interface CarouselProps extends WithClassName {
   items: ReactNode[];
   label: string;
-  className?: string;
 }
 
 export function Carousel({ items, label, className }: Readonly<CarouselProps>) {

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

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

package/src/components/ui/Collapsible/Collapsible.tsx

@@ -1,8 +1,9 @@
 import { HTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 import css from './Collapsible.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
+export interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
   /** The trigger label — always visible */
   summary: ReactNode;
   /** The content revealed when expanded */
@@ -18,7 +19,6 @@ export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement
    * (native <details name="…"> behaviour).
    */
   name?: string;
-  className?: string;
 }
 
 export function Collapsible({

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

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

package/src/components/ui/DescriptionList/DescriptionList.tsx

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
 import css from './DescriptionList.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface DescriptionItem {
   term: ReactNode;
   details: ReactNode | ReactNode[];
 }
 
-interface DescriptionListProps {
+interface DescriptionListProps extends WithClassName {
   items: DescriptionItem[];
   layout?: 'stacked' | 'inline';
-  className?: string;
 }
 
 export function DescriptionList({ items, layout = 'stacked', className }: Readonly<DescriptionListProps>) {

package/src/components/ui/Link/Link.mdx

@@ -38,6 +38,20 @@ Styled anchor element with three visual variants. Renders as `<a>` by default, b
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--link_color`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Link text colour</td></tr>
+<tr><td>`--link_color-hover`</td><td>`var(--bds-color_blue--strong)`</td><td>Link text colour on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - External links add `target="_blank"` with `rel="noopener noreferrer"` and a visually-hidden "(opens in new tab)" label

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from './Link';
 
 const meta = {
-  title: 'UI/Link',
+  title: 'React/UI/Link',
   component: Link,
   argTypes: {
     variant: { control: 'radio', options: ['default', 'subtle', 'standalone'] },

package/src/components/ui/Link/Link.tsx

@@ -1,14 +1,14 @@
 import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import css from './Link.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-type LinkOwnProps<T extends ElementType> = {
+type LinkOwnProps<T extends ElementType> = WithClassName & {
   as?: T;
   children: ReactNode;
   variant?: 'default' | 'subtle' | 'standalone';
   external?: boolean;
   externalLabel?: string;
-  className?: string;
 };
 
 type LinkProps<T extends ElementType = 'a'> = LinkOwnProps<T> &

package/src/components/ui/Loading/Loading.native.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Loading } from './Loading.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Loading (native)', () => {
+  it('has progressbar role', () => {
+    renderWithTheme(<Loading />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('has default accessible label "Loading"', () => {
+    renderWithTheme(<Loading />);
+    expect(screen.getByRole('progressbar', { name: 'Loading' })).toBeInTheDocument();
+  });
+
+  it('accepts a custom accessibilityLabel', () => {
+    renderWithTheme(<Loading accessibilityLabel="Laden…" />);
+    expect(screen.getByRole('progressbar', { name: 'Laden…' })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Loading } from './Loading.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Loading',
+  component: Loading,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof Loading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = { args: { size: 'small' } };
+export const Medium: Story = { args: { size: 'medium' } };
+export const Large: Story = { args: { size: 'large' } };
+export const AllSizes: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+        <Loading size="small" />
+        <Loading size="medium" />
+        <Loading size="large" />
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,29 @@
+import { ActivityIndicator, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../native/ThemeContext';
+
+type LoadingSize = 'small' | 'medium' | 'large';
+
+interface LoadingProps {
+  size?: LoadingSize;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const rnSize: Record<LoadingSize, 'small' | 'large'> = {
+  small:  'small',
+  medium: 'large',
+  large:  'large',
+};
+
+export function Loading({ size = 'medium', accessibilityLabel = 'Loading', style }: LoadingProps) {
+  const { colors } = useTheme();
+  return (
+    <ActivityIndicator
+      size={rnSize[size]}
+      color={colors.colorInteractive}
+      style={style}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+}

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

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

package/src/components/ui/Loading/Loading.tsx

@@ -1,9 +1,9 @@
 import css from './Loading.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface LoadingProps {
+interface LoadingProps extends WithClassName {
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 export function Loading({ size = 'medium', className }: LoadingProps) {