@boostdev/design-system-components 1.0.2 → 1.1.0

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({

package/src/components/ui/Avatar/Avatar.module.css

@@ -11,8 +11,8 @@
   }
 
   .avatar.--fallback {
-    background-color: var(--avatar_bg, var(--bds-blue));
-    color: var(--avatar_text, var(--bds-on-blue));
+    background-color: var(--avatar_bg, var(--bds-color_blue));
+    color: var(--avatar_text, var(--bds-color_on-blue));
     font-weight: var(--bds-font_weight--semibold);
   }
 

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

@@ -9,32 +9,32 @@
     font-weight: var(--bds-font_weight--semibold);
     line-height: 1;
     white-space: nowrap;
-    background-color: var(--badge_bg, var(--bds-blue));
-    color: var(--badge_text, var(--bds-on-blue));
+    background-color: var(--badge_bg, var(--bds-color_blue));
+    color: var(--badge_text, var(--bds-color_on-blue));
   }
 
   .--variant_primary {
-    --badge_bg:   var(--bds-interactive);
-    --badge_text: var(--bds-on-interactive);
+    --badge_bg:   var(--bds-color_interactive);
+    --badge_text: var(--bds-color_on-interactive);
   }
 
   .--variant_secondary {
-    --badge_bg:   var(--bds-bg);
-    --badge_text: var(--bds-on-bg);
+    --badge_bg:   var(--bds-color_bg);
+    --badge_text: var(--bds-color_on-bg);
   }
 
   .--variant_success {
-    --badge_bg:   var(--bds-success);
-    --badge_text: var(--bds-on-success);
+    --badge_bg:   var(--bds-color_success);
+    --badge_text: var(--bds-color_on-success);
   }
 
   .--variant_error {
-    --badge_bg:   var(--bds-error);
-    --badge_text: var(--bds-on-error);
+    --badge_bg:   var(--bds-color_error);
+    --badge_text: var(--bds-color_on-error);
   }
 
   .--variant_warning {
-    --badge_bg:   var(--bds-warning);
-    --badge_text: var(--bds-on-warning);
+    --badge_bg:   var(--bds-color_warning);
+    --badge_text: var(--bds-color_on-warning);
   }
 }

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

@@ -39,12 +39,12 @@
   }
 
   .separator {
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
 
   .current {
-    color: var(--bds-on-bg--subtle);
+    color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
   }
 }

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

@@ -3,9 +3,9 @@
     display: inline-flex;
     flex-direction: column;
     gap: var(--bds-space_s);
-    background-color: var(--bds-bg);
+    background-color: var(--bds-color_bg);
     border: var(--calendar_border, none);
-    --bdc_color: var(--bds-bg--subtle);
+    --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--m);
 
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -25,7 +25,7 @@
   .monthYear {
     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);
   }
 
   .navBtn {
@@ -37,7 +37,7 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
   }
 
@@ -53,7 +53,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
@@ -66,7 +66,7 @@
   .weekday {
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     text-align: center;
     padding-block-end: var(--bds-space_xs);
   }
@@ -84,7 +84,7 @@
     aspect-ratio: 1;
     border-radius: 50%;
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     cursor: pointer;
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
@@ -97,14 +97,14 @@
 
   @media (hover: hover) and (pointer: fine) {
     .day:not(.disabled, .selected):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 
   .today {
     font-weight: var(--bds-font_weight--semibold);
 
-    --bdc_color: var(--bds-interactive);
+    --bdc_color: var(--bds-color_interactive);
 
     border: var(--calendar_today-border, none);
     outline: var(--bdc-outline_width) solid var(--bdc_color);
@@ -112,8 +112,8 @@
   }
 
   .selected {
-    background-color: var(--bds-interactive);
-    color: var(--bds-on-interactive);
+    background-color: var(--bds-color_interactive);
+    color: var(--bds-color_on-interactive);
     font-weight: var(--bds-font_weight--semibold);
   }
 

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 => (