@itcase/ui 1.1.0 → 1.1.2

package/dist/components/Label.js

@@ -25,6 +25,7 @@ require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../constants/componentProps/textSize.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -111,7 +112,7 @@ function Label(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  const textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'label_text-align_',
     propsKey: 'textAlign'
   });
@@ -135,7 +136,7 @@ function Label(props) {
   // } = labelAppearanceItem
 
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick,

package/dist/components/LanguageSelector.js

@@ -37,6 +37,7 @@ 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 }; }
 

package/dist/components/Modal.js

@@ -4,7 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var clsx = require('clsx');
-var index = require('./Fader.js');
+var index = require('./Overlay.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Loader.js');
@@ -59,11 +59,11 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     closeButton,
     contentClassName,
     id,
-    isFader,
-    faderClassName,
-    faderFill,
-    faderFillGradient,
-    faderOpacity,
+    isOverlay,
+    overlayClassName,
+    overlayFill,
+    overlayFillGradient,
+    overlayOpacity,
     isOpen: initialIsOpen,
     isScrollOnOpen,
     isSetFocusOnOpen,
@@ -83,7 +83,7 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     }
   }, []);
   const modalContentRef = React.useRef(null);
-  const modalFaderRef = React.useRef(null);
+  const modalOverlayRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(initialIsOpen);
   const addModalProps = React.useCallback(element => {
     // Change class need in "useEffect"
@@ -132,10 +132,10 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
       if (modalContentElement) {
         modalContentElement.parentNode.appendChild(modalContentElement)
       }
-      // Also move fader to end of modal root container after container
-      const modalFaderElement = modalFaderRef.current
-      if (modalFaderElement) {
-        modalFaderElement.parentNode.appendChild(modalFaderElement)
+      // Also move overlay to end of modal root container after container
+      const modalOverlayElement = modalOverlayRef.current
+      if (modalOverlayElement) {
+        modalOverlayElement.parentNode.appendChild(modalOverlayElement)
       }
     */
   }, [onOpenModal]);
@@ -206,13 +206,13 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     onClick: closeModal
   }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__wrapper"
-  }, children)), /*#__PURE__*/React__default.default.createElement(index.Fader, {
-    className: clsx__default.default('modal__fader', 'fader_type_modal', faderClassName),
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    isFader: isFader,
-    opacity: faderOpacity,
-    ref: modalFaderRef
+  }, children)), /*#__PURE__*/React__default.default.createElement(index.Overlay, {
+    className: clsx__default.default('modal__overlay', 'overlay_type_modal', overlayClassName),
+    fill: overlayFill,
+    fillGradient: overlayFillGradient,
+    isOverlay: isOverlay,
+    opacity: overlayOpacity,
+    ref: modalOverlayRef
   })) : null,
   // A DOM element
   modalElement);
@@ -224,11 +224,11 @@ Modal.propTypes = {
   closeText: PropTypes__default.default.string,
   contentClassName: PropTypes__default.default.string,
   debug: PropTypes__default.default.bool,
-  faderFill: PropTypes__default.default.string,
-  faderFillGradient: PropTypes__default.default.string,
-  faderOpacity: PropTypes__default.default.string,
+  overlayFill: PropTypes__default.default.string,
+  overlayFillGradient: PropTypes__default.default.string,
+  overlayOpacity: PropTypes__default.default.string,
   id: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.bool,
+  isOverlay: PropTypes__default.default.bool,
   isScrollOnOpen: PropTypes__default.default.bool,
   isSetFocusOnOpen: PropTypes__default.default.bool,
   modalQuerySelector: PropTypes__default.default.string,
@@ -236,7 +236,7 @@ Modal.propTypes = {
   onOpenModal: PropTypes__default.default.func
 };
 Modal.defaultProps = {
-  isFader: true,
+  isOverlay: true,
   isOpen: false,
   isScrollOnOpen: true,
   isSetFocusOnOpen: true,
@@ -247,7 +247,7 @@ Modal.__docgenInfo = {
   "methods": [],
   "displayName": "Modal",
   "props": {
-    "isFader": {
+    "isOverlay": {
       "defaultValue": {
         "value": "true",
         "computed": false
@@ -340,21 +340,21 @@ Modal.__docgenInfo = {
       },
       "required": false
     },
-    "faderFill": {
+    "overlayFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "faderFillGradient": {
+    "overlayFillGradient": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "faderOpacity": {
+    "overlayOpacity": {
       "description": "",
       "type": {
         "name": "string"

package/dist/components/{Fader.js → Overlay.js}

@@ -22,10 +22,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Fader(props) {
+function Overlay(props) {
   const {
     className,
-    isFader,
+    isOverlay,
     type
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -41,19 +41,15 @@ function Fader(props) {
     propsKey: 'opacity'
   });
   const {
-    styles: faderStyles
+    styles: overlayStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'fader', opacityClass, isFader && 'fader_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
-    style: faderStyles
+    className: clsx__default.default(className, 'overlay', opacityClass, isOverlay && 'overlay_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
+    style: overlayStyles
   }, "\xA0");
 }
-Fader.propTypes = {
+Overlay.propTypes = {
   className: PropTypes__default.default.string,
-  opacity: PropTypes__default.default.string,
-  opacityDesktop: PropTypes__default.default.string,
-  opacityMobile: PropTypes__default.default.string,
-  opacityTablet: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
@@ -62,13 +58,17 @@ Fader.propTypes = {
   fillGradientMobile: PropTypes__default.default.oneOf(fillGradient.default),
   fillGradientTablet: PropTypes__default.default.oneOf(fillGradient.default),
   fillGradientDesktop: PropTypes__default.default.oneOf(fillGradient.default),
+  opacity: PropTypes__default.default.string,
+  opacityDesktop: PropTypes__default.default.string,
+  opacityMobile: PropTypes__default.default.string,
+  opacityTablet: PropTypes__default.default.string,
   type: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.any
+  isOverlay: PropTypes__default.default.any
 };
-Fader.__docgenInfo = {
+Overlay.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "Fader",
+  "displayName": "Overlay",
   "props": {
     "className": {
       "description": "",
@@ -77,34 +77,6 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
-    "opacity": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityDesktop": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityMobile": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityTablet": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "fill": {
       "description": "",
       "type": {
@@ -177,6 +149,34 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
+    "opacity": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {
@@ -184,7 +184,7 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
-    "isFader": {
+    "isOverlay": {
       "description": "",
       "type": {
         "name": "any"
@@ -194,4 +194,4 @@ Fader.__docgenInfo = {
   }
 };
 
-exports.Fader = Fader;
+exports.Overlay = Overlay;

package/dist/components/{RadioButton.js → Radio.js}

@@ -28,17 +28,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-const radioButtonConfig = {
+const radioConfig = {
   state: {},
   setState: newComponent => {
-    radioButtonConfig.state = newComponent;
+    radioConfig.state = newComponent;
   },
   appearance: {},
   setAppearance: newComponent => {
-    radioButtonConfig.appearance = newComponent;
+    radioConfig.appearance = newComponent;
   }
 };
-function RadioButton(props) {
+function Radio(props) {
   const {
     appearance,
     state,
@@ -62,11 +62,11 @@ function RadioButton(props) {
     propsKey: 'fill'
   });
   const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_shape_',
+    prefix: 'radio_shape_',
     propsKey: 'shape'
   });
   const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button__state_shape_',
+    prefix: 'radio__state_shape_',
     propsKey: 'stateShape'
   });
   const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -78,7 +78,7 @@ function RadioButton(props) {
     propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
   const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_checkmark_fill_',
+    prefix: 'radio_checkmark_fill_',
     propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
   const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -99,43 +99,43 @@ function RadioButton(props) {
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     htmlFor: id,
-    className: clsx__default.default(className, 'radio-button', fillClass, shapeClass)
+    className: clsx__default.default(className, 'radio', fillClass, shapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass || radioButtonConfig.appearance[appearance] && `radio-button_checkmark_fill_${radioButtonConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+    className: clsx__default.default('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance] && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
-    className: "radio-button__input",
+    className: "radio__input",
     disabled: disabled,
     id: id,
     type: "radio",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioButtonConfig.appearance[appearance] && `border-color_${radioButtonConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioButtonConfig.appearance[appearance] && `radio-button__state_shape_${radioButtonConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioButtonConfig.appearance[appearance] && `border-width_${radioButtonConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+    className: clsx__default.default('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioConfig.appearance[appearance] && `border-color_${radioConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioConfig.appearance[appearance] && `radio__state_shape_${radioConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioConfig.appearance[appearance] && `border-width_${radioConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "radio-button__state-checkmark"
+    className: "radio__state-checkmark"
   }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "radio-button__label",
-    size: labelTextSize || radioButtonConfig.appearance[appearance].labelTextSize,
-    textColor: labelTextColor || radioButtonConfig.appearance[appearance].labelTextColor,
+    className: "radio__label",
+    size: labelTextSize || radioConfig.appearance[appearance].labelTextSize,
+    textColor: labelTextColor || radioConfig.appearance[appearance].labelTextColor,
     textWeight: labelTextWidth
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "radio-button__desc",
-    size: descTextSize || radioButtonConfig.appearance[appearance].descTextSize,
-    textColor: descTextColor || radioButtonConfig.appearance[appearance].descTextColor,
+    className: "radio__desc",
+    size: descTextSize || radioConfig.appearance[appearance].descTextSize,
+    textColor: descTextColor || radioConfig.appearance[appearance].descTextColor,
     textWeight: descTextWidth
   }, desc));
 }
-RadioButton.propTypes = {
+Radio.propTypes = {
   className: PropTypes__default.default.string
 };
-RadioButton.defaultProps = {
+Radio.defaultProps = {
   shape: 'circular',
   tag: 'label'
 };
-RadioButton.__docgenInfo = {
+Radio.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "RadioButton",
+  "displayName": "Radio",
   "props": {
     "shape": {
       "defaultValue": {
@@ -161,5 +161,5 @@ RadioButton.__docgenInfo = {
   }
 };
 
-exports.RadioButton = RadioButton;
-exports.radioButtonConfig = radioButtonConfig;
+exports.Radio = Radio;
+exports.radioConfig = radioConfig;