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

package/esm/core/DatepickerRange/DatepickerRange.stories.js

@@ -0,0 +1,21 @@
+import DatepickerRange from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/DatepickerRange',
+  component: DatepickerRange
+};
+export const DatepickerRangeDefault = {
+  render: () => /*#__PURE__*/_jsx("div", {
+    style: {
+      height: '600px'
+    },
+    children: /*#__PURE__*/_jsx(DatepickerRange, {
+      onChange: console.log,
+      label: {
+        from: 'from date',
+        to: 'to date'
+      }
+    })
+  }),
+  name: 'DatepickerRange'
+};

package/esm/core/DatepickerRange/index.js

@@ -1,21 +1,22 @@
 /** @jsxImportSource @emotion/react */
+
 // import { useRef, useState, useEffect } from 'react'
 // import { Modifier, Modifiers } from 'react-day-picker'
 // import DayPickerInput from 'react-day-picker/DayPickerInput'
 // import { useIsMobile } from '../..'
-import IconErrorOutline from '../../icons/General/IconErrorOutline'; // import {
+import IconErrorOutline from '../../icons/General/IconErrorOutline';
+// import {
 //   formatDate,
 //   MONTHS,
 //   parseDate,
 //   WEEKDAYS_LONG,
 //   WEEKDAYS_SHORT,
 // } from '../../utils/dates'
-
-import { Input, Wrapper, styles, Label, ErrorMessage // DividerLine,
+import { Input, Wrapper, styles, Label, ErrorMessage
+// DividerLine,
 } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 // const FORMAT = 'dd.MM.yyyy'
 // const PLACEHOLDER = 'dd.mm.åååå'
 const DatePickerRange = ({
@@ -33,25 +34,33 @@ const DatePickerRange = ({
   minWidth = 550
 }) => {
   // const isMobile = useIsMobile()
+
   // const fromPickerRef = useRef<DayPickerInput>(null)
   // const toPickerRef = useRef<DayPickerInput>(null)
+
   // const currentYear = new Date().getFullYear()
+
   // const maxDateAvailable = maxDate
   //   ? new Date(maxDate)
   //   : new Date(currentYear + 5, 11, 31)
+
   // const [dates, setDates] = useState<{ to?: Date; from?: Date }>({
   //   to: undefined,
   //   from: undefined,
   // })
+
   // useEffect(() => {
   //   if (isMobile && fromPickerRef)
   //     (fromPickerRef as any).current.input.readOnly = true
   // }, [isMobile, fromPickerRef])
+
   // useEffect(() => {
   //   if (isMobile && toPickerRef)
   //     (toPickerRef.current as any).input.readOnly = true
   // }, [isMobile, toPickerRef])
+
   // const modifiers: Partial<Modifiers> = { start: dates.from, end: dates.to }
+
   // const pickerPropsDefault = {
   //   locale: 'no',
   //   months: MONTHS,
@@ -63,22 +72,26 @@ const DatePickerRange = ({
   //   numberOfMonths: 2,
   //   selected: [dates.from, { from: dates.from, to: dates.to }],
   // }
+
   // const toDayProps = {
   //   ...pickerPropsDefault,
   //   disabled: { before: dates.from } as Modifier,
   //   month: dates.from,
   //   fromMonth: dates.from,
   // }
+
   // const fromDayProps = {
   //   ...pickerPropsDefault,
   //   disabled: { after: dates.to } as Modifier,
   //   toMonth: dates.to,
   //   onDayClick: () => toPickerRef.current?.getInput().focus(),
   // }
+
   // const handleChange = (key: 'to' | 'from') => (date: Date) => {
   //   setDates((prev) => ({ ...prev, [key]: date }))
   //   onChange({ ...dates, [key]: date })
   // }
+
   return _jsx(Wrapper, {
     css: () => [styles.wrapper(maxWidth, minWidth), css && css],
     children: _jsxs(Input, {
@@ -95,5 +108,4 @@ const DatePickerRange = ({
     })
   });
 };
-
 export default DatePickerRange;

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

package/esm/core/Divider/index.js

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
+
 import React from 'react';
 import styles from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const Divider = ({
   className,
   color,
@@ -17,5 +17,4 @@ const Divider = ({
     css: theme => [styles.default(color), subtle && styles.subtle(theme), margin && styles.margin(margin), height && styles.height(height), lightGray && styles.lightGray, css && css]
   });
 };
-
 export default Divider;

package/esm/core/Divider/styles.js

@@ -1,5 +1,4 @@
 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';
 const styles = {
   default: (color = '#f7f7f7') => /*#__PURE__*/css("height:1px;background-color:", color, ";border:none;margin:1em 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0RpdmlkZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9EaXZpZGVyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6IChjb2xvciA9ICcjZjdmN2Y3JykgPT4gY3NzYFxuICAgIGhlaWdodDogMXB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3J9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBtYXJnaW46IDFlbSAwO1xuICBgLFxuICBzdWJ0bGU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5zdWJ0bGVUZXh0fTtcbiAgYCxcbiAgbWFyZ2luOiAobWFyZ2luOiBzdHJpbmcpID0+IGNzc2BcbiAgICBtYXJnaW46ICR7bWFyZ2lufSAwO1xuICBgLFxuICBoZWlnaHQ6IChoZWlnaHQ6IG51bWJlcikgPT4gY3NzYFxuICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG4gIGAsXG4gIGxpZ2h0R3JheTogY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICNkN2Q3ZDc7XG4gIGAsXG59XG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuZXhwb3J0IHsgc3R5bGVzIH1cbiJdfQ== */"),

package/esm/core/Dropdown/Dropdown.stories.js

@@ -0,0 +1,53 @@
+import Dropdown from '.';
+import IconEye from '../../icons/General/IconEye';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Dropdown',
+  component: Dropdown
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Stuff"
+    })
+  }),
+  name: 'Default'
+};
+export const Background = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    background: "transparent",
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Stuff"
+    })
+  }),
+  name: 'Background'
+};
+export const CustomLabel = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    label: "Label",
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Stuff"
+    })
+  }),
+  name: 'Custom label'
+};
+export const Icon = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    icon: /*#__PURE__*/_jsx(IconEye, {}),
+    label: "Dropdown icon",
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Hello"
+    })
+  }),
+  name: 'Icon'
+};
+export const WithTimeout = {
+  render: () => /*#__PURE__*/_jsx(Dropdown, {
+    label: "Click outside timeout",
+    clickOutsideTimeout: 1000,
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Adds timeout before close on click outside of dropdown"
+    })
+  }),
+  name: 'With timeout'
+};

package/esm/core/Dropdown/index.js

@@ -6,7 +6,6 @@ import IconCaretDown from '../../icons/General/IconCaretDown';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Dropdown = ({
   label,
   icon,
@@ -22,20 +21,16 @@ const Dropdown = ({
   const ref = /*#__PURE__*/createRef();
   const [open, toggleOpen] = useState(false);
   const theme = useTheme();
-
   const onClick = function () {
     toggleOpen(!open);
   };
-
   useEffect(() => {
     const handleClickOutside = e => {
       // TODO type
       const node = ref.current;
-
       if (node && node.contains(e.target)) {
         return;
       }
-
       if (clickOutsideTimeout !== undefined) {
         setTimeout(() => {
           toggleOpen(false);
@@ -44,13 +39,11 @@ const Dropdown = ({
         toggleOpen(false);
       }
     };
-
     if (open) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -82,5 +75,4 @@ const Dropdown = ({
     })]
   });
 };
-
 export default Dropdown;

package/esm/core/DropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,47 @@
+import DropdownMenu from '.';
+import DropdownMenuOption from './DropdownMenuOption';
+import IconMail from '../../icons/General/IconMail';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/DropdownMenu',
+  component: DropdownMenu
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsxs(DropdownMenu, {
+    icon: /*#__PURE__*/_jsx(IconMail, {}),
+    children: [/*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 1 clicked'),
+      children: "Option 1"
+    }), /*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 2 clicked'),
+      children: "Option 2"
+    })]
+  }),
+  name: 'Default'
+};
+export const WithCounterProp = {
+  render: () => /*#__PURE__*/_jsxs(DropdownMenu, {
+    icon: /*#__PURE__*/_jsx(IconMail, {}),
+    children: [/*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 1 clicked'),
+      counter: 3,
+      children: "With counter"
+    }), /*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 2 clicked'),
+      children: "Option 2"
+    })]
+  }),
+  name: 'With counter prop'
+};
+export const WithClassname = {
+  render: () => /*#__PURE__*/_jsx(DropdownMenu, {
+    icon: /*#__PURE__*/_jsx(IconMail, {}),
+    className: "my-class",
+    children: /*#__PURE__*/_jsx(DropdownMenuOption, {
+      onClick: () => console.log('Option 1 clicked'),
+      children: "This menu has a classname"
+    })
+  }),
+  name: 'With classname'
+};

package/esm/core/DropdownMenu/DropdownMenuOption.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { dropdownMenuOption } from './styles';
 import Link from '../Link';
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const DropdownMenuOption = ({
   counter,
   onClick,
@@ -19,5 +18,4 @@ const DropdownMenuOption = ({
     children: [children ? children : '', counter ? ` (${counter})` : '']
   });
 };
-
 export default DropdownMenuOption;

package/esm/core/DropdownMenu/index.js

@@ -3,7 +3,6 @@ import { Wrapper, Content } from './styles';
 import Button from '../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const DropdownMenu = ({
   icon,
   className,
@@ -16,13 +15,11 @@ const DropdownMenu = ({
         setOpen(false);
       }, 200);
     };
-
     if (open) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -41,5 +38,4 @@ const DropdownMenu = ({
     })]
   });
 };
-
 export default DropdownMenu;

package/esm/core/DropdownMenu/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 Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e3ttgez1"

package/esm/core/Editor/Editor.stories.js

@@ -0,0 +1,54 @@
+import Editor from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Editor',
+  component: Editor
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    label: "Editor-label"
+  }),
+  name: 'Default'
+};
+export const Rich = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    label: "Editor-label",
+    type: "rich",
+    allowImages: true
+  }),
+  name: 'Rich'
+};
+export const ValidElements = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    validElements: "strong,p,span,em",
+    type: "custom",
+    customToolbar: "bold italic underline"
+  }),
+  name: 'Valid elements'
+};
+export const InvalidElements = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    onChange: e => console.log(e),
+    pasteAsText: false,
+    invalidElements: "button,a,h1,h2,h3,h4,h5,h6"
+  }),
+  name: 'Invalid elements'
+};
+export const AllProps = {
+  render: () => /*#__PURE__*/_jsx(Editor, {
+    label: "Label",
+    type: "rich",
+    initialValue: '<p><img src="https://i.ytimg.com/vi/CZFKWt3S2Ys/maxresdefault.jpg" alt="testimage" width="444" height="250" /></p><br/><p>"wow" - Owen Wilson</p>',
+    allowImages: true,
+    invalidElements: "",
+    invalidMessage: "Memes are not allowed",
+    height: 400,
+    maxHeight: 600,
+    onChange: (e, length) => console.log(e, length),
+    onBlur: () => console.log('blur')
+  }),
+  name: 'Props'
+};

package/esm/core/Editor/index.js

@@ -12,7 +12,6 @@ import { useEffect } from 'react';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const TINYMCE_API_KEY = 'v1hbb9qthd0z2fr0keceoglnwbzhyjqwsj4q7n193ovikt8s';
-
 const Editor = ({
   initialValue,
   overrideValue,
@@ -38,20 +37,18 @@ const Editor = ({
     alert
   } = useTheme();
   const isMobile = useIsMobile();
-
   const handleChange = (html, editor) => {
     setValue(html);
     onChange(html, editor.getContent({
       format: 'text'
     }).length);
   };
-
   const handleBlur = () => onBlur?.(value);
-
   const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
   useEffect(() => {
     if (overrideValue === undefined) return;
-    setValue(() => overrideValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+    setValue(() => overrideValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overrideValue]);
   return _jsxs("div", {
     css: theme => [styles.default(theme), !loaded && styles.hideEditor],
@@ -111,5 +108,4 @@ const Editor = ({
     })]
   });
 };
-
 export default Editor;

package/esm/core/Editor/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 styles = {
   default: theme => /*#__PURE__*/css("display:flex;flex-direction:column;gap:4px;.tox-tinymce{border:1px solid ", theme.border, ";border-radius:3px;}.tox-toolbar__group{border-color:", theme.border, "!important;}.tox-toolbar__primary{background:none!important;border-bottom:1px solid ", theme.border, ";}.tox-statusbar{border-top:none!important;}.editor-wrapper{display:grid;.tox-toolbar--scrolling,.tox-edit-area{&::-webkit-scrollbar{width:2px;height:2px;}}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS29DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBnYXA6IDRweDtcblxuICAgIC50b3gtdGlueW1jZSB7XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgfVxuICAgIC50b3gtdG9vbGJhcl9fZ3JvdXAge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke3RoZW1lLmJvcmRlcn0gIWltcG9ydGFudDtcbiAgICB9XG4gICAgLnRveC10b29sYmFyX19wcmltYXJ5IHtcbiAgICAgIGJhY2tncm91bmQ6IG5vbmUgIWltcG9ydGFudDtcbiAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgfVxuICAgIC50b3gtc3RhdHVzYmFyIHtcbiAgICAgIGJvcmRlci10b3A6IG5vbmUgIWltcG9ydGFudDtcbiAgICB9XG4gICAgLmVkaXRvci13cmFwcGVyIHtcbiAgICAgIGRpc3BsYXk6IGdyaWQ7XG5cbiAgICAgIC50b3gtdG9vbGJhci0tc2Nyb2xsaW5nLFxuICAgICAgLnRveC1lZGl0LWFyZWEge1xuICAgICAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICAgICAgd2lkdGg6IDJweDtcbiAgICAgICAgICBoZWlnaHQ6IDJweDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgYCxcbiAgaGlkZUVkaXRvcjogY3NzYFxuICAgIC5lZGl0b3Itd3JhcHBlciB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcbiJdfQ== */"),

package/esm/core/FileInput/FileInput.stories.js

@@ -0,0 +1,61 @@
+import FileInput from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/FileInput',
+  component: FileInput
+};
+const initialFile = new File([''], 'attachment.pdf', {
+  type: 'application/pdf',
+  lastModified: new Date().getTime()
+});
+export const Deafult = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    onChange: e => console.log('CB', e)
+  }),
+  name: 'Deafult'
+};
+export const Multiple = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    onChange: e => console.log('CB', e),
+    multiple: true
+  }),
+  name: 'Multiple'
+};
+export const WithError = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    onChange: e => console.log('CB', e),
+    invalidMessage: "This is an uninformative error",
+    label: "Should contain error"
+  }),
+  name: 'With error'
+};
+export const FilePdf = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    onChange: e => console.log('CB', e),
+    accept: ".pdf",
+    text: "Last opp PDF"
+  }),
+  name: 'File pdf'
+};
+export const HideFileList = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    hideFileList: true,
+    onChange: e => console.log('CB', e)
+  }),
+  name: 'Hide file list'
+};
+export const InitialFile = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    onChange: e => console.log('CB', e),
+    initialFiles: [initialFile]
+  }),
+  name: 'Initial file'
+};
+export const Maxsize = {
+  render: () => /*#__PURE__*/_jsx(FileInput, {
+    multiple: true,
+    fileMaxsixe: 512000,
+    onChange: e => console.log('CB', e)
+  }),
+  name: 'Maxsize'
+};

package/esm/core/FileInput/index.js

@@ -7,7 +7,6 @@ import Alert from '../Alert';
 import { formatBytes, isAllFilesValid } from '../../utils/file';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const FileInput = ({
   multiple,
   accept,
@@ -25,31 +24,25 @@ const FileInput = ({
   const [sizeError, setSizeError] = useState(false);
   const theme = useTheme();
   const hiddenFileInput = useRef(null);
-
   const handleClick = () => {
     const node = hiddenFileInput.current;
     node.click();
   };
-
   const handleChange = e => {
     if (!e.target.files[0]) return;
     let filesFromEvent = [...Array.from(e.target.files)];
     let valid = true;
     if (fileMaxsixe) valid = isAllFilesValid(filesFromEvent, fileMaxsixe);
-
     if (!valid && fileMaxsixe) {
       filesFromEvent = filesFromEvent.filter(x => x.size <= fileMaxsixe); // Filter out invalid files
-
       setSizeError(true);
     }
-
     if (!multiple) {
       setFiles([filesFromEvent[0]]);
       onChange(filesFromEvent[0]);
       e.target.value = null;
       return;
     }
-
     let newFiles = [...files];
     filesFromEvent.forEach(file => {
       newFiles.push(file);
@@ -57,23 +50,21 @@ const FileInput = ({
     setFiles(newFiles);
     onChange(newFiles);
   };
-
   const handleDelete = index => {
     if (!multiple) {
       setFiles([]);
       onChange(null);
       return;
     }
-
     const arr = [...files];
     arr.splice(index, 1);
     setFiles(arr);
-    onChange(arr); // resets value of input to trigger on change if user removes and readds same file
+    onChange(arr);
 
+    // resets value of input to trigger on change if user removes and readds same file
     const node = hiddenFileInput.current;
     if (node) node.value = null;
   };
-
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [label && /*#__PURE__*/_jsx(Label, {
       children: label
@@ -123,5 +114,4 @@ const FileInput = ({
     })]
   });
 };
-
 export default FileInput;

package/esm/core/FileInput/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 Button from '../Button';
 import { css } from '@emotion/react';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {

package/esm/core/GoogleButton/GoogleButton.stories.js

@@ -0,0 +1,12 @@
+import GoogleButtonComponent from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/GoogleButton',
+  component: GoogleButtonComponent
+};
+export const GoogleButton = {
+  render: () => /*#__PURE__*/_jsx(GoogleButtonComponent, {
+    onClick: () => console.log('clicking button')
+  }),
+  name: 'Google button'
+};

package/esm/core/GoogleButton/index.js

@@ -3,7 +3,6 @@ import IconGmail from '../../icons/Logos/IconGmail';
 import { GButton } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const GoogleButton = ({
   disabled,
   onClick
@@ -16,12 +15,10 @@ const GoogleButton = ({
       onClick(event);
     }
   };
-
   return /*#__PURE__*/_jsxs(GButton, {
     disabled: disabled,
     onClick: handleClick,
     children: [/*#__PURE__*/_jsx(IconGmail, {}), "Logg p\xE5 med Google"]
   });
 };
-
 export default GoogleButton;

package/esm/core/GoogleButton/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)."; }
-
 export const GButton = _styled("button", process.env.NODE_ENV === "production" ? {
   target: "e1tm3r460"
 } : {