@conduction/components 2.1.40 → 2.2.1

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

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

package/lib/components/card/richContentCard/RichContentCard.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-export interface RichContentCardProps {
-    link: {
-        label: string;
-        href: string;
-    };
-    labelsWithIcon: {
-        label: string;
-        icon: JSX.Element;
-    }[];
-    tags: string[];
-    contentLinks?: {
-        title: string;
-        subTitle: string;
-        href: string;
-    }[];
-    linkIsExternal?: boolean;
-}
-export declare const RichContentCard: ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }: RichContentCardProps) => JSX.Element;
+/// <reference types="react" />
+export interface RichContentCardProps {
+    link: {
+        label: string;
+        href: string;
+    };
+    labelsWithIcon: {
+        label: string;
+        icon: JSX.Element;
+    }[];
+    tags: string[];
+    contentLinks?: {
+        title: string;
+        subTitle: string;
+        href: string;
+    }[];
+    linkIsExternal?: boolean;
+}
+export declare const RichContentCard: ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }: RichContentCardProps) => JSX.Element;

package/lib/components/card/richContentCard/RichContentCard.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider } from "@gemeente-denhaag/divider";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
-import * as styles from "./RichContentCard.module.css";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Tag } from "../../tag/Tag";
-export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
-};
-const LabelWithIcon = ({ label, icon }) => {
-    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
-};
-const ContentLink = ({ title, subTitle, href }) => {
-    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./RichContentCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { navigate } from "gatsby";
+import { Tag } from "../../tag/Tag";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
+export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.linkContainer, onClick: () => navigate(link.href), children: _jsxs(Link, { className: styles.link, children: [_jsx(FontAwesomeIcon, { icon: linkIsExternal ? faExternalLink : faArrowRight }), link.label] }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx("hr", { className: styles.divider }), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
+};
+const LabelWithIcon = ({ label, icon }) => {
+    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
+};
+const ContentLink = ({ title, subTitle }) => {
+    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(FontAwesomeIcon, { icon: faArrowRight }) })] }));
+};

package/lib/components/card/richContentCard/RichContentCard.module.css

@@ -14,18 +14,22 @@
   padding-block-end: var(--skeleton-size-md);
 }
 
-.container > *:not(.link):not(:last-child) {
+.container > *:not(.linkContainer):not(:last-child) {
   margin-block-end: var(--skeleton-size-md);
 }
 
-.link {
+.linkContainer {
   margin-block-end: var(--skeleton-size-xs);
 }
 
-.link > :first-child {
+.linkContainer > :first-child {
   display: flex;
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 .labelsWithIcon {
   display: flex;
   flex-wrap: wrap;
@@ -91,3 +95,9 @@
   font-size: var(--conduction-content-link-font-size);
   color: var(--denhaag-color-grey-3);
 }
+
+.divider {
+  width: 100%;
+  opacity: 0.5;
+  margin-block: var(--skeleton-size-lg);
+}

package/lib/components/codeBlock/CodeBlock.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-interface CodeBlockProps {
-    codeBlock: string | JSX.Element;
-}
-export declare const CodeBlock: ({ codeBlock }: CodeBlockProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface CodeBlockProps {
+    codeBlock: string | JSX.Element;
+}
+export declare const CodeBlock: ({ codeBlock }: CodeBlockProps) => JSX.Element;
+export {};

package/lib/components/codeBlock/CodeBlock.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./CodeBlock.module.css";
-export const CodeBlock = ({ codeBlock }) => _jsx("div", { className: styles.code, children: codeBlock });
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./CodeBlock.module.css";
+export const CodeBlock = ({ codeBlock }) => _jsx("div", { className: styles.code, children: codeBlock });

package/lib/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/lib/components/container/Container.d.ts

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

package/lib/components/container/Container.js

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