@indico-data/design-system 2.1.3 → 2.3.0

package/lib/types.d.ts

@@ -1,231 +0,0 @@
-/// <reference types="react" />
-declare const allIcons: {
-    readonly 'indico-o-white': import("react/jsx-runtime").JSX.Element;
-    readonly account: import("react/jsx-runtime").JSX.Element;
-    readonly address: import("react/jsx-runtime").JSX.Element;
-    readonly 'api-doc': import("react/jsx-runtime").JSX.Element;
-    readonly 'arrow-dots': import("react/jsx-runtime").JSX.Element;
-    readonly 'arrow-down': import("react/jsx-runtime").JSX.Element;
-    readonly 'arrow-up-circle': import("react/jsx-runtime").JSX.Element;
-    readonly 'arrows-cursor': import("react/jsx-runtime").JSX.Element;
-    readonly bookmark: import("react/jsx-runtime").JSX.Element;
-    readonly bookmarks: import("react/jsx-runtime").JSX.Element;
-    readonly 'bookmark-saved': import("react/jsx-runtime").JSX.Element;
-    readonly branch: import("react/jsx-runtime").JSX.Element;
-    readonly calendar: import("react/jsx-runtime").JSX.Element;
-    readonly 'check-circle': import("react/jsx-runtime").JSX.Element;
-    readonly 'circle-help': import("react/jsx-runtime").JSX.Element;
-    readonly check: import("react/jsx-runtime").JSX.Element;
-    readonly checkbox: import("react/jsx-runtime").JSX.Element;
-    readonly 'chevron-down': import("react/jsx-runtime").JSX.Element;
-    readonly 'chevron-left': import("react/jsx-runtime").JSX.Element;
-    readonly 'chevron-right': import("react/jsx-runtime").JSX.Element;
-    readonly 'chevron-up': import("react/jsx-runtime").JSX.Element;
-    readonly 'classification-document': import("react/jsx-runtime").JSX.Element;
-    readonly 'classification-image': import("react/jsx-runtime").JSX.Element;
-    readonly 'classification-page': import("react/jsx-runtime").JSX.Element;
-    readonly 'classify-and-unbundle': import("react/jsx-runtime").JSX.Element;
-    readonly clipboard: import("react/jsx-runtime").JSX.Element;
-    readonly 'coffee-1': import("react/jsx-runtime").JSX.Element;
-    readonly 'coffee-2': import("react/jsx-runtime").JSX.Element;
-    readonly 'coffee-fail': import("react/jsx-runtime").JSX.Element;
-    readonly coffeecup: import("react/jsx-runtime").JSX.Element;
-    readonly coffeesteam: import("react/jsx-runtime").JSX.Element;
-    readonly cog: import("react/jsx-runtime").JSX.Element;
-    readonly collection: import("react/jsx-runtime").JSX.Element;
-    readonly compare: import("react/jsx-runtime").JSX.Element;
-    readonly 'company-name': import("react/jsx-runtime").JSX.Element;
-    readonly 'confidence-bar-1': import("react/jsx-runtime").JSX.Element;
-    readonly 'confidence-bar-2': import("react/jsx-runtime").JSX.Element;
-    readonly 'confidence-bar-3': import("react/jsx-runtime").JSX.Element;
-    readonly 'confidence-bar-4': import("react/jsx-runtime").JSX.Element;
-    readonly 'confidence-bars': import("react/jsx-runtime").JSX.Element;
-    readonly configure: import("react/jsx-runtime").JSX.Element;
-    readonly 'choose-library': import("react/jsx-runtime").JSX.Element;
-    readonly crowdlabel: import("react/jsx-runtime").JSX.Element;
-    readonly currency: import("react/jsx-runtime").JSX.Element;
-    readonly dashboard: import("react/jsx-runtime").JSX.Element;
-    readonly 'data-and-access': import("react/jsx-runtime").JSX.Element;
-    readonly database: import("react/jsx-runtime").JSX.Element;
-    readonly document: import("react/jsx-runtime").JSX.Element;
-    readonly date: import("react/jsx-runtime").JSX.Element;
-    readonly draggable: import("react/jsx-runtime").JSX.Element;
-    readonly droplet: import("react/jsx-runtime").JSX.Element;
-    readonly edit: import("react/jsx-runtime").JSX.Element;
-    readonly education: import("react/jsx-runtime").JSX.Element;
-    readonly ellipsis: import("react/jsx-runtime").JSX.Element;
-    readonly 'elmos-fire': import("react/jsx-runtime").JSX.Element;
-    readonly email: import("react/jsx-runtime").JSX.Element;
-    readonly enterprise: import("react/jsx-runtime").JSX.Element;
-    readonly 'exclamation-circle-stroke': import("react/jsx-runtime").JSX.Element;
-    readonly extraction: import("react/jsx-runtime").JSX.Element;
-    readonly eye: import("react/jsx-runtime").JSX.Element;
-    readonly file: import("react/jsx-runtime").JSX.Element;
-    readonly fileHappy: import("react/jsx-runtime").JSX.Element;
-    readonly filter: import("react/jsx-runtime").JSX.Element;
-    readonly 'filter-outline': import("react/jsx-runtime").JSX.Element;
-    readonly folder: import("react/jsx-runtime").JSX.Element;
-    readonly form: import("react/jsx-runtime").JSX.Element;
-    readonly gallery: import("react/jsx-runtime").JSX.Element;
-    readonly 'find-documents': import("react/jsx-runtime").JSX.Element;
-    readonly graphiql: import("react/jsx-runtime").JSX.Element;
-    readonly 'grid-view': import("react/jsx-runtime").JSX.Element;
-    readonly happy: import("react/jsx-runtime").JSX.Element;
-    readonly 'help-solid': import("react/jsx-runtime").JSX.Element;
-    readonly help: import("react/jsx-runtime").JSX.Element;
-    readonly highlight: import("react/jsx-runtime").JSX.Element;
-    readonly 'highlight-outline': import("react/jsx-runtime").JSX.Element;
-    readonly 'indico-logo-white': import("react/jsx-runtime").JSX.Element;
-    readonly 'indico-o': import("react/jsx-runtime").JSX.Element;
-    readonly info: import("react/jsx-runtime").JSX.Element;
-    readonly kabob: import("react/jsx-runtime").JSX.Element;
-    readonly key: import("react/jsx-runtime").JSX.Element;
-    readonly label: import("react/jsx-runtime").JSX.Element;
-    readonly 'layout-complex': import("react/jsx-runtime").JSX.Element;
-    readonly 'layout-simple': import("react/jsx-runtime").JSX.Element;
-    readonly 'list-view': import("react/jsx-runtime").JSX.Element;
-    readonly libraries: import("react/jsx-runtime").JSX.Element;
-    readonly location: import("react/jsx-runtime").JSX.Element;
-    readonly logout: import("react/jsx-runtime").JSX.Element;
-    readonly lock: import("react/jsx-runtime").JSX.Element;
-    readonly menu: import("react/jsx-runtime").JSX.Element;
-    readonly 'model-import': import("react/jsx-runtime").JSX.Element;
-    readonly 'model-starter': import("react/jsx-runtime").JSX.Element;
-    readonly moon: import("react/jsx-runtime").JSX.Element;
-    readonly moonbow: import("react/jsx-runtime").JSX.Element;
-    readonly 'no-collections': import("react/jsx-runtime").JSX.Element;
-    readonly 'no-libraries': import("react/jsx-runtime").JSX.Element;
-    readonly no_results: import("react/jsx-runtime").JSX.Element;
-    readonly 'no-format': import("react/jsx-runtime").JSX.Element;
-    readonly 'object-detection': import("react/jsx-runtime").JSX.Element;
-    readonly organizations: import("react/jsx-runtime").JSX.Element;
-    readonly output: import("react/jsx-runtime").JSX.Element;
-    readonly 'page-thumbnail': import("react/jsx-runtime").JSX.Element;
-    readonly 'pay-as-you-go': import("react/jsx-runtime").JSX.Element;
-    readonly person: import("react/jsx-runtime").JSX.Element;
-    readonly phone: import("react/jsx-runtime").JSX.Element;
-    readonly pin: import("react/jsx-runtime").JSX.Element;
-    readonly plus: import("react/jsx-runtime").JSX.Element;
-    readonly pointer: import("react/jsx-runtime").JSX.Element;
-    readonly popup: import("react/jsx-runtime").JSX.Element;
-    readonly price: import("react/jsx-runtime").JSX.Element;
-    readonly 'preview-view': import("react/jsx-runtime").JSX.Element;
-    readonly 'radio-button': import("react/jsx-runtime").JSX.Element;
-    readonly recruiter: import("react/jsx-runtime").JSX.Element;
-    readonly regex: import("react/jsx-runtime").JSX.Element;
-    readonly reject: import("react/jsx-runtime").JSX.Element;
-    readonly repair: import("react/jsx-runtime").JSX.Element;
-    readonly research: import("react/jsx-runtime").JSX.Element;
-    readonly reset: import("react/jsx-runtime").JSX.Element;
-    readonly retrain: import("react/jsx-runtime").JSX.Element;
-    readonly sad: import("react/jsx-runtime").JSX.Element;
-    readonly search: import("react/jsx-runtime").JSX.Element;
-    readonly 'search-thin': import("react/jsx-runtime").JSX.Element;
-    readonly shrug: import("react/jsx-runtime").JSX.Element;
-    readonly signature: import("react/jsx-runtime").JSX.Element;
-    readonly 'sort-down': import("react/jsx-runtime").JSX.Element;
-    readonly split: import("react/jsx-runtime").JSX.Element;
-    readonly 'step-forward': import("react/jsx-runtime").JSX.Element;
-    readonly sun: import("react/jsx-runtime").JSX.Element;
-    readonly surround: import("react/jsx-runtime").JSX.Element;
-    readonly 'surround-outline': import("react/jsx-runtime").JSX.Element;
-    readonly text: import("react/jsx-runtime").JSX.Element;
-    readonly 'thumbs-down': import("react/jsx-runtime").JSX.Element;
-    readonly 'thumbs-up': import("react/jsx-runtime").JSX.Element;
-    readonly time: import("react/jsx-runtime").JSX.Element;
-    readonly trash: import("react/jsx-runtime").JSX.Element;
-    readonly unlock: import("react/jsx-runtime").JSX.Element;
-    readonly upload: import("react/jsx-runtime").JSX.Element;
-    readonly url: import("react/jsx-runtime").JSX.Element;
-    readonly user: import("react/jsx-runtime").JSX.Element;
-    readonly wand: import("react/jsx-runtime").JSX.Element;
-    readonly warning: import("react/jsx-runtime").JSX.Element;
-    readonly 'warning-stroke': import("react/jsx-runtime").JSX.Element;
-    readonly workflows: import("react/jsx-runtime").JSX.Element;
-    readonly 'x-close': import("react/jsx-runtime").JSX.Element;
-    readonly 'zoom-in': import("react/jsx-runtime").JSX.Element;
-    readonly 'zoom-out': import("react/jsx-runtime").JSX.Element;
-    readonly 'fa-dot-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file-pdf': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file-word': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-check-square': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-square': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-angle-double-left': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-arrow-circle-right': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-arrow-down': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-arrow-left': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-arrow-right': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-arrow-up': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-ban': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-caret-down': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-caret-up': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-chart-bar': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-check': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-check-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-circle-notch': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-clipboard': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-clock': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-clone': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-cloud': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-cog': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-cogs': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-coins': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-cube': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-cut': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-download': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-exclamation-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-exclamation-triangle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-external-link-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-eye-dropper': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file-download': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file-export': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-file-upload': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-filter': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-ghost': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-hat-wizard': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-info-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-key': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-keyboard': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-layer-group': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-pencil-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-plus': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-plus-square': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-question-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-robot': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-search': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-sign-out-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-sliders-h': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-sync-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-tag': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-times': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-times-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-tint': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-toggle-off': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-toggle-on': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-trash': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-trash-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-undo': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-user': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-users': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-mouse-pointer': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-step-forward': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-search-minus': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-search-plus': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-table': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-image': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-link': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    readonly 'fa-list': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-};
-export type IconName = keyof typeof allIcons;
-export type PermafrostComponent = {
-    id?: string;
-    className?: string;
-    'data-cy'?: string;
-    'data-testid'?: string;
-};
-export type ButtonVariant = 'default' | 'primary' | 'destructive';
-export type ButtonSize = 'normal' | 'large';
-import { ListItem } from './legacy/components/Navigation/Drawer/types';
-export type { ListItem };

package/src/legacy/components/Icon/Icon.stories.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { IconName } from '@/types';
-import { faIcons } from './faIcons';
-import { indicons } from './indicons';
-import { Icon } from './Icon';
-import { IconContainer, SpecifiedSizeContainer } from './storyHelpers';
-
-const indiconsOptions: IconName[] = Object.keys(indicons) as IconName[];
-const faIconsOptions: IconName[] = Object.keys(faIcons) as IconName[];
-
-const meta = {
-  component: Icon,
-  title: 'legacy/Icon',
-  argTypes: {
-    ariaLabel: { control: { disable: true } },
-    size: { description: '[value] or [height, width]' },
-    name: { control: { type: 'select', options: indiconsOptions } },
-  },
-  decorators: [
-    (Story) => (
-      <IconContainer>
-        <Story />
-      </IconContainer>
-    ),
-  ],
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-export const General: Story = {
-  argTypes: { name: { control: { type: 'select', options: indiconsOptions } } },
-  args: {
-    name: indiconsOptions[0],
-  },
-};
-
-export const Indicon: Story = {
-  argTypes: { name: { control: { type: 'select', options: indiconsOptions } } },
-  args: { name: indiconsOptions[0] },
-};
-
-export const FontAwesome: Story = {
-  argTypes: { name: { control: { type: 'select', options: faIconsOptions } } },
-  args: { name: faIconsOptions[27] },
-};
-export const SizeSpecified: Story = {
-  argTypes: { name: { control: { type: 'select', options: indiconsOptions } } },
-  args: { name: indiconsOptions[0] },
-  render: (args) => (
-    <SpecifiedSizeContainer>
-      <Icon {...args} size={[150]} />
-      <code>{'size = {[150]}'}</code>
-
-      <Icon {...args} size={[100, 100]} />
-      <code>{'size = {[100, 100]}'}</code>
-    </SpecifiedSizeContainer>
-  ),
-};

package/src/legacy/components/Icon/Icon.tsx

@@ -1,76 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { PermafrostComponent, IconName } from '@/types';
-
-import { faIcons } from './faIcons';
-import { indicons } from './indicons';
-
-const allIcons = {
-  ...faIcons,
-  ...indicons,
-} as const;
-
-type Props = PermafrostComponent & {
-  ariaLabel?: string;
-  fill?: string;
-  name: IconName;
-  /* `[value]` or `[width, height]` */
-  size?: [string | number] | [string | number, string | number];
-  style?: any;
-  onClick?(): void;
-  ref?: React.Ref<SVGSVGElement>;
-};
-
-type IconComponentProps = {
-  children: React.ReactNode;
-  fill: string;
-  viewBox: string;
-};
-
-/**
- * Generic icon component, hidden from Assistive Technology by default.
- * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
- */
-export function Icon({ style = {}, ...props }: Props): React.ReactElement | null {
-  const ariaLabel = props.ariaLabel
-    ? { 'aria-label': props.ariaLabel }
-    : { 'aria-hidden': true, focusable: false };
-  const iconComponentProps: IconComponentProps = allIcons[props.name]?.props || null;
-  const dimensions =
-    props.size && props.size.length > 0
-      ? returnDimensions(props.size)
-      : { width: '1em', height: '1em' };
-
-  if (!iconComponentProps) {
-    console.error(`${props.name} is not a valid icon name.`);
-
-    return null;
-  }
-
-  return (
-    <svg
-      {...iconComponentProps}
-      {...ariaLabel}
-      {...dimensions}
-      ref={props.ref}
-      role="img"
-      className={props.className}
-      data-cy={props['data-cy']}
-      data-testid={props['data-testid']}
-      fill={props.fill || 'currentColor'}
-      id={props.id}
-      style={style}
-      onClick={props.onClick}
-    />
-  );
-}
-
-function returnDimensions(sizeProp: [string | number] | [string | number, string | number]) {
-  if (sizeProp.length > 1) {
-    return { width: sizeProp[0], height: sizeProp[1] };
-  }
-
-  return { width: sizeProp[0], height: sizeProp[0] };
-}

package/src/legacy/components/Icon/faIcons.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import {
-  faCheckSquare,
-  faDotCircle,
-  faFile,
-  faFileAlt,
-  faFilePdf,
-  faFileWord,
-  faSquare,
-} from '@fortawesome/free-regular-svg-icons';
-
-import {
-  faAngleDoubleLeft,
-  faArrowCircleRight,
-  faArrowDown,
-  faArrowLeft,
-  faArrowRight,
-  faArrowUp,
-  faBan,
-  faCaretDown,
-  faCaretUp,
-  faChartBar,
-  faCheck,
-  faCheckCircle,
-  faCircleNotch,
-  faClipboard,
-  faClock,
-  faClone,
-  faCloud,
-  faCog,
-  faCogs,
-  faCoins,
-  faCube,
-  faCut,
-  faDownload,
-  faExclamationCircle,
-  faExclamationTriangle,
-  faExternalLinkAlt,
-  faEyeDropper,
-  faFileDownload,
-  faFileExport,
-  faFileUpload,
-  faFilter,
-  faGhost,
-  faHatWizard,
-  faInfoCircle,
-  faKey,
-  faKeyboard,
-  faLayerGroup,
-  faPencilAlt,
-  faPlus,
-  faPlusSquare,
-  faQuestionCircle,
-  faRobot,
-  faSearch,
-  faSignOutAlt,
-  faSlidersH,
-  faSyncAlt,
-  faTag,
-  faTimes,
-  faTimesCircle,
-  faTint,
-  faToggleOff,
-  faToggleOn,
-  faTrash,
-  faTrashAlt,
-  faUndo,
-  faUser,
-  faUsers,
-  faMousePointer,
-  faStepForward,
-  faSearchMinus,
-  faSearchPlus,
-  faTable,
-  faImage,
-  faLink,
-  faList,
-} from '@fortawesome/free-solid-svg-icons';
-
-const faIcons = {
-  'fa-dot-circle': generateSvg(faDotCircle),
-  'fa-file': generateSvg(faFile),
-  'fa-file-alt': generateSvg(faFileAlt),
-  'fa-file-pdf': generateSvg(faFilePdf),
-  'fa-file-word': generateSvg(faFileWord),
-  'fa-check-square': generateSvg(faCheckSquare),
-  'fa-square': generateSvg(faSquare),
-
-  'fa-angle-double-left': generateSvg(faAngleDoubleLeft),
-  'fa-arrow-circle-right': generateSvg(faArrowCircleRight),
-  'fa-arrow-down': generateSvg(faArrowDown),
-  'fa-arrow-left': generateSvg(faArrowLeft),
-  'fa-arrow-right': generateSvg(faArrowRight),
-  'fa-arrow-up': generateSvg(faArrowUp),
-  'fa-ban': generateSvg(faBan),
-  'fa-caret-down': generateSvg(faCaretDown),
-  'fa-caret-up': generateSvg(faCaretUp),
-  'fa-chart-bar': generateSvg(faChartBar),
-  'fa-check': generateSvg(faCheck),
-  'fa-check-circle': generateSvg(faCheckCircle),
-  'fa-circle-notch': generateSvg(faCircleNotch),
-  'fa-clipboard': generateSvg(faClipboard),
-  'fa-clock': generateSvg(faClock),
-  'fa-clone': generateSvg(faClone),
-  'fa-cloud': generateSvg(faCloud),
-  'fa-cog': generateSvg(faCog),
-  'fa-cogs': generateSvg(faCogs),
-  'fa-coins': generateSvg(faCoins),
-  'fa-cube': generateSvg(faCube),
-  'fa-cut': generateSvg(faCut),
-  'fa-download': generateSvg(faDownload),
-  'fa-exclamation-circle': generateSvg(faExclamationCircle),
-  'fa-exclamation-triangle': generateSvg(faExclamationTriangle),
-  'fa-external-link-alt': generateSvg(faExternalLinkAlt),
-  'fa-eye-dropper': generateSvg(faEyeDropper),
-  'fa-file-download': generateSvg(faFileDownload),
-  'fa-file-export': generateSvg(faFileExport),
-  'fa-file-upload': generateSvg(faFileUpload),
-  'fa-filter': generateSvg(faFilter),
-  'fa-ghost': generateSvg(faGhost),
-  'fa-hat-wizard': generateSvg(faHatWizard),
-  'fa-info-circle': generateSvg(faInfoCircle),
-  'fa-key': generateSvg(faKey),
-  'fa-keyboard': generateSvg(faKeyboard),
-  'fa-layer-group': generateSvg(faLayerGroup),
-  'fa-pencil-alt': generateSvg(faPencilAlt),
-  'fa-plus': generateSvg(faPlus),
-  'fa-plus-square': generateSvg(faPlusSquare),
-  'fa-question-circle': generateSvg(faQuestionCircle),
-  'fa-robot': generateSvg(faRobot),
-  'fa-search': generateSvg(faSearch),
-  'fa-sign-out-alt': generateSvg(faSignOutAlt),
-  'fa-sliders-h': generateSvg(faSlidersH),
-  'fa-sync-alt': generateSvg(faSyncAlt),
-  'fa-tag': generateSvg(faTag),
-  'fa-times': generateSvg(faTimes),
-  'fa-times-circle': generateSvg(faTimesCircle),
-  'fa-tint': generateSvg(faTint),
-  'fa-toggle-off': generateSvg(faToggleOff),
-  'fa-toggle-on': generateSvg(faToggleOn),
-  'fa-trash': generateSvg(faTrash),
-  'fa-trash-alt': generateSvg(faTrashAlt),
-  'fa-undo': generateSvg(faUndo),
-  'fa-user': generateSvg(faUser),
-  'fa-users': generateSvg(faUsers),
-  'fa-mouse-pointer': generateSvg(faMousePointer),
-  'fa-step-forward': generateSvg(faStepForward),
-  'fa-search-minus': generateSvg(faSearchMinus),
-  'fa-search-plus': generateSvg(faSearchPlus),
-  'fa-table': generateSvg(faTable),
-  'fa-image': generateSvg(faImage),
-  'fa-link': generateSvg(faLink),
-  'fa-list': generateSvg(faList),
-};
-
-function generateSvg(iconDefinition: IconDefinition): React.ReactElement {
-  const { icon } = iconDefinition;
-
-  return (
-    <svg fill="currentColor" viewBox={`0 0 ${icon[0]} ${icon[1]}`}>
-      <path d={`${icon[4]}`} />
-    </svg>
-  );
-}
-
-export { faIcons };

package/src/legacy/components/Icon/index.ts

@@ -1,3 +0,0 @@
-export { Icon } from './Icon';
-export { faIcons } from './faIcons';
-export { indicons } from './indicons';

package/src/legacy/components/Icon/storyHelpers.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { IconName } from '@/types';
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-import { Icon } from './Icon';
-
-interface IconGroupProps {
-  groupObject: any;
-}
-
-export function IconGroup(props: IconGroupProps): React.ReactElement {
-  const { groupObject } = props;
-
-  const swatch = (iconName: string): React.ReactChild => {
-    return (
-      <li key={iconName}>
-        <figure>
-          <Icon name={iconName as IconName} />
-
-          <figcaption>{iconName}</figcaption>
-        </figure>
-      </li>
-    );
-  };
-
-  return (
-    <IconGroupContainer>{Object.keys(groupObject).map((key) => swatch(key))}</IconGroupContainer>
-  );
-}
-
-const svgSize = '5ch';
-
-export const IconContainer = styled.span`
-  color: ${COLORS.defaultFontColor};
-`;
-
-export const IconGroupContainer = styled.ul`
-  color: ${process.env.STORYBOOK_THEME === 'light' ? 'currentColor' : COLORS.defaultFontColor};
-
-  list-style: none;
-  margin-top: 2em;
-  padding-left: 0;
-
-  font-family: ${TYPOGRAPHY.fontFamily.base};
-
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    figure {
-      margin-left: 0;
-      margin-right: 0;
-      text-align: center;
-
-      svg {
-        height: ${svgSize};
-        width: ${svgSize};
-        margin-bottom: 1em;
-      }
-    }
-  }
-`;
-
-export const SpecifiedSizeContainer = styled.div`
-  color: ${COLORS.defaultFontColor};
-
-  width: 50vw;
-  font-size: 2em;
-
-  display: grid;
-  grid-template-columns: 1fr 5fr;
-  column-gap: 2em;
-  row-gap: 2em;
-  align-items: center;
-  justify-items: center;
-
-  code {
-    justify-self: start;
-  }
-`;