// @flow
import React from 'react';
import * as Icons from '.';
import { Box } from '../../primitives';
import docs from './icon.mdx';

export default {
  component: Icons,
  title: 'Components/Typography/Icons',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const AllIcons = () => (
  <Box stacked="row" wrap>
    {[
      Icons.Add,
      Icons.ArrowBack,
      Icons.ArrowForward,
      Icons.BulletPoint,
      Icons.Checkbox,
      Icons.CheckIcon,
      Icons.Checkmark,
      Icons.ChevronDown,
      Icons.ChevronLeft,
      Icons.ChevronRight,
      Icons.ChevronUp,
      Icons.Close,
      Icons.Ellipsis,
      Icons.ErrorIcon,
      Icons.ExpandMoreIcon,
      Icons.FilterIcon,
      Icons.Info,
      Icons.Lock,
      Icons.MapPin,
      Icons.NextIcon,
      Icons.Pencil,
      Icons.Remove,
      Icons.RevealTextHide,
      Icons.RevealTextShow,
      Icons.SearchIcon,
      Icons.SmallArrowRight,
      Icons.SmallChevronDown,
      Icons.SmallChevronLeft,
      Icons.SmallChevronRight,
      Icons.SmallChevronUp,
      Icons.SortArrowDown,
      Icons.SortArrowUp,
      Icons.ToggleArrows,
      Icons.TrashCan,
      Icons.NumberedBullet,
    ].map((Component) => {
      const Icon = <Component />;
      return (
        <Box spacing="p2" stacked="column" basis={200}>
          {Icon}
          {Component.displayName}
        </Box>
      );
    })}
  </Box>
);
