import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import hbs from 'htmlbars-inline-precompile';

<Meta title="Foundations/Iconography" />


# Iconography

Icons reduce cognitive load by supplementing context and meaning to UI. Good icons are quickly recognizable, afford interactivity, and add visual interest. Icons, like salt, perform best when used sparingly and purposefully. Do not oversalt your designs.

## Usage

Radial uses SVG icons across all brands, many of them sourced from [https://thenounproject.com/](https://thenounproject.com/)


## Accessibility

If an icon is used without accompanying text, a title attribute is needed on the containing element.

Icons that are interactive must follow the same WCAG 2.0 contrast standards as typography, requiring a minimum contrast ratio 3.0. Non-interactive icons like status symbols or brand logos don’t need to follow these standards.

## Base Icons

<Preview>
  <Story name="Base Icons" height="550px">{{
    template: hbs`
    <div class="l-grid l-grid--4up">
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='arrow-pointed-down' @title='icon title' />
            </span>
          <div>arrow pointed down</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='arrow-pointed-left' @title='icon title' />
            </span>
          <div>arrow pointed left</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='arrow-pointed-right' @title='icon title' />
            </span>
          <div>arrow pointed right</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='arrow-pointed-up' @title='icon title' />
            </span>
          <div>arrow pointed up</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='audio' @title='icon title' />
            </span>
          <div>audio</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='bookmark' @title='icon title' />
            </span>
          <div>bookmark</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='checkmark' @title='icon title' />
            </span>
          <div>checkmark</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='close' @title='icon title' />
            </span>
          <div>close</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='comment' @title='icon title' />
            </span>
          <div>comment</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='download' @title='icon title' />
            </span>
          <div>download</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='dropdown' @title='icon title' />
            </span>
          <div>dropdown</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='email' @title='icon title' />
            </span>
          <div>email</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='embed' @title='icon title' />
            </span>
          <div>embed</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='facebook' @title='icon title' />
            </span>
          <div>facebook</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='gallery' @title='icon title' />
            </span>
          <div>gallery</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='hamburger' @title='icon title' />
            </span>
          <div>hamburger</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='instagram' @title='icon title' />
            </span>
          <div>instagram</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='nypr-logo' @title='icon title' />
            </span>
          <div>nypr logo</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='open-in-new-window' @title='icon title' />
            </span>
          <div>open in new window</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='placeholder' @title='icon title' />
            </span>
          <div>placeholder</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='play' @title='icon title' />
            </span>
          <div>play</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='print' @title='icon title' />
            </span>
          <div>print</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='rss' @title='icon title' />
            </span>
          <div>rss</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='reddit' @title='icon title' />
            </span>
          <div>reddit</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='search' @title='icon title' />
            </span>
          <div>search</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='simple-arrow-left' @title='icon title' />
            </span>
          <div>simple arrow left</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='simple-arrow-right' @title='icon title' />
            </span>
          <div>simple arrow right</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='simple-arrow-up' @title='icon title' />
            </span>
          <div>simple arrow up</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='simple-arrow-down' @title='icon title' />
            </span>
          <div>simple arrow down</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='spotify' @title='icon title' />
            </span>
          <div>spotify</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='stylish-arrow' @title='icon title' />
            </span>
          <div>stylish arrow</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='twitter' @title='icon title' />
            </span>
          <div>twitter</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='video' @title='icon title' />
            </span>
          <div>video</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='volume' @title='icon title' />
            </span>
          <div>volume</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='volume-muted' @title='icon title' />
            </span>
          <div>volume-muted</div>
        </div>
      </div>
      <div>
        <div class= "u-flex u-align-items--center u-space--bottom">
            <span class= "o-icon u-icon--s u-space--right">
              <Icon @icon='youtube' @title='icon title' />
            </span>
          <div>youtube</div>
        </div>
      </div>
    </div>
    `
  }}</Story>
</Preview>

## Gothamist Icons

<Preview>
  <Story name="Gothamist Icons" height="200px">{{
    template: hbs`
    <div class="l-grid l-grid--4up">
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='gothamist/arrow' @title='icon title' />
            </span>
          <div>gothamist arrow</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--l u-space--right">
              <Icon @icon='gothamist/logo' @title='icon title' />
            </span>
          <div>gothamist logo</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--l u-space--right">
              <Icon @icon='gothamist/logo-stacked' @title='icon title' />
            </span>
          <div>gothamist logo stacked</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--l u-space--right">
              <Icon @icon='gothamist/nyc-love' @title='icon title' />
            </span>
          <div>nyc love</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--l u-space--right">
              <Icon @icon='gothamist/party-confetti' @title='icon title' />
            </span>
          <div>party confetti</div>
        </div>
      </div>
    </div>
    `
  }}</Story>
</Preview>

## WNYC Icons

<Preview>
  <Story name="WNYC Icons" height="100px">{{
    template: hbs`
    <div class="l-grid l-grid--4up">
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--l u-space--right">
              <Icon @icon='wnyc/logo' @title='icon title' />
            </span>
          <div>wnyc logo</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--l u-space--right">
              <Icon @icon='wnyc/jlgreene' @title='icon title' />
            </span>
          <div>jlgreene logo</div>
        </div>
      </div>
    </div>
    `
  }}</Story>
</Preview>

## WQXR Icons

<Preview>
  <Story name="WQXR Icons" height="100px">{{
    template: hbs`
    <div class="l-grid l-grid--4up">
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='wqxr/listener-count' @title='icon title' />
            </span>
          <div>listener count</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='wqxr/music-note' @title='icon title' />
            </span>
          <div>music note</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='wqxr/pause' @title='icon title' />
            </span>
          <div>pause</div>
        </div>
      </div>
      <div>
        <div class="u-flex u-align-items--center u-space--bottom">
            <span class="o-icon u-icon--s u-space--right">
              <Icon @icon='wqxr/logo' @title='icon title' />
            </span>
          <div>wqxr logo</div>
        </div>
      </div>
    </div>
    `
  }}</Story>
</Preview>

## Sizing

Our default icons come in four sizes: 16px (XS), 24px (S), 32px (M), and 40px (L). These sizes are the dimensions of the SVG and include the icon as well as the padding. This consistency helps when sourcing third party icons. Larger sizes may be available to other brands. 

| Size | Measurement |
| -- | -- |
| XS | 16px |
| S | 24px |
| M | 32px |
| L | 40px |

When creating new icons, padding can be determined by using at least ⅛ of the icon frame’s width.

## Sizing Examples

<Preview>
  <Story name="Icon Sizes" height="200px">{{
    template: hbs`
          <div class= "u-flex u-align-items--center u-space--bottom">
              <span class= "o-icon u-icon--xs u-space--right">
                <Icon @icon='audio' @title='icon title' />
              </span>
            <div>XS</div>
          </div>
          <div class= "u-flex u-align-items--center u-space--bottom">
              <span class= "o-icon u-icon--s u-space--right">
                <Icon @icon='audio' @title='icon title' />
              </span>
            <div>S</div>
          </div>
          <div class= "u-flex u-align-items--center u-space--bottom">
              <span class= "o-icon u-icon--m u-space--right">
                <Icon @icon='audio' @title='icon title' />
              </span>
            <div>M</div>
          </div>
          <div class= "u-flex u-align-items--center u-space--bottom">
              <span class= "o-icon u-icon--l u-space--right">
                <Icon @icon='audio' @title='icon title' />
              </span>
            <div>L</div>
          </div>
    `
  }}</Story>
</Preview>

TBD GRAPHIC HERE

## Audio Icon Guidelines

Design & Dev Team TBD