@arbor-education/design-system.components 0.6.0 → 0.8.0

package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdownCellRenderer.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EACL,cAAc,GAEf,MAAM,2DAA2D,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAKxE,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,KAAsC,EACtC,EAAE;IACF,MAAM,EACJ,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,GAAG,EAAE,EACZ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,qBAAqB,GAAG,KAAK,GAC9B,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,oBAAoB,CAAC,GAAG,EAAE;QACxB,MAAM,iBAAiB,GAAG,CACxB,KAAmD,EACnD,EAAE;YACF,IACE,QAAQ,IAAI,KAAK;mBACd,KAAK,CAAC,IAAI,KAAK,IAAI;mBACnB,KAAK,CAAC,MAAM,KAAK,MAAM;mBACtB,KAAK,CAAC,KAAuB,CAAC,GAAG,KAAK,OAAO,EACjD,CAAC;gBACD,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;QAEF,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,sBACY,eAAe,kBACnB,WAAW,EACzB,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,qBAAqB,EAAE,qBAAqB,EAC5C,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EAAE,KAAK,EACf,iBAAiB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBAC9B,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"SelectDropdownCellRenderer.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EACL,cAAc,GAEf,MAAM,2DAA2D,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAYxE,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,KAAsC,EACtC,EAAE;IACF,MAAM,EACJ,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,GAAG,EAAE,EACZ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,qBAAqB,GAAG,KAAK,GAC9B,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAuC,OAAO,CAAC;IAC/D,MAAM,iBAAiB,GAAwC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvF,GAAG,MAAM;QACT,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;KAC5B,CAAC,CAAC,CAAC;IAEJ,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,oBAAoB,CAAC,GAAG,EAAE;QACxB,MAAM,iBAAiB,GAAG,CACxB,KAAmD,EACnD,EAAE;YACF,IACE,QAAQ,IAAI,KAAK;mBACd,KAAK,CAAC,IAAI,KAAK,IAAI;mBACnB,KAAK,CAAC,MAAM,KAAK,MAAM;mBACtB,KAAK,CAAC,KAAuB,CAAC,GAAG,KAAK,OAAO,EACjD,CAAC;gBACD,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;QAEF,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,sBACY,eAAe,kBACnB,WAAW,EACzB,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,iBAAiB,EAC1B,WAAW,EAAE,WAAW,EACxB,qBAAqB,EAAE,qBAAqB,EAC5C,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EAAE,KAAK,EACf,iBAAiB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBAC9B,IAAI,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;oBAClC,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,CACpC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/C,CAAC;oBACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClE,CAAC;YACH,CAAC,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/tabs/TabsItem.stories.d.ts

@@ -25,7 +25,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -310,7 +310,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

package/dist/components/tag/Tag.d.ts

@@ -1,10 +1,13 @@
 export type TagColor = 'neutral' | 'orange' | 'blue' | 'green' | 'purple' | 'teal' | 'salmon' | 'yellow';
-export type DotColour = 'purple' | 'salmon' | 'teal' | 'yellow' | 'green' | 'orange' | 'blue';
-type TagProps = {
-    text: string;
+export type TagProps = {
+    children: React.ReactNode;
     color?: TagColor;
-    dotColour?: DotColour;
+    selected?: boolean;
+    slotStart?: React.ReactNode;
+    slotEnd?: React.ReactNode;
+    onRemove?: () => void;
+    removeLabel?: string;
+    removeButtonTabIndex?: 0 | -1;
 };
-export declare const Tag: ({ text, color, dotColour }: TagProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Tag: ({ children, color, selected, slotStart, slotEnd, onRemove, removeLabel, removeButtonTabIndex, }: TagProps) => React.JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAC5B,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9F,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,4BAAwC,QAAQ,4CAcnE,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAC5B,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,iGASjB,QAAQ,KAAG,KAAK,CAAC,GAAG,CAAC,OAyBvB,CAAC"}

package/dist/components/tag/Tag.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-export const Tag = ({ text, color = 'neutral', dotColour }) => {
-    return (_jsxs("span", { className: classNames('ds-tag', `ds-tag--${color}`), children: [dotColour && (_jsx("span", { "aria-label": `${dotColour} dot`, className: classNames('ds-tag__dot', `ds-tag__dot--${dotColour}`) })), text] }));
+import { Icon } from '../icon/Icon';
+export const Tag = ({ children, color = 'neutral', selected = false, slotStart, slotEnd, onRemove, removeLabel = 'Remove', removeButtonTabIndex = 0, }) => {
+    return (_jsxs("span", { className: classNames('ds-tag', `ds-tag--${color}`, {
+            'ds-tag--selected': selected,
+        }), children: [slotStart && _jsx("span", { className: "ds-tag__slot-start", children: slotStart }), _jsx("span", { className: "ds-tag__label", children: children }), slotEnd && _jsx("span", { className: "ds-tag__slot-end", children: slotEnd }), onRemove && (_jsx("button", { type: "button", className: "ds-tag__remove", "aria-label": removeLabel, onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                }, tabIndex: removeButtonTabIndex, children: _jsx(Icon, { name: "x", size: 12 }) }))] }));
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAmBpC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE;IACtE,OAAO,CACL,gBACE,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,WAAW,KAAK,EAAE,CAAC,aAElD,SAAS,IAAI,CACZ,6BACc,GAAG,SAAS,MAAM,EAC9B,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,gBAAgB,SAAS,EAAE,CAAC,GACjE,CACH,EACA,IAAI,IACA,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAsB5C,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,oBAAoB,GAAG,CAAC,GACf,EAAqB,EAAE;IAChC,OAAO,CACL,gBAAM,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,WAAW,KAAK,EAAE,EAAE;YACxD,kBAAkB,EAAE,QAAQ;SAC7B,CAAC,aAEC,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,OAAO,IAAI,eAAM,SAAS,EAAC,kBAAkB,YAAE,OAAO,GAAQ,EAC9D,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gBAAgB,gBACd,WAAW,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,QAAQ,EAAE,CAAC;gBACb,CAAC,EACD,QAAQ,EAAE,oBAAoB,YAE9B,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,EAAE,GAAI,GACpB,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/tag/Tag.stories.d.ts

@@ -1,10 +1,15 @@
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Tag } from './Tag';
 declare const meta: Meta<typeof Tag>;
-export declare const Default: {
-    args: {
-        text: string;
-    };
-};
 export default meta;
+type Story = StoryObj<typeof Tag>;
+export declare const Default: Story;
+export declare const WithColour: Story;
+export declare const Selected: Story;
+export declare const WithDot: Story;
+export declare const WithIcon: Story;
+export declare const Removable: Story;
+export declare const RemovableWithIcon: Story;
+export declare const WithSlotEnd: Story;
+export declare const AllColours: Story;
 //# sourceMappingURL=Tag.stories.d.ts.map

package/dist/components/tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAI1B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAY1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAelC,eAAO,MAAM,OAAO,EAAE,KAEsC,CAAC;AAE7D,eAAO,MAAM,UAAU,EAAE,KAEoC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,KAE4F,CAAC;AAEpH,eAAO,MAAM,OAAO,EAAE,KAK6C,CAAC;AAEpE,eAAO,MAAM,QAAQ,EAAE,KAKqC,CAAC;AAE7D,eAAO,MAAM,SAAS,EAAE,KAM4H,CAAC;AAErJ,eAAO,MAAM,iBAAiB,EAAE,KAOiC,CAAC;AAElE,eAAO,MAAM,WAAW,EAAE,KAK6B,CAAC;AAIxD,eAAO,MAAM,UAAU,EAAE,KAQsC,CAAC"}

package/dist/components/tag/Tag.stories.js

@@ -1,13 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { Dot } from '../dot/Dot';
+import { Icon } from '../icon/Icon';
 import { Tag } from './Tag';
 const meta = {
     tags: ['autodocs'],
     title: 'Components/Tag',
     component: Tag,
-};
-export const Default = {
-    args: {
-        text: 'Tag content',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Displays compact tag content with optional start/end slots and removable actions. Removable tags keep their remove button in the tab order by default; composite parents such as Combobox can pass `removeButtonTabIndex={-1}` for roving tab focus.',
+            },
+        },
     },
 };
 export default meta;
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
+    },
+});
+export const Default = withDescription({
+    args: { children: 'Tag content' },
+}, 'Shows the default neutral Tag with plain text content.');
+export const WithColour = withDescription({
+    args: { children: 'Blue tag', color: 'blue' },
+}, 'Applies one of the semantic colour variants to the Tag.');
+export const Selected = withDescription({
+    args: { children: 'Selected tag', color: 'blue', selected: true },
+}, 'Shows the selected treatment, which intentionally prioritises selection styling over the base colour variant.');
+export const WithDot = withDescription({
+    args: {
+        children: 'With dot',
+        slotStart: _jsx(Dot, { colour: "purple" }),
+    },
+}, 'Uses `slotStart` to render a decorative dot before the label.');
+export const WithIcon = withDescription({
+    args: {
+        children: 'Alice Johnson',
+        slotStart: _jsx(Icon, { name: "user", size: 12 }),
+    },
+}, 'Uses `slotStart` to show an icon before the Tag label.');
+export const Removable = withDescription({
+    args: {
+        children: 'Removable tag',
+        onRemove: fn(),
+        removeLabel: 'Remove removable tag',
+    },
+}, 'Demonstrates a removable Tag with the default close affordance and a custom accessible remove label. The remove button is tabbable by default.');
+export const RemovableWithIcon = withDescription({
+    args: {
+        children: 'Alice Johnson',
+        slotStart: _jsx(Icon, { name: "user", size: 12 }),
+        onRemove: fn(),
+        removeLabel: 'Remove Alice Johnson',
+    },
+}, 'Combines a leading icon with the removable Tag interaction.');
+export const WithSlotEnd = withDescription({
+    args: {
+        children: 'Custom end',
+        slotEnd: _jsx(Icon, { name: "chevron-down", size: 12 }),
+    },
+}, 'Uses `slotEnd` to render trailing custom content.');
+const allColours = ['neutral', 'orange', 'blue', 'green', 'purple', 'teal', 'salmon', 'yellow'];
+export const AllColours = withDescription({
+    render: () => (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 }, children: allColours.map(color => (_jsx(Tag, { color: color, children: color }, color))) })),
+}, 'Displays every available Tag colour variant side by side.');
 //# sourceMappingURL=Tag.stories.js.map

package/dist/components/tag/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,IAAI,GAAqB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;KACpB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/tag/Tag.test.js

@@ -1,57 +1,93 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { Tag } from './Tag';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
+import { Tag } from './Tag';
+import { Dot } from '../dot/Dot';
 describe('Tag', () => {
-    test('Tag says hello', () => {
-        render(_jsx(Tag, { text: "Hello I'm a Pill!" }));
-        expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
-    });
-    test('Tag has default color neutral', () => {
-        render(_jsx(Tag, { text: "Hello I'm a Pill!" }));
-        expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--neutral');
-    });
-    test('Tag has custom color', () => {
-        render(_jsx(Tag, { text: "Hello I'm a Pill!", color: "blue" }));
-        expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--blue');
-    });
-    describe('dot functionality', () => {
-        test('Tag does not render dot when dotColour is not provided', () => {
-            render(_jsx(Tag, { text: "No dot here" }));
-            expect(screen.queryByLabelText(/dot/i)).not.toBeInTheDocument();
-        });
-        test('Tag renders dot when dotColour is provided', () => {
-            render(_jsx(Tag, { text: "Has dot", dotColour: "purple" }));
-            expect(screen.getByLabelText('purple dot')).toBeInTheDocument();
-        });
-        test('Tag dot has correct color class', () => {
-            render(_jsx(Tag, { text: "Purple dot", dotColour: "purple" }));
-            const dot = screen.getByLabelText('purple dot');
-            expect(dot).toHaveClass('ds-tag__dot');
-            expect(dot).toHaveClass('ds-tag__dot--purple');
-        });
-        test('Tag dot renders with each available colour', () => {
-            const colours = [
-                'purple',
-                'salmon',
-                'teal',
-                'yellow',
-                'green',
-                'orange',
-                'blue',
-            ];
-            colours.forEach((colour) => {
-                const { unmount } = render(_jsx(Tag, { text: `${colour} dot`, dotColour: colour }));
-                const dot = screen.getByLabelText(`${colour} dot`);
-                expect(dot).toHaveClass(`ds-tag__dot--${colour}`);
-                unmount();
-            });
-        });
-        test('Tag renders both dot and text correctly', () => {
-            render(_jsx(Tag, { text: "Text with dot", dotColour: "teal" }));
-            expect(screen.getByText('Text with dot')).toBeInTheDocument();
-            expect(screen.getByLabelText('teal dot')).toBeInTheDocument();
+    test('renders children as text content', () => {
+        render(_jsx(Tag, { children: "Hello" }));
+        expect(screen.getByText('Hello')).toBeInTheDocument();
+    });
+    test('has default color neutral', () => {
+        const { container } = render(_jsx(Tag, { children: "Neutral" }));
+        expect(container.querySelector('.ds-tag')).toHaveClass('ds-tag--neutral');
+    });
+    test('applies custom color class', () => {
+        const { container } = render(_jsx(Tag, { color: "blue", children: "Blue" }));
+        expect(container.querySelector('.ds-tag')).toHaveClass('ds-tag--blue');
+    });
+    test('applies selected class when selected is true', () => {
+        const { container } = render(_jsx(Tag, { selected: true, children: "Selected" }));
+        expect(container.querySelector('.ds-tag')).toHaveClass('ds-tag--selected');
+    });
+    describe('slotStart', () => {
+        test('renders slotStart content', () => {
+            const { container } = render(_jsx(Tag, { slotStart: _jsx(Dot, { colour: "purple" }), children: "With dot" }));
+            expect(container.querySelector('.ds-tag__slot-start .ds-dot--purple')).toBeInTheDocument();
+            expect(container.querySelector('.ds-tag__slot-start .ds-dot')).toHaveAttribute('aria-hidden', 'true');
+        });
+        test('does not render slot-start wrapper when slotStart is not provided', () => {
+            const { container } = render(_jsx(Tag, { children: "No slot" }));
+            expect(container.querySelector('.ds-tag__slot-start')).not.toBeInTheDocument();
+        });
+    });
+    describe('slotEnd', () => {
+        test('renders slotEnd content', () => {
+            const { container } = render(_jsx(Tag, { slotEnd: _jsx("span", { children: "End" }), children: "With end" }));
+            expect(container.querySelector('.ds-tag__slot-end')).toHaveTextContent('End');
+        });
+        test('does not render slot-end wrapper when slotEnd is not provided', () => {
+            const { container } = render(_jsx(Tag, { children: "No slot" }));
+            expect(container.querySelector('.ds-tag__slot-end')).not.toBeInTheDocument();
+        });
+    });
+    describe('onRemove', () => {
+        test('renders remove button when onRemove is provided', () => {
+            render(_jsx(Tag, { onRemove: () => { }, children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
+        });
+        test('uses a custom remove label when provided', () => {
+            render(_jsx(Tag, { onRemove: () => { }, removeLabel: "Remove Alice Johnson", children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove Alice Johnson' })).toBeInTheDocument();
+        });
+        test('keeps the remove button in the tab order by default', () => {
+            render(_jsx(Tag, { onRemove: () => { }, children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove' })).toHaveAttribute('tabindex', '0');
+        });
+        test('allows composite parents to remove the button from the tab order', () => {
+            render(_jsx(Tag, { onRemove: () => { }, removeButtonTabIndex: -1, children: "Removable" }));
+            expect(screen.getByRole('button', { name: 'Remove' })).toHaveAttribute('tabindex', '-1');
+        });
+        test('does not render remove button when onRemove is not provided', () => {
+            render(_jsx(Tag, { children: "Static" }));
+            expect(screen.queryByRole('button', { name: 'Remove' })).not.toBeInTheDocument();
+        });
+        test('fires onRemove callback when close button is clicked', async () => {
+            const onRemove = vi.fn();
+            render(_jsx(Tag, { onRemove: onRemove, children: "Removable" }));
+            await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
+            expect(onRemove).toHaveBeenCalledOnce();
+        });
+        test('stops event propagation on remove click', async () => {
+            const onRemove = vi.fn();
+            const outerClick = vi.fn();
+            render(_jsx("div", { onClick: outerClick, children: _jsx(Tag, { onRemove: onRemove, children: "Removable" }) }));
+            await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
+            expect(onRemove).toHaveBeenCalledOnce();
+            expect(outerClick).not.toHaveBeenCalled();
+        });
+    });
+    describe('combined slots', () => {
+        test('renders slotStart, children, slotEnd, and remove button in correct order', () => {
+            const { container } = render(_jsx(Tag, { slotStart: _jsx("span", { children: "S" }), slotEnd: _jsx("span", { children: "E" }), onRemove: () => { }, children: "Label" }));
+            const tag = container.querySelector('.ds-tag');
+            const children = Array.from(tag.children);
+            expect(children[0]).toHaveClass('ds-tag__slot-start');
+            expect(children[1]).toHaveClass('ds-tag__label');
+            expect(children[2]).toHaveClass('ds-tag__slot-end');
+            expect(children[3]).toHaveClass('ds-tag__remove');
         });
     });
 });

package/dist/components/tag/Tag.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.test.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tag.test.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,3 @@
+import { Switch } from 'radix-ui';
+export declare const Toggle: (props: Switch.SwitchProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/components/toggle/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,CAAC,WAAW,4CAQ/C,CAAC"}

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Switch } from 'radix-ui';
+export const Toggle = (props) => {
+    const { className, ...rest } = props;
+    return (_jsx(Switch.Root, { className: classNames('ds-toggle', className), ...rest, children: _jsx(Switch.Thumb, { className: "ds-toggle__thumb" }) }));
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAyB,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAErC,OAAO,CACL,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,KAAM,IAAI,YAClE,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,GAAG,GACjC,CACf,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/toggle/Toggle.stories.d.ts

@@ -0,0 +1,97 @@
+import type { StoryObj } from '@storybook/react-vite';
+/**
+ * The Toggle component is a binary on/off switch, built on top of Radix UI's
+ * Switch primitive. Think of it like the light switch in the St. Olaf town
+ * hall — everyone in town knows exactly whether the lights are on or off,
+ * and there is never any confusion about which state you are in.
+ *
+ * Toggling is the right choice when you need an immediate, binary setting
+ * change — "dark mode on", "notifications off", "feature enabled". Unlike a
+ * checkbox, a toggle implies the change takes effect right away, without
+ * needing a form submission.
+ *
+ * **Accessibility**
+ * - Rendered as a `<button role="switch">` — screen readers announce the
+ *   current state ("checked" / "not checked") automatically.
+ * - Fully keyboard accessible: `Space` or `Enter` toggles the state.
+ * - Associate a visible label with the toggle using a `<label htmlFor={id}>`
+ *   so users of all abilities know what they are toggling.
+ * - The `disabled` prop renders the element as non-interactive and applies
+ *   correct ARIA semantics.
+ *
+ * **CSS classes**
+ * - Root element: `ds-toggle`
+ * - Thumb (the sliding dot): `ds-toggle__thumb`
+ * - Checked state is driven by Radix's `data-state="checked"` attribute,
+ *   which the SCSS uses to apply brand colours and shift the thumb position.
+ */
+declare const meta: {
+    title: string;
+    component: (props: import("@radix-ui/react-switch").SwitchProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        onCheckedChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+    argTypes: {
+        checked: {
+            control: "boolean";
+            description: string;
+        };
+        defaultChecked: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        required: {
+            control: "boolean";
+            description: string;
+        };
+        name: {
+            control: "text";
+            description: string;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        onCheckedChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** The toggle in its default, unchecked (off) state. */
+export declare const Default: Story;
+/**
+ * The toggle in its checked (on) state.
+ *
+ * Uses `defaultChecked` so the component manages its own state — perfect for
+ * uncontrolled usage where you just need a sensible starting position.
+ */
+export declare const Checked: Story;
+/**
+ * A disabled toggle that is currently off.
+ *
+ * Use this when a setting exists but cannot be changed in the current context
+ * — for example, a feature that requires a higher subscription tier.
+ */
+export declare const Disabled: Story;
+/**
+ * A disabled toggle that is currently on.
+ *
+ * This communicates "this setting is enabled, but you cannot change it right
+ * now." Always pair a disabled toggle with a tooltip or helper text that
+ * explains why it cannot be interacted with.
+ */
+export declare const DisabledChecked: Story;
+export declare const Controlled: Story;
+export declare const WithLabel: Story;
+//# sourceMappingURL=Toggle.stories.d.ts.map

package/dist/components/toggle/Toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,wDAAwD;AACxD,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAMF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAoDF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AA6CF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}