@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/Button/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { compileClassNames } from './../../utils';
+import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/Button/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   status: 'none',
   text: 'Button',
   customClass: {},
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };

package/es/Button/props/propTypes.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   children: PropTypes.node,
-  className: PropTypes.string,
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,
   disabled: PropTypes.bool,
@@ -21,6 +20,8 @@ export const propTypes = {
     customStatusSize: PropTypes.string
   }),
   customStyle: PropTypes.object,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  id: PropTypes.string,
+  a11y: PropTypes.object
 };
 export default propTypes;

package/es/Buttongroup/Buttongroup.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import style from './Buttongroup.module.css';
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 
 export default class Buttongroup extends React.Component {

package/es/Buttongroup/Buttongroup.module.css

@@ -1,106 +1,105 @@
-.varClass {
-  /* button group default variables */
-  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
-  --buttongroup_box_shadow: none;
-  --buttongroup_padding: 0;
-  --buttongroup_border_width: 0;
-  --buttongroup_border_style: solid;
-  --buttongroup_border_color: var(--zdt_buttongroup_default_border);
-}
-
-.buttonGroup {
-  composes: varClass;
-  composes: cboth from '../common/common.module.css';
-  background-color: var(--buttongroup_bg_color);
-  box-shadow: var(--buttongroup_box_shadow);
-  padding: var(--buttongroup_padding);
-  border-width: var(--buttongroup_border_width);
-  border-style: var(--buttongroup_border_style);
-  border-color: var(--buttongroup_border_color);
-}
-
-.footer {
-  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
-}
-
-[dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60
-)    ;
-}
-
-[dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
-}
-
-.header {
-  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
-  --buttongroup_border_width: 0 0 1px 0;
-}
-
-[dir=ltr] .tab>div button:first-child {
-  border-radius: 5px 0 0 5px;
-}
-
-[dir=rtl] .tab>div button:first-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=ltr] .tab>div button:last-child {
-  border-radius: 0 5px 5px 0;
-}
-
-[dir=rtl] .tab>div button:last-child {
-  border-radius: 5px 0 0 5px;
-}
-
-.alignleft {
-  composes: fleft from '../common/common.module.css';
-}
-
-.alignright {
-  composes: fright from '../common/common.module.css';
-}
-
-.aligncenter {
-  composes: tcenter from '../common/common.module.css';
-}
-
-[dir=ltr] .alignleft>button:first-child {
-  margin-left: 0 ;
-}
-
-[dir=rtl] .alignleft>button:first-child {
-  margin-right: 0 ;
-}
-
-[dir=ltr] .alignleft>button {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .alignleft>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=ltr] .alignright>button:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .alignright>button:last-child {
-  margin-left: 0 ;
-}
-
-[dir=ltr] .alignright>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .alignright>button {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=ltr] .aligncenter>button {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .aligncenter>button {
-  margin-left: var(--zd_size15) ;
+.varClass {
+  /* button group default variables */
+  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
+  --buttongroup_box_shadow: none;
+  --buttongroup_padding: 0;
+  --buttongroup_border_width: 0;
+  --buttongroup_border_style: solid;
+  --buttongroup_border_color: var(--zdt_buttongroup_default_border);
+}
+
+.buttonGroup {
+  composes: varClass;
+  composes: cboth from '../common/common.module.css';
+  background-color: var(--buttongroup_bg_color);
+  box-shadow: var(--buttongroup_box_shadow);
+  padding: var(--buttongroup_padding);
+  border-width: var(--buttongroup_border_width);
+  border-style: var(--buttongroup_border_style);
+  border-color: var(--buttongroup_border_color);
+}
+
+.footer {
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
+}
+
+[dir=ltr] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
+[dir=rtl] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
+.header {
+  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_border_width: 0 0 1px 0;
+}
+
+[dir=ltr] .tab>div button:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+[dir=rtl] .tab>div button:first-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=ltr] .tab>div button:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=rtl] .tab>div button:last-child {
+  border-radius: 5px 0 0 5px;
+}
+
+.alignleft {
+  composes: fleft from '../common/common.module.css';
+}
+
+.alignright {
+  composes: fright from '../common/common.module.css';
+}
+
+.aligncenter {
+  composes: tcenter from '../common/common.module.css';
+}
+
+[dir=ltr] .alignleft>button:first-child {
+  margin-left: 0 ;
+}
+
+[dir=rtl] .alignleft>button:first-child {
+  margin-right: 0 ;
+}
+
+[dir=ltr] .alignleft>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignleft>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=ltr] .alignright>button:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .alignright>button:last-child {
+  margin-left: 0 ;
+}
+
+[dir=ltr] .alignright>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignright>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=ltr] .aligncenter>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .aligncenter>button {
+  margin-left: var(--zd_size15) ;
 }

package/es/Buttongroup/__tests__/Buttongroup.spec.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Buttongroup from '../Buttongroup.js';
+import { render } from "@testing-library/react";
+describe('Buttongrop - ', () => {
+  test('rendering the default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Buttongroup, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const buttonPosition = ['left', 'right', 'center'];
+  test.each(buttonPosition)('rendering the "buttonPosition" to  - %s', buttonPosition => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Buttongroup, {
+      buttonPosition: buttonPosition
+    }, /*#__PURE__*/React.createElement("span", null, "Element 1"), /*#__PURE__*/React.createElement("span", null, "Element 2"), /*#__PURE__*/React.createElement("span", null, "Element 3")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Checking the "customclass"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Buttongroup, {
+      customClass: "customClassButtonGroup"
+    }, /*#__PURE__*/React.createElement("span", null, "Element 1"), /*#__PURE__*/React.createElement("span", null, "Element 2"), /*#__PURE__*/React.createElement("span", null, "Element 3")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const type = ['footer', 'header', 'tab'];
+  test.each(type)('rendering the "type"   - %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Buttongroup, {
+      type: type
+    }, /*#__PURE__*/React.createElement("span", null, "Element 1"), /*#__PURE__*/React.createElement("span", null, "Element 2"), /*#__PURE__*/React.createElement("span", null, "Element 3")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttongrop -  Checking the "customclass" 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined customClassButtonGroup"
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="aligncenter"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignright"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup footer "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "type"   - header 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup header "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup tab "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    />
+  </div>
+</DocumentFragment>
+`;

package/es/Card/Card.js

@@ -6,10 +6,10 @@ import { getLibraryConfig } from '../Provider/Config';
 import style from './Card.module.css';
 /* eslint-disable react/forbid-component-props */
 
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
 */
 
 /* performance handling pending in card component moving to ref instead of setState */

package/es/Card/Card.module.css

@@ -1,20 +1,20 @@
-.notScroll {
-  position: relative;
-}
-.scroll {
-  /* background: var(--dot_white);
-  position: relative; */
-}
-/*
-.scroll::after {
-  box-shadow: 0 0 6px var(--zd_dark10);
-  border-radius: 100px / 10px;
-  content: '';
-  left: var(--zd_size50);
-  position: absolute;
-  right: var(--zd_size50);
-  display: block;
-  z-index: -1;
-  height: var(--zd_size1);
-  bottom: 0;
-} */
+.notScroll {
+  position: relative;
+}
+.scroll {
+  /* background: var(--dot_white);
+  position: relative; */
+}
+/*
+.scroll::after {
+  box-shadow: 0 0 6px var(--zd_dark10);
+  border-radius: 100px / 10px;
+  content: '';
+  left: var(--zd_size50);
+  position: absolute;
+  right: var(--zd_size50);
+  display: block;
+  z-index: -1;
+  height: var(--zd_size1);
+  bottom: 0;
+} */

package/es/Card/props/propTypes.js

@@ -3,7 +3,8 @@ export const CardHeader_propTypes = {
   children: PropTypes.element,
   dataId: PropTypes.string,
   isScroll: PropTypes.bool,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };
 export const CardContent_propTypes = {
   children: PropTypes.node,
@@ -14,7 +15,8 @@ export const CardContent_propTypes = {
   scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: PropTypes.bool,
   customClass: PropTypes.string,
-  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
+  dataSelectorId: PropTypes.string
 };
 export const Card_propTypes = {
   childTypes: PropTypes.object,
@@ -35,9 +37,12 @@ export const Card_propTypes = {
   a11y: PropTypes.shape({
     role: PropTypes.string
   }),
-  isPercentageScroll: PropTypes.bool
+  isPercentageScroll: PropTypes.bool,
+  eleRef: PropTypes.func
 };
 export const CardFooter_propTypes = {
   children: PropTypes.node,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/CheckBox/CheckBox.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { propTypes } from './props/propTypes';
 import { defaultProps } from './props/defaultProps';
@@ -11,6 +9,7 @@ export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.handleGetContainerRef = this.handleGetContainerRef.bind(this);
   }
 
   onChange(e) {
@@ -21,6 +20,14 @@ export default class CheckBox extends React.Component {
     onChange && onChange(!checked, e);
   }
 
+  handleGetContainerRef(ele) {
+    let {
+      getContainerRef,
+      id
+    } = this.props;
+    getContainerRef && getContainerRef(ele, id);
+  }
+
   render() {
     let {
       id,
@@ -66,7 +73,7 @@ export default class CheckBox extends React.Component {
       role = 'checkbox',
       ariaChecked = checked
     } = a11y;
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
@@ -78,12 +85,14 @@ export default class CheckBox extends React.Component {
       onClick: isReadOnly || disabled ? null : this.onChange,
       tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
       "aria-checked": ariaChecked,
+      eleRef: this.handleGetContainerRef,
       role: role,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector-id": dataSelectorId || id
-    }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
+      "data-selector-id": dataSelectorId || id,
+      ...CheckBoxProps
+    }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
@@ -135,7 +144,7 @@ export default class CheckBox extends React.Component {
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.text
-    }, /*#__PURE__*/React.createElement(Label, _extends({
+    }, /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: disabled ? 'disable' : labelPalette,
       id: id,
@@ -146,8 +155,9 @@ export default class CheckBox extends React.Component {
       customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
                             ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
                             ${accessMode} ${customLabel}`,
-      title: toolTip ? toolTip : text
-    }, LabelProps))));
+      title: toolTip ? toolTip : text,
+      ...LabelProps
+    })));
   }
 
 }