@boostdev/design-system-components 1.0.3 → 1.1.1

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

@@ -9,7 +9,7 @@
   .track {
     display: flex;
     gap: var(--bds-space_m);
-    overflow-x: auto;
+    overflow-inline: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
     flex: 1;
@@ -30,8 +30,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
     border-radius: 50%;
     background-color: var(--bds-color_bg);
     color: var(--bds-color_on-bg);
@@ -48,8 +48,8 @@
   }
 
   .navBtn svg {
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
   }
 
   .navBtn:focus-visible {

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

@@ -48,10 +48,10 @@
 
   /* Chevron drawn with CSS borders */
   .icon {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-right: 2px solid currentcolor;
-    border-bottom: 2px solid currentcolor;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentcolor;
+    border-block-end: 2px solid currentcolor;
     transform: rotate(45deg);
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);

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

@@ -49,8 +49,8 @@
 
   .externalLabel {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;

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

@@ -6,23 +6,23 @@
   }
 
   .spinner {
-    width: 2.5em;
-    height: 2.5em;
+    inline-size: 2.5em;
+    block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
-    border-top: 4px solid var(--bds-color_interactive);
+    border-block-start: 4px solid var(--bds-color_interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
 
   .--size_small .spinner {
-    width: 1.5em;
-    height: 1.5em;
+    inline-size: 1.5em;
+    block-size: 1.5em;
     border-width: 2px;
   }
 
   .--size_large .spinner {
-    width: 4em;
-    height: 4em;
+    inline-size: 4em;
+    block-size: 4em;
     border-width: 6px;
   }
 }

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

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

@@ -9,7 +9,7 @@
     border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
-    width: 100%;
+    inline-size: 100%;
   }
 
   .--variant_info {
@@ -62,8 +62,8 @@
   }
 
   .dismiss svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 
   .dismiss:focus-visible {

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

@@ -18,8 +18,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
-    height: 2.25rem;
+    min-inline-size: 2.25rem;
+    block-size: 2.25rem;
     padding-inline: var(--bds-space_xs);
     border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
@@ -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);
     }
   }
 
@@ -62,16 +62,16 @@
   }
 
   .button.--nav svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 
   .ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
-    height: 2.25rem;
+    min-inline-size: 2.25rem;
+    block-size: 2.25rem;
     color: var(--bds-color_on-bg--subtle);
     font-size: var(--bds-font_size--body);
     user-select: none;

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

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
-    width: 100%;
+    inline-size: 100%;
   }
 
   .labelRow {
@@ -19,8 +19,8 @@
   }
 
   .track {
-    width: 100%;
-    height: var(--progress_height, var(--bds-space_xs));
+    inline-size: 100%;
+    block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--bds-color_bg--subtle);
     border-radius: 999px;
     overflow: hidden;
@@ -31,10 +31,10 @@
   .track.--size_large  { --progress_height: var(--bds-space_s); }
 
   .fill {
-    height: 100%;
-    background-color: var(--progress_color-active, var(--bds-color_green));
+    block-size: 100%;
+    background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: 999px;
-    transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   @media (prefers-reduced-motion: reduce) {