@conduction/components 2.0.33 → 2.1.0

package/package.json

@@ -1,51 +1,46 @@
-{
-  "name": "@conduction/components",
-  "version": "2.0.33",
-  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
-  "main": "lib/index.js",
-  "scripts": {
-    "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ConductionNL/conduction-components.git"
-  },
-  "keywords": [
-    "React",
-    "Gatsby",
-    "Conduction",
-    "Components"
-  ],
-  "author": "Conduction B.V.",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/ConductionNL/conduction-components/issues"
-  },
-  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
-    "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
-    "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",
-    "@gemeente-denhaag/process-steps": "^0.1.0-alpha.18",
-    "@gemeente-denhaag/sidenav": "^0.1.0-alpha.1",
-    "@gemeente-denhaag/table": "^0.1.1-alpha.87",
-    "@gemeente-denhaag/textarea": "^0.1.1-alpha.65",
-    "clsx": "^1.1.1",
-    "gatsby": "^4.11.1",
-    "react": "^17.0.1",
-    "react-hook-form": "7.29.0",
-    "react-select": "5.3.2",
-    "react-tooltip": "^4.2.21"
-  },
-  "devDependencies": {
-    "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "tsc-hooks": "^1.1.1",
-    "typescript": "^4.6.3"
-  }
-}
+{
+  "name": "@conduction/components",
+  "version": "2.1.0",
+  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ConductionNL/conduction-components.git"
+  },
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "author": "Conduction B.V.",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-components/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
+    "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
+    "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",
+    "@gemeente-denhaag/process-steps": "^0.1.0-alpha.18",
+    "@gemeente-denhaag/sidenav": "^0.1.0-alpha.1",
+    "@gemeente-denhaag/table": "^0.1.1-alpha.87",
+    "@gemeente-denhaag/textarea": "^0.1.1-alpha.65",
+    "clsx": "^1.1.1",
+    "gatsby": "^4.11.1",
+    "react": "^17.0.1",
+    "react-hook-form": "7.29.0",
+    "react-select": "5.3.2",
+    "react-tooltip": "^4.2.21"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "tsc-hooks": "^1.1.1",
+    "typescript": "^4.6.3"
+  }
+}

package/src/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/src/components/badgeCounter/BadgeCounter.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
-import * as styles from "./BadgeCounter.module.css";
-import clsx from "clsx";
-
-interface BadgeCounterProps {
-  number: string;
-  children: React.ReactNode;
-  layoutClassName?: string;
-}
-
-export const BadgeCounter: React.FC<BadgeCounterProps> = ({ number, children, layoutClassName }) => (
-  <div className={styles.content}>
-    {children}
-    <span className={clsx([layoutClassName && layoutClassName], styles.badge)}>{number}</span>
-  </div>
-);
+import * as React from "react";
+import * as styles from "./BadgeCounter.module.css";
+import clsx from "clsx";
+
+interface BadgeCounterProps {
+  number: string;
+  children: React.ReactNode;
+  layoutClassName?: string;
+}
+
+export const BadgeCounter: React.FC<BadgeCounterProps> = ({ number, children, layoutClassName }) => (
+  <div className={styles.content}>
+    {children}
+    <span className={clsx([layoutClassName && layoutClassName], styles.badge)}>{number}</span>
+  </div>
+);

package/src/components/card/detailsCard/DetailsCard.module.css

@@ -1,51 +1,51 @@
-:root {
-  --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
-  --conduction-details-card-introduction-lines-clamp: 3;
-}
-
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  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);
-  border: var(--conduction-details-card-border);
-}
-
-.content > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.title {
-  font-size: var(--skeleton-font-size-xl);
-  font-weight: var(--skeleton-font-weight-bold);
-}
-
-.subHeader {
-  color: var(--skeleton-color-grey-3);
-  font-size: var(--skeleton-font-size-sm);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
-.introduction {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--conduction-details-card-introduction-lines-clamp);
-  -webkit-box-orient: vertical;
-}
-
-.link {
-  display: flex;
-  justify-content: flex-end;
-}
+:root {
+  --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-details-card-introduction-lines-clamp: 3;
+}
+
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--skeleton-border-radius-md);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  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);
+  border: var(--conduction-details-card-border);
+}
+
+.content > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-md);
+}
+
+.title {
+  font-size: var(--skeleton-font-size-xl);
+  font-weight: var(--skeleton-font-weight-bold);
+}
+
+.subHeader {
+  color: var(--skeleton-color-grey-3);
+  font-size: var(--skeleton-font-size-sm);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-sm);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--conduction-details-card-introduction-lines-clamp);
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/card/detailsCard/DetailsCard.tsx

@@ -1,56 +1,56 @@
-import * as React from "react";
-import * as styles from "./DetailsCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Tag } from "../../tag/Tag";
-
-interface DetailsCardProps {
-  title: string;
-  introduction?: string;
-  link: {
-    href: string;
-    label: string;
-  };
-  tags?: string[];
-  subHeader?: string;
-  layoutClassName?: string;
-}
-
-export const DetailsCard: React.FC<DetailsCardProps> = ({
-  title,
-  subHeader,
-  introduction,
-  link,
-  tags,
-  layoutClassName,
-}) => {
-  return (
-    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
-      <div className={styles.content}>
-        <div>
-          <div className={styles.title}>{title}</div>
-
-          <span className={styles.subHeader}>{subHeader}</span>
-        </div>
-
-        {tags && (
-          <div className={styles.tags}>
-            {tags.map((tag, idx) => (
-              <Tag key={idx} label={tag} />
-            ))}
-          </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 "./DetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
+
+interface DetailsCardProps {
+  title: string;
+  introduction?: string;
+  link: {
+    href: string;
+    label: string;
+  };
+  tags?: string[];
+  subHeader?: string;
+  layoutClassName?: string;
+}
+
+export const DetailsCard: React.FC<DetailsCardProps> = ({
+  title,
+  subHeader,
+  introduction,
+  link,
+  tags,
+  layoutClassName,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.content}>
+        <div>
+          <div className={styles.title}>{title}</div>
+
+          <span className={styles.subHeader}>{subHeader}</span>
+        </div>
+
+        {tags && (
+          <div className={styles.tags}>
+            {tags.map((tag, idx) => (
+              <Tag key={idx} label={tag} />
+            ))}
+          </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/downloadCard/DownloadCard.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./DownloadCard.module.css";
-import { DownloadIcon } from "@gemeente-denhaag/icons";
-import { Link } from "@gemeente-denhaag/components-react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName }) => {
-    const { t } = useTranslation();
-    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)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: t("Download") })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./DownloadCard.module.css";
+import { DownloadIcon } from "@gemeente-denhaag/icons";
+import { Link } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName }) => {
+    const { t } = useTranslation();
+    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)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: t("Download") })] }));
+};

package/src/components/card/downloadCard/DownloadCard.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: var(--conduction-download-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-end: var(--skeleton-size-sm);
-}
-
-.content {
-  display: flex;
-  align-items: center;
-}
-
-.content > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
-.icon {
-  padding-inline: var(--skeleton-size-sm);
-  padding-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-}
+:root {
+  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: var(--conduction-download-card-border);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-end: var(--skeleton-size-sm);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.content > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-sm);
+}
+
+.icon {
+  padding-inline: var(--skeleton-size-sm);
+  padding-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+}

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -1,40 +1,40 @@
-import * as React from "react";
-import * as styles from "./DownloadCard.module.css";
-import { DownloadIcon } from "@gemeente-denhaag/icons";
-import { Link } from "@gemeente-denhaag/components-react";
-import clsx from "clsx";
-
-interface DownloadCardProps {
-  icon: JSX.Element;
-  label: string;
-  sizeKb: string;
-  downloadLabel: string;
-  layoutClassName?: string;
-  handleClick: () => any;
-}
-
-export const DownloadCard: React.FC<DownloadCardProps> = ({
-  icon,
-  label,
-  sizeKb,
-  layoutClassName,
-  downloadLabel,
-  handleClick,
-}) => {
-  return (
-    <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
-      <div className={styles.content}>
-        <div className={styles.icon}>{icon}</div>
-
-        <div>
-          {label} ({sizeKb}kb)
-        </div>
-      </div>
-      <div onClick={handleClick}>
-        <Link icon={<DownloadIcon />} iconAlign="start">
-          {downloadLabel}
-        </Link>
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./DownloadCard.module.css";
+import { DownloadIcon } from "@gemeente-denhaag/icons";
+import { Link } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+
+interface DownloadCardProps {
+  icon: JSX.Element;
+  label: string;
+  sizeKb: string;
+  downloadLabel: string;
+  layoutClassName?: string;
+  handleClick: () => any;
+}
+
+export const DownloadCard: React.FC<DownloadCardProps> = ({
+  icon,
+  label,
+  sizeKb,
+  layoutClassName,
+  downloadLabel,
+  handleClick,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
+      <div className={styles.content}>
+        <div className={styles.icon}>{icon}</div>
+
+        <div>
+          {label} ({sizeKb}kb)
+        </div>
+      </div>
+      <div onClick={handleClick}>
+        <Link icon={<DownloadIcon />} iconAlign="start">
+          {downloadLabel}
+        </Link>
+      </div>
+    </div>
+  );
+};

package/src/components/card/horizontalImageCard/HorizontalImageCard.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./HorizontalImageCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label })] })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./HorizontalImageCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label })] })] }));
+};

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

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