import { Icon } from './Icon';
import { Heading } from '../Heading/Heading';
import { Box } from '../Box/Box';
import { Button } from '../Button/Button';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import {
  FONT_SIZE_OPTIONS,
  FONT_COLOR_OPTIONS,
  ICON_NAMES,
} from '../../lib/tokens';

<Meta
  title="Components/Icon/Overview"
  component={Icon}
  parameters={{
    controls: { hideNoControlsWarning: true },
  }}
/>

# Icon

Icons are used to visually communicate product functionality and actions.
Use an icon only when it provides additional clarity or is necessary to draw attention to an element.

<Canvas isExpanded>
  <Icon name="star" />
</Canvas>

## Props

<ArgsTable of={Icon} />

## Size

The size of the icon can be set on the Icon itself, or inherited from its parent's `fontSize`.
This allows for easy placement inside of other components.

<Canvas>
  <Story name="size">
    <Box direction="row" gap="sm" margin="0 0 md 0" fontSize="xs">
      <Icon name="remove" color="danger-500" />
      <Box>Size is set by the Icon's parent</Box>
    </Box>
    <Box direction="row" fontSize="xl" gap="sm">
      <Icon name="star" color="warning-400" />
      <Box>Size is set by the Icon's parent</Box>
    </Box>
  </Story>
</Canvas>

## Color

Similar to sizing, the color of the icon can be set on the Icon itself, or inherited from its parent.

<Canvas>
  <Story name="color">
    <Box direction="row" gap="sm" margin="0 0 md 0">
      <Icon name="remove" color="danger-500" />
      <Box>Color is set at the Icon level</Box>
    </Box>
    <Box direction="row" gap="sm" color="secondary-400">
      <Icon name="book" />
      <Box>Color is set by the Icon's parent</Box>
    </Box>
  </Story>
</Canvas>

## Unknown Icon

If a given icon name is not found in the dictionary, a red box with question marks will be displayed, as well as log an error to the console.

<Canvas>
  <Story name="unknown icon">
    <Icon name="does-not-exist" className="font-size-2xl" />
  </Story>
</Canvas>

## Available Icons

<Canvas>
  <Story
    name="all icons"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=972%3A15875',
      },
    }}
  >
    {() => {
      return (
        <Box
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill,minmax(6rem,1fr))',
            gridAutoRows: '6rem',
            gap: '1rem',
          }}
        >
          {ICON_NAMES.map(name => (
            <Box
              key={name}
              fontSize="lg"
              textAlign="center"
              alignItems="center"
              justifyContent="center"
              gap="sm"
            >
              <Icon className="neutral-500" name={name} />
              <Box as="p" color="grey-500" fontSize="sm">
                {name}
              </Box>
            </Box>
          ))}
        </Box>
      );
    }}
  </Story>
</Canvas>
