@conduction/components 2.2.16 → 2.2.18

package/.prettierrc

@@ -1,30 +1,30 @@
-{
-  "overrides": [
-    {
-      "files": ["*.json"],
-      "options": {
-        "parser": "json",
-        "printWidth": 120,
-        "tabWidth": 2
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "options": {
-        "parser": "typescript",
-        "printWidth": 120,
-        "trailingComma": "all",
-        "tabWidth": 2,
-        "singleQuote": false
-      }
-    },
-    {
-      "files": ["*.css", "*.scss"],
-      "options": {
-        "parser": "css",
-        "tabWidth": 2,
-        "printWidth": 180
-      }
-    }
-  ]
-}
+{
+  "overrides": [
+    {
+      "files": ["*.json"],
+      "options": {
+        "parser": "json",
+        "printWidth": 120,
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "options": {
+        "parser": "typescript",
+        "printWidth": 120,
+        "trailingComma": "all",
+        "tabWidth": 2,
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.css", "*.scss"],
+      "options": {
+        "parser": "css",
+        "tabWidth": 2,
+        "printWidth": 180
+      }
+    }
+  ]
+}

package/README.md

@@ -4,6 +4,12 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.18:
+    - Refactored select role attribute.
+    - Fixed Pagination-button border-radius.
+    - Added colors for Focus and Selected options in Select forms.
+    - Add HorizontalOverflowWrapper component and refactor Tabs Component overflow scroll.
+  - 2.2.17: Refactor Pagination to include aria labels and make aria label required on texarea, input and select components.
   - 2.2.15/2.2.16: Added more NLDS options to Pagination.
   - 2.2.13/2.2.14:
     - Updated Textarea and all Input components to allow aria-label.

package/lib/components/Pagination/Pagination.d.ts

@@ -1,9 +1,14 @@
-import * as React from "react";
-interface PaginationProps {
-    totalPages: number;
-    currentPage: number;
-    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
-    layoutClassName?: string;
-}
-export declare const Pagination: React.FC<PaginationProps>;
-export {};
+import * as React from "react";
+interface PaginationProps {
+    totalPages: number;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    ariaLabels: {
+        nextPage: string;
+        previousPage: string;
+        page: string;
+    };
+    layoutClassName?: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};

package/lib/components/Pagination/Pagination.js

@@ -1,12 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./Pagination.module.css";
-import clsx from "clsx";
-import ReactPaginate from "react-paginate";
-import { Button } from "@utrecht/component-library-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-export const Pagination = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
-    if (totalPages < 1)
-        return _jsx(_Fragment, {}); // no pages available
-    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
-};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Pagination.module.css";
+import clsx from "clsx";
+import ReactPaginate from "react-paginate";
+import { Button } from "@utrecht/component-library-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+export const Pagination = ({ totalPages, currentPage, setCurrentPage, ariaLabels, layoutClassName, }) => {
+    if (totalPages < 1)
+        return _jsx(_Fragment, {}); // no pages available
+    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextAriaLabel: ariaLabels.nextPage, previousAriaLabel: ariaLabels.previousPage, ariaLabelBuilder: (currentPage) => `${ariaLabels.page} ${currentPage}`, nextLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
+};

package/lib/components/Pagination/Pagination.module.css

@@ -150,7 +150,7 @@
   border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
   border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
   border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
-  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
+  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
   padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;

package/lib/components/badgeCounter/BadgeCounter.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-interface BadgeCounterProps {
-    number: string;
-    children: React.ReactNode;
-    layoutClassName?: string;
-}
-export declare const BadgeCounter: ({ number, children, layoutClassName, }: React.PropsWithChildren<BadgeCounterProps>) => JSX.Element;
-export {};
+import * as React from "react";
+interface BadgeCounterProps {
+    number: string;
+    children: React.ReactNode;
+    layoutClassName?: string;
+}
+export declare const BadgeCounter: ({ number, children, layoutClassName, }: React.PropsWithChildren<BadgeCounterProps>) => JSX.Element;
+export {};

package/lib/components/badgeCounter/BadgeCounter.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./BadgeCounter.module.css";
-import clsx from "clsx";
-export const BadgeCounter = ({ number, children, layoutClassName, }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./BadgeCounter.module.css";
+import clsx from "clsx";
+export const BadgeCounter = ({ number, children, layoutClassName, }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));

package/lib/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/lib/components/card/cardHeader/CardHeader.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-export declare const CardHeader: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-export declare const CardHeaderTitle: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-export declare const CardHeaderDate: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+import * as React from "react";
+export declare const CardHeader: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const CardHeaderTitle: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const CardHeaderDate: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/lib/components/card/cardHeader/CardHeader.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./CardHeader.module.css";
-export const CardHeader = (props) => {
-    const _props = { ...props, className: `${props.className} ${styles.container}` };
-    return _jsx("div", { ..._props, children: props.children });
-};
-export const CardHeaderTitle = (props) => {
-    const _props = { ...props, className: `${props.className} ${styles.title}` };
-    return _jsx("div", { ..._props, children: props.children });
-};
-export const CardHeaderDate = (props) => {
-    const _props = { ...props, className: `${props.className} ${styles.date}` };
-    return _jsx("div", { ..._props, children: props.children });
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./CardHeader.module.css";
+export const CardHeader = (props) => {
+    const _props = { ...props, className: `${props.className} ${styles.container}` };
+    return _jsx("div", { ..._props, children: props.children });
+};
+export const CardHeaderTitle = (props) => {
+    const _props = { ...props, className: `${props.className} ${styles.title}` };
+    return _jsx("div", { ..._props, children: props.children });
+};
+export const CardHeaderDate = (props) => {
+    const _props = { ...props, className: `${props.className} ${styles.date}` };
+    return _jsx("div", { ..._props, children: props.children });
+};

package/lib/components/card/cardWrapper/CardWrapper.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
-export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+import * as React from "react";
+export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/lib/components/card/cardWrapper/CardWrapper.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./CardWrapper.module.css";
-export const CardWrapper = (props) => {
-    const _props = { ...props, className: `${props.className} ${styles.container}` };
-    return _jsx("div", { ..._props, children: props.children });
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./CardWrapper.module.css";
+export const CardWrapper = (props) => {
+    const _props = { ...props, className: `${props.className} ${styles.container}` };
+    return _jsx("div", { ..._props, children: props.children });
+};

package/lib/components/card/detailsCard/DetailsCard.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-interface DetailsCardProps {
-    title: string;
-    introduction?: string;
-    link: {
-        href: string;
-        label: string;
-    };
-    tags?: string[];
-    subHeader?: string;
-    layoutClassName?: string;
-}
-export declare const DetailsCard: ({ title, subHeader, introduction, link, tags, layoutClassName, }: DetailsCardProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface DetailsCardProps {
+    title: string;
+    introduction?: string;
+    link: {
+        href: string;
+        label: string;
+    };
+    tags?: string[];
+    subHeader?: string;
+    layoutClassName?: string;
+}
+export declare const DetailsCard: ({ title, subHeader, introduction, link, tags, layoutClassName, }: DetailsCardProps) => JSX.Element;
+export {};

package/lib/components/card/detailsCard/DetailsCard.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./DetailsCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
-import clsx from "clsx";
-import { navigate } from "gatsby";
-import { Tag } from "../../tag/Tag";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
-    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] }) }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./DetailsCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import clsx from "clsx";
+import { navigate } from "gatsby";
+import { Tag } from "../../tag/Tag";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
+    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] }) }));
+};

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-interface DownloadCardProps {
-    icon: JSX.Element;
-    label: string;
-    sizeKb: string;
-    downloadLabel: string;
-    layoutClassName?: string;
-    handleClick: () => any;
-}
-export declare const DownloadCard: ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }: DownloadCardProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface DownloadCardProps {
+    icon: JSX.Element;
+    label: string;
+    sizeKb: string;
+    downloadLabel: string;
+    layoutClassName?: string;
+    handleClick: () => any;
+}
+export declare const DownloadCard: ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }: DownloadCardProps) => JSX.Element;
+export {};

package/lib/components/card/downloadCard/DownloadCard.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./DownloadCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
-import clsx from "clsx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faDownload } from "@fortawesome/free-solid-svg-icons";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsxs(Link, { onClick: handleClick, children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " ", downloadLabel] })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./DownloadCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsxs(Link, { onClick: handleClick, children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " ", downloadLabel] })] }));
+};

package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-interface HorizontalImageCardProps {
-    iconOrImage: JSX.Element;
-    title: string;
-    link: {
-        label: string;
-        href: string;
-    };
-    layoutClassName?: string;
-    external?: boolean;
-}
-export declare const HorizontalImageCard: ({ title, layoutClassName, external, link, iconOrImage, }: HorizontalImageCardProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface HorizontalImageCardProps {
+    iconOrImage: JSX.Element;
+    title: string;
+    link: {
+        label: string;
+        href: string;
+    };
+    layoutClassName?: string;
+    external?: boolean;
+}
+export declare const HorizontalImageCard: ({ title, layoutClassName, external, link, iconOrImage, }: HorizontalImageCardProps) => JSX.Element;
+export {};

package/lib/components/card/horizontalImageCard/HorizontalImageCard.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./HorizontalImageCard.module.css";
-import clsx from "clsx";
-import { Link } from "@utrecht/component-library-react";
-import { navigate } from "gatsby";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
-export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.linkContainer, children: [_jsx("div", { className: styles.title, children: title }), _jsxs(Link, { className: styles.link, children: [_jsx(FontAwesomeIcon, { icon: external ? faExternalLink : faArrowRight }), link.label] })] })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./HorizontalImageCard.module.css";
+import clsx from "clsx";
+import { Link } from "@utrecht/component-library-react";
+import { navigate } from "gatsby";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
+export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.linkContainer, children: [_jsx("div", { className: styles.title, children: title }), _jsxs(Link, { className: styles.link, children: [_jsx(FontAwesomeIcon, { icon: external ? faExternalLink : faArrowRight }), link.label] })] })] }));
+};

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-interface ImageAndDetailsCardProps {
-    title: string;
-    image: JSX.Element;
-    introduction: string;
-    link: {
-        href: string;
-        label: string;
-    };
-    subHeader?: string;
-    layoutClassName?: string;
-}
-export declare const ImageAndDetailsCard: ({ image, title, subHeader, introduction, link, layoutClassName, }: ImageAndDetailsCardProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface ImageAndDetailsCardProps {
+    title: string;
+    image: JSX.Element;
+    introduction: string;
+    link: {
+        href: string;
+        label: string;
+    };
+    subHeader?: string;
+    layoutClassName?: string;
+}
+export declare const ImageAndDetailsCard: ({ image, title, subHeader, introduction, link, layoutClassName, }: ImageAndDetailsCardProps) => JSX.Element;
+export {};

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./ImageAndDetailsCard.module.css";
-import clsx from "clsx";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
-import { navigate } from "gatsby";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./ImageAndDetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { navigate } from "gatsby";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] })] }));
+};

package/lib/components/card/index.d.ts

@@ -1,8 +1,8 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
-import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { DetailsCard } from "./detailsCard/DetailsCard";
-import { InfoCard } from "./infoCard/InfoCard";
-import { CardWrapper } from "./cardWrapper/CardWrapper";
-import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+import { InfoCard } from "./infoCard/InfoCard";
+import { CardWrapper } from "./cardWrapper/CardWrapper";
+import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };

package/lib/components/card/index.js

@@ -1,8 +1,8 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
-import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { DetailsCard } from "./detailsCard/DetailsCard";
-import { InfoCard } from "./infoCard/InfoCard";
-import { CardWrapper } from "./cardWrapper/CardWrapper";
-import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+import { InfoCard } from "./infoCard/InfoCard";
+import { CardWrapper } from "./cardWrapper/CardWrapper";
+import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };

package/lib/components/card/infoCard/InfoCard.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-interface InfoCardProps {
-    title: string;
-    content: JSX.Element | string;
-    layoutClassName?: string;
-}
-export declare const InfoCard: ({ title, content, layoutClassName }: InfoCardProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface InfoCardProps {
+    title: string;
+    content: JSX.Element | string;
+    layoutClassName?: string;
+}
+export declare const InfoCard: ({ title, content, layoutClassName }: InfoCardProps) => JSX.Element;
+export {};

package/lib/components/card/infoCard/InfoCard.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./InfoCard.module.css";
-import clsx from "clsx";
-export const InfoCard = ({ title, content, layoutClassName }) => {
-    return (_jsxs("div", { className: clsx([layoutClassName && layoutClassName], styles.container), children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./InfoCard.module.css";
+import clsx from "clsx";
+export const InfoCard = ({ title, content, layoutClassName }) => {
+    return (_jsxs("div", { className: clsx([layoutClassName && layoutClassName], styles.container), children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
+};

package/lib/components/card/infoCard/InfoCard.module.css

@@ -1,26 +1,26 @@
-.container {
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > * {
-  display: block;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.container > .title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-  color: var(--skeleton-color-black);
-}
-
-.content {
-  color: var(--skeleton-color-black);
-}
+.container {
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.container > .title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+  color: var(--skeleton-color-black);
+}
+
+.content {
+  color: var(--skeleton-color-black);
+}