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

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ICON_DOCS = void 0;
var _typography = require("../../types/typography");
var _Icon = require("./Icon");
const colorOptions = [...Object.values(_typography.TEXT_COLORS)];
const iconSize = [...Object.values(_Icon.ICON_SIZE)];
const ICON_DOCS = exports.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'
    }
  }
};