feature/BEHEER-2948/Lansingerland-theme

README.md

@@ -4,6 +4,10 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.51:
+    - Added text-decoration tokens to CardHeader.
+    - Added label color tokens to checkbox.
+    - Added font-weight, gap, padding and hover box-shadow tokens to PrimaryTopNav.
   - 2.2.50:
     - Added transition and box-shadow to CardWrapper.
     - Added font-style to CardHeader.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.50",
+  "version": "2.2.51",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

src/components/card/cardHeader/CardHeader.module.css

@@ -6,7 +6,12 @@
   /* --conduction-card-header-hover-border-bottom-style: unset; */
   /* --conduction-card-header-hover-border-bottom-color: unset; */
   --conduction-card-header-title-color: #000000;
+  /* --conduction-card-header-title-text-decoration: none; */
+  /* --conduction-card-header-title-text-underline-offset: 2px; */
   /* --conduction-card-header-title-hover-color: #000000; */
+  /* --conduction-card-header-title-hover-text-decoration: none; */
+  /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
+
   --conduction-card-header-date-color: #000000;
   --conduction-card-header-date-font-size: 16px;
   --conduction-card-header-date-font-weight: 100;
@@ -28,10 +33,14 @@
 
 .title > * {
   color: var(--conduction-card-header-title-color) !important;
+  text-decoration: var(--conduction-card-header-title-text-decoration) !important;
+  text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
 }
 
 .title:hover > * {
   color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
+  text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
+  text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
 }
 
 .date {

src/components/formFields/checkbox/Checkbox.module.css

@@ -103,6 +103,10 @@
   box-sizing: border-box;
 }
 
+.checkbox:hover + label {
+  color: var(--conduction-input-checkbox-label-hover-color, var(--conduction-input-checkbox-label-color, var(--utrecht-document-color)));
+
+}
 .checkbox:hover + label::before {
   content: " ";
   display: inline-block;

src/components/formFields/select/select.tsx

@@ -11,7 +11,7 @@ export type TSelectOption = { label: string; value: string };
 export type TGroupedSelectOption = { label: string; options: TSelectOption[] };
 
 interface ISelectProps {
-  control: Control<FieldValues, any>;
+  control: Control<any, any>;
   options: TSelectOption[] | TGroupedSelectOption[];
   name: string;
   ariaLabel: string;

src/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -25,10 +25,21 @@
   /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
   /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
   /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
+
+  /* --conduction-primary-top-nav-container-padding-block-end: 18px; */
+  /* --conduction-primary-top-nav-container-padding-block-start: 18px; */
+  /* --conduction-primary-top-nav-container-padding-inline-end: 18px; */
+  /* --conduction-primary-top-nav-container-padding-inline-start: 18px; */
+
+  /* --conduction-primary-top-nav-list-gap: var(--skeleton-size-2x); */
 }
 
 .container {
   width: 100%;
+  padding-block-end: var(--conduction-primary-top-nav-container-padding-block-end);
+  padding-block-start: var(--conduction-primary-top-nav-container-padding-block-start);
+  padding-inline-end: var(--conduction-primary-top-nav-container-padding-inline-end);
+  padding-inline-start: var(--conduction-primary-top-nav-container-padding-inline-start);
 }
 
 .menuToggleContainer {
@@ -80,6 +91,7 @@
   border-color: var(--conduction-primary-top-nav-list-border-color);
   border-style: var(--conduction-primary-top-nav-list-border-style);
   border-width: var(--conduction-primary-top-nav-list-border-width);
+  gap: var(--conduction-primary-top-nav-list-gap);
 }
 
 .li {
@@ -108,7 +120,7 @@
 }
 
 .current:hover {
-  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+  box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
 }
 
 .current:hover > .currentLink {
@@ -224,6 +236,7 @@
 
 .dropdown > li {
   padding-inline-start: 18px;
+  font-weight: var(--conduction-primary-top-nav-dropdown-font-weight);
 }
 
 .toggleIcon {
@@ -252,6 +265,11 @@
   z-index: 1;
 }
 
+:not(.dropdown) .li.current:hover {
+  box-shadow: var(--conduction-primary-top-nav-current-hover-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
+  font-weight: var(--conduction-primary-top-nav-current-hover-font-weight, var(--conduction-primary-top-nav-current-font-weight));
+}
+
 @media only screen and (min-width: 992px) {
   .container {
     width: fit-content;