@conduction/components 1.0.28 → 1.0.29

package/.prettierrc

@@ -22,7 +22,8 @@
       "files": ["*.css", "*.scss"],
       "options": {
         "parser": "css",
-        "tabWidth": 2
+        "tabWidth": 2,
+        "printWidth": 180
       }
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -11,7 +11,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/card/detailsCard/DetailsCard.module.css

@@ -1,44 +1,47 @@
+: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(--nlportal-document-border-radius);
+  border-radius: var(--skeleton-border-radius-md);
 }
 
 .content {
   display: flex;
   flex-direction: column;
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  border: var(--nlportal-document-border, 1px solid);
+  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(--nlportal-space-block-md);
+  margin-block-end: var(--skeleton-size-md);
 }
 
 .title {
-  font-size: var(--denhaag-typography-scale-xl-font-size);
-  font-weight: var(--conduction-image-and-details-card-title-font-weight);
+  font-size: var(--skeleton-font-size-xl);
+  font-weight: var(--skeleton-font-weight-bold);
 }
 
 .subHeader {
-  color: var(--denhaag-color-grey-3);
-  font-size: var(--denhaag-typography-scale-s-font-size);
+  color: var(--skeleton-color-grey-3);
+  font-size: var(--skeleton-font-size-sm);
 }
 
 .tags > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
+  margin-inline-end: var(--skeleton-size-sm);
 }
 
 .introduction {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: var(
-    --conduction-image-and-details-card-introduction-lines-clamp
-  );
+  -webkit-line-clamp: var(--conduction-details-card-introduction-lines-clamp);
   -webkit-box-orient: vertical;
 }
 

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

@@ -1,10 +1,14 @@
+:root {
+  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
 .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: var(--nlportal-document-border, 1px solid);
-  border-radius: var(--nlportal-document-border-radius);
-  padding-inline-end: var(--nlportal-space-inline-md);
+  border: var(--conduction-download-card-border);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-end: var(--skeleton-size-sm);
 }
 
 .content {
@@ -13,11 +17,11 @@
 }
 
 .content > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
+  margin-inline-end: var(--skeleton-size-sm);
 }
 
 .icon {
-  padding-inline: var(--nlportal-space-inline-md);
-  padding-block: var(--nlportal-space-block-md);
-  background-color: var(--nlportal-document-icon-background-color);
+  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,26 +1,34 @@
+:root {
+  --conduction-horizontal-image-card-image-size: 52px;
+}
+
 .container {
   display: flex;
   align-items: center;
   cursor: pointer;
-  background-color: var(--denhaag-color-grey-1);
-  border-radius: var(--nlportal-border-radius);
+  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-icon-size);
-  height: var(--conduction-horizontal-image-card-icon-size);
+  width: var(--conduction-horizontal-image-card-image-size);
+  height: var(--conduction-horizontal-image-card-image-size);
 
-  padding-inline-start: var(--nlportal-space-inline-md);
-  padding-inline-end: var(--nlportal-space-inline-md);
-  padding-block-start: var(--nlportal-space-block-md);
-  padding-block-end: var(--nlportal-space-block-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);
 }
 
 .title {
-  font-size: var(--conduction-horizontal-image-card-font-size);
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
 }

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

@@ -1,7 +1,14 @@
+: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(--nlportal-document-border-radius);
+  border-radius: var(--skeleton-border-radius-md);
 }
 
 .image {
@@ -17,38 +24,35 @@
 .content {
   display: flex;
   flex-direction: column;
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  border: var(--nlportal-document-border, 1px solid);
+  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(--nlportal-space-block-lg) - var(--nlportal-space-block-lg) - 2px
+    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(--nlportal-space-block-md);
+  margin-block-end: var(--skeleton-size-md);
 }
 
 .title {
-  font-size: var(--denhaag-typography-scale-xl-font-size);
-  font-weight: var(--conduction-image-and-details-card-title-font-weight);
+  font-size: var(--skeleton-font-size-xl);
+  font-weight: var(--skeleton-font-weight-bold);
 }
 
 .subHeader {
-  color: var(--denhaag-color-grey-3);
-  font-size: var(--denhaag-typography-scale-s-font-size);
+  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-line-clamp: var(--conduction-image-and-details-card-introduction-lines-clamp);
   -webkit-box-orient: vertical;
 }
 

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

@@ -1,21 +1,10 @@
-:root {
-  --conduction-info-card-background-color: #f2f2f2;
-  --conduction-info-card-border-radius: 3px;
-  --conduction-info-card-title-weight: bold;
-  --conduction-info-card-title-font-size: 24px;
-  --conduction-info-card-title-color: #000000;
-  --conduction-info-card-content-color: #000000;
-  --conduction-info-card-padding: 16px;
-  --conduction-info-card-content-margin: 8px;
-}
-
 .container {
-  background-color: var(--conduction-info-card-background-color);
-  border-radius: var(--conduction-info-card-border-radius);
-  padding-inline-start: var(--conduction-info-card-padding);
-  padding-inline-end: var(--conduction-info-card-padding);
-  padding-block-start: var(--conduction-info-card-padding);
-  padding-block-end: var(--conduction-info-card-padding);
+  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 > * {
@@ -23,15 +12,15 @@
 }
 
 .container > *:not(:last-child) {
-  margin-block-end: var(--conduction-info-card-content-margin);
+  margin-block-end: var(--skeleton-size-xs);
 }
 
 .container > .title {
-  font-weight: var(--conduction-info-card-title-weight);
-  font-size: var(--conduction-info-card-title-font-size);
-  color: var(--conduction-info-card-title-color);
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+  color: var(--skeleton-color-black);
 }
 
 .content {
-  color: var(--conduction-info-card-content-color);
+  color: var(--skeleton-color-black);
 }

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

@@ -1,21 +1,25 @@
+:root {
+  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
 .container {
   display: flex;
   flex-direction: column;
-  border: var(--nlportal-document-border, 1px solid);
-  border-radius: var(--nlportal-border-radius);
+  border: var(--conduction-rich-content-card-border);
+  border-radius: var(--skeleton-border-radius-md);
 
-  padding-inline-start: var(--nlportal-space-inline-md);
-  padding-inline-end: var(--nlportal-space-inline-md);
-  padding-block-start: var(--nlportal-space-block-md);
-  padding-block-end: var(--nlportal-space-block-xl);
+  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(--nlportal-space-block-md);
+  margin-block-end: var(--skeleton-size-md);
 }
 
 .link {
-  margin-block-end: var(--nlportal-space-block-xs);
+  margin-block-end: var(--skeleton-size-xs);
 }
 
 .link > :first-child {
@@ -28,39 +32,39 @@
 }
 
 .labelsWithIcon > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-block-md);
+  margin-inline-end: var(--skeleton-size-md);
 }
 
 .tags > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
+  margin-inline-end: var(--skeleton-size-md);
 }
 
 .contentLinks > *:not(:last-child):not(hr) {
-  margin-block-end: var(--nlportal-space-block-xs);
+  margin-block-end: var(--skeleton-size-xs);
 }
 
 /* Component: LabelWithIcon */
 .labelWithIcon {
   display: flex;
   align-items: center;
-  color: var(--denhaag-color-grey-3);
+  color: var(--skeleton-color-grey-3);
 }
 
 .labelWithIcon > .labelWithIcon_icon > svg {
-  height: var(--conduction-rich-card-label-with-icon-icon-size);
-  width: var(--conduction-rich-card-label-with-icon-icon-size);
-  margin-inline-end: var(--nlportal-space-inline-xs);
+  height: var(--skeleton-size-sm);
+  width: var(--skeleton-size-sm);
+  margin-inline-end: var(--skeleton-size-xs);
 }
 
 .labelWithIcon > .labelWithIcon_label {
-  font-size: var(--conduction-rich-card-label-with-icon-label-size);
+  font-size: var(--skeleton-size-sm);
 }
 
 /* Content Link */
 .contentLink {
   display: flex;
-  padding-block-start: var(--nlportal-space-block-xs);
-  padding-block-end: var(--nlportal-space-block-xs);
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
   text-decoration: none !important;
 }
 

package/src/components/container/Container.module.css

@@ -1,5 +1,5 @@
-:root{
- --condution-container-max-width:  1024px;
+:root {
+  --condution-container-max-width: 1024px;
 }
 
 .container {

package/src/components/editableTableRow/EditableTableRow.module.css

@@ -3,16 +3,16 @@
 }
 
 .cancel {
-  color: var(--denhaag-color-grey-3) !important;
+  color: var(--skeleton-color-grey-3) !important;
 }
 
 .editButtonsContainer {
   display: flex;
-  margin-block-start: var(--nlportal-space-block-xs);
+  margin-block-start: var(--skeleton-size-xs);
 }
 
 .editButtonsContainer > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
+  margin-inline-end: var(--skeleton-size-md);
 }
 
 .submit {

package/src/components/formFields/select/select.module.css

@@ -1,49 +1,15 @@
-.select > div {
-  background-color: var(
-    --utrecht-textbox-background-color,
-    var(--utrecht-form-input-background-color)
-  );
-  border-width: var(
-    --utrecht-textbox-border-width,
-    var(--utrecht-form-input-border-width)
-  );
-  border-bottom-width: var(
-    --utrecht-textbox-border-bottom-width,
-    var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))
-  );
-  border-color: var(
-    --utrecht-textbox-border-color,
-    var(--utrecht-form-input-border-color)
-  );
-  border-radius: var(
-    --utrecht-textbox-border-radius,
-    var(--utrecht-form-input-border-radius, 0)
-  );
-  border-style: solid;
-  box-sizing: border-box;
-  color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
-  font-family: var(
-    --utrecht-textbox-font-family,
-    var(--utrecht-form-input-font-family)
-  );
-  font-size: var(
-    --utrecht-textbox-font-size,
-    var(--utrecht-form-input-font-size, 1em)
-  );
-  max-inline-size: var(
-    --utrecht-textbox-max-inline-size,
-    var(--utrecht-form-input-max-inline-size)
-  );
-
-  padding-block-start: 6.5px;
-  padding-block-end: 6.5px;
+:root {
+  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
+  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
 }
 
-.select > div:hover {
-  border-color: var(
-    --utrecht-textbox-border-color,
-    var(--utrecht-form-input-border-color)
-  );
+.select > div {
+  background-color: var(--skeleton-color-white);
+  border: var(--conduction-input-select-border);
+  border-radius: var(--skeleton-border-radius-md);
+  box-sizing: border-box;
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
 }
 
 .select > div:focus-within {
@@ -51,15 +17,19 @@
   box-shadow: none;
 }
 
+.select > div:hover {
+  border-color: var(--skeleton-color-grey-3);
+}
+
 .select > div:focus-within::after {
-  pointer-events: none;
-  border: var(--denhaag-focus-border);
-  border-radius: var(--denhaag-border-radius);
-  bottom: -3px;
   content: "";
   display: block;
-  left: -3px;
   position: absolute;
-  right: -3px;
-  top: -3px;
+  pointer-events: none;
+  bottom: calc(var(--skeleton-size-2xs) * -1);
+  left: calc(var(--skeleton-size-2xs) * -1);
+  right: calc(var(--skeleton-size-2xs) * -1);
+  top: calc(var(--skeleton-size-2xs) * -1);
+  border: var(--conduction-input-select-border-focus);
+  border-radius: var(--skeleton-border-radius-md);
 }

package/src/components/metaIcon/MetaIcon.module.css

@@ -1,3 +1,8 @@
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
 .container {
   display: flex;
   align-items: center;
@@ -5,13 +10,20 @@
 }
 
 .container > *:not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-xs);
+  margin-block-end: var(--skeleton-size-xs);
 }
 
 .icon {
-  color: var(--nlportal-meta-icon-color);
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
 }
 
 .value {
-  font-weight: var(--nlportal-meta-icon-font-weight-bold);
+  font-weight: var(--skeleton-font-weight-bold);
 }

package/src/components/notificationPopUp/NotificationPopUp.module.css

@@ -1,5 +1,6 @@
 :root {
-  --conduction-notification-popup-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+  --conduction-notification-pop-up-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+  --conduction-notification-pop-up-border: 1px solid var(--skeleton-color-grey-2);
 }
 
 :export {
@@ -8,17 +9,17 @@
 
 .modal {
   animation-fill-mode: both;
-  background: var(--denhaag-color-warmgrey-1);
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  box-shadow: var(--conduction-notification-popup-box-shadow);
-  border-radius: var(--nlportal-document-border-radius);
+  background: var(--skeleton-color-grey-1);
+  padding-inline-start: var(--skeleton-size-lg);
+  padding-inline-end: var(--skeleton-size-lg);
+  padding-block-start: var(--skeleton-size-lg);
+  padding-block-end: var(--skeleton-size-lg);
+  border-radius: var(--skeleton-border-radius-md);
+  box-shadow: var(--conduction-notification-pop-up-box-shadow);
 }
 
 .modal > *:not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-md);
+  margin-block-end: var(--skeleton-size-md);
 }
 
 .buttons {
@@ -28,7 +29,7 @@
 }
 
 .buttons > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
+  margin-inline-end: var(--skeleton-size-md);
 }
 
 .visible {

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -1,12 +1,12 @@
 :root {
-  --conduction-quote-border-width: 12px;
-  --conduction-quote-border-color: #f5f5f5;
-  --conduction-quote-padding-inline: 24px;
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
 }
 
 .container {
-  border-left-width: var(--conduction-quote-border-width);
+  border-left-width: var(--conduction-quote-wrapper-border-width);
   border-left-style: solid;
-  border-left-color: var(--conduction-quote-border-color);
-  padding-inline-start: var(--conduction-quote-padding-inline);
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
 }

package/src/components/tag/Tag.module.css

@@ -1,9 +1,20 @@
+:root {
+  --conduction-tag-font-size: var(--skeleton-font-size-sm);
+  --conduction-tag-color: var(--skeleton-black);
+  --conduction-tag-backgrond-color: var(--skeleton-color-grey-1);
+  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
+  --conduction-tag-padding: var(--skeleton-size-xs);
+}
+
 .tag {
+  display: inline-block;
+  width: fit-content;
   font-size: var(--conduction-tag-font-size);
-  background-color: var(--denhaag-color-grey-1);
-  border-radius: var(--nlportal-document-border-radius);
-  padding-inline-start: var(--nlportal-space-inline-xs);
-  padding-inline-end: var(--nlportal-space-inline-xs);
-  padding-block-start: var(--nlportal-space-block-xs);
-  padding-block-end: var(--nlportal-space-block-xs);
+  color: var(--conduction-tag-color);
+  background-color: var(--conduction-tag-backgrond-color);
+  border-radius: var(--conduction-tag-border-radius);
+  padding-inline-start: var(--conduction-tag-padding);
+  padding-inline-end: var(--conduction-tag-padding);
+  padding-block-start: var(--conduction-tag-padding);
+  padding-block-end: var(--conduction-tag-padding);
 }