@amsterdam/design-system-react 0.1.6 → 0.1.8

package/README.md

@@ -4,7 +4,7 @@
 
 The `@amsterdam/design-system-react` package contains React implementations of various components. You can use this package in React apps.
 
-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.
+The design tokens and css used in these components are published in separate npm packages, so don't forget to install and include `@amsterdam/design-system-tokens` and `@amsterdam/design-system-css` too.
 
 <!-- TODO: make this easier? -->
 
@@ -20,7 +20,7 @@ Make sure you specify the exact version as dependency, so you can schedule to up
 
 Install the packages you need, for instance:
 
-`npm install @amsterdam/design-system-react @amsterdam/design-system-tokens @amsterdam/design-system-assets`
+`npm install @amsterdam/design-system-react @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-css`
 
 Import the packages you need.
 
@@ -29,6 +29,7 @@ import { Paragraph } from "@amsterdam/design-system-react";
 
 import "@amsterdam/design-system-tokens/dist/root.css";
 import "@amsterdam/design-system-assets/font/index.css";
+import "@amsterdam/design-system-css/dist/index.css";
 
 function App() {
   return <Paragraph>Hello world</Paragraph>;
@@ -36,19 +37,3 @@ 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/Accordion/Accordion.d.ts

@@ -2,8 +2,7 @@
  * @license EUPL-1.2+
  * Copyright (c) 2023 Gemeente Amsterdam
  */
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, ReactNode, RefAttributes } from 'react';
 import { AccordionSection } from './AccordionSection';
 import { HeadingLevel } from '../Heading/Heading';
 export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface AlertProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+    title?: string;
+    severity?: undefined | 'error' | 'success';
+    closeable?: boolean;
+    icon?: boolean;
+    onClose?: () => void;
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Alert/index.d.ts

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

package/dist/AspectRatio/AspectRatio.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import { HTMLAttributes, PropsWithChildren } from 'react';
-export type Ratio = 'extra-tall' | 'tall' | 'square' | 'wide' | 'extra-wide';
+export type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
 export interface AspectRatioProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
     ratio?: Ratio;
 }

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-interface BreadcrumbComponent extends React.ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> {
+import { ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+interface BreadcrumbComponent extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & 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>>;
+declare const BreadcrumbItem: ForwardRefExoticComponent<BreadcrumbItemProps & RefAttributes<HTMLLIElement>>;
 export {};

package/dist/Card/Card.d.ts

@@ -3,9 +3,10 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
-export declare const CardHeadingGroup: ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode;
-} & RefAttributes<HTMLElement>>;
+export interface CardHeadingProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    tagline: string;
+}
+export declare const CardHeadingGroup: ForwardRefExoticComponent<CardHeadingProps & RefAttributes<HTMLElement>>;
 export declare const CardLink: ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode;
 } & RefAttributes<HTMLAnchorElement>>;

package/dist/Footer/Footer.d.ts

@@ -3,21 +3,15 @@
  * 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/Grid/Grid.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+import { GridCell } from './GridCell';
+export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridColumnNumbers = {
+    narrow: GridColumnNumber;
+    medium: GridColumnNumber;
+    wide: GridColumnNumber;
+};
+type GridDensity = 'low' | 'high';
+type GridPaddingSize = 'small' | 'medium' | 'large';
+type GridPaddingVerticalProp = {
+    paddingBottom?: never;
+    paddingTop?: never;
+    /** The amount of vertical whitespace above and below the grid. */
+    paddingVertical?: GridPaddingSize;
+};
+type GridPaddingTopAndBottomProps = {
+    /** The amount of vertical whitespace below the grid. */
+    paddingBottom?: GridPaddingSize;
+    /** The amount of vertical whitespace above the grid. */
+    paddingTop?: GridPaddingSize;
+    paddingVertical?: never;
+};
+export type GridProps = {
+    /**
+     * The density of the grid: low (for websites) or high (for applications).
+     * Adjusts the pace with which columns get wider, and the start width as well.
+     * This is to be implemented more generally – it will be moved into a theme soon.
+     */
+    density?: GridDensity;
+} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
+    Cell: typeof GridCell;
+}
+export declare const Grid: GridComponent;
+export {};

package/dist/Grid/GridCell.d.ts

@@ -2,17 +2,21 @@
  * @license EUPL-1.2+
  * Copyright (c) 2023 Gemeente Amsterdam
  */
-import { HTMLAttributes } from 'react';
-import { PageGridColumnNumber } from './PageGrid';
-type GridColumns = PageGridColumnNumber | {
-    start?: PageGridColumnNumber;
-    span: PageGridColumnNumber;
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import type { GridColumnNumber, GridColumnNumbers } from './Grid';
+type GridCellFullWidthProp = {
+    /** Whether the cell spans the full width of the grid. */
+    fullWidth?: boolean;
+    span?: never;
+    start?: never;
 };
-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>>;
+type GridCellColumnProps = {
+    fullWidth?: never;
+    /** The amount of grid columns the cell spans. */
+    span?: GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    start?: GridColumnNumber | GridColumnNumbers;
+};
+export type GridCellProps = (GridCellFullWidthProp | GridCellColumnProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Grid/gridCellClasses.d.ts

@@ -0,0 +1,2 @@
+import { GridCellProps } from './GridCell';
+export declare const gridCellClasses: (span?: GridCellProps['span'], start?: GridCellProps['start']) => string[];

package/dist/Grid/index.d.ts

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

package/dist/Highlight/Highlight.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface HighlightProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    color?: 'blue' | 'dark-green' | 'green' | 'light-blue' | 'magenta' | 'orange' | 'purple' | 'yellow';
+}
+export declare const Highlight: import("react").ForwardRefExoticComponent<HighlightProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Highlight/index.d.ts

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

package/dist/Image/Image.d.ts

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

package/dist/Image/index.d.ts

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

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The maximum amount of pages shown. This has a lower limit of 5
+     */
+    maxVisiblePages?: number;
+    /**
+     * Callback triggered when interaction changes the page number.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * The current page number.
+     */
+    page?: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+}
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/Pagination/index.d.ts

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

package/dist/Paragraph/Paragraph.d.ts

@@ -4,8 +4,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import { HTMLAttributes } from 'react';
-import { GridCellProps } from '../Grid';
-export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement>, GridCellProps {
+export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
     size?: 'small' | 'large';
     /**
      * De kleur van de paragraaf

package/dist/Screen/Screen.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes, PropsWithChildren } from 'react';
+type ScreenMaxWidth = 'wide' | 'x-wide';
+export interface ScreenProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+    maxWidth?: ScreenMaxWidth;
+}
+export declare const Screen: import("react").ForwardRefExoticComponent<ScreenProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Screen/index.d.ts

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

package/dist/TopTaskLink/TopTaskLink.d.ts

@@ -5,6 +5,6 @@
 import { AnchorHTMLAttributes } from 'react';
 export interface TopTaskLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     label: string;
-    description?: string;
+    description: string;
 }
 export declare const TopTaskLink: import("react").ForwardRefExoticComponent<TopTaskLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;