@bbl-digital/snorre 4.0.0-beta.4 → 4.0.0-beta.5

package/lib/layout/Menu/Sidemenu.stories.js

@@ -0,0 +1,323 @@
+import Menu from '.';
+import MenuTop from './MenuTop';
+import MainMenu from './MainMenu';
+import AppPicker from './AppPicker';
+import SecondaryMenu from './SecondaryMenu';
+import MenuItem from './MenuItem';
+import SecondaryMenuItem from './SecondaryMenuItem';
+import MenuSpacer from './MenuSpacer';
+import IconProfile from '../../icons/General/IconProfile';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Layout/Menu',
+  component: Menu,
+  parameters: {
+    docs: {
+      story: {
+        height: '100vh'
+      }
+    }
+  }
+};
+export const MenuDefault = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: true,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: false,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        lightTheme: true,
+        small: false,
+        selected: true,
+        label: "App 1",
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        }),
+        onClick: () => console.log('picker click')
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        lightTheme: true,
+        small: false,
+        label: "App 2",
+        icon: /*#__PURE__*/_jsx(IconProfile, {}),
+        onClick: () => console.log('picker click')
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: false,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 3 click'),
+          small: false,
+          label: "Item 3",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 4 click'),
+          small: false,
+          label: "Item 4",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 5 click'),
+          small: false,
+          label: "Item 5",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 6 click'),
+          small: false,
+          label: "Item 6",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsxs(SecondaryMenu, {
+        small: false,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: [/*#__PURE__*/_jsx(SecondaryMenuItem, {
+          href: "#",
+          label: "Link in new tab",
+          target: "_blank",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        }), /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          href: "#",
+          label: "Link in same tab",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        })]
+      })]
+    })]
+  }),
+  name: 'Menu'
+};
+export const Collapsed = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: false,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: true,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        lightTheme: false,
+        small: true,
+        selected: true,
+        label: "App 1",
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        })
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        label: "",
+        lightTheme: false,
+        small: true,
+        icon: /*#__PURE__*/_jsx(IconProfile, {})
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: true,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsx(SecondaryMenu, {
+        small: true,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          href: "#",
+          label: "Link",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        })
+      })]
+    })]
+  }),
+  name: 'Collapsed'
+};
+export const LightTheme = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: true,
+    lightTheme: true,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: false,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        small: false,
+        lightTheme: true,
+        label: "Portalen",
+        icon: /*#__PURE__*/_jsx(IconProfile, {})
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        small: false,
+        lightTheme: true,
+        label: "Min side",
+        selected: true,
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: false,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsx(SecondaryMenu, {
+        small: false,
+        lightTheme: true,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          lightTheme: true,
+          href: "#",
+          label: "Link",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "20px"
+          })
+        })
+      })]
+    })]
+  }),
+  name: 'Light theme'
+};
+export const LightThemeCollapsed = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: false,
+    lightTheme: true,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: true,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        label: "",
+        small: true,
+        lightTheme: true,
+        icon: /*#__PURE__*/_jsx(IconProfile, {}),
+        onClick: () => console.log('picker click')
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        small: true,
+        lightTheme: true,
+        selected: true,
+        label: "App 2",
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        }),
+        onClick: () => console.log('picker click')
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: true,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsx(SecondaryMenu, {
+        small: true,
+        lightTheme: true,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          lightTheme: true,
+          href: "#",
+          label: "Link",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        })
+      })]
+    })]
+  }),
+  name: 'Light theme collapsed'
+};

package/lib/layout/Menu/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Wrapper } from './styles';
 import { useTheme } from '@emotion/react';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Menu = ({
   lightTheme,
   open,
@@ -16,5 +15,4 @@ const Menu = ({
     children: children
   });
 };
-
 export default Menu;

package/lib/layout/Submenu/Submenu.stories.d.ts

@@ -0,0 +1,27 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const SubmenuDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Lighttheme: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const LightthemeIllustration: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NoItems: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NoItemsLight: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const CustomHeader: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Submenu.stories.d.ts.map

package/lib/layout/Submenu/Submenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Submenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Submenu/Submenu.stories.tsx"],"names":[],"mappings":";AAKA,wBAGS;AAET,eAAO,MAAM,cAAc;;;CAa1B,CAAA;AAED,eAAO,MAAM,UAAU;;;CAkBtB,CAAA;AAED,eAAO,MAAM,sBAAsB;;;CAsBlC,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAGxB,CAAA;AAED,eAAO,MAAM,YAAY;;;CA8BxB,CAAA"}

package/lib/layout/Submenu/Submenu.stories.js

@@ -0,0 +1,94 @@
+import Submenu from '.';
+import SubmenuItem from './SubmenuItem';
+import IllustrationMySitePiggyBank from '../../illustrations/MySite/IllustrationMySitePiggyBank';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Layout/Submenu',
+  component: Submenu
+};
+export const SubmenuDefault = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    header: "Header",
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "item 1",
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "item 2",
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Submenu'
+};
+export const Lighttheme = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    lightTheme: true,
+    header: "Header",
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 1",
+      lightTheme: true,
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 2",
+      lightTheme: true,
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Lighttheme'
+};
+export const LightthemeIllustration = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    lightTheme: true,
+    header: "Header",
+    illustration: /*#__PURE__*/_jsx(IllustrationMySitePiggyBank, {}),
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 1",
+      lightTheme: true,
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 2",
+      lightTheme: true,
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Lighttheme - illustration'
+};
+export const NoItems = {
+  render: () => /*#__PURE__*/_jsx(Submenu, {
+    header: "Just a header"
+  }),
+  name: 'No items'
+};
+export const NoItemsLight = {
+  render: () => /*#__PURE__*/_jsx(Submenu, {
+    lightTheme: true,
+    header: "Just a header"
+  }),
+  name: 'No items light'
+};
+export const CustomHeader = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    lightTheme: true,
+    customHeader: /*#__PURE__*/_jsx("p", {
+      style: {
+        zIndex: 1,
+        margin: 0
+      },
+      children: "header"
+    }),
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 1",
+      lightTheme: true,
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 2",
+      lightTheme: true,
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Custom header'
+};

package/lib/layout/Submenu/SubmenuItem/index.js

@@ -8,7 +8,6 @@ import { useIsMobile } from '../../../hooks/useIsMobile';
 import ListItem from '../../../core/List/Item';
 import Button from '../../../core/Button';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const SubmenuItem = ({
   lightTheme,
   active,
@@ -20,24 +19,19 @@ const SubmenuItem = ({
 }) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
-
   const handleOptionClick = () => {
     onClick && onClick();
     onChange && onChange();
   };
-
   const labelColor = lightTheme ? theme.secondaryDarkText : !active ? theme.submenuTextColor : theme.submenuTextColorActive;
-
   if (showActiveitemLabel) {
     if (active) {
       return _jsx(Fragment, {
         children: label
       });
     }
-
     return null;
   }
-
   return !isMobile ? _jsx(Button, {
     nostyle: true,
     onClick: onClick,
@@ -69,5 +63,4 @@ const SubmenuItem = ({
     })
   });
 };
-
 export default SubmenuItem;

package/lib/layout/Submenu/SubmenuItem/styles.js

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css, keyframes } from '@emotion/react';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "egkzt9c0"
@@ -9,7 +7,6 @@ export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "egkzt9c0",
   label: "Wrapper"
 })(props => /*#__PURE__*/css("padding:0.65em 1em;border-radius:", props.lightTheme ? '19px' : '7px', ";border:1px solid transparent;transition:border-color 0.1s ease-in-out;background:", props.active ? props.background : 'transparent', ";box-shadow:", props.active ? '0 2px 4px 0 rgba(9, 28, 68, 0.2)' : 'none', ";&.submenu-item-enter{animation:", fadeIn(props.background), " 0.2s;}&.submenu-item-exit{animation:", fadeOut(props.background), " 0.2s;}&>span{font-size:14px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvU3VibWVudS9TdWJtZW51SXRlbS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXFCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvU3VibWVudS9TdWJtZW51SXRlbS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgICBwYWRkaW5nOiAwLjY1ZW0gMWVtO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMubGlnaHRUaGVtZSA/ICcxOXB4JyA6ICc3cHgnfTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4xcyBlYXNlLWluLW91dDtcblxuICAgIGJhY2tncm91bmQ6ICR7cHJvcHMuYWN0aXZlID8gcHJvcHMuYmFja2dyb3VuZCA6ICd0cmFuc3BhcmVudCd9O1xuICAgIGJveC1zaGFkb3c6ICR7cHJvcHMuYWN0aXZlID8gJzAgMnB4IDRweCAwIHJnYmEoOSwgMjgsIDY4LCAwLjIpJyA6ICdub25lJ307XG5cbiAgICAmLnN1Ym1lbnUtaXRlbS1lbnRlciB7XG4gICAgICBhbmltYXRpb246ICR7ZmFkZUluKHByb3BzLmJhY2tncm91bmQpfSAwLjJzO1xuICAgIH1cbiAgICAmLnN1Ym1lbnUtaXRlbS1leGl0IHtcbiAgICAgIGFuaW1hdGlvbjogJHtmYWRlT3V0KHByb3BzLmJhY2tncm91bmQpfSAwLjJzO1xuICAgIH1cblxuICAgICYgPiBzcGFuIHtcbiAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICB9XG4gIGBcbilcblxuY29uc3QgZmFkZUluID0gKGJhY2tncm91bmQ6IHN0cmluZykgPT4ga2V5ZnJhbWVzYFxuICAwJSB7IFxuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gIH1cbiAgMTAwJSB7IFxuICAgIGJveC1zaGFkb3c6IDAgMnB4IDRweCAwIHJnYmEoOSwgMjgsIDY4LCAwLjIpO1xuICAgIGJhY2tncm91bmQ6ICR7YmFja2dyb3VuZH07XG4gIH1cbmBcblxuY29uc3QgZmFkZU91dCA9IChiYWNrZ3JvdW5kOiBzdHJpbmcpID0+IGtleWZyYW1lc2BcbiAgMCUgeyBcbiAgICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDksIDI4LCA2OCwgMC4yKTtcbiAgICBiYWNrZ3JvdW5kOiAke2JhY2tncm91bmR9O1xuICB9XG4gIDEwMCUgeyBcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBvcHRpb25CdXR0b24gPSBjc3NgXG4gIHBhZGRpbmctbGVmdDogOHB4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmV4cG9ydCBjb25zdCBGb2N1c1N0YXRlID0gKGNvbG9yOiBzdHJpbmcpID0+IGNzc2BcbiAgJjpmb2N1cyB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGRpdiB7XG4gICAgICBib3JkZXItY29sb3I6ICR7Y29sb3J9O1xuICAgIH1cbiAgfVxuYFxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvU3VibWVudS9TdWJtZW51SXRlbS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvU3VibWVudS9TdWJtZW51SXRlbS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiBhbnkpID0+IGNzc2BcbiAgICBwYWRkaW5nOiAwLjY1ZW0gMWVtO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMubGlnaHRUaGVtZSA/ICcxOXB4JyA6ICc3cHgnfTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4xcyBlYXNlLWluLW91dDtcblxuICAgIGJhY2tncm91bmQ6ICR7cHJvcHMuYWN0aXZlID8gcHJvcHMuYmFja2dyb3VuZCA6ICd0cmFuc3BhcmVudCd9O1xuICAgIGJveC1zaGFkb3c6ICR7cHJvcHMuYWN0aXZlID8gJzAgMnB4IDRweCAwIHJnYmEoOSwgMjgsIDY4LCAwLjIpJyA6ICdub25lJ307XG5cbiAgICAmLnN1Ym1lbnUtaXRlbS1lbnRlciB7XG4gICAgICBhbmltYXRpb246ICR7ZmFkZUluKHByb3BzLmJhY2tncm91bmQpfSAwLjJzO1xuICAgIH1cbiAgICAmLnN1Ym1lbnUtaXRlbS1leGl0IHtcbiAgICAgIGFuaW1hdGlvbjogJHtmYWRlT3V0KHByb3BzLmJhY2tncm91bmQpfSAwLjJzO1xuICAgIH1cblxuICAgICYgPiBzcGFuIHtcbiAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICB9XG4gIGBcbilcblxuY29uc3QgZmFkZUluID0gKGJhY2tncm91bmQ6IHN0cmluZykgPT4ga2V5ZnJhbWVzYFxuICAwJSB7IFxuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gIH1cbiAgMTAwJSB7IFxuICAgIGJveC1zaGFkb3c6IDAgMnB4IDRweCAwIHJnYmEoOSwgMjgsIDY4LCAwLjIpO1xuICAgIGJhY2tncm91bmQ6ICR7YmFja2dyb3VuZH07XG4gIH1cbmBcblxuY29uc3QgZmFkZU91dCA9IChiYWNrZ3JvdW5kOiBzdHJpbmcpID0+IGtleWZyYW1lc2BcbiAgMCUgeyBcbiAgICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDksIDI4LCA2OCwgMC4yKTtcbiAgICBiYWNrZ3JvdW5kOiAke2JhY2tncm91bmR9O1xuICB9XG4gIDEwMCUgeyBcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBvcHRpb25CdXR0b24gPSBjc3NgXG4gIHBhZGRpbmctbGVmdDogOHB4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmV4cG9ydCBjb25zdCBGb2N1c1N0YXRlID0gKGNvbG9yOiBzdHJpbmcpID0+IGNzc2BcbiAgJjpmb2N1cyB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGRpdiB7XG4gICAgICBib3JkZXItY29sb3I6ICR7Y29sb3J9O1xuICAgIH1cbiAgfVxuYFxuIl19 */");
-
 const fadeIn = background => keyframes`
   0% { 
     background: transparent;
@@ -20,7 +17,6 @@ const fadeIn = background => keyframes`
     background: ${background};
   }
 `;
-
 const fadeOut = background => keyframes`
   0% { 
     box-shadow: 0 2px 4px 0 rgba(9, 28, 68, 0.2);
@@ -31,7 +27,6 @@ const fadeOut = background => keyframes`
     box-shadow: none;
   }
 `;
-
 export const optionButton = process.env.NODE_ENV === "production" ? {
   name: "m3111f",
   styles: "padding-left:8px;justify-content:flex-start;height:100%;width:100%"

package/lib/layout/Submenu/SubmenuLightThemeBg/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SubmenuLightThemeBg = ({
   bgColor
 }) => {
@@ -44,5 +43,4 @@ const SubmenuLightThemeBg = ({
     })]
   });
 };
-
 export default SubmenuLightThemeBg;

package/lib/layout/Submenu/index.js

@@ -10,7 +10,6 @@ import IconChevronDown from '../../icons/General/IconChevronDown';
 import SubmenuLightThemeBg from './SubmenuLightThemeBg';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Submenu = ({
   lightTheme,
   header,
@@ -26,30 +25,24 @@ const Submenu = ({
   useEffect(() => {
     const handleClickOutside = e => {
       const node = ref.current;
-
       if (node && node.contains(e.target)) {
         return;
       }
-
       toggleOpen(false);
     };
-
     if (open) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       toggleOpen(false);
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [open, ref]);
-
   const handleClick = () => {
     toggleOpen(false);
   };
-
   return _jsxs("div", {
     ref: ref,
     css: theme => [styles.default, lightTheme ? styles.lightTheme(theme) : styles.darkTheme(theme, hasChildren ? '1em' : '2em')],
@@ -66,7 +59,6 @@ const Submenu = ({
           if (!child) {
             return null;
           }
-
           return /*#__PURE__*/React.cloneElement(child, {
             key
           });
@@ -85,7 +77,6 @@ const Submenu = ({
             if (!child) {
               return null;
             }
-
             return /*#__PURE__*/React.cloneElement(child, {
               showActiveitemLabel: true,
               key
@@ -100,7 +91,6 @@ const Submenu = ({
               if (!child) {
                 return null;
               }
-
               return /*#__PURE__*/React.cloneElement(child, {
                 onChange: handleClick,
                 key
@@ -121,5 +111,4 @@ const Submenu = ({
     })]
   });
 };
-
 export default Submenu;

package/lib/layout/Submenu/styles.js

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/react';
 import bp from '../../globals/styles/breakpoints';
 export const styles = {

package/lib/layout/Topbar/Topbar.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const TopbarDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithBgcolor: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Topbar.stories.d.ts.map

package/lib/layout/Topbar/Topbar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Topbar.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Topbar/Topbar.stories.tsx"],"names":[],"mappings":";AAGA,wBAUS;AAET,eAAO,MAAM,aAAa;;;CAGzB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAGvB,CAAA"}

package/lib/layout/Topbar/Topbar.stories.js

@@ -0,0 +1,23 @@
+import Topbar from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Layout/Topbar',
+  component: Topbar,
+  parameters: {
+    docs: {
+      story: {
+        inline: false
+      }
+    }
+  }
+};
+export const TopbarDefault = {
+  render: () => /*#__PURE__*/_jsx(Topbar, {}),
+  name: 'Topbar'
+};
+export const WithBgcolor = {
+  render: () => /*#__PURE__*/_jsx(Topbar, {
+    bgcolor: 'red'
+  }),
+  name: 'With bgcolor'
+};

package/lib/layout/Topbar/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { TopMenuWrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Topbar = ({
   sideBarWidth,
   bgcolor = 'white',
@@ -14,5 +13,4 @@ const Topbar = ({
     children: children
   });
 };
-
 export default Topbar;