import React from 'react';
import { IconGallery, IconItem, Meta } from '@storybook/addon-docs/blocks';
import * as Actions from './Icons/Actions';
import * as Common from './Icons/Common';
import * as Data from './Icons/Data';
import * as Files from './Icons/Files';
import * as Form from './Icons/Form';
import * as Navigation from './Icons/Navigation';
import * as Payment from './Icons/Payment';
import { getJSDocDeprecatedTag, Node } from 'typescript';

<Meta title="Components/Icon/Iconography" />

# Iconography

Component names append `Icon` to the names below. For instance, the `Home` icon below is available as `<HomeIcon />`

## Common

<IconGallery>
  {Object.values(Common).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>

## Actions

<IconGallery>
  {Object.values(Actions).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>

## Data

<IconGallery>
  {Object.values(Data).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>

## Files

<IconGallery>
  {Object.values(Files).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>

## Form

<IconGallery>
  {Object.values(Form).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>

## Navigation

<IconGallery>
  {Object.values(Navigation).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>

## Payment

<IconGallery>
  {Object.values(Payment).map((icon) => (
    <IconItem key={icon.displayName} name={icon.displayName?.substring(0, icon.displayName?.length - 4)}>
      {icon({ 'aria-hidden': false, titleAccess: icon.displayName })}
    </IconItem>
  ))}
</IconGallery>