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

package/esm/core/TabNav/TabNav.stories.js

@@ -0,0 +1,306 @@
+import TabNav from '.';
+import TabNavItem from './TabNavItem';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/TabNav',
+  component: TabNav
+};
+export const TabNavDefault = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    })]
+  }),
+  name: 'TabNav Default'
+};
+export const TabNavColors = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    underlineColor: "red",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    })]
+  }),
+  name: 'TabNav colors'
+};
+export const TabNavVertical = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    vertical: true,
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    })]
+  }),
+  name: 'TabNav vertical'
+};
+export const TabNavValue = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere",
+      displayText: "Bare for visning"
+    })]
+  }),
+  name: 'TabNav value'
+};
+export const TabNavWithButton = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    actions: /*#__PURE__*/_jsx(Button, {
+      highlight: true,
+      children: "Press"
+    }),
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere",
+      displayText: "Bare for visning"
+    })]
+  }),
+  name: 'TabNav with button'
+};
+export const TabNavWithSelect = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alla"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Kosedyr"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Bakd\xF8r"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alle",
+      isSelect: true,
+      displayText: "Select open",
+      selectItems: [{
+        displayText: 'hello',
+        value: '1'
+      }, {
+        indent: 1,
+        displayText: 'very long text to test how it breaks',
+        value: '24'
+      }, {
+        indent: 2,
+        displayText: 'yo',
+        value: '2'
+      }, {
+        displayText: 'link somewhere',
+        value: '251',
+        onClick: () => console.log('clicked')
+      }]
+    })]
+  }),
+  name: 'TabNav with select'
+};
+export const TabNavWithOneDisabledValue = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alla"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Kosedyr"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Bakd\xF8r"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alle",
+      isSelect: true,
+      displayText: "Select open",
+      selectItems: [{
+        displayText: 'No values here',
+        value: '1',
+        disabled: true
+      }, {
+        displayText: 'Link somewhere',
+        value: '2',
+        onClick: () => console.log('clicked')
+      }]
+    })]
+  }),
+  name: 'TabNav with one disabled value'
+};
+export const TabNavWithBreakpoint = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    breakpoint: 4000,
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alla"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Kosedyr"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Bakd\xF8r"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alle"
+    })]
+  }),
+  name: 'TabNav with breakpoint'
+};
+export const TabNavWithSelectAndLoadsItems = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alla"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Kosedyr"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Bakd\xF8r"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alle",
+      isSelect: true,
+      displayText: "Select open",
+      selectItems: [{
+        displayText: 'hello',
+        value: '1'
+      }, {
+        displayText: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+        value: '31'
+      }, {
+        displayText: 'hello1',
+        value: '11'
+      }, {
+        displayText: 'hello2',
+        value: '12'
+      }, {
+        displayText: 'hello3',
+        value: '13'
+      }, {
+        displayText: 'hello4',
+        value: '14'
+      }, {
+        displayText: 'hello5',
+        value: '15'
+      }, {
+        displayText: 'hello6',
+        value: '16'
+      }, {
+        displayText: 'hello7',
+        value: '17'
+      }, {
+        displayText: 'hello8',
+        value: '18'
+      }, {
+        displayText: 'yo',
+        value: '2'
+      }, {
+        displayText: 'yo1',
+        value: '21'
+      }, {
+        displayText: 'yo2',
+        value: '22'
+      }, {
+        displayText: 'yo3',
+        value: '23'
+      }, {
+        displayText: 'yo4',
+        value: '24'
+      }, {
+        displayText: 'yo5',
+        value: '25'
+      }, {
+        displayText: 'yo6',
+        value: '26'
+      }, {
+        displayText: 'yo7',
+        value: '27'
+      }, {
+        displayText: 'yo8',
+        value: '28'
+      }, {
+        displayText: 'yo9',
+        value: '29'
+      }, {
+        displayText: 'very long text to test how it breaks should lorem ipsum whatever dont know how it goes',
+        value: '34'
+      }, {
+        displayText: 'link somewhere',
+        value: '299',
+        onClick: () => console.log('clicked')
+      }]
+    })]
+  }),
+  name: 'TabNav with select and loads items'
+};
+export const TabNavWithManyOptions = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    actions: /*#__PURE__*/_jsx(Button, {
+      highlight: true,
+      children: "Press"
+    }),
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Alla"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Kosedyr"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Bakd\xF8r"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Velkomstmatte"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Katteluke"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Vinduer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Herregud"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Test"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Loft"
+    })]
+  }),
+  name: 'TabNav with many options'
+};
+export const TabNavVerticalWithButton = {
+  render: () => /*#__PURE__*/_jsxs(TabNav, {
+    actions: /*#__PURE__*/_jsx(Button, {
+      highlight: true,
+      children: "Press"
+    }),
+    onChange: e => console.log('changed to', e),
+    value: "Eiere",
+    vertical: true,
+    children: [/*#__PURE__*/_jsx(TabNavItem, {
+      value: "D\xF8rer"
+    }), /*#__PURE__*/_jsx(TabNavItem, {
+      value: "Eiere",
+      displayText: "Bare for visning"
+    })]
+  }),
+  name: 'TabNav vertical with button'
+};

package/esm/core/TabNav/TabNavItem/index.js

@@ -8,7 +8,6 @@ import { useContainerDimensions } from '../utils/useContainerDimensions';
 import { TabNavItemWrapper, styles, SelectChildrenWrapper, SelectOption } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const TabNavItem = ({
   value,
   displayText,
@@ -40,7 +39,6 @@ const TabNavItem = ({
       if (node && node.contains(e.target)) return;
       setOpen(false);
     };
-
     open ? document.addEventListener('mousedown', handleClickOutside) : document.removeEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
@@ -49,14 +47,13 @@ const TabNavItem = ({
   useEffect(() => {
     if (width) setWidth({
       [value]: width
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width]);
-
   const onSelectClick = value => {
     setActive(value);
     setOpen(false);
   };
-
   return _jsxs(Fragment, {
     children: [_jsxs(TabNavItemWrapper, {
       ref: ref,
@@ -100,6 +97,5 @@ const TabNavItem = ({
     })]
   });
 };
-
 export { TabNavItem };
 export default TabNavItem;

package/esm/core/TabNav/TabNavItem/styles.js

@@ -1,12 +1,10 @@
 import _styled from "@emotion/styled/base";
 import { css } from '@emotion/react';
-
 const calculateIndent = indent => {
   const BASE = 8;
   const INDENT_PADDING_LI = indent === 1 ? BASE * 3 : (indent + 2) * BASE;
   return /*#__PURE__*/css("padding-left:", INDENT_PADDING_LI, "px!important;" + (process.env.NODE_ENV === "production" ? "" : ";label:calculateIndent;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9UYWJOYXYvVGFiTmF2SXRlbS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5jb25zdCBjYWxjdWxhdGVJbmRlbnQgPSAoaW5kZW50OiBudW1iZXIpID0+IHtcbiAgY29uc3QgQkFTRSA9IDhcbiAgY29uc3QgSU5ERU5UX1BBRERJTkdfTEkgPSBpbmRlbnQgPT09IDEgPyBCQVNFICogMyA6IChpbmRlbnQgKyAyKSAqIEJBU0VcblxuICByZXR1cm4gY3NzYFxuICAgIHBhZGRpbmctbGVmdDogJHtJTkRFTlRfUEFERElOR19MSX1weCAhaW1wb3J0YW50O1xuICBgXG59XG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC51bChcbiAgKHByb3BzOiB7XG4gICAgYm90dG9tOiBudW1iZXJcbiAgICBsZWZ0OiBudW1iZXJcbiAgICBtaW5XaWR0aDogbnVtYmVyXG4gICAgdGhlbWU6IElBcHBUaGVtZVxuICB9KSA9PiBjc3NgXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDM7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgIGJveC1zaGFkb3c6IDBweCAxMHB4IDE1cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1pbi13aWR0aDogJHtwcm9wcy5taW5XaWR0aH1weDtcbiAgICBtYXgtd2lkdGg6IDM1MHB4O1xuXG4gICAgbWF4LWhlaWdodDogNDB2aDtcbiAgICBvdmVyZmxvdy15OiBhdXRvO1xuICAgIG92ZXJmbG93LXg6IGhpZGRlbjtcblxuICAgICYgPiBsaSB7XG4gICAgICB3b3JkLWJyZWFrOiBicmVhay1hbGw7XG4gICAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAxZW0pO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgbGlzdC1zdHlsZTogbm9uZTtcbiAgICAgIHBhZGRpbmc6IDAuNWVtO1xuICAgICAgcGFkZGluZy1sZWZ0OiAxZW07XG4gICAgICBib3JkZXItdG9wOiAxcHggc29saWQgJHtwcm9wcy50aGVtZS5ib3JkZXJ9O1xuICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAxNTBtcyBlYXNlLWluLW91dDtcblxuICAgICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgYm9yZGVyLXRvcDogbm9uZTtcbiAgICAgIH1cblxuICAgICAgJjpob3ZlcixcbiAgICAgICY6Zm9jdXMge1xuICAgICAgICBiYWNrZ3JvdW5kOiAke3Byb3BzLnRoZW1lLmJnTGlnaHR9O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0T3B0aW9uID0gc3R5bGVkLmxpKFxuICAoe1xuICAgIGRpc2FibGVkLFxuICAgIGJvbGQsXG4gICAgaW5kZW50LFxuICB9OiB7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuXG4gICAgYm9sZD86IGJvb2xlYW5cbiAgICBpbmRlbnQ/OiBudW1iZXJcbiAgfSkgPT4gY3NzYFxuICAgIHBhZGRpbmc6IDA7XG4gICAgcGFkZGluZy1sZWZ0OiA4cHg7XG4gICAgcGFkZGluZy1yaWdodDogOHB4O1xuICAgIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgd2lkdGg6IDEwMCU7XG5cbiAgICBvcGFjaXR5OiAke2Rpc2FibGVkID8gMC41IDogMX07XG5cbiAgICBmb250LXdlaWdodDogJHtib2xkID8gNjAwIDogNDAwfTtcblxuICAgICR7aW5kZW50ICYmIGNhbGN1bGF0ZUluZGVudChpbmRlbnQpfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIGFjdGl2ZTogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICB9XG4gICAgYCxcbn1cbiJdfQ== */");
 };
-
 export const TabNavItemWrapper = _styled("button", process.env.NODE_ENV === "production" ? {
   target: "e169sb432"
 } : {

package/esm/core/TabNav/index.js

@@ -9,7 +9,6 @@ import Link from '../Link';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const TabNav = ({
   value,
   children,
@@ -24,46 +23,45 @@ const TabNav = ({
   breakpoint
 }) => {
   const isMobile = useIsMobile(breakpoint);
-  const theme = useTheme(); // Container dimensions
+  const theme = useTheme();
 
+  // Container dimensions
   const ref = React.useRef(null);
   const {
     width: containerWidth
-  } = useContainerDimensions(ref); // Button dimensions
+  } = useContainerDimensions(ref);
 
+  // Button dimensions
   const buttonRef = React.useRef(null);
   const {
     width: actionsWidth
   } = useContainerDimensions(buttonRef);
   const values = React.Children.map(children, child => child !== null && child.props)?.filter(Boolean) || [];
-
   const displayNameFromValue = value => {
     const item = values.find(item => item.value === value);
     return item?.displayText || String(value);
   };
-
   const valueWithSelectItemIndex = values.findIndex(item => item.selectItems?.length);
-
   const listOfSelectedItems = items => {
     if (!items) return [];
-    return items.map(prop => ({ ...prop
+    return items.map(prop => ({
+      ...prop
     }));
   };
-
   if (valueWithSelectItemIndex > -1) {
-    const selectedItems = values[valueWithSelectItemIndex].selectItems; // If we have no actual selectedItems, dont show any label while in the mobile/dropdown version
+    const selectedItems = values[valueWithSelectItemIndex].selectItems;
 
+    // If we have no actual selectedItems, dont show any label while in the mobile/dropdown version
     const isEverySelectedItemDisabledOrLink = Number(selectedItems?.length) >= 1 && selectedItems?.every(item => item.disabled || item.onClick);
-
     if (isEverySelectedItemDisabledOrLink) {
-      const itemsWithOnClick = selectedItems?.filter(item => item.onClick) || []; // Remove valueWithSelectItemIndex from the values array, but add on itemsWithOnClick in the list
+      const itemsWithOnClick = selectedItems?.filter(item => item.onClick) || [];
 
+      // Remove valueWithSelectItemIndex from the values array, but add on itemsWithOnClick in the list
       values.splice(valueWithSelectItemIndex, 1, ...listOfSelectedItems(itemsWithOnClick));
     } else {
       values.splice(valueWithSelectItemIndex + 1, 0, ...listOfSelectedItems(selectedItems));
     }
   }
-
   return _jsx(TabContextProvider, {
     onChange: onChange,
     value: value || values?.[0].value,
@@ -75,6 +73,7 @@ const TabNav = ({
       }) => {
         if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
           // Render dropdown instead of tabs
+
           return _jsxs(SelectWrapper, {
             children: [_jsx(Select, {
               input: true,
@@ -109,7 +108,6 @@ const TabNav = ({
             }), actions]
           });
         }
-
         return _jsxs(TabNavWrapper, {
           ref: ref,
           theme: theme,
@@ -124,6 +122,5 @@ const TabNav = ({
     })
   });
 };
-
 export { TabNav };
 export default TabNav;

package/esm/core/TabNav/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 TabNavWrapper = _styled("div", process.env.NODE_ENV === "production" ? {

package/esm/core/TabNav/utils/useContainerDimensions.js

@@ -16,7 +16,6 @@ export const useContainerDimensions = ref => {
   }), [ref]);
   useEffect(() => {
     const handleResize = () => setDimensions(getDimensions());
-
     if (ref.current) setDimensions(getDimensions());
     window.addEventListener('resize', handleResize);
     return () => {

package/esm/core/Table/Cell.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const Cell = ({
   startAlign,
   centerAlign,
@@ -15,10 +14,10 @@ const Cell = ({
   ...props
 }) => {
   const Tag = header ? 'th' : 'td';
-  return _jsx(Tag, { ...props,
+  return _jsx(Tag, {
+    ...props,
     css: () => [styles.cell_defaults, startAlign && styles.cell_left, centerAlign && styles.cell_center, endAlign && styles.cell_right, truncate && styles.cell_truncate, wrap && styles.cell_wrap],
     children: children
   });
 };
-
 export default Cell;

package/esm/core/Table/Row.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Row = ({
   children,
   danger,
@@ -13,10 +12,10 @@ const Row = ({
   border,
   ...props
 }) => {
-  return /*#__PURE__*/_jsx("tr", { ...props,
+  return /*#__PURE__*/_jsx("tr", {
+    ...props,
     css: theme => [border && styles.row_border(theme), danger && styles.row_danger(theme), info && styles.row_info(theme), muted && styles.row_muted(theme), notice && styles.row_notice(theme), success && styles.row_success(theme), warning && styles.row_warning(theme)],
     children: children
   });
 };
-
 export default Row;

package/esm/core/Table/Table.stories.js

@@ -0,0 +1,83 @@
+import Table from '.';
+import Cell from './Cell';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/Table',
+  component: Table
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsxs(Table, {
+    children: [/*#__PURE__*/_jsx("thead", {
+      children: /*#__PURE__*/_jsxs(Row, {
+        children: [/*#__PURE__*/_jsx(Cell, {
+          header: true,
+          children: "Header 1"
+        }), /*#__PURE__*/_jsx(Cell, {
+          header: true,
+          children: "Header 2"
+        }), /*#__PURE__*/_jsx(Cell, {
+          header: true,
+          children: "Header 3"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("tbody", {
+      children: /*#__PURE__*/_jsxs(Row, {
+        children: [/*#__PURE__*/_jsx(Cell, {
+          centerAlign: true,
+          children: "Content"
+        }), /*#__PURE__*/_jsx(Cell, {
+          children: "Content"
+        }), /*#__PURE__*/_jsx(Cell, {
+          children: "Content"
+        })]
+      })
+    })]
+  }),
+  name: 'Default'
+};
+export const SeveralArgsTable = {
+  render: () => /*#__PURE__*/_jsxs(Table, {
+    children: [/*#__PURE__*/_jsx("thead", {
+      children: /*#__PURE__*/_jsxs(Row, {
+        border: true,
+        children: [/*#__PURE__*/_jsx(Cell, {
+          header: true,
+          children: "Header 1"
+        }), /*#__PURE__*/_jsx(Cell, {
+          header: true,
+          children: "Header 2"
+        }), /*#__PURE__*/_jsx(Cell, {
+          header: true,
+          children: "Header 3"
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("tbody", {
+      children: [/*#__PURE__*/_jsxs(Row, {
+        danger: true,
+        children: [/*#__PURE__*/_jsx(Cell, {
+          startAlign: true,
+          children: "Content"
+        }), /*#__PURE__*/_jsx(Cell, {
+          centerAlign: true,
+          children: "Content"
+        }), /*#__PURE__*/_jsx(Cell, {
+          endAlign: true,
+          children: "Content"
+        })]
+      }), /*#__PURE__*/_jsxs(Row, {
+        success: true,
+        children: [/*#__PURE__*/_jsx(Cell, {
+          truncate: true,
+          children: "Alot of content goes here, is it to much??"
+        }), /*#__PURE__*/_jsx(Cell, {
+          children: "Content"
+        }), /*#__PURE__*/_jsx(Cell, {
+          children: "Content"
+        })]
+      })]
+    })]
+  }),
+  name: 'Several ArgsTable'
+};

package/esm/core/Table/index.js

@@ -3,12 +3,12 @@ import { TableWrapper } from './styles';
 import Cell from './Cell';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
-
-const Table = props => {
+function Table(props) {
   return /*#__PURE__*/_jsx(TableWrapper, {
     children: props.children
   });
-};
-
+}
 export { Cell, Row };
+Table.Cell = Cell;
+Table.Row = Row;
 export default Table;

package/esm/core/Table/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';
 export const TableWrapper = _styled("table", process.env.NODE_ENV === "production" ? {
   target: "e1hlre5g1"