@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/components/Tile.js

@@ -0,0 +1,568 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$1 = require('./Badge.js');
+require('../Icon-UBahY607.js');
+var index = require('./Title.js');
+var Text = require('../Text-D7Aq1i5R.js');
+var align = require('../constants/componentProps/align.js');
+var alignDirection = require('../constants/componentProps/alignDirection.js');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderColorHover = require('../constants/componentProps/borderColorHover.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var size = require('../constants/componentProps/size.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var useStyles = require('../hooks/useStyles.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../jsx-runtime-BCmQOGxJ.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('../Link-BoShjCEw.js');
+require('react-inlinesvg');
+require('./Tooltip.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.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);
+
+function Tile(props) {
+  const {
+    children,
+    className,
+    badge,
+    badgeSize,
+    badgeTextSize,
+    badgeType,
+    direction,
+    before,
+    after,
+    reverse,
+    size,
+    text,
+    textSize,
+    textWrap,
+    textColor,
+    title,
+    titleTextSize,
+    titleTextWrap,
+    titleTextColor,
+    titleTextWeight,
+    titleTextAlign,
+    type,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tile_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 {
+    styles: tileStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && `direction_${direction}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && `tile_size_${size}`, type && `tile_type_${type}`, badge && `tile_state_badge`),
+    style: tileStyles,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('tile__wrapper', alignClass, alignDirectionClass)
+  }, before, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+    className: "tile__title",
+    size: titleTextSize,
+    textAlign: titleTextAlign,
+    textColor: titleTextColor,
+    textWeight: titleTextWeight,
+    textWrap: titleTextWrap
+  }, title), text && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "tile__text",
+    size: textSize,
+    textColor: textColor,
+    textWrap: textWrap
+  }, text), badge && /*#__PURE__*/React__default.default.createElement(index$1.Badge, {
+    className: "tile__badge",
+    size: badgeSize,
+    textSize: badgeTextSize,
+    type: badgeType,
+    value: badge
+  }), children, after));
+}
+Tile.propTypes = {
+  after: PropTypes__default.default.any,
+  align: PropTypes__default.default.oneOf(align.default),
+  alignDesktop: PropTypes__default.default.oneOf(align.default),
+  alignMobile: PropTypes__default.default.oneOf(align.default),
+  alignTablet: PropTypes__default.default.oneOf(align.default),
+  alignDirection: PropTypes__default.default.oneOf(alignDirection.default),
+  alignDirectionDesktop: PropTypes__default.default.oneOf(alignDirection.default),
+  alignDirectionMobile: PropTypes__default.default.oneOf(alignDirection.default),
+  alignDirectionTablet: PropTypes__default.default.oneOf(alignDirection.default),
+  badge: PropTypes__default.default.element,
+  badgeSize: PropTypes__default.default.oneOf(size.default),
+  badgeTextSize: PropTypes__default.default.oneOf(textSize.default),
+  badgeType: PropTypes__default.default.string,
+  before: PropTypes__default.default.any,
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorHover: PropTypes__default.default.oneOf(borderColorHover.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: 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),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  onClick: PropTypes__default.default.func,
+  reverse: PropTypes__default.default.bool,
+  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),
+  size: PropTypes__default.default.string,
+  text: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textSize: PropTypes__default.default.oneOf(size.default),
+  textTag: PropTypes__default.default.string,
+  textWrap: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleTextAlign: PropTypes__default.default.oneOf(size.default),
+  titleTextColor: PropTypes__default.default.oneOf(size.default),
+  titleTextSize: PropTypes__default.default.oneOf(size.default),
+  titleTextWeight: PropTypes__default.default.oneOf(size.default),
+  titleTextWrap: PropTypes__default.default.oneOf(size.default),
+  type: PropTypes__default.default.string
+};
+Tile.defaultProps = {
+  textTag: 'span',
+  alignDirection: 'vertical'
+};
+Tile.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Tile",
+  "props": {
+    "textTag": {
+      "defaultValue": {
+        "value": "'span'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "alignDirection": {
+      "defaultValue": {
+        "value": "'vertical'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignDirectionProps"
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "align": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignProps"
+      },
+      "required": false
+    },
+    "alignDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignProps"
+      },
+      "required": false
+    },
+    "alignMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignProps"
+      },
+      "required": false
+    },
+    "alignTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignProps"
+      },
+      "required": false
+    },
+    "alignDirectionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignDirectionProps"
+      },
+      "required": false
+    },
+    "alignDirectionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignDirectionProps"
+      },
+      "required": false
+    },
+    "alignDirectionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignDirectionProps"
+      },
+      "required": false
+    },
+    "badge": {
+      "description": "",
+      "type": {
+        "name": "element"
+      },
+      "required": false
+    },
+    "badgeSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "badgeTextSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "badgeType": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "borderColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderColorHover": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorHoverProps"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderWidth": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderWidthProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "direction": {
+      "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
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "reverse": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "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
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "text": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "textSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "textWrap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleTextAlign": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "titleTextColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "titleTextSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "titleTextWeight": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "titleTextWrap": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Tile = Tile;