@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/lib/Radio/Radio.js

@@ -21,6 +21,8 @@ var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -53,6 +55,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -64,28 +67,38 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value;
       onChange && onChange(value, e);
     }
+  }, {
+    key: "handleGetRef",
+    value: function handleGetRef(ele) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          value = _this$props2.value;
+      getRef && getRef(ele, value);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          palette = _this$props2.palette,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          text = _this$props2.text,
-          labelPalette = _this$props2.labelPalette,
-          size = _this$props2.size,
-          labelSize = _this$props2.labelSize,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          isFilled = _this$props2.isFilled,
-          customClass = _this$props2.customClass,
-          a11y = _this$props2.a11y;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          name = _this$props3.name,
+          value = _this$props3.value,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          palette = _this$props3.palette,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          text = _this$props3.text,
+          labelPalette = _this$props3.labelPalette,
+          size = _this$props3.size,
+          labelSize = _this$props3.labelSize,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          isFilled = _this$props3.isFilled,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          children = _this$props3.children,
+          a11y = _this$props3.a11y;
       var _customClass$customRa = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadio,
@@ -97,13 +110,18 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'radio' : _a11y$role,
+          tabIndex = a11y.tabIndex,
           _a11y$ariaChecked = a11y.ariaChecked,
           ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
           ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby,
           _a11y$ariaReadonly = a11y.ariaReadonly,
           ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      var _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
+          _customProps$LabelPro = customProps.LabelProps,
+          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: value ? value.toLowerCase() : 'RadioComp',
         isCover: false,
         isInline: text ? false : true,
@@ -113,13 +131,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "data-title": toolTip,
         onClick: !isReadOnly && !disabled ? this.onChange : '',
         "aria-checked": ariaChecked,
-        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+        eleRef: this.handleGetRef,
         role: role,
         "aria-Hidden": ariaHidden,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
@@ -144,17 +163,17 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _RadioModule["default"].text
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
-        palette: disabled ? 'disable' : labelPalette,
+        palette: labelPalette,
         size: labelSize,
         type: "title",
         clipped: true,
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active && !disabled ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
-      })));
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
+      }, LabelProps))), children);
     }
   }]);
 
@@ -163,9 +182,4 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Radio;
 Radio.defaultProps = _defaultProps.defaultProps;
-Radio.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Radio.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+Radio.propTypes = _propTypes.propTypes;

package/lib/Radio/Radio.module.css

@@ -1,112 +1,115 @@
-.varClass {
-  /* radio default variables */
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
-  --radio_bg_color: none;
-  --radio_stroke_width: 2px;
-  --radio_stroke_color: var(--zdt_radio_default_stroke);
-  --radio_fill: none;
-  --radio_inner_stroke_width: 0;
-}[dir=ltr] .varClass {
-  --radio_label_margin: 0 0 0 var(--zd_size6);
-}[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
-}
-.container {
-  composes: varClass;
-}
-.pointer {
-  cursor: pointer;
-}
-.readonly, .disabled {
-  cursor: not-allowed;
-}
-.radio {
-  composes: offSelection from '../common/common.module.css';
-  width: var(--radio_width);
-  height: var(--radio_height);
-  stroke: var(--radio_stroke_color);
-  background: var(--radio_bg_color);
-  border-radius: 50%;
-}
-.radio,
-.centerPath {
-  fill: var(--radio_fill);
-}
-.filled {
-  --radio_bg_color: var(--zdt_radio_default_bg);
-}
-
-.medium {
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
-}
-.small {
-  --radio_width: var(--zd_size13);
-  --radio_height: var(--zd_size13);
-}
-.radioLabel {
-  font-size: 0 ;
-  display: block;
-}
-.rdBox {
-  fill: none;
-  stroke-width: var(--radio_stroke_width);
-  stroke-linecap: round;
-  stroke: inherit;
-}
-.centerPath {
-  --radio_fill: inherit;
-  stroke-width: var(--radio_inner_stroke_width);
-  transform-origin: center;
-}
-[dir=ltr] .checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-.rdBoxprimary,
-.hoverEfffect:hover .hoverprimary
-/* .hoverEfffect:focus .hoverprimary  */
-{
-  --radio_stroke_color: var(--zdt_radio_primary_stroke);
-}
-
-.rdBoxdanger,
-.hoverEfffect:hover .hoverdanger
-/* .hoverEfffect:focus .hoverdanger */
- {
-  --radio_stroke_color: var(--zdt_radio_danger_stroke);
-}
-
-.centerPathprimary {
-  --radio_fill: var(--zdt_radio_primary_fill);
-}
-.centerPathdanger {
-  --radio_fill: var(--zdt_radio_danger_fill);
-}
-
-.active:hover .primaryLabel,
-/* .active:focus .primaryLabel, */
-.primarycheckedActive {
-  --label_text_color: var(--zdt_radio_label_primary_text);
-}
-
-.active:hover .dangerLabel,
-/* .active:focus .dangerLabel, */
-.dangercheckedActive {
-  --label_text_color: var(--zdt_radio_label_danger_text);
-}
-
-.text {
-  margin: var(--radio_label_margin);
-}
-@keyframes circleAnimate {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
+.varClass {
+  /* radio default variables */
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
+  --radio_bg_color: none;
+  --radio_stroke_width: 2px;
+  --radio_stroke_color: var(--zdt_radio_default_stroke);
+  --radio_fill: none;
+  --radio_inner_stroke_width: 0;
+}[dir=ltr] .varClass {
+  --radio_label_margin: 0 0 0 var(--zd_size6);
+}[dir=rtl] .varClass {
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
+}
+.container {
+  composes: varClass;
+}
+.pointer {
+  cursor: pointer;
+}
+.readonly, .disabled {
+  cursor: not-allowed;
+}
+.disabled {
+  opacity: 0.7
+}
+.radio {
+  composes: offSelection from '../common/common.module.css';
+  width: var(--radio_width);
+  height: var(--radio_height);
+  stroke: var(--radio_stroke_color);
+  background: var(--radio_bg_color);
+  border-radius: 50%;
+}
+.radio,
+.centerPath {
+  fill: var(--radio_fill);
+}
+.filled {
+  --radio_bg_color: var(--zdt_radio_default_bg);
+}
+
+.medium {
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
+}
+.small {
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
+}
+.radioLabel {
+  font-size: 0 ;
+  display: block;
+}
+.rdBox {
+  fill: none;
+  stroke-width: var(--radio_stroke_width);
+  stroke-linecap: round;
+  stroke: inherit;
+}
+.centerPath {
+  --radio_fill: inherit;
+  stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
+}
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+.rdBoxprimary,
+.hoverEfffect:hover .hoverprimary
+/* .hoverEfffect:focus .hoverprimary  */
+{
+  --radio_stroke_color: var(--zdt_radio_primary_stroke);
+}
+
+.rdBoxdanger,
+.hoverEfffect:hover .hoverdanger
+/* .hoverEfffect:focus .hoverdanger */
+ {
+  --radio_stroke_color: var(--zdt_radio_danger_stroke);
+}
+
+.centerPathprimary {
+  --radio_fill: var(--zdt_radio_primary_fill);
+}
+.centerPathdanger {
+  --radio_fill: var(--zdt_radio_danger_fill);
+}
+
+.active:hover .primaryLabel,
+/* .active:focus .primaryLabel, */
+.primarycheckedActive {
+  --label_text_color: var(--zdt_radio_label_primary_text);
+}
+
+.active:hover .dangerLabel,
+/* .active:focus .dangerLabel, */
+.dangercheckedActive {
+  --label_text_color: var(--zdt_radio_label_danger_text);
+}
+
+.text {
+  margin: var(--radio_label_margin);
+}
+@keyframes circleAnimate {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/lib/Radio/__tests__/Radio.spec.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Radio = _interopRequireDefault(require("../Radio.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Radio', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the ID', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      id: "RadioID"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Name', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      name: "RadioName"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Value', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      value: "RadioValue"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['primary', 'danger'];
+  test.each(palette)('rendering palette - %s', function (palette) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      palette: palette
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Checked is true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      palette: palette,
+      active: true,
+      text: "RadioText"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the disabled is true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      disabled: true,
+      palette: palette,
+      text: "RadioText"
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isReadOnly is true', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the disabledTitle', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      disabled: true,
+      disabledTitle: "radioDisableTitle",
+      text: "RadioText"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the title', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      title: "radioTitle",
+      text: "RadioText"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the text', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      text: "RadioText"
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var labelPalette = ['default', 'primary', 'danger', 'mandatory'];
+  test.each(labelPalette)('rendering labelPalette - %s', function (labelPalette) {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      labelPalette: labelPalette,
+      text: "RadioText"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['small', 'medium'];
+  test.each(size)('rendering size - %s', function (size) {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      size: size
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var labelSize = ['small', 'medium', 'large'];
+  test.each(labelSize)('rendering labelSize - %s', function (labelSize) {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      labelSize: labelSize,
+      text: "RadioText"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var variant = ['primary', 'default'];
+  test.each(variant)('rendering labelSize - %s', function (variant) {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      variant: variant,
+      text: "RadioText"
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('rendering the active is true - %s', function (palette) {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      palette: palette,
+      active: true,
+      checked: true,
+      text: "RadioText"
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isFilled is false', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      isFilled: false
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass of customRadioWrap,customRadio,customLabel ', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      customClass: {
+        customRadioWrap: 'CustomClassCustomRadioWrap',
+        customRadio: 'CustomClassCustomRadio',
+        customLabel: 'CustomClassCustomLabel'
+      },
+      text: "RadioText"
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaChecked true', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      checked: true
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaHidden , ariaChecked, ariaReadonly fasle true', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      checked: true,
+      isReadOnly: true,
+      disabled: true,
+      a11y: {
+        ariaHidden: true,
+        ariaChecked: true,
+        ariaReadonly: true
+      }
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaHidden , ariaChecked, ariaReadonly is false', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      a11y: {
+        ariaHidden: false
+      }
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the accessMode when isReadOnly ', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      isReadOnly: true,
+      text: "RadioText"
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the accessMode when disabled ', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      disabled: true,
+      text: "RadioText"
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('eleRef prop is a function', function () {
+    // Create a mock function
+    var mockEleRef = jest.fn();
+
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      eleRef: mockEleRef
+    })),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with different onClick props', function () {
+    var onClickFunction = jest.fn();
+
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      value: "radioValue",
+      onChange: onClickFunction
+    }))),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});