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

package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="box"
+    data-test-id="boxComponent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ListItem/ListItem.js

@@ -100,7 +100,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -122,7 +122,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -17,9 +17,8 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
-
 .list {
   composes: varClass;
   position: relative;
@@ -35,84 +34,62 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
-
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-
 [dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-
 [dir=rtl] .withBorder {
-  --listitem_border_width: 0 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
-
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
 [dir=ltr] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
-
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
-
 .medium {
   --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
-
 .large {
   --listitem_height: var(--zd_size48);
 }
-
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
-
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-
-.value {
+.value, .multiLineValue {
   line-height: 1.5385;
 }
-
-.multiLineValue {
-  line-height: 1.5385;
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 2;
-  composes: clamp from '../common/common.module.css';
+  composes: clamp from '../common/common.module.css'
 }
-
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
 }
-
 [dir=ltr] .iconBox {
   margin-right: var(--zd_size10) ;
 }
-
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
-
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
 }
-
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
@@ -120,78 +97,61 @@
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
-
 .activewithBorder {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
 [dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-
 [dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
 
 .defaultHover,
 .defaultEffect:hover
-
 /* .defaultEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
-
 .primaryHover,
 .primaryEffect:hover
-
 /* .primaryEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .secondaryHover,
 .secondaryEffect:hover
-
 /* .secondaryEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .darkHover,
 .darkEffect:hover
-
 /* .darkEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
-
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
-
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -210,63 +170,36 @@
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
-
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
-
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-
-.defaultTick>i {
+.defaultTick > i {
   display: block;
 }
-
 [dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
-
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
-
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
-
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
-
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
-
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
-
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-
-.autoHeight {
-  height: auto ;
-}
-
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}
-
-.txtAlignBaseLine {
-  align-items: baseline;
-}
-
-.alignSelfTop {
-  align-self: start;
-}

package/es/ListItem/ListItemWithAvatar.js

@@ -105,7 +105,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -116,7 +116,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: `${needMultiLineText ? style.alignSelfTop : ''} ${style.leftAvatar}`
+      className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -143,7 +143,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithCheckBox.js

@@ -93,7 +93,8 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox
+      className: style.iconBox,
+      dataId: dataId ? `${dataId}_checkBox` : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {

package/es/ListItem/ListItemWithIcon.js

@@ -95,7 +95,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${customClass}`,
+      customClass: customClass,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -125,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithRadio.js

@@ -104,7 +104,8 @@ export default class ListItemWithRadio extends React.Component {
       customClass: {
         customRadio: customRadio,
         customRadioWrap: customRadioWrap
-      }
+      },
+      dataId: `${dataId}_radio`
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/ListItem/__tests__/ListContainer.spec.js

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

package/es/ListItem/__tests__/ListItem.spec.js

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

package/es/ListItem/__tests__/ListItemWithAvatar.spec.js

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

package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js

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

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

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

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

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

package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListContainer rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItem rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItem"
+    data-selector-id="listItem"
+    data-test-id="listItem"
+    role="option"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItemWithAvatar rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="value grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItemWithCheckBox rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithCheckBox"
+    data-selector-id="listItemWithCheckBox"
+    data-test-id="List_ListItemWithCheckBox"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox shrinkOff"
+      data-selector-id="box"
+    >
+      <div
+        aria-checked="false"
+        aria-hidden="true"
+        class="container pointer primary 
+          inflex rowdir vCenter"
+        data-id="checkBox"
+        data-selector-id="container"
+        data-test-id="checkBox"
+        role="checkbox"
+        tabindex="-1"
+      >
+        <div
+          class="boxContainer medium  filled shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            type="hidden"
+          />
+          <label
+            class="checkbox pointer medium "
+          >
+            <svg
+              viewBox="0 0 40 40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                class="cbBox"
+                height="38"
+                rx="4"
+                width="38"
+                x="1"
+                xmlns="http://www.w3.org/2000/svg"
+                y="1"
+              />
+            </svg>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="value grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItemWithIcon rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="value grow basis shrinkOn"
+      data-id="list_Text"
+      data-selector-id="box"
+      data-test-id="list_Text"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItemWithRadio rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-checked="false"
+        aria-hidden="true"
+        aria-readonly="false"
+        class="container  pointer hoverEfffect   inflex rowdir both"
+        data-id="RadioComp"
+        data-selector-id="container"
+        data-test-id="RadioComp"
+        role="radio"
+        tabindex="-1"
+      >
+        <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>
+    </div>
+    <div
+      class="value grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;