@bbl-digital/snorre 4.0.21 → 4.0.23

package/esm/core/Card/index.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { styles } from './styles';
 import { Key } from '../../enums/Keyboard';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const Card = ({
+const Card = /*#__PURE__*/React.forwardRef(({
   className,
   ...props
-}) => {
+}, ref) => {
   const handleOnKeyPress = e => {
     if (e.key === Key.enter || e.key === Key.space) {
       if (props.onClick) {
@@ -15,6 +15,7 @@ const Card = ({
     }
   };
   return _jsx("div", {
+    ref: ref,
     css: theme => [styles.default(theme), props.shadow && styles.shadow(theme), props.withhover && styles.withHover(theme), props.primary && styles.primary(theme), props.gray && styles.gray, props.noPadding && styles.noPadding, props.height && styles.height(props.height), props.nobackground && styles.nobackground, props.largePadding && styles.largePadding, props.overflowvisible && styles.overflowvisible, props.css && props.css],
     tabIndex: props.onClick ? 0 : undefined,
     onClick: props.onClick,
@@ -23,5 +24,5 @@ const Card = ({
     ...props,
     children: props.children
   });
-};
+});
 export default Card;

package/esm/core/Checkbox/index.js

@@ -3,8 +3,25 @@ import React, { useEffect, useState } from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Checkbox = props => {
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  ...props
+}, ref) => {
   const [value, setValue] = useState(props.checked ? true : false);
+  const {
+    checked,
+    disabled,
+    className,
+    disabledHoverState,
+    nomargin,
+    child,
+    type,
+    name,
+    onChange,
+    onClick,
+    id,
+    children,
+    ...restProps
+  } = props;
   useEffect(() => {
     setValue(props.checked ? true : false);
   }, [props.checked]);
@@ -15,18 +32,24 @@ const Checkbox = props => {
   };
   return _jsxs("label", {
     "aria-label": props['aria-label'],
-    className: props.className,
-    css: theme => [styles.default(theme), props.disabled && styles.disabled(theme, props.disabledHoverState), props.nomargin && styles.nomargin, props.child && styles.child, props.type === 'subtle' && styles.subtle(theme)],
+    htmlFor: id,
+    className: className,
+    css: theme => [styles.default(theme), disabled && styles.disabled(theme, disabledHoverState), nomargin && styles.nomargin, child && styles.child, type === 'subtle' && styles.subtle(theme)],
     onClick: e => e.stopPropagation(),
     children: [_jsx("input", {
+      ref: ref,
       type: "checkbox",
+      role: "checkbox",
+      "aria-checked": value,
       checked: value,
       value: props.value,
-      name: props.name,
-      disabled: props.disabled,
-      onClick: props.onClick,
-      onChange: handleChange
-    }), _jsx("span", {}), props.children]
+      name: name,
+      id: id,
+      disabled: disabled,
+      onClick: onClick,
+      onChange: handleChange,
+      ...restProps
+    }), _jsx("span", {}), children]
   });
-};
+});
 export default Checkbox;

package/esm/core/CollapseList/Item.js

@@ -4,12 +4,12 @@ import { IconChevronDown } from '../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const headerTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'Header'];
-const CollapseListItem = ({
+const CollapseListItem = /*#__PURE__*/React.forwardRef(({
   header,
   content,
   initialOpen,
   ...restProps
-}) => {
+}, ref) => {
   const [open, setOpen] = useState(initialOpen ? true : false);
   const contentRef = useRef(null);
   const contentId = `content-${Math.random().toString(36).substring(2, 9)}`;
@@ -34,6 +34,7 @@ const CollapseListItem = ({
   };
 
   return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
     className: "item",
     ...restProps,
     role: restProps['role'] || 'listitem',
@@ -63,5 +64,5 @@ const CollapseListItem = ({
       children: content
     })]
   });
-};
+});
 export default CollapseListItem;

package/esm/core/CollapseList/index.js

@@ -2,14 +2,15 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const CollapseList = ({
+const CollapseList = /*#__PURE__*/React.forwardRef(({
   children,
   ...restProps
-}) => {
+}, ref) => {
   return _jsx("div", {
+    ref: ref,
     css: theme => [styles.default(theme)],
     ...restProps,
     children: children
   });
-};
+});
 export default CollapseList;

package/esm/core/Datepicker/Datepicker.stories.js

@@ -1,16 +1,17 @@
 import Datepicker from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Datepicker',
   component: Datepicker
 };
-export const DatepickerDefault = {
-  render: () => /*#__PURE__*/_jsx(Datepicker, {
+export default meta;
+export const Default = {
+  args: {
     onChange: e => console.log(e),
     onBlur: () => console.log('blur'),
-    label: "Date"
-  }),
-  name: 'Datepicker'
+    label: 'Date'
+  },
+  name: 'Default'
 };
 export const WithError = {
   render: () => /*#__PURE__*/_jsx(Datepicker, {

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

@@ -1,10 +1,11 @@
 import DatepickerRange from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/DatepickerRange',
   component: DatepickerRange
 };
-export const DatepickerRangeDefault = {
+export default meta;
+export const Default = {
   render: () => /*#__PURE__*/_jsx("div", {
     style: {
       height: '600px'
@@ -17,5 +18,5 @@ export const DatepickerRangeDefault = {
       }
     })
   }),
-  name: 'DatepickerRange'
+  name: 'Default'
 };

package/esm/core/Dropdown/index.js

@@ -85,7 +85,6 @@ const Dropdown = ({
       onClick: onClick,
       css: css,
       className: className,
-      ...restProps,
       children: label ? label : '- Velg'
     }), open && _jsx("div", {
       css: theme => styles.default(theme),

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

@@ -2,46 +2,54 @@ import DropdownMenu from '.';
 import DropdownMenuOption from './DropdownMenuOption';
 import IconMail from '../../icons/General/IconMail';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/DropdownMenu',
   component: DropdownMenu
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsxs(DropdownMenu, {
+  args: {
     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"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      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, {
+  args: {
     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"
-    })]
-  }),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      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, {
+  args: {
     icon: /*#__PURE__*/_jsx(IconMail, {}),
-    className: "my-class",
-    children: /*#__PURE__*/_jsx(DropdownMenuOption, {
-      onClick: () => console.log('Option 1 clicked'),
-      children: "This menu has a classname"
+    className: 'my-class',
+    children: /*#__PURE__*/_jsx(_Fragment, {
+      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

@@ -9,12 +9,14 @@ const DropdownMenuOption = ({
   children
 }) => {
   return _jsxs(Link, {
+    role: "menuitem",
     trackingName: "Topbar",
     trackingEvent: 'DropdownMenu click: ' + (children ? children : ''),
     css: theme => [dropdownMenuOption(theme)],
     onClick: onClick,
     removeUnderline: true,
     small: true,
+    "aria-label": children ? `Option: ${children}${counter ? `, ${counter} notifications` : ''}` : '',
     children: [children ? children : '', counter ? ` (${counter})` : '']
   });
 };

package/esm/core/DropdownMenu/index.js

@@ -9,6 +9,7 @@ const DropdownMenu = ({
   children
 }) => {
   const [open, setOpen] = useState(false);
+  const dropdownRef = React.useRef(null);
   useEffect(() => {
     const handleClickOutside = e => {
       setTimeout(() => {
@@ -24,9 +25,22 @@ const DropdownMenu = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [open]);
+  useEffect(() => {
+    if (!dropdownRef?.current) return;
+    if (open) {
+      // Focus the first focusable element in the dropdown when it opens
+      const focusableElements = dropdownRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements.length) {
+        const element = focusableElements[0];
+        element.focus();
+      }
+    }
+  }, [open]);
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: className,
     children: [/*#__PURE__*/_jsx(Button, {
+      "aria-haspopup": true,
+      "aria-expanded": open,
       nostyle: true,
       focusable: true,
       onClick: () => setOpen(!open),
@@ -34,6 +48,8 @@ const DropdownMenu = ({
       trackingName: "Topbar",
       children: icon ? icon : ''
     }), open && /*#__PURE__*/_jsx(Content, {
+      ref: dropdownRef,
+      role: "menu",
       children: children
     })]
   });

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

@@ -1,54 +1,55 @@
 import Editor from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Editor',
   component: Editor
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Editor, {
-    onChange: e => console.log(e),
-    label: "Editor-label"
-  }),
+  args: {
+    label: 'Editor-label',
+    onChange: e => console.log(e)
+  },
   name: 'Default'
 };
 export const Rich = {
-  render: () => /*#__PURE__*/_jsx(Editor, {
+  args: {
+    label: 'Editor-label',
     onChange: e => console.log(e),
-    label: "Editor-label",
-    type: "rich",
+    type: 'rich',
     allowImages: true
-  }),
+  },
   name: 'Rich'
 };
 export const ValidElements = {
-  render: () => /*#__PURE__*/_jsx(Editor, {
+  args: {
+    label: 'Editor-label',
     onChange: e => console.log(e),
-    validElements: "strong,p,span,em",
-    type: "custom",
-    customToolbar: "bold italic underline"
-  }),
+    type: 'custom',
+    customToolbar: 'bold italic underline',
+    validElements: 'strong,p,span,em'
+  },
   name: 'Valid elements'
 };
 export const InvalidElements = {
-  render: () => /*#__PURE__*/_jsx(Editor, {
+  args: {
+    label: 'Editor-label',
     onChange: e => console.log(e),
-    pasteAsText: false,
-    invalidElements: "button,a,h1,h2,h3,h4,h5,h6"
-  }),
+    type: 'custom',
+    customToolbar: 'bold italic underline',
+    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>',
+  args: {
+    label: 'Editor-label',
+    onChange: e => console.log(e),
+    type: 'rich',
     allowImages: true,
-    invalidElements: "",
-    invalidMessage: "Memes are not allowed",
+    invalidElements: 'button,a,h1,h2,h3,h4,h5,h6',
+    invalidMessage: 'Memes are not allowed',
     height: 400,
-    maxHeight: 600,
-    onChange: (e, length) => console.log(e, length),
-    onBlur: () => console.log('blur')
-  }),
-  name: 'Props'
+    maxHeight: 600
+  },
+  name: 'All props'
 };

package/esm/core/FileInput/index.js

@@ -22,6 +22,7 @@ const FileInput = ({
   rotateIcon,
   isControlledState,
   controlledFiles,
+  id = 'file-input',
   onChange
 }) => {
   const [uncontrolledFiles, setUncontrolledFiles] = useState(initialFiles);
@@ -30,6 +31,7 @@ const FileInput = ({
   const files = isControlledState ? controlledFiles || [] : uncontrolledFiles;
   const hiddenFileInput = useRef(null);
   const handleClick = () => {
+    if (!hiddenFileInput.current) return;
     const node = hiddenFileInput.current;
     node.click();
   };
@@ -76,6 +78,7 @@ const FileInput = ({
   };
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [label && /*#__PURE__*/_jsx(Label, {
+      id: id,
       children: label
     }), /*#__PURE__*/_jsxs(FileWrapper, {
       children: [files.length > 0 && !hideFileList && /*#__PURE__*/_jsx(DocumentList, {
@@ -102,6 +105,7 @@ const FileInput = ({
           width: width,
           type: "button",
           nostyle: nostyle,
+          "aria-labelledby": "fileInputLabel",
           children: !nostyle ? /*#__PURE__*/_jsxs(ButtonContent, {
             children: [text, /*#__PURE__*/_jsx(Icon, {
               rotated: rotateIcon ? 1 : 0,
@@ -116,7 +120,8 @@ const FileInput = ({
           onChange: handleChange,
           multiple: multiple,
           accept: accept,
-          ref: hiddenFileInput
+          ref: hiddenFileInput,
+          "aria-hidden": "true"
         })]
       })]
     }), invalidMessage && /*#__PURE__*/_jsx(ErrorMessage, {
@@ -124,6 +129,7 @@ const FileInput = ({
     }), sizeError && /*#__PURE__*/_jsxs(Alert, {
       danger: true,
       onClose: () => setSizeError(false),
+      "aria-live": "assertive",
       children: ["Fil kan ikke overstige ", formatBytes(fileMaxsixe)]
     })]
   });

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

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

package/esm/core/Header/Header.stories.js

@@ -1,65 +1,62 @@
 import Header from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Header',
   component: Header
 };
+export default meta;
 export const Header1 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 1,
-    children: "Header 1"
-  }),
-  name: 'Header 1'
+  args: {
+    children: 'Header',
+    level: 1
+  },
+  name: 'Header level 1'
 };
 export const Header2 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 2,
-    children: "Header 2"
-  }),
-  name: 'Header 2'
+  args: {
+    children: 'Header 2',
+    level: 2
+  },
+  name: 'Header level 2'
 };
 export const Header3 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    children: "Header 3"
-  }),
-  name: 'Header 3'
+  args: {
+    children: 'Header 3',
+    level: 3
+  },
+  name: 'Header level 3'
 };
 export const Header4 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 4,
-    children: "Header 4"
-  }),
-  name: 'Header 4'
+  args: {
+    children: 'Header 4',
+    level: 4
+  },
+  name: 'Header level 4'
 };
 export const Header5 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 5,
-    children: "Header 5"
-  }),
-  name: 'Header 5'
+  args: {
+    children: 'Header 5',
+    level: 5
+  },
+  name: 'Header level 5'
 };
-export const HeaderCustomColor = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    color: "green",
-    children: "Header 3 custom color"
-  }),
+export const HeaderSecondaryColor = {
+  args: {
+    children: 'Header 3 custom color',
+    secondary: true
+  },
   name: 'Header custom color'
 };
 export const HeaderPrimaryColor = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    primary: true,
-    children: "Header 3 primary color"
-  }),
+  args: {
+    children: 'Header 3 primary color',
+    primary: true
+  },
   name: 'Header primary color'
 };
-export const HeaderSecondaryColor = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    secondary: true,
-    children: "Header 3 secondary color"
-  }),
-  name: 'Header secondary color'
+export const HeaderCustomColor = {
+  args: {
+    children: 'Header 3 custom color',
+    color: 'red'
+  },
+  name: 'Header custom color'
 };

package/esm/core/HighlightText/HighlightText.stories.js

@@ -1,22 +1,22 @@
 import HighlightText from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/HighlightText',
   component: HighlightText
 };
+export default meta;
 export const Highlight = {
-  render: () => /*#__PURE__*/_jsx(HighlightText, {
-    text: "This is a text with a highlighted part",
-    highlight: "highlighted part"
-  }),
+  args: {
+    text: 'This is a text with a highlighted part',
+    highlight: 'highlighted part'
+  },
   name: 'Highlight'
 };
 export const AllProps = {
-  render: () => /*#__PURE__*/_jsx(HighlightText, {
-    text: "This is a text with a highlighted part",
-    highlight: "highlighted part",
-    size: "14px",
+  args: {
+    text: 'This is a text with a highlighted part',
+    highlight: 'highlighted part',
+    size: '14px',
     semibold: true
-  }),
+  },
   name: 'All props'
 };