@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
159 lines (158 loc) • 13.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { AutoFocusInside } from 'react-focus-on';
import { Button, Card, Checkbox, Disclosure, Elevator, InfoState, Popover, ResponsiveProvider, Select, Stack, Tab, Text, Textfield, } from '../..';
import { Modal } from './modal';
const longText = (_jsx(Text, { variant: "body-1", children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore cumque voluptate in ut iste reiciendis ipsa nihil accusantium illum ea ullam quasi voluptatibus, reprehenderit maxime placeat laborum, quam debitis, perferendis nemo cum cupiditate dolorem esse. Distinctio excepturi pariatur doloribus, nostrum nesciunt provident. Placeat debitis a odit nesciunt perspiciatis? Nihil aliquam obcaecati ab, quas magni aut suscipit et similique alias nulla repudiandae beatae, aliquid, saepe porro libero officiis ullam cumque quidem eius odio voluptatibus. Reiciendis, vel asperiores? Facilis, provident inventore iure ea a odit suscipit! Aspernatur quae odio neque labore? Quidem esse earum hic excepturi amet sequi porro aperiam eos iste mollitia aut a omnis praesentium sit, asperiores consequatur harum itaque in quam. Quisquam dolores sint eaque dicta quia velit repellat suscipit provident facere repellendus molestias accusantium obcaecati ratione distinctio qui nesciunt totam quas, a ipsum. Possimus exercitationem, velit quibusdam dicta, et quidem dolorum provident voluptatibus facilis quasi nisi incidunt magni quis officia obcaecati laborum perferendis aliquid consequatur itaque corrupti similique ex reprehenderit expedita suscipit. Ipsum quidem possimus doloribus ut, id debitis, officiis, totam assumenda dolore recusandae impedit in tempore neque unde? Repellat necessitatibus in tempora ipsam officiis quam cumque alias. Sed saepe iure ullam, pariatur quo incidunt vero sapiente exercitationem numquam obcaecati suscipit mollitia aspernatur iste esse quia facere magni praesentium! Alias corrupti vitae odit animi magnam ut ad, voluptates hic consequatur dolorum aliquam suscipit quidem assumenda omnis velit, modi commodi exercitationem rerum! Inventore officia, nobis sunt enim quisquam explicabo molestias suscipit esse eaque cumque fugit autem perspiciatis temporibus nisi non. Quae aut nam aliquam accusamus officiis impedit suscipit deleniti ipsa saepe, est facere iusto quam molestias in voluptate error qui porro, veritatis labore iste commodi deserunt ipsum sed? Corrupti unde animi esse deleniti eligendi distinctio, recusandae ratione earum libero sunt nisi impedit repellat aspernatur, quisquam eius iste reiciendis maxime." }));
const story = {
title: 'Dialogs/Modal',
component: Modal,
argTypes: {
theme: {
options: ['light', 'dark', 'auto'],
control: { type: 'select' },
},
overlayColor: {
options: ['light', 'dark', 'auto'],
control: { type: 'select' },
},
size: {
options: ['small', 'medium', 'large'],
control: { type: 'select' },
},
},
args: {
title: 'Modal Title',
subtitle: 'Subtitle',
overlayColor: 'dark',
hideCloseButton: false,
hideHeaderBorder: false,
hideFooterBorder: false,
alignActionCenter: false,
alignContentCenter: false,
size: 'medium',
theme: 'auto',
isLoading: false,
preventCloseOnClickOutside: false,
content: longText,
primaryAction: _jsx(Button, { onClick: () => alert('Primary Action'), children: "Action 1" }),
secondaryAction: _jsx(Button, { onClick: () => alert('Secondary Action'), children: "Action 2" }),
tertiaryAction: undefined,
},
};
export default story;
const DefaultTemplate = (args) => {
const [isVisible, setIsVisible] = useState(false);
return (_jsxs(ResponsiveProvider, { children: [_jsx(Button, { onClick: () => setIsVisible(true), children: "Show Modal" }), _jsx(Modal, { ...args, isVisible: isVisible, onCloseModal: () => setIsVisible(false) })] }));
};
export const Default = DefaultTemplate.bind({});
export const Inverse = DefaultTemplate.bind({});
Inverse.args = {
theme: 'dark',
overlayColor: 'light',
};
export const LoadingContent = DefaultTemplate.bind({});
LoadingContent.args = {
isLoading: true,
primaryAction: _jsx(Button, { onClick: () => alert('Primary Action'), disabled: true, children: "Action 1" }),
secondaryAction: _jsx(Button, { onClick: () => alert('Secondary Action'), disabled: true, children: "Action 2" }),
};
export const Confirmation = DefaultTemplate.bind({});
Confirmation.args = {
title: 'Delete account?',
subtitle: undefined,
hideHeaderBorder: true,
content: _jsx(Text, { variant: "body-1", children: "Are you sure you want to delete your account? This action cannot be undone." }),
hideFooterBorder: true,
primaryAction: _jsx(Button, { children: "Delete" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
};
export const WithSimpleForm = DefaultTemplate.bind({});
WithSimpleForm.args = {
title: 'Enter your details',
subtitle: undefined,
content: (_jsxs(Stack, { rowGap: 16, children: [_jsx(Textfield, { label: "First name" }), _jsx(Textfield, { label: "Last name" })] })),
hideFooterBorder: true,
primaryAction: _jsx(Button, { children: "Submit" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
};
export const WithComplexForm = DefaultTemplate.bind({});
WithComplexForm.args = {
title: 'Tell us more about yourself',
subtitle: 'You may add a description here',
content: (_jsxs(Stack, { rowGap: 16, children: [_jsx(Textfield, { label: "Enter your full name", messag: "Sample hint text" }), _jsxs(Select, { placeholder: "Select", label: "How would you describe the interface?", children: [_jsxs("optgroup", { label: "Option Group", children: [_jsx("option", { children: "Option 1" }), _jsx("option", { children: "Option 2" }), _jsx("option", { children: "Option 3" })] }), _jsxs("optgroup", { label: "Option Group 2", children: [_jsx("option", { children: "Option 4" }), _jsx("option", { children: "Option 5" }), _jsx("option", { children: "Option 6" })] })] }), _jsx(Textfield, { textarea: true, label: "Is there anything you'd like to add?", value: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, earum." })] })),
primaryAction: _jsx(Button, { children: "Submit" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
};
export const WithThirdAction = DefaultTemplate.bind({});
WithThirdAction.args = {
title: 'Enter your details',
subtitle: undefined,
content: (_jsxs(Stack, { rowGap: 16, children: [_jsx(Textfield, { label: "First name" }), _jsx(Textfield, { label: "Last name" })] })),
hideFooterBorder: true,
primaryAction: _jsx(Button, { children: "Submit" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
tertiaryAction: _jsx(Checkbox, { label: "Remember me", defaultChecked: true, dimension: "small" }),
};
export const WithAList = DefaultTemplate.bind({});
WithAList.args = {
title: 'Modal with a list',
subtitle: undefined,
content: (_jsxs(Stack, { rowGap: 16, children: [_jsx(Text, { variant: "body-1", children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, earum." }), _jsxs("ul", { children: [_jsx("li", { children: _jsx(Text, { variant: "body-1", children: "List item content" }) }), _jsx("li", { children: _jsx(Text, { variant: "body-1", children: "List item content" }) }), _jsx("li", { children: _jsx(Text, { variant: "body-1", children: "List item content" }) })] })] })),
primaryAction: _jsx(Button, { children: "Primary" }),
secondaryAction: _jsx(Button, { children: "Secondary" }),
};
const withImageContent = (_jsxs(Stack, { hAlign: "center", vAlign: "center", rowGap: 24, children: [_jsx("img", { src: "https://wonderimages.gumlet.io/placeholders/illustration.png?format=webp&q=100", alt: "modal illustartion", width: "400px", height: "auto" }), _jsxs(Stack, { hAlign: "center", children: [_jsx(Text, { variant: "heading-5", children: "Title goes here" }), _jsx(Text, { variant: "body-2", children: "Subtitle goes here" })] })] }));
export const WithImage = DefaultTemplate.bind({});
WithImage.args = {
title: undefined,
subtitle: undefined,
content: withImageContent,
hideFooterBorder: true,
alignContentCenter: true,
alignActionCenter: true,
primaryAction: _jsx(Button, { children: "Primary" }),
secondaryAction: _jsx(Button, { children: "Secondary" }),
};
const formWithin = (_jsxs(Stack, { rowGap: 24, style: { marginTop: '24px' }, children: [_jsxs(Stack, { direction: "row", columnGap: 24, children: [_jsx(Textfield, { label: "Label", placeHolder: "Sample value" }), _jsx(Textfield, { label: "Label", placeHolder: "Sample value" })] }), _jsx(Textfield, { label: "Label", placeHolder: "Sample value" })] }));
const withTabsContent = (_jsxs(Tab, { defaultValue: "1", dimension: "regular", children: [_jsx(Tab.Panel, { value: "1", label: "Tab 1", children: formWithin }), _jsx(Tab.Panel, { value: "2", label: "Tab 2", children: formWithin }), _jsx(Tab.Panel, { value: "3", label: "Tab 3", children: formWithin })] }));
export const WithTabs = DefaultTemplate.bind({});
WithTabs.args = {
title: 'Modal title',
subtitle: 'Subtitle',
content: withTabsContent,
primaryAction: _jsx(Button, { children: "Confirm" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
};
const complexNesting = (_jsx(Stack, { vPadding: 8, children: _jsx(Popover, { placement: "bottom-start", trigger: (_jsx(Textfield, { type: "text", label: "Topic", placeholder: "Select a Topic" })), children: _jsx(Elevator, { resting: 1, children: _jsx(Card, { children: _jsx(AutoFocusInside, { children: _jsxs(Tab, { defaultValue: "1", dimension: "regular", children: [_jsx(Tab.Panel, { value: "1", label: "Tab 1", children: _jsx(Card, { children: _jsx(Stack, { children: _jsx(Disclosure, { summary: "Disclosure 1", children: "Content Tab 1" }) }) }) }), _jsx(Tab.Panel, { value: "2", label: "Tab 2", children: _jsx(Card, { children: _jsx(Stack, { children: _jsx(Disclosure, { summary: "Disclosure 2", children: "Content Tab 2" }) }) }) }), _jsx(Tab.Panel, { value: "3", label: "Tab 3", children: _jsx(Card, { children: _jsx(Stack, { children: _jsx(Disclosure, { summary: "Disclosure 3", children: "Content Tab 3" }) }) }) })] }) }) }) }) }) }));
export const withNestedElements = DefaultTemplate.bind({});
withNestedElements.args = {
title: 'With Nested Elements',
subtitle: undefined,
content: complexNesting,
primaryAction: _jsx(Button, { children: "Confirm" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
};
export const withDisclosure = DefaultTemplate.bind({});
withDisclosure.args = {
title: 'With Disclosed Content',
content: (_jsxs(Stack, { rowGap: 16, children: [_jsx(Text, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea facilis similique ab?" }), _jsx(Disclosure, { dimension: "small", summary: "Lorem 12", iconPosition: "right", children: _jsx(Text, { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam sequi laudantium quibusdam?" }) }), _jsx(Disclosure, { dimension: "small", summary: "Lorem 16", iconPosition: "right", children: _jsx(Text, { children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod incidunt temporibus tempora laborum quisquam, fugiat voluptas?" }) }), _jsx(Disclosure, { dimension: "small", summary: "Lorem 24", iconPosition: "right", children: _jsx(Text, { children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque repellat dicta molestias facere, vero possimus reiciendis odio delectus tenetur voluptatum quis. Quam, eaque quo?" }) })] })),
alignActionCenter: true,
primaryAction: _jsx(Button, { children: "OK" }),
secondaryAction: undefined,
};
export const withHeroIcon = DefaultTemplate.bind({});
withHeroIcon.args = {
title: undefined,
subtitle: undefined,
content: (_jsx(InfoState, { title: "Delete user?", direction: "column", icon: "trash-can", iconColor: "red", children: _jsxs(Stack, { hAlign: "center", children: [_jsx(Text, { children: "Are you sure you want to delete this user?" }), _jsx(Text, { children: "This action cannot be undone." })] }) })),
hideFooterBorder: true,
primaryAction: _jsx(Button, { children: "Delete" }),
secondaryAction: _jsx(Button, { children: "Cancel" }),
alignContentCenter: true,
};
const CustomTemplate = (args) => {
const [isVisible, setIsVisible] = useState(false);
return (_jsxs(ResponsiveProvider, { children: [_jsx(Button, { onClick: () => setIsVisible(true), children: "Show Modal" }), _jsxs(Modal, { ...args, isVisible: isVisible, onCloseModal: () => setIsVisible(false), children: [_jsxs(Modal.Header, { children: [_jsx("p", { children: "custom header content here" }), _jsx("p", { children: "custom header content here" }), _jsx("p", { children: "custom header content here" })] }), _jsx(Modal.Content, { children: longText }), _jsxs(Modal.Footer, { children: [_jsx("p", { children: "custom footer content here" }), _jsx("p", { children: "custom footer content here" }), _jsx("p", { children: "custom footer content here" })] })] })] }));
};
export const Custom = CustomTemplate.bind({});