@amsterdam/design-system-react 0.1.2 → 0.1.4

package/README.md

@@ -8,7 +8,7 @@ The CSS components that implement the Utrecht design system class names are publ
 
 ## Stability of the components
 
-The React components are released as _alpha_ version, which means the components are still work in progress and it is likely that some APIs will between releases.
+The React components are released as _alpha_ version, which means the components are still work in progress and it is likely that some APIs will change between releases.
 
 Make sure you specify the exact version as dependency, so you can schedule to upgrade to the latest version when you have time to test for regression bugs.
 
@@ -16,21 +16,18 @@ TODO: add alpha, beta and production statuses to components. Also show in Storyb
 
 ## Getting started
 
-TODO: These packages haven't been published yet, so the following doesn't work at the moment. You can currently only use these instructions when locally linking the packages to a consumer project.
-
 Install the packages you need, for instance:
 
-`npm install @amsterdam/design-system-react @amsterdam/design-system-css @amsterdam/design-system-tokens @amsterdam/design-system-font`
+`npm install @amsterdam/design-system-react @amsterdam/design-system-css @amsterdam/design-system-tokens @amsterdam/design-system-assets`
 
 Import the packages you need.
 
 ```javascript
 import { Paragraph } from "@amsterdam/design-system-react";
 
-import "@amsterdam/design-system-css/dist/document/document.css";
 import "@amsterdam/design-system-css/dist/paragraph/paragraph.css";
 import "@amsterdam/design-system-tokens/dist/root.css";
-import "@amsterdam/design-system-font/static/index.css";
+import "@amsterdam/design-system-assets/font/index.css";
 
 function App() {
   return <Paragraph>Hello world</Paragraph>;

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { AccordionSection } from './AccordionSection';
+import { HeadingLevel } from '../Heading/Heading';
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    headingLevel: HeadingLevel;
+    section?: boolean;
+}
+export interface AccordionComponent extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLDivElement>> & RefAttributes<HTMLDivElement> & AccordionProps> {
+    Section: typeof AccordionSection;
+}
+export declare const Accordion: AccordionComponent;

package/dist/Accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Accordion/AccordionContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HeadingLevel } from '../Heading/Heading';
+export interface AccordionContextValue {
+    headingLevel: HeadingLevel;
+    section?: boolean;
+}
+declare const AccordionContext: import("react").Context<AccordionContextValue>;
+export default AccordionContext;

package/dist/Accordion/AccordionSection.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export interface AccordionSectionProps extends HTMLAttributes<HTMLElement> {
+    label: string;
+    expanded?: boolean;
+}
+export declare const AccordionSection: import("react").ForwardRefExoticComponent<AccordionSectionProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Accordion/AccordionSection.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export type { AccordionSectionProps } from './AccordionSection';

package/dist/Accordion/useFocusWithArrow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Accordion/useFocusWithArrows.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import type { KeyboardEvent, RefObject } from 'react';
+export declare const KeyboardKeys: {
+    ArrowUp: string;
+    ArrowDown: string;
+    ArrowRight: string;
+    ArrowLeft: string;
+    Home: string;
+    End: string;
+};
+/**
+ * Focus on children with arrow keys and home / end buttons.
+ *
+ * @param ref Component ref
+ * @param rotating Jump to first item from last or vice versa
+ * @param horizontally In case you need to navigate horizontally, using left / right arrow buttons
+ */
+declare const useFocusWithArrows: (ref: RefObject<HTMLDivElement>, rotating?: boolean, horizontally?: boolean) => {
+    keyDown: (e: KeyboardEvent) => void;
+};
+export default useFocusWithArrows;

package/dist/Button/Button.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/FormLabel/FormLabel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { LabelHTMLAttributes } from 'react';
+export declare const FormLabel: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/FormLabel/FormLabel.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormLabel/index.d.ts

@@ -0,0 +1 @@
+export { FormLabel } from './FormLabel';

package/dist/Heading/Heading.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export type HeadingLevel = 1 | 2 | 3 | 4;
+type Size = 'level-1' | 'level-2' | 'level-3' | 'level-4';
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Het hiërarchische niveau van de titel.
+     */
+    level?: HeadingLevel;
+    /**
+     * De visuele grootte van de titel.
+     * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
+     */
+    size?: Size;
+}
+export declare function getHeadingElement(level: HeadingLevel): "h2" | "h3" | "h4" | "h1";
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+export {};

package/dist/Heading/Heading.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export type { HeadingProps } from './Heading';
+export { Heading } from './Heading';

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: 'level-3' | 'level-4' | 'level-5' | 'level-6' | 'level-7';
+    svg: Function;
+}
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLElement>>;

package/dist/Icon/Icon.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';

package/dist/Link/Link.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { AnchorHTMLAttributes } from 'react';
+type LinkOnBackground = 'default' | 'light' | 'dark';
+type LinkVariant = 'standalone' | 'standaloneBold' | 'inline' | 'inList';
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> {
+    variant?: LinkVariant;
+    onBackground?: LinkOnBackground;
+}
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/Link/Link.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps } from './Link';

package/dist/List.d.ts

@@ -1,5 +1,8 @@
-/**
- * @license EUPL-1.2
- */
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const List: ({ children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLUListElement>>) => JSX.Element;
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export declare const List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/{Paragraph.d.ts → Paragraph/Paragraph.d.ts}

@@ -1,10 +1,12 @@
-/**
- * @license EUPL-1.2
- */
-import { HTMLAttributes } from 'react';
-export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
-    variant?: 'intro' | 'small';
-}
-export declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLParagraphElement>>;
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+    size?: 'small' | 'large';
+}
+export declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/Paragraph/Paragraph.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Paragraph/index.d.ts

@@ -0,0 +1,2 @@
+export { Paragraph } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';

package/dist/UnorderedList/UnorderedList.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import React, { HTMLAttributes, LiHTMLAttributes, PropsWithChildren } from 'react';
+interface UnorderedListComponent extends React.ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> {
+    Item: typeof UnorderedListItem;
+}
+export declare const UnorderedList: UnorderedListComponent;
+export type UnorderedListItemProps = LiHTMLAttributes<HTMLLIElement>;
+export declare const UnorderedListItem: React.ForwardRefExoticComponent<UnorderedListItemProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLLIElement>>;
+export {};

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/UnorderedList/index.d.ts

@@ -0,0 +1 @@
+export { UnorderedList } from './UnorderedList';