@boostdev/design-system-components 0.1.15 → 0.1.17

package/src/components/interaction/form/Switch/Switch.spec.tsx

@@ -45,4 +45,27 @@ describe('Switch', () => {
     render(<Switch label="Disabled" name="disabled" disabled />);
     expect(screen.getByRole('switch')).toBeDisabled();
   });
+
+  it('renders a prefix label when provided', () => {
+    render(<Switch label="On" name="theme" prefix="Off" />);
+    expect(screen.getByText('Off')).toBeInTheDocument();
+    expect(screen.getByText('On')).toBeInTheDocument();
+  });
+
+  it('associates error message via aria-describedby', () => {
+    render(<Switch label="Accept" name="accept" error="Required" />);
+    const input = screen.getByRole('switch');
+    const error = screen.getByText('Required');
+    expect(input).toHaveAttribute('aria-describedby', expect.stringContaining(error.id));
+  });
+
+  it('renders small size', () => {
+    render(<Switch label="Toggle" name="size-s" size="small" />);
+    expect(screen.getByRole('switch').closest('.switchGroup')).toHaveClass('--size_small');
+  });
+
+  it('renders large size', () => {
+    render(<Switch label="Toggle" name="size-l" size="large" />);
+    expect(screen.getByRole('switch').closest('.switchGroup')).toHaveClass('--size_large');
+  });
 });

package/src/components/interaction/form/Switch/Switch.stories.tsx

@@ -19,6 +19,14 @@ export const WithError: Story = { args: { label: 'Required toggle', name: 'requi
 export const Disabled: Story = { args: { label: 'Unavailable', name: 'unavailable', disabled: true } };
 export const DisabledChecked: Story = { args: { label: 'Always on', name: 'always-on', defaultChecked: true, disabled: true } };
 
+export const WithPrefix: Story = {
+  args: {
+    label: 'On',
+    name: 'theme',
+    prefix: 'Off',
+  },
+};
+
 export const AllSizes: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>

package/src/components/interaction/form/Switch/Switch.tsx

@@ -1,17 +1,18 @@
-import { InputHTMLAttributes, useId } from 'react';
+import {InputHTMLAttributes, ReactNode, useId} from 'react';
 import css from './Switch.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'prefix'> {
   label: string;
   name: string;
   size?: 'small' | 'medium' | 'large';
   error?: string;
   hint?: string;
   className?: string;
+  prefix?: ReactNode;
 }
 
 export function Switch({
@@ -21,6 +22,7 @@ export function Switch({
   error,
   hint,
   className,
+  prefix,
   ...props
 }: Readonly<SwitchProps>) {
   const id = name + useId();
@@ -31,6 +33,7 @@ export function Switch({
   return (
     <InputContainer className={cn(css.switchGroup, css[`--size_${size}`], className)}>
       <div className={css.inputWrapper}>
+        {prefix && <Label id={id} label={prefix}/>}
         <div className={css.trackWrapper}>
           <input
             type="checkbox"

package/src/components/interaction/form/atoms/Label.module.css

@@ -3,7 +3,6 @@
     display: flex;
     align-items: center;
     font-family: var(--font_family--body);
-    font-weight: var(--font_weight--semibold);
     color: var(--color_on-bg);
     cursor: pointer;
   }

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

@@ -14,10 +14,6 @@
     color: var(--color_on-bg);
   }
 
-  .label {
-    font-weight: var(--font_weight--semibold);
-  }
-
   .value {
     font-variant-numeric: tabular-nums;
   }

package/src/index.ts

@@ -48,6 +48,8 @@ export { FileInput } from './components/interaction/form/FileInput';
 export { FormInput } from './components/interaction/form/FormInput';
 export { NumberInput } from './components/interaction/form/NumberInput';
 export { Radio } from './components/interaction/form/Radio';
+export { SegmentedControl } from './components/interaction/form/SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlOption } from './components/interaction/form/SegmentedControl';
 export { Select } from './components/interaction/form/Select';
 export type { SelectOption } from './components/interaction/form/Select';
 export { Slider } from './components/interaction/form/Slider';

package/src/stories/Introduction.mdx

@@ -55,8 +55,8 @@ import {Card} from "../components/layout/Card/index.ts";
             <strong>UI</strong>
             <div className="cardContent">
                 Badge · Typography · Alert · Avatar · Loading · Skeleton · Separator · Tooltip · Progress ·
-                ProgressCircle · Tabs · Breadcrumb · Accordion · Pagination · Link · Table · DescriptionList ·
-                NotificationBanner · SkipLink · Carousel · Calendar
+                ProgressCircle · Tabs · Breadcrumb · Accordion · Collapsible · Pagination · Link · Table ·
+                DescriptionList · NotificationBanner · SkipLink · Carousel · Calendar
             </div>
         </Card>
 
@@ -70,7 +70,8 @@ import {Card} from "../components/layout/Card/index.ts";
         <Card className="card">
             <strong>Form</strong>
             <div className="cardContent">
-                FormInput · Checkbox · Radio · Switch · Select · Textarea · Slider · NumberInput · FileInput · Combobox
+                FormInput · Checkbox · Radio · Switch · SegmentedControl · Select · Textarea · Slider ·
+                NumberInput · FileInput · Combobox
             </div>
         </Card>