@zohodesk/components 1.2.32 → 1.2.34

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -367,12 +367,16 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       needEffect,
       disabledOptions,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customClass
     } = this.props;
     let {
       SuggestionsProps = {},
       DropBoxProps = {}
     } = customProps;
+    let {
+      containerClass = ''
+    } = customClass;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -407,7 +411,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
       "data-id": dataIdMultiSelectComp,
       "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,

package/es/MultiSelect/props/defaultProps.js

@@ -66,7 +66,8 @@ export const AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'advancedMultiSelect'
+  dataSelectorId: 'advancedMultiSelect',
+  customClass: {}
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',

package/es/MultiSelect/props/propTypes.js

@@ -308,5 +308,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
     DropBoxProps: PropTypes.object
   }),
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customClass: PropTypes.object
 };

package/es/Radio/__tests__/Radio.spec.js

@@ -41,7 +41,7 @@ describe('Radio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Checked is true', () => {
+  test.each(palette)('rendering the Checked is true for palette - %s', palette => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Radio, {
@@ -51,7 +51,7 @@ describe('Radio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the disabled is true', () => {
+  test.each(palette)('rendering the disabled is true for palette - %s', palette => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Radio, {
@@ -218,15 +218,12 @@ describe('Radio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('eleRef prop is a function', () => {
-    // Create a mock function
+  test('getRef prop is a function', () => {
     const mockEleRef = jest.fn();
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Radio, {
-      eleRef: mockEleRef
+    render( /*#__PURE__*/React.createElement(Radio, {
+      getRef: mockEleRef
     }));
-    expect(asFragment()).toMatchSnapshot();
+    expect(mockEleRef).toHaveBeenCalled();
   });
   test('renders with different onClick props', () => {
     const onClickFunction = jest.fn();

package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1,48 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Radio eleRef prop is a function 1`] = `
-<DocumentFragment>
-  <div
-    aria-checked="false"
-    aria-readonly="false"
-    class="container  pointer hoverEfffect   inflex rowdir both"
-    data-id="RadioComp"
-    data-selector-id="container"
-    data-test-id="RadioComp"
-    role="radio"
-    tabindex="0"
-  >
-    <div
-      class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <input
-        type="hidden"
-        value=""
-      />
-      <label
-        class="radioLabel pointer"
-      >
-        <svg
-          viewBox="0 0 40 40"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            class="rdBox"
-            cx="20"
-            cy="20"
-            r="19"
-          />
-        </svg>
-      </label>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Radio rendering ally ariaChecked true 1`] = `
 <DocumentFragment>
   <div
@@ -907,7 +864,68 @@ exports[`Radio rendering size - small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the Checked is true 1`] = `
+exports[`Radio rendering the Checked is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="false"
+    class="container active pointer hoverEfffect   flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="0"
+  >
+    <div
+      class="radio  
+            hoverdanger medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel pointer"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel pointer  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the Checked is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -921,7 +939,7 @@ exports[`Radio rendering the Checked is true 1`] = `
   >
     <div
       class="radio  
-            undefined medium filled undefined  shrinkOff"
+            hoverprimary medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -955,7 +973,7 @@ exports[`Radio rendering the Checked is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined pointer  "
+              primaryLabel pointer  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"
@@ -1459,7 +1477,68 @@ exports[`Radio rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the disabled is true 1`] = `
+exports[`Radio rendering the disabled is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="true"
+    class="container  disabled    flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="-1"
+  >
+    <div
+      class="radio  
+             medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel disabled"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel disabled  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the disabled is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -1473,7 +1552,7 @@ exports[`Radio rendering the disabled is true 1`] = `
   >
     <div
       class="radio  
-             medium filled undefined  shrinkOff"
+             medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1507,7 +1586,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined disabled  "
+              primaryLabel disabled  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"

package/es/RippleEffect/__tests__/RippleEffect.spec.js

@@ -33,7 +33,7 @@ describe('RippleEffect', () => {
     }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
     expect(asFragment()).toMatchSnapshot();
   });
-  const hoverTypes = ['default', 'border', 'bg', 'test'];
+  const hoverTypes = ['default', 'border', 'bg'];
   test.each(hoverTypes)('rendering hoverType of- %s', hoverType => {
     const {
       asFragment

package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap

@@ -30,16 +30,6 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RippleEffect rendering hoverType of- test 1`] = `
-<DocumentFragment>
-  <div
-    class=" effect default border   hoverEffect "
-  >
-    RippleEffect
-  </div>
-</DocumentFragment>
-`;
-
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div

package/es/Select/GroupSelect.js

@@ -20,7 +20,7 @@ import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './Select.module.css';
 /**** Methods ****/
 
-import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
+import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId, extractOptionIdFromJson } from '../utils/dropDownUtils';
 import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd, getKeyValue } from '../utils/Common';
 /* eslint-disable react/no-unused-prop-types */
 
@@ -357,7 +357,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       id: selected,
       groupId
-    } = extractOptionId(id);
+    } = extractOptionId(id) || extractOptionIdFromJson(id, normalizedAllOptions);
 
     if (!getIsEmptyValue(id) && !isReadOnly) {
       onChange && onChange({

package/es/Tag/__tests__/Tag.spec.js

@@ -0,0 +1,235 @@
+import React from 'react';
+import Tag from '../Tag';
+import { render } from "@testing-library/react";
+describe('Tag component', () => {
+  const size = ['small', 'medium'];
+  const palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];
+  const closePalette = ['danger', 'primary'];
+  test('Should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render imageURL and hasAvatar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      imageURL: "https://www.w3schools.com/images/w3schools_green.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      text: "TagTest"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render initial', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      initial: "avatarIntial"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render onRemove - %s', size => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      active: true,
+      size: size,
+      onRemove: mockOnRemove
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render active - %s', palette => {
+    size.map(sz => {
+      closePalette.map(cp => {
+        const mockOnRemove = jest.fn();
+        const {
+          asFragment
+        } = render( /*#__PURE__*/React.createElement(Tag, {
+          active: true,
+          size: sz,
+          palette: palette,
+          onRemove: mockOnRemove,
+          closePalette: cp
+        }));
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
+  });
+  test('Should be render rounded is false', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      rounded: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render palette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      active: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      disabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      disabled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(closePalette)('Should render closePalette - %s', closePalette => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      active: true,
+      closePalette: closePalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render onSelectTag', () => {
+    const mockonSelectTag = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onSelectTag: mockonSelectTag
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render closeTitle', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      closeTitle: "TagCloseTitle"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if false', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if true', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      active: true,
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconName and iconSize', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      iconName: "ZD-androidd",
+      iconSize: "15"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render tooltip', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      tooltip: "Tagtooltip"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render avatarPalette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      palette: palette,
+      avatarPalette: "primary"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom class', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      iconName: "ZD-androidd",
+      hasAvatar: true,
+      customClass: {
+        customTag: 'customCustomTag',
+        customTagClose: 'customCustomTagClose',
+        customTagIcon: 'customCustomTagIcon',
+        customAvatar: 'customCustomAvatar'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally clearLabel', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      a11y: {
+        clearLabel: 'TagClearLabel'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});