import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import * as Icons from '.';

<Meta title="Core/Icon" component={Icons.Add} />

# Icons

Icons are SVGs rendered as JSX to allow us to use different theming/color options

## CheckmarkNormal

<Canvas withToolbar>
  <Story id="core-icon--checkmark-normal" />
</Canvas>

## CheckmarkInverted

<Canvas withToolbar>
  <Story id="core-icon--checkmark-inverted" />
</Canvas>

## NumberedBullet

<Canvas withToolbar>
  <Story id="core-icon--numbered-bullet" />
</Canvas>

## NumberedBulletWithColor

<Canvas withToolbar>
  <Story id="core-icon--numbered-bullet-with-color" />
</Canvas>

## NumberedBulletInverted

<Canvas withToolbar>
  <Story id="core-icon--numbered-bullet-inverted" />
</Canvas>

## NumberedBulletDisabled

<Canvas withToolbar>
  <Story id="core-icon--numbered-bullet-disabled" />
</Canvas>

## NumberedBulletInvertedAndDisabled

<Canvas withToolbar>
  <Story id="core-icon--numbered-bullet-inverted-and-disabled" />
</Canvas>

## ArrowForward

<Canvas withToolbar>
  <Story id="core-icon--arrow-forward" />
</Canvas>

## ArrowForwardDisabled

<Canvas withToolbar>
  <Story id="core-icon--arrow-forward-disabled" />
</Canvas>

## ArrowBack

<Canvas withToolbar>
  <Story id="core-icon--arrow-back" />
</Canvas>

## ArrowBackDisabled

<Canvas withToolbar>
  <Story id="core-icon--arrow-back-disabled" />
</Canvas>

## NextIconSm

<Canvas withToolbar>
  <Story id="core-icon--next-icon-sm" />
</Canvas>

## NextIconLg

<Canvas withToolbar>
  <Story id="core-icon--next-icon-lg" />
</Canvas>

## NextIconDisabled

<Canvas withToolbar>
  <Story id="core-icon--next-icon-disabled" />
</Canvas>

## ErrorIcon

<Canvas withToolbar>
  <Story id="core-icon--error-icon" />
</Canvas>

## FilterIconNormal

<Canvas withToolbar>
  <Story id="core-icon--filter-icon-normal" />
</Canvas>

## FilterIconWithColor

<Canvas withToolbar>
  <Story id="core-icon--filter-icon-with-color" />
</Canvas>

## SearchIconNormal

<Canvas withToolbar>
  <Story id="core-icon--search-icon-normal" />
</Canvas>

## SearchIconWithColor

<Canvas withToolbar>
  <Story id="core-icon--search-icon-with-color" />
</Canvas>

## SearchIconDisabled

<Canvas withToolbar>
  <Story id="core-icon--search-icon-disabled" />
</Canvas>

## MapPin

<Canvas withToolbar>
  <Story id="core-icon--map-pin" />
</Canvas>

## MapPinDisabled

<Canvas withToolbar>
  <Story id="core-icon--map-pin-disabled" />
</Canvas>

## BulletPoint

<Canvas withToolbar>
  <Story id="core-icon--bullet-point" />
</Canvas>

## ChevronRight

<Canvas withToolbar>
  <Story id="core-icon--chevron-right" />
</Canvas>

## ChevronRightWithColor

<Canvas withToolbar>
  <Story id="core-icon--chevron-right-with-color" />
</Canvas>

## SmallChevronRight

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-right" />
</Canvas>

## SmallChevronRightWithColor

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-right-with-color" />
</Canvas>

## ChevronDown

<Canvas withToolbar>
  <Story id="core-icon--chevron-down" />
</Canvas>

## ChevronDownWithColor

<Canvas withToolbar>
  <Story id="core-icon--chevron-down-with-color" />
</Canvas>

## SmallChevronDown

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-down" />
</Canvas>

## SmallChevronDownWithColor

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-down-with-color" />
</Canvas>

## ChevronUp

<Canvas withToolbar>
  <Story id="core-icon--chevron-up" />
</Canvas>

## ChevronUpWithColor

<Canvas withToolbar>
  <Story id="core-icon--chevron-up-with-color" />
</Canvas>

## SmallChevronUp

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-up" />
</Canvas>

## SmallChevronUpWithColor

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-up-with-color" />
</Canvas>

## ChevronLeft

<Canvas withToolbar>
  <Story id="core-icon--chevron-left" />
</Canvas>

## ChevronLeftWithColor

<Canvas withToolbar>
  <Story id="core-icon--chevron-left-with-color" />
</Canvas>

## SmallChevronLeft

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-left" />
</Canvas>

## SmallChevronLeftWithColor

<Canvas withToolbar>
  <Story id="core-icon--small-chevron-left-with-color" />
</Canvas>

## CheckboxNotSelected

<Canvas withToolbar>
  <Story id="core-icon--checkbox-not-selected" />
</Canvas>

## CheckboxSelected

<Canvas withToolbar>
  <Story id="core-icon--checkbox-selected" />
</Canvas>

## Close

<Canvas withToolbar>
  <Story id="core-icon--close" />
</Canvas>

## Info

<Canvas withToolbar>
  <Story id="core-icon--info" />
</Canvas>

## Add

<Canvas withToolbar>
  <Story id="core-icon--add" />
</Canvas>

## AddWithColor

<Canvas withToolbar>
  <Story id="core-icon--add-with-color" />
</Canvas>

## Remove

<Canvas withToolbar>
  <Story id="core-icon--remove" />
</Canvas>

## SmallArrowRight

<Canvas withToolbar>
  <Story id="core-icon--small-arrow-right" />
</Canvas>

## SmallArrowRightWithColor

<Canvas withToolbar>
  <Story id="core-icon--small-arrow-right-with-color" />
</Canvas>

## Lock

<Canvas withToolbar>
  <Story id="core-icon--lock" />
</Canvas>

## LockDisabled

<Canvas withToolbar>
  <Story id="core-icon--lock-disabled" />
</Canvas>

## ToggleArrows

<Canvas withToolbar>
  <Story id="core-icon--toggle-arrows" />
</Canvas>

## ToggleArrowsDisabled

<Canvas withToolbar>
  <Story id="core-icon--toggle-arrows-disabled" />
</Canvas>

## ToggleArrowsTop

<Canvas withToolbar>
  <Story id="core-icon--toggle-arrows-top" />
</Canvas>

## ToggleArrowsBottom

<Canvas withToolbar>
  <Story id="core-icon--toggle-arrows-bottom" />
</Canvas>

## ToggleArrowsInheritedColor

<Canvas withToolbar>
  <Story id="core-icon--toggle-arrows-inherited-color" />
</Canvas>

## CheckIconSmall

<Canvas withToolbar>
  <Story id="core-icon--check-icon-small" />
</Canvas>

## CheckIconLarge

<Canvas withToolbar>
  <Story id="core-icon--check-icon-large" />
</Canvas>

## CheckIconInverted

<Canvas withToolbar>
  <Story id="core-icon--check-icon-inverted" />
</Canvas>

## SortArrayDown

<Canvas withToolbar>
  <Story id="core-icon--sort-array-down" />
</Canvas>

## SortArrowUp

<Canvas withToolbar>
  <Story id="core-icon--sort-arrow-up" />
</Canvas>

## RevealTextShow

<Canvas withToolbar>
  <Story id="core-icon--reveal-text-show" />
</Canvas>

## RevealTextHide

<Canvas withToolbar>
  <Story id="core-icon--reveal-text-hide" />
</Canvas>

## ExpandMoreIcon

<Canvas withToolbar>
  <Story id="core-icon--expand-more-icon" />
</Canvas>
