@itcase/ui 1.1.6 → 1.1.8

package/dist/{components/Background.js → cjs/components/RangeSlider.js}

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
 var width = require('../constants/componentProps/width.js');
-var position = require('../constants/componentProps/position.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Slider = require('rc-slider');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -23,77 +23,123 @@ 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 Slider__default = /*#__PURE__*/_interopDefault(Slider);
 
-function Background(props) {
+function RangeSlider(props) {
   const {
-    src,
-    className
+    after,
+    before,
+    children,
+    className,
+    set,
+    disabled,
+    min,
+    max,
+    pushable,
+    range,
+    vertical,
+    value,
+    onChangeSlider
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'position_',
-    propsKey: 'position'
+  const trackFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-track-fill_',
+    propsKey: 'fillTrack'
+  });
+  const railFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-rail-fill_',
+    propsKey: 'fillRail'
+  });
+  const handleFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-fill_',
+    propsKey: 'fillHandle'
+  });
+  const handleFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-fill-hover_',
+    propsKey: 'fillHandleHover'
+  });
+  const handleDraggingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-dragging-fill_',
+    propsKey: 'fillHandleDragging'
+  });
+  const handleDraggingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'range-slider-handle-dragging-fill-hover_',
+    propsKey: 'fillHandleDraggingHover'
   });
   const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'backdround_shape_',
+    prefix: 'filter_shape_',
     propsKey: 'shape'
   });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  const constraintsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'constraints_',
-    propsKey: 'constraints'
-  });
-  const imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'width_',
-    propsKey: 'imageWidth'
-  });
-  const imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'height_',
-    propsKey: 'imageHeight'
-  });
   const {
-    styles: backgroundStyles
+    styles: rangeSliderStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'background', positionClass, widthClass, fillClass, shapeClass),
-    style: backgroundStyles
-  }, /*#__PURE__*/React__default.default.createElement("img", {
-    className: clsx__default.default('background__item', imageWidthClass, imageHeightClass, constraintsClass),
-    src: src
-  }));
+    className: clsx__default.default(className, 'range-slider', set && `range-slider_set_${set}`, fillClass, trackFillClass, railFillClass, handleFillClass, handleFillHoverClass, handleDraggingFillClass, handleDraggingFillHoverClass, shapeClass, widthClass),
+    style: rangeSliderStyles
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "range-slider__before"
+  }, before), /*#__PURE__*/React__default.default.createElement(Slider__default.default, {
+    className: "range-slider__wrapper",
+    disabled: disabled,
+    min: min,
+    max: max,
+    pushable: pushable,
+    range: range,
+    vertical: vertical,
+    value: value,
+    onChange: onChangeSlider
+  }), children, after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "range-slider__after"
+  }, after));
 }
-Background.propTypes = {
+RangeSlider.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
+  desc: PropTypes__default.default.string,
+  descSize: PropTypes__default.default.string,
+  descTextColor: 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),
-  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  set: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
-  src: PropTypes__default.default.string,
-  position: PropTypes__default.default.oneOf(position.default),
-  positionMobile: PropTypes__default.default.oneOf(position.default),
-  positionTablet: PropTypes__default.default.oneOf(position.default),
-  positionDesktop: PropTypes__default.default.oneOf(position.default),
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
   width: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default),
   widthMobile: PropTypes__default.default.oneOf(width.default),
-  widthTablet: PropTypes__default.default.oneOf(width.default),
-  widthDesktop: PropTypes__default.default.oneOf(width.default)
+  widthTablet: PropTypes__default.default.oneOf(width.default)
 };
-Background.__docgenInfo = {
+RangeSlider.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "Background",
+  "displayName": "RangeSlider",
   "props": {
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "children": {
       "description": "",
       "type": {
@@ -108,34 +154,28 @@ Background.__docgenInfo = {
       },
       "required": false
     },
-    "fill": {
+    "desc": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
+        "name": "string"
       },
       "required": false
     },
-    "fillMobile": {
+    "descSize": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
+        "name": "string"
       },
       "required": false
     },
-    "fillTablet": {
+    "descTextColor": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
+        "name": "string"
       },
       "required": false
     },
-    "fillDesktop": {
+    "fill": {
       "description": "",
       "type": {
         "name": "enum",
@@ -144,55 +184,46 @@ Background.__docgenInfo = {
       },
       "required": false
     },
-    "shape": {
+    "fillDesktop": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "src": {
-      "description": "",
-      "type": {
-        "name": "string"
+        "value": "fillProps"
       },
       "required": false
     },
-    "position": {
+    "fillMobile": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "positionProps"
+        "value": "fillProps"
       },
       "required": false
     },
-    "positionMobile": {
+    "fillTablet": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "positionProps"
+        "value": "fillProps"
       },
       "required": false
     },
-    "positionTablet": {
+    "set": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "positionProps"
+        "name": "string"
       },
       "required": false
     },
-    "positionDesktop": {
+    "shape": {
       "description": "",
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "positionProps"
+        "value": "shapeProps"
       },
       "required": false
     },
@@ -232,7 +263,7 @@ Background.__docgenInfo = {
       },
       "required": false
     },
-    "widthMobile": {
+    "widthDesktop": {
       "description": "",
       "type": {
         "name": "enum",
@@ -241,7 +272,7 @@ Background.__docgenInfo = {
       },
       "required": false
     },
-    "widthTablet": {
+    "widthMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -250,7 +281,7 @@ Background.__docgenInfo = {
       },
       "required": false
     },
-    "widthDesktop": {
+    "widthTablet": {
       "description": "",
       "type": {
         "name": "enum",
@@ -262,4 +293,4 @@ Background.__docgenInfo = {
   }
 };
 
-exports.Background = Background;
+exports.RangeSlider = RangeSlider;

package/dist/cjs/components/Response.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var SVG = require('react-inlinesvg');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var fillHover = require('../constants/componentProps/fillHover.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var size = require('../constants/componentProps/size.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
+var width = require('../constants/componentProps/width.js');
+var Button = require('../Button-3GkRq8Pv.js');
+var Group = require('../Group-4zWTDvKx.js');
+var Text = require('../Text-D7Aq1i5R.js');
+var index = require('./Title.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../Icon-UBahY607.js');
+require('../Link-BoShjCEw.js');
+require('./Tooltip.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/type.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('./Loader.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 responseConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    responseConfig.appearance = newComponent;
+  }
+};
+function Response(props) {
+  const {
+    after,
+    before,
+    appearance,
+    imageSrc,
+    className,
+    title,
+    titleTextSize,
+    titleTextWeight,
+    titleTextColor,
+    message,
+    messageTextColor,
+    messageTextSize,
+    primaryButton,
+    primaryButtonAfter,
+    primaryButtonAppearance,
+    primaryButtonBefore,
+    primaryButtonFill,
+    primaryButtonFillHover,
+    primaryButtonLabel,
+    primaryButtonLabelTextColor,
+    primaryButtonLabelTextSize,
+    primaryButtonShape,
+    primaryButtonSize,
+    primaryButtonWidth,
+    secondaryButton,
+    secondaryButtonAfter,
+    secondaryButtonAppearance,
+    secondaryButtonBefore,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    secondaryButtonLabel,
+    secondaryButtonLabelTextColor,
+    secondaryButtonLabelTextSize,
+    secondaryButtonShape,
+    secondaryButtonSize,
+    secondaryButtonWidth,
+    set,
+    onClickPrimaryButton,
+    onClickSecondaryButton
+  } = props;
+  const ImageComponent = React.useMemo(() => {
+    if (imageSrc) {
+      // eslint-disable-next-line react/prop-types
+      if (imageSrc.endsWith('.svg')) {
+        return /*#__PURE__*/React__default.default.createElement(SVG__default.default, {
+          src: imageSrc
+        });
+      }
+      return /*#__PURE__*/React__default.default.createElement("img", {
+        src: imageSrc
+      });
+    }
+    return null;
+  }, [imageSrc]);
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'response_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: responseStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'response', fillClass || responseConfig.appearance[appearance]?.fill && `fill_${responseConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || responseConfig.appearance[appearance]?.fillHover && `fill_hover_${responseConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass || responseConfig.appearance[appearance]?.shape && `fill_hover_${responseConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && `response_set_${set}`),
+    style: responseStyles
+  }, before, ImageComponent || responseConfig.appearance[appearance]?.imageSrc, /*#__PURE__*/React__default.default.createElement(Group.Group, {
+    className: "response__desc",
+    width: "fill"
+  }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+    className: "response__title",
+    size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize || 'h2',
+    textColor: titleTextColor || responseConfig.appearance[appearance]?.titleTextColor,
+    textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight || '600'
+  }, title), message && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "response__message",
+    size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize || 'xxl',
+    textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
+  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || responseConfig.appearance[appearance]) && /*#__PURE__*/React__default.default.createElement(Group.Group, {
+    className: "response__button",
+    width: "fill"
+  }, primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+    after: primaryButtonAfter,
+    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance || 'dev',
+    before: primaryButtonBefore,
+    className: "response__button-item",
+    fill: primaryButtonFill,
+    fillHover: primaryButtonFillHover,
+    label: primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel,
+    labelTextColor: primaryButtonLabelTextColor,
+    labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
+    shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
+    size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
+    width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth || 'fill',
+    onClick: onClickPrimaryButton
+  }) : primaryButton, secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+    after: secondaryButtonAfter,
+    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance || 'dev',
+    before: secondaryButtonBefore,
+    className: "response__button-item",
+    fill: secondaryButtonFill,
+    fillHover: secondaryButtonFillHover,
+    label: secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel,
+    labelTextColor: secondaryButtonLabelTextColor,
+    labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
+    shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,
+    size: secondaryButtonSize || responseConfig.appearance[appearance]?.secondaryButtonSize,
+    width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth || 'fill',
+    onClick: onClickSecondaryButton
+  }) : secondaryButton), after);
+}
+Response.propsTypes = {
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillHover: PropTypes__default.default.oneOf(fillHover.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  appearance: PropTypes__default.default.string,
+  imageSrc: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleTextSize: PropTypes__default.default.oneOf(titleSize.default),
+  titleTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  message: PropTypes__default.default.string,
+  messageTextColor: PropTypes__default.default.oneOf(textColor.default),
+  messageTextSize: PropTypes__default.default.oneOf(textSize.default),
+  primaryButton: PropTypes__default.default.any,
+  primaryButtonAfter: PropTypes__default.default.any,
+  primaryButtonAppearance: PropTypes__default.default.string,
+  primaryButtonBefore: PropTypes__default.default.any,
+  primaryButtonFill: PropTypes__default.default.oneOf(fill.default),
+  primaryButtonFillHover: PropTypes__default.default.oneOf(fillHover.default),
+  primaryButtonLabel: PropTypes__default.default.string,
+  primaryButtonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  primaryButtonLabelTextSize: PropTypes__default.default.oneOf(textSize.default),
+  primaryButtonShape: PropTypes__default.default.oneOf(shape.default),
+  primaryButtonSize: PropTypes__default.default.oneOf(size.default),
+  primaryButtonWidth: PropTypes__default.default.oneOf(width.default),
+  secondaryButton: PropTypes__default.default.any,
+  secondaryButtonAfter: PropTypes__default.default.any,
+  secondaryButtonAppearance: PropTypes__default.default.string,
+  secondaryButtonBefore: PropTypes__default.default.any,
+  secondaryButtonFill: PropTypes__default.default.oneOf(fill.default),
+  secondaryButtonFillHover: PropTypes__default.default.oneOf(fillHover.default),
+  secondaryButtonLabel: PropTypes__default.default.string,
+  secondaryButtonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  secondaryButtonLabelTextSize: PropTypes__default.default.oneOf(textSize.default),
+  secondaryButtonShape: PropTypes__default.default.oneOf(shape.default),
+  secondaryButtonSize: PropTypes__default.default.oneOf(size.default),
+  secondaryButtonWidth: PropTypes__default.default.oneOf(width.default),
+  onClickPrimaryButton: PropTypes__default.default.func,
+  onClickSecondaryButton: PropTypes__default.default.func
+};
+Response.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Response"
+};
+
+exports.Response = Response;
+exports.responseConfig = responseConfig;