// @flow
import React from 'react';
import type { StoryDecorator } from '@storybook/react';
import styled from 'styled-components';
import { Box } from '../../primitives';
import { SideBar } from './index';
import docs from './side-bar.mdx';

const Decorator: StoryDecorator = (Story) => (
  <TallBox stacked="column" justify="center" align="center">
    <Story />
  </TallBox>
);

export default {
  component: SideBar,
  title: 'One-off/SideBar',
  decorators: [Decorator],
  parameters: {
    docs: {
      page: docs,
    },
  },
};
const TallBox = styled(Box)`
  height: 500px;
`;

export const Normal = () => (
  <SideBar
    title="Best side bar ever"
    text={[
      'Some pretty long but still slight and incredibly useful text to search some purpose or something.',
      'Whoa look at me go, a second paragraph!',
    ]}
  />
);
