@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/TextInput/TextInput.d.ts

@@ -11,6 +11,9 @@ export type TextInputProps = {
     /** The kind of data that the user should provide. */
     type?: TextInputType;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-input--docs Text Input docs at Amsterdam Design System}
+ */
 export declare const TextInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;

package/dist/TextInput/TextInput.js

@@ -6,5 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 export const textInputTypes = ['email', 'tel', 'text', 'url'];
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-input--docs Text Input docs at Amsterdam Design System}
+ */
 export const TextInput = forwardRef(({ className, dir, invalid, type = 'text', ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-text-input', className), dir: dir ?? 'auto', ref: ref, type: type })));
 TextInput.displayName = 'TextInput';

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

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

package/dist/TextInput/TextInput.test.js

@@ -1,4 +1,8 @@
 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';
@@ -16,11 +20,10 @@ describe('Text input', () => {
         const component = screen.getByRole('textbox');
         expect(component).toHaveClass('ams-text-input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(TextInput, { className: "extra" }));
         const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-text-input');
+        expect(component).toHaveClass('ams-text-input extra');
     });
     it('should be working in a controlled state', async () => {
         function ControlledComponent() {

package/dist/TextInput/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TextInput } from './TextInput';
 export type { TextInputProps } from './TextInput';

package/dist/TextInput/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TextInput } from './TextInput';

package/dist/TimeInput/TimeInput.d.ts

@@ -7,6 +7,9 @@ export type TimeInputProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-time-input--docs Time Input docs at Amsterdam Design System}
+ */
 export declare const TimeInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;

package/dist/TimeInput/TimeInput.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-time-input--docs Time Input docs at Amsterdam Design System}
+ */
 export const TimeInput = forwardRef(({ className, invalid, ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-time-input', className), ref: ref, type: "time" })));
 TimeInput.displayName = 'TimeInput';

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

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

package/dist/TimeInput/TimeInput.test.js

@@ -1,4 +1,8 @@
 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';
@@ -15,7 +19,7 @@ describe('Time input', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-time-input');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/TimeInput/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TimeInput } from './TimeInput';
 export type { TimeInputProps } from './TimeInput';

package/dist/TimeInput/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TimeInput } from './TimeInput';

package/dist/UnorderedList/UnorderedList.d.ts

@@ -11,6 +11,9 @@ export type UnorderedListProps = {
     /** The size of the text. */
     size?: 'small';
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-unordered-list--docs Unordered List docs at Amsterdam Design System}
+ */
 export declare const UnorderedList: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/UnorderedList/UnorderedList.js

@@ -10,4 +10,7 @@ const UnorderedListRoot = forwardRef(({ children, className, color, markers = tr
     return (_jsx("ul", { className: clsx('ams-unordered-list', color && `ams-unordered-list--${color}`, !markers && 'ams-unordered-list--no-markers', size && `ams-unordered-list--${size}`, className), ref: ref, ...restProps, children: children }));
 });
 UnorderedListRoot.displayName = 'UnorderedList';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-unordered-list--docs Unordered List docs at Amsterdam Design System}
+ */
 export const UnorderedList = Object.assign(UnorderedListRoot, { Item: UnorderedListItem });

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

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

package/dist/UnorderedList/UnorderedList.test.js

@@ -1,4 +1,8 @@
 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';
@@ -24,7 +28,7 @@ describe('Unordered list', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-unordered-list--inverse');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(UnorderedList, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-unordered-list extra');

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

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

package/dist/UnorderedList/UnorderedListItem.test.js

@@ -1,4 +1,8 @@
 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';
@@ -14,7 +18,7 @@ describe('Ordered list item', () => {
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-unordered-list__item');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(UnorderedListItem, { className: "extra" }));
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-unordered-list__item extra');

package/dist/UnorderedList/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { UnorderedList } from './UnorderedList';
 export type { UnorderedListProps } from './UnorderedList';
 export type { UnorderedListItemProps } from './UnorderedListItem';

package/dist/UnorderedList/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { UnorderedList } from './UnorderedList';

package/dist/common/accessibility.d.ts

@@ -2,4 +2,12 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export declare const ariaRoleForTag: Record<string, string>;
+export declare const ariaRoleForTag: {
+    article: string;
+    aside: string;
+    footer: string;
+    header: string;
+    main: string;
+    nav: string;
+    section: string;
+};

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

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

package/dist/common/formatFileSize.test.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { formatFileSize } from './formatFileSize';
 describe('formatFileSize', () => {
     it('formats bytes correctly', () => {

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

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

package/dist/common/formatFileType.test.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { formatFileType } from './formatFileType';
 describe('formatFileType', () => {
     it('formats image types correctly', () => {

package/dist/common/types.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export declare const aspectRatioOptions: readonly ["9:16", "3:4", "1:1", "4:3", "16:9", "16:5"];
 export type AspectRatioProps = {
     /** The aspect ratio to display media content in. */

package/dist/common/types.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 // This array is not used to create the aspect ratio CSS classes.
 // If you modify this array, you must also update the
 // aspect ratio CSS classes in /packages/css/src/components/aspect-ratio/aspect-ratio.scss.

package/dist/common/useIsAfterBreakpoint.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 type useIsAfterBreakpointProps = 'medium' | 'wide';
 declare const useIsAfterBreakpoint: (breakpoint: useIsAfterBreakpointProps) => boolean;
 export default useIsAfterBreakpoint;

package/dist/common/useIsAfterBreakpoint.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { useLayoutEffect, useState } from 'react';
 // TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
 const breakpoints = {

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

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

package/dist/common/useKeyboardFocus.test.js

@@ -1,4 +1,8 @@
 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';