npm - @zohodesk/components - Versions diffs - 1.0.0-temp-199 → 1.0.0-temp-200 - Mend

@zohodesk/components 1.0.0-temp-199 → 1.0.0-temp-200

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/es/Modal/__tests__/Modal.spec.js ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Modal from '../Modal';
+describe('Modal', () => {
+  test('rendering the defult props', () => {
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      "data-portal": "testPortal"
+    }), /*#__PURE__*/React.createElement(Modal, {
+      portalId: "testPortal"
+    }, /*#__PURE__*/React.createElement("div", null, "Modal Div Check")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", null, "Modal outer div check")))));
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/es/Modal/__tests__/__snapshots__/Modal.spec.js.snap ADDED Viewed

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Modal rendering the defult props 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        data-portal="testPortal"
+      >
+        <div>
+          Modal Div Check
+        </div>
+      </div>
+      <div />
+    </div>
+  </div>
+  <div
+    class="container"
+    data-portal="CPortal1"
+  >
+    <div>
+      Modal outer div check
+    </div>
+  </div>
+</body>
+`;

package/es/MultiSelect/AdvancedGroupMultiSelect.js CHANGED Viewed

@@ -870,12 +870,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       a11y,
       palette,
       needEffect,
-      autoComplete,
-      customProps
+      autoComplete
     } = this.props;
-    const {
-      suggestionsProps
-    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -928,7 +924,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
-      isGroupSelect: true
+      isGroupSelect: true,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -1002,7 +999,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           role: 'listbox',
           ariaMultiselectable: true
         },
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
@@ -1047,7 +1045,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js CHANGED Viewed

@@ -429,7 +429,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isReadOnly: isReadOnly,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption
+      onSelect: this.handleClickSelectedOption,
+      dataId: `${dataIdMultiSelectComp}_selectedOptions`
     }), moreCount > 0 ? /*#__PURE__*/React.createElement(Box, {
       className: style.more,
       onClick: this.handleMoreClick,
@@ -438,7 +439,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       flexible: true,
       className: style.wrapper,
       adjust: true,
-      shrink: true
+      shrink: true,
+      dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
               `
@@ -505,6 +507,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         },
+        dataId: `${dataIdMultiSelectComp}_dropbox`,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
@@ -537,8 +540,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'option'
         },
-        ...SuggestionsProps,
-        needMultiLineText: true
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/MultiSelect/MobileHeader/__tests__/MobileHeader.spec.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MobileHeader from '../MobileHeader';
+describe('MobileHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MobileHeader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap ADDED Viewed

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`MobileHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="header flex rowdir alignBetween vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="cardHeading grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button
+          class="buttonText bold plainprimary medium"
+          data-id="buttonComp"
+          data-selector-id="button"
+          data-test-id="buttonComp"
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -900,7 +900,8 @@ export class MultiSelectComponent extends React.Component {
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
       size: size,
-      palette: palette
+      palette: palette,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -990,12 +991,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll,
-      customProps
+      needSelectAll
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1042,7 +1039,8 @@ export class MultiSelectComponent extends React.Component {
       },
       size: boxSize,
       alignBox: "row",
-      isResponsivePadding: getFooter ? false : true
+      isResponsivePadding: getFooter ? false : true,
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {
@@ -1080,8 +1078,7 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      },
-      ...suggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/MultiSelectWithAvatar.js CHANGED Viewed

@@ -131,7 +131,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'listbox'
       },
       isResponsivePadding: true,
-      alignBox: "row"
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/MultiSelect/SelectedOptions.js CHANGED Viewed

@@ -21,7 +21,8 @@ export default class SelectedOptions extends React.PureComponent {
       onRemove,
       onSelect,
       size,
-      palette
+      palette,
+      dataId
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -32,7 +33,8 @@ export default class SelectedOptions extends React.PureComponent {
         icon,
         optionType,
         iconSize,
-        isDisabled
+        isDisabled,
+        dataId
       } = option;
       const commonProps = {
         disabled: isDisabled,
@@ -49,7 +51,8 @@ export default class SelectedOptions extends React.PureComponent {
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}photoTag`
+          key: `${id}photoTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
@@ -58,7 +61,8 @@ export default class SelectedOptions extends React.PureComponent {
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}iconTag`
+          key: `${id}iconTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
@@ -68,7 +72,8 @@ export default class SelectedOptions extends React.PureComponent {
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
-        key: `${id}tag`
+        key: `${id}tag`,
+        dataId: dataId
       }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
       }));

package/es/MultiSelect/SelectedOptions.module.css CHANGED Viewed

@@ -1,15 +1,15 @@
-.tag {
-  max-width: 100% ;
-}
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
-}
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
-}
+.tag {
+  max-width: 100% ;
+}
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+}
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}

package/es/MultiSelect/Suggestions.js CHANGED Viewed

@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y,
-      needMultiLineText
+      a11y
     } = this.props;
     const {
       ariaParentRole,
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       }
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y,
-        needMultiLineText: needMultiLineText
+        a11y: list_a11y
       });
     })));
   }

package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
+describe('AdvancedGroupMultiSelect', () => {
+  test('rendering the defult props', () => {
+    const mockOnChange = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AdvancedMultiSelect from '../AdvancedMultiSelect';
+describe('AdvancedMultiSelect', () => {
+  test('rendering the defult props', () => {
+    const mockOnChange = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/EmptyState.spec.js ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import EmptyState from '../EmptyState';
+describe('EmptyState', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: [],
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/MultiSelect.spec.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MultiSelect from '../MultiSelect';
+describe('MultiSelect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MultiSelectHeader from '../MultiSelectHeader';
+describe('MultiSelectHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      suggestions: [Option]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      suggestions: [1, 2, 3]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MultiSelectWithAvatar from '../MultiSelectWithAvatar';
+describe('MultiSelectWithAvatar', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelectWithAvatar, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/SelectedOptions.spec.js ADDED Viewed

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SelectedOptions from '../SelectedOptions';
+describe('SelectedOptions', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      selectedOptions: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic select options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1'
+      }, {
+        value: 'SelectedObject2'
+      }, {
+        value: 'SelectedObject3'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/Suggestions.spec.js ADDED Viewed

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Suggestions from '../Suggestions';
+describe('Suggestions', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap ADDED Viewed

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper  effect"
+    data-id="multiSelect"
+    data-selector-id="advancedGroupMultiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default  flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap ADDED Viewed

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`AdvancedMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap ADDED Viewed

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`EmptyState rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" default"
+    data-id="empty_noOptnsMsg"
+    data-test-id="empty_noOptnsMsg"
+    role="alert"
+  />
+</DocumentFragment>
+`;