orcs-design-system/es/components/Icon/index.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["border", "mask", "fixedWidth", "inverse", "flip", "icon", "listitem", "pull", "pulse", "rotation", "size", "spin", "symbol", "transform", "color", "variant", "theme", "title"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useContext } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import styled, { ThemeProvider, ThemeContext } from "styled-components";
import { css } from "@styled-system/css";
import { space, color, typography, compose, variant } from "styled-system";
import { themeGet } from "@styled-system/theme-get";

/**
 * Using 3rd party icons from Font Awesome.
 *
 * For full list of icons see here: <https://fontawesome.com/icons?d=listing>.
 *
 * Some examples of icons with props for size, colour or animation below. For full usage guidelines view the readme at <https://github.com/FortAwesome/react-fontawesome#usage>
 *
 * Note: There are two different icon set weightings available in the Font Awesome free icons sets. Regular and solid. To use we need to specify which set to use by prefixing icon with either "far" or "fas" as shown in example code below.
 *
 * To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font Awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: <https://github.com/orchestrated-io/orcs-design-system>
 */
import { jsx as _jsx } from "react/jsx-runtime";
const IconStyles = compose(space, color, typography);
const IconWrapper = /*#__PURE__*/styled("span").withConfig({
  displayName: "IconWrapper",
  componentId: "sc-xeqnbo-0"
})(css({
  lineHeight: "0",
  display: "inline-block"
}), props => variant({
  prop: "variant",
  variants: {
    primary: {
      color: themeGet("colors.primary")(props)
    },
    secondary: {
      color: themeGet("colors.secondary")(props)
    },
    success: {
      color: themeGet("colors.successLight")(props)
    },
    warning: {
      color: themeGet("colors.warning")(props)
    },
    danger: {
      color: themeGet("colors.danger")(props)
    },
    grey: {
      color: themeGet("colors.grey")(props)
    },
    greyDark: {
      color: themeGet("colors.greyDark")(props)
    },
    greyDarkest: {
      color: themeGet("colors.greyDarkest")(props)
    }
  }
}), IconStyles);
const Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref, ref) {
  let {
      border,
      mask,
      fixedWidth,
      inverse,
      flip,
      icon,
      listitem,
      pull,
      pulse,
      rotation,
      size,
      spin,
      symbol,
      transform,
      color,
      variant: variantProp,
      theme,
      title
    } = _ref,
    props = _objectWithoutProperties(_ref, _excluded);
  const themeFromContext = useContext(ThemeContext);
  const palette = theme && theme.colors || themeFromContext && themeFromContext.colors || undefined;
  const resolvedColor = palette && typeof color === "string" && palette[color] ? palette[color] : color;
  const component = /*#__PURE__*/_jsx(IconWrapper, _objectSpread(_objectSpread({
    color: variantProp ? undefined : resolvedColor,
    variant: variantProp
  }, props), {}, {
    ref: ref,
    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
      border: border,
      mask: mask,
      fixedWidth: fixedWidth,
      inverse: inverse,
      flip: flip,
      listitem: listitem,
      pull: pull,
      rotation: rotation,
      icon: icon,
      pulse: pulse,
      size: size,
      spin: spin,
      symbol: symbol,
      transform: transform,
      title: title && "Icon-".concat(title),
      color: resolvedColor
    })
  }));
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
});
Icon.propTypes = {
  /** Colours the icon using colours from the system colour palette */
  color: PropTypes.string,
  /** Variant prop for common color variants (primary, secondary, success, warning, danger, grey, greyDark, greyDarkest) */
  variant: PropTypes.oneOf(["primary", "secondary", "success", "warning", "danger", "grey", "greyDark", "greyDarkest"]),
  /** Set a border around the icon */
  border: PropTypes.bool,
  /** Set an icon as a clipping mask around another icon */
  mask: PropTypes.string,
  /** Set icon to display as fixed width */
  fixedWidth: PropTypes.bool,
  /** Invert the icon for use on dark backgrounds */
  inverse: PropTypes.bool,
  /** Flip horizontally, vertically, or both */
  flip: PropTypes.oneOf(["horizontal", "vertical", "both"]),
  /** Set the Font Awesome style/weight, and icon */
  icon: PropTypes.array,
  /** Set icon to render in the style of a list bullet */
  listitem: PropTypes.bool,
  /** Pull an icon to float to the left or right of the element's other contents */
  pull: PropTypes.oneOf(["left", "right"]),
  /** Set a slow pulse animation on the icon */
  pulse: PropTypes.bool,
  /** Rotate the icon by the specified degree */
  rotation: PropTypes.oneOf(["90", "180", "270"]),
  /** Set the icon size based on FontAwesome usage for size */
  size: PropTypes.string,
  /** Set an 8-frame spinning animation on the icon */
  spin: PropTypes.bool,
  /** Set an icon as a symbol to use with the SVG Sprites technique */
  symbol: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  /** Power transforms to scale and position the icon */
  transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  /** Specifies the system design theme. */
  theme: PropTypes.object,
  /** Set an accessabilty title for screen readers. */
  title: PropTypes.string
};
Icon.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Icon",
  "props": {
    "color": {
      "description": "Colours the icon using colours from the system colour palette",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "variant": {
      "description": "Variant prop for common color variants (primary, secondary, success, warning, danger, grey, greyDark, greyDarkest)",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"primary\"",
          "computed": false
        }, {
          "value": "\"secondary\"",
          "computed": false
        }, {
          "value": "\"success\"",
          "computed": false
        }, {
          "value": "\"warning\"",
          "computed": false
        }, {
          "value": "\"danger\"",
          "computed": false
        }, {
          "value": "\"grey\"",
          "computed": false
        }, {
          "value": "\"greyDark\"",
          "computed": false
        }, {
          "value": "\"greyDarkest\"",
          "computed": false
        }]
      },
      "required": false
    },
    "border": {
      "description": "Set a border around the icon",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "mask": {
      "description": "Set an icon as a clipping mask around another icon",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "fixedWidth": {
      "description": "Set icon to display as fixed width",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "inverse": {
      "description": "Invert the icon for use on dark backgrounds",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "flip": {
      "description": "Flip horizontally, vertically, or both",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"horizontal\"",
          "computed": false
        }, {
          "value": "\"vertical\"",
          "computed": false
        }, {
          "value": "\"both\"",
          "computed": false
        }]
      },
      "required": false
    },
    "icon": {
      "description": "Set the Font Awesome style/weight, and icon",
      "type": {
        "name": "array"
      },
      "required": false
    },
    "listitem": {
      "description": "Set icon to render in the style of a list bullet",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "pull": {
      "description": "Pull an icon to float to the left or right of the element's other contents",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"left\"",
          "computed": false
        }, {
          "value": "\"right\"",
          "computed": false
        }]
      },
      "required": false
    },
    "pulse": {
      "description": "Set a slow pulse animation on the icon",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "rotation": {
      "description": "Rotate the icon by the specified degree",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"90\"",
          "computed": false
        }, {
          "value": "\"180\"",
          "computed": false
        }, {
          "value": "\"270\"",
          "computed": false
        }]
      },
      "required": false
    },
    "size": {
      "description": "Set the icon size based on FontAwesome usage for size",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "spin": {
      "description": "Set an 8-frame spinning animation on the icon",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "symbol": {
      "description": "Set an icon as a symbol to use with the SVG Sprites technique",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "object"
        }]
      },
      "required": false
    },
    "transform": {
      "description": "Power transforms to scale and position the icon",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "object"
        }]
      },
      "required": false
    },
    "theme": {
      "description": "Specifies the system design theme.",
      "type": {
        "name": "object"
      },
      "required": false
    },
    "title": {
      "description": "Set an accessabilty title for screen readers.",
      "type": {
        "name": "string"
      },
      "required": false
    }
  }
};
export default Icon;