lucid-ui/dist/esm/components/Typography/Typography.stories.js

A UI component library from Xandr.

import React from 'react';
import HelpIcon from './../Icon/HelpIcon/HelpIcon';
import ToolTip from './../ToolTip/ToolTip';
import Typography from './Typography';
export default {
    title: 'Text/Typography',
    component: Typography,
    parameters: {
        docs: {
            description: {
                component: Typography.peek.description,
            },
        },
    },
};
/* Variants */
export const Variants = (args) => {
    const { Title, Target } = ToolTip;
    return (React.createElement("section", null,
        React.createElement(Typography, { ...args, variant: 'h1' }, "h1. Heading"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'h2' }, "h2. Heading"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'h3' }, "h3. Heading"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'p' }, "p. paragraph text"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'tabular' }, "tabular. text for tables"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'a' }, "a. link text"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'pre' }, "pre. preformatted text"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'code' }, "code. snazzy code"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'kbd' }, "kbd. keyboard inputs"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'samp' }, "samp. sample code outputs"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'span' },
            "span. sample code outputs with help bubble",
            React.createElement("div", { className: 'HelpBubble' },
                React.createElement(ToolTip, { alignment: 'start', direction: 'right' },
                    React.createElement(Title, { className: 'HelpBubble-title' }, "look at me"),
                    React.createElement(Target, null,
                        React.createElement(HelpIcon, { size: 12 }))))),
        ' ',
        React.createElement("br", null)));
};
/* Nested */
export const Nested = (args) => {
    return (React.createElement("section", null,
        React.createElement(Typography, { ...args, variant: 'h1' }, "Title"),
        React.createElement(Typography, { ...args, variant: 'h2' }, "subtitle"),
        React.createElement(Typography, { ...args, variant: 'p' }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pencil mustachioed graeme souness, mustachioed waxy gurn rugged el snort graeme souness burt reynolds educated village people boogie nights pencil man of the year 1986, pencil village people graeme souness rugged boogie nights mouthbrow educated burt reynolds waxy gurn man of the year 1986 des lynam charming villain mustachioed cardinal richelieu el snort. Borat d\u2019artagnan hungarian testosterone trophy frontiersman hairy kiss. beefeater chevron, hairy kiss. cardinal richelieu groucho-a-like testosterone trophy d\u2019artagnan dick van dyke rugged chevron Droopy frontiersman borat beefeater hungarian chevron, cardinal richelieu d\u2019artagnan beefeater el snort Droopy dodgy uncle clive groucho-a-like hairy kiss. chevron frontiersman chevron dick van dyke walrus leader of men rugged borat bad guy testosterone trophy groucho-a-like alpha trion hungarian."),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'a', style: { display: 'block' } }, "Like!"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'a', style: { display: 'block' } }, "Subscribe!"),
        React.createElement("br", null),
        React.createElement(Typography, { ...args, variant: 'h3' }, "Code Example"),
        React.createElement(Typography, { ...args, variant: 'code' }, "npm install all-the-things")));
};
//# sourceMappingURL=Typography.stories.js.map