dev to main

README.md

@@ -4,6 +4,32 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.59: Added optional scrollMode prop to HorizontalOverflowWrapper with native and button scroll modes
+  - 2.2.58:
+    - Added feature to Select to configure clear button attributes
+    - Fixed pagination having nested interactive elements
+  - 2.2.57: 
+    - Fixed clear button on SelectSingle not being clickable with keyboard functions.
+    - Fixed Logo not being focusable when being clickable.
+    - Fixed CardWrapper not being clickable with keyboard functions
+  - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons
+  - 2.2.55: 
+    - Updated Logo to accept aria-label for accessibility.
+    - Fixed bug in DisplaySwitch where layoutClassName is added even when empty.
+    - Fixed color of the Select dropdown icon to be WCAG-AA compliant.
+    - Added more WCAG roles and support to Select box.
+  - 2.2.54: Updated CardHeader to allow padding-block-end on title.
+  - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms.
+  - 2.2.52: Added hover filter to Logo component.
+  - 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.
+    - 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.

package.json

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

src/components/Pagination/Pagination.module.css

@@ -22,6 +22,8 @@
   /* --conduction-pagination-item-border-bottom-width: unset;
   --conduction-pagination-item-border-bottom-style: unset;
   --conduction-pagination-item-border-bottom-color: unset; */
+  /* --conduction-pagination-item-text-decoration: unset; */
+  /* --conduction-pagination-item-text-decoration-thickness: 0px; */
 
   /* --conduction-pagination-navigation-button-background-color: #4376fc; */
   /* --conduction-pagination-navigation-button-color: #ffffff; */
@@ -112,6 +114,7 @@
   font-weight: var(--conduction-pagination-current-page-font-weight);
   font-family: var(--conduction-pagination-item-font-family);
   text-decoration: var(--conduction-pagination-current-page-text-decoration);
+  text-decoration-thickness: var(--conduction-pagination-current-page-text-decoration-thickness);
 }
 
 .container > li:not(.previous):not(.next):not(.currentPage) > a {
@@ -131,6 +134,7 @@
   font-size: var(--conduction-pagination-item-font-size);
   font-weight: var(--conduction-pagination-item-font-weight);
   font-family: var(--conduction-pagination-item-font-family);
+  text-decoration: var(--conduction-pagination-item-text-decoration);
 }
 
 .button {

src/components/Pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import * as styles from "./Pagination.module.css";
 import clsx from "clsx";
 
 import ReactPaginate from "react-paginate";
-import { Button } from "@utrecht/component-library-react";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
@@ -73,14 +73,14 @@ export const Pagination: React.FC<PaginationProps> = ({
       previousAriaLabel={ariaLabels.previousPage}
       ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
       nextLabel={
-        <Button tabIndex={-1} className={styles.button}>
+        <span className={clsx("utrecht-button", styles.button)} aria-hidden="true">
           <FontAwesomeIcon icon={faChevronRight} />
-        </Button>
+        </span>
       }
       previousLabel={
-        <Button tabIndex={-1} className={styles.button}>
+        <span className={clsx("utrecht-button", styles.button)} aria-hidden="true">
           <FontAwesomeIcon icon={faChevronLeft} />
-        </Button>
+        </span>
       }
     />
   );

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

@@ -6,17 +6,24 @@
   /* --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-title-padding-block-end: 0px; */
+
   --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 {
@@ -27,15 +34,21 @@
 
 .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;
+  padding-block-end: var(--conduction-card-header-title-padding-block-end) !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 {
   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);
 }

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));

src/components/card/cardWrapper/CardWrapper.tsx

@@ -2,7 +2,20 @@ import * as React from "react";
 import * as styles from "./CardWrapper.module.css";
 
 export const CardWrapper = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
-  const _props = { ...props, className: `${props.className} ${styles.container}` };
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (props.onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      props.onClick(event as any);
+    }
+  };
+
+  const _props = {
+    ...props,
+    className: `${props.className} ${styles.container}`,
+    role: props.onClick ? "button" : undefined,
+    tabIndex: props.onClick ? 0 : undefined,
+    ...(props.onClick && { onKeyDown: handleKeyDown }),
+  };
 
   return <div {..._props}>{props.children}</div>;
 };

src/components/displaySwitch/DisplaySwitch.tsx

@@ -25,7 +25,7 @@ export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
 
 const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
   return (
-    <ButtonGroup className={clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName)}>
+    <ButtonGroup className={clsx(styles.displaySwitchButtons, layoutClassName && layoutClassName)}>
       {buttons.map((button, idx: number) => {
         // TODO: Once the Rotterdam design system supports the "pressed" state,
         // remove the `appereance` switch, and use the same appearance for each button.

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;