@arbor-education/design-system.components 3.0.2 → 3.2.0

package/src/components/tabs/TabsItem.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { TabsItem } from './TabsItem.js';
 import { Tabs } from './Tabs.js';
-import { allowedIcons } from 'Components/icon/allowedIcons';
+import type { IconName } from 'Components/icon/allowedIcons';
 
 // ---------------------------------------------------------------------------
 // Docs page
@@ -93,10 +93,14 @@ const meta = {
     },
     iconName: {
       control: 'select',
-      options: Object.keys(allowedIcons),
-      description: 'Optional icon rendered before the label text at 16 px.',
+      // Any Icon name works; these are the ones that read well in a tab.
+      options: [
+        'house', 'user', 'guardians', 'staff', 'date', 'sheet', 'table', 'settings',
+        'chart-column-increasing', 'clipboard-list', 'mail', 'archive',
+      ] satisfies IconName[],
+      description: 'Optional icon rendered before the label text at 16 px. Accepts any `IconName`.',
       table: {
-        type: { summary: 'keyof allowedIcons' },
+        type: { summary: 'IconName' },
         defaultValue: { summary: 'undefined' },
       },
     },

package/src/components/tabs/TabsItem.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import type { allowedIcons } from 'Components/icon/allowedIcons';
+import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
 
 type TabsItemProps = {
   active?: boolean;
-  iconName?: keyof typeof allowedIcons;
+  iconName?: IconName;
 } & (
   | { tabElement?: 'button'; tabElementProps?: ButtonHTMLAttributes<HTMLButtonElement> }
   | { tabElement?: 'link'; tabElementProps?: AnchorHTMLAttributes<HTMLAnchorElement> }

package/src/components/toggle/Toggle.tsx

@@ -1,12 +1,22 @@
 import classNames from 'classnames';
 import { Switch } from 'radix-ui';
 
-export const Toggle = (props: Switch.SwitchProps) => {
-  const { className, ...rest } = props;
+export type ToggleProps = Switch.SwitchProps & { hasError?: boolean };
+
+export const Toggle = (props: ToggleProps) => {
+  const { className, hasError, ...rest } = props;
 
   return (
-    <Switch.Root className={classNames('ds-toggle', className)} {...rest}>
+    <Switch.Root
+      className={classNames('ds-toggle', { 'ds-toggle--error': hasError }, className)}
+      aria-invalid={hasError}
+      {...rest}
+    >
       <Switch.Thumb className="ds-toggle__thumb" />
     </Switch.Root>
   );
 };
+
+export namespace Toggle {
+  export type Props = ToggleProps;
+}

package/src/components/toggle/toggle.scss

@@ -36,6 +36,28 @@
     }
   }
 
+  &--error {
+    border-color: var(--form-field-text-error-color-border);
+  }
+
+  &.ds-toggle--error:not(:disabled) {
+    &:focus,
+    &:hover,
+    &:active {
+      border-color: var(--form-field-text-error-color-border);
+    }
+
+    &[data-state="checked"] {
+      border-color: var(--form-field-text-error-color-border);
+
+      &:focus,
+      &:hover,
+      &:active {
+        border-color: var(--form-field-text-error-color-border);
+      }
+    }
+  }
+
   &[data-state="checked"] {
     background-color: var(--toggle-on-default-color-background);
     border-color: var(--toggle-on-default-color-border);