@conduction/components 2.0.14 → 2.0.15

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 (7) hide show
  1. package/README.md +1 -0
  2. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +1 -0
  3. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +13 -3
  4. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +67 -3
  5. package/package.json +4 -1
  6. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +67 -3
  7. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +31 -6
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2**
6
6
 
7
+ - 2.0.15: Added mobile support to PrimaryTopNav;
7
8
  - 2.0.14: Refactored SelectCreate placeholder text.
8
9
  - 2.0.13: removed round borders of tag.
9
10
  - 2.0.11 & 2.0.12:
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts CHANGED
@@ -13,6 +13,7 @@ interface ITopNavItem {
13
13
  }
14
14
  export interface TopNavProps {
15
15
  items: ITopNavItem[];
16
+ mobileLogo?: JSX.Element;
16
17
  layoutClassName?: string;
17
18
  }
18
19
  export declare const PrimaryTopNav: React.FC<TopNavProps>;
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js CHANGED
@@ -1,7 +1,17 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Link } from "@gemeente-denhaag/components-react";
2
+ import * as React from "react";
3
3
  import * as styles from "./PrimaryTopNav.module.css";
4
4
  import clsx from "clsx";
5
- export const PrimaryTopNav = ({ items, layoutClassName }) => {
6
- return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { className: clsx(styles.li, current && styles.current), children: [_jsx("div", { onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) }) }));
5
+ import { Link } from "@gemeente-denhaag/components-react";
6
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
+ import { faBars } from "@fortawesome/free-solid-svg-icons";
8
+ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
9
+ const [isOpen, setIsOpen] = React.useState(false);
10
+ const handleItemClick = (handleClick) => {
11
+ if (handleClick) {
12
+ handleClick();
13
+ setIsOpen(false);
14
+ }
15
+ };
16
+ 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", { className: clsx(styles.li, current && styles.current), children: [_jsx("div", { onClick: () => handleItemClick(handleClick), children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) })] }));
7
17
  };
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -5,11 +5,46 @@
5
5
  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
6
6
  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
7
7
  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
8
+ --conduction-primary-top-nav-toggle-icon-size: 24px;
9
+ --conduction-primary-top-nav-mobile-logo-padding: 18px;
10
+ }
11
+
12
+ .container {
13
+ width: 100%;
14
+ }
15
+
16
+ .menuToggleContainer {
17
+ width: 100%;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ }
22
+
23
+ .menuToggleContainer > button {
24
+ all: unset;
25
+ font-size: var(--conduction-primary-top-nav-toggle-icon-size);
26
+ padding: var(--conduction-primary-top-nav-mobile-logo-padding);
27
+ }
28
+
29
+ .menuToggleContainer > button:hover {
30
+ cursor: pointer;
31
+ }
32
+
33
+ .primary {
34
+ display: none;
35
+ }
36
+
37
+ .primary.isOpen {
38
+ display: block;
39
+ }
40
+
41
+ .menuToggleContainer {
42
+ width: 100%;
8
43
  }
9
44
 
10
45
  .primary {
11
46
  font-weight: 500;
12
- width: fit-content;
47
+ width: 100%;
13
48
  background-color: var(--conduction-primary-top-nav-background-color);
14
49
  }
15
50
 
@@ -19,7 +54,6 @@
19
54
 
20
55
  .ul {
21
56
  margin: unset;
22
- display: flex;
23
57
  padding-inline-start: unset;
24
58
  align-items: center;
25
59
  }
@@ -57,9 +91,39 @@
57
91
  padding: 0;
58
92
  width: 100%;
59
93
  display: none;
60
- position: absolute;
61
94
  list-style-type: none;
62
95
  background-color: var(--conduction-primary-top-nav-background-color);
63
96
  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
64
97
  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
65
98
  }
99
+
100
+ .dropdown > li {
101
+ padding-inline-start: var(--web-app-size-md);
102
+ }
103
+
104
+ @media only screen and (min-width: 992px) {
105
+ .container {
106
+ width: fit-content;
107
+ }
108
+
109
+ .primary {
110
+ display: block;
111
+ width: fit-content;
112
+ }
113
+
114
+ .ul {
115
+ display: flex;
116
+ }
117
+
118
+ .dropdown {
119
+ position: absolute;
120
+ }
121
+
122
+ .dropdown > li {
123
+ padding-inline-start: 0;
124
+ }
125
+
126
+ .menuToggleContainer {
127
+ display: none;
128
+ }
129
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.0.14",
3
+ "version": "2.0.15",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -19,6 +19,9 @@
19
19
  },
20
20
  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
21
21
  "dependencies": {
22
+ "@fortawesome/fontawesome-svg-core": "^6.2.0",
23
+ "@fortawesome/free-solid-svg-icons": "^6.2.0",
24
+ "@fortawesome/react-fontawesome": "^0.2.0",
22
25
  "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
23
26
  "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
24
27
  "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -5,11 +5,46 @@
5
5
  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
6
6
  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
7
7
  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
8
+ --conduction-primary-top-nav-toggle-icon-size: 24px;
9
+ --conduction-primary-top-nav-mobile-logo-padding: 18px;
10
+ }
11
+
12
+ .container {
13
+ width: 100%;
14
+ }
15
+
16
+ .menuToggleContainer {
17
+ width: 100%;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ }
22
+
23
+ .menuToggleContainer > button {
24
+ all: unset;
25
+ font-size: var(--conduction-primary-top-nav-toggle-icon-size);
26
+ padding: var(--conduction-primary-top-nav-mobile-logo-padding);
27
+ }
28
+
29
+ .menuToggleContainer > button:hover {
30
+ cursor: pointer;
31
+ }
32
+
33
+ .primary {
34
+ display: none;
35
+ }
36
+
37
+ .primary.isOpen {
38
+ display: block;
39
+ }
40
+
41
+ .menuToggleContainer {
42
+ width: 100%;
8
43
  }
9
44
 
10
45
  .primary {
11
46
  font-weight: 500;
12
- width: fit-content;
47
+ width: 100%;
13
48
  background-color: var(--conduction-primary-top-nav-background-color);
14
49
  }
15
50
 
@@ -19,7 +54,6 @@
19
54
 
20
55
  .ul {
21
56
  margin: unset;
22
- display: flex;
23
57
  padding-inline-start: unset;
24
58
  align-items: center;
25
59
  }
@@ -57,9 +91,39 @@
57
91
  padding: 0;
58
92
  width: 100%;
59
93
  display: none;
60
- position: absolute;
61
94
  list-style-type: none;
62
95
  background-color: var(--conduction-primary-top-nav-background-color);
63
96
  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
64
97
  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
65
98
  }
99
+
100
+ .dropdown > li {
101
+ padding-inline-start: var(--web-app-size-md);
102
+ }
103
+
104
+ @media only screen and (min-width: 992px) {
105
+ .container {
106
+ width: fit-content;
107
+ }
108
+
109
+ .primary {
110
+ display: block;
111
+ width: fit-content;
112
+ }
113
+
114
+ .ul {
115
+ display: flex;
116
+ }
117
+
118
+ .dropdown {
119
+ position: absolute;
120
+ }
121
+
122
+ .dropdown > li {
123
+ padding-inline-start: 0;
124
+ }
125
+
126
+ .menuToggleContainer {
127
+ display: none;
128
+ }
129
+ }
package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import * as React from "react";
2
- import { Link } from "@gemeente-denhaag/components-react";
3
2
  import * as styles from "./PrimaryTopNav.module.css";
4
3
  import clsx from "clsx";
4
+ import { Link } from "@gemeente-denhaag/components-react";
5
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
+ import { faBars } from "@fortawesome/free-solid-svg-icons";
5
7
 
6
8
  interface ITopNavItem {
7
9
  label: string;
@@ -18,17 +20,36 @@ interface ITopNavItem {
18
20
 
19
21
  export interface TopNavProps {
20
22
  items: ITopNavItem[];
23
+ mobileLogo?: JSX.Element;
21
24
  layoutClassName?: string;
22
25
  }
23
26
 
24
- export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
27
+ export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, mobileLogo, layoutClassName }) => {
28
+ const [isOpen, setIsOpen] = React.useState<boolean>(false);
29
+
30
+ const handleItemClick = (handleClick?: () => any) => {
31
+ if (handleClick) {
32
+ handleClick();
33
+
34
+ setIsOpen(false);
35
+ }
36
+ };
37
+
25
38
  return (
26
- <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
27
- <nav className={styles.primary}>
39
+ <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
40
+ <div className={styles.menuToggleContainer}>
41
+ {mobileLogo}
42
+
43
+ <button className={styles.menuToggle} onClick={() => setIsOpen((o) => !o)}>
44
+ <FontAwesomeIcon icon={faBars} />
45
+ </button>
46
+ </div>
47
+
48
+ <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
28
49
  <ul className={styles.ul}>
29
50
  {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
30
51
  <li className={clsx(styles.li, current && styles.current)} key={idx}>
31
- <div onClick={handleClick}>
52
+ <div onClick={() => handleItemClick(handleClick)}>
32
53
  <Link className={styles.link} icon={icon} iconAlign="start">
33
54
  {label}
34
55
  </Link>
@@ -37,7 +58,11 @@ export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName })
37
58
  {subItems && (
38
59
  <ul className={styles.dropdown}>
39
60
  {subItems.map(({ label, icon, current, handleClick }, idx) => (
40
- <li key={idx} className={clsx(styles.li, current && styles.current)} onClick={handleClick}>
61
+ <li
62
+ key={idx}
63
+ className={clsx(styles.li, current && styles.current)}
64
+ onClick={() => handleItemClick(handleClick)}
65
+ >
41
66
  <Link className={styles.link} icon={icon} iconAlign="start">
42
67
  {label}
43
68
  </Link>