@conduction/components 2.2.3 → 2.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/.prettierrc +30 -30
  2. package/README.md +1 -0
  3. package/lib/components/Pagination/Pagination.d.ts +9 -9
  4. package/lib/components/Pagination/Pagination.js +12 -12
  5. package/lib/components/badgeCounter/BadgeCounter.d.ts +8 -8
  6. package/lib/components/badgeCounter/BadgeCounter.js +4 -4
  7. package/lib/components/badgeCounter/BadgeCounter.module.css +27 -27
  8. package/lib/components/card/cardHeader/CardHeader.d.ts +4 -4
  9. package/lib/components/card/cardHeader/CardHeader.js +14 -14
  10. package/lib/components/card/cardWrapper/CardWrapper.d.ts +2 -2
  11. package/lib/components/card/cardWrapper/CardWrapper.js +6 -6
  12. package/lib/components/card/detailsCard/DetailsCard.d.ts +14 -14
  13. package/lib/components/card/detailsCard/DetailsCard.js +11 -11
  14. package/lib/components/card/downloadCard/DownloadCard.d.ts +11 -11
  15. package/lib/components/card/downloadCard/DownloadCard.js +9 -9
  16. package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts +13 -13
  17. package/lib/components/card/horizontalImageCard/HorizontalImageCard.js +10 -10
  18. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts +14 -14
  19. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +10 -10
  20. package/lib/components/card/index.d.ts +8 -8
  21. package/lib/components/card/index.js +8 -8
  22. package/lib/components/card/infoCard/InfoCard.d.ts +8 -8
  23. package/lib/components/card/infoCard/InfoCard.js +6 -6
  24. package/lib/components/card/infoCard/InfoCard.module.css +26 -26
  25. package/lib/components/card/richContentCard/RichContentCard.d.ts +19 -19
  26. package/lib/components/card/richContentCard/RichContentCard.js +16 -15
  27. package/lib/components/codeBlock/CodeBlock.d.ts +6 -6
  28. package/lib/components/codeBlock/CodeBlock.js +3 -3
  29. package/lib/components/codeBlock/CodeBlock.module.css +6 -6
  30. package/lib/components/container/Container.d.ts +6 -6
  31. package/lib/components/container/Container.js +4 -4
  32. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
  33. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts +17 -17
  34. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
  35. package/lib/components/denhaag-wrappers/pagination/Pagination.css +120 -120
  36. package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts +9 -9
  37. package/lib/components/denhaag-wrappers/pagination/Pagination.js +15 -15
  38. package/lib/components/editableTableRow/EditableTableRow.d.ts +14 -14
  39. package/lib/components/editableTableRow/EditableTableRow.js +31 -31
  40. package/lib/components/editableTableRow/EditableTableRow.module.css +25 -25
  41. package/lib/components/formFields/checkbox/Checkbox.module.css +7 -7
  42. package/lib/components/formFields/checkbox/checkbox.d.ts +9 -9
  43. package/lib/components/formFields/checkbox/checkbox.js +3 -3
  44. package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts +23 -23
  45. package/lib/components/formFields/createKeyValue/CreateKeyValue.js +40 -41
  46. package/lib/components/formFields/date/Date.d.ts +12 -12
  47. package/lib/components/formFields/date/Date.js +10 -10
  48. package/lib/components/formFields/date/Date.module.css +12 -12
  49. package/lib/components/formFields/errorMessage/ErrorMessage.d.ts +5 -5
  50. package/lib/components/formFields/errorMessage/ErrorMessage.js +3 -3
  51. package/lib/components/formFields/index.d.ts +7 -7
  52. package/lib/components/formFields/index.js +7 -7
  53. package/lib/components/formFields/input.d.ts +21 -21
  54. package/lib/components/formFields/input.js +12 -12
  55. package/lib/components/formFields/radio.d.ts +9 -9
  56. package/lib/components/formFields/radio.js +3 -3
  57. package/lib/components/formFields/select/select.d.ts +23 -23
  58. package/lib/components/formFields/select/select.js +58 -58
  59. package/lib/components/formFields/textarea.d.ts +9 -9
  60. package/lib/components/formFields/textarea.js +4 -4
  61. package/lib/components/formFields/types.d.ts +6 -6
  62. package/lib/components/formFields/types.js +1 -1
  63. package/lib/components/imageDivider/ImageDivider.d.ts +7 -7
  64. package/lib/components/imageDivider/ImageDivider.js +6 -6
  65. package/lib/components/imageDivider/imageDivider.module.css +5 -5
  66. package/lib/components/logo/Logo.d.ts +8 -8
  67. package/lib/components/logo/Logo.js +10 -10
  68. package/lib/components/logo/Logo.module.css +15 -15
  69. package/lib/components/metaIcon/MetaIcon.d.ts +7 -7
  70. package/lib/components/metaIcon/MetaIcon.js +3 -3
  71. package/lib/components/metaIcon/MetaIcon.module.css +29 -29
  72. package/lib/components/notificationPopUp/NotificationPopUp.d.ts +26 -26
  73. package/lib/components/notificationPopUp/NotificationPopUp.js +32 -32
  74. package/lib/components/privateRoute/PrivateRoute.d.ts +6 -6
  75. package/lib/components/privateRoute/PrivateRoute.js +15 -15
  76. package/lib/components/quoteWrapper/QuoteWrapper.d.ts +7 -7
  77. package/lib/components/quoteWrapper/QuoteWrapper.js +5 -5
  78. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  79. package/lib/components/tabs/Tabs.d.ts +14 -14
  80. package/lib/components/tabs/Tabs.js +7 -7
  81. package/lib/components/tag/Tag.d.ts +10 -10
  82. package/lib/components/tag/Tag.js +6 -6
  83. package/lib/components/tag/Tag.module.css +44 -44
  84. package/lib/components/temp/Temp.d.ts +5 -0
  85. package/lib/components/temp/Temp.js +14 -0
  86. package/lib/components/toolTip/ToolTip.d.ts +13 -9
  87. package/lib/components/toolTip/ToolTip.js +13 -8
  88. package/lib/components/toolTip/ToolTip.module.css +26 -10
  89. package/lib/components/topNav/index.d.ts +3 -3
  90. package/lib/components/topNav/index.js +3 -3
  91. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +20 -20
  92. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +17 -17
  93. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts +12 -12
  94. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js +7 -7
  95. package/lib/index.d.ts +26 -26
  96. package/lib/index.js +19 -19
  97. package/package.json +3 -8
  98. package/src/components/badgeCounter/BadgeCounter.module.css +27 -27
  99. package/src/components/card/infoCard/InfoCard.module.css +26 -26
  100. package/src/components/codeBlock/CodeBlock.module.css +6 -6
  101. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
  102. package/src/components/formFields/checkbox/Checkbox.module.css +7 -7
  103. package/src/components/formFields/createKeyValue/CreateKeyValue.tsx +11 -16
  104. package/src/components/formFields/date/Date.module.css +12 -12
  105. package/src/components/imageDivider/imageDivider.module.css +5 -5
  106. package/src/components/logo/Logo.module.css +15 -15
  107. package/src/components/metaIcon/MetaIcon.module.css +29 -29
  108. package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  109. package/src/components/tag/Tag.module.css +44 -44
  110. package/src/components/toolTip/ToolTip.module.css +26 -10
  111. package/src/components/toolTip/ToolTip.tsx +11 -15
  112. package/src/components/topNav/index.ts +4 -4
  113. package/src/custom.d.ts +4 -4
  114. package/lib/components/statusSteps/StatusSteps.d.ts +0 -13
  115. package/lib/components/statusSteps/StatusSteps.js +0 -5
  116. package/lib/custom.d copy.d.ts +0 -5
  117. package/lib/custom.d copy.js +0 -1
package/.prettierrc CHANGED
@@ -1,30 +1,30 @@
1
- {
2
- "overrides": [
3
- {
4
- "files": ["*.json"],
5
- "options": {
6
- "parser": "json",
7
- "printWidth": 120,
8
- "tabWidth": 2
9
- }
10
- },
11
- {
12
- "files": ["*.ts", "*.tsx"],
13
- "options": {
14
- "parser": "typescript",
15
- "printWidth": 120,
16
- "trailingComma": "all",
17
- "tabWidth": 2,
18
- "singleQuote": false
19
- }
20
- },
21
- {
22
- "files": ["*.css", "*.scss"],
23
- "options": {
24
- "parser": "css",
25
- "tabWidth": 2,
26
- "printWidth": 180
27
- }
28
- }
29
- ]
30
- }
1
+ {
2
+ "overrides": [
3
+ {
4
+ "files": ["*.json"],
5
+ "options": {
6
+ "parser": "json",
7
+ "printWidth": 120,
8
+ "tabWidth": 2
9
+ }
10
+ },
11
+ {
12
+ "files": ["*.ts", "*.tsx"],
13
+ "options": {
14
+ "parser": "typescript",
15
+ "printWidth": 120,
16
+ "trailingComma": "all",
17
+ "tabWidth": 2,
18
+ "singleQuote": false
19
+ }
20
+ },
21
+ {
22
+ "files": ["*.css", "*.scss"],
23
+ "options": {
24
+ "parser": "css",
25
+ "tabWidth": 2,
26
+ "printWidth": 180
27
+ }
28
+ }
29
+ ]
30
+ }
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.4: Refactor the Tooltip component to include react-tooltip version 5+.
7
8
  - 2.2.3: Added Tabs component.
8
9
  - 2.2.2:
9
10
  - Removed Den Haag Textfield dependencies.
@@ -1,9 +1,9 @@
1
- import * as React from "react";
2
- interface PaginationProps {
3
- totalPages: number;
4
- currentPage: number;
5
- setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
6
- layoutClassName?: string;
7
- }
8
- export declare const Pagination: React.FC<PaginationProps>;
9
- export {};
1
+ import * as React from "react";
2
+ interface PaginationProps {
3
+ totalPages: number;
4
+ currentPage: number;
5
+ setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
6
+ layoutClassName?: string;
7
+ }
8
+ export declare const Pagination: React.FC<PaginationProps>;
9
+ export {};
@@ -1,12 +1,12 @@
1
- import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./Pagination.module.css";
3
- import clsx from "clsx";
4
- import ReactPaginate from "react-paginate";
5
- import { Button } from "@utrecht/component-library-react";
6
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
- import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
8
- export const Pagination = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
9
- if (totalPages < 1)
10
- return _jsx(_Fragment, {}); // no pages available
11
- 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 }) }) }));
12
- };
1
+ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./Pagination.module.css";
3
+ import clsx from "clsx";
4
+ import ReactPaginate from "react-paginate";
5
+ import { Button } from "@utrecht/component-library-react";
6
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
+ import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
8
+ export const Pagination = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
9
+ if (totalPages < 1)
10
+ return _jsx(_Fragment, {}); // no pages available
11
+ 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 }) }) }));
12
+ };
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- interface BadgeCounterProps {
3
- number: string;
4
- children: React.ReactNode;
5
- layoutClassName?: string;
6
- }
7
- export declare const BadgeCounter: ({ number, children, layoutClassName, }: React.PropsWithChildren<BadgeCounterProps>) => JSX.Element;
8
- export {};
1
+ import * as React from "react";
2
+ interface BadgeCounterProps {
3
+ number: string;
4
+ children: React.ReactNode;
5
+ layoutClassName?: string;
6
+ }
7
+ export declare const BadgeCounter: ({ number, children, layoutClassName, }: React.PropsWithChildren<BadgeCounterProps>) => JSX.Element;
8
+ export {};
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./BadgeCounter.module.css";
3
- import clsx from "clsx";
4
- export const BadgeCounter = ({ number, children, layoutClassName, }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./BadgeCounter.module.css";
3
+ import clsx from "clsx";
4
+ export const BadgeCounter = ({ number, children, layoutClassName, }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));
@@ -1,27 +1,27 @@
1
- :root {
2
- --conduction-badge-counter-color: hsl(0 0% 0%);
3
- --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
4
- --conduction-badge-counter-height: var(--skeleton-size-md);
5
- --conduction-badge-counter-width: var(--skeleton-size-md);
6
- --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
7
- --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
8
- }
9
-
10
- .content {
11
- display: flex;
12
- }
13
-
14
- .badge {
15
- height: var(--conduction-badge-counter-height);
16
- width: var(--conduction-badge-counter-width);
17
- border-radius: 50%;
18
- font-size: var(--conduction-badge-counter-font-size);
19
- display: flex;
20
- align-items: center;
21
- justify-content: space-around;
22
- background-color: var(--conduction-badge-counter-background-color);
23
- color: var(--conduction-badge-counter-color);
24
- }
25
- .maxNumber {
26
- font-size: var(--conduction-badge-counter-max-number-font-size);
27
- }
1
+ :root {
2
+ --conduction-badge-counter-color: hsl(0 0% 0%);
3
+ --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
4
+ --conduction-badge-counter-height: var(--skeleton-size-md);
5
+ --conduction-badge-counter-width: var(--skeleton-size-md);
6
+ --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
7
+ --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
8
+ }
9
+
10
+ .content {
11
+ display: flex;
12
+ }
13
+
14
+ .badge {
15
+ height: var(--conduction-badge-counter-height);
16
+ width: var(--conduction-badge-counter-width);
17
+ border-radius: 50%;
18
+ font-size: var(--conduction-badge-counter-font-size);
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: space-around;
22
+ background-color: var(--conduction-badge-counter-background-color);
23
+ color: var(--conduction-badge-counter-color);
24
+ }
25
+ .maxNumber {
26
+ font-size: var(--conduction-badge-counter-max-number-font-size);
27
+ }
@@ -1,4 +1,4 @@
1
- import * as React from "react";
2
- export declare const CardHeader: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
3
- export declare const CardHeaderTitle: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
4
- export declare const CardHeaderDate: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
1
+ import * as React from "react";
2
+ export declare const CardHeader: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
3
+ export declare const CardHeaderTitle: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
4
+ export declare const CardHeaderDate: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
@@ -1,14 +1,14 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./CardHeader.module.css";
3
- export const CardHeader = (props) => {
4
- const _props = { ...props, className: `${props.className} ${styles.container}` };
5
- return _jsx("div", { ..._props, children: props.children });
6
- };
7
- export const CardHeaderTitle = (props) => {
8
- const _props = { ...props, className: `${props.className} ${styles.title}` };
9
- return _jsx("div", { ..._props, children: props.children });
10
- };
11
- export const CardHeaderDate = (props) => {
12
- const _props = { ...props, className: `${props.className} ${styles.date}` };
13
- return _jsx("div", { ..._props, children: props.children });
14
- };
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./CardHeader.module.css";
3
+ export const CardHeader = (props) => {
4
+ const _props = { ...props, className: `${props.className} ${styles.container}` };
5
+ return _jsx("div", { ..._props, children: props.children });
6
+ };
7
+ export const CardHeaderTitle = (props) => {
8
+ const _props = { ...props, className: `${props.className} ${styles.title}` };
9
+ return _jsx("div", { ..._props, children: props.children });
10
+ };
11
+ export const CardHeaderDate = (props) => {
12
+ const _props = { ...props, className: `${props.className} ${styles.date}` };
13
+ return _jsx("div", { ..._props, children: props.children });
14
+ };
@@ -1,2 +1,2 @@
1
- import * as React from "react";
2
- export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
1
+ import * as React from "react";
2
+ export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
@@ -1,6 +1,6 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./CardWrapper.module.css";
3
- export const CardWrapper = (props) => {
4
- const _props = { ...props, className: `${props.className} ${styles.container}` };
5
- return _jsx("div", { ..._props, children: props.children });
6
- };
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./CardWrapper.module.css";
3
+ export const CardWrapper = (props) => {
4
+ const _props = { ...props, className: `${props.className} ${styles.container}` };
5
+ return _jsx("div", { ..._props, children: props.children });
6
+ };
@@ -1,14 +1,14 @@
1
- /// <reference types="react" />
2
- interface DetailsCardProps {
3
- title: string;
4
- introduction?: string;
5
- link: {
6
- href: string;
7
- label: string;
8
- };
9
- tags?: string[];
10
- subHeader?: string;
11
- layoutClassName?: string;
12
- }
13
- export declare const DetailsCard: ({ title, subHeader, introduction, link, tags, layoutClassName, }: DetailsCardProps) => JSX.Element;
14
- export {};
1
+ /// <reference types="react" />
2
+ interface DetailsCardProps {
3
+ title: string;
4
+ introduction?: string;
5
+ link: {
6
+ href: string;
7
+ label: string;
8
+ };
9
+ tags?: string[];
10
+ subHeader?: string;
11
+ layoutClassName?: string;
12
+ }
13
+ export declare const DetailsCard: ({ title, subHeader, introduction, link, tags, layoutClassName, }: DetailsCardProps) => JSX.Element;
14
+ export {};
@@ -1,11 +1,11 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./DetailsCard.module.css";
3
- import { Link } from "@utrecht/component-library-react/dist/css-module";
4
- import clsx from "clsx";
5
- import { navigate } from "gatsby";
6
- import { Tag } from "../../tag/Tag";
7
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8
- import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
9
- export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
10
- 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] }) })] }) }));
11
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./DetailsCard.module.css";
3
+ import { Link } from "@utrecht/component-library-react/dist/css-module";
4
+ import clsx from "clsx";
5
+ import { navigate } from "gatsby";
6
+ import { Tag } from "../../tag/Tag";
7
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8
+ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
9
+ export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
10
+ 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] }) })] }) }));
11
+ };
@@ -1,11 +1,11 @@
1
- /// <reference types="react" />
2
- interface DownloadCardProps {
3
- icon: JSX.Element;
4
- label: string;
5
- sizeKb: string;
6
- downloadLabel: string;
7
- layoutClassName?: string;
8
- handleClick: () => any;
9
- }
10
- export declare const DownloadCard: ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }: DownloadCardProps) => JSX.Element;
11
- export {};
1
+ /// <reference types="react" />
2
+ interface DownloadCardProps {
3
+ icon: JSX.Element;
4
+ label: string;
5
+ sizeKb: string;
6
+ downloadLabel: string;
7
+ layoutClassName?: string;
8
+ handleClick: () => any;
9
+ }
10
+ export declare const DownloadCard: ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }: DownloadCardProps) => JSX.Element;
11
+ export {};
@@ -1,9 +1,9 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./DownloadCard.module.css";
3
- import { Link } from "@utrecht/component-library-react/dist/css-module";
4
- import clsx from "clsx";
5
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
- import { faDownload } from "@fortawesome/free-solid-svg-icons";
7
- export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
8
- 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] })] }));
9
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./DownloadCard.module.css";
3
+ import { Link } from "@utrecht/component-library-react/dist/css-module";
4
+ import clsx from "clsx";
5
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
+ import { faDownload } from "@fortawesome/free-solid-svg-icons";
7
+ export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
8
+ 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] })] }));
9
+ };
@@ -1,13 +1,13 @@
1
- /// <reference types="react" />
2
- interface HorizontalImageCardProps {
3
- iconOrImage: JSX.Element;
4
- title: string;
5
- link: {
6
- label: string;
7
- href: string;
8
- };
9
- layoutClassName?: string;
10
- external?: boolean;
11
- }
12
- export declare const HorizontalImageCard: ({ title, layoutClassName, external, link, iconOrImage, }: HorizontalImageCardProps) => JSX.Element;
13
- export {};
1
+ /// <reference types="react" />
2
+ interface HorizontalImageCardProps {
3
+ iconOrImage: JSX.Element;
4
+ title: string;
5
+ link: {
6
+ label: string;
7
+ href: string;
8
+ };
9
+ layoutClassName?: string;
10
+ external?: boolean;
11
+ }
12
+ export declare const HorizontalImageCard: ({ title, layoutClassName, external, link, iconOrImage, }: HorizontalImageCardProps) => JSX.Element;
13
+ export {};
@@ -1,10 +1,10 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./HorizontalImageCard.module.css";
3
- import clsx from "clsx";
4
- import { Link } from "@utrecht/component-library-react";
5
- import { navigate } from "gatsby";
6
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
- import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
8
- export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
9
- 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] })] })] }));
10
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./HorizontalImageCard.module.css";
3
+ import clsx from "clsx";
4
+ import { Link } from "@utrecht/component-library-react";
5
+ import { navigate } from "gatsby";
6
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
+ import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
8
+ export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
9
+ 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] })] })] }));
10
+ };
@@ -1,14 +1,14 @@
1
- /// <reference types="react" />
2
- interface ImageAndDetailsCardProps {
3
- title: string;
4
- image: JSX.Element;
5
- introduction: string;
6
- link: {
7
- href: string;
8
- label: string;
9
- };
10
- subHeader?: string;
11
- layoutClassName?: string;
12
- }
13
- export declare const ImageAndDetailsCard: ({ image, title, subHeader, introduction, link, layoutClassName, }: ImageAndDetailsCardProps) => JSX.Element;
14
- export {};
1
+ /// <reference types="react" />
2
+ interface ImageAndDetailsCardProps {
3
+ title: string;
4
+ image: JSX.Element;
5
+ introduction: string;
6
+ link: {
7
+ href: string;
8
+ label: string;
9
+ };
10
+ subHeader?: string;
11
+ layoutClassName?: string;
12
+ }
13
+ export declare const ImageAndDetailsCard: ({ image, title, subHeader, introduction, link, layoutClassName, }: ImageAndDetailsCardProps) => JSX.Element;
14
+ export {};
@@ -1,10 +1,10 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./ImageAndDetailsCard.module.css";
3
- import clsx from "clsx";
4
- import { Link } from "@utrecht/component-library-react/dist/css-module";
5
- import { navigate } from "gatsby";
6
- import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
7
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8
- export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
9
- 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] }) })] })] }));
10
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./ImageAndDetailsCard.module.css";
3
+ import clsx from "clsx";
4
+ import { Link } from "@utrecht/component-library-react/dist/css-module";
5
+ import { navigate } from "gatsby";
6
+ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
7
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8
+ export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
9
+ 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] }) })] })] }));
10
+ };
@@ -1,8 +1,8 @@
1
- import { DownloadCard } from "./downloadCard/DownloadCard";
2
- import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
- import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
- import { DetailsCard } from "./detailsCard/DetailsCard";
5
- import { InfoCard } from "./infoCard/InfoCard";
6
- import { CardWrapper } from "./cardWrapper/CardWrapper";
7
- import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
8
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
1
+ import { DownloadCard } from "./downloadCard/DownloadCard";
2
+ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
+ import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
+ import { DetailsCard } from "./detailsCard/DetailsCard";
5
+ import { InfoCard } from "./infoCard/InfoCard";
6
+ import { CardWrapper } from "./cardWrapper/CardWrapper";
7
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
8
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
@@ -1,8 +1,8 @@
1
- import { DownloadCard } from "./downloadCard/DownloadCard";
2
- import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
- import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
- import { DetailsCard } from "./detailsCard/DetailsCard";
5
- import { InfoCard } from "./infoCard/InfoCard";
6
- import { CardWrapper } from "./cardWrapper/CardWrapper";
7
- import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
8
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
1
+ import { DownloadCard } from "./downloadCard/DownloadCard";
2
+ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
+ import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
+ import { DetailsCard } from "./detailsCard/DetailsCard";
5
+ import { InfoCard } from "./infoCard/InfoCard";
6
+ import { CardWrapper } from "./cardWrapper/CardWrapper";
7
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
8
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
@@ -1,8 +1,8 @@
1
- /// <reference types="react" />
2
- interface InfoCardProps {
3
- title: string;
4
- content: JSX.Element | string;
5
- layoutClassName?: string;
6
- }
7
- export declare const InfoCard: ({ title, content, layoutClassName }: InfoCardProps) => JSX.Element;
8
- export {};
1
+ /// <reference types="react" />
2
+ interface InfoCardProps {
3
+ title: string;
4
+ content: JSX.Element | string;
5
+ layoutClassName?: string;
6
+ }
7
+ export declare const InfoCard: ({ title, content, layoutClassName }: InfoCardProps) => JSX.Element;
8
+ export {};
@@ -1,6 +1,6 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./InfoCard.module.css";
3
- import clsx from "clsx";
4
- export const InfoCard = ({ title, content, layoutClassName }) => {
5
- return (_jsxs("div", { className: clsx([layoutClassName && layoutClassName], styles.container), children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
6
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./InfoCard.module.css";
3
+ import clsx from "clsx";
4
+ export const InfoCard = ({ title, content, layoutClassName }) => {
5
+ return (_jsxs("div", { className: clsx([layoutClassName && layoutClassName], styles.container), children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
6
+ };
@@ -1,26 +1,26 @@
1
- .container {
2
- background-color: var(--skeleton-color-grey-1);
3
- border-radius: var(--skeleton-border-radius-md);
4
- padding-inline-start: var(--skeleton-size-md);
5
- padding-inline-end: var(--skeleton-size-md);
6
- padding-block-start: var(--skeleton-size-md);
7
- padding-block-end: var(--skeleton-size-md);
8
- }
9
-
10
- .container > * {
11
- display: block;
12
- }
13
-
14
- .container > *:not(:last-child) {
15
- margin-block-end: var(--skeleton-size-xs);
16
- }
17
-
18
- .container > .title {
19
- font-weight: var(--skeleton-font-weight-bold);
20
- font-size: var(--skeleton-font-size-xl);
21
- color: var(--skeleton-color-black);
22
- }
23
-
24
- .content {
25
- color: var(--skeleton-color-black);
26
- }
1
+ .container {
2
+ background-color: var(--skeleton-color-grey-1);
3
+ border-radius: var(--skeleton-border-radius-md);
4
+ padding-inline-start: var(--skeleton-size-md);
5
+ padding-inline-end: var(--skeleton-size-md);
6
+ padding-block-start: var(--skeleton-size-md);
7
+ padding-block-end: var(--skeleton-size-md);
8
+ }
9
+
10
+ .container > * {
11
+ display: block;
12
+ }
13
+
14
+ .container > *:not(:last-child) {
15
+ margin-block-end: var(--skeleton-size-xs);
16
+ }
17
+
18
+ .container > .title {
19
+ font-weight: var(--skeleton-font-weight-bold);
20
+ font-size: var(--skeleton-font-size-xl);
21
+ color: var(--skeleton-color-black);
22
+ }
23
+
24
+ .content {
25
+ color: var(--skeleton-color-black);
26
+ }
@@ -1,19 +1,19 @@
1
- /// <reference types="react" />
2
- export interface RichContentCardProps {
3
- link: {
4
- label: string;
5
- href: string;
6
- };
7
- labelsWithIcon: {
8
- label: string;
9
- icon: JSX.Element;
10
- }[];
11
- tags: string[];
12
- contentLinks?: {
13
- title: string;
14
- subTitle: string;
15
- href: string;
16
- }[];
17
- linkIsExternal?: boolean;
18
- }
19
- export declare const RichContentCard: ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }: RichContentCardProps) => JSX.Element;
1
+ /// <reference types="react" />
2
+ export interface RichContentCardProps {
3
+ link: {
4
+ label: string;
5
+ href: string;
6
+ };
7
+ labelsWithIcon: {
8
+ label: string;
9
+ icon: JSX.Element;
10
+ }[];
11
+ tags: string[];
12
+ contentLinks?: {
13
+ title: string;
14
+ subTitle: string;
15
+ href: string;
16
+ }[];
17
+ linkIsExternal?: boolean;
18
+ }
19
+ export declare const RichContentCard: ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }: RichContentCardProps) => JSX.Element;