@conduction/components 2.1.34 → 2.1.35

package/.github/workflows/npm-publish.yml

@@ -1,39 +1,39 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  push:
-    branches:
-      - development
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: |
-          git --version
-          git config user.name "GitHub Version patch"
-          git config user.email "<>"
-          git checkout development
-          git clean -f -n
-      - run: npm install
-      - run: npm version patch
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    branches:
+      - development
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          git --version
+          git config user.name "GitHub Version patch"
+          git config user.email "<>"
+          git checkout development
+          git clean -f -n
+      - run: npm install
+      - run: npm version patch
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

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,7 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.35: Added CardWrapper.
   - 2.1.34: Refactor Den Haag textbox and textarea to Utrecht; add Single Select design tokens.
   - 2.1.33: Added optional placeholder to all select elements.
   - 2.1.32: Add inline-padding to container, remove redundant (breaking and unused) components, up React version.

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/cardWrapper/CardWrapper.d.ts

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

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

@@ -0,0 +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 });
+};

package/lib/components/card/cardWrapper/CardWrapper.module.css

@@ -0,0 +1,32 @@
+:root {
+  --conduction-card-wrapper-background-color: #ffffff;
+  /* --conduction-card-wrapper-border-color: unset; */
+  /* --conduction-card-wrapper-border-width: unset; */
+  /* --conduction-card-wrapper-border-style: unset; */
+  --conduction-card-wrapper-border-radius: 16px;
+  --conduction-card-wrapper-color: #000000;
+  /* --conduction-card-wrapper-background-color-hover: unset; */
+  --conduction-card-wrapper-padding-inline-end: 18px;
+  --conduction-card-wrapper-padding-inline-start: 18px;
+  --conduction-card-wrapper-padding-block-end: 18px;
+  --conduction-card-wrapper-padding-block-start: 18px;
+}
+
+.container {
+  padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
+  padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
+  padding-block-start: var(--conduction-card-wrapper-padding-block-start);
+  padding-block-end: var(--conduction-card-wrapper-padding-block-end);
+
+  color: var(--conduction-card-wrapper-color);
+  background-color: var(--conduction-card-wrapper-background-color);
+
+  border-radius: var(--conduction-card-wrapper-border-radius);
+  border-width: var(--conduction-card-wrapper-border-width);
+  border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.container:hover {
+  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
+  cursor: pointer;
+}

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

@@ -1,13 +1,14 @@
-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,10 +1,11 @@
-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,12 +1,13 @@
-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,9 +1,9 @@
-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 "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/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.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: 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 "@gemeente-denhaag/link";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/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.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label })] })] }));
+};

package/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css

@@ -1,34 +1,34 @@
-:root {
-  --conduction-horizontal-image-card-image-size: 52px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.link {
-  display: flex;
-  flex-direction: column;
-  padding-block-start: var(--skeleton-size-lg);
-  padding-block-end: var(--skeleton-size-lg);
-  padding-inline-end: var(--skeleton-size-lg);
-}
-
-.imageOrIconContainer > :first-child {
-  width: var(--conduction-horizontal-image-card-image-size);
-  height: var(--conduction-horizontal-image-card-image-size);
-
-  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);
-}
-
-.title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-}
+:root {
+  --conduction-horizontal-image-card-image-size: 52px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  padding-block-start: var(--skeleton-size-lg);
+  padding-block-end: var(--skeleton-size-lg);
+  padding-inline-end: var(--skeleton-size-lg);
+}
+
+.imageOrIconContainer > :first-child {
+  width: var(--conduction-horizontal-image-card-image-size);
+  height: var(--conduction-horizontal-image-card-image-size);
+
+  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);
+}
+
+.title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+}

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

@@ -1,13 +1,14 @@
-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,7 +1,8 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
-import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./richContentCard/RichContentCard";
-import { DetailsCard } from "./detailsCard/DetailsCard";
-import { InfoCard } from "./infoCard/InfoCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+import { InfoCard } from "./infoCard/InfoCard";
+import { CardWrapper } from "./cardWrapper/CardWrapper";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };

package/lib/components/card/index.js

@@ -1,7 +1,8 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
-import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./richContentCard/RichContentCard";
-import { DetailsCard } from "./detailsCard/DetailsCard";
-import { InfoCard } from "./infoCard/InfoCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+import { InfoCard } from "./infoCard/InfoCard";
+import { CardWrapper } from "./cardWrapper/CardWrapper";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };

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

@@ -1,7 +1,8 @@
-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 })] }));
+};