@conduction/components 2.2.19 → 2.2.20
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.
- package/.prettierrc +30 -30
- package/README.md +1 -0
- package/lib/components/Pagination/Pagination.d.ts +14 -14
- package/lib/components/Pagination/Pagination.js +12 -12
- package/lib/components/badgeCounter/BadgeCounter.d.ts +8 -8
- package/lib/components/badgeCounter/BadgeCounter.js +4 -4
- package/lib/components/badgeCounter/BadgeCounter.module.css +27 -27
- package/lib/components/card/cardHeader/CardHeader.d.ts +4 -4
- package/lib/components/card/cardHeader/CardHeader.js +14 -14
- package/lib/components/card/cardWrapper/CardWrapper.d.ts +2 -2
- package/lib/components/card/cardWrapper/CardWrapper.js +6 -6
- package/lib/components/card/detailsCard/DetailsCard.d.ts +14 -14
- package/lib/components/card/detailsCard/DetailsCard.js +11 -11
- package/lib/components/card/downloadCard/DownloadCard.d.ts +11 -11
- package/lib/components/card/downloadCard/DownloadCard.js +9 -9
- package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts +13 -13
- package/lib/components/card/horizontalImageCard/HorizontalImageCard.js +10 -10
- package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts +14 -14
- package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +10 -10
- package/lib/components/card/index.d.ts +8 -8
- package/lib/components/card/index.js +8 -8
- package/lib/components/card/infoCard/InfoCard.d.ts +8 -8
- package/lib/components/card/infoCard/InfoCard.js +6 -6
- package/lib/components/card/infoCard/InfoCard.module.css +26 -26
- package/lib/components/card/richContentCard/RichContentCard.d.ts +19 -19
- package/lib/components/card/richContentCard/RichContentCard.js +15 -16
- package/lib/components/card/richContentCard/RichContentCard.module.css +103 -93
- package/lib/components/codeBlock/CodeBlock.d.ts +6 -6
- package/lib/components/codeBlock/CodeBlock.js +3 -3
- package/lib/components/codeBlock/CodeBlock.module.css +6 -6
- package/lib/components/container/Container.d.ts +6 -6
- package/lib/components/container/Container.js +4 -4
- package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
- package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts +17 -17
- package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
- package/lib/components/denhaag-wrappers/pagination/Pagination.css +120 -120
- package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts +9 -9
- package/lib/components/denhaag-wrappers/pagination/Pagination.js +15 -15
- package/lib/components/editableTableRow/EditableTableRow.d.ts +14 -14
- package/lib/components/editableTableRow/EditableTableRow.js +31 -31
- package/lib/components/editableTableRow/EditableTableRow.module.css +25 -25
- package/lib/components/formFields/checkbox/Checkbox.module.css +7 -7
- package/lib/components/formFields/checkbox/checkbox.d.ts +9 -9
- package/lib/components/formFields/checkbox/checkbox.js +3 -3
- package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts +23 -23
- package/lib/components/formFields/createKeyValue/CreateKeyValue.js +40 -40
- package/lib/components/formFields/date/Date.d.ts +12 -12
- package/lib/components/formFields/date/Date.js +10 -10
- package/lib/components/formFields/date/Date.module.css +12 -12
- package/lib/components/formFields/errorMessage/ErrorMessage.d.ts +5 -5
- package/lib/components/formFields/errorMessage/ErrorMessage.js +3 -3
- package/lib/components/formFields/index.d.ts +7 -7
- package/lib/components/formFields/index.js +7 -7
- package/lib/components/formFields/input.d.ts +22 -22
- package/lib/components/formFields/input.js +12 -12
- package/lib/components/formFields/radio.d.ts +9 -9
- package/lib/components/formFields/radio.js +3 -3
- package/lib/components/formFields/select/select.d.ts +24 -24
- package/lib/components/formFields/select/select.js +74 -74
- package/lib/components/formFields/textarea.d.ts +10 -10
- package/lib/components/formFields/textarea.js +4 -4
- package/lib/components/formFields/types.d.ts +6 -6
- package/lib/components/formFields/types.js +1 -1
- package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.d.ts +10 -10
- package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.js +36 -36
- package/lib/components/htmlParser/ParsedHTML.d.ts +10 -0
- package/lib/components/htmlParser/ParsedHTML.js +17 -0
- package/lib/components/htmlParser/ParsedHTML.module.css +7 -0
- package/lib/components/htmlParser/parser/alert/getAlert.d.ts +1 -0
- package/lib/components/htmlParser/parser/alert/getAlert.js +18 -0
- package/lib/components/htmlParser/parser/alert/getAlert.module.css +28 -0
- package/lib/components/htmlParser/parser/anchor/getAnchor.d.ts +2 -0
- package/lib/components/htmlParser/parser/anchor/getAnchor.js +74 -0
- package/lib/components/htmlParser/parser/code/getCode.d.ts +1 -0
- package/lib/components/htmlParser/parser/code/getCode.js +11 -0
- package/lib/components/htmlParser/parser/getBlockquote/getBlockquote.d.ts +1 -0
- package/lib/components/htmlParser/parser/getBlockquote/getBlockquote.js +6 -0
- package/lib/components/htmlParser/parser/header/getHeader.d.ts +1 -0
- package/lib/components/htmlParser/parser/header/getHeader.js +15 -0
- package/lib/components/htmlParser/parser/image/getImage.d.ts +1 -0
- package/lib/components/htmlParser/parser/image/getImage.js +28 -0
- package/lib/components/htmlParser/parser/list/getList.d.ts +1 -0
- package/lib/components/htmlParser/parser/list/getList.js +12 -0
- package/lib/components/htmlParser/parser/list/getList.module.css +3 -0
- package/lib/components/htmlParser/parser/listItem/getListItem.d.ts +1 -0
- package/lib/components/htmlParser/parser/listItem/getListItem.js +12 -0
- package/lib/components/htmlParser/parser/paragraph/getParagraph.d.ts +1 -0
- package/lib/components/htmlParser/parser/paragraph/getParagraph.js +6 -0
- package/lib/components/htmlParser/parser/svg/getSvg.d.ts +1 -0
- package/lib/components/htmlParser/parser/svg/getSvg.js +8 -0
- package/lib/components/htmlParser/parser/table/getTable.d.ts +1 -0
- package/lib/components/htmlParser/parser/table/getTable.js +7 -0
- package/lib/components/htmlParser/parser/table/getTable.module.css +3 -0
- package/lib/components/htmlParser/parser/tableBody/getTableBody.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableBody/getTableBody.js +7 -0
- package/lib/components/htmlParser/parser/tableBody/getTableBody.module.css +3 -0
- package/lib/components/htmlParser/parser/tableCell/getTableCell.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableCell/getTableCell.js +7 -0
- package/lib/components/htmlParser/parser/tableCell/getTableCell.module.css +3 -0
- package/lib/components/htmlParser/parser/tableHeader/getTableHeader.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableHeader/getTableHeader.js +7 -0
- package/lib/components/htmlParser/parser/tableHeader/getTableHeader.module.css +28 -0
- package/lib/components/htmlParser/parser/tableHeaderCell/getTableHeaderCell.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableHeaderCell/getTableHeaderCell.js +6 -0
- package/lib/components/htmlParser/parser/tableRow/getTableRow.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableRow/getTableRow.js +7 -0
- package/lib/components/htmlParser/parser/tableRow/getTableRow.module.css +29 -0
- package/lib/components/htmlParser/parser/useHtmlParser.d.ts +5 -0
- package/lib/components/htmlParser/parser/useHtmlParser.js +78 -0
- package/lib/components/htmlParser/useGitHubDirectories.d.ts +10 -0
- package/lib/components/htmlParser/useGitHubDirectories.js +31 -0
- package/lib/components/imageDivider/ImageDivider.d.ts +7 -7
- package/lib/components/imageDivider/ImageDivider.js +6 -6
- package/lib/components/imageDivider/imageDivider.module.css +5 -5
- package/lib/components/logo/Logo.d.ts +8 -8
- package/lib/components/logo/Logo.js +10 -10
- package/lib/components/logo/Logo.module.css +15 -15
- package/lib/components/metaIcon/MetaIcon.d.ts +7 -7
- package/lib/components/metaIcon/MetaIcon.js +3 -3
- package/lib/components/metaIcon/MetaIcon.module.css +29 -29
- package/lib/components/notificationPopUp/NotificationPopUp.d.ts +26 -26
- package/lib/components/notificationPopUp/NotificationPopUp.js +32 -32
- package/lib/components/privateRoute/PrivateRoute.d.ts +6 -6
- package/lib/components/privateRoute/PrivateRoute.js +15 -15
- package/lib/components/quoteWrapper/QuoteWrapper.d.ts +7 -7
- package/lib/components/quoteWrapper/QuoteWrapper.js +5 -5
- package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
- package/lib/components/statusSteps/StatusSteps.d.ts +13 -0
- package/lib/components/statusSteps/StatusSteps.js +5 -0
- package/lib/components/tableWrapper/TableWrapper.d.ts +4 -0
- package/lib/components/tableWrapper/TableWrapper.js +30 -0
- package/lib/components/tableWrapper/TableWrapper.module.css +67 -0
- package/lib/components/tabs/Tabs.d.ts +5 -5
- package/lib/components/tabs/Tabs.js +49 -49
- package/lib/components/tag/Tag.d.ts +10 -10
- package/lib/components/tag/Tag.js +6 -6
- package/lib/components/tag/Tag.module.css +44 -44
- package/lib/components/toolTip/ToolTip.d.ts +14 -14
- package/lib/components/toolTip/ToolTip.js +14 -14
- package/lib/components/topNav/index.d.ts +3 -3
- package/lib/components/topNav/index.js +3 -3
- package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +39 -22
- package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +23 -23
- package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts +12 -12
- package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js +7 -7
- package/lib/custom.d copy.d.ts +5 -0
- package/lib/custom.d copy.js +1 -0
- package/lib/index.d.ts +27 -27
- package/lib/index.js +20 -20
- package/package.json +1 -1
- package/src/components/badgeCounter/BadgeCounter.module.css +27 -27
- package/src/components/card/infoCard/InfoCard.module.css +26 -26
- package/src/components/codeBlock/CodeBlock.module.css +6 -6
- package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
- package/src/components/formFields/checkbox/Checkbox.module.css +7 -7
- package/src/components/formFields/date/Date.module.css +12 -12
- package/src/components/imageDivider/imageDivider.module.css +5 -5
- package/src/components/logo/Logo.module.css +15 -15
- package/src/components/metaIcon/MetaIcon.module.css +29 -29
- package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
- package/src/components/tag/Tag.module.css +44 -44
- package/src/components/topNav/index.ts +4 -4
- package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +34 -2
- package/src/custom.d.ts +4 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getAlert: (children: any, options: any, type: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getAlert.module.css";
|
|
3
|
+
import { Alert } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getAlert = (children, options, type) => {
|
|
6
|
+
switch (true) {
|
|
7
|
+
case type.includes("note") || type.includes("info"):
|
|
8
|
+
return (_jsx(Alert, { className: styles.info, type: "info", children: domToReact(children, options) }));
|
|
9
|
+
case type.includes("error"):
|
|
10
|
+
return (_jsx(Alert, { className: styles.error, type: "error", children: domToReact(children, options) }));
|
|
11
|
+
case type.includes("warning"):
|
|
12
|
+
return (_jsx(Alert, { className: styles.warning, type: "warning", children: domToReact(children, options) }));
|
|
13
|
+
case type.includes("succes") || type.includes("ok"):
|
|
14
|
+
return (_jsx(Alert, { className: styles.ok, type: "ok", children: domToReact(children, options) }));
|
|
15
|
+
default:
|
|
16
|
+
return _jsx(Alert, { type: "info", children: domToReact(children, options) });
|
|
17
|
+
}
|
|
18
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.info svg {
|
|
2
|
+
fill: var(--utrecht-alert-icon-info-color);
|
|
3
|
+
}
|
|
4
|
+
.info p {
|
|
5
|
+
color: var(--utrecht-alert-info-color);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.warning svg {
|
|
9
|
+
fill: var(--utrecht-alert-icon-warning-color);
|
|
10
|
+
}
|
|
11
|
+
.warning p {
|
|
12
|
+
color: var(--utrecht-alert-warning-color);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.error svg {
|
|
16
|
+
fill: var(--utrecht-alert-icon-error-color);
|
|
17
|
+
}
|
|
18
|
+
.error p {
|
|
19
|
+
color: var(--utrecht-alert-error-color);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ok svg {
|
|
23
|
+
fill: var(--utrecht-alert-icon-ok-color);
|
|
24
|
+
}
|
|
25
|
+
.ok p {
|
|
26
|
+
color: var(--utrecht-alert-ok-color);
|
|
27
|
+
}
|
|
28
|
+
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import _ from "lodash";
|
|
3
|
+
import { Link } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { navigate } from "gatsby";
|
|
5
|
+
import { domToReact } from "html-react-parser";
|
|
6
|
+
export const getAnchor = (props, children, options, directories, location) => {
|
|
7
|
+
const handleClick = (e) => {
|
|
8
|
+
e.preventDefault();
|
|
9
|
+
const targetFile = _.upperFirst(props.href.substring(props.href.lastIndexOf("/") + 1).replace(".md", ""));
|
|
10
|
+
// No link
|
|
11
|
+
if (!props.href) {
|
|
12
|
+
navigate("#");
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
// Anchor Links
|
|
16
|
+
if (props.className === "anchor" || Array.from(props.href)[0] === "#") {
|
|
17
|
+
handleAnchorClick(props); // handles on-page scroll anchors
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
// Internal Links
|
|
21
|
+
if (!props.href.includes("://")) {
|
|
22
|
+
handleInternalLinks(props, targetFile, location, directories);
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
// External Links
|
|
26
|
+
if (props.href.includes("://")) {
|
|
27
|
+
open(props.href);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const attributes = {
|
|
32
|
+
...props,
|
|
33
|
+
onClick: handleClick,
|
|
34
|
+
};
|
|
35
|
+
return _jsx(Link, { ...attributes, children: domToReact(children, options) });
|
|
36
|
+
};
|
|
37
|
+
const handleInternalLinks = (props, targetFile, location, directories) => {
|
|
38
|
+
// Internal Links: same directory
|
|
39
|
+
if (!props.href.includes("/")) {
|
|
40
|
+
const targetDirectory = _.upperFirst(location.split("/").reverse()[1]);
|
|
41
|
+
navigate(`/pages/${targetDirectory}/${targetFile}`);
|
|
42
|
+
return; // ensure no other flow is triggered
|
|
43
|
+
}
|
|
44
|
+
// Internal Links: homepage
|
|
45
|
+
if (props.href.includes("/") && location === "/") {
|
|
46
|
+
const directoryFound = directories.some((directory) => directory.location === props.href);
|
|
47
|
+
if (directoryFound)
|
|
48
|
+
navigate(`/pages/${targetFile}`);
|
|
49
|
+
return; // ensure no other flow is triggered
|
|
50
|
+
}
|
|
51
|
+
// Internal Links: different directory
|
|
52
|
+
if (props.href.includes("/")) {
|
|
53
|
+
const targetDirectory = props.href.split("/").reverse()[1];
|
|
54
|
+
const directoryFound = directories.some((directory) => directory.location.substring(directory.location.lastIndexOf("/") + 1) === targetDirectory);
|
|
55
|
+
// Internal Link exists: redirect to page
|
|
56
|
+
if (directoryFound) {
|
|
57
|
+
navigate(`/pages/${_.upperFirst(targetDirectory)}/${targetFile}`);
|
|
58
|
+
}
|
|
59
|
+
// Internal Link does not exist: redirect to online GitHub environment (TODO)
|
|
60
|
+
if (!directoryFound) {
|
|
61
|
+
const hrefWithLeadingSlash = !props.href.startsWith("/") ? `/${props.href}` : props.href;
|
|
62
|
+
open(`${process.env.GATSBY_GITHUB_REPOSITORY_URL}/blob/master${hrefWithLeadingSlash}`);
|
|
63
|
+
}
|
|
64
|
+
return; // ensure no other flow is triggered
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const handleAnchorClick = (props) => {
|
|
68
|
+
const targetId = props.id ?? props.href.replace("#", "user-content-");
|
|
69
|
+
const target = document.getElementById(targetId);
|
|
70
|
+
const headerHeight = document.getElementById("header")?.clientHeight ?? 100;
|
|
71
|
+
if (target) {
|
|
72
|
+
window.scrollTo({ top: target.offsetTop - (headerHeight + 24), behavior: "smooth" }); // +24 simply adds some padding
|
|
73
|
+
}
|
|
74
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getCode: (name: string, props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Code, CodeBlock } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
import { domToReact } from "html-react-parser";
|
|
4
|
+
export const getCode = (name, props, children, options) => {
|
|
5
|
+
switch (name) {
|
|
6
|
+
case "code":
|
|
7
|
+
return _jsx(Code, { ...props, children: domToReact(children, options) });
|
|
8
|
+
case "pre":
|
|
9
|
+
return _jsx(CodeBlock, { ...props, children: domToReact(children, options) });
|
|
10
|
+
}
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getBlockquote: (children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Alert } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
import { domToReact } from "html-react-parser";
|
|
4
|
+
export const getBlockquote = (children, options) => {
|
|
5
|
+
return _jsx(Alert, { children: domToReact(children, options) });
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getHeader: (name: string, props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Heading1, Heading2, Heading3, Heading4 } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
import { domToReact } from "html-react-parser";
|
|
4
|
+
export const getHeader = (name, props, children, options) => {
|
|
5
|
+
switch (name) {
|
|
6
|
+
case "h1":
|
|
7
|
+
return _jsx(Heading1, { ...props, children: domToReact(children, options) });
|
|
8
|
+
case "h2":
|
|
9
|
+
return _jsx(Heading2, { ...props, children: domToReact(children, options) });
|
|
10
|
+
case "h3":
|
|
11
|
+
return _jsx(Heading3, { ...props, children: domToReact(children, options) });
|
|
12
|
+
case "h4":
|
|
13
|
+
return _jsx(Heading4, { ...props, children: domToReact(children, options) });
|
|
14
|
+
}
|
|
15
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getImage: (props: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Image } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
export const getImage = (props) => {
|
|
4
|
+
let src = props.src;
|
|
5
|
+
if (!props.src.includes("https://" || "http://")) {
|
|
6
|
+
const sessionUrl = process.env.GATSBY_GITHUB_REPOSITORY_URL;
|
|
7
|
+
const url = sessionUrl?.replace("https://github.com/", "");
|
|
8
|
+
src = `https://raw.githubusercontent.com/${url}/master/docs/features/${props.src}`;
|
|
9
|
+
}
|
|
10
|
+
let alt = props.alt;
|
|
11
|
+
if (!props.alt) {
|
|
12
|
+
alt = props.title;
|
|
13
|
+
}
|
|
14
|
+
if (!props.alt && !props.title) {
|
|
15
|
+
alt = props.src;
|
|
16
|
+
}
|
|
17
|
+
const attributes = {
|
|
18
|
+
...props,
|
|
19
|
+
src,
|
|
20
|
+
alt,
|
|
21
|
+
href: "",
|
|
22
|
+
onClick: (e) => {
|
|
23
|
+
e.stopPropagation();
|
|
24
|
+
open(src);
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
return _jsx(Image, { ...attributes });
|
|
28
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getList: (name: string, props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getList.module.css";
|
|
3
|
+
import { OrderedList, UnorderedList } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getList = (name, props, children, options) => {
|
|
6
|
+
switch (name) {
|
|
7
|
+
case "ol":
|
|
8
|
+
return (_jsx(OrderedList, { className: styles.list, ...props, children: domToReact(children, options) }));
|
|
9
|
+
case "ul":
|
|
10
|
+
return (_jsx(UnorderedList, { className: styles.list, ...props, children: domToReact(children, options) }));
|
|
11
|
+
}
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getListItem: (props: any, parent: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { OrderedListItem, UnorderedListItem } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
import { domToReact } from "html-react-parser";
|
|
4
|
+
export const getListItem = (props, parent, children, options) => {
|
|
5
|
+
switch (parent.name) {
|
|
6
|
+
case "ol":
|
|
7
|
+
return _jsx(OrderedListItem, { ...props, children: domToReact(children, options) });
|
|
8
|
+
case "ul":
|
|
9
|
+
return _jsx(UnorderedListItem, { ...props, children: domToReact(children, options) });
|
|
10
|
+
}
|
|
11
|
+
return;
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getParagraph: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Paragraph } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
import { domToReact } from "html-react-parser";
|
|
4
|
+
export const getParagraph = (props, children, options) => {
|
|
5
|
+
return _jsx(Paragraph, { ...props, children: domToReact(children, options) });
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getSvg: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { domToReact } from "html-react-parser";
|
|
3
|
+
export const getSvg = (props, children, options) => {
|
|
4
|
+
if (props.className.includes("octicon octicon-link")) {
|
|
5
|
+
return _jsx(_Fragment, {});
|
|
6
|
+
}
|
|
7
|
+
return _jsx("svg", { ...props, children: domToReact(children, options) });
|
|
8
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTable: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getTable.module.css";
|
|
3
|
+
import { Table } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getTable = (props, children, options) => {
|
|
6
|
+
return (_jsx(Table, { className: styles.table, ...props, children: domToReact(children, options) }));
|
|
7
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTableBody: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getTableBody.module.css";
|
|
3
|
+
import { TableBody } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getTableBody = (props, children, options) => {
|
|
6
|
+
return (_jsx(TableBody, { className: styles.tableBody, ...props, children: domToReact(children, options) }));
|
|
7
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTableCell: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getTableCell.module.css";
|
|
3
|
+
import { TableCell } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getTableCell = (props, children, options) => {
|
|
6
|
+
return (_jsx(TableCell, { className: styles.tableCell, ...props, children: domToReact(children, options) }));
|
|
7
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTableHeader: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getTableHeader.module.css";
|
|
3
|
+
import { TableHeader } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getTableHeader = (props, children, options) => {
|
|
6
|
+
return (_jsx(TableHeader, { className: styles.tableHeader, ...props, children: domToReact(children, options) }));
|
|
7
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.tableHeader {
|
|
2
|
+
font-family: var(--utrecht-table-header-font-family);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.tableHeader > * {
|
|
6
|
+
border-block-end: var(--utrecht-table-header-border-block-end-width) solid
|
|
7
|
+
var(--utrecht-table-header-border-block-end-color);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tableHeader > tr:nth-child(odd) {
|
|
11
|
+
background-color: inherit;
|
|
12
|
+
color: inherit;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.tableHeader > tr:nth-child(odd):hover {
|
|
16
|
+
background-color: inherit;
|
|
17
|
+
color: inherit;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.tableHeader > tr:nth-child(even) {
|
|
21
|
+
background-color: inherit;
|
|
22
|
+
color: inherit;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.tableHeader > tr:nth-child(even):hover {
|
|
26
|
+
background-color: inherit;
|
|
27
|
+
color: inherit;
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTableHeaderCell: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { TableHeaderCell } from "@utrecht/component-library-react/dist/css-module";
|
|
3
|
+
import { domToReact } from "html-react-parser";
|
|
4
|
+
export const getTableHeaderCell = (props, children, options) => {
|
|
5
|
+
return _jsx(TableHeaderCell, { ...props, children: domToReact(children, options) });
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getTableRow: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./getTableRow.module.css";
|
|
3
|
+
import { TableRow } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import { domToReact } from "html-react-parser";
|
|
5
|
+
export const getTableRow = (props, children, options) => {
|
|
6
|
+
return (_jsx(TableRow, { className: styles.tableRow, ...props, children: domToReact(children, options) }));
|
|
7
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.tableRow:nth-child(odd) {
|
|
2
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
3
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.tableRow:nth-child(odd):hover {
|
|
7
|
+
background-color: var(--utrecht-table-row-hover-background-color);
|
|
8
|
+
color: var(--utrecht-table-row-hover-color);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.tableRow:nth-child(even) {
|
|
12
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
13
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.tableRow:nth-child(even):hover {
|
|
17
|
+
background-color: var(--utrecht-table-row-hover-background-color);
|
|
18
|
+
color: var(--utrecht-table-row-hover-color);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.tableRow:nth-child(even) {
|
|
22
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
23
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.tableRow:nth-child(even):hover {
|
|
27
|
+
background-color: var(--utrecht-table-row-hover-background-color);
|
|
28
|
+
color: var(--utrecht-table-row-hover-color);
|
|
29
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { attributesToProps } from "html-react-parser";
|
|
2
|
+
import { getHeader } from "./header/getHeader";
|
|
3
|
+
import { getAnchor } from "./anchor/getAnchor";
|
|
4
|
+
import { getListItem } from "./listItem/getListItem";
|
|
5
|
+
import { getImage } from "./image/getImage";
|
|
6
|
+
import { getList } from "./list/getList";
|
|
7
|
+
import { getParagraph } from "./paragraph/getParagraph";
|
|
8
|
+
import { getBlockquote } from "./getBlockquote/getBlockquote";
|
|
9
|
+
import { getTable } from "./table/getTable";
|
|
10
|
+
import { getTableRow } from "./tableRow/getTableRow";
|
|
11
|
+
import { getTableHeader } from "./tableHeader/getTableHeader";
|
|
12
|
+
import { getTableHeaderCell } from "./tableHeaderCell/getTableHeaderCell";
|
|
13
|
+
import { getTableBody } from "./tableBody/getTableBody";
|
|
14
|
+
import { getTableCell } from "./tableCell/getTableCell";
|
|
15
|
+
import { getCode } from "./code/getCode";
|
|
16
|
+
import { getAlert } from "./alert/getAlert";
|
|
17
|
+
import { useGitHubDirectories } from "../useGitHubDirectories";
|
|
18
|
+
import { getSvg } from "./svg/getSvg";
|
|
19
|
+
export const useHtmlParser = (location, directoriesJson) => {
|
|
20
|
+
const { directories } = useGitHubDirectories(directoriesJson);
|
|
21
|
+
const options = {
|
|
22
|
+
replace: ({ attribs, parent, children, name }) => {
|
|
23
|
+
if (!attribs) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const props = attributesToProps(attribs);
|
|
27
|
+
if (attribs && (name === "h1" || name === "h2" || name === "h3" || name === "h4")) {
|
|
28
|
+
return getHeader(name, props, children, options);
|
|
29
|
+
}
|
|
30
|
+
if (attribs && name === "p") {
|
|
31
|
+
return getParagraph(props, children, options);
|
|
32
|
+
}
|
|
33
|
+
if (attribs && name === "a") {
|
|
34
|
+
return getAnchor(props, children, options, directories, location);
|
|
35
|
+
}
|
|
36
|
+
if (attribs && (name === "ol" || name === "ul")) {
|
|
37
|
+
return getList(name, props, children, options);
|
|
38
|
+
}
|
|
39
|
+
if (attribs && name === "li") {
|
|
40
|
+
return getListItem(props, parent, children, options);
|
|
41
|
+
}
|
|
42
|
+
if (attribs && name === "img") {
|
|
43
|
+
return getImage(props);
|
|
44
|
+
}
|
|
45
|
+
if (attribs && name === "blockquote") {
|
|
46
|
+
return getBlockquote(children, options);
|
|
47
|
+
}
|
|
48
|
+
if (attribs && name === "div" && attribs.class?.includes("markdown-alert")) {
|
|
49
|
+
return getAlert(children, options, attribs.class);
|
|
50
|
+
}
|
|
51
|
+
if (attribs && name === "table") {
|
|
52
|
+
return getTable(props, children, options);
|
|
53
|
+
}
|
|
54
|
+
if (attribs && name === "tr") {
|
|
55
|
+
return getTableRow(props, children, options);
|
|
56
|
+
}
|
|
57
|
+
if (attribs && name === "thead") {
|
|
58
|
+
return getTableHeader(props, children, options);
|
|
59
|
+
}
|
|
60
|
+
if (attribs && name === "th") {
|
|
61
|
+
return getTableHeaderCell(props, children, options);
|
|
62
|
+
}
|
|
63
|
+
if (attribs && name === "tbody") {
|
|
64
|
+
return getTableBody(props, children, options);
|
|
65
|
+
}
|
|
66
|
+
if (attribs && name === "td") {
|
|
67
|
+
return getTableCell(props, children, options);
|
|
68
|
+
}
|
|
69
|
+
if (attribs && name === "svg") {
|
|
70
|
+
return getSvg(props, children, options);
|
|
71
|
+
}
|
|
72
|
+
if (attribs && (name === "code" || name === "pre")) {
|
|
73
|
+
return getCode(name, props, children, options);
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
return { options };
|
|
78
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare type TGitHubDirectory = {
|
|
2
|
+
name: string;
|
|
3
|
+
location: string;
|
|
4
|
+
};
|
|
5
|
+
export declare const useGitHubDirectories: (test: string) => {
|
|
6
|
+
directories: TGitHubDirectory[];
|
|
7
|
+
getSlugFromName: (name: string) => string;
|
|
8
|
+
getDirectoryReadMeLocation: (pageSlug: string) => string;
|
|
9
|
+
getDetailMdLocation: (pageSlug: string, detailPageSlug: string) => string;
|
|
10
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export const useGitHubDirectories = (test) => {
|
|
3
|
+
const [directories, setDirectories] = React.useState([]);
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const gitHubDirectoryPathsString = test;
|
|
6
|
+
if (!gitHubDirectoryPathsString)
|
|
7
|
+
return;
|
|
8
|
+
try {
|
|
9
|
+
const directories = JSON.parse(gitHubDirectoryPathsString);
|
|
10
|
+
setDirectories(directories);
|
|
11
|
+
}
|
|
12
|
+
catch {
|
|
13
|
+
console.warn("Something went wrong parsing the GitHub directories.");
|
|
14
|
+
}
|
|
15
|
+
}, []);
|
|
16
|
+
const getSlugFromName = (name) => name.replace(" ", "-");
|
|
17
|
+
const getNameFromSlug = (slug) => slug.replace("-", " "); // internal function
|
|
18
|
+
const getDirectoryReadMeLocation = (pageSlug) => {
|
|
19
|
+
const directory = directories.find((directory) => directory.name === getNameFromSlug(pageSlug));
|
|
20
|
+
if (!directory)
|
|
21
|
+
return "";
|
|
22
|
+
return `${directory.location}/README.md`;
|
|
23
|
+
};
|
|
24
|
+
const getDetailMdLocation = (pageSlug, detailPageSlug) => {
|
|
25
|
+
const directory = directories.find((directory) => directory.name === getNameFromSlug(pageSlug));
|
|
26
|
+
if (!directory)
|
|
27
|
+
return "";
|
|
28
|
+
return `${directory.location}/${getNameFromSlug(detailPageSlug)}.md`;
|
|
29
|
+
};
|
|
30
|
+
return { directories, getSlugFromName, getDirectoryReadMeLocation, getDetailMdLocation };
|
|
31
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface ImageDividerProps {
|
|
3
|
-
image: string;
|
|
4
|
-
layoutClassName: string;
|
|
5
|
-
}
|
|
6
|
-
export declare const ImageDivider: ({ image, layoutClassName }: ImageDividerProps) => JSX.Element;
|
|
7
|
-
export {};
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface ImageDividerProps {
|
|
3
|
+
image: string;
|
|
4
|
+
layoutClassName: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const ImageDivider: ({ image, layoutClassName }: ImageDividerProps) => JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import * as styles from "./imageDivider.module.css";
|
|
4
|
-
export const ImageDivider = ({ image, layoutClassName }) => {
|
|
5
|
-
return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
|
|
6
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import * as styles from "./imageDivider.module.css";
|
|
4
|
+
export const ImageDivider = ({ image, layoutClassName }) => {
|
|
5
|
+
return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
|
|
6
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.divider {
|
|
2
|
-
display: block;
|
|
3
|
-
object-fit: cover;
|
|
4
|
-
width: 100%;
|
|
5
|
-
}
|
|
1
|
+
.divider {
|
|
2
|
+
display: block;
|
|
3
|
+
object-fit: cover;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface LogoProps {
|
|
3
|
-
layoutClassName: string;
|
|
4
|
-
href?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare const AuthenticatedLogo: ({ layoutClassName, href }: LogoProps) => JSX.Element;
|
|
7
|
-
export declare const UnauthenticatedLogo: ({ layoutClassName, href }: LogoProps) => JSX.Element;
|
|
8
|
-
export {};
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface LogoProps {
|
|
3
|
+
layoutClassName: string;
|
|
4
|
+
href?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const AuthenticatedLogo: ({ layoutClassName, href }: LogoProps) => JSX.Element;
|
|
7
|
+
export declare const UnauthenticatedLogo: ({ layoutClassName, href }: LogoProps) => JSX.Element;
|
|
8
|
+
export {};
|