@conduction/components 1.0.9 → 1.0.10

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 (9) hide show
  1. package/lib/components/container/Container.d.ts +1 -5
  2. package/lib/components/container/Container.js +1 -2
  3. package/lib/components/container/Container.module.css +1 -5
  4. package/lib/components/topNav/TopNav.d.ts +9 -9
  5. package/lib/components/topNav/TopNav.js +6 -6
  6. package/lib/components/topNav/TopNav.module.css +65 -11
  7. package/package.json +1 -1
  8. package/src/components/topNav/TopNav.module.css +65 -11
  9. package/src/components/topNav/TopNav.tsx +33 -34
package/lib/components/container/Container.d.ts CHANGED
@@ -1,6 +1,2 @@
1
1
  import * as React from "react";
2
- interface ContainerProps {
3
- layoutClassName?: string;
4
- }
5
- export declare const Container: React.FC<ContainerProps>;
6
- export {};
2
+ export declare const Container: React.FC;
package/lib/components/container/Container.js CHANGED
@@ -1,4 +1,3 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as styles from "./Container.module.css";
3
- import clsx from "clsx";
4
- export const Container = ({ children, layoutClassName }) => (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: children }));
3
+ export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });
package/lib/components/container/Container.module.css CHANGED
@@ -1,9 +1,5 @@
1
- :root{
2
- --condution-container-max-width: 1024px;
3
- }
4
-
5
1
  .container {
6
2
  width: 100%;
7
3
  margin-inline: auto;
8
- max-width: var(--condution-container-max-width);
4
+ max-width: var(--nlportal-max-page-width);
9
5
  }
package/lib/components/topNav/TopNav.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as React from "react";
2
- export interface ITopNavItem {
3
- label: string;
4
- href: string;
5
- icon?: JSX.Element;
2
+ interface TopNavProps {
3
+ items: {
4
+ label: string;
5
+ icon?: JSX.Element;
6
+ handleClick: () => any;
7
+ }[];
8
+ layoutClassName?: string;
6
9
  }
7
- interface TopNavItemsProps {
8
- items: ITopNavItem[];
9
- }
10
- export declare const PrimaryTopNav: React.FC<TopNavItemsProps>;
11
- export declare const SecondaryTopNav: React.FC<TopNavItemsProps>;
10
+ export declare const PrimaryTopNav: React.FC<TopNavProps>;
11
+ export declare const SecondaryTopNav: React.FC<TopNavProps>;
12
12
  export {};
package/lib/components/topNav/TopNav.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./TopNav.module.css";
3
2
  import { Link } from "@gemeente-denhaag/components-react";
4
- import { navigate } from "gatsby";
5
- export const PrimaryTopNav = ({ items }) => {
6
- return (_jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
3
+ import * as styles from "./TopNav.module.css";
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, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
7
7
  };
8
- export const SecondaryTopNav = ({ items }) => {
9
- return (_jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
8
+ export const SecondaryTopNav = ({ items, layoutClassName }) => {
9
+ return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
10
10
  };
package/lib/components/topNav/TopNav.module.css CHANGED
@@ -1,22 +1,76 @@
1
- .ul {
2
- display: flex;
1
+ :root {
2
+ --conduction-top-nav-space-inline-lg: 1.25rem;
3
+
4
+ --conduction-top-nav-color-primary: #ffffff;
5
+ --conduction-top-nav-background-color-primary: #084f70;
6
+ --conduction-top-nav-background-color-primary-hover: rgba(0, 0, 0, 0.2);
7
+
8
+ --conduction-top-nav-font-size-secondary: 16px;
9
+ --conduction-top-nav-color-secondary: #ffffff;
10
+ --conduction-top-nav-background-color-secondary: #0b71a1;
11
+ --conduction-top-nav-background-color-secondary-hover: rgba(
12
+ 255,
13
+ 255,
14
+ 255,
15
+ 0.2
16
+ );
3
17
  }
4
18
 
5
- .ul > * {
6
- flex: 1;
19
+ /*
20
+ * Global
21
+ */
22
+ .primary:hover,
23
+ .secondary:hover {
24
+ cursor: pointer;
25
+ }
26
+
27
+ .ul {
28
+ margin: unset;
29
+ display: flex;
30
+ padding-inline-start: unset;
31
+ align-items: center;
7
32
  }
8
33
 
9
34
  .li {
10
35
  list-style-type: none;
11
- padding-block-start: var(--conduction-navbar-padding);
12
- padding-block-end: var(--conduction-navbar-padding);
36
+ display: block;
37
+ padding-inline-start: var(--conduction-top-nav-space-inline-lg);
38
+ padding-inline-end: var(--conduction-top-nav-space-inline-lg);
39
+ padding-block-start: var(--conduction-top-nav-space-inline-lg);
40
+ padding-block-end: var(--conduction-top-nav-space-inline-lg);
41
+ }
42
+
43
+ /*
44
+ * Primary Top Navigation
45
+ */
46
+ .primary {
47
+ font-weight: 500;
48
+ width: fit-content;
49
+ background-color: var(--conduction-top-nav-background-color-primary);
13
50
  }
14
51
 
15
- .li > * {
16
- text-decoration: none;
17
- color: var(--conduction-navbar-color);
52
+ .primary .link {
53
+ color: var(--conduction-top-nav-color-primary);
18
54
  }
19
55
 
20
- .primary {
21
- font-weight: bold;
56
+ .primary .li:hover {
57
+ background-color: var(--conduction-top-nav-background-color-primary-hover);
58
+ }
59
+
60
+ /*
61
+ * Secondary Top Navigation
62
+ */
63
+ .secondary {
64
+ font-weight: 100;
65
+ width: fit-content;
66
+ font-size: var(--conduction-top-nav-font-size-secondary);
67
+ background-color: var(--conduction-top-nav-background-color-secondary);
68
+ }
69
+
70
+ .secondary .link {
71
+ color: var(--conduction-top-nav-color-secondary);
72
+ }
73
+
74
+ .secondary .li:hover {
75
+ background-color: var(--conduction-top-nav-background-color-secondary-hover);
22
76
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "1.0.9",
3
+ "version": "1.0.10",
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/topNav/TopNav.module.css CHANGED
@@ -1,22 +1,76 @@
1
- .ul {
2
- display: flex;
1
+ :root {
2
+ --conduction-top-nav-space-inline-lg: 1.25rem;
3
+
4
+ --conduction-top-nav-color-primary: #ffffff;
5
+ --conduction-top-nav-background-color-primary: #084f70;
6
+ --conduction-top-nav-background-color-primary-hover: rgba(0, 0, 0, 0.2);
7
+
8
+ --conduction-top-nav-font-size-secondary: 16px;
9
+ --conduction-top-nav-color-secondary: #ffffff;
10
+ --conduction-top-nav-background-color-secondary: #0b71a1;
11
+ --conduction-top-nav-background-color-secondary-hover: rgba(
12
+ 255,
13
+ 255,
14
+ 255,
15
+ 0.2
16
+ );
3
17
  }
4
18
 
5
- .ul > * {
6
- flex: 1;
19
+ /*
20
+ * Global
21
+ */
22
+ .primary:hover,
23
+ .secondary:hover {
24
+ cursor: pointer;
25
+ }
26
+
27
+ .ul {
28
+ margin: unset;
29
+ display: flex;
30
+ padding-inline-start: unset;
31
+ align-items: center;
7
32
  }
8
33
 
9
34
  .li {
10
35
  list-style-type: none;
11
- padding-block-start: var(--conduction-navbar-padding);
12
- padding-block-end: var(--conduction-navbar-padding);
36
+ display: block;
37
+ padding-inline-start: var(--conduction-top-nav-space-inline-lg);
38
+ padding-inline-end: var(--conduction-top-nav-space-inline-lg);
39
+ padding-block-start: var(--conduction-top-nav-space-inline-lg);
40
+ padding-block-end: var(--conduction-top-nav-space-inline-lg);
41
+ }
42
+
43
+ /*
44
+ * Primary Top Navigation
45
+ */
46
+ .primary {
47
+ font-weight: 500;
48
+ width: fit-content;
49
+ background-color: var(--conduction-top-nav-background-color-primary);
13
50
  }
14
51
 
15
- .li > * {
16
- text-decoration: none;
17
- color: var(--conduction-navbar-color);
52
+ .primary .link {
53
+ color: var(--conduction-top-nav-color-primary);
18
54
  }
19
55
 
20
- .primary {
21
- font-weight: bold;
56
+ .primary .li:hover {
57
+ background-color: var(--conduction-top-nav-background-color-primary-hover);
58
+ }
59
+
60
+ /*
61
+ * Secondary Top Navigation
62
+ */
63
+ .secondary {
64
+ font-weight: 100;
65
+ width: fit-content;
66
+ font-size: var(--conduction-top-nav-font-size-secondary);
67
+ background-color: var(--conduction-top-nav-background-color-secondary);
68
+ }
69
+
70
+ .secondary .link {
71
+ color: var(--conduction-top-nav-color-secondary);
72
+ }
73
+
74
+ .secondary .li:hover {
75
+ background-color: var(--conduction-top-nav-background-color-secondary-hover);
22
76
  }
package/src/components/topNav/TopNav.tsx CHANGED
@@ -1,46 +1,45 @@
1
1
  import * as React from "react";
2
- import * as styles from "./TopNav.module.css";
3
2
  import { Link } from "@gemeente-denhaag/components-react";
4
- import { navigate } from "gatsby";
5
-
6
- export interface ITopNavItem {
7
- label: string;
8
- href: string;
9
- icon?: JSX.Element;
10
- }
3
+ import * as styles from "./TopNav.module.css";
4
+ import clsx from "clsx";
11
5
 
12
- interface TopNavItemsProps {
13
- items: ITopNavItem[];
6
+ interface TopNavProps {
7
+ items: { label: string; icon?: JSX.Element; handleClick: () => any }[];
8
+ layoutClassName?: string;
14
9
  }
15
10
 
16
- export const PrimaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
11
+ export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
17
12
  return (
18
- <nav className={styles.primary}>
19
- <ul className={styles.ul}>
20
- {items.map(({ label, href, icon }, idx) => (
21
- <li className={styles.li} key={idx} onClick={() => navigate(href)}>
22
- <Link icon={icon} iconAlign="start">
23
- {label}
24
- </Link>
25
- </li>
26
- ))}
27
- </ul>
28
- </nav>
13
+ <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
14
+ <nav className={styles.primary}>
15
+ <ul className={styles.ul}>
16
+ {items.map(({ label, icon, handleClick }, idx) => (
17
+ <li className={styles.li} key={idx} onClick={handleClick}>
18
+ <Link className={styles.link} icon={icon} iconAlign="start">
19
+ {label}
20
+ </Link>
21
+ </li>
22
+ ))}
23
+ </ul>
24
+ </nav>
25
+ </div>
29
26
  );
30
27
  };
31
28
 
32
- export const SecondaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
29
+ export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
33
30
  return (
34
- <nav>
35
- <ul className={styles.ul}>
36
- {items.map(({ label, href, icon }, idx) => (
37
- <li className={styles.li} key={idx} onClick={() => navigate(href)}>
38
- <Link icon={icon} iconAlign="start">
39
- {label}
40
- </Link>
41
- </li>
42
- ))}
43
- </ul>
44
- </nav>
31
+ <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
32
+ <nav>
33
+ <ul className={styles.ul}>
34
+ {items.map(({ label, icon, handleClick }, idx) => (
35
+ <li className={styles.li} key={idx} onClick={handleClick}>
36
+ <Link className={styles.link} icon={icon} iconAlign="start">
37
+ {label}
38
+ </Link>
39
+ </li>
40
+ ))}
41
+ </ul>
42
+ </nav>
43
+ </div>
45
44
  );
46
45
  };