@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
41 lines (40 loc) • 1.52 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Stack } from '../..';
import { InfoState } from './info-state';
const story = {
title: 'Dialogs/InfoState',
component: InfoState,
args: {
title: 'Sample very long title',
},
argTypes: {
iconColor: {
options: ['gray', 'cyan', 'green', 'purple', 'yellow', 'red', 'blue'],
control: { type: 'select' },
},
},
};
export default story;
const Template = args => (_jsx(InfoState, { ...args, children: _jsx(Stack, { hAlign: "center", fill: false, children: "Cras ultricies, elit sit amet cursus consectetur, risus felis ullamcorper nulla, ut scelerisque sapien lorem non sem." }) }));
export const Default = Template.bind({});
Default.args = {
icon: 'compass',
};
export const Horizontal = Template.bind({});
Horizontal.args = {
direction: 'row',
icon: 'compass',
};
export const WithImage = Template.bind({});
WithImage.args = {
image: 'https://wonderimages.gumlet.io/placeholders/illustration.png?format=webp&q=100',
};
export const WithImageHorizontal = Template.bind({});
WithImageHorizontal.args = {
direction: 'row',
image: 'https://wonderimages.gumlet.io/placeholders/illustration.png?format=webp&q=100',
};
export const WithActions = Template.bind({});
WithActions.args = {
actions: _jsxs(_Fragment, { children: [_jsx(Button, { children: "Primary" }), _jsx(Button, { kind: "flat", children: "Secondary" })] }),
};