@conduction/components 2.1.28 → 2.1.29

package/.github/workflows/npm-publish.yml

@@ -1,39 +1,39 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  push:
-    branches:
-      - development
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: |
-          git --version
-          git config user.name "GitHub Version patch"
-          git config user.email "<>"
-          git checkout development
-          git clean -f -n
-      - run: npm install
-      - run: npm version patch
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    branches:
+      - development
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          git --version
+          git config user.name "GitHub Version patch"
+          git config user.email "<>"
+          git checkout development
+          git clean -f -n
+      - run: npm install
+      - run: npm version patch
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.prettierrc

@@ -1,30 +1,30 @@
-{
-  "overrides": [
-    {
-      "files": ["*.json"],
-      "options": {
-        "parser": "json",
-        "printWidth": 120,
-        "tabWidth": 2
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "options": {
-        "parser": "typescript",
-        "printWidth": 120,
-        "trailingComma": "all",
-        "tabWidth": 2,
-        "singleQuote": false
-      }
-    },
-    {
-      "files": ["*.css", "*.scss"],
-      "options": {
-        "parser": "css",
-        "tabWidth": 2,
-        "printWidth": 180
-      }
-    }
-  ]
-}
+{
+  "overrides": [
+    {
+      "files": ["*.json"],
+      "options": {
+        "parser": "json",
+        "printWidth": 120,
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "options": {
+        "parser": "typescript",
+        "printWidth": 120,
+        "trailingComma": "all",
+        "tabWidth": 2,
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.css", "*.scss"],
+      "options": {
+        "parser": "css",
+        "tabWidth": 2,
+        "printWidth": 180
+      }
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -12,7 +12,12 @@
     "type": "git",
     "url": "git+https://github.com/ConductionNL/conduction-components.git"
   },
-  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "keywords": [
+    "React",
+    "Gatsby",
+    "Conduction",
+    "Components"
+  ],
   "author": "Conduction B.V.",
   "license": "ISC",
   "bugs": {

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

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -1,63 +1,63 @@
-:root {
-  --conduction-image-and-details-card-image-height: 275px;
-  --conduction-image-and-details-card-title-font-weight: bold;
-  --conduction-image-and-details-card-introduction-lines-clamp: 3;
-  --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.image {
-  height: var(--conduction-image-and-details-card-image-height);
-}
-
-.image > :first-child {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.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-image-and-details-card-border);
-  height: calc(
-    100% - var(--conduction-image-and-details-card-image-height) - var(--skeleton-size-md) - var(--skeleton-size-md) - 2px
-  ); /* height = 100% - imageHeight - padding - 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);
-}
-
-.introduction {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--conduction-image-and-details-card-introduction-lines-clamp);
-  -webkit-box-orient: vertical;
-}
-
-.link {
-  display: flex;
-  justify-content: flex-end;
-  margin-block-start: auto;
-}
+:root {
+  --conduction-image-and-details-card-image-height: 275px;
+  --conduction-image-and-details-card-title-font-weight: bold;
+  --conduction-image-and-details-card-introduction-lines-clamp: 3;
+  --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--skeleton-border-radius-md);
+}
+
+.image {
+  height: var(--conduction-image-and-details-card-image-height);
+}
+
+.image > :first-child {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.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-image-and-details-card-border);
+  height: calc(
+    100% - var(--conduction-image-and-details-card-image-height) - var(--skeleton-size-md) - var(--skeleton-size-md) - 2px
+  ); /* height = 100% - imageHeight - padding - 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);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--conduction-image-and-details-card-introduction-lines-clamp);
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: auto;
+}

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