@onewelcome/react-lib-components 9.1.0 → 9.3.0

package/dist/esm/src/components/Layout/Card/Card.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes, ReactElement } from "react";
+export interface CardHeaderInfo {
+}
+export type CardStyle = "grey" | "white";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    titleHeadingLevel?: number;
+    description?: string;
+    action?: ReactElement;
+    wrapHeaderText?: boolean;
+    headerContent?: ReactElement;
+    cardStyle?: CardStyle;
+    collapsed?: boolean;
+}
+export declare const CardComponent: ({ title, titleHeadingLevel, description, action, wrapHeaderText, headerContent, cardStyle, collapsed, children, ...rest }: CardProps) => React.JSX.Element;
+export declare const Card: ({ title, titleHeadingLevel, description, action, wrapHeaderText, headerContent, cardStyle, collapsed, children, ...rest }: CardProps) => React.JSX.Element;

package/dist/esm/src/components/Layout/Card/Card.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/esm/src/components/admin/layout/LeftNav/LeftNav.d.ts

@@ -1,7 +1,9 @@
 import React, { ComponentPropsWithRef } from "react";
 import { MenuItem } from "./LeftNav.interfaces";
+import { ScreenSize } from "../../../../variables";
 export interface Props extends ComponentPropsWithRef<"nav"> {
     isSideMenuOpen?: boolean;
+    onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
     items: MenuItem[];
     navigate: (path: string) => void;
     onItemClick?: (path?: string, button?: boolean) => void;

package/dist/esm/src/hooks/useScreenSize.d.ts

@@ -0,0 +1,9 @@
+import { ScreenSize } from "../variables";
+interface Props {
+    onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
+}
+export declare const useScreenSize: ({ onScreenSizeChange }?: Props) => {
+    screenSize: ScreenSize;
+    isDesktopScreenSize: () => boolean;
+};
+export {};

package/dist/esm/src/hooks/useScreenSize.esm.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { breakpoints, ScreenSize } from '../variables.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const emToPx = (em) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);
+const getScreenSize = (width) => {
+    if (width < emToPx(breakpoints[ScreenSize.SMALL])) {
+        return ScreenSize.SMALL;
+    }
+    if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {
+        return ScreenSize.MEDIUM;
+    }
+    return ScreenSize.LARGE;
+};
+const useScreenSize = ({ onScreenSizeChange } = {}) => {
+    const [screenSize, setScreenSize] = useState(getScreenSize(window.innerWidth));
+    useEffect(() => {
+        const handleResize = () => {
+            const newScreenSize = getScreenSize(window.innerWidth);
+            setScreenSize(prevScreenSize => {
+                if (newScreenSize !== prevScreenSize) {
+                    onScreenSizeChange === null || onScreenSizeChange === void 0 ? void 0 : onScreenSizeChange(newScreenSize, prevScreenSize);
+                    return newScreenSize;
+                }
+                return prevScreenSize;
+            });
+        };
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;
+    return { screenSize, isDesktopScreenSize };
+};
+
+export { useScreenSize };
+//# sourceMappingURL=useScreenSize.esm.js.map

package/dist/esm/src/hooks/useScreenSize.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenSize.esm.js","sources":["../../../../../../src/hooks/useScreenSize.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { useState, useEffect } from \"react\";\nimport { breakpoints, ScreenSize } from \"../variables\";\n\ninterface Props {\n  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;\n}\n\nconst emToPx = (em: number) => em * parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst getScreenSize = (width: number) => {\n  if (width < emToPx(breakpoints[ScreenSize.SMALL])) {\n    return ScreenSize.SMALL;\n  }\n  if (width < emToPx(breakpoints[ScreenSize.MEDIUM])) {\n    return ScreenSize.MEDIUM;\n  }\n\n  return ScreenSize.LARGE;\n};\n\nexport const useScreenSize = ({ onScreenSizeChange }: Props = {}) => {\n  const [screenSize, setScreenSize] = useState<ScreenSize>(getScreenSize(window.innerWidth));\n\n  useEffect(() => {\n    const handleResize = () => {\n      const newScreenSize = getScreenSize(window.innerWidth);\n      setScreenSize(prevScreenSize => {\n        if (newScreenSize !== prevScreenSize) {\n          onScreenSizeChange?.(newScreenSize, prevScreenSize);\n          return newScreenSize;\n        }\n        return prevScreenSize;\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  const isDesktopScreenSize = () => screenSize === ScreenSize.LARGE;\n\n  return { screenSize, isDesktopScreenSize };\n};\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;AASH,MAAM,MAAM,GAAG,CAAC,EAAU,KAAK,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEpG,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;AACtC,IAAA,IAAI,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;QACjD,OAAO,UAAU,CAAC,KAAK,CAAC;KACzB;AACD,IAAA,IAAI,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;QAClD,OAAO,UAAU,CAAC,MAAM,CAAC;KAC1B;IAED,OAAO,UAAU,CAAC,KAAK,CAAC;AAC1B,CAAC,CAAC;AAEW,MAAA,aAAa,GAAG,CAAC,EAAE,kBAAkB,EAAA,GAAY,EAAE,KAAI;AAClE,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAa,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3F,SAAS,CAAC,MAAK;QACb,MAAM,YAAY,GAAG,MAAK;YACxB,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACvD,aAAa,CAAC,cAAc,IAAG;AAC7B,gBAAA,IAAI,aAAa,KAAK,cAAc,EAAE;oBACpC,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAlB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,kBAAkB,CAAG,aAAa,EAAE,cAAc,CAAC,CAAC;AACpD,oBAAA,OAAO,aAAa,CAAC;iBACtB;AACD,gBAAA,OAAO,cAAc,CAAC;AACxB,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAChD,QAAA,YAAY,EAAE,CAAC;QACf,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;KACjE,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAAG,MAAM,UAAU,KAAK,UAAU,CAAC,KAAK,CAAC;AAElE,IAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,CAAC;AAC7C;;;;"}

package/dist/esm/src/hooks/useScreenSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/index.d.ts

@@ -50,6 +50,8 @@ export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { useUploadFile } from "./hooks/useUploadFile";
 export type { UploadResponseStatus, UploadResponseJson, UploadResponseType, UseUploadFileCallback, UploadFileRequestParams } from "./hooks/useUploadFile";
 export { generateID, debounce, throttle } from "./util/helper";
+export { useScreenSize } from "./hooks/useScreenSize";
+export { ScreenSize } from "./variables";
 export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
 export { useAlert } from "./components/Notifications/Alert/useAlert";

package/dist/esm/src/index.esm.js

@@ -26,6 +26,8 @@ export { usePosition } from './hooks/usePosition.esm.js';
 export { useDebouncedCallback } from './hooks/useDebouncedCallback.esm.js';
 export { useUploadFile } from './hooks/useUploadFile.esm.js';
 export { debounce, generateID, throttle } from './util/helper.esm.js';
+export { useScreenSize } from './hooks/useScreenSize.esm.js';
+export { ScreenSize } from './variables.esm.js';
 export { BaseModal as Modal } from '../Notifications/BaseModal/BaseModal.esm.js';
 export { useAlert } from '../Notifications/Alert/useAlert.esm.js';
 export { AlertProvider } from '../Notifications/Alert/AlertProvider/AlertProvider.esm.js';

package/dist/esm/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/src/readyclasses.module.scss.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_5EgOB{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_5EgOB{display:none}.readyclasses_slide-in_5EgOB{animation:readyclasses_slide-in_5EgOB .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_5EgOB{animation-duration:.1ms}}.readyclasses_slide-out_5EgOB{animation:readyclasses_slide-out_5EgOB .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_5EgOB{animation-duration:.1ms}}@keyframes readyclasses_slide-in_5EgOB{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_5EgOB{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_5EgOB","hidden":"readyclasses_hidden_5EgOB","slide-in":"readyclasses_slide-in_5EgOB","slide-out":"readyclasses_slide-out_5EgOB"};
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.readyclasses_sr-only_NmMJU{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_NmMJU{display:none}.readyclasses_slide-in_NmMJU{animation:readyclasses_slide-in_NmMJU .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_NmMJU{animation-duration:.1ms}}.readyclasses_slide-out_NmMJU{animation:readyclasses_slide-out_NmMJU .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_NmMJU{animation-duration:.1ms}}@keyframes readyclasses_slide-in_NmMJU{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_NmMJU{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
+var readyclasses = {"sr-only":"readyclasses_sr-only_NmMJU","hidden":"readyclasses_hidden_NmMJU","slide-in":"readyclasses_slide-in_NmMJU","slide-out":"readyclasses_slide-out_NmMJU"};
 styleInject(css_248z);
 
 export { readyclasses as default };

package/dist/esm/src/variables.d.ts

@@ -0,0 +1,8 @@
+export declare enum ScreenSize {
+    SMALL = 0,
+    MEDIUM = 1,
+    LARGE = 2
+}
+export declare const breakpoints: {
+    [key in ScreenSize]: number;
+};

package/dist/esm/src/variables.esm.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/** Breakpoints **/
+const small = 30; //em = 480px
+const medium = 50; //em = 800px
+const large = 90; //em = 1440px
+var ScreenSize;
+(function (ScreenSize) {
+    ScreenSize[ScreenSize["SMALL"] = 0] = "SMALL";
+    ScreenSize[ScreenSize["MEDIUM"] = 1] = "MEDIUM";
+    ScreenSize[ScreenSize["LARGE"] = 2] = "LARGE";
+})(ScreenSize || (ScreenSize = {}));
+const breakpoints = {
+    [ScreenSize.SMALL]: small,
+    [ScreenSize.MEDIUM]: medium,
+    [ScreenSize.LARGE]: large
+};
+
+export { ScreenSize, breakpoints };
+//# sourceMappingURL=variables.esm.js.map

package/dist/esm/src/variables.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.esm.js","sources":["../../../../../src/variables.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/** Breakpoints **/\nconst small = 30 as const; //em = 480px\nconst medium = 50 as const; //em = 800px\nconst large = 90 as const; //em = 1440px\n\nexport enum ScreenSize {\n  SMALL,\n  MEDIUM,\n  LARGE\n}\n\nexport const breakpoints: { [key in ScreenSize]: number } = {\n  [ScreenSize.SMALL]: small,\n  [ScreenSize.MEDIUM]: medium,\n  [ScreenSize.LARGE]: large\n} as const;\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;AAEH;AACA,MAAM,KAAK,GAAG,EAAW,CAAC;AAC1B,MAAM,MAAM,GAAG,EAAW,CAAC;AAC3B,MAAM,KAAK,GAAG,EAAW,CAAC;IAEd,WAIX;AAJD,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,UAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAK,CAAA;AACL,IAAA,UAAA,CAAA,UAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAM,CAAA;AACN,IAAA,UAAA,CAAA,UAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAK,CAAA;AACP,CAAC,EAJW,UAAU,KAAV,UAAU,GAIrB,EAAA,CAAA,CAAA,CAAA;AAEY,MAAA,WAAW,GAAoC;AAC1D,IAAA,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK;AACzB,IAAA,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM;AAC3B,IAAA,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "9.1.0",
+  "version": "9.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -133,6 +133,7 @@
     "storybook": "^8.6.12",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^4.0.4",
+    "storybook-mock-date-decorator": "^2.0.6",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",

package/src/components/Icon/Icon.module.scss

@@ -417,3 +417,7 @@
   content: "\e959";
   @include fontProperties();
 }
+.icon-switch:before {
+  content: "\e95b";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -110,7 +110,8 @@ export enum Icons {
   Cable = "cable",
   Dashboard = "dashboard",
   FidoDevice = "fido-device",
-  Security = "security"
+  Security = "security",
+  Switch = "switch"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Layout/Card/Card.module.scss

@@ -0,0 +1,68 @@
+@use "src/functions" as *;
+
+.main {
+  border-radius: relativeToBaseFontSize(0.25);
+  min-width: relativeToBaseFontSize(18.5);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: relativeToBaseFontSize(0.5) relativeToBaseFontSize(1.5);
+  justify-content: space-between;
+  gap: relativeToBaseFontSize(0.5);
+  background-color: var(--color-primary100);
+
+  .title-left {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin: 0;
+      font-weight: 500;
+      max-width: 100%;
+      display: block;
+    }
+
+    .description {
+      margin: 0;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  .title-right {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: relativeToBaseFontSize(0.5);
+    white-space: nowrap;
+  }
+}
+
+.content {
+  padding: relativeToBaseFontSize(1) relativeToBaseFontSize(1.5);
+
+  &.grey {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &.white {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-blue-grey100);
+
+    &.without-header {
+      border-radius: relativeToBaseFontSize(0.25);
+    }
+
+    &.with-header {
+      border-top: none;
+      border-bottom-left-radius: relativeToBaseFontSize(0.25);
+      border-bottom-right-radius: relativeToBaseFontSize(0.25);
+    }
+  }
+}

package/src/components/Layout/Card/Card.tsx

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { HTMLAttributes, ReactElement } from "react";
+import { Typography } from "../../Typography/Typography";
+
+import classes from "./Card.module.scss";
+import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
+
+export interface CardHeaderInfo {}
+
+export type CardStyle = "grey" | "white";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  titleHeadingLevel?: number;
+  description?: string;
+  action?: ReactElement;
+  wrapHeaderText?: boolean;
+  headerContent?: ReactElement;
+  cardStyle?: CardStyle;
+  collapsed?: boolean;
+}
+
+export const CardComponent = ({
+  title,
+  titleHeadingLevel,
+  description,
+  action,
+  wrapHeaderText = false,
+  headerContent,
+  cardStyle = "grey",
+  collapsed = false,
+  children,
+  ...rest
+}: CardProps) => {
+  const headerPresent = Boolean(title || description || action || headerContent);
+  return (
+    <div className={classes["main"]} {...rest}>
+      {headerPresent && (
+        <div className={classes["header"]}>
+          {headerContent}
+          {(title || description || action) && (
+            <>
+              {(title || description) && (
+                <div className={classes["title-left"]}>
+                  {title && (
+                    <Typography
+                      data-testid={"card-title"}
+                      className={classes["title"]}
+                      variant={"body"}
+                      role={titleHeadingLevel ? "heading" : undefined}
+                      aria-level={titleHeadingLevel}
+                    >
+                      {wrapHeaderText ? title : <TextEllipsis>{title}</TextEllipsis>}
+                    </Typography>
+                  )}
+                  {description && (
+                    <Typography
+                      data-testid={"card-description"}
+                      className={classes["description"]}
+                      variant="sub-text"
+                      spacing={{ margin: 0 }}
+                    >
+                      {wrapHeaderText ? description : <TextEllipsis>{description}</TextEllipsis>}
+                    </Typography>
+                  )}
+                </div>
+              )}
+              {action && (
+                <div data-testid={"card-action"} className={classes["title-right"]}>
+                  {action}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+      {!collapsed && (
+        <div
+          data-testid={"card-content"}
+          className={[
+            classes["content"],
+            classes[cardStyle],
+            classes[headerPresent ? "with-header" : "without-header"]
+          ].join(" ")}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Card = CardComponent;

package/src/components/admin/layout/LeftNav/LeftNav.module.scss

@@ -35,8 +35,9 @@
     0px 3px 4px 0px rgba(1, 5, 50, 0.02),
     0px 1px 5px 0px rgba(1, 5, 50, 0.04);
 
+  transition: transform 200ms ease-in-out;
+
   @include mixins.breakpoint("max", "medium") {
-    transition: transform 200ms ease-in-out;
     box-shadow: 0 30px 50px #00000029;
     transform: translateX(-110%);
 
@@ -49,4 +50,15 @@
       transform: translateX(0);
     }
   }
+
+  @include mixins.breakpoint("min", "medium") {
+    &.sidenavbar--collapsed {
+      box-shadow: 0 30px 50px #00000029;
+      transform: translateX(-110%);
+
+      &.hidden {
+        visibility: hidden;
+      }
+    }
+  }
 }

package/src/components/admin/layout/LeftNav/LeftNav.tsx

@@ -24,9 +24,12 @@ import classes from "./LeftNav.module.scss";
 import { MenuItem } from "./LeftNav.interfaces";
 import { LeftNavItem } from "./LeftNavItem/LeftNavItem";
 import { useRefItems } from "./useRefItems";
+import { ScreenSize } from "../../../../variables";
+import { useScreenSize } from "../../../../hooks/useScreenSize";
 
 export interface Props extends ComponentPropsWithRef<"nav"> {
   isSideMenuOpen?: boolean;
+  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
   items: MenuItem[];
   navigate: (path: string) => void;
   onItemClick?: (path?: string, button?: boolean) => void;
@@ -34,10 +37,11 @@ export interface Props extends ComponentPropsWithRef<"nav"> {
 }
 
 const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { isSideMenuOpen, items, navigate, onItemClick, marginTop, ...rest },
+  { isSideMenuOpen, onScreenSizeChange, items, navigate, onItemClick, marginTop, ...rest },
   ref
 ) => {
   const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
+  useScreenSize({ onScreenSizeChange });
   const refItems = useRefItems({ items });
 
   const onSideNavbarTransitionEnd: React.TransitionEventHandler<HTMLUListElement> = () => {
@@ -67,7 +71,7 @@ const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
     <nav {...rest} ref={ref}>
       <ul
         style={{ "--margin-top": marginTop } as CSSProperties}
-        className={`${classes["sidenavbar"]} ${isSideMenuOpen ? classes["open"] : ""} ${
+        className={`${classes["sidenavbar"]} ${!isSideMenuOpen ? classes["sidenavbar--collapsed"] : ""} ${isSideMenuOpen ? classes["open"] : ""} ${
           !isSideNavbarVisible ? classes["hidden"] : ""
         }`}
         onTransitionEnd={onSideNavbarTransitionEnd}

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.module.scss

@@ -58,6 +58,10 @@
       }
     }
   }
+
+  .menu-button-wrapper .menu-link {
+    padding-left: 2.5rem;
+  }
 }
 
 .menu-list {
@@ -161,8 +165,9 @@
 .menu-list-item {
   position: relative;
 
-  .menu-item {
+  a.menu-item {
     padding: 0.75rem 1rem;
+    color: var(--color-blue-grey900);
   }
 
   a.menu-item-active {

package/src/components/admin/layout/LeftNav/LeftNavItem/LinkLeftNavItem.tsx

@@ -64,7 +64,6 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
         <Link
           ref={ref as Ref<HTMLAnchorElement>}
           onKeyDown={onKeyPressNavigation}
-          onClick={onLinkClickHandler}
           data-testid={`left-nav-item-${item.key}`}
           aria-current={item.active ? "page" : false}
           aria-disabled={item.disabled}

package/src/components/admin/layout/LeftNav/useRefItems.ts

@@ -66,7 +66,7 @@ export const useRefItems = ({ items }: Props) => {
         currentNextItem = nextItem;
       }
 
-      const hasChildren = currentItem.items?.filter(item => !item.disabled) !== undefined;
+      const hasChildren = (currentItem.items?.filter(item => !item.disabled) ?? []).length !== 0;
       if (hasChildren) {
         itemsMap[currentItem.key] = {
           item: currentItem,

package/src/font/icomoon.svg

@@ -98,5 +98,6 @@
 <glyph unicode="&#xe958;" glyph-name="fido-device" d="M995.681 762.379c42.496-42.502 36.477-117.432-13.457-167.363l-452.042-452.040c-19.971-19.977-49.944-22.384-66.944-5.384l-15.388 15.42-216.983-217.012-230.865 230.868 216.983 217.012-15.394 15.359c-17 17.001-14.592 46.975 5.382 66.945l452.043 452.043c49.928 49.931 124.862 55.955 167.365 13.453l169.3-169.301zM203.528 216.481l-46.173 46.176-36.164-36.162 46.173-46.176 36.164 36.162zM326.655 93.357l-46.173 46.17-36.163-36.162 46.173-46.17 36.163 36.162zM908.932 704.475l-140.457 140.456c-24.967 24.966-65.444 24.966-90.411 0s-24.967-65.443 0-90.408l140.457-140.456c24.967-24.966 65.444-24.966 90.411 0 24.961 24.965 24.961 65.443 0 90.408z" />
 <glyph unicode="&#xe959;" glyph-name="security" d="M512 960l-418.909-186.182v-279.273c0-258.327 178.734-499.898 418.909-558.545 240.174 58.647 418.909 300.218 418.909 558.545v279.273l-418.909 186.182zM512 448.467h325.818c-24.669-191.768-152.669-362.589-325.818-416.116v415.65h-325.818v265.309l325.818 144.756v-409.6z" />
 <glyph unicode="&#xe95a;" glyph-name="arrow-right" d="M511.997 960l-90.237-90.24 357.116-357.758h-778.874v-127.998h778.874l-357.116-357.764 90.237-90.24 512.001 512.001-512.001 511.999z" />
+<glyph unicode="&#xe95b;" glyph-name="switch" horiz-adv-x="1365" d="M316.050 521.142l-291.84-292.571 291.84-292.57v219.428h512.735v146.286h-512.735v219.429zM1340.79 667.428l-291.84 292.571v-219.43h-512.735v-146.286h512.735v-219.429l291.84 292.571z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>