@arbor-education/design-system.components 0.0.1 → 0.0.2

package/.github/workflows/design-system-pr-checks.yml

@@ -0,0 +1,37 @@
+name: Design System PR Checks
+
+on:
+  pull_request:
+    types: [opened, edited, synchronize, reopened]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  dsChecks:
+    name: DS Checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+      - name: Install yarn
+        run: npm install yarn -g
+      - name: Install dependencies
+        run: yarn install --prefer-offline --frozen-lockfile
+      - name: Run typescript check
+        run: yarn check-types
+      - name: Run ESLint check
+        if: success() || failure()
+        run: yarn eslint
+      - name: Run stylelint check
+        if: success() || failure()
+        run: yarn style-lint
+      - name: Run component tests
+        if: success() || failure()
+        run: yarn test --no-coverage --watch=false

package/.husky/pre-commit

@@ -1,2 +1,3 @@
 nvm install && nvm use
-yarn lint-staged
+yarn check-types
+yarn lint-staged

package/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: [
@@ -12,10 +13,21 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-a11y',
     '@storybook/addon-vitest',
+    'storybook-addon-deep-controls',
   ],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        Components: path.resolve(__dirname, '../src/components'),
+        Utils: path.resolve(__dirname, '../src/utils'),
+      };
+    }
+    return config;
+  },
 };
 export default config;

package/.storybook/preview.ts

@@ -10,7 +10,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-
+    deepControls: { enabled: true },
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations

package/README.md

@@ -1,6 +1,9 @@
-# <<Repo Name>>
+# Components for the Design System
 
-<<A short description of what the repo is for>>
+## What components are there?
+Have a look at our wonderful [Storybook](https://main--68c3f2a09d95b22aa55a11e8.chromatic.com/).
+
+## How can I create a component?
 
 In order to use the createComponent script, run the following command:
 
@@ -10,9 +13,9 @@ Then you can create a new component by running
 
     npm run createComponent <ComponentName>
 
-## Local Development with Yalc
+## How can I link this package locally?
 
-To publish new changes locally with hot loading, run:
+You can link this package locally using [Yalc](https://github.com/wclr/yalc). To publish new changes locally with hot loading, run:
 
     yarn build
 

package/dist/components/button/Button.test.d.ts

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

package/dist/components/button/Button.test.d.ts.map

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

package/dist/components/button/Button.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test, describe, vi } from 'vitest';
+import { Button } from './Button';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+describe('Button component', () => {
+    test('renders button with text', () => {
+        render(_jsx(Button, { children: "Button Text" }));
+        expect(screen.getByText('Button Text')).toBeInTheDocument();
+    });
+    test('applies primary style by default', () => {
+        render(_jsx(Button, { children: "Button Text" }));
+        const button = screen.getByText('Button Text').closest('button');
+        expect(button).toHaveClass('ds-button--primary');
+    });
+    test('applies correct type class when specified', () => {
+        render(_jsx(Button, { type: "secondary", children: "Button Text" }));
+        const button = screen.getByText('Button Text').closest('button');
+        expect(button).toHaveClass('ds-button--secondary');
+    });
+    test('applies correct size class', () => {
+        render(_jsx(Button, { size: "S", children: "Small Button" }));
+        const button = screen.getByText('Small Button').closest('button');
+        expect(button).toHaveClass('ds-button--S');
+    });
+    test('handles click events', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Button, { onClick: handleClick, children: "Click Me" }));
+        fireEvent.click(screen.getByText('Click Me'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test('does not call onClick when disabled', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Button, { onClick: handleClick, disabled: true, children: "Disabled Button" }));
+        fireEvent.click(screen.getByText('Disabled Button'));
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    test('applies additional className', () => {
+        render(_jsx(Button, { className: "custom-class", children: "Button Text" }));
+        const button = screen.getByText('Button Text').closest('button');
+        expect(button).toHaveClass('custom-class');
+    });
+});
+//# sourceMappingURL=Button.test.js.map

package/dist/components/button/Button.test.js.map

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

package/dist/components/card/Card.test.d.ts

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

package/dist/components/card/Card.test.d.ts.map

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

package/dist/components/card/Card.test.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { expect, test, describe, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Card } from './Card';
+import '@testing-library/jest-dom/vitest';
+describe('Card Component', () => {
+    test('renders empty card without any props', () => {
+        render(_jsx(Card, {}));
+        const card = screen.getByRole('article');
+        expect(card).toBeInTheDocument();
+        expect(card).toHaveAttribute('aria-label', 'Card');
+    });
+    test('renders card with title', () => {
+        render(_jsx(Card, { title: "Test Title" }));
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Test Title');
+        expect(screen.getByText('Test Title')).toHaveClass('ds-card__title');
+    });
+    test('renders card with paragraph', () => {
+        render(_jsx(Card, { paragraph: "Test paragraph content" }));
+        expect(screen.getByText('Test paragraph content')).toBeInTheDocument();
+        expect(screen.getByText('Test paragraph content')).toHaveClass('ds-card__paragraph');
+    });
+    test('renders card with both title and paragraph', () => {
+        render(_jsx(Card, { title: "Test Title", paragraph: "Test paragraph" }));
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Test Title');
+        expect(screen.getByText('Test paragraph')).toBeInTheDocument();
+    });
+    test('renders card with icon', () => {
+        const { container } = render(_jsx(Card, { icon: "eye" }));
+        expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
+    });
+    test('renders card with pill', () => {
+        render(_jsx(Card, { pillText: "Test Pill", pillColor: "orange" }));
+        expect(screen.getByText('Test Pill')).toBeInTheDocument();
+    });
+    test('renders complete card with all props', () => {
+        const mockClick = vi.fn();
+        const mockKeyDown = vi.fn();
+        const { container } = render(_jsx(Card, { title: "Complete Card", paragraph: "This is a complete card", icon: "eye", iconColor: "#blue", pillText: "Complete", pillColor: "green", onClick: mockClick, onKeyDown: mockKeyDown }));
+        expect(screen.getByText('Complete Card')).toBeInTheDocument();
+        expect(screen.getByText('This is a complete card')).toBeInTheDocument();
+        expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
+        expect(screen.getByText('Complete')).toBeInTheDocument();
+    });
+    describe('Click interactions', () => {
+        test('calls onClick handler when card is clicked', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { title: "Clickable Card", onClick: mockClick }));
+            const card = screen.getByRole('article');
+            fireEvent.click(card);
+            expect(mockClick).toHaveBeenCalledTimes(1);
+        });
+        test('does not call onClick when card is disabled', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { title: "Disabled Card", onClick: mockClick, disabled: true }));
+            const card = screen.getByRole('article');
+            fireEvent.click(card);
+            expect(mockClick).not.toHaveBeenCalled();
+        });
+        test('shows click arrow icon when card is clickable', () => {
+            const mockClick = vi.fn();
+            const { container } = render(_jsx(Card, { title: "Clickable Card", onClick: mockClick }));
+            expect(container.querySelector('.ds-icon-chevron-right')).toBeInTheDocument();
+        });
+        test('does not show click arrow icon when card is not clickable', () => {
+            const { container } = render(_jsx(Card, { title: "Non-clickable Card" }));
+            expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
+        });
+        test('does not show click arrow icon when card is disabled', () => {
+            const mockClick = vi.fn();
+            const { container } = render(_jsx(Card, { title: "Disabled Card", onClick: mockClick, disabled: true }));
+            expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
+        });
+        test('uses arrow type when specified', () => {
+            const mockClick = vi.fn();
+            const { container } = render(_jsx(Card, { title: "Clickable Card", onClick: mockClick, arrowType: "arrow" }));
+            expect(container.querySelector('.ds-icon-arrow-right')).toBeInTheDocument();
+        });
+    });
+    describe('Keyboard interactions', () => {
+        test('calls onKeyDown handler when key is pressed on clickable card', () => {
+            const mockKeyDown = vi.fn();
+            render(_jsx(Card, { title: "Keyboard Card", onClick: vi.fn(), onKeyDown: mockKeyDown }));
+            const card = screen.getByRole('article');
+            fireEvent.keyDown(card, { key: 'Enter' });
+            expect(mockKeyDown).toHaveBeenCalledTimes(1);
+        });
+        test('does not call onKeyDown when card is disabled', () => {
+            const mockKeyDown = vi.fn();
+            render(_jsx(Card, { title: "Disabled Card", onClick: vi.fn(), onKeyDown: mockKeyDown, disabled: true }));
+            const card = screen.getByRole('article');
+            fireEvent.keyDown(card, { key: 'Enter' });
+            expect(mockKeyDown).not.toHaveBeenCalled();
+        });
+        test('does not call onKeyDown when card is not clickable', () => {
+            const mockKeyDown = vi.fn();
+            render(_jsx(Card, { title: "Non-clickable Card", onKeyDown: mockKeyDown }));
+            const card = screen.getByRole('article');
+            fireEvent.keyDown(card, { key: 'Enter' });
+            expect(mockKeyDown).not.toHaveBeenCalled();
+        });
+    });
+    describe('CSS classes and accessibility', () => {
+        test('applies clickable class when onClick is provided and not disabled', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { onClick: mockClick }));
+            const card = screen.getByRole('article');
+            expect(card).toHaveClass('ds-card__container--clickable');
+        });
+        test('applies disabled class when disabled', () => {
+            render(_jsx(Card, { disabled: true }));
+            const card = screen.getByRole('article');
+            expect(card).toHaveClass('ds-card__container--disabled');
+        });
+        test('does not apply clickable class when disabled', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { onClick: mockClick, disabled: true }));
+            const card = screen.getByRole('article');
+            expect(card).not.toHaveClass('ds-card__container--clickable');
+            expect(card).toHaveClass('ds-card__container--disabled');
+        });
+        test('sets correct tabIndex for clickable card', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { onClick: mockClick }));
+            const card = screen.getByRole('article');
+            expect(card).toHaveAttribute('tabIndex', '0');
+        });
+        test('sets correct tabIndex for non-clickable card', () => {
+            render(_jsx(Card, {}));
+            const card = screen.getByRole('article');
+            expect(card).toHaveAttribute('tabIndex', '-1');
+        });
+        test('sets correct tabIndex for disabled card', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { onClick: mockClick, disabled: true }));
+            const card = screen.getByRole('article');
+            expect(card).toHaveAttribute('tabIndex', '-1');
+        });
+        test('has correct aria-label', () => {
+            render(_jsx(Card, {}));
+            const card = screen.getByRole('article');
+            expect(card).toHaveAttribute('aria-label', 'Card');
+        });
+    });
+    describe('Event handler edge cases', () => {
+        test('handles onClick without onKeyDown', () => {
+            const mockClick = vi.fn();
+            render(_jsx(Card, { title: "Click only", onClick: mockClick }));
+            const card = screen.getByRole('article');
+            fireEvent.click(card);
+            expect(mockClick).toHaveBeenCalledTimes(1);
+        });
+        test('handles onKeyDown without onClick', () => {
+            const mockKeyDown = vi.fn();
+            render(_jsx(Card, { title: "KeyDown only", onKeyDown: mockKeyDown }));
+            const card = screen.getByRole('article');
+            fireEvent.keyDown(card, { key: 'Enter' });
+            // Should not be called because card is not clickable (no onClick)
+            expect(mockKeyDown).not.toHaveBeenCalled();
+        });
+        test('does not throw error when clicking card without handlers', () => {
+            render(_jsx(Card, { title: "No handlers" }));
+            const card = screen.getByRole('article');
+            expect(() => fireEvent.click(card)).not.toThrow();
+        });
+    });
+});
+//# sourceMappingURL=Card.test.js.map

package/dist/components/card/Card.test.js.map

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

package/dist/components/formField/FormField.d.ts

@@ -0,0 +1,20 @@
+import { type TextInputProps } from './inputs/text/TextInput';
+import { type TextAreaProps } from './inputs/textArea/TextArea';
+type FormFieldProps = {
+    className?: string;
+    label?: string;
+    id?: string;
+    fieldDescription?: React.ReactNode;
+    helperLinkText?: string;
+    helperLinkUrl?: string;
+    errorText?: string;
+} & ({
+    inputType?: 'text';
+    inputProps?: TextInputProps;
+} | {
+    inputType?: 'textarea';
+    inputProps?: TextAreaProps;
+});
+export declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FormField.d.ts.map

package/dist/components/formField/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE1E,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,CACzD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAqD9C,CAAC"}

package/dist/components/formField/FormField.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Label } from './label/Label';
+import { Icon } from '../icon/Icon';
+import { TextInput } from './inputs/text/TextInput';
+import { TextArea } from './inputs/textArea/TextArea';
+export const FormField = (props) => {
+    const { className, label, id, inputType = 'text', helperLinkText, helperLinkUrl, errorText, inputProps, fieldDescription } = props;
+    const classes = classNames('ds-form-field', className);
+    const describedByIds = [];
+    if (fieldDescription) {
+        describedByIds.push(`${id}-description`);
+    }
+    if (errorText) {
+        describedByIds.push(`${id}-error`);
+    }
+    const sharedProps = {
+        id,
+        'aria-describedby': describedByIds.join(' '),
+        'hasError': !!errorText,
+        'aria-invalid': !!errorText,
+    };
+    return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
+};
+//# sourceMappingURL=FormField.js.map

package/dist/components/formField/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAuB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAsB,MAAM,4BAA4B,CAAC;AAe1E,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnI,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,gBAAgB,EAAE,CAAC;QACrB,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QACd,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,MAAM,WAAW,GAAG;QAClB,EAAE;QACF,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,SAAS;QACvB,cAAc,EAAE,CAAC,CAAC,SAAS;KAC5B,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,CACR,KAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YACf,KAAK,GACA,CACT,EACA,gBAAgB,IAAI,CACnB,eAAM,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,4BAA4B,YAAE,gBAAgB,GAAQ,CAChG,EACA,SAAS,KAAK,MAAM,IAAI,CACvB,KAAC,SAAS,OAAK,WAAW,KAAO,UAA6B,GAAI,CACnE,EACA,SAAS,KAAK,UAAU,IAAI,CAC3B,KAAC,QAAQ,OAAK,WAAW,KAAO,UAA4B,GAAI,CACjE,EACA,CAAC,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,SAAS,CAAC,IAAI,CACnD,eAAK,SAAS,EAAC,wBAAwB,aACpC,SAAS,IAAI,CACZ,gBAAM,SAAS,EAAC,+BAA+B,EAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,aAC/D,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,EACvC,SAAS,IACL,CACR,EACA,cAAc,IAAI,aAAa,IAAI,CAClC,aAAG,IAAI,EAAE,aAAa,gBAAc,GAAG,KAAK,cAAc,EAAE,SAAS,EAAC,gCAAgC,aACnG,cAAc,EACd,GAAG,EACJ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,IACtC,CACL,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/FormField.stories.d.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormField } from './FormField';
+declare const meta: Meta<typeof FormField>;
+export declare const Default: {
+    args: {
+        id: string;
+        label: string;
+        inputProps: {
+            placeholder: string;
+            onChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        };
+        helperLinkText: string;
+        helperLinkUrl: string;
+        errorText: string;
+        fieldDescription: string;
+        inputType: string;
+    };
+    argTypes: {
+        helperLinkText: {
+            control: string;
+            description: string;
+        };
+        helperLinkUrl: {
+            control: string;
+            description: string;
+        };
+        errorText: {
+            control: string;
+            description: string;
+        };
+        fieldDescription: {
+            control: string;
+            description: string;
+        };
+        inputType: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        'inputProps.size': {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        'inputProps.disabled': {
+            control: string;
+            description: string;
+        };
+        'inputProps.placeholder': {
+            control: string;
+            description: string;
+        };
+    };
+};
+type Story = StoryObj<typeof meta>;
+export declare const FormExample: Story;
+export default meta;
+//# sourceMappingURL=FormField.stories.d.ts.map

package/dist/components/formField/FormField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,WAAW,EAAE,KA4CzB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/formField/FormField.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fn } from 'storybook/test';
+import { FormField } from './FormField';
+const meta = {
+    title: 'Components/FormField',
+    component: FormField,
+};
+export const Default = {
+    args: {
+        id: 'text-input',
+        label: 'Text Input',
+        inputProps: {
+            placeholder: 'Enter your text',
+            onChange: fn(),
+        },
+        helperLinkText: 'More information',
+        helperLinkUrl: 'https://www.google.com',
+        errorText: 'This is some error text',
+        fieldDescription: 'This is some descriptive text for the field',
+        inputType: 'text',
+    },
+    argTypes: {
+        'helperLinkText': {
+            control: 'text',
+            description: 'Helper link text',
+        },
+        'helperLinkUrl': {
+            control: 'text',
+            description: 'Helper link URL',
+        },
+        'errorText': {
+            control: 'text',
+            description: 'Error text',
+        },
+        'fieldDescription': {
+            control: 'text',
+            description: 'Field description',
+        },
+        'inputType': {
+            control: 'select',
+            options: ['text', 'textarea'],
+            description: 'Input type',
+        },
+        'inputProps.size': {
+            control: 'select',
+            options: ['M', 'S'],
+            description: 'Input size',
+        },
+        'inputProps.disabled': {
+            control: 'boolean',
+            description: 'Disable the input',
+        },
+        'inputProps.placeholder': {
+            control: 'text',
+            description: 'Input placeholder text',
+        },
+    },
+};
+// Form example with multiple inputs
+export const FormExample = {
+    render: () => (_jsxs("div", { style: { width: '400px', display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(FormField, { id: "first-name", label: "First Name", inputProps: {
+                    placeholder: 'Enter your first name',
+                } }), _jsx(FormField, { id: "last-name", label: "Last Name", inputProps: {
+                    placeholder: 'Enter your first name',
+                } }), _jsx(FormField, { id: "email", label: "Email", inputProps: {
+                    placeholder: 'Enter your email',
+                }, helperLinkText: "More information", helperLinkUrl: "https://www.google.com" }), _jsx(FormField, { id: "password", label: "Password", inputProps: {
+                    placeholder: 'Enter your first name',
+                    type: 'password',
+                } }), _jsx(FormField, { id: "message", label: "Message", inputType: "textarea", inputProps: {
+                    placeholder: 'Enter a lovely message',
+                } })] })),
+};
+export default meta;
+//# sourceMappingURL=FormField.stories.js.map

package/dist/components/formField/FormField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.stories.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE;YACV,WAAW,EAAE,iBAAiB;YAC9B,QAAQ,EAAE,EAAE,EAAE;SACf;QACD,cAAc,EAAE,kBAAkB;QAClC,aAAa,EAAE,wBAAwB;QACvC,SAAS,EAAE,yBAAyB;QACpC,gBAAgB,EAAE,6CAA6C;QAC/D,SAAS,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,YAAY;SAC1B;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mBAAmB;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;YAC7B,WAAW,EAAE,YAAY;SAC1B;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,WAAW,EAAE,YAAY;SAC1B;QACD,qBAAqB,EAAE;YACrB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mBAAmB;SACjC;QACD,wBAAwB,EAAE;YACxB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;SACtC;KACF;CACF,CAAC;AAIF,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnF,KAAC,SAAS,IACR,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE;oBACV,WAAW,EAAE,uBAAuB;iBACrC,GACD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,UAAU,EAAE;oBACV,WAAW,EAAE,uBAAuB;iBACrC,GACD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,OAAO,EACb,UAAU,EAAE;oBACV,WAAW,EAAE,kBAAkB;iBAChC,EACD,cAAc,EAAC,kBAAkB,EACjC,aAAa,EAAC,wBAAwB,GACtC,EACF,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,UAAU,EAAE;oBACV,WAAW,EAAE,uBAAuB;oBACpC,IAAI,EAAE,UAAU;iBACjB,GACD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,UAAU,EACpB,UAAU,EAAE;oBACV,WAAW,EAAE,wBAAwB;iBACtC,GACD,IACE,CACP;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/formField/FormField.test.d.ts

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

package/dist/components/formField/FormField.test.d.ts.map

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

package/dist/components/formField/FormField.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test, describe } from 'vitest';
+import { FormField } from './FormField';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+describe('Input component', () => {
+    test('renders a form field', () => {
+        render(_jsx(FormField, { inputType: "text", label: "Email", id: "niceid" }));
+        expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    });
+    test('renders helper link when provided', () => {
+        render(_jsx(FormField, { helperLinkText: "This is helper text", helperLinkUrl: "https://www.google.com", inputProps: { placeholder: 'Enter text' } }));
+        expect(screen.getByText('This is helper text')).toBeInTheDocument();
+    });
+    test('renders error text when provided', () => {
+        render(_jsx(FormField, { errorText: "This is an error", inputProps: { placeholder: 'Enter text' } }));
+        expect(screen.getByText('This is an error')).toBeInTheDocument();
+        const input = screen.getByPlaceholderText('Enter text');
+        expect(input).toHaveClass('ds-input--error');
+    });
+    test('applies disabled class and attribute', () => {
+        render(_jsx(FormField, { id: "niceid", inputProps: { disabled: true, placeholder: 'Enter text' } }));
+        const input = screen.getByPlaceholderText('Enter text');
+        expect(input).toBeDisabled();
+    });
+    test('renders a textinput by default', () => {
+        render(_jsx(FormField, { id: "niceid", inputProps: { placeholder: 'Enter text' } }));
+        const input = screen.getByPlaceholderText('Enter text');
+        expect(input).toHaveClass('ds-text-input');
+    });
+    test('renders a textarea when inputType is textarea', () => {
+        render(_jsx(FormField, { id: "niceid", inputType: "textarea", inputProps: { placeholder: 'Enter text' } }));
+        const input = screen.getByPlaceholderText('Enter text');
+        expect(input).toHaveClass('ds-textarea');
+    });
+});
+//# sourceMappingURL=FormField.test.js.map

package/dist/components/formField/FormField.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.test.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,IAAI,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAChC,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,QAAQ,GAAG,CAAC,CAAC;QACjE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,KAAC,SAAS,IAAC,cAAc,EAAC,qBAAqB,EAAC,aAAa,EAAC,wBAAwB,EAAC,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,GAAI,CAAC,CAAC;QAC7I,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,EAAC,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,GAAI,CAAC,CAAC;QAC9F,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACxD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAChD,MAAM,CAAC,KAAC,SAAS,IAAC,EAAE,EAAC,QAAQ,EAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,GAAI,CAAC,CAAC;QAC7F,MAAM,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACxD,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gCAAgC,EAAE,GAAG,EAAE;QAC1C,MAAM,CAAC,KAAC,SAAS,IAAC,EAAE,EAAC,QAAQ,EAAC,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,GAAI,CAAC,CAAC;QAC7E,MAAM,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACxD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACzD,MAAM,CAAC,KAAC,SAAS,IAAC,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,GAAI,CAAC,CAAC;QAClG,MAAM,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACxD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/formField/inputs/text/TextInput.d.ts

@@ -0,0 +1,7 @@
+import { type InputHTMLAttributes } from 'react';
+export type TextInputProps = {
+    size?: 'M' | 'S';
+    hasError?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export declare const TextInput: (props: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/formField/inputs/text/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/text/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CA0B9C,CAAC"}