@amsterdam/design-system-react 2.1.0 → 3.0.0

package/dist/TextArea/TextArea.test.js

@@ -1,105 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { createRef, useState } from 'react';
-import { TextArea } from './TextArea';
-import '@testing-library/jest-dom';
-describe('Text area', () => {
-    it('renders', () => {
-        render(_jsx(TextArea, {}));
-        const component = screen.getByRole('textbox');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(TextArea, {}));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-area');
-    });
-    it('renders an extra class name', () => {
-        render(_jsx(TextArea, { className: "extra" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-area extra');
-    });
-    it('renders a textarea with horizontal resize', () => {
-        render(_jsx(TextArea, { resize: "horizontal" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-area ams-text-area--resize-horizontal');
-    });
-    it('renders a textarea with vertical resize', () => {
-        render(_jsx(TextArea, { resize: "vertical" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-area ams-text-area--resize-vertical');
-    });
-    it('renders a textarea with no resize', () => {
-        render(_jsx(TextArea, { resize: "none" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-area ams-text-area--resize-none');
-    });
-    it('renders a textarea with cols class when cols prop is provided', () => {
-        render(_jsx(TextArea, { cols: 10 }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-area ams-text-area--cols');
-    });
-    it('can be controlled', async () => {
-        function ControlledComponent() {
-            const [value, setValue] = useState('Hello');
-            return _jsx(TextArea, { onChange: (e) => setValue(e.target.value), value: value });
-        }
-        render(_jsx(ControlledComponent, {}));
-        const componentText = screen.getByDisplayValue('Hello');
-        expect(componentText).toBeInTheDocument();
-        const component = screen.getByRole('textbox');
-        if (component) {
-            await userEvent.type(component, ', World!');
-        }
-        const newComponentText = screen.getByDisplayValue('Hello, World!');
-        expect(newComponentText).toBeInTheDocument();
-    });
-    it('should not update the value when disabled', async () => {
-        render(_jsx(TextArea, { defaultValue: "Hello", disabled: true }));
-        const component = screen.getByRole('textbox');
-        if (component) {
-            await userEvent.type(component, ', World!');
-        }
-        expect(component).toHaveValue('Hello');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(TextArea, { ref: ref }));
-        const component = screen.getByRole('textbox');
-        expect(ref.current).toBe(component);
-    });
-    it('renders bidirectional by default using `dir="auto"`', () => {
-        render(_jsx(TextArea, {}));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveAttribute('dir', 'auto');
-    });
-    it('renders left-to-right by using `dir="ltr"`', () => {
-        render(_jsx(TextArea, { dir: "ltr" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveAttribute('dir', 'ltr');
-    });
-    describe('Invalid state', () => {
-        it('is not invalid by default', () => {
-            render(_jsx(TextArea, {}));
-            const component = screen.getByRole('textbox');
-            expect(component).not.toBeInvalid();
-        });
-        it('can have an invalid state', () => {
-            render(_jsx(TextArea, { invalid: true }));
-            const component = screen.getByRole('textbox');
-            expect(component).toHaveAttribute('aria-invalid');
-            expect(component).toBeInvalid();
-        });
-        it('omits non-essential invalid attributes when not invalid', () => {
-            render(_jsx(TextArea, { invalid: false }));
-            const component = screen.getByRole('textbox');
-            expect(component).not.toHaveAttribute('aria-invalid');
-        });
-    });
-});

package/dist/TextInput/TextInput.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/TextInput/TextInput.test.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { createRef, useState } from 'react';
-import { TextInput, textInputTypes } from './TextInput';
-import '@testing-library/jest-dom';
-describe('Text input', () => {
-    it('renders', () => {
-        render(_jsx(TextInput, {}));
-        const component = screen.getByRole('textbox');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(TextInput, {}));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-input');
-    });
-    it('renders an extra class name', () => {
-        render(_jsx(TextInput, { className: "extra" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('ams-text-input extra');
-    });
-    it('should be working in a controlled state', async () => {
-        function ControlledComponent() {
-            const [value, setValue] = useState('Hello');
-            return _jsx(TextInput, { onChange: (e) => setValue(e.target.value), value: value });
-        }
-        render(_jsx(ControlledComponent, {}));
-        const componentText = screen.getByDisplayValue('Hello');
-        expect(componentText).toBeInTheDocument();
-        const component = screen.getByRole('textbox');
-        if (component) {
-            await userEvent.type(component, ', World!');
-        }
-        const newComponentText = screen.getByDisplayValue('Hello, World!');
-        expect(newComponentText).toBeInTheDocument();
-    });
-    it('should not update the value when disabled', async () => {
-        render(_jsx(TextInput, { defaultValue: "Hello", disabled: true }));
-        const component = screen.getByRole('textbox');
-        if (component) {
-            await userEvent.type(component, ', World!');
-        }
-        expect(component).toHaveValue('Hello');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(TextInput, { ref: ref }));
-        const component = screen.getByRole('textbox');
-        expect(ref.current).toBe(component);
-    });
-    it('renders bidirectional by default using `dir="auto"`', () => {
-        render(_jsx(TextInput, {}));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveAttribute('dir', 'auto');
-    });
-    it('renders left-to-right by using `dir="ltr"`', () => {
-        render(_jsx(TextInput, { dir: "ltr" }));
-        const component = screen.getByRole('textbox');
-        expect(component).toHaveAttribute('dir', 'ltr');
-    });
-    describe('Invalid state', () => {
-        it('is not invalid by default', () => {
-            render(_jsx(TextInput, {}));
-            const component = screen.getByRole('textbox');
-            expect(component).not.toBeInvalid();
-        });
-        it('can have an invalid state', () => {
-            render(_jsx(TextInput, { invalid: true }));
-            const component = screen.getByRole('textbox');
-            expect(component).toHaveAttribute('aria-invalid');
-            expect(component).toBeInvalid();
-        });
-        it('omits non-essential invalid attributes when not invalid', () => {
-            render(_jsx(TextInput, { invalid: false }));
-            const component = screen.getByRole('textbox');
-            expect(component).not.toHaveAttribute('aria-invalid');
-        });
-    });
-    describe('Type', () => {
-        textInputTypes.map((type) => it(`sets the ‘${type}’ type`, () => {
-            render(_jsx(TextInput, { type: type }));
-            const component = screen.getByRole('textbox');
-            expect(component).toHaveAttribute('type', type);
-        }));
-    });
-});

package/dist/TimeInput/TimeInput.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/TimeInput/TimeInput.test.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render } from '@testing-library/react';
-import { createRef } from 'react';
-import { TimeInput } from './TimeInput';
-import '@testing-library/jest-dom';
-describe('Time input', () => {
-    it('renders', () => {
-        const { container } = render(_jsx(TimeInput, {}));
-        const component = container.querySelector(':only-child');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(TimeInput, {}));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-time-input');
-    });
-    it('renders an extra class name', () => {
-        const { container } = render(_jsx(TimeInput, { className: "extra" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-time-input extra');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        const { container } = render(_jsx(TimeInput, { ref: ref }));
-        const component = container.querySelector(':only-child');
-        expect(ref.current).toBe(component);
-    });
-    describe('Invalid state', () => {
-        it('is not invalid by default', () => {
-            const { container } = render(_jsx(TimeInput, {}));
-            const component = container.querySelector(':only-child');
-            expect(component).not.toBeInvalid();
-        });
-        it('can have an invalid state', () => {
-            const { container } = render(_jsx(TimeInput, { invalid: true }));
-            const component = container.querySelector(':only-child');
-            expect(component).toHaveAttribute('aria-invalid');
-            expect(component).toBeInvalid();
-        });
-        it('omits non-essential invalid attributes when not invalid', () => {
-            const { container } = render(_jsx(TimeInput, { invalid: false }));
-            const component = container.querySelector(':only-child');
-            expect(component).not.toHaveAttribute('aria-invalid');
-        });
-    });
-});

package/dist/UnorderedList/UnorderedList.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/UnorderedList/UnorderedList.test.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { UnorderedList } from './UnorderedList';
-import '@testing-library/jest-dom';
-describe('Unordered list', () => {
-    it('renders an HTML ul element', () => {
-        const { container } = render(_jsx(UnorderedList, {}));
-        const list = container.querySelector('ul:only-child');
-        expect(list).toBeInTheDocument();
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(UnorderedList, {}));
-        const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-unordered-list');
-    });
-    it('renders a no markers class', () => {
-        render(_jsx(UnorderedList, { markers: false }));
-        const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-unordered-list--no-markers');
-    });
-    it('renders the class name for inverse color', () => {
-        render(_jsx(UnorderedList, { color: "inverse" }));
-        const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-unordered-list--inverse');
-    });
-    it('renders an extra class name', () => {
-        render(_jsx(UnorderedList, { className: "extra" }));
-        const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-unordered-list extra');
-    });
-    it('renders its subcomponent', () => {
-        const listItems = ['Item 1', 'Item 2', 'Item 3'];
-        const { container } = render(_jsx(UnorderedList, { children: listItems.map((item) => (_jsx(UnorderedList.Item, { children: item }, item))) }));
-        const list = screen.getByRole('list');
-        const items = container.querySelectorAll('.ams-unordered-list__item');
-        expect(list).toBeInTheDocument();
-        expect(items.length).toBe(3);
-    });
-    it('renders the small size class', () => {
-        render(_jsx(UnorderedList, { size: "small" }));
-        const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-unordered-list--small');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(UnorderedList, { ref: ref }));
-        const component = screen.getByRole('list');
-        expect(ref.current).toBe(component);
-    });
-});

package/dist/UnorderedList/UnorderedListItem.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/UnorderedList/UnorderedListItem.test.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { UnorderedListItem } from './UnorderedListItem';
-import '@testing-library/jest-dom';
-describe('Ordered list item', () => {
-    it('renders', () => {
-        render(_jsx(UnorderedListItem, {}));
-        const component = screen.getByRole('listitem');
-        expect(component).toBeInTheDocument();
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(UnorderedListItem, {}));
-        const component = screen.getByRole('listitem');
-        expect(component).toHaveClass('ams-unordered-list__item');
-    });
-    it('renders an extra class name', () => {
-        render(_jsx(UnorderedListItem, { className: "extra" }));
-        const component = screen.getByRole('listitem');
-        expect(component).toHaveClass('ams-unordered-list__item extra');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(UnorderedListItem, { ref: ref }));
-        const component = screen.getByRole('listitem');
-        expect(ref.current).toBe(component);
-    });
-});

package/dist/common/formatFileSize.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-export {};

package/dist/common/formatFileSize.test.js

@@ -1,22 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { formatFileSize } from './formatFileSize';
-describe('formatFileSize', () => {
-    it('formats bytes correctly', () => {
-        expect(formatFileSize(500)).toBe('500 bytes');
-    });
-    it('formats kilobytes correctly', () => {
-        expect(formatFileSize(1024, 1)).toBe('1 kB');
-        expect(formatFileSize(2048, 1)).toBe('2 kB');
-    });
-    it('formats megabytes correctly', () => {
-        expect(formatFileSize(1048576, 1)).toBe('1 MB');
-        expect(formatFileSize(2097152, 1)).toBe('2 MB');
-    });
-    it('formats gigabytes correctly', () => {
-        expect(formatFileSize(1073741824, 1)).toBe('1 GB');
-        expect(formatFileSize(2147483648, 1)).toBe('2 GB');
-    });
-});

package/dist/common/formatFileType.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-export {};

package/dist/common/formatFileType.test.js

@@ -1,27 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { formatFileType } from './formatFileType';
-describe('formatFileType', () => {
-    it('formats image types correctly', () => {
-        expect(formatFileType('image/gif')).toBe('gif');
-        expect(formatFileType('image/jpeg')).toBe('jpg');
-        expect(formatFileType('image/png')).toBe('png');
-    });
-    it('formats text types correctly', () => {
-        expect(formatFileType('text/plain')).toBe('txt');
-    });
-    it('formats application types correctly', () => {
-        expect(formatFileType('application/pdf')).toBe('pdf');
-        expect(formatFileType('application/msword')).toBe('Word');
-        expect(formatFileType('application/vnd.openxmlformats-officedocument.wordprocessingml.document')).toBe('Word');
-        expect(formatFileType('application/vnd.ms-excel')).toBe('Excel');
-        expect(formatFileType('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')).toBe('Excel');
-        expect(formatFileType('application/vnd.ms-powerpoint')).toBe('PowerPoint');
-        expect(formatFileType('application/vnd.openxmlformats-officedocument.presentationml.presentation')).toBe('PowerPoint');
-    });
-    it('returns the original file type for unknown types', () => {
-        expect(formatFileType('unknown/type')).toBe('Document');
-    });
-});

package/dist/common/useKeyboardFocus.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-export {};

package/dist/common/useKeyboardFocus.test.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { fireEvent, render } from '@testing-library/react';
-import { useRef } from 'react';
-import { KeyboardKeys, useKeyboardFocus } from './useKeyboardFocus';
-describe('use focus with arrows', () => {
-    const onFocusOneMock = jest.fn();
-    const onFocusTwoMock = jest.fn();
-    const onFocusThreeMock = jest.fn();
-    const Component = ({ rotate = undefined }) => {
-        const ref = useRef(null);
-        const { keyDown } = useKeyboardFocus(ref, {
-            rotating: rotate,
-        });
-        return (_jsxs("div", { onKeyDown: keyDown, ref: ref, role: "menu", tabIndex: 0, children: [_jsx("button", { onFocus: onFocusOneMock, type: "button", children: "One" }), _jsx("button", { onFocus: onFocusTwoMock, type: "button", children: "Two" }), _jsx("button", { onFocus: onFocusThreeMock, type: "button", children: "Three" })] }));
-    };
-    afterEach(() => {
-        onFocusOneMock.mockReset();
-        onFocusTwoMock.mockReset();
-        onFocusThreeMock.mockReset();
-    });
-    it('sets focus when using arrow keys', () => {
-        const { container } = render(_jsx(Component, {}));
-        const firstChild = container.firstChild;
-        expect(onFocusOneMock).not.toHaveBeenCalled();
-        // 4 times, so we can check if there are no other elements focused after reaching the last one
-        Array.from(Array(4).keys()).forEach(() => {
-            fireEvent.keyDown(firstChild, {
-                key: KeyboardKeys.ArrowDown,
-            });
-        });
-        expect(onFocusOneMock).toHaveBeenCalledTimes(1);
-        expect(onFocusTwoMock).toHaveBeenCalledTimes(1);
-        expect(onFocusThreeMock).toHaveBeenCalledTimes(1);
-        // Same here
-        Array.from(Array(4).keys()).forEach(() => {
-            fireEvent.keyDown(firstChild, {
-                key: KeyboardKeys.ArrowUp,
-            });
-        });
-        expect(onFocusTwoMock).toHaveBeenCalledTimes(2);
-        expect(onFocusOneMock).toHaveBeenCalledTimes(2);
-    });
-    it('rotates focused elements', () => {
-        const { container } = render(_jsx(Component, { rotate: true }));
-        const firstChild = container.firstChild;
-        Array.from(Array(9).keys()).forEach(() => {
-            fireEvent.keyDown(firstChild, {
-                key: KeyboardKeys.ArrowDown,
-            });
-        });
-        expect(onFocusOneMock).toHaveBeenCalledTimes(3);
-        Array.from(Array(9).keys()).forEach(() => {
-            fireEvent.keyDown(firstChild, {
-                key: KeyboardKeys.ArrowUp,
-            });
-        });
-        expect(onFocusOneMock).toHaveBeenCalledTimes(6);
-    });
-    it('sets focus to first element when using "Home" key', () => {
-        const { container } = render(_jsx(Component, {}));
-        const firstChild = container.firstChild;
-        fireEvent.keyDown(firstChild, {
-            key: KeyboardKeys.Home,
-        });
-        expect(onFocusOneMock).toHaveBeenCalledTimes(1);
-    });
-    it('sets focus to last element when using "End" key', () => {
-        const { container } = render(_jsx(Component, {}));
-        const firstChild = container.firstChild;
-        fireEvent.keyDown(firstChild, {
-            key: KeyboardKeys.End,
-        });
-        expect(onFocusThreeMock).toHaveBeenCalledTimes(1);
-    });
-});