@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Button.js

@@ -0,0 +1,563 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$2 = require('./Icon.js');
+var Text = require('../Text-CfBPhwqK.js');
+var index$1 = require('./Loader.js');
+var index = require('./Link.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var fill = require('../constants/componentProps/fill.js');
+var size = require('../constants/componentProps/size.js');
+var shape = require('../constants/componentProps/shape.js');
+var type = require('../constants/componentProps/type.js');
+var width = require('../constants/componentProps/width.js');
+require('react-inlinesvg');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../constants/componentProps/textSize.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../constants/componentProps/underline.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);
+
+const buttonConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    buttonConfig.appearance = newComponent;
+  }
+};
+const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(props, ref) {
+  const {
+    before,
+    appearance,
+    after,
+    className,
+    dataTour,
+    dataTestId,
+    Badge,
+    children,
+    fillIcon,
+    fillIconAfter,
+    fillIconBefore,
+    iconAfter,
+    iconAfterSize,
+    iconBefore,
+    iconBeforeSize,
+    label,
+    labelTextColor,
+    labelTextColorHover,
+    labelTextSize,
+    labelTextWrap,
+    loaderSet,
+    loaderFill,
+    loaderItemFill,
+    link,
+    href,
+    target,
+    rel,
+    size,
+    icon,
+    iconShape,
+    iconAfterShape,
+    iconBeforeShape,
+    iconSize,
+    iconFill,
+    iconFillSize,
+    iconStroke,
+    iconBeforeFill,
+    iconBeforeFillSize,
+    iconBeforeStroke,
+    iconAfterFill,
+    iconAfterFillSize,
+    iconAfterStroke,
+    iconAfterSrc,
+    iconBeforeSrc,
+    iconSrc,
+    type,
+    loading,
+    htmlType,
+    isDisabled,
+    onClick,
+    onMouseDown
+  } = props;
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'button_width_',
+    propsKey: 'width'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'button_size_',
+    propsKey: 'size'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'button_shape_',
+    propsKey: 'shape'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const {
+    styles: buttonStyles,
+    label: labelStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass || buttonConfig.appearance[appearance]?.borderWidth && `border-width_${buttonConfig.appearance[appearance].borderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || buttonConfig?.appearance[appearance]?.borderColor && `border-color_${buttonConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass || buttonConfig.appearance[appearance]?.borderType && `border-type_${buttonConfig.appearance[appearance].borderType}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || buttonConfig.appearance[appearance]?.fill && `fill_${buttonConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance]?.fillHover && `fill_hover_${buttonConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
+    "data-test-id": dataTestId && `${dataTestId}Button`,
+    "data-tour": dataTour,
+    DefaultComponent: "button",
+    disabled: isDisabled,
+    href: link || href,
+    rel: rel,
+    style: buttonStyles,
+    target: target,
+    type: htmlType,
+    onClick: onClick,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "button__wrapper",
+    ref: ref
+  }, loading && /*#__PURE__*/React__default.default.createElement(index$1.Loader, {
+    className: "button__loader",
+    fill: loaderFill || buttonConfig.appearance[appearance]?.loaderFill,
+    itemFill: loaderItemFill || buttonConfig.appearance[appearance]?.loaderItemFill,
+    set: loaderSet
+  }), before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+    className: "button__icon_before",
+    fill: fillIconBefore,
+    fillSize: iconBeforeFillSize,
+    iconFill: iconBeforeFill || buttonConfig.appearance[appearance]?.iconBeforeFill,
+    iconStroke: iconBeforeStroke || buttonConfig.appearance[appearance]?.iconBeforeStroke,
+    imageSrc: iconBeforeSrc,
+    shape: iconBeforeShape,
+    size: iconBeforeSize,
+    SvgImage: iconBefore
+  }), (icon || iconSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+    className: "button__icon",
+    fill: fillIcon,
+    fillSize: iconFillSize,
+    iconFill: iconFill || buttonConfig.appearance[appearance]?.iconFill,
+    iconStroke: iconStroke || buttonConfig.appearance[appearance]?.iconStroke,
+    imageSrc: iconSrc,
+    shape: iconShape,
+    size: iconSize,
+    SvgImage: icon
+  }), (children || label || buttonConfig.appearance[appearance]?.label) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "button__label",
+    size: labelTextSize || buttonConfig.appearance[appearance]?.labelTextSize,
+    style: labelStyles,
+    textColor: labelTextColor || buttonConfig.appearance[appearance]?.labelTextColor,
+    textColorHover: labelTextColorHover || buttonConfig.appearance[appearance]?.labelTextColorHover,
+    textWrap: labelTextWrap
+  }, children || label || buttonConfig.appearance[appearance]?.label), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+    className: "button__icon_after",
+    fill: fillIconAfter,
+    fillSize: iconAfterFillSize,
+    iconFill: iconAfterFill || buttonConfig.appearance[appearance]?.iconAfterFill,
+    iconStroke: iconAfterStroke || buttonConfig.appearance[appearance]?.iconAfterStroke,
+    imageSrc: iconAfterSrc,
+    shape: iconAfterShape,
+    size: iconAfterSize,
+    SvgImage: iconAfter
+  }), Badge, after));
+});
+Button.propTypes = {
+  after: PropTypes__default.default.any,
+  appearance: PropTypes__default.default.string,
+  Badge: PropTypes__default.default.element,
+  before: PropTypes__default.default.any,
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  href: PropTypes__default.default.string,
+  htmlType: PropTypes__default.default.string,
+  iconAfterFill: PropTypes__default.default.string,
+  iconAfterStroke: PropTypes__default.default.string,
+  iconBeforeFill: PropTypes__default.default.string,
+  iconBeforeStroke: PropTypes__default.default.string,
+  iconFill: PropTypes__default.default.string,
+  iconSize: PropTypes__default.default.string,
+  iconStroke: PropTypes__default.default.string,
+  isDisabled: PropTypes__default.default.bool,
+  label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  labelTextColor: PropTypes__default.default.string,
+  labelTextColorHover: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
+  labelTextWrap: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  loaderFill: PropTypes__default.default.string,
+  loaderItemFill: PropTypes__default.default.string,
+  loaderSet: PropTypes__default.default.string,
+  loading: PropTypes__default.default.bool,
+  rel: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  size: PropTypes__default.default.oneOf(size.default),
+  target: PropTypes__default.default.string,
+  type: PropTypes__default.default.oneOf(type.default),
+  width: PropTypes__default.default.oneOf(width.default),
+  onClick: PropTypes__default.default.func,
+  onMouseDown: PropTypes__default.default.func
+};
+Button.defaultProps = {
+  // Button with a `type="submit"` attribute is a form control by default.
+  // If the button is not associated with any form, it will look for
+  // the nearest form in the DOM and submit its data when clicked.
+  htmlType: 'button',
+  size: 'xl',
+  width: 'hug',
+  loaderSet: 'simple',
+  loading: false
+};
+Button.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Button",
+  "props": {
+    "htmlType": {
+      "defaultValue": {
+        "value": "'button'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "'xl'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "width": {
+      "defaultValue": {
+        "value": "'hug'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "loaderSet": {
+      "defaultValue": {
+        "value": "'simple'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "loading": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "Badge": {
+      "description": "",
+      "type": {
+        "name": "element"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "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
+    },
+    "href": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconAfterFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconAfterStroke": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconBeforeFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconBeforeStroke": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "iconStroke": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isDisabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "label": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColorHover": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextWrap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "link": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "loaderFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "loaderItemFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "rel": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "target": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Button = Button;
+exports.buttonConfig = buttonConfig;