@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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

@@ -618,10 +618,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  data-id="hourField_textBox"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
+                  data-test-id="hourField_textBox"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -695,9 +695,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -718,10 +715,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  data-id="minuteField_textBox"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
+                  data-test-id="minuteField_textBox"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -795,9 +792,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>
@@ -818,10 +812,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="container effect  input  flex rowdir"
-                  data-id="containerComponent"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  data-id="ampmField_textBox"
                   data-selector-id="textBoxIcon"
-                  data-test-id="containerComponent"
+                  data-test-id="ampmField_textBox"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -895,9 +889,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="line borderColor_default "
-                  />
                 </div>
               </div>
             </div>

package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,10 +11,10 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="container effect  placeHolder  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+        data-id="dateWidget"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="dateWidget"
       >
         <div
           class="grow basis shrinkOff"
@@ -69,9 +69,6 @@ exports[`DateWidget rendering the defult props 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,10 +27,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            data-id="hourField_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="hourField_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -102,9 +102,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -125,10 +122,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            data-id="minuteField_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="minuteField_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -200,9 +197,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>
@@ -223,10 +217,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            data-id="ampmField_textBox"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
+            data-test-id="ampmField_textBox"
           >
             <div
               class="grow basis shrinkOff"
@@ -298,9 +292,6 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+    /*css:theme-validation:ignore*/
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -207,6 +212,7 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    /*css:theme-validation:ignore*/
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -419,6 +425,7 @@
 .closeBar {
     /*  Variable:Ignore  */
     height: 6px;
+    /*css:theme-validation:ignore*/
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/es/InputFieldLine/InputFieldLine.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
+import { Container } from "../../es/Layout";
+import style from "./InputFieldLine.module.css";
+
+function InputFieldLine(props) {
+  const {
+    isDisabled,
+    isReadOnly,
+    hasPadding,
+    hasEffect,
+    title,
+    isActive,
+    size,
+    border,
+    borderColor,
+    dataId,
+    onClick,
+    customProps,
+    customClass,
+    children
+  } = props;
+  const borderClass = style[`border_${border}`] || '';
+  const borderColorClass = style[`borderColor_${borderColor}`] || '';
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    ...customProps,
+    "data-title": title,
+    isCover: false,
+    dataId: dataId,
+    onClick: onClick,
+    className: `${style.varClass} ${style.customContainer} ${hasPadding ? style[size] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
+  }, children);
+}
+
+InputFieldLine.propTypes = propTypes;
+InputFieldLine.defaultProps = defaultProps;
+export default InputFieldLine;

package/es/InputFieldLine/InputFieldLine.module.css

@@ -0,0 +1,90 @@
+.varClass {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+    --local_inputFieldLine_border_width: 1px;
+    --local_padding: var(--zd_size0);
+    --local_cursor: pointer;
+}
+
+.customContainer {
+    composes: oflowy from '../common/common.module.css';
+    cursor: var(--local_cursor);
+    border-color: var(--local_inputFieldLine_border_color);
+}
+
+.disabled,.readonly {
+    --local_cursor: not-allowed;
+}
+
+.pointer{
+    composes: pointer from '../common/common.module.css';
+}
+
+.borderColor_default {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+}
+
+.borderColor_transparent {
+    --local_inputFieldLine_border_color: var(--dot_mirror);
+}
+
+.borderColor_dark {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_border);
+}
+
+.borderColor_error,
+.effect.borderColor_error:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_error_border);
+}
+
+.effect.borderColor_transparent:hover,
+.effect.borderColor_default:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_hover_border);
+}
+
+.active.borderColor_dark,
+.active.borderColor_dark:hover,
+.effect.borderColor_dark:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_active_border);
+}
+
+.active.borderColor_error,
+.active.borderColor_error:hover,
+.active.borderColor_default,
+.active.borderColor_default:hover,
+.active.borderColor_transparent,
+.active.borderColor_transparent:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_focus_border);
+}
+
+.hasBorder {
+    transition: border var(--zd_transition2) linear 0s;
+    border-style: solid;
+}
+
+.xmedium {
+    min-height: var(--zd_size30) ;
+    --local_padding: var(--zd_size3);
+}
+
+.small {
+    max-height: var(--zd_size200) ;
+}
+
+.medium {
+    max-height: var(--zd_size350) ;
+    --local_padding: var(--zd_size8);
+}
+
+.large {
+    max-height: var(--zd_size400) ;
+}
+
+.border_bottom {
+    border-width:  0 0 var(--local_inputFieldLine_border_width) 0;
+    padding-bottom: var(--local_padding);
+}
+
+.border_all {
+    border-width: var(--local_inputFieldLine_border_width);
+    padding: var(--local_padding);
+}

package/es/InputFieldLine/__tests__/InputFieldLine.spec.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import InputFieldLine from "../InputFieldLine";
+describe('InputFieldLine', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      title: "InputFieldLine Test Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasPadding is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasPadding: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasEffect is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasEffect: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['medium', 'xmedium'];
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasPadding: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const border = ['bottom', 'all', 'none'];
+  test.each(border)('Should render border - %s', border => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      border: border
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const borderColor = ['default', 'dark', 'error', 'transparent'];
+  test.each(borderColor)('Should render borderColor - %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      borderColor: borderColor
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customProps', () => {
+    const customProps = {
+      'data-test': 'inputFieldLine-test'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      customClass: "inputFieldLine-custom-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      dataId: "inputFieldLine-test-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputFieldLine Should be render hasEffect is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render hasPadding is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render with title 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title="InputFieldLine Test Title"
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - all 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_all effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - bottom 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - none 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   effect     flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - dark 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - default 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - error 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - transparent 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-test="inputFieldLine-test"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-id="inputFieldLine-test-id"
+    data-selector-id="container"
+    data-test-id="inputFieldLine-test-id"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - medium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer xmedium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;

package/es/InputFieldLine/props/defaultProps.js

@@ -0,0 +1,14 @@
+export default {
+  isDisabled: false,
+  isReadOnly: false,
+  hasEffect: true,
+  isActive: false,
+  hasPadding: false,
+  title: '',
+  dataId: '',
+  customClass: '',
+  customProps: {},
+  size: 'medium',
+  borderColor: 'default',
+  border: 'bottom'
+};

package/es/InputFieldLine/props/propTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import { ContainerProps } from "../../Layout/props/propTypes";
+export default {
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  hasEffect: PropTypes.bool,
+  hasPadding: PropTypes.bool,
+  title: PropTypes.string,
+  dataId: PropTypes.string,
+  customClass: PropTypes.string,
+  customProps: PropTypes.shape({ ...ContainerProps
+  }),
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  border: PropTypes.oneOf(['bottom', 'all', 'none']),
+  borderColor: PropTypes.oneOf(['default', 'dark', 'error', 'transparent']),
+  children: PropTypes.node
+};

package/es/ListItem/ListItem.js

@@ -71,7 +71,8 @@ export default class ListItem extends React.Component {
       customClass,
       customProps,
       needMultiLineText,
-      secondaryValue
+      secondaryValue,
+      renderBeforeChildren
     } = this.props;
     let {
       ListItemProps = {},
@@ -119,7 +120,11 @@ export default class ListItem extends React.Component {
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.titleBox
-    }, value ? /*#__PURE__*/React.createElement(Box, {
+    }, renderBeforeChildren ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
+      className: style.beforeChild
+    }, renderBeforeChildren) : null, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value