Merge pull request #175 from ConductionNL/feature/NDT-43/sloterburg-t…

…heme feature/NDT-43/sloterburg-theme
ConductionNL · Dec 19, 2023 · ba89daa · ba89daa
2 parents 1167646 + 9d266d2
commit ba89daa
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.42:
+    - Updated PrimaryTopNav to have seperate dropdown tokens.
+    - Updated Pagination to include border-bottom.
+    - Updated DownloadCard to include icon color.
+    - Updated CardWrapper to include hover color.
   - 2.2.41: Updated displayswitch component to have pointer.
   - 2.2.40:
     - Updated DownloadCard to only accept fontawesome icons.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.41",
+  "version": "2.2.42",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css
@@ -19,12 +19,18 @@
   --conduction-pagination-item-border-width: unset;
   --conduction-pagination-item-border-style: unset;
   --conduction-pagination-item-border-color: unset;
+  /* --conduction-pagination-item-border-bottom-width: unset;
+  --conduction-pagination-item-border-bottom-style: unset;
+  --conduction-pagination-item-border-bottom-color: unset; */
 
   /* --conduction-pagination-navigation-button-background-color: #4376fc; */
   /* --conduction-pagination-navigation-button-color: #ffffff; */
   /* --conduction-pagination-navigation-button-border-width: 1px; */
   /* --conduction-pagination-navigation-button-border-style: solid; */
   /* --conduction-pagination-navigation-button-border-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-border-bottom-width: 1px; */
+  /* --conduction-pagination-navigation-button-border-bottom-style: solid; */
+  /* --conduction-pagination-navigation-button-border-bottom-color: #4376fc; */
   /* --conduction-pagination-navigation-button-border-radius: 1px; */
   --conduction-pagination-navigation-button-padding-inline-start: 8px;
   --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -36,13 +42,19 @@
   /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
   /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
   /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-disabled-border-bottom-width: 1px; */
+  /* --conduction-pagination-navigation-button-disabled-border-bottom-style: solid; */
+  /* --conduction-pagination-navigation-button-disabled-border-bottom-color: #4376fc; */
   /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
 
   --conduction-pagination-navigation-button-hover-color: #d1d1d1;
   --conduction-pagination-navigation-button-hover-background-color: #fefefe;
   /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
   /* --conduction-pagination-navigation-button-hover-border-style: solid; */
   /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-hover-border-bottom-width: 1px; */
+  /* --conduction-pagination-navigation-button-hover-border-bottom-style: solid; */
+  /* --conduction-pagination-navigation-button-hover-border-bottom-color: #4376fc; */
   /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
 
   --conduction-pagination-current-page-background-color: #4376fc;
@@ -52,6 +64,9 @@
   --conduction-pagination-current-page-border-width: unset;
   --conduction-pagination-current-page-border-style: unset;
   --conduction-pagination-current-page-border-color: unset;
+  /* --conduction-pagination-current-page-border-bottom-width: unset; */
+  /* --conduction-pagination-current-page-border-bottom-style: unset; */
+  /* --conduction-pagination-current-page-border-bottom-color: unset; */
 
   --conduction-pagination-page-hover-color: #4376fc;
   --conduction-pagination-page-hover-background-color: #ffffff;
@@ -60,6 +75,9 @@
   --conduction-pagination-page-hover-border-width: unset;
   --conduction-pagination-page-hover-border-style: unset;
   --conduction-pagination-page-hover-border-color: unset;
+  /* --conduction-pagination-page-hover-border-bottom-width: unset; */
+  /* --conduction-pagination-page-hover-border-bottom-style: unset; */
+  /* --conduction-pagination-page-hover-border-bottom-color: unset; */
 }
 
 .container {
@@ -79,7 +97,12 @@
 .container > li.currentPage > a {
   color: var(--conduction-pagination-current-page-color);
   background-color: var(--conduction-pagination-current-page-background-color);
-  border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
+  border-width: var(--conduction-pagination-current-page-border-width);
+  border-style: var(--conduction-pagination-current-page-border-style);
+  border-color: var(--conduction-pagination-current-page-border-color);
+  border-bottom-width: var(--conduction-pagination-current-page-border-bottom-width, var(--conduction-pagination-current-page-border-width));
+  border-bottom-style: var(--conduction-pagination-current-page-border-bottom-style, var(--conduction-pagination-current-page-border-style));
+  border-bottom-color: var(--conduction-pagination-current-page-border-bottom-color, var(--conduction-pagination-current-page-border-color));
   border-radius: var(--conduction-pagination-item-border-radius);
   padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
   padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -94,7 +117,12 @@
 .container > li:not(.previous):not(.next):not(.currentPage) > a {
   color: var(--conduction-pagination-item-color);
   background-color: var(--conduction-pagination-item-background-color);
-  border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
+  border-width: var(--conduction-pagination-item-border-width);
+  border-style: var(--conduction-pagination-item-border-style);
+  border-color: var(--conduction-pagination-item-border-color);
+  border-bottom-width: var(--conduction-pagination-item-border-bottom-width, var(--conduction-pagination-item-border-width));
+  border-bottom-style: var(--conduction-pagination-item-border-bottom-style, var(--conduction-pagination-item-border-style));
+  border-bottom-color: var(--conduction-pagination-item-border-bottom-color, var(--conduction-pagination-item-border-color));
   border-radius: var(--conduction-pagination-item-border-radius);
   padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
   padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -117,19 +145,25 @@
 .container > li.disabled > a > .button {
   color: var(--conduction-pagination-navigation-button-disabled-color) !important;
   background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
-  border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
-  border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
-  border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
-  border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
+  border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width)) !important;
+  border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style)) !important;
+  border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color)) !important;
+  border-bottom-width: var(--conduction-pagination-navigation-button-disabled-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
+  border-bottom-style: var(--conduction-pagination-navigation-button-disabled-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
+  border-bottom-color: var(--conduction-pagination-navigation-button-disabled-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
+  border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius)) !important;
 }
 
 .container > li:hover:not(.disabled) > a > .button {
   color: var(--conduction-pagination-navigation-button-hover-color) !important;
   background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
-  border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
-  border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
-  border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
-  border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
+  border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width)) !important;
+  border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style)) !important;
+  border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color)) !important;
+  border-bottom-width: var(--conduction-pagination-navigation-button-hover-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
+  border-bottom-style: var(--conduction-pagination-navigation-button-hover-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
+  border-bottom-color: var(--conduction-pagination-navigation-button-hover-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
+  border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius)) !important;
 }
 
 .container > li:hover:not(.disabled):not(.currentPage) {
@@ -141,7 +175,12 @@
   background-color: var(--conduction-pagination-page-hover-background-color);
   text-decoration: var(--conduction-pagination-page-hover-text-decoration);
   text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
-  border: var(--conduction-pagination-page-hover-border-width) var(--conduction-pagination-page-hover-border-style) var(--conduction-pagination-page-hover-border-color);
+  border-width: var(--conduction-pagination-page-hover-border-width);
+  border-style: var(--conduction-pagination-page-hover-border-style);
+  border-color: var(--conduction-pagination-page-hover-border-color);
+  border-bottom-width: var(--conduction-pagination-page-hover-border-bottom-width, var(--conduction-pagination-page-hover-border-width));
+  border-bottom-style: var(--conduction-pagination-page-hover-border-bottom-style, var(--conduction-pagination-page-hover-border-style));
+  border-bottom-color: var(--conduction-pagination-page-hover-border-bottom-color, var(--conduction-pagination-page-hover-border-color));
 }
 
 .button {
@@ -150,6 +189,9 @@
   border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
   border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
   border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
+  border-bottom-width: var(--conduction-pagination-navigation-button-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
+  border-bottom-style: var(--conduction-pagination-navigation-button-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
+  border-bottom-color: var(--conduction-pagination-navigation-button-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
   border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;

diff --git a/src/components/card/cardWrapper/CardWrapper.module.css b/src/components/card/cardWrapper/CardWrapper.module.css
@@ -7,6 +7,9 @@
   /* --conduction-card-wrapper-border-bottom-style: unset; */
   /* --conduction-card-wrapper-border-bottom-color: unset; */
   /* --conduction-card-wrapper-box-shadow: unset; */
+  /* --conduction-card-wrapper-hover-border-width: unset; */
+  /* --conduction-card-wrapper-hover-border-style: unset; */
+  /* --conduction-card-wrapper-hover-border-color: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
@@ -20,28 +23,34 @@
 }
 
 .container {
-  padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
-  padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
-  padding-block-start: var(--conduction-card-wrapper-padding-block-start);
-  padding-block-end: var(--conduction-card-wrapper-padding-block-end);
-
-  color: var(--conduction-card-wrapper-color);
   background-color: var(--conduction-card-wrapper-background-color);
+  color: var(--conduction-card-wrapper-color);
+  position: relative;
+  box-shadow: var(--conduction-card-wrapper-box-shadow);
 
   border-radius: var(--conduction-card-wrapper-border-radius);
   border-width: var(--conduction-card-wrapper-border-width);
-  border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
-  border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
-    var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
-    var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
-  position: relative;
-  box-shadow: var(--conduction-card-wrapper-box-shadow);
+  border-style: var(--conduction-card-wrapper-border-style);
+  border-color: var(--conduction-card-wrapper-border-color);
+  border-bottom-width: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width));
+  border-bottom-style: var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style));
+  border-bottom-color: var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
+
+  padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
+  padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
+  padding-block-start: var(--conduction-card-wrapper-padding-block-start);
+  padding-block-end: var(--conduction-card-wrapper-padding-block-end);
 }
 
 .container:hover {
   background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
-  border-bottom: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-border-width))
-    var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-border-style))
-    var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-border-color));
+  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
   cursor: pointer;
+
+  border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
+  border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
+  border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
+  border-bottom-width: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width)));
+  border-bottom-style: var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style)));
+  border-bottom-color: var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color)));
 }
diff --git a/src/components/card/downloadCard/DownloadCard.module.css b/src/components/card/downloadCard/DownloadCard.module.css
@@ -52,6 +52,7 @@
 
 .icon {
   margin-inline-end: var(--conduction-download-card-icon-gap);
+  color: var(--conduction-download-card-icon-color);
 }
 
 .link {

diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
@@ -116,6 +116,23 @@
   fill: var(--conduction-primary-top-nav-current-color) !important;
 }
 
+.dropdownCurrent {
+  background-color: var(--conduction-primary-top-nav-dropdown-current-background-color, var(--conduction-primary-top-nav-current-background-color));
+  box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
+}
+
+.dropdownCurrent:hover > .dropdownCurrentLink {
+  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
+}
+
+.dropdownCurrentLink {
+  color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
+}
+
+.dropdownCurrentLink svg path {
+  fill: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
+}
+
 .mobileLink {
   margin-block-end: 18px;
 }

diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
@@ -113,10 +113,10 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
                   {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
-                      className={clsx(styles.li, current && styles.current)}
+                      className={clsx(styles.li, current && styles.dropdownCurrent)}
                       onClick={() => handleSubItemClick(handleClick)}
                     >
-                      <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
+                      <Link className={clsx(styles.link, styles.label, current && styles.dropdownCurrentLink)}>
                         {icon}
                         {label}
                       </Link>
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ @@
     .icon {
       margin-inline-end: var(--conduction-download-card-icon-gap);
+      color: var(--conduction-download-card-icon-color);
     }
     .link {
@@ Expand Down @@