@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/stories/ProfileButton.stories.d.ts

@@ -3,6 +3,6 @@ import { ProfileButton } from '../src/index';
 import { Meta, StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof ProfileButton>;
 export default meta;
-type Story = StoryObj<typeof ProfileButton>;
+declare type Story = StoryObj<typeof ProfileButton>;
 export declare const Primary: Story;
 export declare const ProfileButtonsDemo: () => React.JSX.Element;

package/dist/stories/ProfileButton.stories.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ProfileButton, SystemIcons } from '../src/index';
+var meta = {
+    title: 'Components/Button/Profile button',
+    component: ProfileButton,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+export var ProfileButtonsDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null,
+        "Profile buttons ",
+        React.createElement("br", null)),
+    React.createElement("div", { style: { display: '-ms-inline-grid', width: '480px', marginBottom: '16px' } },
+        React.createElement("h6", null, "Initials"),
+        React.createElement("p", null, "For when the user's first and last name is known."),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF" }),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", className: 'hover-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", className: 'active-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", disabled: true }),
+        React.createElement("br", null),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", notificationVariant: "positive" }),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", notificationVariant: "positive", className: 'hover-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", notificationVariant: "positive", className: 'active-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, initials: "FF", notificationVariant: "positive", disabled: true }),
+        React.createElement("br", null)),
+    React.createElement("div", { style: { display: '-ms-inline-grid', width: '480px', marginBottom: '16px' } },
+        React.createElement("h6", null, "Custom Icon"),
+        React.createElement("p", null, "For when the user's name is unknown."),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }) }),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), className: 'hover-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), className: 'active-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), disabled: true }),
+        React.createElement("br", null),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), notificationVariant: "critical" }),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), notificationVariant: "critical", className: 'hover-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), notificationVariant: "critical", className: 'active-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, icon: React.createElement(SystemIcons.User, { size: "36px" }), notificationVariant: "critical", disabled: true }),
+        React.createElement("br", null)),
+    React.createElement("div", { style: { display: '-ms-inline-grid', width: '480px', marginBottom: '16px' } },
+        React.createElement("h6", null, "Custom Image"),
+        React.createElement("p", null, "For when the user has uploaded a custom image."),
+        React.createElement(ProfileButton, { onClick: function () { }, portraitSrc: "Annie_Laerdal.png" }),
+        React.createElement(ProfileButton, { onClick: function () { }, portraitSrc: "Annie_Laerdal.png", className: 'hover-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, portraitSrc: "Annie_Laerdal.png", className: 'active-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, portraitSrc: "Annie_Laerdal.png", disabled: true }),
+        React.createElement("br", null),
+        React.createElement(ProfileButton, { onClick: function () { }, notificationVariant: "positive", portraitSrc: "Annie_Laerdal.png" }),
+        React.createElement(ProfileButton, { onClick: function () { }, notificationVariant: "positive", portraitSrc: "Annie_Laerdal.png", className: 'hover-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, notificationVariant: "positive", portraitSrc: "Annie_Laerdal.png", className: 'active-state' }),
+        React.createElement(ProfileButton, { onClick: function () { }, notificationVariant: "positive", portraitSrc: "Annie_Laerdal.png", disabled: true }),
+        React.createElement("br", null)))); };

package/dist/stories/QuizButton.stories.d.ts

@@ -3,7 +3,7 @@ import { QuizButton } from '../src/index';
 import { Meta, StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof QuizButton>;
 export default meta;
-type Story = StoryObj<typeof QuizButton>;
+declare type Story = StoryObj<typeof QuizButton>;
 export declare const Primary: Story;
 export declare const QuizButtonCheckboxDemo: () => React.JSX.Element;
 export declare const QuizButtonCheckboxStatesDemo: () => React.JSX.Element;

package/dist/stories/QuizButton.stories.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { QuizButton, Size, UpperCase } from '../src/index';
+var meta = {
+    title: 'Components/Button/Quiz button',
+    component: QuizButton,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+var options = [
+    {
+        text: 'Is the patient conscious?',
+        id: 1,
+        selected: true
+    },
+    {
+        text: 'Is the patient breathing normally?',
+        id: 2
+    },
+    {
+        text: 'Does the patient have any hives or swelling in his mouth?',
+        id: 3,
+        disabled: true
+    },
+    {
+        text: 'Does the patient have any history of cardiac issues?',
+        id: 4,
+        resultType: 'correct',
+        selected: true
+    },
+    {
+        text: 'Is the patient critical?',
+        id: 5,
+        resultType: 'incorrect'
+    },
+    {
+        text: 'Does the patient have heart injury?',
+        id: 6,
+        resultType: 'partial'
+    },
+    {
+        text: 'This is a very very long answer that should span over multiple lines since it is a very long answer',
+        id: 7
+    }
+];
+var callFunc = function (arg) {
+    console.log(arg + ' was called!!');
+};
+export var QuizButtonCheckboxDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Quiz button - checkbox"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px', gap: '16px' } },
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement("h6", null, "Small"),
+            options.map(function (option) { return (React.createElement(QuizButton, { text: option.text, size: Size.Small, type: 'checkbox', onClick: function () { return callFunc(option.text); }, id: option.id.toString(), selected: option.selected, disabled: option.disabled, resultType: option.resultType })); })),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement("h6", null, "Medium"),
+            options.map(function (option) { return (React.createElement(QuizButton, { text: option.text, size: Size.Medium, type: 'checkbox', onClick: function () { return callFunc(option.text); }, id: option.id.toString(), selected: option.selected, disabled: option.disabled, resultType: option.resultType })); })),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement("h6", null, "Large"),
+            options.map(function (option) { return (React.createElement(QuizButton, { text: option.text, size: Size.Large, type: 'checkbox', onClick: function () { return callFunc(option.text); }, id: option.id.toString(), selected: option.selected, disabled: option.disabled, resultType: option.resultType })); }))))); };
+export var QuizButtonCheckboxStatesDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null, "Quiz button - checkbox set (medium)"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', marginTop: '16px' } },
+        React.createElement("div", { style: { padding: '16px' } },
+            React.createElement("h6", null, "Unselected"),
+            React.createElement(UpperCase, null, "Normal"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString() })); }),
+            React.createElement(UpperCase, null, "Hover"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), className: 'hover-state' })); }),
+            React.createElement(UpperCase, null, "Pressed"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), className: 'active-state' })); }),
+            React.createElement(UpperCase, null, "Focus"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), className: 'focus-state' })); })),
+        React.createElement("div", { style: { padding: '16px' } },
+            React.createElement("h6", null, "Selected"),
+            React.createElement(UpperCase, null, "Normal selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), selected: true })); }),
+            React.createElement(UpperCase, null, "Hover selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), selected: true, className: 'hover-state' })); }),
+            React.createElement(UpperCase, null, "Pressed selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), selected: true, className: 'active-state' })); }),
+            React.createElement(UpperCase, null, "Focus selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'checkbox', onClick: function () { }, id: option.id.toString(), selected: true, className: 'focus-state' })); }))))); };
+export var QuizButtonRadioDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Quiz button - radio buttons"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px', gap: '16px' } },
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement("h6", null, "Small"),
+            options.map(function (option) { return (React.createElement(QuizButton, { text: option.text, size: Size.Small, type: 'radio', onClick: function () { return callFunc(option.text); }, id: option.id.toString(), selected: option.selected, disabled: option.disabled, resultType: option.resultType })); })),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement("h6", null, "Medium"),
+            options.map(function (option) { return (React.createElement(QuizButton, { text: option.text, size: Size.Medium, type: 'radio', onClick: function () { return callFunc(option.text); }, id: option.id.toString(), selected: option.selected, disabled: option.disabled, resultType: option.resultType })); })),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement("h6", null, "Large"),
+            options.map(function (option) { return (React.createElement(QuizButton, { text: option.text, size: Size.Large, type: 'radio', onClick: function () { return callFunc(option.text); }, id: option.id.toString(), selected: option.selected, disabled: option.disabled, resultType: option.resultType })); }))))); };
+var demoOptions = [
+    {
+        text: 'Is the patient conscious?',
+        id: 1
+    }
+];
+export var QuizButtonRadioStatesDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h5", null, "Quiz button - radio set (medium)"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', marginTop: '16px' } },
+        React.createElement("div", { style: { padding: '16px' } },
+            React.createElement("h6", null, "Unselected"),
+            React.createElement(UpperCase, null, "Normal"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString() })); }),
+            React.createElement(UpperCase, null, "Hover"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), className: 'hover-state' })); }),
+            React.createElement(UpperCase, null, "Pressed"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), className: 'active-state' })); }),
+            React.createElement(UpperCase, null, "Focus"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), className: 'focus-state' })); })),
+        React.createElement("div", { style: { padding: '16px' } },
+            React.createElement("h6", null, "Selected"),
+            React.createElement(UpperCase, null, "Normal selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), selected: true })); }),
+            React.createElement(UpperCase, null, "Hover selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), selected: true, className: 'hover-state' })); }),
+            React.createElement(UpperCase, null, "Pressed selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), selected: true, className: 'active-state' })); }),
+            React.createElement(UpperCase, null, "Focus selected"),
+            demoOptions.map(function (option) { return (React.createElement(QuizButton, { text: option.text, type: 'radio', onClick: function () { }, id: option.id.toString(), selected: true, className: 'focus-state' })); }))))); };

package/dist/stories/Scrollbar.stories.js

@@ -0,0 +1,70 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BOXSHADOWS, scrollBarStyling, Size } from '../src/index';
+export default {
+    title: 'Components/Scrollbars',
+    component: BOXSHADOWS,
+    decorators: [],
+    parameter: {},
+};
+var ContainerSmall = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 10px;\n    overflow-y: scroll;\n\n    ", "\n"], ["\n    width: 10px;\n    overflow-y: scroll;\n\n    ", "\n"])), scrollBarStyling(Size.Small));
+var ContainerMedium = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 10px;\n    overflow-y: scroll;\n\n    ", "\n"], ["\n    width: 10px;\n    overflow-y: scroll;\n\n    ", "\n"])), scrollBarStyling(Size.Medium));
+var Content = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 400px;\n"], ["\n    height: 400px;\n"])));
+var ContainerSmallHorizontal = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    height: 10px;\n    overflow-x: scroll;\n\n    ", "\n"], ["\n    height: 10px;\n    overflow-x: scroll;\n\n    ", "\n"])), scrollBarStyling(Size.Small));
+var ContainerMediumHorizontal = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 10px;\n    overflow-x: scroll;\n\n    ", "\n"], ["\n    height: 10px;\n    overflow-x: scroll;\n\n    ", "\n"])), scrollBarStyling(Size.Medium));
+var ContentHorizontal = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 400px;\n    height: 2px;\n"], ["\n    width: 400px;\n    height: 2px;\n"])));
+export var ScrollbarVertical = function () { return (React.createElement("div", { style: { display: 'flex', flexDirection: 'row', width: '500px', justifyContent: 'space-evenly' } },
+    React.createElement("div", null,
+        "Small ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerSmall, { style: { height: '100px' } },
+            React.createElement(Content, null))),
+    React.createElement("div", null,
+        "Small ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerSmall, { style: { height: '200px' } },
+            React.createElement(Content, null))),
+    React.createElement("div", null,
+        "Medium ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerMedium, { style: { height: '100px' } },
+            React.createElement(Content, null))),
+    React.createElement("div", null,
+        "Medium ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerMedium, { style: { height: '200px' } },
+            React.createElement(Content, null))))); };
+export var ScrollbarHorizontal = function () { return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', height: '400px', justifyContent: 'space-evenly' } },
+    React.createElement("div", null,
+        "Small ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerSmallHorizontal, { style: { width: '100px' } },
+            React.createElement(ContentHorizontal, null))),
+    React.createElement("div", null,
+        "Small ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerSmallHorizontal, { style: { width: '200px' } },
+            React.createElement(ContentHorizontal, null))),
+    React.createElement("div", null,
+        "Medium ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerMediumHorizontal, { style: { width: '100px' } },
+            React.createElement(ContentHorizontal, null))),
+    React.createElement("div", null,
+        "Medium ",
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(ContainerMediumHorizontal, { style: { width: '200px' } },
+            React.createElement(ContentHorizontal, null))))); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/stories/SegmentControl.stories.d.ts

@@ -3,7 +3,7 @@ import { SegmentControl } from '../src/index';
 import { Meta, StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof SegmentControl>;
 export default meta;
-type Story = StoryObj<typeof SegmentControl>;
+declare type Story = StoryObj<typeof SegmentControl>;
 export declare const Primary: Story;
 export declare const SegmentControlSmallDemo: () => React.JSX.Element;
 export declare const SegmentControlMediumDemo: () => React.JSX.Element;

package/dist/stories/SegmentControl.stories.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { SegmentControl, Size, SystemIcons } from '../src/index';
+var meta = {
+    title: 'Components/Segment Control',
+    component: SegmentControl,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+var icons = [
+    { key: 'icon1', content: React.createElement(SystemIcons.Legend3Star, { size: '20' }), disabled: false, },
+    { key: 'icon2', content: React.createElement(SystemIcons.Legend4Square, { size: '20' }), disabled: false, },
+    { key: 'icon3', content: React.createElement(SystemIcons.Legend5Diamond, { size: '20' }), disabled: false, },
+    { key: 'icon4', content: React.createElement(SystemIcons.Legend6Nabla, { size: '20' }), disabled: false, },
+    { key: 'icon5', content: React.createElement(SystemIcons.Legend7Pentagon, { size: '20' }), disabled: false, },
+    { key: 'icon6', content: React.createElement(SystemIcons.Legend8Rectangle, { size: '20' }), disabled: true, }
+];
+export var Primary = {
+    args: {
+        items: icons,
+        selected: 'icon2',
+        onChange: function () { }
+    },
+};
+var items = [
+    { key: 'item1', content: 'Item 1', disabled: false, },
+    { key: 'item2', content: 'Item 2', disabled: false, },
+    { key: 'item3', content: 'Item 3', disabled: false, },
+    { key: 'item4', content: 'Item 4', disabled: false, },
+    { key: 'item5', content: 'Item 5', disabled: false, },
+    { key: 'item6', content: 'Item 6', disabled: true, }
+];
+export var SegmentControlSmallDemo = function () {
+    var _a = React.useState(items[0].key), item1 = _a[0], setItem1 = _a[1];
+    var _b = React.useState(items[0].key), item2 = _b[0], setItem2 = _b[1];
+    var _c = React.useState(items[0].key), item3 = _c[0], setItem3 = _c[1];
+    var _d = React.useState(items[0].key), item4 = _d[0], setItem4 = _d[1];
+    var _e = React.useState(items[5].key), item5 = _e[0], setItem5 = _e[1];
+    var _f = React.useState(icons[0].key), icon1 = _f[0], setIcon1 = _f[1];
+    var _g = React.useState(icons[0].key), icon2 = _g[0], setIcon2 = _g[1];
+    var _h = React.useState(icons[0].key), icon3 = _h[0], setIcon3 = _h[1];
+    var _j = React.useState(icons[0].key), icon4 = _j[0], setIcon4 = _j[1];
+    var _k = React.useState(icons[5].key), icon5 = _k[0], setIcon5 = _k[1];
+    return (React.createElement("div", { style: { display: 'flex', width: '100%', gap: '24px', flexDirection: 'column' } },
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 2), selected: item1, onChange: setItem1, size: Size.Small }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 2), selected: icon1, onChange: setIcon1, size: Size.Small })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 3), selected: item2, onChange: setItem2, size: Size.Small }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 3), selected: icon2, onChange: setIcon2, size: Size.Small })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 4), selected: item3, onChange: setItem3, size: Size.Small }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 4), selected: icon3, onChange: setIcon3, size: Size.Small })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 5), selected: item4, onChange: setItem4, size: Size.Small }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 5), selected: icon4, onChange: setIcon4, size: Size.Small })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 6), selected: item5, onChange: setItem5, size: Size.Small }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 6), selected: icon5, onChange: setIcon5, size: Size.Small }))));
+};
+export var SegmentControlMediumDemo = function () {
+    var _a = React.useState(items[0].key), item1 = _a[0], setItem1 = _a[1];
+    var _b = React.useState(items[0].key), item2 = _b[0], setItem2 = _b[1];
+    var _c = React.useState(items[0].key), item3 = _c[0], setItem3 = _c[1];
+    var _d = React.useState(items[0].key), item4 = _d[0], setItem4 = _d[1];
+    var _e = React.useState(items[5].key), item5 = _e[0], setItem5 = _e[1];
+    var _f = React.useState(icons[0].key), icon1 = _f[0], setIcon1 = _f[1];
+    var _g = React.useState(icons[0].key), icon2 = _g[0], setIcon2 = _g[1];
+    var _h = React.useState(icons[0].key), icon3 = _h[0], setIcon3 = _h[1];
+    var _j = React.useState(icons[0].key), icon4 = _j[0], setIcon4 = _j[1];
+    var _k = React.useState(icons[5].key), icon5 = _k[0], setIcon5 = _k[1];
+    return (React.createElement("div", { style: { display: 'flex', width: '100%', gap: '24px', flexDirection: 'column' } },
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 2), selected: item1, onChange: setItem1 }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 2), selected: icon1, onChange: setIcon1 })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 3), selected: item2, onChange: setItem2 }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 3), selected: icon2, onChange: setIcon2 })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 4), selected: item3, onChange: setItem3 }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 4), selected: icon3, onChange: setIcon3 })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 5), selected: item4, onChange: setItem4 }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 5), selected: icon4, onChange: setIcon4 })),
+        React.createElement("div", { style: { display: 'flex', width: '100%', gap: '56px', flexDirection: 'row' } },
+            React.createElement(SegmentControl, { items: items.slice(0, 6), selected: item5, onChange: setItem5 }),
+            React.createElement(SegmentControl, { items: icons.slice(0, 6), selected: icon5, onChange: setIcon5 }))));
+};

package/dist/stories/ShadowStyles.stories.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BOXSHADOWS } from '../src/index';
+export default {
+    title: 'Components/ShadowStyles',
+    component: BOXSHADOWS,
+    decorators: [],
+    parameter: {},
+};
+var ContainerBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 500px;\n  background: #ffeab3;\n"], ["\n  height: 500px;\n  background: #ffeab3;\n"])));
+var BoxL1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 15%;\n  height: 116px;\n  padding: 20px;\n  margin: 20px 10px 0px 10px;\n  float: left;\n  top: 137.69px;\n  background: #ffeab3;\n  box-shadow: ", ";\n"], ["\n  width: 15%;\n  height: 116px;\n  padding: 20px;\n  margin: 20px 10px 0px 10px;\n  float: left;\n  top: 137.69px;\n  background: #ffeab3;\n  box-shadow: ", ";\n"])), BOXSHADOWS.BOXSHADOW_L1);
+var BoxL2 = styled(BoxL1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-shadow: ", ";\n"], ["\n  box-shadow: ", ";\n"])), BOXSHADOWS.BOXSHADOW_L2);
+var BoxL3 = styled(BoxL1)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: ", ";\n"], ["\n  box-shadow: ", ";\n"])), BOXSHADOWS.BOXSHADOW_L3);
+var BoxCentered = styled(BoxL1)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-shadow: ", ";\n"], ["\n  box-shadow: ", ";\n"])), BOXSHADOWS.BOXSHADOW_CENTERED);
+export var ShadowStylesDemo = function () { return (React.createElement(ContainerBox, null,
+    React.createElement(BoxL1, null, "Shadow L1"),
+    React.createElement(BoxL2, null, "Shadow L2"),
+    React.createElement(BoxL3, null, "Shadow L3"),
+    React.createElement(BoxCentered, null, "Shadow Centered"))); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/stories/SideMenu.stories.js

@@ -0,0 +1,149 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import { Size, COLORS, SideMenu } from '../src/index';
+import { SystemIcons } from '../src/index';
+import styled from 'styled-components';
+export default {
+    title: 'Components/Side Menu',
+    component: SideMenu,
+};
+var ContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 100%;\n"], ["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 100%;\n"])), COLORS.neutral_50);
+var ScrollableContentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 600px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 600px;\n"])), COLORS.neutral_50);
+var headerActions = [
+    {
+        icon: React.createElement(SystemIcons.Search, null), action: function () {
+        }
+    },
+    {
+        icon: React.createElement(SystemIcons.Language, null), action: function () {
+        }
+    },
+    {
+        icon: React.createElement(SystemIcons.GearSettings, null), action: function () {
+        }
+    },
+];
+var action = function () { return console.log('action'); };
+var footerButtons = [
+    {
+        label: 'Label', onClick: function () {
+        }, variant: 'secondary'
+    },
+    {
+        label: 'Label', onClick: function () {
+        }, variant: 'primary'
+    },
+];
+var footerItems = [
+    {
+        item: { value: '1', displayLabel: 'Menu item' }, active: true, onClickHandler: function () {
+        }, id: '1'
+    },
+    {
+        item: { value: '2', displayLabel: 'Menu item' }, active: false, onClickHandler: function () {
+        }, id: '2'
+    }
+];
+export var Small = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', background: COLORS.neutral_200, padding: '8px' } },
+        React.createElement("span", null, "Side Menu with content only"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: function () {
+                } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with header"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: function () {
+                }, header: { label: 'Label' } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with actions"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: action, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: action, footer: { note: 'Note' }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer actions"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: action, footer: { buttons: footerButtons }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer menu items"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: action, footer: { note: 'Note', items: footerItems }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with scrollable content"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Small, onClose: action, footer: { note: 'Note', items: footerItems }, header: { actions: headerActions } },
+                React.createElement(ScrollableContentContainer, null, "Content")))));
+};
+export var Medium = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', background: COLORS.neutral_200, padding: '8px' } },
+        React.createElement("span", null, "Side Menu with content only"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: function () {
+                } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with header"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: function () {
+                }, header: { label: 'Label' } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with actions"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: action, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: action, footer: { note: 'Note' }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer actions"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: action, footer: { buttons: footerButtons }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer menu items"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: action, footer: { note: 'Note', items: footerItems }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with scrollable content"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Medium, onClose: action, footer: { note: 'Note', items: footerItems }, header: { actions: headerActions } },
+                React.createElement(ScrollableContentContainer, null, "Content")))));
+};
+export var Large = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', background: COLORS.neutral_200, padding: '8px' } },
+        React.createElement("span", null, "Side Menu with content only"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: function () {
+                } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with header"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: function () {
+                }, header: { label: 'Label' } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with actions"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: action, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: action, footer: { note: 'Note' }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer actions"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: action, footer: { buttons: footerButtons }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with footer menu items"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: action, footer: { note: 'Note', items: footerItems }, header: { actions: headerActions } },
+                React.createElement(ContentContainer, null, "Content"))),
+        React.createElement("span", null, "Side Menu with scrollable content"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '500px', height: '400px' } },
+            React.createElement(SideMenu, { size: Size.Large, onClose: action, footer: { note: 'Note', items: footerItems }, header: { actions: headerActions } },
+                React.createElement(ScrollableContentContainer, null, "Content")))));
+};
+var templateObject_1, templateObject_2;

package/dist/stories/Switcher.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SystemIcons, MobileSwitcherMenu } from '../src/index';
+import { Darkness, DesktopSwitcherContainer, Switcher, SwitcherContainer } from '@laerdal/navigation';
+export default {
+    title: 'Components/Switcher',
+    component: Switcher,
+};
+export var SwitcherDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Darkness, null),
+    React.createElement(SwitcherContainer, { className: 'visible' },
+        React.createElement(DesktopSwitcherContainer, { className: 'visible' })))); };
+var switcherElements = [{ label: 'Laerdal connect (Home)', to: '/', icon: React.createElement(SystemIcons.Home, null), external: true },
+    { label: 'Scenario Cloud', to: '', icon: React.createElement(SystemIcons.Bullet, null), external: true },
+    { label: 'My e-Courses', to: '', icon: React.createElement(SystemIcons.Bullet, null), external: true },];
+export var MobileSwitcherDemo = function () { return (React.createElement("div", { className: "open" },
+    React.createElement(MobileSwitcherMenu, { header: "Switch site", label: "Switch to...", onMenuClose: function () {
+        }, items: switcherElements }))); };