import * as React from "react";
import { storiesOf } from "@storybook/react";
import Story from "../../storybook-components/Story";
import { Box } from "../Box";
import { Icon, ICON_TYPE } from "../Icon";
import { VisuallyHidden } from "./VisuallyHidden";

const stories = storiesOf("Components/Disclosure/Visually Hidden", module);

stories.add("Default", () => (
  <Story title="VisuallyHidden">
    <Box className="p-12">
      <button type="button">
        <VisuallyHidden as="span">Sync</VisuallyHidden>
        <Icon icon={ICON_TYPE.SYNC} />
      </button>
    </Box>
  </Story>
));