@bbl-digital/snorre 3.1.57 → 3.1.59

package/esm/core/SimpleBarChart/index.js

@@ -6,7 +6,6 @@ import CustomTooltip from '../../shared/recharts/CustomTooltip';
 import { CustomLegend } from '../../shared/recharts/CustomLegend';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SimpleBarChart = ({
   height = '350px',
   width = 'auto',
@@ -35,7 +34,6 @@ const SimpleBarChart = ({
     if (tickFormatter) return tickFormatter;
     return formatAxisPrice;
   };
-
   return /*#__PURE__*/_jsx(BarChartContainer, {
     width: width && width,
     height: height && height,
@@ -95,5 +93,4 @@ const SimpleBarChart = ({
     })
   });
 };
-
 export default SimpleBarChart;

package/esm/core/SimpleBarChart/styles.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-export const BarChartContainer = _styled("div", process.env.NODE_ENV === "production" ? {
+export const BarChartContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1omf8wg0"
 } : {
   target: "e1omf8wg0",

package/esm/core/SimpleLineChart/SimpleLineChart.stories.js

@@ -0,0 +1,53 @@
+import SimpleLineChart from '.';
+import { getFormattedDate } from '../../utils/format';
+import { ddmmyyyy } from '../../utils/dates';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/SimpleLineChart',
+  component: SimpleLineChart
+};
+const simplelinechartdata = [{
+  date: getFormattedDate(new Date(2020, 1, 5), ddmmyyyy),
+  interest: 1.7
+}, {
+  date: getFormattedDate(new Date(2020, 2, 5), ddmmyyyy),
+  interest: 1.9
+}, {
+  date: getFormattedDate(new Date(2020, 3, 5), ddmmyyyy),
+  interest: 2.4
+}, {
+  date: getFormattedDate(new Date(2020, 4, 5), ddmmyyyy),
+  interest: 2.8
+}, {
+  date: getFormattedDate(new Date(2020, 5, 5), ddmmyyyy),
+  interest: 2.6
+}, {
+  date: getFormattedDate(new Date(2020, 6, 5), ddmmyyyy),
+  interest: 2.3
+}, {
+  date: getFormattedDate(new Date(2020, 7, 5), ddmmyyyy),
+  interest: 2.4
+}, {
+  date: getFormattedDate(new Date(2020, 8, 5), ddmmyyyy),
+  interest: 2.5
+}, {
+  date: getFormattedDate(new Date(2020, 9, 5), ddmmyyyy),
+  interest: 3.5
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(SimpleLineChart, {
+    data: simplelinechartdata,
+    lines: [{
+      name: 'Interest',
+      dataKey: 'interest',
+      stroke: theme.primary,
+      type: 'monotone'
+    }],
+    xAxisDataKey: "date"
+  }),
+  name: 'Default'
+};

package/esm/core/SimpleLineChart/index.js

@@ -5,7 +5,6 @@ import CustomTooltip from '../../shared/recharts/CustomTooltip';
 import { LineChartContainer } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SimpleLineChart = ({
   height = '350px',
   width = '100%',
@@ -88,5 +87,4 @@ const SimpleLineChart = ({
     })
   });
 };
-
 export default SimpleLineChart;

package/esm/core/SimpleLineChart/styles.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-export const LineChartContainer = _styled("div", process.env.NODE_ENV === "production" ? {
+export const LineChartContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "eqc7n110"
 } : {
   target: "eqc7n110",

package/esm/core/Skeleton/Skeleton.stories.js

@@ -0,0 +1,46 @@
+import Skeleton from '.';
+const meta = {
+  title: 'Core/Skeleton',
+  component: Skeleton
+};
+export default meta;
+export const Default = {
+  name: 'Default',
+  args: {
+    circle: false,
+    height: '',
+    width: '',
+    rectangle: false,
+    borderRadius: ''
+  }
+};
+export const Circle = {
+  name: 'Circle',
+  args: {
+    circle: true,
+    height: '',
+    width: '',
+    rectangle: false,
+    borderRadius: ''
+  }
+};
+export const Rectangle = {
+  name: 'Rectangle',
+  args: {
+    circle: false,
+    height: '',
+    width: '',
+    rectangle: true,
+    borderRadius: ''
+  }
+};
+export const Custom = {
+  name: 'Custom',
+  args: {
+    circle: false,
+    height: '38px',
+    width: '100px',
+    rectangle: true,
+    borderRadius: '19px'
+  }
+};

package/esm/core/Skeleton/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SkeletonRow, SkeletonCircle, SkeletonRectangle } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Skeleton = ({
   circle = false,
   height = undefined,
@@ -16,7 +15,6 @@ const Skeleton = ({
       width: width
     });
   }
-
   if (rectangle) {
     return /*#__PURE__*/_jsx(SkeletonRectangle, {
       "data-testid": "skeleton",
@@ -25,12 +23,10 @@ const Skeleton = ({
       width: width
     });
   }
-
   return /*#__PURE__*/_jsx(SkeletonRow, {
     "data-testid": "skeleton",
     height: height,
     width: width
   });
 };
-
 export default Skeleton;

package/esm/core/Skeleton/styles.js

@@ -6,14 +6,12 @@ const pulse = keyframes`
   50%  { opacity: 0.2; }
   100% { opacity: 0.6; }
 `;
-
-const defaultShimmer = _styled("span", process.env.NODE_ENV === "production" ? {
+const defaultShimmer = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
   target: "enirjj93"
 } : {
   target: "enirjj93",
   label: "defaultShimmer"
 })("display:inline-block;position:relative;overflow:hidden;vertical-align:middle;background-color:", shimmerBg, ";animation:", pulse, " 2s infinite;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1NrZWxldG9uL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZa0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvU2tlbGV0b24vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IElQcm9wcyB9IGZyb20gJy4uL1NrZWxldG9uJ1xuXG5jb25zdCBzaGltbWVyQmcgPSAnI2NjYydcblxuY29uc3QgcHVsc2UgPSBrZXlmcmFtZXNgXG4gIDAlIHsgb3BhY2l0eTogMC42OyB9XG4gIDUwJSAgeyBvcGFjaXR5OiAwLjI7IH1cbiAgMTAwJSB7IG9wYWNpdHk6IDAuNjsgfVxuYFxuXG5jb25zdCBkZWZhdWx0U2hpbW1lciA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtzaGltbWVyQmd9O1xuICBhbmltYXRpb246ICR7cHVsc2V9IDJzIGluZmluaXRlO1xuYFxuXG5leHBvcnQgY29uc3QgU2tlbGV0b25Sb3cgPSBzdHlsZWQoZGVmYXVsdFNoaW1tZXIpPElQcm9wcz5gXG4gIGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5oZWlnaHQgPyBwcm9wcy5oZWlnaHQgOiAnMWVtJyl9O1xuICB3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy53aWR0aCA/IHByb3BzLndpZHRoIDogJzY1JScpfTtcbmBcblxuZXhwb3J0IGNvbnN0IFNrZWxldG9uQ2lyY2xlID0gc3R5bGVkKGRlZmF1bHRTaGltbWVyKTxJUHJvcHM+YFxuICBoZWlnaHQ6ICR7KHByb3BzKSA9PiAocHJvcHMuaGVpZ2h0ID8gcHJvcHMuaGVpZ2h0IDogJzM0cHgnKX07XG4gIHdpZHRoOiAkeyhwcm9wcykgPT4gKHByb3BzLndpZHRoID8gcHJvcHMud2lkdGggOiAnMzRweCcpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuYFxuXG5leHBvcnQgY29uc3QgU2tlbGV0b25SZWN0YW5nbGUgPSBzdHlsZWQoZGVmYXVsdFNoaW1tZXIpPElQcm9wcz5gXG4gIGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5oZWlnaHQgPyBwcm9wcy5oZWlnaHQgOiAnMzRweCcpfTtcbiAgd2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMud2lkdGggPyBwcm9wcy53aWR0aCA6ICczNHB4Jyl9O1xuICBib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gKHByb3BzLmJvcmRlclJhZGl1cyA/IHByb3BzLmJvcmRlclJhZGl1cyA6ICcwJyl9O1xuYFxuIl19 */"));
-
 export const SkeletonRow = /*#__PURE__*/_styled(defaultShimmer, process.env.NODE_ENV === "production" ? {
   target: "enirjj92"
 } : {

package/esm/core/Spinner/Spinner.stories.js

@@ -0,0 +1,30 @@
+import Spinner from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Spinner',
+  component: Spinner
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Spinner, {}),
+  name: 'Default'
+};
+export const Size = {
+  render: () => /*#__PURE__*/_jsx(Spinner, {
+    size: 40
+  }),
+  name: 'Size'
+};
+export const Color = {
+  render: () => /*#__PURE__*/_jsx(Spinner, {
+    color: "red"
+  }),
+  name: 'Color'
+};
+export const Border = {
+  render: () => /*#__PURE__*/_jsx(Spinner, {
+    thickness: 5,
+    offsetColor: "red",
+    color: "green"
+  }),
+  name: 'Border'
+};

package/esm/core/Spinner/index.js

@@ -2,11 +2,9 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const Spinner = props => {
   return _jsx("div", {
     css: theme => [styles.default(theme), props.size && styles.size(props.size), props.margin && styles.margin(props.margin), props.color && styles.color(props.color), (props.thickness || props.offsetColor) && styles.border(props.thickness, props.offsetColor, props.color || theme.primary)]
   });
 };
-
 export default Spinner;

package/esm/core/TabBar/TabBar.stories.js

@@ -0,0 +1,38 @@
+import TabBar from '.';
+import TabItem from './TabItem';
+import IconMembership from '../../icons/General/IconMembership';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/TabBar',
+  component: TabBar,
+  parameters: {
+    docs: {
+      story: {
+        inline: false
+      }
+    }
+  }
+};
+export const TabBarDefault = {
+  render: () => /*#__PURE__*/_jsxs(TabBar, {
+    children: [/*#__PURE__*/_jsx(TabItem, {
+      text: "Medlemsbevis",
+      icon: /*#__PURE__*/_jsx(IconMembership, {
+        primary: true,
+        secondary: false
+      }),
+      active: true,
+      onClick: () => console.log('hi')
+    }), /*#__PURE__*/_jsx(TabItem, {
+      text: "Medlemsbevis",
+      icon: /*#__PURE__*/_jsx(IconMembership, {
+        primary: false,
+        secondary: true
+      }),
+      active: false,
+      onClick: () => console.log('hi')
+    })]
+  }),
+  name: 'TabBar'
+};

package/esm/core/TabBar/TabItem/index.js

@@ -3,7 +3,6 @@ import { TabWrapper } from './styles';
 import Text from '../../Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const TabItem = ({
   text,
   icon,
@@ -20,5 +19,4 @@ const TabItem = ({
     })]
   });
 };
-
 export default TabItem;

package/esm/core/TabBar/TabItem/styles.js

@@ -1,8 +1,6 @@
 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)."; }
-
-export const TabWrapper = _styled("button", process.env.NODE_ENV === "production" ? {
+export const TabWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "e1dmbbca0"
 } : {
   target: "e1dmbbca0",

package/esm/core/TabBar/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Wrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const TabBar = ({
   children
 }) => {
@@ -9,5 +8,4 @@ const TabBar = ({
     children: children
   });
 };
-
 export default TabBar;

package/esm/core/TabBar/styles.js

@@ -1,8 +1,6 @@
 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)."; }
-
-export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "eg2v4jp0"
 } : {
   target: "eg2v4jp0",

package/esm/core/TabNav/TabContext.js

@@ -1,4 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
+
+// Props for the Provider.
+
+// Handles props to the context.
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TabContext = /*#__PURE__*/React.createContext({
   active: 0,
@@ -15,21 +19,20 @@ export const TabContextProvider = ({
   const [widthObjects, setWidthObjects] = useState({});
   const [initialized, setInitialized] = useState(false);
   const width = Object.values(widthObjects).reduce((a, b) => a + b, 0);
-
   const setWidth = obj => {
     const [[key, value]] = Object.entries(obj);
-    setWidthObjects(prev => ({ ...prev,
+    setWidthObjects(prev => ({
+      ...prev,
       [key]: value
     }));
   };
-
   const handleChange = useCallback(() => {
     if (!initialized) {
       setInitialized(true);
       return;
     }
-
-    onChange(active); // eslint-disable-next-line react-hooks/exhaustive-deps
+    onChange(active);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
   useEffect(() => {
     if (value) setActive(value);

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'
+};