@conduction/components 1.0.8 → 1.0.11

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 (12) hide show
  1. package/lib/components/formFields/select/select.d.ts +4 -5
  2. package/lib/components/modals/NotificationModal.d.ts +25 -0
  3. package/lib/components/modals/NotificationModal.js +34 -0
  4. package/lib/components/modals/NotificationModal.module.css +56 -0
  5. package/lib/components/topNav/TopNav.d.ts +9 -9
  6. package/lib/components/topNav/TopNav.js +6 -6
  7. package/lib/components/topNav/TopNav.module.css +65 -11
  8. package/package.json +1 -1
  9. package/src/components/container/Container.module.css +5 -1
  10. package/src/components/container/Container.tsx +8 -1
  11. package/src/components/topNav/TopNav.module.css +60 -11
  12. package/src/components/topNav/TopNav.tsx +33 -34
package/lib/components/formFields/select/select.d.ts CHANGED
@@ -1,17 +1,16 @@
1
1
  import * as React from "react";
2
- import { Control, FieldValues } from "react-hook-form";
3
- import { IReactHookFormProps } from "./../types";
2
+ import { IReactHookFormProps } from "../types";
4
3
  export interface ISelectValue {
5
4
  label: string;
6
5
  value: string;
7
6
  }
8
7
  interface ISelectProps {
9
- control: Control<FieldValues, any>;
8
+ control: any;
10
9
  options: ISelectValue[];
11
10
  name: string;
12
11
  defaultValue?: any;
13
12
  disabled?: boolean;
14
13
  }
15
- export declare const SelectMultiple: React.FC<ISelectProps & ISelectProps & IReactHookFormProps>;
16
- export declare const SelectSingle: React.FC<ISelectProps & ISelectProps & IReactHookFormProps>;
14
+ export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
15
+ export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
17
16
  export {};
package/lib/components/modals/NotificationModal.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import * as React from "react";
2
+ export interface ModalProps {
3
+ title: string;
4
+ description: string;
5
+ isShown: boolean;
6
+ hide: () => void;
7
+ layoutClassName: string;
8
+ primaryButton: {
9
+ label: string;
10
+ handleClick(): any;
11
+ };
12
+ closeButton?: {
13
+ label: string;
14
+ };
15
+ infoLink?: {
16
+ label: string;
17
+ link: string;
18
+ };
19
+ }
20
+ export declare const NotificationModal: React.FC<ModalProps>;
21
+ export declare const toggleNotificationModal: () => {
22
+ isShown: boolean;
23
+ show: () => void;
24
+ hide: () => void;
25
+ };
package/lib/components/modals/NotificationModal.js ADDED
@@ -0,0 +1,34 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import * as styles from "./NotificationModal.module.css";
4
+ import ReactDOM from "react-dom";
5
+ import { Button, Heading3, Link, Paragraph } from "@gemeente-denhaag/components-react";
6
+ import clsx from "clsx";
7
+ import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
8
+ export const NotificationModal = ({ title, description, isShown, hide, primaryButton, closeButton, infoLink, layoutClassName, }) => {
9
+ const [fadeOut, setFadeOut] = React.useState(true);
10
+ const stylesContainer = document.getElementById("stylesContainer");
11
+ const animationDurationToken = getComputedStyle(document.documentElement).getPropertyValue("--conduction-notification-animation-duration");
12
+ const animationDurationString = animationDurationToken.replace(/\D/g, "");
13
+ const animationDuration = parseInt(animationDurationString);
14
+ const handleClick = (clickFunction) => {
15
+ setFadeOut(!setFadeOut);
16
+ clickFunction && clickFunction();
17
+ setTimeout(() => {
18
+ hide();
19
+ setFadeOut(true);
20
+ }, animationDuration);
21
+ };
22
+ const modal = (_jsx("div", { className: clsx(styles.cssanimation, fadeOut ? styles.fadeInBottom : styles.fadeOutBottom, layoutClassName), children: _jsxs("div", { className: styles.modal, children: [_jsx(Heading3, { children: title }), _jsx("div", { children: _jsxs(Paragraph, { children: [description, " ", infoLink ? _jsx(Link, { href: infoLink.link, children: infoLink.label }) : _jsx(_Fragment, {})] }) }), _jsxs("div", { className: styles.buttons, children: [closeButton ? (_jsx("div", { onClick: () => handleClick(), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: closeButton.label }) })) : (_jsx(_Fragment, {})), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
23
+ return isShown ? ReactDOM.createPortal(modal, stylesContainer) : null;
24
+ };
25
+ export const toggleNotificationModal = () => {
26
+ const [isShown, setIsShown] = React.useState(false);
27
+ const show = () => setIsShown(true);
28
+ const hide = () => setIsShown(false);
29
+ return {
30
+ isShown,
31
+ show,
32
+ hide,
33
+ };
34
+ };
package/lib/components/modals/NotificationModal.module.css ADDED
@@ -0,0 +1,56 @@
1
+ .modal {
2
+ background: var(--denhaag-color-warmgrey-1);
3
+ padding-inline-start: var(--nlportal-space-inline-lg);
4
+ padding-inline-end: var(--nlportal-space-inline-lg);
5
+ padding-block-start: var(--nlportal-space-block-lg);
6
+ padding-block-end: var(--nlportal-space-block-lg);
7
+ box-shadow: var(--conduction-notification-box-shadow);
8
+ border-radius: var(--nlportal-document-border-radius);
9
+ }
10
+
11
+ .modal > *:not(:last-child) {
12
+ margin-block-end: var(--nlportal-space-block-md);
13
+ }
14
+
15
+ .buttons {
16
+ display: flex;
17
+ justify-content: flex-end;
18
+ align-items: center;
19
+ }
20
+
21
+ .buttons > *:not(:last-child) {
22
+ margin-inline-end: var(--nlportal-space-inline-md);
23
+ }
24
+
25
+ .cssanimation {
26
+ animation-duration: var(--conduction-notification-animation-duration);
27
+ animation-fill-mode: both;
28
+ }
29
+
30
+ .fadeInBottom {
31
+ animation-name: fadeInBottom;
32
+ }
33
+
34
+ @keyframes fadeInBottom {
35
+ from {
36
+ opacity: 0;
37
+ transform: translateY(100%);
38
+ }
39
+ to {
40
+ opacity: 1;
41
+ }
42
+ }
43
+
44
+ .fadeOutBottom {
45
+ animation-name: fadeOutBottom;
46
+ }
47
+
48
+ @keyframes fadeOutBottom {
49
+ from {
50
+ opacity: 1;
51
+ }
52
+ to {
53
+ opacity: 0;
54
+ transform: translateY(100%);
55
+ }
56
+ }
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.8",
3
+ "version": "1.0.11",
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/container/Container.module.css CHANGED
@@ -1,5 +1,9 @@
1
+ :root{
2
+ --condution-container-max-width: 1024px;
3
+ }
4
+
1
5
  .container {
2
6
  width: 100%;
3
7
  margin-inline: auto;
4
- max-width: var(--nlportal-max-page-width);
8
+ max-width: var(--condution-container-max-width);
5
9
  }
package/src/components/container/Container.tsx CHANGED
@@ -1,4 +1,11 @@
1
1
  import * as React from "react";
2
2
  import * as styles from "./Container.module.css";
3
+ import clsx from "clsx";
3
4
 
4
- export const Container: React.FC = ({ children }) => <div className={styles.container}>{children}</div>;
5
+ interface ContainerProps {
6
+ layoutClassName?: string;
7
+ }
8
+
9
+ export const Container: React.FC<ContainerProps> = ({ children, layoutClassName }) => (
10
+ <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>{children}</div>
11
+ );
package/src/components/topNav/TopNav.module.css CHANGED
@@ -1,22 +1,71 @@
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: #0b71a1;
6
+ --conduction-top-nav-background-color-primary-hover: rgba(255, 255, 255, 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: #084f70;
11
+ --conduction-top-nav-background-color-secondary-hover: rgba(0, 0, 0, 0.2);
3
12
  }
4
13
 
5
- .ul > * {
6
- flex: 1;
14
+ /*
15
+ * Global
16
+ */
17
+ .primary:hover,
18
+ .secondary:hover {
19
+ cursor: pointer;
20
+ }
21
+
22
+ .ul {
23
+ margin: unset;
24
+ display: flex;
25
+ padding-inline-start: unset;
26
+ align-items: center;
7
27
  }
8
28
 
9
29
  .li {
10
30
  list-style-type: none;
11
- padding-block-start: var(--conduction-navbar-padding);
12
- padding-block-end: var(--conduction-navbar-padding);
31
+ display: block;
32
+ padding-inline-start: var(--conduction-top-nav-space-inline-lg);
33
+ padding-inline-end: var(--conduction-top-nav-space-inline-lg);
34
+ padding-block-start: var(--conduction-top-nav-space-inline-lg);
35
+ padding-block-end: var(--conduction-top-nav-space-inline-lg);
36
+ }
37
+
38
+ /*
39
+ * Primary Top Navigation
40
+ */
41
+ .primary {
42
+ font-weight: 500;
43
+ width: fit-content;
44
+ background-color: var(--conduction-top-nav-background-color-primary);
13
45
  }
14
46
 
15
- .li > * {
16
- text-decoration: none;
17
- color: var(--conduction-navbar-color);
47
+ .primary .link {
48
+ color: var(--conduction-top-nav-color-primary);
18
49
  }
19
50
 
20
- .primary {
21
- font-weight: bold;
51
+ .primary .li:hover {
52
+ background-color: var(--conduction-top-nav-background-color-primary-hover);
53
+ }
54
+
55
+ /*
56
+ * Secondary Top Navigation
57
+ */
58
+ .secondary {
59
+ font-weight: 100;
60
+ width: fit-content;
61
+ font-size: var(--conduction-top-nav-font-size-secondary);
62
+ background-color: var(--conduction-top-nav-background-color-secondary);
63
+ }
64
+
65
+ .secondary .link {
66
+ color: var(--conduction-top-nav-color-secondary);
67
+ }
68
+
69
+ .secondary .li:hover {
70
+ background-color: var(--conduction-top-nav-background-color-secondary-hover);
22
71
  }
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
  };