From d92bedc3402566e799ceee594c5ad66d475cc936 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 19 Dec 2023 13:07:00 +0100 Subject: [PATCH 1/5] updated components --- package-lock.json | 4 +- .../Pagination/Pagination.module.css | 64 +++++++++++++++---- .../card/cardWrapper/CardWrapper.module.css | 39 ++++++----- .../card/downloadCard/DownloadCard.module.css | 1 + .../primaryTopNav/PrimaryTopNav.module.css | 17 +++++ .../topNav/primaryTopNav/PrimaryTopNav.tsx | 4 +- 6 files changed, 99 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index be0f5e0..af54756 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@conduction/components", - "version": "2.2.37", + "version": "2.2.41", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@conduction/components", - "version": "2.2.37", + "version": "2.2.41", "license": "ISC", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.2", diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css index 5abb1ed..14802bf 100644 --- 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,6 +42,9 @@ /* --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; @@ -43,6 +52,9 @@ /* --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 index 17bd926..d871f6b 100644 --- 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 index f0c306f..a218019 100644 --- 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 index 525f07c..cb73b19 100644 --- 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 index 8076560..ec26647 100644 --- 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) => (
  • handleSubItemClick(handleClick)} > - + {icon} {label} From 523aa2ebbbf216ce46a6f519a0daf03f03ec6d72 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 19 Dec 2023 13:09:31 +0100 Subject: [PATCH 2/5] updated version and readme --- README.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a16db4d..d042da5 100644 --- 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.json b/package.json index ceba3e9..b917bad 100644 --- 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": { From 9954df3af115d5c47b634ae9526b69399202999f Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 19 Dec 2023 13:11:20 +0100 Subject: [PATCH 3/5] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d042da5..a1735e2 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** - 2.2.42: - - Updated PrimaryTopnav to have seperate dropdown tokens. + - 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. From e469895d99e3220578505bcf0e79916a20c4ec57 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 19 Dec 2023 13:11:35 +0100 Subject: [PATCH 4/5] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a1735e2..76afa08 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ - 2.2.42: - Updated PrimaryTopNav to have seperate dropdown tokens. - Updated Pagination to include border-bottom. - - Updated Downloadcard to include icon color. + - Updated DownloadCard to include icon color. - Updated CardWrapper to include hover color. - 2.2.41: Updated displayswitch component to have pointer. - 2.2.40: From 9d266d2282545ec13872d3d8238b0c2d02771bf9 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 19 Dec 2023 13:12:46 +0100 Subject: [PATCH 5/5] cleanup --- src/components/Pagination/Pagination.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css index 14802bf..5cd7c2a 100644 --- a/src/components/Pagination/Pagination.module.css +++ b/src/components/Pagination/Pagination.module.css @@ -64,9 +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-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; @@ -75,9 +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; */ + /* --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 {