@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
85 lines (84 loc) • 10.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, Chip, Container, Separator, Stack, Symbol, } from '../..';
import { Text } from './text';
const story = {
title: 'Typography/Text',
component: Text,
args: {
variant: 'body-1',
color: undefined,
children: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius dolores, tempore quas labore officiis praesentium. Porro sed dolorem, numquam temporibus consequuntur quam doloremque ducimus error tempora illo aliquam nesciunt nostrum!',
textAlign: 'start',
preventBreakWord: false,
truncate: false,
maxWidth: '',
preventResponsive: false,
anchor: false,
},
argTypes: {
variant: {
options: [
'display-1',
'display-2',
'display-3',
'display-4',
'heading-1',
'heading-2',
'heading-3',
'heading-4',
'heading-5',
'heading-6',
'tagline-1',
'tagline-2',
'tagline-3',
'subtitle-1',
'subtitle-2',
'body-1',
'body-2',
'body-3'
],
control: { type: 'select' },
},
color: {
options: ['positive', 'informative', 'danger', 'warning', 'neutral', 'dark'],
control: { type: 'select' },
},
textAlign: {
options: ['start', 'center', 'end', 'justify'],
control: { type: 'inline-radio' },
},
},
};
export default story;
const Template = args => _jsx(Container, { dimension: "fixed", children: _jsx(Text, { ...args }) });
export const Default = Template.bind({});
const TemplateVariants = () => {
const variants = ['display-1', 'display-2', 'display-3', 'display-4', 'heading-1', 'heading-2', 'heading-3',
'heading-4', 'heading-5', 'heading-6', 'tagline-1', 'tagline-2', 'tagline-3', 'subtitle-1', 'subtitle-2', 'body-1', 'body-2', 'body-3'];
return (_jsx(Container, { dimension: "fixed", children: _jsx(Stack, { rowGap: 16, children: variants.map(e => (_jsxs("div", { children: [_jsx(Text, { variant: "body-3", children: e }), _jsx(Text, { variant: e, children: "Wonderflow" })] }, e))) }) }));
};
export const Variants = TemplateVariants.bind({});
const TemplateColors = () => {
const colors = ['positive', 'informative', 'danger', 'warning', 'neutral', 'dark'];
return (_jsx(Container, { dimension: "fixed", children: colors.map(e => _jsx(Text, { variant: "heading-1", color: e, children: e }, e)) }));
};
export const Colors = TemplateColors.bind({});
const TemplateTitle = () => {
const variants = ['display-1', 'display-2', 'display-3', 'display-4', 'heading-1', 'heading-2', 'heading-3',
'heading-4', 'heading-5', 'heading-6'];
return (_jsxs(Container, { dimension: "fixed", children: [variants.map(e => _jsx(Text, { variant: e, id: e, anchor: true, children: e }, e)), variants.map(e => _jsx(Text, { variant: e, id: `${e}-danger`, anchor: true, color: "danger", children: e }, e))] }));
};
export const TitleWithAnchor = TemplateTitle.bind({});
const TemplateConstraint = args => (_jsx(Container, { dimension: "fixed", children: _jsx(Card, { dimmed: 0, bordered: true, style: { width: '300px', height: '200px' }, children: _jsx(Text, { ...args }) }) }));
export const withConstraint = TemplateConstraint.bind({});
withConstraint.args = {
children: 'Loremipsumdolor,sitametconsecteturadipisicingelit.Impeditautnonfugitanimiab?\nNemo,illumrepudiandaeaharumexvoluptateveritatisearumassumendasuscipit!',
};
const TemplateDecorators = () => {
const variants = ['body-1', 'body-2', 'body-3'];
const sizes = ['small', 'medium', 'big'];
return (_jsx(Container, { dimension: "fixed", children: _jsx(Stack, { rowGap: 40, children: variants.map(v => (_jsxs(Stack, { rowGap: 8, children: [_jsx(Text, { variant: v, color: "informative", decoratorSize: sizes[0], decoratorStart: _jsx(Symbol, { source: "circle-check", weight: "solid" }), decoratorEnd: _jsx(Chip, { color: "cyan", children: sizes[0] }), children: v }), _jsx(Text, { variant: v, decoratorSize: sizes[1], decoratorStart: _jsx(Symbol, { source: "circle-check", weight: "solid" }), decoratorEnd: _jsx(Chip, { color: "green", children: sizes[1] }), children: v }), _jsx(Text, { variant: v, decoratorSize: sizes[2], decoratorStart: _jsx(Symbol, { source: "circle-check", weight: "outline", color: "var(--highlight-red-foreground)" }), decoratorEnd: _jsx(Chip, { color: "red", children: sizes[2] }), children: v })] }, v))) }) }));
};
export const withDecorators = TemplateDecorators.bind({});
const TemplatePairing = () => (_jsxs(Stack, { rowGap: 32, children: [_jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "display-1", preventResponsive: true, children: "96px display-1" }), _jsx(Text, { variant: "tagline-1", preventResponsive: true, children: "28px tagline-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "display-2", preventResponsive: true, children: "80px display-2" }), _jsx(Text, { variant: "tagline-1", preventResponsive: true, children: "28px tagline-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "display-3", preventResponsive: true, children: "68px display-3" }), _jsx(Text, { variant: "tagline-2", preventResponsive: true, children: "24px tagline-2 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "display-4", preventResponsive: true, children: "56px display-4" }), _jsx(Text, { variant: "tagline-2", preventResponsive: true, children: "24px tagline-2 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "tagline-3", preventResponsive: true, children: "20px tagline-3" }), _jsx(Text, { variant: "heading-1", preventResponsive: true, children: "48px heading-1" }), _jsx(Text, { variant: "tagline-3", children: "20px tagline-3" })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "subtitle-1", children: "16px subtitle-1" }), _jsx(Text, { variant: "heading-1", preventResponsive: true, children: "48px heading-1" }), _jsx(Text, { variant: "body-1", children: "16px body-1" })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-1", preventResponsive: true, children: "48px heading-1" }), _jsx(Text, { variant: "body-1", children: "16px as body-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-2", preventResponsive: true, children: "40px heading-2" }), _jsx(Text, { variant: "body-1", children: "16px as body-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { children: [_jsx(Text, { variant: "subtitle-1", color: "danger", children: "Heading Title with Body text" }), _jsx(Separator, {})] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-3", preventResponsive: true, children: "32px heading-3" }), _jsx(Text, { variant: "body-1", children: "16px as body-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-4", preventResponsive: true, children: "28px heading-4" }), _jsx(Text, { variant: "body-1", children: "16px as body-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-5", preventResponsive: true, children: "24px heading-5" }), _jsx(Text, { variant: "body-1", children: "16px as body-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-6", preventResponsive: true, children: "20px heading-6" }), _jsx(Text, { variant: "body-1", children: "16px as body-1 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "heading-6", preventResponsive: true, children: "20px heading-6" }), _jsx(Text, { variant: "body-2", children: "14px as body-2 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "subtitle-1", children: "16px subtitle-1" }), _jsx(Text, { variant: "body-2", children: "14px as body-2 Lorem ipsum sit amet, consectur adipiscing elit. Fusce aliquet cursus." })] }), _jsxs("div", { children: [_jsx(Text, { variant: "subtitle-1", color: "danger", children: "Title with eyebrow text" }), _jsx(Separator, {})] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "subtitle-1", children: "16px subtitle-1" }), _jsx(Text, { variant: "heading-4", preventResponsive: true, children: "28px heading-4" })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "subtitle-2", children: "14px subtitle-2" }), _jsx(Text, { variant: "heading-5", preventResponsive: true, children: "24px heading-5" })] }), _jsxs("div", { children: [_jsx(Text, { variant: "subtitle-1", color: "danger", children: "Paragraph with text" }), _jsx(Separator, {})] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { children: "16px as body-1" }), _jsx(Text, { variant: "body-3", children: "12px as body-3" })] }), _jsxs("div", { style: { maxWidth: '800px' }, children: [_jsx(Text, { variant: "body-2", children: "14px as body-2" }), _jsx(Text, { variant: "body-3", children: "12px as body-3" })] })] }));
export const sizePairing = TemplatePairing.bind({});