@bbl-digital/snorre 4.0.9 → 4.0.11

package/lib/core/Checkbox/Checkbox.stories.d.ts

@@ -1,24 +1,11 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const Default: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const WithoutLabel: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Subtle: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Checked: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Disabled: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import Checkbox from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+declare type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const WithoutLabel: Story;
+export declare const Subtle: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

package/lib/core/Checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAGxB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAOlB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAOnB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAOpB,CAAA"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,GAAG,CAAA;AACxB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA"}

package/lib/core/Checkbox/Checkbox.stories.js

@@ -1,43 +1,43 @@
 import Checkbox from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Checkbox',
   component: Checkbox
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
-    children: "Option"
-  }),
+  args: {
+    value: 'value1',
+    children: 'Option'
+  },
   name: 'Default'
 };
 export const WithoutLabel = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1"
-  }),
+  args: {
+    value: 'value1'
+  },
   name: 'Without label'
 };
 export const Subtle = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
-    type: "subtle",
-    children: "Option"
-  }),
+  args: {
+    value: 'value1',
+    type: 'subtle',
+    children: 'Option'
+  },
   name: 'Subtle'
 };
 export const Checked = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
+  args: {
+    value: 'value1',
     checked: true,
-    children: "Option"
-  }),
+    children: 'Option'
+  },
   name: 'Checked'
 };
 export const Disabled = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
+  args: {
+    value: 'value1',
     disabled: true,
-    children: "Disabled option"
-  }),
+    children: 'Disabled option'
+  },
   name: 'Disabled'
 };

package/lib/core/CollapseList/CollapseList.stories.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const Default: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const InitialOpen: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import CollapseList from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof CollapseList>;
+export default meta;
+declare type Story = StoryObj<typeof CollapseList>;
+export declare const Default: Story;
+export declare const InitialOpen: Story;
 //# sourceMappingURL=CollapseList.stories.d.ts.map

package/lib/core/CollapseList/CollapseList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapseList.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/CollapseList.stories.tsx"],"names":[],"mappings":";;AAKA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAenB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAYvB,CAAA"}
+{"version":3,"file":"CollapseList.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/CollapseList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,GAAG,CAAA;AAG5B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAGN,CAAA;AAE9B,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAE1C,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAczB,CAAA"}

package/lib/core/CollapseList/CollapseList.stories.js

@@ -1,43 +1,51 @@
 import CollapseList from '.';
 import CollapseListItem from './Item';
 import Text from '../Text';
+import Header from '../Header';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/CollapseList',
   component: CollapseList
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsxs(CollapseList, {
-    children: [/*#__PURE__*/_jsx(CollapseListItem, {
-      header: /*#__PURE__*/_jsx(Text, {
-        children: "Header"
-      }),
-      content: /*#__PURE__*/_jsx(Text, {
-        children: "Content"
-      })
-    }), /*#__PURE__*/_jsx(CollapseListItem, {
-      header: /*#__PURE__*/_jsx(Text, {
-        children: "Item 2"
-      }),
-      content: /*#__PURE__*/_jsx(Text, {
-        children: "Content"
-      })
-    })]
-  }),
+  args: {
+    children: /*#__PURE__*/_jsxs(CollapseList, {
+      children: [/*#__PURE__*/_jsx(CollapseListItem, {
+        header: /*#__PURE__*/_jsx(Header, {
+          level: 5,
+          children: "Header"
+        }),
+        content: /*#__PURE__*/_jsx(Text, {
+          children: "Content"
+        })
+      }), /*#__PURE__*/_jsx(CollapseListItem, {
+        header: /*#__PURE__*/_jsx(Header, {
+          level: 5,
+          children: "Item 2"
+        }),
+        content: /*#__PURE__*/_jsx(Text, {
+          children: "Content"
+        })
+      })]
+    })
+  },
   name: 'Default'
 };
 export const InitialOpen = {
-  render: () => /*#__PURE__*/_jsx(CollapseList, {
-    children: /*#__PURE__*/_jsx(CollapseListItem, {
-      header: /*#__PURE__*/_jsx(Text, {
-        children: "Header"
-      }),
-      content: /*#__PURE__*/_jsx(Text, {
-        children: "Content"
-      }),
-      initialOpen: true
+  args: {
+    children: /*#__PURE__*/_jsx(CollapseList, {
+      children: /*#__PURE__*/_jsx(CollapseListItem, {
+        header: /*#__PURE__*/_jsx(Text, {
+          children: "Header"
+        }),
+        content: /*#__PURE__*/_jsx(Text, {
+          children: "Content"
+        }),
+        initialOpen: true
+      })
     })
-  }),
+  },
   name: 'initialOpen'
 };

package/lib/core/CollapseList/Item.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
-interface IProps {
+import React, { HTMLAttributes } from 'react';
+interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /** Content in clickable header */
-    header: ReactNode;
+    header: React.ReactNode;
     /** Content in collapsable section */
-    content: ReactNode;
+    content: React.ReactNode;
     /** Set open initially */
     initialOpen?: boolean;
 }

package/lib/core/CollapseList/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/Item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAKlD,UAAU,MAAM;IACd,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,OAAO,EAAE,SAAS,CAAC;IACnB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsBtC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAA;AAOd,UAAU,MAAO,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACtE,kCAAkC;IAClC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAiEtC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/lib/core/CollapseList/Item.js

@@ -1,32 +1,65 @@
-import React, { useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { CollapseButton } from './styles';
 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 = ({
   header,
   content,
-  initialOpen
+  initialOpen,
+  ...restProps
 }) => {
   const [open, setOpen] = useState(initialOpen ? true : false);
+  const contentRef = useRef(null);
+  const contentId = `content-${Math.random().toString(36).substring(2, 9)}`;
+  const tag = useMemo(() => getHtmlTag(header), [header]);
+  const isHeadingOrHTMLHeading = headerTags.includes(tag || '');
+  function getHtmlTag(node) {
+    if ( /*#__PURE__*/React.isValidElement(node)) {
+      const element = node;
+      if (typeof element.type === 'function') {
+        return element.type.name;
+      } else if (typeof element.type === 'string') {
+        return element.type;
+      }
+    }
+    return null;
+  }
   const toggleOpen = () => {
     setOpen(!open);
+    if (!open && contentRef.current) {
+      contentRef.current.focus(); // Optional focus management.
+    }
   };
+
   return /*#__PURE__*/_jsxs("div", {
     className: "item",
+    ...restProps,
+    role: restProps['role'] || 'listitem',
     children: [/*#__PURE__*/_jsx(CollapseButton, {
       onClick: toggleOpen,
       nostyle: true,
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      "aria-label": typeof header === 'string' ? `Toggle ${header}` : undefined,
       children: /*#__PURE__*/_jsxs("div", {
         className: "header",
+        role: !isHeadingOrHTMLHeading ? 'heading' : undefined,
         children: [header, /*#__PURE__*/_jsx(IconChevronDown, {
           primary: true,
           flipVertical: open,
           size: '14px'
         })]
       })
-    }), open && /*#__PURE__*/_jsx("div", {
+    }), open && /*#__PURE__*/_jsx("section", {
+      role: "region",
       className: "content",
+      id: contentId,
+      "aria-hidden": !open,
+      ref: contentRef,
+      tabIndex: -1,
+      "aria-live": "polite",
       children: content
     })]
   });

package/lib/core/CollapseList/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-interface IProps {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Children */
     children?: React.ReactNode | React.ReactNode[];
 }

package/lib/core/CollapseList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,MAAM;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAElC,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3D,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAMlC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/core/CollapseList/index.js

@@ -3,10 +3,12 @@ import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const CollapseList = ({
-  children
+  children,
+  ...restProps
 }) => {
   return _jsx("div", {
     css: theme => [styles.default(theme)],
+    ...restProps,
     children: children
   });
 };

package/lib/core/CollapseList/styles.d.ts

@@ -1,44 +1,6 @@
 /// <reference types="react" />
 import { IAppTheme } from '../../app-shell/theme';
-export declare const CollapseButton: import("@emotion/styled").StyledComponent<import("../../shared/types/Accessibility").AccessibilityProps & {
-    [prop: string]: unknown;
-    afterIcon?: import("react").ReactNode;
-    beforeIcon?: import("react").ReactNode;
-    children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
-    disabled?: boolean | undefined;
-    href?: string | undefined;
-    loading?: boolean | undefined;
-    onClick?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
-    onKeyPress?: {
-        key: string;
-        action: (event: KeyboardEvent) => void;
-    } | undefined;
-    onEnterKeyPress?: ((event: KeyboardEvent) => void) | undefined;
-    onEscapeKeyPress?: ((event: KeyboardEvent) => void) | undefined;
-    openInNewWindow?: boolean | undefined;
-    rel?: string | undefined;
-    trackingEvent?: string | undefined;
-    trackingName?: string | undefined;
-    type?: "button" | "reset" | "submit" | undefined;
-    target?: string | undefined;
-    download?: any;
-    tabIndex?: number | undefined;
-} & {
-    success?: boolean | undefined;
-    danger?: boolean | undefined;
-    highlight?: boolean | undefined;
-    outline?: boolean | undefined;
-    nostyle?: boolean | undefined;
-    focusable?: boolean | undefined;
-    border?: string | undefined;
-    css?: import("@emotion/utils").SerializedStyles | undefined;
-    loading?: boolean | undefined;
-    back?: boolean | undefined;
-    small?: boolean | undefined;
-    transparentBg?: boolean | undefined;
-    tabIndex?: number | undefined;
-} & {
+export declare const CollapseButton: import("@emotion/styled").StyledComponent<Omit<import("../Button").IProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const styles: {

package/lib/core/CollapseList/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAM1B,CAAA;AAED,eAAO,MAAM,MAAM;qBACA,SAAS;CAyB3B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CollapseList/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,eAAO,MAAM,cAAc;;UAM1B,CAAA;AAED,eAAO,MAAM,MAAM;qBACA,SAAS;CAyB3B,CAAA"}

package/lib/core/CommentsTimeline/CommentLine/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface IProps {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Time of comment */
     time?: string;
     /** Date of comment */

package/lib/core/CommentsTimeline/CommentLine/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/CommentsTimeline/CommentLine/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,UAAU,MAAM;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsCjC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/CommentsTimeline/CommentLine/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3D,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAgDjC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/core/CommentsTimeline/CommentLine/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { DateWrapper, IconWrapper, TextWrapper, Wrapper } from './styles';
 import { useTheme } from '@emotion/react';
 import Text from '../../Text';
-import { useIsMobile } from '../../..';
+import { Header, useIsMobile } from '../../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CommentLine = ({
@@ -14,13 +14,18 @@ const CommentLine = ({
   italic,
   commentInfo,
   subtle,
-  customContent
+  customContent,
+  ...restProps
 }) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
+  const ariaLabel = `kommentar ${date} klokken ${time}`;
   return /*#__PURE__*/_jsxs(Wrapper, {
     theme: theme,
     "data-testid": "comment-line",
+    role: "article",
+    "aria-label": ariaLabel,
+    ...restProps,
     children: [/*#__PURE__*/_jsxs(DateWrapper, {
       children: [/*#__PURE__*/_jsx(Text, {
         subtle: true,
@@ -31,15 +36,19 @@ const CommentLine = ({
         children: date
       })]
     }), /*#__PURE__*/_jsx(IconWrapper, {
+      "aria-hidden": true,
       children: icon
     }), /*#__PURE__*/_jsxs(TextWrapper, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        semibold: true,
+      tabIndex: 0,
+      children: [/*#__PURE__*/_jsx(Header, {
+        level: 5,
+        size: "16px",
         children: header
       }), /*#__PURE__*/_jsx(Text, {
         italic: italic,
         subtle: subtle,
         size: "14px",
+        paragraph: true,
         children: comment
       }), commentInfo && /*#__PURE__*/_jsx(Text, {
         italic: true,

package/lib/core/CommentsTimeline/CommentsTimeline.stories.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const CommentsTimeline: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const CustomContent: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import CommentsTimelineComponent from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof CommentsTimelineComponent>;
+export default meta;
+declare type Story = StoryObj<typeof CommentsTimelineComponent>;
+export declare const CommentsTimeline: Story;
+export declare const CustomContent: Story;
 //# sourceMappingURL=CommentsTimeline.stories.d.ts.map

package/lib/core/CommentsTimeline/CommentsTimeline.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentsTimeline.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CommentsTimeline/CommentsTimeline.stories.tsx"],"names":[],"mappings":";;AAMA,wBAGS;AAET,eAAO,MAAM,gBAAgB;;;CA6C5B,CAAA;AAED,eAAO,MAAM,aAAa;;;CAoBzB,CAAA"}
+{"version":3,"file":"CommentsTimeline.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CommentsTimeline/CommentsTimeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,MAAM,GAAG,CAAA;AAIzC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,yBAAyB,CAGhD,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAEvD,eAAO,MAAM,gBAAgB,EAAE,KA8C9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA"}

package/lib/core/CommentsTimeline/CommentsTimeline.stories.js

@@ -4,76 +4,81 @@ import IconComment from '../../icons/General/IconComment';
 import Button from '../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/CommentsTimeline',
   component: CommentsTimelineComponent
 };
+export default meta;
 export const CommentsTimeline = {
-  render: () => /*#__PURE__*/_jsxs(CommentsTimelineComponent, {
-    children: [/*#__PURE__*/_jsx(CommentLine, {
-      time: "11:40",
-      date: "20.08.2020",
-      icon: /*#__PURE__*/_jsx(IconComment, {
-        primary: true
-      }),
-      header: "Test Person",
-      comment: "This is a comment"
-    }), /*#__PURE__*/_jsx(CommentLine, {
-      time: "11:30",
-      date: "20.08.2020",
-      icon: /*#__PURE__*/_jsx(IconComment, {
-        primary: true
-      }),
-      header: "Test Person",
-      comment: "This is a comment"
-    }), /*#__PURE__*/_jsx(CommentLine, {
-      time: "11:10",
-      date: "21.02.2001",
-      icon: /*#__PURE__*/_jsx(IconComment, {
-        primary: true
-      }),
-      header: "Test Person",
-      comment: "This is a comment"
-    }), /*#__PURE__*/_jsx(CommentLine, {
-      time: "11:40",
-      date: "22.12.2000",
-      icon: /*#__PURE__*/_jsx(IconComment, {
-        primary: true
-      }),
-      header: "Kristian Gr\xF8nvold",
-      comment: "This is a also comment"
-    }), /*#__PURE__*/_jsx(CommentLine, {
-      time: "11:40",
-      date: "22.12.2000",
-      icon: /*#__PURE__*/_jsx(IconComment, {
-        primary: true
-      }),
-      header: "Kristian Gr\xF8nvold",
-      comment: "This is an italic comment with extra info",
-      italic: true,
-      subtle: true,
-      commentInfo: "Extra text"
-    })]
-  }),
+  args: {
+    children: /*#__PURE__*/_jsxs(CommentsTimelineComponent, {
+      children: [/*#__PURE__*/_jsx(CommentLine, {
+        time: "11:40",
+        date: "20.08.2020",
+        icon: /*#__PURE__*/_jsx(IconComment, {
+          primary: true
+        }),
+        header: "Test Person",
+        comment: "This is a comment"
+      }), /*#__PURE__*/_jsx(CommentLine, {
+        time: "11:30",
+        date: "20.08.2020",
+        icon: /*#__PURE__*/_jsx(IconComment, {
+          primary: true
+        }),
+        header: "Test Person",
+        comment: "This is a comment"
+      }), /*#__PURE__*/_jsx(CommentLine, {
+        time: "11:10",
+        date: "21.02.2001",
+        icon: /*#__PURE__*/_jsx(IconComment, {
+          primary: true
+        }),
+        header: "Test Person",
+        comment: "This is a comment"
+      }), /*#__PURE__*/_jsx(CommentLine, {
+        time: "11:40",
+        date: "22.12.2000",
+        icon: /*#__PURE__*/_jsx(IconComment, {
+          primary: true
+        }),
+        header: "Kristian Gr\xF8nvold",
+        comment: "This is a also comment"
+      }), /*#__PURE__*/_jsx(CommentLine, {
+        time: "11:40",
+        date: "22.12.2000",
+        icon: /*#__PURE__*/_jsx(IconComment, {
+          primary: true
+        }),
+        header: "Kristian Gr\xF8nvold",
+        comment: "This is an italic comment with extra info",
+        italic: true,
+        subtle: true,
+        commentInfo: "Extra text"
+      })]
+    })
+  },
   name: 'CommentsTimeline'
 };
 export const CustomContent = {
-  render: () => /*#__PURE__*/_jsx(CommentsTimelineComponent, {
-    children: /*#__PURE__*/_jsx(CommentLine, {
-      time: "11:40",
-      date: "20.08.2020",
-      icon: /*#__PURE__*/_jsx(IconComment, {
-        primary: true
-      }),
-      header: "Test Person",
-      comment: "This is a comment",
-      commentInfo: "Comment info",
-      customContent: /*#__PURE__*/_jsxs("span", {
-        children: ["This is some custom content where you can add", /*#__PURE__*/_jsx(Button, {
-          children: "stuff"
-        })]
+  args: {
+    children: /*#__PURE__*/_jsx(CommentsTimelineComponent, {
+      children: /*#__PURE__*/_jsx(CommentLine, {
+        time: "11:40",
+        date: "20.08.2020",
+        icon: /*#__PURE__*/_jsx(IconComment, {
+          primary: true
+        }),
+        header: "Test Person",
+        comment: "This is a comment",
+        commentInfo: "Comment info",
+        customContent: /*#__PURE__*/_jsxs("span", {
+          children: ["This is some custom content where you can add", /*#__PURE__*/_jsx(Button, {
+            children: "stuff"
+          })]
+        })
       })
     })
-  }),
+  },
   name: 'Custom content'
 };

package/lib/core/CommentsTimeline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CommentsTimeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,MAAM;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAEtC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/CommentsTimeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,MAAM;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAMtC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/lib/core/CommentsTimeline/index.js

@@ -5,6 +5,8 @@ const CommentsTimeline = ({
   children
 }) => {
   return /*#__PURE__*/_jsx(Wrapper, {
+    "aria-label": "Tidslinje Kommentarer",
+    tabIndex: 0,
     children: children
   });
 };