@boostdev/design-system-components 1.0.3 → 1.1.0

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { NotificationBanner } from './NotificationBanner.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/NotificationBanner',
+  component: NotificationBanner,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+  },
+} satisfies Meta<typeof NotificationBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = { args: { children: 'New update available.', variant: 'info' } };
+export const Success: Story = { args: { children: 'Changes saved successfully.', variant: 'success' } };
+export const Warning: Story = { args: { children: 'Your session will expire soon.', variant: 'warning' } };
+export const Error: Story = { args: { children: 'Failed to load data. Please retry.', variant: 'error' } };
+export const Dismissible: Story = {
+  args: { children: 'You can dismiss this notification.', variant: 'info', onDismiss: () => {} },
+};
+export const AllVariants: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {(['info', 'success', 'warning', 'error'] as const).map(v => (
+          <NotificationBanner key={v} variant={v}>
+            {v.charAt(0).toUpperCase() + v.slice(1)} notification
+          </NotificationBanner>
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+
+interface NotificationBannerProps {
+  variant?: BannerVariant;
+  children: ReactNode;
+  action?: ReactNode;
+  onDismiss?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    gap: spacing.xs,
+  },
+  content: {
+    flex: 1,
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS,
+  },
+  dismiss: {
+    padding: spacing.xxs,
+    flexShrink: 0,
+  },
+});
+
+export function NotificationBanner({
+  variant = 'info',
+  children,
+  action,
+  onDismiss,
+  style,
+}: Readonly<NotificationBannerProps>) {
+  const { colors } = useTheme();
+  const isUrgent = variant === 'error' || variant === 'warning';
+
+  const variantColors: Record<BannerVariant, { 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.banner, { backgroundColor: bg }, style]}
+    >
+      <Text style={[styles.content, { color: text }]}>{children}</Text>
+      {action}
+      {onDismiss && (
+        <Pressable
+          onPress={onDismiss}
+          style={styles.dismiss}
+          accessibilityLabel="Dismiss notification"
+          accessibilityRole="button"
+          hitSlop={8}
+        >
+          <Text style={{ color: text, fontSize: 16 }}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}

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

@@ -3,7 +3,7 @@ import { NotificationBanner } from './NotificationBanner';
 import { Button } from '../../interaction/Button/Button';
 
 const meta = {
-  title: 'UI/NotificationBanner',
+  title: 'React/UI/NotificationBanner',
   component: NotificationBanner,
 } satisfies Meta<typeof NotificationBanner>;
 

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

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

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

@@ -51,7 +51,7 @@
   @media (hover: hover) and (pointer: fine) {
     .button:not(:disabled, .--active):hover {
       --btn_bg:    var(--bds-color_bg--subtle);
-      --btn_color: var(--bds-color_interactive);
+      --btn_color: var(--bds-color_interactive_on-bg);
     }
   }
 

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Pagination } from './Pagination';
 
 const meta = {
-  title: 'UI/Pagination',
+  title: 'React/UI/Pagination',
   component: Pagination,
 } satisfies Meta<typeof Pagination>;
 

package/src/components/ui/Pagination/Pagination.tsx

@@ -1,11 +1,11 @@
 import css from './Pagination.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface PaginationProps {
+interface PaginationProps extends WithClassName {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
-  className?: string;
 }
 
 function getPageRange(current: number, total: number): (number | '...')[] {

package/src/components/ui/Progress/Progress.mdx

@@ -40,7 +40,7 @@ Horizontal progress bar communicating completion towards a goal.
 <tr><th>Variable</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--bds-active)`)</td></tr>
+<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--bdc-color_active)`)</td></tr>
 <tr><td>`--progress_color-track`</td><td>Empty track colour</td></tr>
 </tbody>
 </table>

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

@@ -32,7 +32,7 @@
 
   .fill {
     height: 100%;
-    background-color: var(--progress_color-active, var(--bds-color_green));
+    background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: 999px;
     transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Progress } from './Progress.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Progress',
+  component: Progress,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <div style={{ width: 300 }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 60, label: 'Progress' } };
+export const WithLabel: Story = { args: { value: 40, label: 'Loading', showLabel: true } };
+export const Small: Story = { args: { value: 70, label: 'Small progress', size: 'small' } };
+export const Large: Story = { args: { value: 50, label: 'Large progress', size: 'large', showLabel: true } };
+export const Complete: Story = { args: { value: 100, label: 'Complete', showLabel: true } };
+export const Empty: Story = { args: { value: 0, label: 'Not started', showLabel: true } };

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

@@ -0,0 +1,84 @@
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type ProgressSize = 'small' | 'medium' | 'large';
+
+interface ProgressProps {
+  value: number;
+  max?: number;
+  label: string;
+  showLabel?: boolean;
+  size?: ProgressSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+const trackHeight: Record<ProgressSize, number> = {
+  small:  4,
+  medium: 8,
+  large:  12,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  labelRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: spacing.xxs,
+  },
+  labelText: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS,
+  },
+  track: {
+    width: '100%',
+    borderRadius: border.radius.xs,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: border.radius.xs,
+  },
+});
+
+export function Progress({
+  value,
+  max = 100,
+  label,
+  showLabel = false,
+  size = 'medium',
+  style,
+}: Readonly<ProgressProps>) {
+  const { colors } = useTheme();
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+  const height = trackHeight[size];
+
+  return (
+    <View style={[styles.container, style]}>
+      {showLabel && (
+        <View style={styles.labelRow}>
+          <Text style={[styles.labelText, { color: colors.colorOnBg }]}>{label}</Text>
+          <Text style={[styles.labelText, { color: colors.colorOnBgSubtle }]}>
+            {Math.round(percentage)}%
+          </Text>
+        </View>
+      )}
+      <View
+        style={[styles.track, { height, backgroundColor: colors.colorBgSubtle }]}
+        accessibilityRole="progressbar"
+        accessibilityLabel={label}
+        accessibilityValue={{ min: 0, max, now: value }}
+      >
+        <View
+          style={[
+            styles.fill,
+            { width: `${percentage}%`, backgroundColor: colors.colorInteractive },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}

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

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

package/src/components/ui/Progress/Progress.tsx

@@ -1,13 +1,13 @@
 import css from './Progress.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface ProgressProps {
+interface ProgressProps extends WithClassName {
   value: number;
   max?: number;
   label: string;
   showLabel?: boolean;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 export function Progress({

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

@@ -15,7 +15,7 @@
   }
 
   .fill {
-    stroke: var(--progressCircle_color-active, var(--bds-color_green));
+    stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 

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

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

package/src/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,13 +1,13 @@
 import css from './ProgressCircle.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface ProgressCircleProps {
+interface ProgressCircleProps extends WithClassName {
   value: number;
   max?: number;
   label: string;
   showValue?: boolean;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
 }
 
 const SIZE_PX = { small: 40, medium: 64, large: 96 };

package/src/components/ui/Separator/Separator.mdx

@@ -23,6 +23,20 @@ Visual divider between content sections. Renders a semantic `<hr>` (horizontal)
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--separator_color`</td><td>`var(--bds-color_on-bg)`</td><td>Line colour</td></tr>
+<tr><td>`--separator_thickness`</td><td>`1px`</td><td>Line thickness (height for horizontal, width for vertical)</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Horizontal variant uses `<hr>` — natively announces a thematic break to screen readers

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Separator } from './Separator.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Separator',
+  component: Separator,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <div style={{ width: 300 }}>
+        <Separator {...args} orientation="horizontal" />
+      </div>
+    </ThemeProvider>
+  ),
+};
+
+export const Vertical: Story = {
+  render: (args) => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', height: 60, alignItems: 'stretch' }}>
+        <span>Left</span>
+        <div style={{ display: 'flex', margin: '0 8px' }}>
+          <Separator {...args} orientation="vertical" />
+        </div>
+        <span>Right</span>
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,32 @@
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    height: StyleSheet.hairlineWidth,
+    width: '100%',
+  },
+  vertical: {
+    width: StyleSheet.hairlineWidth,
+    alignSelf: 'stretch',
+  },
+});
+
+export function Separator({ orientation = 'horizontal', style }: Readonly<SeparatorProps>) {
+  const { colors } = useTheme();
+  return (
+    <View
+      accessibilityRole="none"
+      style={[
+        orientation === 'vertical' ? styles.vertical : styles.horizontal,
+        { backgroundColor: colors.colorBgSubtle },
+        style,
+      ]}
+    />
+  );
+}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Separator } from './Separator';
 
 const meta = {
-  title: 'UI/Separator',
+  title: 'React/UI/Separator',
   component: Separator,
   argTypes: {
     orientation: { control: 'radio', options: ['horizontal', 'vertical'] },

package/src/components/ui/Separator/Separator.tsx

@@ -1,9 +1,9 @@
 import css from './Separator.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface SeparatorProps {
+interface SeparatorProps extends WithClassName {
   orientation?: 'horizontal' | 'vertical';
-  className?: string;
 }
 
 export function Separator({ orientation = 'horizontal', className }: Readonly<SeparatorProps>) {

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Skeleton } from './Skeleton.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Skeleton',
+  component: Skeleton,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  render: (args) => <Skeleton {...args} style={{ width: 200, height: 16 }} />,
+};
+export const Avatar: Story = {
+  render: (args) => <Skeleton {...args} style={{ width: 48, height: 48, borderRadius: 999 }} />,
+};
+export const Card: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: 280 }}>
+        <Skeleton style={{ width: 280, height: 160 }} />
+        <Skeleton style={{ width: 200, height: 16 }} />
+        <Skeleton style={{ width: 140, height: 14 }} />
+      </div>
+    </ThemeProvider>
+  ),
+};

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

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface SkeletonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  skeleton: {
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+});
+
+export function Skeleton({ style }: SkeletonProps) {
+  const { colors } = useTheme();
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const anim = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1,   duration: 700, useNativeDriver: true }),
+      ]),
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        styles.skeleton,
+        { backgroundColor: colors.colorBgSubtle, opacity },
+        style,
+      ]}
+    />
+  );
+}

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

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

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -1,9 +1,8 @@
 import { cn } from '@boostdev/design-system-foundation';
 import css from './Skeleton.module.css';
+import type { WithClassName } from '../../../types';
 
-interface SkeletonProps {
-  className?: string;
-}
+type SkeletonProps = WithClassName;
 
 export function Skeleton({ className }: SkeletonProps) {
   return (

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

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

package/src/components/ui/SkipLink/SkipLink.tsx

@@ -1,13 +1,15 @@
 import css from './SkipLink.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface SkipLinkProps {
+interface SkipLinkProps extends WithClassName {
   href?: string;
   children?: string;
 }
 
-export function SkipLink({ href = '#main', children = 'Skip to main content' }: SkipLinkProps) {
+export function SkipLink({ href = '#main', children = 'Skip to main content', className }: SkipLinkProps) {
   return (
-    <a href={href} className={css.skipLink}>
+    <a href={href} className={cn(css.skipLink, className)}>
       {children}
     </a>
   );

package/src/components/ui/Table/Table.mdx

@@ -30,6 +30,20 @@ Data table with optional sortable columns and caption.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--table_border`</td><td>`none`</td><td>Container border</td></tr>
+<tr><td>`--table_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Wraps in `<table>` with `<thead>` and `<tbody>`

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

@@ -5,7 +5,7 @@ import { Table } from './Table';
 type User = { name: string; role: string; status: string; joined: string };
 
 const meta = {
-  title: 'UI/Table',
+  title: 'React/UI/Table',
   component: Table,
 } satisfies Meta<typeof Table<User>>;