@conduction/components 2.0.23 → 2.0.24

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx

@@ -1,49 +1,49 @@
-import * as React from "react";
-import * as styles from "./ImageAndDetailsCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
-
-interface ImageAndDetailsCardProps {
-  title: string;
-  image: JSX.Element;
-  introduction: string;
-  link: {
-    href: string;
-    label: string;
-  };
-  subHeader?: string;
-  layoutClassName?: string;
-}
-
-export const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps> = ({
-  image,
-  title,
-  subHeader,
-  introduction,
-  link,
-  layoutClassName,
-}) => {
-  return (
-    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
-      <div className={styles.image}>{image}</div>
-
-      <div className={styles.content}>
-        <div>
-          <div className={styles.title}>{title}</div>
-
-          <span className={styles.subHeader}>{subHeader}</span>
-        </div>
-
-        <div className={styles.introduction}>{introduction}</div>
-
-        <div className={styles.link}>
-          <Link icon={<ArrowRightIcon />} iconAlign="start">
-            {link.label}
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./ImageAndDetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+
+interface ImageAndDetailsCardProps {
+  title: string;
+  image: JSX.Element;
+  introduction: string;
+  link: {
+    href: string;
+    label: string;
+  };
+  subHeader?: string;
+  layoutClassName?: string;
+}
+
+export const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps> = ({
+  image,
+  title,
+  subHeader,
+  introduction,
+  link,
+  layoutClassName,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.image}>{image}</div>
+
+      <div className={styles.content}>
+        <div>
+          <div className={styles.title}>{title}</div>
+
+          <span className={styles.subHeader}>{subHeader}</span>
+        </div>
+
+        <div className={styles.introduction}>{introduction}</div>
+
+        <div className={styles.link}>
+          <Link icon={<ArrowRightIcon />} iconAlign="start">
+            {link.label}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/card/index.js

@@ -1,5 +1,5 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
-import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./RichContentCard/RichContentCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };

package/src/components/card/index.tsx

@@ -1,8 +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";
+
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };

package/src/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/src/components/card/infoCard/InfoCard.tsx

@@ -1,19 +1,19 @@
-import * as React from "react";
-import * as styles from "./InfoCard.module.css";
-import clsx from "clsx";
-
-interface InfoCardProps {
-  title: string;
-  content: JSX.Element | string;
-  layoutClassName?: string;
-}
-
-export const InfoCard: React.FC<InfoCardProps> = ({ title, content, layoutClassName }) => {
-  return (
-    <div className={clsx([layoutClassName && layoutClassName], styles.container)}>
-      <span className={styles.title}>{title}</span>
-
-      <div className={styles.content}>{content}</div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./InfoCard.module.css";
+import clsx from "clsx";
+
+interface InfoCardProps {
+  title: string;
+  content: JSX.Element | string;
+  layoutClassName?: string;
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({ title, content, layoutClassName }) => {
+  return (
+    <div className={clsx([layoutClassName && layoutClassName], styles.container)}>
+      <span className={styles.title}>{title}</span>
+
+      <div className={styles.content}>{content}</div>
+    </div>
+  );
+};

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

@@ -1,17 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import * as styles from "./RichContentCard.module.css";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-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 }) => (_jsx(LabelWithIcon, { ...{ label, icon } }))) }), _jsx("div", { className: styles.tags, children: tags.map((tag) => (_jsx(Tag, { ...{ tag } }))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
-};
-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 Tag = ({ tag }) => {
-    return _jsx("span", { className: styles.tag, children: tag });
-};
-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 { Divider, Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import * as styles from "./RichContentCard.module.css";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+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 }) => (_jsx(LabelWithIcon, { ...{ label, icon } }))) }), _jsx("div", { className: styles.tags, children: tags.map((tag) => (_jsx(Tag, { ...{ tag } }))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
+};
+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 Tag = ({ tag }) => {
+    return _jsx("span", { className: styles.tag, children: tag });
+};
+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, {}) })] }));
+};

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

@@ -1,93 +1,93 @@
-:root {
-  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  border: var(--conduction-rich-content-card-border);
-  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 > *:not(.link):not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.link {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.link > :first-child {
-  display: flex;
-}
-
-.labelsWithIcon {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.labelsWithIcon > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.contentLinks > *:not(:last-child):not(hr) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-/* Component: LabelWithIcon */
-.labelWithIcon {
-  display: flex;
-  align-items: center;
-  color: var(--skeleton-color-grey-3);
-}
-
-.labelWithIcon > .labelWithIcon_icon > svg {
-  height: var(--skeleton-size-sm);
-  width: var(--skeleton-size-sm);
-  margin-inline-end: var(--skeleton-size-xs);
-}
-
-.labelWithIcon > .labelWithIcon_label {
-  font-size: var(--skeleton-size-sm);
-}
-
-/* Content Link */
-.contentLink {
-  display: flex;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-  text-decoration: none !important;
-}
-
-.contentLink > span {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.contentLink:hover {
-  cursor: pointer;
-}
-
-.contentLink_content {
-  display: flex;
-  flex-direction: column;
-}
-
-.contentLink_title {
-  font-size: var(--conduction-content-link-font-size);
-}
-
-.contentLink_subTitle {
-  font-size: var(--conduction-content-link-font-size);
-  color: var(--denhaag-color-grey-3);
-}
+:root {
+  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  border: var(--conduction-rich-content-card-border);
+  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 > *:not(.link):not(:last-child) {
+  margin-block-end: var(--skeleton-size-md);
+}
+
+.link {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.link > :first-child {
+  display: flex;
+}
+
+.labelsWithIcon {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.labelsWithIcon > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.contentLinks > *:not(:last-child):not(hr) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+/* Component: LabelWithIcon */
+.labelWithIcon {
+  display: flex;
+  align-items: center;
+  color: var(--skeleton-color-grey-3);
+}
+
+.labelWithIcon > .labelWithIcon_icon > svg {
+  height: var(--skeleton-size-sm);
+  width: var(--skeleton-size-sm);
+  margin-inline-end: var(--skeleton-size-xs);
+}
+
+.labelWithIcon > .labelWithIcon_label {
+  font-size: var(--skeleton-size-sm);
+}
+
+/* Content Link */
+.contentLink {
+  display: flex;
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
+  text-decoration: none !important;
+}
+
+.contentLink > span {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.contentLink:hover {
+  cursor: pointer;
+}
+
+.contentLink_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.contentLink_title {
+  font-size: var(--conduction-content-link-font-size);
+}
+
+.contentLink_subTitle {
+  font-size: var(--conduction-content-link-font-size);
+  color: var(--denhaag-color-grey-3);
+}

package/src/components/card/richContentCard/RichContentCard.tsx

@@ -1,98 +1,98 @@
-import { Divider, Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import * as React from "react";
-import * as styles from "./RichContentCard.module.css";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Tag } from "../../tag/Tag";
-
-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 const RichContentCard: React.FC<RichContentCardProps> = ({
-  link,
-  labelsWithIcon,
-  tags,
-  contentLinks,
-  linkIsExternal,
-}) => {
-  return (
-    <div className={styles.container}>
-      <div className={styles.link} onClick={() => navigate(link.href)}>
-        <Link icon={linkIsExternal ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
-          {link.label}
-        </Link>
-      </div>
-
-      <div className={styles.labelsWithIcon}>
-        {labelsWithIcon.map(({ label, icon }, idx) => (
-          <LabelWithIcon key={idx} {...{ label, icon }} />
-        ))}
-      </div>
-
-      <div className={styles.tags}>
-        {tags.map((tag, idx) => (
-          <Tag key={idx} label={tag} />
-        ))}
-      </div>
-
-      {contentLinks && (
-        <div className={styles.contentLinks}>
-          <Divider />
-          {contentLinks.map(({ title, subTitle, href }, idx) => (
-            <ContentLink key={idx} {...{ title, subTitle, href }} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-interface LabelWithIconProps {
-  label: string;
-  icon: JSX.Element;
-}
-
-const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
-  return (
-    <div className={styles.labelWithIcon}>
-      <span className={styles.labelWithIcon_icon}>{icon}</span>
-      <span className={styles.labelWithIcon_label}>{label}</span>
-    </div>
-  );
-};
-
-interface ContentLinkProps {
-  title: string;
-  subTitle: string;
-  href: string;
-}
-
-const ContentLink: React.FC<ContentLinkProps> = ({ title, subTitle, href }) => {
-  return (
-    <Link className={styles.contentLink}>
-      <div className={styles.contentLink_content}>
-        <span className={styles.contentLink_title}>{title}</span>
-        <span className={styles.contentLink_subTitle}>{subTitle}</span>
-      </div>
-
-      <div>
-        <ArrowRightIcon />
-      </div>
-    </Link>
-  );
-};
+import { Divider, Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import * as React from "react";
+import * as styles from "./RichContentCard.module.css";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
+
+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 const RichContentCard: React.FC<RichContentCardProps> = ({
+  link,
+  labelsWithIcon,
+  tags,
+  contentLinks,
+  linkIsExternal,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.link} onClick={() => navigate(link.href)}>
+        <Link icon={linkIsExternal ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
+          {link.label}
+        </Link>
+      </div>
+
+      <div className={styles.labelsWithIcon}>
+        {labelsWithIcon.map(({ label, icon }, idx) => (
+          <LabelWithIcon key={idx} {...{ label, icon }} />
+        ))}
+      </div>
+
+      <div className={styles.tags}>
+        {tags.map((tag, idx) => (
+          <Tag key={idx} label={tag} />
+        ))}
+      </div>
+
+      {contentLinks && (
+        <div className={styles.contentLinks}>
+          <Divider />
+          {contentLinks.map(({ title, subTitle, href }, idx) => (
+            <ContentLink key={idx} {...{ title, subTitle, href }} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface LabelWithIconProps {
+  label: string;
+  icon: JSX.Element;
+}
+
+const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
+  return (
+    <div className={styles.labelWithIcon}>
+      <span className={styles.labelWithIcon_icon}>{icon}</span>
+      <span className={styles.labelWithIcon_label}>{label}</span>
+    </div>
+  );
+};
+
+interface ContentLinkProps {
+  title: string;
+  subTitle: string;
+  href: string;
+}
+
+const ContentLink: React.FC<ContentLinkProps> = ({ title, subTitle, href }) => {
+  return (
+    <Link className={styles.contentLink}>
+      <div className={styles.contentLink_content}>
+        <span className={styles.contentLink_title}>{title}</span>
+        <span className={styles.contentLink_subTitle}>{subTitle}</span>
+      </div>
+
+      <div>
+        <ArrowRightIcon />
+      </div>
+    </Link>
+  );
+};

package/src/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);
+}