@amsterdam/design-system-react 0.1.4 → 0.1.5

package/README.md

@@ -4,7 +4,9 @@
 
 The `@amsterdam/design-system-react` package contains React implementations of various components. You can use this package in React apps.
 
-The CSS components that implement the Utrecht design system class names are published in a separate npm package, so don't forget to install and include `@amsterdam/design-system-css` too for the styling of the white-label components, as well as a package with design tokens for your theme. TODO: make this easier?
+The design tokens used in these components are published in a separate npm package, so don't forget to install and include `@amsterdam/design-system-tokens` too.
+
+<!-- TODO: make this easier? -->
 
 ## Stability of the components
 
@@ -12,20 +14,19 @@ The React components are released as _alpha_ version, which means the components
 
 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.
 
-TODO: add alpha, beta and production statuses to components. Also show in Storybook
+<!-- TODO: add alpha, beta and production statuses to components. Also show in Storybook -->
 
 ## Getting started
 
 Install the packages you need, for instance:
 
-`npm install @amsterdam/design-system-react @amsterdam/design-system-css @amsterdam/design-system-tokens @amsterdam/design-system-assets`
+`npm install @amsterdam/design-system-react @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/paragraph/paragraph.css";
 import "@amsterdam/design-system-tokens/dist/root.css";
 import "@amsterdam/design-system-assets/font/index.css";
 
@@ -35,3 +36,19 @@ function App() {
 
 export default App;
 ```
+
+## Unstyled components
+
+If you need unstyled React components (if you completely want to restyle them yourself, or you can't use style injection in your project because of a strict CSP for example), you can import these as well.
+
+For example, to import an unstyled Paragraph component:
+
+```javascript
+import { Paragraph } from "@amsterdam/design-system-react/unstyled";
+```
+
+If you do want to style unstyled React components using our css, you can add the component css from our `@amsterdam/design-system-css` package, like so:
+
+```javascript
+import "@amsterdam/design-system-css/dist/paragraph/paragraph.css";
+```

package/dist/Blockquote/Blockquote.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { BlockquoteHTMLAttributes } from 'react';
+export interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
+    /**
+     * De kleur van het citaat.
+     * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
+}
+export declare const Blockquote: import("react").ForwardRefExoticComponent<BlockquoteProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLQuoteElement>>;

package/dist/Blockquote/Blockquote.test.d.ts

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

package/dist/Blockquote/index.d.ts

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

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+interface BreadcrumbComponent extends React.ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> {
+    Item: typeof BreadcrumbItem;
+}
+export declare const Breadcrumb: BreadcrumbComponent;
+export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
+    href: string;
+}
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+export {};

package/dist/Breadcrumb/Breadcrumb.test.d.ts

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

package/dist/Breadcrumb/index.d.ts

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

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    invalid?: boolean;
+    indeterminate?: boolean;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Checkbox/Checkbox.test.d.ts

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

package/dist/Checkbox/index.d.ts

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

package/dist/Footer/Footer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+import { GridCellProps } from '../Grid';
+export declare const FooterTop: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & RefAttributes<HTMLDivElement>>;
+export type FooterColumnProps = HTMLAttributes<HTMLDivElement> & GridCellProps;
+export declare const FooterColumn: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & GridCellProps & {
+    children?: import("react").ReactNode;
+} & RefAttributes<HTMLDivElement>>;
+export declare const FooterBottom: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & RefAttributes<HTMLDivElement>>;
+interface FooterComponent extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & RefAttributes<HTMLElement>> {
+    Top: typeof FooterTop;
+    Bottom: typeof FooterBottom;
+    Column: typeof FooterColumn;
+}
+export declare const Footer: FooterComponent;
+export {};

package/dist/Footer/Footer.test.d.ts

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

package/dist/Footer/index.d.ts

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

package/dist/Grid/GridCell.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+import { PageGridColumnNumber } from './PageGrid';
+type GridColumns = PageGridColumnNumber | {
+    start?: PageGridColumnNumber;
+    span: PageGridColumnNumber;
+};
+export interface GridCellProps extends HTMLAttributes<HTMLDivElement> {
+    gridColumns?: GridColumns;
+}
+export declare const gridColumnClassNames: (gridColumns?: GridColumns) => string;
+export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Grid/PageGrid.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type PageGridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type PageGridProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const PageGrid: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Grid/index.d.ts

@@ -0,0 +1,4 @@
+export type { GridCellProps } from './GridCell';
+export type { PageGridProps } from './PageGrid';
+export * from './GridCell';
+export * from './PageGrid';

package/dist/Heading/Heading.d.ts

@@ -16,6 +16,11 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
      * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
      */
     size?: Size;
+    /**
+     * De kleur van de titel
+     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
 }
 export declare function getHeadingElement(level: HeadingLevel): "h2" | "h3" | "h4" | "h1";
 export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & {

package/dist/Link/Link.d.ts

@@ -2,14 +2,20 @@
  * @license EUPL-1.2+
  * Copyright (c) 2023 Gemeente Amsterdam
  */
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 type LinkOnBackground = 'default' | 'light' | 'dark';
-type LinkVariant = 'standalone' | 'standaloneBold' | 'inline' | 'inList';
-export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> {
+type LinkVariant = 'standalone' | 'inline' | 'inList';
+interface CommonProps 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>>;
+type ConditionalProps = {
+    variant?: 'standalone' | 'inline';
+    icon?: never;
+} | {
+    variant?: 'inList';
+    icon?: Function;
+};
+export type LinkProps = CommonProps & ConditionalProps;
+export declare const Link: import("react").ForwardRefExoticComponent<PropsWithChildren<LinkProps> & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/OrderedList/OrderedList.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { ForwardRefExoticComponent, LiHTMLAttributes, OlHTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+export interface OrderedListProps extends PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> {
+    markers?: boolean;
+}
+interface OrderedListComponent extends ForwardRefExoticComponent<OrderedListProps & RefAttributes<HTMLOListElement>> {
+    Item: typeof OrderedListItem;
+}
+export declare const OrderedList: OrderedListComponent;
+export type OrderedListItemProps = LiHTMLAttributes<HTMLLIElement>;
+export declare const OrderedListItem: ForwardRefExoticComponent<OrderedListItemProps & {
+    children?: import("react").ReactNode;
+} & RefAttributes<HTMLLIElement>>;
+export {};

package/dist/OrderedList/OrderedList.test.d.ts

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

package/dist/OrderedList/index.d.ts

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

package/dist/PageHeading/PageHeading.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export interface PageHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * De kleur van de titel
+     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
+}
+export declare const PageHeading: import("react").ForwardRefExoticComponent<PageHeadingProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/PageHeading/PageHeading.test.d.ts

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

package/dist/PageHeading/index.d.ts

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

package/dist/PageMenu/PageMenu.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+type PageMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLElement>> {
+    Link: typeof PageMenuLink;
+    Button: typeof PageMenuButton;
+}
+export declare const PageMenu: PageMenuComponent;
+export interface PageMenuLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+    icon?: Function;
+}
+export interface PageMenuButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
+    icon?: Function;
+}
+declare const PageMenuLink: ForwardRefExoticComponent<PageMenuLinkProps & RefAttributes<HTMLAnchorElement>>;
+declare const PageMenuButton: ForwardRefExoticComponent<PageMenuButtonProps & RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/PageMenu/PageMenu.test.d.ts

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

package/dist/PageMenu/index.d.ts

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

package/dist/Paragraph/Paragraph.d.ts

@@ -4,8 +4,14 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import { HTMLAttributes } from 'react';
-export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+import { GridCellProps } from '../Grid';
+export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement>, GridCellProps {
     size?: 'small' | 'large';
+    /**
+     * De kleur van de paragraaf
+     * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
 }
 export declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & {
     children?: import("react").ReactNode;

package/dist/Testula/Testula.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface TestulaProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+}
+export declare const Testula: import("react").ForwardRefExoticComponent<TestulaProps & import("react").RefAttributes<HTMLElement>>;

package/dist/Testula/Testula.test.d.ts

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

package/dist/Testula/index.d.ts

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

package/dist/TopTaskLink/TopTaskLink.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { AnchorHTMLAttributes } from 'react';
+export interface TopTaskLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    label: string;
+    description?: string;
+}
+export declare const TopTaskLink: import("react").ForwardRefExoticComponent<TopTaskLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/TopTaskLink/TopTaskLink.test.d.ts

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

package/dist/TopTaskLink/index.d.ts

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

package/dist/UnorderedList/UnorderedList.d.ts

@@ -2,13 +2,16 @@
  * @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>> {
+import { ForwardRefExoticComponent, HTMLAttributes, LiHTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+export interface UnorderedListProps extends PropsWithChildren<HTMLAttributes<HTMLUListElement>> {
+    markers?: boolean;
+}
+interface UnorderedListComponent extends ForwardRefExoticComponent<UnorderedListProps & RefAttributes<HTMLUListElement>> {
     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 declare const UnorderedListItem: ForwardRefExoticComponent<UnorderedListItemProps & {
+    children?: import("react").ReactNode;
+} & RefAttributes<HTMLLIElement>>;
 export {};

package/dist/UnorderedList/index.d.ts

@@ -1 +1,2 @@
 export { UnorderedList } from './UnorderedList';
+export type { UnorderedListProps } from './UnorderedList';

package/dist/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/VisuallyHidden/VisuallyHidden.test.d.ts

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

package/dist/VisuallyHidden/index.d.ts

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