Merge pull request #188 from ConductionNL/feature/NDT-57/moerdijk

feature/NDT-57/moerdijk
ConductionNL · May 7, 2024 · e986726 · e986726
2 parents a1c9688 + 315ace8
commit e986726
Show file tree

Hide file tree

Showing 9 changed files with 1,045 additions and 1,115 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.50:
+    - Added transition and box-shadow to CardWrapper.
+    - Added font-style to CardHeader.
+    - Added tabindex and font-weight to Tab.
+    - Added border-color, border-style, border-width and transition to PrimaryTopNav.
   - 2.2.49: Removed Jumbotron component.
   - 2.2.48: Updated CardHeader and package.json.
   - 2.2.46 / 2.2.47: Fixed minor css parse error.

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.49",
+  "version": "2.2.50",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/card/cardHeader/CardHeader.module.css b/src/components/card/cardHeader/CardHeader.module.css
@@ -10,13 +10,14 @@
   --conduction-card-header-date-color: #000000;
   --conduction-card-header-date-font-size: 16px;
   --conduction-card-header-date-font-weight: 100;
+  /* --conduction-card-header-date-font-style: normal; */
   --conduction-card-header-date-margin-block-end: 8px;
 }
 
 .container {
   border-bottom-width: var(--conduction-card-header-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-border-bottom-style);
   border-bottom-color: var(--conduction-card-header-border-bottom-color);
+  border-bottom-style: var(--conduction-card-header-border-bottom-style);
 }
 
 .container:hover {
@@ -37,5 +38,6 @@
   color: var(--conduction-card-header-date-color);
   font-size: var(--conduction-card-header-date-font-size);
   font-weight: var(--conduction-card-header-date-font-weight);
+  font-style: var(--conduction-card-header-date-font-style);
   margin-block-end: var(--conduction-card-header-date-margin-block-end);
 }
diff --git a/src/components/card/cardWrapper/CardWrapper.module.css b/src/components/card/cardWrapper/CardWrapper.module.css
@@ -3,23 +3,26 @@
   /* --conduction-card-wrapper-border-width: unset; */
   /* --conduction-card-wrapper-border-style: unset; */
   /* --conduction-card-wrapper-border-color: unset; */
+  --conduction-card-wrapper-border-radius: 16px;
   /* --conduction-card-wrapper-border-bottom-width: unset; */
   /* --conduction-card-wrapper-border-bottom-style: unset; */
   /* --conduction-card-wrapper-border-bottom-color: unset; */
   /* --conduction-card-wrapper-box-shadow: unset; */
+  /* --conduction-card-wrapper-hover-background-color: 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-radius: 16px; */
   /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
-  --conduction-card-wrapper-border-radius: 16px;
+  /* --conduction-card-wrapper-hover-box-shadow: unset; */
   --conduction-card-wrapper-color: #000000;
-  /* --conduction-card-wrapper-hover-background-color: unset; */
   --conduction-card-wrapper-padding-inline-end: 18px;
   --conduction-card-wrapper-padding-inline-start: 18px;
   --conduction-card-wrapper-padding-block-end: 18px;
   --conduction-card-wrapper-padding-block-start: 18px;
+  /* --conduction-card-wrapper-transition: unset; */
 }
 
 .container {
@@ -28,6 +31,8 @@
   position: relative;
   box-shadow: var(--conduction-card-wrapper-box-shadow);
 
+  transition: var(--conduction-card-wrapper-transition);
+
   border-radius: var(--conduction-card-wrapper-border-radius);
   border-width: var(--conduction-card-wrapper-border-width);
   border-style: var(--conduction-card-wrapper-border-style);
@@ -47,6 +52,9 @@
   color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
   cursor: pointer;
 
+  box-shadow: var(--conduction-card-wrapper-hover-box-shadow, var(--conduction-card-wrapper-box-shadow));
+
+  border-radius: var(--conduction-card-wrapper-hover-border-radius, var(--conduction-card-wrapper-border-radius));
   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));

diff --git a/src/components/tabs/Tabs.module.css b/src/components/tabs/Tabs.module.css
@@ -167,6 +167,7 @@
   background-color: var(--conduction-tabs-tab-hover-background-color);
   color: var(--conduction-tabs-tab-hover-color);
   text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
+  font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
 }
 
 .tabList {

diff --git a/src/components/tabs/Tabs.tsx b/src/components/tabs/Tabs.tsx
@@ -17,7 +17,7 @@ import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons
 
 // Tabs
 export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...otherProps }) => (
-  <RTabs className={styles.tabs} {...otherProps}>
+  <RTabs selectedIndex={0} className={styles.tabs} {...otherProps}>
     {children}
   </RTabs>
 );
@@ -102,7 +102,7 @@ TabList.tabsRole = "TabList";
 
 // Tab
 export const Tab: ReactTabsFunctionComponent<TabProps> = ({ children, ...otherProps }) => (
-  <RTab className={styles.tab} {...otherProps}>
+  <RTab tabIndex="0" className={styles.tab} {...otherProps}>
     {children}
   </RTab>
 );

diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
@@ -77,17 +77,24 @@
   align-items: center;
   max-height: 80vh;
   overflow-y: scroll;
+  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);
 }
 
 .li {
   list-style-type: none;
   display: block;
   position: relative;
+  transition: var(--conduction-primary-top-nav-item-transition);
   padding-inline-start: var(--conduction-primary-top-nav-item-padding);
   padding-inline-end: var(--conduction-primary-top-nav-item-padding);
   padding-block-start: var(--conduction-primary-top-nav-item-padding);
   padding-block-end: var(--conduction-primary-top-nav-item-padding);
   border-radius: var(--conduction-primary-top-nav-item-border-radius);
+  border-color: var(--conduction-primary-top-nav-item-border-color);
+  border-style: var(--conduction-primary-top-nav-item-border-style);
+  border-width: var(--conduction-primary-top-nav-item-border-width);
 }
 
 .li:hover {

diff --git a/tsconfig.json b/tsconfig.json
@@ -14,5 +14,8 @@
   },
   "hooks": ["copy-files"],
   "include": ["src", "src/**/*.css"],
-  "exclude": ["**/__tests__/*"]
+  "exclude": [
+    "**/__tests__/*",
+    "./lib/**/*"
+  ]
 }