@conduction/components 2.2.39 → 2.2.41

package/README.md

@@ -4,6 +4,10 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.41: Updated displayswitch component to have pointer.
+  - 2.2.40:
+    - Updated DownloadCard to only accept fontawesome icons.
+    - Removed tooltip from PrimaryTopNav component and updated dropdown.
   - 2.2.39:
     - Updated PrimaryTopNav component to include tooltip and better dropdown.
     - Updated Logo component to have navbar option.

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 interface DownloadCardProps {
     label: string;
     size: string;
@@ -7,7 +8,7 @@ interface DownloadCardProps {
         id: string;
         tooltip: string;
     };
-    icon?: JSX.Element;
+    icon?: IconDefinition;
     layoutClassName?: string;
     handleClick: () => any;
 }

package/lib/components/card/downloadCard/DownloadCard.js

@@ -43,5 +43,5 @@ export const DownloadCard = ({ icon, label, size, type, labelTooltip, layoutClas
                 return faDatabase;
         }
     };
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsx("div", { className: styles.icon, children: icon ?? _jsx(FontAwesomeIcon, { icon: getIconFromType(type) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Heading3, { "data-tooltip-id": labelTooltip && labelTooltip.id, "data-tooltip-content": labelTooltip && labelTooltip.tooltip, className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size}kB`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsx("div", { className: styles.icon, children: _jsx(FontAwesomeIcon, { icon: icon ?? getIconFromType(type) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Heading3, { "data-tooltip-id": labelTooltip && labelTooltip.id, "data-tooltip-content": labelTooltip && labelTooltip.tooltip, className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size}kB`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
 };

package/lib/components/displaySwitch/DisplaySwitch.js

@@ -7,7 +7,7 @@ const DisplaySwitch = ({ layoutClassName, buttons }) => {
     return (_jsx(ButtonGroup, { className: clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName), children: buttons.map((button, idx) => {
             // TODO: Once the Rotterdam design system supports the "pressed" state,
             // remove the `appereance` switch, and use the same appearance for each button.
-            return (_jsxs(Button, { pressed: button.pressed, appearance: button.pressed ? "secondary-action-button" : "subtle-button", onClick: button.handleClick, children: [button.icon && _jsx(FontAwesomeIcon, { icon: [button.icon.prefix, button.icon.name] }), _jsx("span", { children: button.label })] }, idx));
+            return (_jsxs(Button, { pressed: button.pressed, appearance: button.pressed ? "secondary-action-button" : "subtle-button", onClick: button.handleClick, className: styles.button, children: [button.icon && _jsx(FontAwesomeIcon, { icon: [button.icon.prefix, button.icon.name] }), _jsx("span", { children: button.label })] }, idx));
         }) }));
 };
 export default DisplaySwitch;

package/lib/components/displaySwitch/DisplaySwitch.module.css

@@ -1,3 +1,7 @@
 .displaySwitchButtons {
   align-items: center;
 }
+
+.button[aria-pressed="false"]:hover {
+  cursor: pointer;
+}

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts

@@ -2,7 +2,6 @@
 interface ITopNavItemBase {
     label: string;
     icon?: JSX.Element;
-    showToolTip?: boolean;
     current?: boolean | ICurrentItemJSONFormat;
 }
 interface ICurrentItemJSONFormat {
@@ -33,9 +32,8 @@ interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
 export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
 export interface TopNavProps {
     items: ITopNavItem[];
-    tooltipId: string;
     mobileLogo?: JSX.Element;
     layoutClassName?: string;
 }
-export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps) => JSX.Element;
+export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName }: TopNavProps) => JSX.Element;
 export {};

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }) => {
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992);
     React.useEffect(() => {
@@ -19,5 +19,5 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId })
         setIsOpen(false);
         handleClick();
     };
-    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon && icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow]), children: subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { "data-tooltip-id": showToolTip === true ? tooltipId : "", "data-tooltip-content": showToolTip === true ? label : "", className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
+    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon && icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow]), children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
 };

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -157,6 +157,8 @@
   display: none;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+  width: fit-content;
+  max-width: 200px;
 }
 
 .dropdownOverflow {

package/package.json

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

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  IconDefinition,
   faDatabase,
   faDownload,
   faFileAudio,
@@ -24,7 +25,7 @@ interface DownloadCardProps {
     id: string;
     tooltip: string;
   };
-  icon?: JSX.Element;
+  icon?: IconDefinition;
   layoutClassName?: string;
   handleClick: () => any;
 }
@@ -79,7 +80,7 @@ export const DownloadCard = ({
 
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
-      <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
+      <div className={styles.icon}>{<FontAwesomeIcon icon={icon ?? getIconFromType(type)} />}</div>
       <div className={styles.content}>
         <Heading3
           data-tooltip-id={labelTooltip && labelTooltip.id}

package/src/components/displaySwitch/DisplaySwitch.module.css

@@ -1,3 +1,7 @@
 .displaySwitchButtons {
   align-items: center;
 }
+
+.button[aria-pressed="false"]:hover {
+  cursor: pointer;
+}

package/src/components/displaySwitch/DisplaySwitch.tsx

@@ -35,6 +35,7 @@ const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons
             pressed={button.pressed}
             appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
             onClick={button.handleClick}
+            className={styles.button}
           >
             {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
             <span>{button.label}</span>

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

@@ -157,6 +157,8 @@
   display: none;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+  width: fit-content;
+  max-width: 200px;
 }
 
 .dropdownOverflow {

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -9,7 +9,6 @@ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
-  showToolTip?: boolean;
   current?: boolean | ICurrentItemJSONFormat;
 }
 
@@ -58,12 +57,11 @@ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
 
 export interface TopNavProps {
   items: ITopNavItem[];
-  tooltipId: string;
   mobileLogo?: JSX.Element;
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps): JSX.Element => {
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
 
@@ -112,17 +110,13 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }:
 
               {subItems && (
                 <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
-                  {subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (
+                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
                       onClick={() => handleSubItemClick(handleClick)}
                     >
-                      <Link
-                        data-tooltip-id={showToolTip === true ? tooltipId : ""}
-                        data-tooltip-content={showToolTip === true ? label : ""}
-                        className={clsx(styles.link, styles.label, current && styles.currentLink)}
-                      >
+                      <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
                         {icon}
                         {label}
                       </Link>