@boostdev/design-system-components 0.1.15 → 0.1.16

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;
   }