@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/src/styles/typography.js

@@ -0,0 +1,130 @@
+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, { css } from 'styled-components';
+import { COLORS } from '.';
+import { Size } from '../types';
+export var TypographyBase = styled('div')(function (_a) {
+    var $color = _a.$color, lineHeight = _a.lineHeight, $fontSize = _a.$fontSize, $fontWeight = _a.$fontWeight, $fontStyle = _a.$fontStyle, textTransform = _a.textTransform, textDecorationLine = _a.textDecorationLine;
+    return ({
+        fontSize: $fontSize,
+        fontWeight: $fontWeight,
+        lineHeight: lineHeight + 'px',
+        textTransform: textTransform ? textTransform : 'none',
+        textDecorationLine: textDecorationLine ? textDecorationLine : 'none',
+        fontStyle: $fontStyle ? $fontStyle : 'normal',
+        color: $color ? $color : COLORS.black,
+    });
+});
+var ComponentTextStyle;
+(function (ComponentTextStyle) {
+    ComponentTextStyle[ComponentTextStyle["Regular"] = 1] = "Regular";
+    ComponentTextStyle[ComponentTextStyle["Bold"] = 2] = "Bold";
+    ComponentTextStyle[ComponentTextStyle["Italic"] = 3] = "Italic";
+    ComponentTextStyle[ComponentTextStyle["UppercaseBold"] = 4] = "UppercaseBold";
+})(ComponentTextStyle || (ComponentTextStyle = {}));
+var componentFontWeight = function (textStyle) {
+    var fontWeight = 400;
+    if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {
+        fontWeight = 700;
+    }
+    return fontWeight;
+};
+var componentFontStyle = function (textStyle) {
+    var fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';
+    return fontStyle;
+};
+var componentTextTransformation = function (textStyle) {
+    var fontStyle = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';
+    return fontStyle;
+};
+var ComponentStyling = function (fontSize, lineHeight, textStyle, color) {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    ", "\n  "], ["\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    ", "\n  "])), fontSize, componentFontWeight(textStyle), lineHeight, componentFontStyle(textStyle), color === null ? '' : "color: ".concat(color || COLORS.black, ";"));
+};
+var ComponentXLStyling = function (textStyle, color) { return ComponentStyling('24px', '28px', textStyle, color); };
+var ComponentXL = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
+    var fontWeight = componentFontWeight(textStyle);
+    var fontStyle = componentFontStyle(textStyle);
+    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 28, "$fontSize": 24, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
+};
+var ComponentLStyling = function (textStyle, color) { return ComponentStyling('20px', '24px', textStyle, color); };
+var ComponentL = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
+    var fontWeight = componentFontWeight(textStyle);
+    var fontStyle = componentFontStyle(textStyle);
+    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 24, "$fontSize": 20, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
+};
+var ComponentMStyling = function (textStyle, color) { return ComponentStyling('18px', '24px', textStyle, color); };
+var ComponentM = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
+    var fontWeight = componentFontWeight(textStyle);
+    var fontStyle = componentFontStyle(textStyle);
+    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 24, "$fontSize": 18, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
+};
+var ComponentSStyling = function (textStyle, color) { return ComponentStyling('16px', '20px', textStyle, color); };
+var ComponentS = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
+    var fontWeight = componentFontWeight(textStyle);
+    var fontStyle = componentFontStyle(textStyle);
+    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 20, "$fontSize": 16, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
+};
+var ComponentXSStyling = function (textStyle, color) { return ComponentStyling('14px', '16px', textStyle, color); };
+var ComponentXS = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
+    var fontWeight = componentFontWeight(textStyle);
+    var fontStyle = componentFontStyle(textStyle);
+    var textTransform = componentTextTransformation(textStyle);
+    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 16, "$fontSize": 14, "$fontWeight": fontWeight, "$fontStyle": fontStyle, textTransform: textTransform }, children));
+};
+var ComponentXXSStyling = function (textStyle, color) { return ComponentStyling('12px', '16px', textStyle, color); };
+var ComponentXXS = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
+    var fontWeight = componentFontWeight(textStyle);
+    var fontStyle = componentFontStyle(textStyle);
+    var textTransform = componentTextTransformation(textStyle);
+    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 16, "$fontSize": 12, "$fontWeight": fontWeight, "$fontStyle": fontStyle, textTransform: textTransform }, children));
+};
+var ComponentResponsive = function (_a) {
+    var color = _a.color, textStyle = _a.textStyle, children = _a.children, size = _a.size, width = _a.width;
+    var fontsize = size;
+    if (!size) {
+        if (width == -1) {
+            fontsize = Size.Medium;
+        }
+        else if (width < 768) {
+            fontsize = Size.Small;
+        }
+        else if (width < 992) {
+            fontsize = Size.Medium;
+        }
+        else {
+            fontsize = Size.Large;
+        }
+    }
+    switch (fontsize) {
+        case Size.XXSmall:
+            return React.createElement(ComponentXXS, { color: color, textStyle: textStyle, children: children });
+        case Size.XSmall:
+            return React.createElement(ComponentXS, { color: color, textStyle: textStyle, children: children });
+        case Size.Small:
+            return React.createElement(ComponentS, { color: color, textStyle: textStyle, children: children });
+        case Size.Medium:
+            return React.createElement(ComponentM, { color: color, textStyle: textStyle, children: children });
+        case Size.Large:
+        default:
+            return React.createElement(ComponentL, { color: color, textStyle: textStyle, children: children });
+    }
+};
+export var Typography = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  html {\n    font-size: 100%;\n  }\n\n  @media (min-width: 48rem) {\n    html {\n      font-size: 112.5%;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    html {\n      font-size: 125%;\n    }\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-weight: 700;\n    line-height: 120%;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 3rem;\n  }\n\n  h2 {\n    font-size: 2.5rem;\n  }\n\n  h3 {\n    font-size: 2rem;\n  }\n\n  h4 {\n    font-size: 1.75rem;\n  }\n\n  h5 {\n    font-size: 1.5rem;\n  }\n\n  h6 {\n    font-size: 1.25rem;\n  }\n\n  p {\n    font-size: 1rem;\n    line-height: 150%;\n    margin: 0 0 0.5rem;\n  }\n\n  p:last-of-type {\n    margin-bottom: 0;\n  }\n\n\n  h1, h2, h3, h4, h5, h6, p, span {\n    max-width: 34rem;\n  }\n\n  :lang(ja-jp) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(ko-kr) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(zh-CN) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n"], ["\n  html {\n    font-size: 100%;\n  }\n\n  @media (min-width: 48rem) {\n    html {\n      font-size: 112.5%;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    html {\n      font-size: 125%;\n    }\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-weight: 700;\n    line-height: 120%;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 3rem;\n  }\n\n  h2 {\n    font-size: 2.5rem;\n  }\n\n  h3 {\n    font-size: 2rem;\n  }\n\n  h4 {\n    font-size: 1.75rem;\n  }\n\n  h5 {\n    font-size: 1.5rem;\n  }\n\n  h6 {\n    font-size: 1.25rem;\n  }\n\n  p {\n    font-size: 1rem;\n    line-height: 150%;\n    margin: 0 0 0.5rem;\n  }\n\n  p:last-of-type {\n    margin-bottom: 0;\n  }\n\n\n  h1, h2, h3, h4, h5, h6, p, span {\n    max-width: 34rem;\n  }\n\n  :lang(ja-jp) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(ko-kr) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(zh-CN) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n"])));
+export var QuoteTypography = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1.5rem;\n  line-height: 150%;\n  margin-bottom: 0.75rem;\n"], ["\n  font-size: 1.5rem;\n  line-height: 150%;\n  margin-bottom: 0.75rem;\n"])));
+export var NoteTypography = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.75rem;\n  line-height: 150%;\n  margin-bottom: 0.375rem;\n"], ["\n  font-size: 0.75rem;\n  line-height: 150%;\n  margin-bottom: 0.375rem;\n"])));
+export var UpperCaseTypography = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 0.75rem;\n  line-height: 150%;\n  font-weight: 700;\n  text-transform: uppercase;\n"], ["\n  font-size: 0.75rem;\n  line-height: 150%;\n  font-weight: 700;\n  text-transform: uppercase;\n"])));
+export var Note = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), NoteTypography);
+export var Quote = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), QuoteTypography);
+export var UpperCase = styled.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), UpperCaseTypography);
+export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };
+export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/styles/z-indexes.js

@@ -0,0 +1,16 @@
+export var Z_INDEXES = {
+    hover: '1',
+    active: '2',
+    focus: '3',
+    badge: '10',
+    loader: '990',
+    dropdown: '1000',
+    sticky_menu: '1020',
+    fixed_menu: '1030',
+    backdrop: '1040',
+    off_canvas: '1050',
+    modal: '1060',
+    toast: '1070',
+    tooltip: '1080',
+    popover: '1070'
+};

package/dist/src/types.js

@@ -0,0 +1,51 @@
+export var States;
+(function (States) {
+    States["Default"] = "default";
+    States["Valid"] = "valid";
+    States["Invalid"] = "invalid";
+})(States || (States = {}));
+export var Size;
+(function (Size) {
+    Size["XXSmall"] = "xxsmall";
+    Size["XSmall"] = "xsmall";
+    Size["Small"] = "small";
+    Size["Medium"] = "medium";
+    Size["Large"] = "large";
+})(Size || (Size = {}));
+export var Position;
+(function (Position) {
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+    Position["Right"] = "right";
+    Position["Left"] = "left";
+})(Position || (Position = {}));
+export var ToastColor;
+(function (ToastColor) {
+    ToastColor[ToastColor["BLACK"] = 0] = "BLACK";
+    ToastColor[ToastColor["WHITE"] = 1] = "WHITE";
+    ToastColor[ToastColor["BLUE"] = 2] = "BLUE";
+    ToastColor[ToastColor["GREEN"] = 3] = "GREEN";
+    ToastColor[ToastColor["ORANGE"] = 4] = "ORANGE";
+    ToastColor[ToastColor["RED"] = 5] = "RED";
+})(ToastColor || (ToastColor = {}));
+export var ToastActionType;
+(function (ToastActionType) {
+    ToastActionType[ToastActionType["PRIMARY"] = 0] = "PRIMARY";
+    ToastActionType[ToastActionType["SECONDARY"] = 1] = "SECONDARY";
+})(ToastActionType || (ToastActionType = {}));
+export var ToastPosition;
+(function (ToastPosition) {
+    ToastPosition[ToastPosition["TOPLEFT"] = 0] = "TOPLEFT";
+    ToastPosition[ToastPosition["TOPMIDDLE"] = 1] = "TOPMIDDLE";
+    ToastPosition[ToastPosition["TOPRIGHT"] = 2] = "TOPRIGHT";
+    ToastPosition[ToastPosition["BOTTOMLEFT"] = 3] = "BOTTOMLEFT";
+    ToastPosition[ToastPosition["BOTTOMMIDDLE"] = 4] = "BOTTOMMIDDLE";
+    ToastPosition[ToastPosition["BOTTOMRIGHT"] = 5] = "BOTTOMRIGHT";
+})(ToastPosition || (ToastPosition = {}));
+export var ToastEntryDirection;
+(function (ToastEntryDirection) {
+    ToastEntryDirection[ToastEntryDirection["TOP"] = 0] = "TOP";
+    ToastEntryDirection[ToastEntryDirection["BOTTOM"] = 1] = "BOTTOM";
+    ToastEntryDirection[ToastEntryDirection["LEFT"] = 2] = "LEFT";
+    ToastEntryDirection[ToastEntryDirection["RIGHT"] = 3] = "RIGHT";
+})(ToastEntryDirection || (ToastEntryDirection = {}));

package/dist/src/utils/utils.js

@@ -0,0 +1,3 @@
+export var hasWindow = function () {
+    return Boolean(typeof window !== 'undefined' && window);
+};

package/dist/stories/Accordion/AccordionMenu.stories.d.ts

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

package/dist/stories/Accordion/AccordionMenu.stories.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import AccordionMenu from '../../src/Accordion/AccordionMenu';
+import { SystemIcons } from '../../src/index';
+import Checkbox from '../../src/InputFields/Checkbox';
+import RadioButton from '../../src/InputFields/RadioButton';
+import { Size } from '../../src/index';
+var meta = {
+    title: 'Components/Accordion/AccordionMenu',
+    component: AccordionMenu,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        items: [
+            {
+                id: 'item1',
+                title: 'Dummy 1',
+                children: React.createElement("div", null, "Content")
+            },
+            {
+                id: 'item2',
+                title: 'Dummy 2',
+                children: React.createElement("div", null, "Content 2")
+            }
+        ]
+    },
+};
+export var AccordionDemo = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '320px' } },
+        React.createElement("h5", null, "Small"),
+        React.createElement("h6", null, "Accordion with text"),
+        React.createElement(AccordionWithText, { size: Size.Small }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with text, multiple active"),
+        React.createElement(AccordionWithTextMultipleActive, { size: Size.Small }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with text and icons"),
+        React.createElement(AccordionWithTextAndIcons, { size: Size.Small }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with filters"),
+        React.createElement(AccordionWithFilters, { size: Size.Small }),
+        React.createElement("h5", null, "Medium"),
+        React.createElement("h6", null, "Accordion with text"),
+        React.createElement(AccordionWithText, { size: Size.Medium }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with text, multiple active"),
+        React.createElement(AccordionWithTextMultipleActive, { size: Size.Medium }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with text and icons"),
+        React.createElement(AccordionWithTextAndIcons, { size: Size.Medium }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with filters"),
+        React.createElement(AccordionWithFilters, { size: Size.Medium }),
+        React.createElement("h5", null, "Large"),
+        React.createElement("h6", null, "Accordion with text"),
+        React.createElement(AccordionWithText, { size: Size.Large }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with text, multiple active"),
+        React.createElement(AccordionWithTextMultipleActive, { size: Size.Large }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with text and icons"),
+        React.createElement(AccordionWithTextAndIcons, { size: Size.Large }),
+        React.createElement("h6", { style: { marginTop: '60px' } }, "Accordion with filters"),
+        React.createElement(AccordionWithFilters, { size: Size.Large })));
+};
+var AccordionWithText = function (props) {
+    var accordionItems = [
+        {
+            id: '1234',
+            title: 'Item label with text 1',
+            children: React.createElement("div", null, "Nam congue commodo libero ut consectetur."),
+        },
+        {
+            id: '12345',
+            title: 'Item label with text 2',
+            children: (React.createElement("div", null, "Nam congue commodo libero ut consectetur. Phasellus eget massa imperdiet, volutpat odio vel, gravida ante. Fusce non vulputate neque, a iaculis odio. Mauris ac orci risus.")),
+        },
+        {
+            id: '12346',
+            title: 'Item label with text 3',
+            children: React.createElement("div", null, "Nam congue commodo libero ut consectetur. Phasellus eget massa imperdiet, volutpat odio vel, gravida ante. Fusce non vulputate neque, a iaculis odio. "),
+        },
+    ];
+    return (React.createElement(AccordionMenu, { size: props.size, items: accordionItems, multipleActive: false }));
+};
+var AccordionWithTextMultipleActive = function (props) {
+    var accordionItems = [
+        {
+            id: '1234',
+            title: 'Item label with text 1',
+            children: React.createElement("div", null, "Nam congue commodo libero ut consectetur."),
+        },
+        {
+            id: '12345',
+            title: 'Item label with text 2',
+            children: (React.createElement("div", null, "Nam congue commodo libero ut consectetur. Phasellus eget massa imperdiet, volutpat odio vel, gravida ante. Fusce non vulputate neque, a iaculis odio. Mauris ac orci risus.")),
+        },
+        {
+            id: '12346',
+            title: 'Item label with text 3',
+            children: React.createElement("div", null, "Nam congue commodo libero ut consectetur. Phasellus eget massa imperdiet, volutpat odio vel, gravida ante. Fusce non vulputate neque, a iaculis odio. "),
+        },
+    ];
+    return (React.createElement(AccordionMenu, { size: props.size, items: accordionItems, multipleActive: true }));
+};
+var AccordionWithTextAndIcons = function (props) {
+    var accordionItems = [
+        {
+            id: '1234',
+            icon: React.createElement(SystemIcons.Book, null),
+            title: 'Item label 1 with icon',
+            children: React.createElement("div", null, "Content without icon"),
+        },
+        {
+            id: '12345',
+            icon: React.createElement(SystemIcons.GearSettings, null),
+            title: 'Item label 2 with icon',
+            children: (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                React.createElement(SystemIcons.CloudSyncing, null),
+                React.createElement("div", null, "Content with icon"))),
+        },
+        {
+            id: '12346',
+            icon: React.createElement(SystemIcons.Plus, null),
+            title: 'Disabled label',
+            disabled: true,
+            children: React.createElement("div", null, "some content 3"),
+        },
+    ];
+    return (React.createElement(AccordionMenu, { items: accordionItems, size: props.size, multipleActive: false }));
+};
+var AccordionWithFilters = function (props) {
+    var accordionItems = [
+        {
+            id: '1234',
+            icon: React.createElement(SystemIcons.Filter, null),
+            title: 'Item label with checkbox',
+            children: (React.createElement(React.Fragment, null,
+                React.createElement(Checkbox, { id: "DemoCheckbox1", selected: false, select: function () {
+                        console.log('click');
+                    }, label: "Label 1" }),
+                React.createElement(Checkbox, { id: "DemoCheckbox2", selected: false, select: function () {
+                        console.log('click');
+                    }, label: "Label 2" }))),
+        },
+        {
+            id: '12345',
+            icon: React.createElement(SystemIcons.Search, null),
+            title: 'Item label 2 with radio',
+            children: (React.createElement(React.Fragment, null,
+                React.createElement(RadioButton, { id: "DemoRadioButton1", selected: false, select: function () {
+                    }, label: "Radio 1" }),
+                React.createElement(RadioButton, { id: "DemoRadioButton2", selected: false, select: function () {
+                    }, label: "Radio 2" }))),
+        },
+    ];
+    return (React.createElement(AccordionMenu, { items: accordionItems, multipleActive: false }));
+};

package/dist/stories/Accordion/ContentAccordion.stories.d.ts

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

package/dist/stories/Accordion/ContentAccordion.stories.js

@@ -0,0 +1,234 @@
+import React from 'react';
+import ContentAccordion from '../../src/Accordion/ContentAccordion';
+import { Size } from '../../src/index';
+var meta = {
+    title: 'Components/Accordion/ContentAccordion',
+    component: ContentAccordion,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        items: [
+            {
+                id: 'item1',
+                title: 'Dummy 1',
+                header: 'Dummy header',
+                body: React.createElement("div", null, "Body of the item")
+            },
+            {
+                id: 'item2',
+                title: 'Dummy 2',
+                header: 'Dummy header 2',
+                body: React.createElement("div", null, "Body of the item 2")
+            }
+        ]
+    },
+};
+var ContentAccordionItemsWithBody = [
+    {
+        id: 'item1',
+        key: '1',
+        title: 'Item 1',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        id: 'item2',
+        key: '2',
+        title: 'Item 2',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        id: 'item3',
+        key: '3',
+        title: 'Item 3',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        disabled: true
+    },
+    {
+        id: 'item4',
+        key: '4',
+        title: 'Item 4',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }
+];
+var ContentAccordionItemsWithBodyAndHeader = [
+    {
+        id: 'item1',
+        key: '1',
+        title: 'Item 1',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 1'
+    },
+    {
+        id: 'item2',
+        key: '2',
+        title: 'Item 2',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 2'
+    },
+    {
+        id: 'item3',
+        key: '3',
+        title: 'Item 3',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 3',
+        disabled: true
+    },
+    {
+        id: 'item4',
+        key: '4',
+        title: 'Item 4',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 4'
+    }
+];
+var ContentAccordionItemsWithBodyAndHeaderAndFooter = [
+    {
+        id: 'item1',
+        key: '1',
+        title: 'Item 1',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 1',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>
+    },
+    {
+        id: 'item2',
+        key: '2',
+        title: 'Item 2',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 2',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>
+    },
+    {
+        id: 'item3',
+        key: '3',
+        title: 'Item 3',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 3',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>,
+        disabled: true
+    },
+    {
+        id: 'item4',
+        key: '4',
+        title: 'Item 4',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        header: 'Header 4',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>
+    }
+];
+var ContentAccordionItemsWithBodyAndFooter = [
+    {
+        id: 'item1',
+        key: '1',
+        title: 'Item 1',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>
+    },
+    {
+        id: 'item2',
+        key: '2',
+        title: 'Item 2',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>
+    },
+    {
+        id: 'item3',
+        key: '3',
+        title: 'Item 3',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>,
+        disabled: true
+    },
+    {
+        id: 'item4',
+        key: '4',
+        title: 'Item 4',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        //footer: <img src={Image} alt="Placeholder" width={'100%'}/>
+    }
+];
+export var ContentAccordionDemo = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        React.createElement("h5", null, "Small"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement("h6", null, "content accordion with body"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBody, multi: false, size: Size.Small })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBody, multi: true, size: Size.Small }))),
+            React.createElement("h6", null, "content accordion with body and header"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeader, multi: false, size: Size.Small })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeader, multi: true, size: Size.Small }))),
+            React.createElement("h6", null, "content accordion with body and footer"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndFooter, multi: false, size: Size.Small })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndFooter, multi: true, size: Size.Small }))),
+            React.createElement("h6", null, "content accordion with body, header and footer"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeaderAndFooter, multi: false, size: Size.Small })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeaderAndFooter, multi: true, size: Size.Small })))),
+        React.createElement("h5", null, "Medium"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement("h6", null, "content accordion with body"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBody, multi: false, size: Size.Medium })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBody, multi: true, size: Size.Medium }))),
+            React.createElement("h6", null, "content accordion with body and header"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeader, multi: false, size: Size.Medium })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeader, multi: true, size: Size.Medium }))),
+            React.createElement("h6", null, "content accordion with body and footer"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndFooter, multi: false, size: Size.Medium })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndFooter, multi: true, size: Size.Medium }))),
+            React.createElement("h6", null, "content accordion with body, header and footer"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeaderAndFooter, multi: false, size: Size.Medium })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeaderAndFooter, multi: true, size: Size.Medium })))),
+        React.createElement("h5", null, "Large"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement("h6", null, "content accordion with body"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBody, multi: false, size: Size.Large })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBody, multi: true, size: Size.Large }))),
+            React.createElement("h6", null, "content accordion with body and header"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeader, multi: false, size: Size.Large })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeader, multi: true, size: Size.Large }))),
+            React.createElement("h6", null, "content accordion with body and footer"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndFooter, multi: false, size: Size.Large })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndFooter, multi: true, size: Size.Large }))),
+            React.createElement("h6", null, "content accordion with body, header and footer"),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeaderAndFooter, multi: false, size: Size.Large })),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '50%' } },
+                    React.createElement(ContentAccordion, { items: ContentAccordionItemsWithBodyAndHeaderAndFooter, multi: true, size: Size.Large }))))));
+};