import React from "react";
import { storiesOf } from "@storybook/react";
import Examples from "../../storybook-components/Examples";
import Story from "../../storybook-components/Story";
import { Box } from "../Box";
import { SmallCaps } from "../SmallCaps";
import { Heading } from "./Heading";

const stories = storiesOf("Components/Typography/Heading", module);

stories.add("Default", () => (
  <Story title="Heading">
    <Examples>
      <Box className="mb-8">
        <SmallCaps className="mb-2">Heading 1</SmallCaps>
        <Heading.H1>The quick brown fox jumps over the lazy dog</Heading.H1>
      </Box>

      <Box className="mb-8">
        <SmallCaps className="mb-2">Heading 2</SmallCaps>
        <Heading.H2>The quick brown fox jumps over the lazy dog</Heading.H2>
      </Box>

      <Box className="mb-8">
        <SmallCaps className="mb-2">Heading 3</SmallCaps>
        <Heading.H3>The quick brown fox jumps over the lazy dog</Heading.H3>
      </Box>

      <Box className="mb-8">
        <SmallCaps className="mb-2">Heading 4</SmallCaps>
        <Heading.H4>The quick brown fox jumps over the lazy dog</Heading.H4>
      </Box>

      <Box className="mb-8">
        <SmallCaps className="mb-2">Heading 5</SmallCaps>
        <Heading.H5>The quick brown fox jumps over the lazy dog</Heading.H5>
      </Box>

      <Box>
        <SmallCaps className="mb-2">Heading 6</SmallCaps>
        <Heading.H6>The quick brown fox jumps over the lazy dog</Heading.H6>
      </Box>
    </Examples>
  </Story>
));