import * as React from "react";
import { storiesOf } from "@storybook/react";
import Examples from "../../storybook-components/Examples";
import Story from "../../storybook-components/Story";
import { Panel } from "./Panel";

const stories = storiesOf("Components/Layout/Panel", module);

stories.add("Default", () => (
  <Story title="Panel">
    <Examples>
      <Panel className="p-8">This is the default Panel component</Panel>

      <Panel border="top" className="p-8">
        This is the Panel component with only a top border
      </Panel>

      <Panel border="bottom" className="p-8">
        This is the Panel component with only a bottom border
      </Panel>

      <Panel background="none" className="p-8">
        This is the Panel component without a background
      </Panel>
    </Examples>
  </Story>
));