@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/Radio/Radio.js

@@ -9,6 +9,7 @@ export default class Radio extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
   }
 
   onChange(e) {
@@ -19,6 +20,14 @@ export default class Radio extends React.Component {
     onChange && onChange(value, e);
   }
 
+  handleGetRef(ele) {
+    let {
+      getRef,
+      value
+    } = this.props;
+    getRef && getRef(ele, value);
+  }
+
   render() {
     let {
       id,
@@ -38,6 +47,8 @@ export default class Radio extends React.Component {
       active,
       isFilled,
       customClass,
+      customProps,
+      children,
       a11y
     } = this.props;
     let {
@@ -50,11 +61,16 @@ export default class Radio extends React.Component {
     let {
       ariaHidden,
       role = 'radio',
+      tabIndex,
       ariaChecked = checked,
       ariaLabel,
       ariaLabelledby,
       ariaReadonly = isReadOnly || disabled ? true : false
     } = a11y;
+    let {
+      ContainerProps = {},
+      LabelProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       dataId: value ? value.toLowerCase() : 'RadioComp',
       isCover: false,
@@ -65,12 +81,14 @@ export default class Radio extends 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
+      "aria-readonly": ariaReadonly,
+      ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
             ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
@@ -99,23 +117,19 @@ export default class Radio extends React.Component {
       className: style.text
     }, /*#__PURE__*/React.createElement(Label, {
       text: text,
-      palette: disabled ? 'disable' : labelPalette,
+      palette: labelPalette,
       size: labelSize,
       type: "title",
       clipped: true,
       dataId: `${text}_label`,
       variant: variant,
       title: toolTip ? toolTip : text,
-      customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
-              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-    })));
+      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
+              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+      ...LabelProps
+    })), children);
   }
 
 }
 Radio.defaultProps = defaultProps;
-Radio.propTypes = propTypes; // if (__DOCS__) {
-//   Radio.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+Radio.propTypes = propTypes;

package/es/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/es/Radio/__tests__/Radio.spec.js

@@ -0,0 +1,241 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Radio from '../Radio.js';
+describe('Radio', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the ID', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      id: "RadioID"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      name: "RadioName"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      value: "RadioValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['primary', 'danger'];
+  test.each(palette)('rendering palette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Checked is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      palette: palette,
+      active: true,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the disabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      disabled: true,
+      palette: palette,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the disabledTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      disabled: true,
+      disabledTitle: "radioDisableTitle",
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      title: "radioTitle",
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const labelPalette = ['default', 'primary', 'danger', 'mandatory'];
+  test.each(labelPalette)('rendering labelPalette - %s', labelPalette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      labelPalette: labelPalette,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['small', 'medium'];
+  test.each(size)('rendering size - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const labelSize = ['small', 'medium', 'large'];
+  test.each(labelSize)('rendering labelSize - %s', labelSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      labelSize: labelSize,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const variant = ['primary', 'default'];
+  test.each(variant)('rendering labelSize - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      variant: variant,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('rendering the active is true - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      palette: palette,
+      active: true,
+      checked: true,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isFilled is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      isFilled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass of customRadioWrap,customRadio,customLabel ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadioWrap: 'CustomClassCustomRadioWrap',
+        customRadio: 'CustomClassCustomRadio',
+        customLabel: 'CustomClassCustomLabel'
+      },
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaChecked true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      checked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaHidden , ariaChecked, ariaReadonly fasle true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      checked: true,
+      isReadOnly: true,
+      disabled: true,
+      a11y: {
+        ariaHidden: true,
+        ariaChecked: true,
+        ariaReadonly: true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaHidden , ariaChecked, ariaReadonly is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the accessMode when isReadOnly ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      isReadOnly: true,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the accessMode when disabled ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      disabled: true,
+      text: "RadioText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('eleRef prop is a function', () => {
+    // Create a mock function
+    const mockEleRef = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      eleRef: mockEleRef
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with different onClick props', () => {
+    const onClickFunction = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Radio, {
+      value: "radioValue",
+      onChange: onClickFunction
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});