@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Icon.js

@@ -0,0 +1,641 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var SVG = require('react-inlinesvg');
+var index = require('./Link.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var fill = require('../constants/componentProps/fill.js');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var iconSize = require('../constants/componentProps/iconSize.js');
+var shape = require('../constants/componentProps/shape.js');
+var strokeColor = require('../constants/componentProps/strokeColor.js');
+var index$1 = require('./Tooltip.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../Text-CfBPhwqK.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var SVG__default = /*#__PURE__*/_interopDefault(SVG);
+
+const iconConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    iconConfig.appearance = newComponent;
+  }
+};
+const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
+  const {
+    Badge,
+    SvgImage,
+    after,
+    before,
+    className,
+    dataTour,
+    height,
+    href,
+    id,
+    imageSrc,
+    link,
+    linkRel,
+    linkTarget,
+    showTooltip,
+    tooltipAppearance,
+    tooltipText,
+    tooltipTextSize,
+    tooltipTitle,
+    tooltipTitleSize,
+    width,
+    onClick
+  } = props;
+  const svgSizes = React.useMemo(() => {
+    const sizes = {};
+    if (width) {
+      sizes.width = width;
+    }
+    if (height) {
+      sizes.height = height;
+    }
+    return sizes;
+  }, [height, width]);
+  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cursor_',
+    propsKey: 'cursor'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_size_',
+    propsKey: 'fillSize'
+  });
+  const iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_',
+    propsKey: 'iconFill'
+  });
+  const iconFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_hover_',
+    propsKey: 'iconFillHover'
+  });
+  const iconFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_disabled_',
+    propsKey: 'iconFillDisabled'
+  });
+  const iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_',
+    propsKey: 'iconStroke'
+  });
+  const iconStrokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_hover_',
+    propsKey: 'iconStrokeHover'
+  });
+  const iconStrokeDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_disabled_',
+    propsKey: 'iconStrokeDisabled'
+  });
+  const iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_size_',
+    propsKey: 'iconSize'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_shape_',
+    propsKey: 'shape'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
+  const {
+    styles: iconStyles
+  } = useStyles.useStyles(props);
+  const ImageComponent = React.useMemo(() => {
+    if (SvgImage) {
+      return /*#__PURE__*/React__default.default.createElement(SvgImage, svgSizes);
+    }
+    if (imageSrc) {
+      if (imageSrc.endsWith('.svg')) {
+        return /*#__PURE__*/React__default.default.createElement(SVG__default.default, {
+          preProcessor: removeFillStroke,
+          src: imageSrc
+        });
+      }
+      return /*#__PURE__*/React__default.default.createElement("img", {
+        src: imageSrc
+      });
+    }
+    return null;
+  }, [SvgImage, svgSizes, imageSrc]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, iconStrokeDisabledClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
+    "data-tour": dataTour,
+    id: id,
+    ref: ref,
+    style: iconStyles,
+    onClick: onClick,
+    onMouseEnter: () => setIsTooltipVisible(true),
+    onMouseLeave: () => setIsTooltipVisible(false)
+  }, /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', iconSizeClass),
+    DefaultComponent: "div",
+    href: link || href,
+    rel: linkRel,
+    target: linkTarget
+  }, before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
+    appearance: tooltipAppearance,
+    className: clsx__default.default(className, 'icon__tooltip', alignmentClass),
+    text: tooltipText,
+    textSize: tooltipTextSize,
+    title: tooltipTitle,
+    titleSize: tooltipTitleSize
+  })));
+});
+Icon.propTypes = {
+  after: PropTypes__default.default.any,
+  // "bool" type is valid for condition constructions, e.g. "Boolean(some) && <Badge>"
+  Badge: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.bool]),
+  before: PropTypes__default.default.any,
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  className: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  fillSizeDesktop: PropTypes__default.default.string,
+  fillSizeMobile: PropTypes__default.default.string,
+  fillSizeTablet: PropTypes__default.default.string,
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  height: PropTypes__default.default.string,
+  href: PropTypes__default.default.string,
+  iconStroke: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStrokeDesktop: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStrokeMobile: PropTypes__default.default.oneOf(strokeColor.default),
+  iconStrokeTablet: PropTypes__default.default.oneOf(strokeColor.default),
+  id: PropTypes__default.default.string,
+  imageSrc: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
+  linkRel: PropTypes__default.default.string,
+  linkTarget: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  showTooltip: PropTypes__default.default.bool,
+  size: PropTypes__default.default.oneOf(iconSize.default),
+  sizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
+  sizeMobile: PropTypes__default.default.oneOf(iconSize.default),
+  sizeTablet: PropTypes__default.default.oneOf(iconSize.default),
+  SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
+  tooltipAppearance: PropTypes__default.default.string,
+  tooltipText: PropTypes__default.default.string,
+  tooltipTextSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  tooltipTitle: PropTypes__default.default.string,
+  tooltipTitleSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  width: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+Icon.defaultProps = {
+  LinkComponent: 'a'
+};
+function removeFillStroke(code) {
+  return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
+}
+Icon.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Icon",
+  "props": {
+    "LinkComponent": {
+      "defaultValue": {
+        "value": "'a'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "Badge": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "bool"
+        }]
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "borderColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "dataTour": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
+    "fillSizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fillSizeMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fillSizeTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "height": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "href": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconStroke": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "strokeColorProps"
+      },
+      "required": false
+    },
+    "iconStrokeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "strokeColorProps"
+      },
+      "required": false
+    },
+    "iconStrokeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "strokeColorProps"
+      },
+      "required": false
+    },
+    "iconStrokeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "strokeColorProps"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "imageSrc": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "link": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "linkRel": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "linkTarget": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "showTooltip": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "iconSizeProps"
+      },
+      "required": false
+    },
+    "sizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "iconSizeProps"
+      },
+      "required": false
+    },
+    "sizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "iconSizeProps"
+      },
+      "required": false
+    },
+    "sizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "iconSizeProps"
+      },
+      "required": false
+    },
+    "SvgImage": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "elementType"
+        }, {
+          "name": "func"
+        }, {
+          "name": "object"
+        }]
+      },
+      "required": false
+    },
+    "tooltipAppearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTextSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
+    "tooltipTitle": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitleSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Icon = Icon;
+exports.iconConfig = iconConfig;