@arbor-education/design-system.components 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.3.6
+
+### Patch Changes
+
+- [#122](https://github.com/arbor-education/design-system.components/pull/122) [`8f25e54`](https://github.com/arbor-education/design-system.components/commit/8f25e54a2c20ec2ef52c486749d46e7d9731d49f) Thanks [@AmeeMorris](https://github.com/AmeeMorris)! - MIS-66424 Toast component
+
+- [#123](https://github.com/arbor-education/design-system.components/pull/123) [`dbac185`](https://github.com/arbor-education/design-system.components/commit/dbac18524c61d15e788f92ec8cee25cf20c1332c) Thanks [@AmeeMorris](https://github.com/AmeeMorris)! - MIS-66708 Progress component
+
+- [#121](https://github.com/arbor-education/design-system.components/pull/121) [`e93e5c8`](https://github.com/arbor-education/design-system.components/commit/e93e5c8625a63ffb6282fc246168cd69696d5a32) Thanks [@AmeeMorris](https://github.com/AmeeMorris)! - MIS-68210 Editable text component
+
 ## 0.3.5
 
 ### Patch Changes

package/dist/components/editableText/EditableText.d.ts

@@ -0,0 +1,10 @@
+type EditableTextProps = {
+    text: string;
+    className?: string;
+    onEditSave: (newText: string) => void;
+    isEditing?: boolean;
+    multiline?: boolean;
+};
+export declare const EditableText: ({ text: textProp, className, onEditSave, isEditing: isEditingProp, multiline }: EditableTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableText.d.ts.map

package/dist/components/editableText/EditableText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../src/components/editableText/EditableText.tsx"],"names":[],"mappings":"AAMA,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,gFAAqG,iBAAiB,4CA0DlJ,CAAC"}

package/dist/components/editableText/EditableText.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { TextInput } from '../formField/inputs/text/TextInput';
+import { TextArea } from '../formField/inputs/textArea/TextArea';
+import { Icon } from '../icon/Icon';
+import { useEffect, useRef, useState } from 'react';
+export const EditableText = ({ text: textProp, className = '', onEditSave, isEditing: isEditingProp = false, multiline = false }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [text, setText] = useState(textProp);
+    const preEditText = useRef(textProp);
+    useEffect(() => {
+        setText(textProp);
+    }, [textProp]);
+    useEffect(() => {
+        setIsEditing(isEditingProp);
+    }, [isEditingProp]);
+    const handleEditSave = () => {
+        onEditSave(text);
+        preEditText.current = text;
+        setIsEditing(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !multiline) {
+            handleEditSave();
+        }
+        if (e.key === 'Escape') {
+            setText(preEditText.current);
+            setIsEditing(false);
+        }
+    };
+    const InputComponent = multiline ? TextArea : TextInput;
+    return (_jsx("span", { className: classNames('ds-editable-text', className), children: isEditing
+            ? (_jsx(InputComponent, { name: "editable-text", "aria-label": "Text", className: "ds-editable-text__input", value: text, onChange: e => setText(e.target.value), onBlur: handleEditSave, onKeyDown: handleKeyDown, autoFocus: true }))
+            : (_jsxs("button", { className: "ds-editable-text__button", "aria-label": "Edit text", onClick: () => setIsEditing(true), children: [text, _jsx(Icon, { name: "pencil", size: 16, className: "ds-editable-text__button-icon" })] })) }));
+};
+//# sourceMappingURL=EditableText.js.map

package/dist/components/editableText/EditableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.js","sourceRoot":"","sources":["../../../src/components/editableText/EditableText.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAsB,MAAM,OAAO,CAAC;AAUxE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAqB,EAAE,EAAE;IACrJ,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,aAAa,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAwD,EAAE,EAAE;QACjF,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;YACpC,cAAc,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACvB,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAExD,OAAO,CACL,eAAM,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,YACvD,SAAS;YACR,CAAC,CAAC,CACE,KAAC,cAAc,IACb,IAAI,EAAC,eAAe,gBACT,MAAM,EACjB,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,SACT,CACH;YACH,CAAC,CAAC,CACE,kBACE,SAAS,EAAC,0BAA0B,gBACzB,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,aAEhC,IAAI,EACL,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,+BAA+B,GAAG,IACnE,CACV,GACA,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/editableText/EditableText.stories.d.ts

@@ -0,0 +1,44 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ text: textProp, className, onEditSave, isEditing: isEditingProp, multiline }: {
+        text: string;
+        className?: string;
+        onEditSave: (newText: string) => void;
+        isEditing?: boolean;
+        multiline?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        text: {
+            control: "text";
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+        onEditSave: {
+            action: string;
+            description: string;
+        };
+        isEditing: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InH1: Story;
+export declare const InH2: Story;
+export declare const InH3: Story;
+export declare const InH4: Story;
+export declare const InParagraph: Story;
+export declare const InCustomStyledDiv: Story;
+export declare const LongText: Story;
+//# sourceMappingURL=EditableText.stories.d.ts.map

package/dist/components/editableText/EditableText.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.stories.d.ts","sourceRoot":"","sources":["../../../src/components/editableText/EditableText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAGF,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAGF,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAGF,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC"}

package/dist/components/editableText/EditableText.stories.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EditableText } from './EditableText';
+const meta = {
+    title: 'Components/EditableText',
+    component: EditableText,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'The text to display',
+        },
+        className: {
+            control: 'text',
+            description: 'Optional CSS class name',
+        },
+        onEditSave: {
+            action: 'edit saved',
+            description: 'Callback fired when the text is edited',
+        },
+        isEditing: {
+            control: 'boolean',
+            description: 'Control whether the text is in edit mode',
+        },
+    },
+};
+export default meta;
+// Default (inherits parent styles)
+export const Default = {
+    render: args => (_jsx("div", { style: { width: '100%' }, children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Editable Text',
+        onEditSave: () => { },
+    },
+};
+// Inside H1 heading
+export const InH1 = {
+    render: args => (_jsx("h1", { children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Editable Heading Level 1',
+        onEditSave: () => { },
+    },
+};
+// Inside H2 heading
+export const InH2 = {
+    render: args => (_jsx("h2", { children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Editable Heading Level 2',
+        onEditSave: () => { },
+    },
+};
+// Inside H3 heading
+export const InH3 = {
+    render: args => (_jsx("h3", { children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Editable Heading Level 3',
+        onEditSave: () => { },
+    },
+};
+// Inside H4 heading
+export const InH4 = {
+    render: args => (_jsx("h4", { children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Editable Heading Level 4',
+        onEditSave: () => { },
+    },
+};
+// Inside paragraph
+export const InParagraph = {
+    render: args => (_jsx("p", { children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Editable paragraph text',
+        onEditSave: () => { },
+    },
+};
+// Inside custom styled div
+export const InCustomStyledDiv = {
+    render: args => (_jsx("div", { style: { fontSize: '24px', fontWeight: 'bold', color: '#0066cc' }, children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'Custom styled editable text',
+        onEditSave: () => { },
+    },
+};
+// Long text example
+export const LongText = {
+    render: args => (_jsx("h2", { children: _jsx(EditableText, { ...args }) })),
+    args: {
+        text: 'This is a much longer text that demonstrates how the component handles extended content',
+        onEditSave: () => { },
+    },
+};
+//# sourceMappingURL=EditableText.stories.js.map

package/dist/components/editableText/EditableText.stories.js.map

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

package/dist/components/editableText/EditableText.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=EditableText.test.d.ts.map

package/dist/components/editableText/EditableText.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.test.d.ts","sourceRoot":"","sources":["../../../src/components/editableText/EditableText.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}

package/dist/components/editableText/EditableText.test.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { EditableText } from './EditableText';
+describe('EditableText', () => {
+    const defaultProps = {
+        text: 'Test Text',
+        onEditSave: vi.fn(),
+    };
+    it('renders as a span element', () => {
+        const { container } = render(_jsx(EditableText, { ...defaultProps }));
+        const span = container.querySelector('.ds-editable-text');
+        expect(span).toBeInTheDocument();
+        expect(span?.tagName).toBe('SPAN');
+    });
+    it('displays the text in view mode', () => {
+        render(_jsx(EditableText, { ...defaultProps }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        expect(button).toHaveTextContent('Test Text');
+    });
+    it('applies custom className', () => {
+        const { container } = render(_jsx(EditableText, { ...defaultProps, className: "custom-class" }));
+        const span = container.querySelector('.ds-editable-text');
+        expect(span).toHaveClass('ds-editable-text', 'custom-class');
+    });
+    it('renders edit button with pencil icon in view mode', () => {
+        render(_jsx(EditableText, { ...defaultProps }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        expect(button).toBeInTheDocument();
+        expect(button.querySelector('.ds-editable-text__button-icon')).toBeInTheDocument();
+    });
+    it('enters edit mode when edit button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(EditableText, { ...defaultProps }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const input = screen.getByRole('textbox', { name: /text/i });
+        expect(input).toBeInTheDocument();
+        expect(input).toHaveValue('Test Text');
+        expect(input).toHaveFocus();
+    });
+    it('calls onEditSave when Enter key is pressed', async () => {
+        const user = userEvent.setup();
+        const onEditSave = vi.fn();
+        render(_jsx(EditableText, { ...defaultProps, onEditSave: onEditSave }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const input = screen.getByRole('textbox', { name: /text/i });
+        await user.clear(input);
+        await user.type(input, 'New Text');
+        await user.keyboard('{Enter}');
+        expect(onEditSave).toHaveBeenCalledWith('New Text');
+    });
+    it('calls onEditSave when input is blurred', async () => {
+        const user = userEvent.setup();
+        const onEditSave = vi.fn();
+        render(_jsx(EditableText, { ...defaultProps, onEditSave: onEditSave }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const input = screen.getByRole('textbox', { name: /text/i });
+        await user.clear(input);
+        await user.type(input, 'Updated Text');
+        await user.tab(); // Blur the input
+        await waitFor(() => {
+            expect(onEditSave).toHaveBeenCalledWith('Updated Text');
+        });
+    });
+    it('exits edit mode after saving', async () => {
+        const user = userEvent.setup();
+        render(_jsx(EditableText, { ...defaultProps }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const input = screen.getByRole('textbox', { name: /text/i });
+        await user.keyboard('{Enter}');
+        await waitFor(() => {
+            expect(input).not.toBeInTheDocument();
+            expect(screen.getByRole('button', { name: /edit text/i })).toBeInTheDocument();
+        });
+    });
+    it('reverts text when Escape key is pressed', async () => {
+        const user = userEvent.setup();
+        const onEditSave = vi.fn();
+        render(_jsx(EditableText, { ...defaultProps, onEditSave: onEditSave }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const input = screen.getByRole('textbox', { name: /text/i });
+        await user.clear(input);
+        await user.type(input, 'Changed Text');
+        await user.keyboard('{Escape}');
+        await waitFor(() => {
+            expect(onEditSave).not.toHaveBeenCalled();
+            const viewButton = screen.getByRole('button', { name: /edit text/i });
+            expect(viewButton).toHaveTextContent('Test Text');
+        });
+    });
+    it('updates text when text prop changes', () => {
+        const { rerender } = render(_jsx(EditableText, { ...defaultProps, text: "Original" }));
+        expect(screen.getByRole('button', { name: /edit text/i })).toHaveTextContent('Original');
+        rerender(_jsx(EditableText, { ...defaultProps, text: "Updated" }));
+        expect(screen.getByRole('button', { name: /edit text/i })).toHaveTextContent('Updated');
+    });
+    it('starts in edit mode when isEditing prop is true', () => {
+        render(_jsx(EditableText, { ...defaultProps, isEditing: true }));
+        const input = screen.getByRole('textbox', { name: /text/i });
+        expect(input).toBeInTheDocument();
+        expect(input).toHaveValue('Test Text');
+    });
+    it('switches to edit mode when isEditing prop changes to true', () => {
+        const { rerender } = render(_jsx(EditableText, { ...defaultProps, isEditing: false }));
+        expect(screen.getByRole('button', { name: /edit text/i })).toBeInTheDocument();
+        rerender(_jsx(EditableText, { ...defaultProps, isEditing: true }));
+        expect(screen.getByRole('textbox', { name: /text/i })).toBeInTheDocument();
+    });
+    it('preserves text value across edit sessions', async () => {
+        const user = userEvent.setup();
+        const onEditSave = vi.fn();
+        render(_jsx(EditableText, { ...defaultProps, onEditSave: onEditSave }));
+        // First edit
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const input = screen.getByRole('textbox', { name: /text/i });
+        await user.clear(input);
+        await user.type(input, 'First Edit');
+        await user.keyboard('{Enter}');
+        await waitFor(() => {
+            expect(onEditSave).toHaveBeenCalledWith('First Edit');
+        });
+        // Second edit - should start with previous saved value
+        const buttonAgain = await screen.findByRole('button', { name: /edit text/i });
+        await user.click(buttonAgain);
+        const inputAgain = screen.getByRole('textbox', { name: /text/i });
+        expect(inputAgain).toHaveValue('First Edit');
+        await user.clear(inputAgain);
+        await user.type(inputAgain, 'Second Edit');
+        await user.keyboard('{Escape}'); // Cancel this time
+        // Should still have first edit value
+        await waitFor(() => {
+            const finalButton = screen.getByRole('button', { name: /edit text/i });
+            expect(finalButton).toHaveTextContent('First Edit');
+        });
+    });
+    it('inherits styles from parent element', () => {
+        const { container } = render(_jsx("h1", { style: { fontSize: '32px', fontWeight: 'bold' }, children: _jsx(EditableText, { ...defaultProps }) }));
+        const span = container.querySelector('.ds-editable-text');
+        expect(span).toBeInTheDocument();
+        // Component should inherit font-size and font-weight from parent h1
+    });
+    it('renders textarea when multiline is true', async () => {
+        const user = userEvent.setup();
+        render(_jsx(EditableText, { ...defaultProps, multiline: true }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const textarea = screen.getByRole('textbox', { name: /text/i });
+        expect(textarea).toBeInTheDocument();
+        expect(textarea.tagName).toBe('TEXTAREA');
+    });
+    it('does not save on Enter key when multiline is true', async () => {
+        const user = userEvent.setup();
+        const onEditSave = vi.fn();
+        render(_jsx(EditableText, { ...defaultProps, onEditSave: onEditSave, multiline: true }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const textarea = screen.getByRole('textbox', { name: /text/i });
+        await user.clear(textarea);
+        await user.type(textarea, 'Line 1{Enter}Line 2');
+        // Enter should NOT trigger save in multiline mode
+        expect(onEditSave).not.toHaveBeenCalled();
+        expect(textarea).toHaveValue('Line 1\nLine 2');
+    });
+    it('saves multiline text on blur', async () => {
+        const user = userEvent.setup();
+        const onEditSave = vi.fn();
+        render(_jsx(EditableText, { ...defaultProps, onEditSave: onEditSave, multiline: true }));
+        const button = screen.getByRole('button', { name: /edit text/i });
+        await user.click(button);
+        const textarea = screen.getByRole('textbox', { name: /text/i });
+        await user.clear(textarea);
+        await user.type(textarea, 'Line 1{Enter}Line 2{Enter}Line 3');
+        await user.tab(); // Blur the textarea
+        await waitFor(() => {
+            expect(onEditSave).toHaveBeenCalledWith('Line 1\nLine 2\nLine 3');
+        });
+    });
+});
+//# sourceMappingURL=EditableText.test.js.map

package/dist/components/editableText/EditableText.test.js.map

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

package/dist/components/heading/Heading.stories.d.ts

@@ -6,6 +6,14 @@ export declare const Default: {
         children: string[];
         level: number;
     };
+    argTypes: {
+        level: {
+            control: string;
+            options: number[];
+            description: string;
+        };
+    };
+    tags: string[];
 };
 export declare const FloatingChildren: {
     args: {
@@ -31,5 +39,23 @@ export declare const HeadingWithButtonsBothSides: {
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };
+export declare const HeadingWithEditableText: {
+    args: {
+        level: number;
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export declare const HeadingWithEditableTextAndButton: {
+    args: {
+        level: number;
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export declare const HeadingWithEditableTextAndButtonsBothSides: {
+    args: {
+        level: number;
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
 export default meta;
 //# sourceMappingURL=Heading.stories.d.ts.map

package/dist/components/heading/Heading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;CAanC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;CAiBtC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;;;CAuBvC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;CAanC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;CAiBtC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;;;CAuBvC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;CAOnC,CAAC;AAEF,eAAO,MAAM,gCAAgC;;;;;CAa5C,CAAC;AAEF,eAAO,MAAM,0CAA0C;;;;;CAuBtD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/heading/Heading.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading } from './Heading';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
+import { EditableText } from '../editableText/EditableText';
 const meta = {
     title: 'Components/Heading',
     component: Heading,
@@ -11,6 +12,14 @@ export const Default = {
         children: ['Heading Text'],
         level: 1,
     },
+    argTypes: {
+        level: {
+            control: 'select',
+            options: [1, 2, 3, 4],
+            description: 'Heading level (h1-h4)',
+        },
+    },
+    tags: ['autodocs'],
 };
 export const FloatingChildren = {
     args: {
@@ -45,5 +54,31 @@ export const HeadingWithButtonsBothSides = {
         ],
     },
 };
+export const HeadingWithEditableText = {
+    args: {
+        level: 1,
+        children: [
+            _jsx(EditableText, { text: "Editable Heading", onEditSave: () => { } }, 2),
+        ],
+    },
+};
+export const HeadingWithEditableTextAndButton = {
+    args: {
+        level: 1,
+        children: [
+            _jsx(Heading.InnerContainer, { children: _jsx(EditableText, { text: "Editable Heading", onEditSave: () => { } }) }, 1),
+            _jsx(Heading.InnerContainer, { children: _jsxs(Button, { children: [_jsx(Icon, { name: "info" }), "Button Text"] }) }, 2),
+        ],
+    },
+};
+export const HeadingWithEditableTextAndButtonsBothSides = {
+    args: {
+        level: 1,
+        children: [
+            _jsxs(Heading.InnerContainer, { className: "medium-spacing-gap", children: [_jsxs(Button, { variant: "tertiary", children: [_jsx(Icon, { name: "chevron-left" }), "Button Text"] }), _jsx(EditableText, { text: "Editable Heading", onEditSave: () => { } })] }, 1),
+            _jsxs(Heading.InnerContainer, { className: "medium-spacing-gap", children: [_jsxs(Button, { variant: "secondary", children: [_jsx(Icon, { name: "info" }), "Button Text"] }), _jsxs(Button, { children: [_jsx(Icon, { name: "info" }), "Button Text"] })] }, 2),
+        ],
+    },
+};
 export default meta;
 //# sourceMappingURL=Heading.stories.js.map

package/dist/components/heading/Heading.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.stories.js","sourceRoot":"","sources":["../../../src/components/heading/Heading.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,cAAc,CAAC;QAC1B,KAAK,EAAE,CAAC;KACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,KAAC,OAAO,CAAC,cAAc,sCAAM,CAAC,CAA6C,EAAE,kDAAW,CAAC,CAA4B,CAAC;QACjI,KAAK,EAAE,CAAC;KACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE;YACR,KAAC,OAAO,CAAC,cAAc,2BAAM,CAAC,CAAkC;YAChE,KAAC,OAAO,CAAC,cAAc,cACrB,MAAC,MAAM,eACL,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,mBAEb,IAJkB,CAAC,CAKL;SAC1B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE;YACR,KAAC,OAAO,CAAC,cAAc,2BAAM,CAAC,CAAkC;YAChE,MAAC,OAAO,CAAC,cAAc,IAAS,SAAS,EAAC,oBAAoB,aAC5D,MAAC,MAAM,IAAC,OAAO,EAAC,WAAW,aACzB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,mBAEb,EACT,MAAC,MAAM,eACL,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,mBAEb,KARkB,CAAC,CASL;SAC1B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE;YACR,MAAC,OAAO,CAAC,cAAc,IAAS,SAAS,EAAC,oBAAoB,aAC5D,MAAC,MAAM,IAAC,OAAO,EAAC,UAAU,aACxB,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,GAAG,mBAErB,gBAJkB,CAAC,CAML;YACzB,MAAC,OAAO,CAAC,cAAc,IAAS,SAAS,EAAC,oBAAoB,aAC5D,MAAC,MAAM,IAAC,OAAO,EAAC,WAAW,aACzB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,mBAEb,EACT,MAAC,MAAM,eACL,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,mBAEb,KARkB,CAAC,CASL;SAC1B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Heading.stories.js","sourceRoot":"","sources":["../../../src/components/heading/Heading.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,6 @@
+import { Progress as RadixProgress } from 'radix-ui';
+export type ProgressProps = RadixProgress.ProgressProps & {
+    indicatorClassName?: string;
+};
+export declare const Progress: (props: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map

package/dist/components/progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,GAAG;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAQ5C,CAAC"}

package/dist/components/progress/Progress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Progress as RadixProgress } from 'radix-ui';
+export const Progress = (props) => {
+    const { value = 0, max = 100, className = '', indicatorClassName = '', ...rest } = props;
+    const percentage = (Number(value) / max) * 100;
+    return (_jsx(RadixProgress.Root, { value: value, max: max, ...rest, className: classNames('ds-progress', className), children: _jsx(RadixProgress.Indicator, { style: { transform: `translateX(-${100 - percentage}%)` }, className: classNames('ds-progress__indicator', indicatorClassName) }) }));
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAMrD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,SAAS,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACzF,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IAC/C,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,YACnG,KAAC,aAAa,CAAC,SAAS,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,GAAG,GAAG,UAAU,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,kBAAkB,CAAC,GAAI,GACxI,CACtB,CAAC;AACJ,CAAC,CAAC"}