@conduction/components 2.0.11 → 2.0.15

package/README.md

@@ -4,34 +4,37 @@
 
 - **Version 2**
 
-  - 2.0.11:
-    - Added disabled state to SelectSingle component;
+  - 2.0.15: Added mobile support to PrimaryTopNav;
+  - 2.0.14: Refactored SelectCreate placeholder text.
+  - 2.0.13: removed round borders of tag.
+  - 2.0.11 & 2.0.12:
+    - Added disabled state to SelectSingle component.
   - 2.0.10:
-    - Added InputFloat (.00 decimals) component;
+    - Added InputFloat (.00 decimals) component.
   - 2.0.9:
-    - Added optional defaultChecked to InputCheckbox;
-    - Added CreateKeyValue input;
+    - Added optional defaultChecked to InputCheckbox.
+    - Added CreateKeyValue input.
     - Added CreateSelect input.
   - 2.0.8:
     - Added new Tooltip component using React-tooltip.
-    - Added active status to PrimaryTopNav
-    - Added active status to SecondaryTopNav
+    - Added active status to PrimaryTopNav.
+    - Added active status to SecondaryTopNav.
   - 2.0.7:
     - Added new BadgeCounter component.
     - Added CodeBlock component.
   - 2.0.6:
-    - Added optional icon with default icon to the primary and secondary button in NotificationPopUp
-    - Added a handleClick function to the DownloadCard;
-    - Added clickFunction, layoutClassName and renamed tag to label in the Tag component;
-    - Edited DetailsCard to accommodate changes made to Tag component;
-    - Edited RichContentCard to accommodate changes made to Tag component;
-  - 2.0.5: wrong camelcase in npm publish/build fix;
-  - 2.0.4: added layoutClassName to InfoCard;
-  - 2.0.3: Bugfix: --conduction-container typo removed;
-  - 2.0.2: Refactor SelectSingle formField with optional props;
-  - 2.0.1: Refactor SecondaryTopNav css module import;
+    - Added optional icon with default icon to the primary and secondary button in NotificationPopUp.
+    - Added a handleClick function to the DownloadCard.
+    - Added clickFunction, layoutClassName and renamed tag to label in the Tag component.
+    - Edited DetailsCard to accommodate changes made to Tag component.
+    - Edited RichContentCard to accommodate changes made to Tag component.
+  - 2.0.5: wrong camelcase in npm publish/build fix.
+  - 2.0.4: added layoutClassName to InfoCard.
+  - 2.0.3: Bugfix: --conduction-container typo removed.
+  - 2.0.2: Refactor SelectSingle formField with optional props.
+  - 2.0.1: Refactor SecondaryTopNav css module import.
   - 2.0.0: components are now dependent on `--skeleton` design tokens, currently found [here](https://github.com/OpenCatalogi/web-app/blob/development/pwa/src/styling/design-tokens/skeleton-design-tokens.css).
 
 - **Version 1**
 
-  - No changelog available
+  - No changelog available.

package/lib/components/formFields/input.js

@@ -9,6 +9,6 @@ export const InputPassword = ({ disabled, name, validation, register, placeholde
 export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
 export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
 export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
 export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation }), invalid: errors[name] }));
 export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));

package/lib/components/formFields/select/select.js

@@ -10,11 +10,11 @@ export const SelectMultiple = ({ name, options, errors, control, validation, def
 };
 export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(CreatableSelect, { className: styles.select, isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
+            return (_jsx(CreatableSelect, { placeholder: "Select existing or create new entries", className: styles.select, isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
         } }));
 };
-export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, }) => {
+export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(ReactSelect, { className: styles.select, ...{ options, onChange, value, errors, isClearable, defaultValue } }));
+            return (_jsx(ReactSelect, { className: styles.select, isDisabled: disabled, ...{ options, onChange, value, errors, isClearable, defaultValue } }));
         } }));
 };

package/lib/components/tag/Tag.module.css

@@ -13,7 +13,6 @@
   font-size: var(--conduction-tag-font-size);
   color: var(--conduction-tag-color);
   background-color: var(--conduction-tag-background-color);
-  border-radius: var(--conduction-tag-border-radius);
   padding-inline-start: var(--conduction-tag-padding);
   padding-inline-end: var(--conduction-tag-padding);
   padding-block-start: var(--conduction-tag-padding);

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

@@ -13,6 +13,7 @@ interface ITopNavItem {
 }
 export interface TopNavProps {
     items: ITopNavItem[];
+    mobileLogo?: JSX.Element;
     layoutClassName?: string;
 }
 export declare const PrimaryTopNav: React.FC<TopNavProps>;

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

@@ -1,7 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from "@gemeente-denhaag/components-react";
+import * as React from "react";
 import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
-export const PrimaryTopNav = ({ items, layoutClassName }) => {
-    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))) }) }) }));
+import { Link } from "@gemeente-denhaag/components-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleItemClick = (handleClick) => {
+        if (handleClick) {
+            handleClick();
+            setIsOpen(false);
+        }
+    };
+    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))) }) })] }));
 };

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

@@ -5,11 +5,46 @@
   --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
   --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
   --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-toggle-icon-size: 24px;
+  --conduction-primary-top-nav-mobile-logo-padding: 18px;
+}
+
+.container {
+  width: 100%;
+}
+
+.menuToggleContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menuToggleContainer > button {
+  all: unset;
+  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
+  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+}
+
+.menuToggleContainer > button:hover {
+  cursor: pointer;
+}
+
+.primary {
+  display: none;
+}
+
+.primary.isOpen {
+  display: block;
+}
+
+.menuToggleContainer {
+  width: 100%;
 }
 
 .primary {
   font-weight: 500;
-  width: fit-content;
+  width: 100%;
   background-color: var(--conduction-primary-top-nav-background-color);
 }
 
@@ -19,7 +54,6 @@
 
 .ul {
   margin: unset;
-  display: flex;
   padding-inline-start: unset;
   align-items: center;
 }
@@ -57,9 +91,39 @@
   padding: 0;
   width: 100%;
   display: none;
-  position: absolute;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-background-color);
   border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
   border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
 }
+
+.dropdown > li {
+  padding-inline-start: var(--web-app-size-md);
+}
+
+@media only screen and (min-width: 992px) {
+  .container {
+    width: fit-content;
+  }
+
+  .primary {
+    display: block;
+    width: fit-content;
+  }
+
+  .ul {
+    display: flex;
+  }
+
+  .dropdown {
+    position: absolute;
+  }
+
+  .dropdown > li {
+    padding-inline-start: 0;
+  }
+
+  .menuToggleContainer {
+    display: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.0.11",
+  "version": "2.0.15",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -19,6 +19,9 @@
   },
   "homepage": "https://github.com/ConductionNL/conduction-components#readme",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
     "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
     "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",

package/src/components/formFields/select/select.tsx

@@ -57,6 +57,7 @@ export const SelectCreate: React.FC<ISelectProps & IReactHookFormProps> = ({
       render={({ field: { onChange, value } }) => {
         return (
           <CreatableSelect
+            placeholder="Select existing or create new entries"
             className={styles.select}
             isMulti
             isDisabled={disabled}

package/src/components/tag/Tag.module.css

@@ -13,7 +13,6 @@
   font-size: var(--conduction-tag-font-size);
   color: var(--conduction-tag-color);
   background-color: var(--conduction-tag-background-color);
-  border-radius: var(--conduction-tag-border-radius);
   padding-inline-start: var(--conduction-tag-padding);
   padding-inline-end: var(--conduction-tag-padding);
   padding-block-start: var(--conduction-tag-padding);

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

@@ -5,11 +5,46 @@
   --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
   --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
   --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-toggle-icon-size: 24px;
+  --conduction-primary-top-nav-mobile-logo-padding: 18px;
+}
+
+.container {
+  width: 100%;
+}
+
+.menuToggleContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menuToggleContainer > button {
+  all: unset;
+  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
+  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+}
+
+.menuToggleContainer > button:hover {
+  cursor: pointer;
+}
+
+.primary {
+  display: none;
+}
+
+.primary.isOpen {
+  display: block;
+}
+
+.menuToggleContainer {
+  width: 100%;
 }
 
 .primary {
   font-weight: 500;
-  width: fit-content;
+  width: 100%;
   background-color: var(--conduction-primary-top-nav-background-color);
 }
 
@@ -19,7 +54,6 @@
 
 .ul {
   margin: unset;
-  display: flex;
   padding-inline-start: unset;
   align-items: center;
 }
@@ -57,9 +91,39 @@
   padding: 0;
   width: 100%;
   display: none;
-  position: absolute;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-background-color);
   border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
   border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
 }
+
+.dropdown > li {
+  padding-inline-start: var(--web-app-size-md);
+}
+
+@media only screen and (min-width: 992px) {
+  .container {
+    width: fit-content;
+  }
+
+  .primary {
+    display: block;
+    width: fit-content;
+  }
+
+  .ul {
+    display: flex;
+  }
+
+  .dropdown {
+    position: absolute;
+  }
+
+  .dropdown > li {
+    padding-inline-start: 0;
+  }
+
+  .menuToggleContainer {
+    display: none;
+  }
+}

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

@@ -1,7 +1,9 @@
 import * as React from "react";
-import { Link } from "@gemeente-denhaag/components-react";
 import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 
 interface ITopNavItem {
   label: string;
@@ -18,17 +20,36 @@ interface ITopNavItem {
 
 export interface TopNavProps {
   items: ITopNavItem[];
+  mobileLogo?: JSX.Element;
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
+export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, mobileLogo, layoutClassName }) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const handleItemClick = (handleClick?: () => any) => {
+    if (handleClick) {
+      handleClick();
+
+      setIsOpen(false);
+    }
+  };
+
   return (
-    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
-      <nav className={styles.primary}>
+    <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
+      <div className={styles.menuToggleContainer}>
+        {mobileLogo}
+
+        <button className={styles.menuToggle} onClick={() => setIsOpen((o) => !o)}>
+          <FontAwesomeIcon icon={faBars} />
+        </button>
+      </div>
+
+      <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
         <ul className={styles.ul}>
           {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
             <li className={clsx(styles.li, current && styles.current)} key={idx}>
-              <div onClick={handleClick}>
+              <div onClick={() => handleItemClick(handleClick)}>
                 <Link className={styles.link} icon={icon} iconAlign="start">
                   {label}
                 </Link>
@@ -37,7 +58,11 @@ export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName })
               {subItems && (
                 <ul className={styles.dropdown}>
                   {subItems.map(({ label, icon, current, handleClick }, idx) => (
-                    <li key={idx} className={clsx(styles.li, current && styles.current)} onClick={handleClick}>
+                    <li
+                      key={idx}
+                      className={clsx(styles.li, current && styles.current)}
+                      onClick={() => handleItemClick(handleClick)}
+                    >
                       <Link className={styles.link} icon={icon} iconAlign="start">
                         {label}
                       </Link>