@spaced-out/ui-design-system/lib/components/Icon/Icon.docs.js.flow

Sense UI components library

// @flow strict

import {TEXT_COLORS} from '../../types/typography';

import {ICON_SIZE} from './Icon';


const colorOptions: Array<mixed> = [...Object.values(TEXT_COLORS)];
const iconSize: Array<mixed> = [...Object.values(ICON_SIZE)];

export const ICON_DOCS = {
  argTypes: {
    type: {
      description:
        'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
      options: ['regular', 'solid', 'duotone', 'brands'],
      control: {type: 'select'},
      table: {
        type: {summary: 'string'},
        defaultValue: {summary: 'regular'},
      },
    },
    name: {
      description:
        'Icon Name represents name of icon as supported by fontawesome',
      type: {required: true},
      table: {
        type: {summary: 'string'},
        defaultValue: {summary: 'face-party'},
      },
    },
    color: {
      description: 'Same set of colors as supported in text',
      options: colorOptions,
      control: {type: 'select'},
      table: {
        type: {summary: 'string'},
        defaultValue: {summary: 'primary'},
      },
    },
    size: {
      description:
        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
      options: iconSize,
      control: {type: 'select'},
      table: {
        type: {summary: 'string'},
        defaultValue: {summary: 'medium'},
      },
    },
    swapOpacity: {
      name: 'swapOpacity',
      description: `Swap the default opacity of each layer in a duotone icon.`,
      options: [false, true],
      control: 'boolean',
      table: {
        type: {summary: 'boolean'},
        defaultValue: {summary: false},
      },
    },
    className: {
      description: 'External className to be applied on container',
      control: {
        type: 'text',
      },
      table: {
        type: {summary: 'string'},
      },
    },
    onClick: {
      description: 'onClick handler',
      action: 'clicked',
      table: {
        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
      },
    },
    disabled: {
      description: 'If **true**, the clickable icon is disabled',
      control: {
        type: 'boolean',
      },
      table: {
        type: {summary: 'boolean'},
        defaultValue: {summary: 'false'},
      },
    },
    ariaLabel: {
      control: {
        type: 'text',
      },
      description:
        '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
      table: {
        type: {summary: 'string'},
      },
    },
  },
  parameters: {
    docs: {
      subtitle: 'Generates a Icon component',
      description: {
        component: `
\`\`\`js
import {
  Icon,
  ClickableIcon,
  CloseIcon,
  SemanticIcon
} from "@spaced-out/ui-design-system/lib/components/Icon";
\`\`\`
Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
The name prop has be to consistent with one used in fontawesome.
        `,
      },
    },
    storySource: {
      componentPath: '/src/components/Icon/Icon.js',
    },
  },
};