import React from "react";
import { storiesOf } from "@storybook/react";
import { Typography } from "../Typography/typography";

const storiesForRow = storiesOf("Informational|Typography", module);
storiesForRow.addDecorator(story => <div id="root-preview">{story()}</div>);

storiesForRow.add("Default", () => {
    return (
        <>
            <Typography tag="h1" type="header1">Header 1</Typography>
            <Typography tag="h2" type="header2">Header 2</Typography>
            <Typography tag="h3" type="header3">Header 3</Typography>
            <Typography tag="h4" type="header4">Header 4</Typography>
            <Typography tag="h5" type="header5">Header 5</Typography>
            <Typography tag="p" type="subhead">Subhead</Typography>
            <Typography tag="p" type="body">Body</Typography>
            <Typography tag="p" type="caption">Caption</Typography>
            <Typography tag="p" type="xs">xs</Typography>
            <Typography tag="p" type="xxs">xxs</Typography>
        </>
    );
});
