@conduction/components 2.2.37 → 2.2.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +4 -0
  2. package/lib/components/card/downloadCard/DownloadCard.js +1 -1
  3. package/lib/components/logo/Logo.d.ts +1 -1
  4. package/lib/components/logo/Logo.module.css +11 -1
  5. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +3 -1
  6. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +2 -2
  7. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +23 -3
  8. package/package.json +1 -1
  9. package/src/components/card/downloadCard/DownloadCard.tsx +0 -2
  10. package/src/components/logo/Logo.module.css +11 -1
  11. package/src/components/logo/Logo.tsx +1 -1
  12. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +23 -3
  13. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +11 -5
package/README.md CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.39:
8
+ - Updated PrimaryTopNav component to include tooltip and better dropdown.
9
+ - Updated Logo component to have navbar option.
10
+ - 2.2.38: Updated DownloadCard to show only one icon.
7
11
  - 2.2.37: Updated DownloadCard to include tooltip and Removed opacity token from Tooltip the fix bug.
8
12
  - 2.2.35 & 2.2.36:
9
13
  - Bugfix versions.
package/lib/components/card/downloadCard/DownloadCard.js CHANGED
@@ -43,5 +43,5 @@ export const DownloadCard = ({ icon, label, size, type, labelTooltip, layoutClas
43
43
  return faDatabase;
44
44
  }
45
45
  };
46
- 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("div", { className: styles.icon, children: icon ?? _jsx(FontAwesomeIcon, { icon: getIconFromType(type) }) }), _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"] })] }));
46
+ 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"] })] }));
47
47
  };
package/lib/components/logo/Logo.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  interface LogoProps {
3
- variant?: "header" | "footer";
3
+ variant?: "header" | "footer" | "navbar";
4
4
  onClick?: () => any;
5
5
  layoutClassName?: string;
6
6
  }
package/lib/components/logo/Logo.module.css CHANGED
@@ -5,7 +5,11 @@
5
5
 
6
6
  --conduction-logo-footer-inline-size: 330px;
7
7
  --conduction-logo-footer-block-size: 60px;
8
- --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
8
+ --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
9
+
10
+ --conduction-logo-navbar-inline-size: 150px;
11
+ --conduction-logo-navbar-block-size: 40px;
12
+ --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
9
13
  }
10
14
 
11
15
  .container {
@@ -26,6 +30,12 @@
26
30
  background-image: var(--conduction-logo-footer-background-image);
27
31
  }
28
32
 
33
+ .container.navbar {
34
+ inline-size: var(--conduction-logo-navbar-inline-size);
35
+ block-size: var(--conduction-logo-navbar-block-size);
36
+ background-image: var(--conduction-logo-navbar-background-image);
37
+ }
38
+
29
39
  .container.clickable:hover {
30
40
  cursor: pointer;
31
41
  }
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  interface ITopNavItemBase {
3
3
  label: string;
4
4
  icon?: JSX.Element;
5
+ showToolTip?: boolean;
5
6
  current?: boolean | ICurrentItemJSONFormat;
6
7
  }
7
8
  interface ICurrentItemJSONFormat {
@@ -32,8 +33,9 @@ interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
32
33
  export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
33
34
  export interface TopNavProps {
34
35
  items: ITopNavItem[];
36
+ tooltipId: string;
35
37
  mobileLogo?: JSX.Element;
36
38
  layoutClassName?: string;
37
39
  }
38
- export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName }: TopNavProps) => JSX.Element;
40
+ export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps) => JSX.Element;
39
41
  export {};
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js CHANGED
@@ -5,7 +5,7 @@ import clsx from "clsx";
5
5
  import { Link } from "@utrecht/component-library-react/dist/css-module";
6
6
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
7
  import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
8
- export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
8
+ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }) => {
9
9
  const [isOpen, setIsOpen] = React.useState(false);
10
10
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992);
11
11
  React.useEffect(() => {
@@ -19,5 +19,5 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
19
19
  setIsOpen(false);
20
20
  handleClick();
21
21
  };
22
- 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, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: styles.dropdown, 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))) }) })] }));
22
+ 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))) }) })] }));
23
23
  };
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --conduction-primary-top-nav-toggle-icon-size: 24px;
5
5
  --conduction-primary-top-nav-mobile-logo-padding: 18px;
6
6
 
7
- --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
7
+ --conduction-primary-top-nav-item-padding: 18px;
8
8
  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
9
  /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
10
10
 
@@ -103,6 +103,7 @@
103
103
  .current:hover {
104
104
  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
105
105
  }
106
+
106
107
  .current:hover > .currentLink {
107
108
  color: var(--conduction-primary-top-nav-hover-color) !important;
108
109
  }
@@ -111,8 +112,12 @@
111
112
  color: var(--conduction-primary-top-nav-current-color) !important;
112
113
  }
113
114
 
115
+ .currentLink svg path {
116
+ fill: var(--conduction-primary-top-nav-current-color) !important;
117
+ }
118
+
114
119
  .mobileLink {
115
- margin-block-end: var(--skeleton-size-md);
120
+ margin-block-end: 18px;
116
121
  }
117
122
  .primary .link {
118
123
  text-decoration: none;
@@ -128,10 +133,18 @@
128
133
  color: var(--conduction-primary-top-nav-color);
129
134
  }
130
135
 
136
+ .primary .link:not(.currentLink) svg path {
137
+ fill: var(--conduction-primary-top-nav-color);
138
+ }
139
+
131
140
  .primary .li:hover .link {
132
141
  color: var(--conduction-primary-top-nav-hover-color);
133
142
  }
134
143
 
144
+ .primary .li:hover svg path {
145
+ fill: var(--conduction-primary-top-nav-hover-color);
146
+ }
147
+
135
148
  .link > * {
136
149
  margin-inline-end: 8px;
137
150
  }
@@ -146,6 +159,13 @@
146
159
  background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
147
160
  }
148
161
 
162
+ .dropdownOverflow {
163
+ display: none;
164
+ max-height: 430px;
165
+ overflow-y: scroll;
166
+ border: 1px solid rgba(0, 0, 0, 0.2);
167
+ }
168
+
149
169
  .dropdown.isOpen {
150
170
  display: block;
151
171
  }
@@ -168,7 +188,7 @@
168
188
  }
169
189
 
170
190
  .dropdown > li {
171
- padding-inline-start: var(--skeleton-size-md);
191
+ padding-inline-start: 18px;
172
192
  }
173
193
 
174
194
  .toggleIcon {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.37",
3
+ "version": "2.2.39",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/card/downloadCard/DownloadCard.tsx CHANGED
@@ -81,8 +81,6 @@ export const DownloadCard = ({
81
81
  <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
82
82
  <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
83
83
  <div className={styles.content}>
84
- <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
85
-
86
84
  <Heading3
87
85
  data-tooltip-id={labelTooltip && labelTooltip.id}
88
86
  data-tooltip-content={labelTooltip && labelTooltip.tooltip}
package/src/components/logo/Logo.module.css CHANGED
@@ -5,7 +5,11 @@
5
5
 
6
6
  --conduction-logo-footer-inline-size: 330px;
7
7
  --conduction-logo-footer-block-size: 60px;
8
- --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
8
+ --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
9
+
10
+ --conduction-logo-navbar-inline-size: 150px;
11
+ --conduction-logo-navbar-block-size: 40px;
12
+ --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
9
13
  }
10
14
 
11
15
  .container {
@@ -26,6 +30,12 @@
26
30
  background-image: var(--conduction-logo-footer-background-image);
27
31
  }
28
32
 
33
+ .container.navbar {
34
+ inline-size: var(--conduction-logo-navbar-inline-size);
35
+ block-size: var(--conduction-logo-navbar-block-size);
36
+ background-image: var(--conduction-logo-navbar-background-image);
37
+ }
38
+
29
39
  .container.clickable:hover {
30
40
  cursor: pointer;
31
41
  }
package/src/components/logo/Logo.tsx CHANGED
@@ -3,7 +3,7 @@ import * as styles from "./Logo.module.css";
3
3
  import clsx from "clsx";
4
4
 
5
5
  interface LogoProps {
6
- variant?: "header" | "footer";
6
+ variant?: "header" | "footer" | "navbar";
7
7
  onClick?: () => any;
8
8
  layoutClassName?: string;
9
9
  }
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --conduction-primary-top-nav-toggle-icon-size: 24px;
5
5
  --conduction-primary-top-nav-mobile-logo-padding: 18px;
6
6
 
7
- --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
7
+ --conduction-primary-top-nav-item-padding: 18px;
8
8
  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
9
  /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
10
10
 
@@ -103,6 +103,7 @@
103
103
  .current:hover {
104
104
  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
105
105
  }
106
+
106
107
  .current:hover > .currentLink {
107
108
  color: var(--conduction-primary-top-nav-hover-color) !important;
108
109
  }
@@ -111,8 +112,12 @@
111
112
  color: var(--conduction-primary-top-nav-current-color) !important;
112
113
  }
113
114
 
115
+ .currentLink svg path {
116
+ fill: var(--conduction-primary-top-nav-current-color) !important;
117
+ }
118
+
114
119
  .mobileLink {
115
- margin-block-end: var(--skeleton-size-md);
120
+ margin-block-end: 18px;
116
121
  }
117
122
  .primary .link {
118
123
  text-decoration: none;
@@ -128,10 +133,18 @@
128
133
  color: var(--conduction-primary-top-nav-color);
129
134
  }
130
135
 
136
+ .primary .link:not(.currentLink) svg path {
137
+ fill: var(--conduction-primary-top-nav-color);
138
+ }
139
+
131
140
  .primary .li:hover .link {
132
141
  color: var(--conduction-primary-top-nav-hover-color);
133
142
  }
134
143
 
144
+ .primary .li:hover svg path {
145
+ fill: var(--conduction-primary-top-nav-hover-color);
146
+ }
147
+
135
148
  .link > * {
136
149
  margin-inline-end: 8px;
137
150
  }
@@ -146,6 +159,13 @@
146
159
  background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
147
160
  }
148
161
 
162
+ .dropdownOverflow {
163
+ display: none;
164
+ max-height: 430px;
165
+ overflow-y: scroll;
166
+ border: 1px solid rgba(0, 0, 0, 0.2);
167
+ }
168
+
149
169
  .dropdown.isOpen {
150
170
  display: block;
151
171
  }
@@ -168,7 +188,7 @@
168
188
  }
169
189
 
170
190
  .dropdown > li {
171
- padding-inline-start: var(--skeleton-size-md);
191
+ padding-inline-start: 18px;
172
192
  }
173
193
 
174
194
  .toggleIcon {
package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx CHANGED
@@ -9,6 +9,7 @@ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
9
9
  interface ITopNavItemBase {
10
10
  label: string;
11
11
  icon?: JSX.Element;
12
+ showToolTip?: boolean;
12
13
  current?: boolean | ICurrentItemJSONFormat;
13
14
  }
14
15
 
@@ -57,11 +58,12 @@ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
57
58
 
58
59
  export interface TopNavProps {
59
60
  items: ITopNavItem[];
61
+ tooltipId: string;
60
62
  mobileLogo?: JSX.Element;
61
63
  layoutClassName?: string;
62
64
  }
63
65
 
64
- export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
66
+ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps): JSX.Element => {
65
67
  const [isOpen, setIsOpen] = React.useState<boolean>(false);
66
68
  const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
67
69
 
@@ -103,20 +105,24 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
103
105
  current && styles.currentLink,
104
106
  )}
105
107
  >
106
- {icon}
108
+ {icon && icon}
107
109
  {label}{" "}
108
110
  {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
109
111
  </Link>
110
112
 
111
113
  {subItems && (
112
- <ul className={styles.dropdown}>
113
- {subItems.map(({ label, icon, current, handleClick }, idx) => (
114
+ <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
115
+ {subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (
114
116
  <li
115
117
  key={idx}
116
118
  className={clsx(styles.li, current && styles.current)}
117
119
  onClick={() => handleSubItemClick(handleClick)}
118
120
  >
119
- <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
121
+ <Link
122
+ data-tooltip-id={showToolTip === true ? tooltipId : ""}
123
+ data-tooltip-content={showToolTip === true ? label : ""}
124
+ className={clsx(styles.link, styles.label, current && styles.currentLink)}
125
+ >
120
126
  {icon}
121
127
  {label}
122
128
  </Link>