@zohodesk/dot 1.7.0 → 1.7.2

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

@@ -0,0 +1,478 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DotProvider Snapshot rendering the additional ...rest props 1`] = `
+<DocumentFragment>
+  <div
+    class="testClass"
+    data-id="test-id"
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1em 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1em;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1px 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1rem 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1rem;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.5 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.5px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.8 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.8px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1.2 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1.2px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the default attributes, styles and modified the tag props 1`] = `
+<DocumentFragment>
+  <span
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the default attributes, styles and modifying the tag prop to React.Fragment 1`] = `
+<html
+  data-mode="light"
+  data-theme="blue"
+  style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+>
+  <head />
+  <body>
+    <div>
+      This is a DotProvider component
+    </div>
+  </body>
+</html>
+`;
+
+exports[`DotProvider Snapshot rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the fontUnitVariable prop along with baseFontUnit props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --gc_baseFontUnit: 14px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the providerRef props 1`] = `
+<DocumentFragment>
+  <div>
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the wrong themeAppearance and themeColor 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="ligt"
+    data-theme="gren"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the zoomUnitVariable prop along with baseZoomUnit props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--gc_baseUnit: 1.1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;

package/es/Drawer/Drawer.js

@@ -149,7 +149,8 @@ export default class Drawer extends React.Component {
       onClose,
       needFocusScope,
       customProps,
-      a11y
+      a11y,
+      customDrawerClass
     } = this.props;
     const {
       focusScopeProps = {}
@@ -174,7 +175,7 @@ export default class Drawer extends React.Component {
       return child;
     });
     let content = /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]} ${customDrawerClass}`,
       "data-a11y-need-focus-style": "false",
       tabindex: -1,
       eleRef: this.createRef,
@@ -281,8 +282,4 @@ export default class Drawer extends React.Component {
 
 }
 Drawer.propTypes = Drawer_propTypes;
-Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
-//   Drawer.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+Drawer.defaultProps = Drawer_defaultProps;

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

@@ -12,7 +12,7 @@ exports[`Drawer rendering the isActive true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="container columns drawerModal small shrinkOff"
+      class="container columns drawerModal small  shrinkOff"
       data-a11y-need-focus-style="false"
       data-id="boxComponent"
       data-selector-id="box"

package/es/Drawer/props/defaultProps.js

@@ -15,6 +15,7 @@ export const Drawer_defaultProps = {
   subDrawerActive: false,
   subDrawerClass: '',
   customClass: '',
+  customDrawerClass: '',
   needAutoZindex: true,
   onBodyClick: () => {},
   needFocusScope: false,

package/es/Drawer/props/propTypes.js

@@ -32,6 +32,7 @@ export const Footer_propTypes = {
 export const Drawer_propTypes = {
   children: PropTypes.node,
   customClass: PropTypes.string,
+  customDrawerClass: PropTypes.string,
   forwardRef: PropTypes.object,
   isActive: PropTypes.bool,
   needAutoZindex: PropTypes.bool,

package/es/lookup/header/Search/LookupSearch.module.css

@@ -1,20 +1,25 @@
-.searchStyle,
-.boxStyle {
+.wrapper {
   transition: var(--zd_transition1);
-  width: var(--zd_size96) ;
+  width: var(--zd_size160) ;
   height: var(--zd_size28) ;
   position: relative;
-}.searchStyle, .boxStyle {
-  background: none;
 }
-.boxStyle {
-  width: var(--zd_size160) ;
+.boxType {
+  border: 1px solid transparent;
   border-radius: 4px;
-  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.searchStyle:hover, .boxStyle:hover {
+.borderType {
+  border-bottom: 1px solid transparent;
+}
+.boxType, .borderType {
+  border-color: var(--zdt_lookupsearch_boxstyle_border);
+}
+.boxType:hover, .borderType:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
+.boxType.active, .borderType.active {
+  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
+}
 .focusWidth {
   width: var(--zd_size220) ;
 }
@@ -23,35 +28,36 @@
   height: var(--zd_size28) ;
   cursor: pointer;
 }
-.drpSearchBox::after {
-  content: '';
-  position: absolute;
-  top: var(--zd_size8) ;
-  bottom: var(--zd_size8) ;
+[dir=ltr] .drpSearchBox {
+  padding-left: var(--zd_size12) ;
 }
-[dir=ltr] .drpSearchBox::after {
-  right: calc( var(--zd_size1) * -1 ) ;
-  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
+[dir=rtl] .drpSearchBox {
+  padding-right: var(--zd_size12) ;
 }
-[dir=rtl] .drpSearchBox::after {
-  left: calc( var(--zd_size1) * -1 ) ;
-  border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
+[dir=ltr] .searchIcon {
+  padding-right: var(--zd_size8) ;
 }
-.inputBox, .drpSearchBox {
-  padding: 0 var(--zd_size9) ;
+[dir=rtl] .searchIcon {
+  padding-left: var(--zd_size8) ;
 }
 [dir=ltr] .searchIconBox {
-  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9) ;
+  padding-left: var(--zd_size12) ;
 }
 [dir=rtl] .searchIconBox {
-  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0 ;
+  padding-right: var(--zd_size12) ;
 }
 .active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
 [dir=ltr] .iconArrow {
-  margin-left: var(--zd_size5) ;
+  margin-left: var(--zd_size6) ;
 }
 [dir=rtl] .iconArrow {
-  margin-right: var(--zd_size5) ;
-}
+  margin-right: var(--zd_size6) ;
+}
+.separator {
+  width: var(--zd_size1) ;
+  height: var(--zd_size16) ;
+  margin: 0 var(--zd_size12) ;
+  background-color: var(--zdt_lookupsearch_boxstyle_border);
+}