@amsterdam/design-system-react 0.1.7 → 0.1.8

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react';
+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>>;
+export interface CardProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+}
+export interface CardComponent extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & RefAttributes<HTMLElement> & CardProps> {
+    HeadingGroup: typeof CardHeadingGroup;
+    Link: typeof CardLink;
+}
+export declare const Card: CardComponent;

package/dist/Card/Card.test.d.ts

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

package/dist/Card/index.d.ts

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

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/Grid.test.d.ts

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

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/GridCell.test.d.ts

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

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/Highlight.test.d.ts

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

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/Image.test.d.ts

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

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/Pagination.test.d.ts

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

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/Screen.test.d.ts

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

package/dist/Screen/index.d.ts

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

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import { InputHTMLAttributes } from 'react';
+export declare const Switch: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Switch/Switch.test.d.ts

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

package/dist/Switch/index.d.ts

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

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>>;