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

package/dist/stories/Button/Button.stories.js

@@ -0,0 +1,499 @@
+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 { action } from '@storybook/addon-actions';
+import Button from '../../src/Button/Button';
+import { SystemIcons } from '../../src/icons';
+import COLORS from '../../src/styles/colors';
+import { Size } from '../../src/types';
+import styled from 'styled-components';
+var meta = {
+    title: 'Components/Button/Button',
+    component: Button,
+    tags: ['autodocs']
+};
+export default meta;
+export var Primary = {
+    args: {
+        children: 'Label'
+    }
+};
+var ButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var ButtonWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n"], ["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n"])));
+export var TextButtonDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("div", null,
+        React.createElement("h4", null, "All button variations"),
+        React.createElement("div", { style: { border: 'solid 1px #DEDADA', borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", null, "Primary (contained button)"),
+            React.createElement("p", null, "The primary button is used to communicate the most important action."),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", loading: true }, "Hello Storybook")))),
+        React.createElement("div", { style: { border: 'solid 1px #DEDADA', borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", null, "Secondary (outlined button)"),
+            React.createElement("p", null, "The secondary button is used to communicate all secondary choices of call to action."),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", loading: true }, "Hello Storybook")))),
+        React.createElement("div", { style: { border: 'solid 1px #DEDADA', borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", null, "Tertiary (text button)"),
+            React.createElement("p", null, "We use this option on non white backgrounds or if the importance of a button is very very low, but we need to have it there."),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", loading: true }, "Hello Storybook")))),
+        React.createElement("div", { style: { border: 'solid 1px #DEDADA', borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", null, "Positive "),
+            React.createElement("p", null, "Only use in combination with red button, as the opposide choice, for example \u201DKeep project\u201D or \u201DYes, accept\u201D. "),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "positive" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "positive", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "positive", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "positive" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "positive", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "positive", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "positive" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "positive", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "positive", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "positive", loading: true }, "Hello Storybook")))),
+        React.createElement("div", { style: { border: 'solid 1px #DEDADA', borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", null, "Critical "),
+            React.createElement("p", null, "Typically used for confirming destructive actions or opposite a positive button, for example \"Delete user\" or \"No, Cancel\"."),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", null, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "critical" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "critical", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "critical", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "critical" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "critical", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "critical", loading: true }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "critical" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "hover-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "active-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "critical", disabled: true }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "critical", className: "focus-state" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "critical", loading: true }, "Hello Storybook")))),
+        React.createElement("div", { style: { background: COLORS.neutral_800, borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", { style: { color: COLORS.white } }, "Primary Button (for dark background)"),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "primary", loading: true, colorTheme: "dark" }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "primary", loading: true, colorTheme: "dark" }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "primary", loading: true, colorTheme: "dark" }, "Hello Storybook")))),
+        React.createElement("div", { style: { background: COLORS.neutral_800, borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", { style: { color: COLORS.white } }, "Secondary Button (for dark background)"),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", loading: true, colorTheme: "dark" }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", loading: true, colorTheme: "dark" }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "secondary", loading: true, colorTheme: "dark" }, "Hello Storybook")))),
+        React.createElement("div", { style: { background: COLORS.neutral_800, borderRadius: '4px', padding: '16px', marginBottom: '16px' } },
+            React.createElement("h5", { style: { color: COLORS.white } }, "Tertiary Button (for dark background)"),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Normal State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Hover State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Pressed State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Disabled State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Focus State")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement("h6", { style: { color: COLORS.white } }, "Loading State"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Small, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", loading: true, colorTheme: "dark" }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Medium, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", loading: true, colorTheme: "dark" }, "Hello Storybook"))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "hover-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "active-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", disabled: true, colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", className: "focus-state", colorTheme: "dark" }, "Hello Storybook")),
+                React.createElement(ButtonWrapper, null,
+                    React.createElement(Button, { size: Size.Large, icon: React.createElement(SystemIcons.Add, null), variant: "tertiary", loading: true, colorTheme: "dark" }, "Hello Storybook"))))))); };
+export var TextButtonStates = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Button states"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '32px 0px', gap: '16px' } },
+        React.createElement(Button, { variant: 'primary', size: Size.Medium, onClick: action('Clicked button') }, "Normal state"),
+        React.createElement(Button, { variant: 'primary', size: Size.Medium, className: "hover-state", onClick: action('Clicked button') }, "Hover state"),
+        React.createElement(Button, { variant: 'primary', size: Size.Medium, className: "active-state", onClick: action('Clicked button') }, "Pressed state"),
+        React.createElement(Button, { variant: 'primary', size: Size.Medium, className: "focus-state", onClick: action('Clicked button') }, "Focus state"),
+        React.createElement(Button, { variant: 'primary', size: Size.Medium, className: "disabled-state", onClick: action('Clicked button') }, "Disabled state")))); };
+export var TextButtonSizes = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Button sizes"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px', gap: '80px' } },
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '480px', gap: '16px' } },
+            React.createElement("h6", null, "Auto width (default)"),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'row', gap: '8px' } },
+                React.createElement(Button, { size: Size.Small }, "Small button"),
+                React.createElement(Button, { size: Size.Medium }, "Medium button"),
+                React.createElement(Button, { size: Size.Large }, "Large button"))),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: '480px', gap: '16px' } },
+            React.createElement("h6", null, "Manual width"),
+            React.createElement(Button, { size: Size.Small, width: '400px' }, "Small button with custom width"),
+            React.createElement(Button, { size: Size.Medium, width: '400px' }, "Medium button with custom width"),
+            React.createElement(Button, { size: Size.Large, width: '400px' }, "Large button with custom width"))))); };
+export var TextButtonVariants = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h3", null, "Button styles"),
+    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px', gap: '80px' } },
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', width: 'auto', padding: '16px', gap: '16px' } },
+            React.createElement(Button, { variant: "primary" }, "Primary"),
+            React.createElement(Button, { variant: "secondary" }, "Secondary"),
+            React.createElement(Button, { variant: "tertiary" }, "Tertiary"),
+            React.createElement(Button, { variant: "positive" }, "Positive"),
+            React.createElement(Button, { variant: "critical" }, "Critical")),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', background: COLORS.neutral_800, width: 'auto', padding: '16px', gap: '16px' } },
+            React.createElement(Button, { variant: "primary", colorTheme: 'dark' }, "Primary inverted"),
+            React.createElement(Button, { variant: "secondary", colorTheme: 'dark' }, "Secondary inverted"))))); };
+var templateObject_1, templateObject_2;

package/dist/stories/Button/DualFunctionButton.stories.d.ts

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