@zohodesk/components 1.0.0-temp-214 → 1.0.0-temp-215

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

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-.top_shadow {
+[data-boxdirection="top"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-.left_shadow {
+[data-boxdirection="left"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-.right_shadow {
+[data-boxdirection="right"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-.bottom_shadow {
+[data-boxdirection="bottom"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,37 +158,37 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow */
-.arrowtop {
+/* space for arrow using data-boxdirection attribute*/
+[data-boxdirection="top"].arrow {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrowright {
+[data-boxdirection="right"].arrow {
     padding-left: var(--zd_size10) ;
 }
 
-.arrowleft {
+[data-boxdirection="left"].arrow {
     padding-right: var(--zd_size10) ;
 }
 
-.arrowbottom {
+[data-boxdirection="bottom"].arrow {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target */
-.paddingSpace_top {
+/* space from target using data-boxdirection attribute*/
+[data-boxdirection="top"].paddingSpace {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace_right {
+[data-boxdirection="right"].paddingSpace {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace_left {
+[data-boxdirection="left"].paddingSpace {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace_bottom {
+[data-boxdirection="bottom"].paddingSpace {
     padding-top: var(--zd_size5) ;
 }
 
@@ -219,101 +219,102 @@
     composes: arrow;
 }
 
-.top .start,
-.top .end,
-.top .mid {
+[data-boxdirection="top"].boxDirection.start,
+[data-boxdirection="top"].boxDirection.end,
+[data-boxdirection="top"].boxDirection.mid {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.top .start {
+[data-boxdirection="top"].boxDirection.start {
     left: var(--zd_size28) ;
 }
 
-.top .end {
+[data-boxdirection="top"].boxDirection.end {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.top .mid {
+[data-boxdirection="top"].boxDirection.mid {
     left: 50% ;
 }
 
-.top .start,
-.top .mid {
+[data-boxdirection="top"].boxDirection.start,
+[data-boxdirection="top"].boxDirection.mid {
     transform: rotate(180deg) translateX(50%);
 }
 
-.bottom .start,
-.bottom .end,
-.bottom .mid {
+[data-boxdirection="bottom"].boxDirection.start,
+[data-boxdirection="bottom"].boxDirection.end,
+[data-boxdirection="bottom"].boxDirection.mid {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.bottom .start {
+[data-boxdirection="bottom"].boxDirection.start {
     left: var(--zd_size28) ;
 }
 
-.bottom .mid {
+[data-boxdirection="bottom"].boxDirection.mid {
     left: 50% ;
 }
 
-.bottom .end {
+[data-boxdirection="bottom"].boxDirection.end {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.bottom .mid,
-.bottom .start {
+[data-boxdirection="bottom"].boxDirection.mid,
+[data-boxdirection="bottom"].boxDirection.start {
     transform: translateX(-50%);
 }
 
-.left .start,
-.left .mid,
-.left .end {
+[data-boxdirection="left"].boxDirection.start,
+[data-boxdirection="left"].boxDirection.mid,
+[data-boxdirection="left"].boxDirection.end {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.left .start {
+[data-boxdirection="left"].boxDirection.start {
     top: var(--zd_size28) ;
 }
 
-.left .end {
+[data-boxdirection="left"].boxDirection.end {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.left .mid {
+[data-boxdirection="left"].boxDirection.mid {
     top: 50% ;
 }
 
-.left .start,
-.left .mid {
+[data-boxdirection="left"].boxDirection.start,
+[data-boxdirection="left"].boxDirection.mid {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.right .start,
-.right .mid,
-.right .end {
+[data-boxdirection="right"].boxDirection.start,
+[data-boxdirection="right"].boxDirection.mid,
+[data-boxdirection="right"].boxDirection.end {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.right .start {
+[data-boxdirection="right"].boxDirection.start {
     top: var(--zd_size28) ;
 }
 
-.right .mid {
+[data-boxdirection="right"].boxDirection.mid {
     top: 50% ;
 }
 
-.right .start,
-.right .mid {
+[data-boxdirection="right"].boxDirection.start,
+[data-boxdirection="right"].boxDirection.mid {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.right .end {
+[data-boxdirection="right"].boxDirection.end {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
+[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -321,7 +322,7 @@
     pointer-events: none;
 }
 
-.hidden .subContainer {
+[data-visible="hidden"] .subContainer, .hidden .subContainer {
     box-shadow: none;
 }
 
@@ -342,17 +343,21 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
+
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
+
 .bounce {
     composes: animationBasic;
 }
+
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
+
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -414,7 +419,7 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
+    /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {
@@ -52,9 +52,9 @@ export default function cssJSLogic(_ref) {
     [style[boxPosition]]: isAbsolute && !isModel,
     [style.fixedContainer]: !isAbsolute && !isModel,
     [style[size]]: size && !isModel,
-    [style[boxDirection]]: !isModel && isActive && isArrow,
-    [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolute,
-    [style[`paddingSpace_${boxDirection}`]]: !isModel && isActive && !isArrow && isPadding
+    [style[`boxDirection`]]: !isModel && isActive && isArrow,
+    [style[`arrow`]]: !isModel && isActive && isArrow && isAbsolute,
+    [style[`paddingSpace`]]: !isModel && isActive && !isArrow && isPadding
   });
   let subContainerClass = compileClassNames({
     [style.subContainer]: true,
@@ -62,7 +62,7 @@ export default function cssJSLogic(_ref) {
     [style.mobRadius]: !!isModel,
     [style.slideUp]: !!isModel && isActive,
     [customDropBox]: !isModel,
-    [style[`${boxDirection}_shadow`]]: !isModel,
+    [style[`shadow`]]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
     [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -1,4 +1,4 @@
-import { remConvert } from '../../utils/Common';
+import { remConvert } from "../../utils/Common";
 export default function useDropboxPosCalc(props) {
   let {
     right,

package/es/DropBox/__tests__/DropBox.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropBox from '../DropBox';
+import DropBox from "../DropBox";
 describe('DropBox', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropBox/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { useZIndex } from '../../Provider/ZindexProvider';
+import { useZIndex } from "../../Provider/ZindexProvider";
 export default function cssJSLogic(props) {
   const {
     isActive,

package/es/DropBox/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
+import { DropBoxElementDefaultProps } from "../DropBoxElement/props/defaultProps";
 export const defaultProps = {
   needResponsive: true,
   portalId: 'portal1',

package/es/DropBox/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
+import { DropBoxElementPropTypes } from "../DropBoxElement/props/propTypes";
 export const propTypes = {
   needResponsive: PropTypes.bool,
   portalId: PropTypes.string,

package/es/DropBox/utils/isMobilePopover.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../Provider/Config';
+import { getLibraryConfig } from "../../Provider/Config";
 export default function isMobilePopover(needResponsive) {
   //   let { needResponsive } = props;
   let windowWidth,

package/es/DropDown/DropDown.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from './props/propTypes';
-import { DropDownItemContainer_defaultProps } from './props/defaultProps';
-import style from './DropDown.module.css';
-import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
+import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import style from "./DropDown.module.css";
+import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
 
 export default class DropDown extends React.Component {

package/es/DropDown/DropDownHeading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownHeading_propTypes } from './props/propTypes';
-import { DropDownHeading_defaultProps } from './props/defaultProps';
-import style from './DropDownHeading.module.css';
+import { DropDownHeading_propTypes } from "./props/propTypes";
+import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import style from "./DropDownHeading.module.css";
 export default class DropDownHeading extends React.Component {
   render() {
     let {

package/es/DropDown/DropDownItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownItem_propTypes } from './props/propTypes';
-import { DropDownItem_defaultProps } from './props/defaultProps';
-import style from './DropDownItem.module.css';
+import { DropDownItem_propTypes } from "./props/propTypes";
+import { DropDownItem_defaultProps } from "./props/defaultProps";
+import style from "./DropDownItem.module.css";
 export default class DropDownItem extends React.Component {
   constructor(props) {
     super(props);

package/es/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDownSearch_propTypes } from './props/propTypes';
-import { DropDownSearch_defaultProps } from './props/defaultProps';
-import TextBox from '../TextBox/TextBox';
-import style from './DropDownSearch.module.css';
+import { DropDownSearch_propTypes } from "./props/propTypes";
+import { DropDownSearch_defaultProps } from "./props/defaultProps";
+import TextBox from "../TextBox/TextBox";
+import style from "./DropDownSearch.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
 export default class DropDownSearch extends React.Component {

package/es/DropDown/DropDownSeparator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from './props/propTypes';
-import style from './DropDownSeparator.module.css';
+import { DropDownSeparator_propTypes } from "./props/propTypes";
+import style from "./DropDownSeparator.module.css";
 export default class DropDownSeparator extends React.Component {
   render() {
     let {

package/es/DropDown/__tests__/DropDown.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDown from '../DropDown';
+import DropDown from "../DropDown";
 describe('DropDown', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownHeading.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownHeading from '../DropDownHeading';
+import DropDownHeading from "../DropDownHeading";
 describe('DropDownHeading', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownItem from '../DropDownItem';
+import DropDownItem from "../DropDownItem";
 describe('DropDownItem', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownSearch.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownSearch from '../DropDownSearch';
+import DropDownSearch from "../DropDownSearch";
 describe('DropDownSearch', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownSeparator.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownSeparator from '../DropDownSeparator';
+import DropDownSeparator from "../DropDownSeparator";
 describe('DropDownSeparator', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/index.js

@@ -1,7 +1,7 @@
-export { default as DropDown } from './DropDown';
-export { DropDownTarget } from './DropDown';
-export { DropDownItemContainer } from './DropDown';
-export { default as DropDownHeading } from './DropDownHeading';
-export { default as DropDownItem } from './DropDownItem';
-export { default as DropDownSearch } from './DropDownSearch';
-export { default as DropDownSeparator } from './DropDownSeparator';
+export { default as DropDown } from "./DropDown";
+export { DropDownTarget } from "./DropDown";
+export { DropDownItemContainer } from "./DropDown";
+export { default as DropDownHeading } from "./DropDownHeading";
+export { default as DropDownItem } from "./DropDownItem";
+export { default as DropDownSearch } from "./DropDownSearch";
+export { default as DropDownSeparator } from "./DropDownSeparator";

package/es/DropDown/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { PopOver_propTypes } from './../../PopOver/props/propTypes';
+import { PopOver_propTypes } from "./../../PopOver/props/propTypes";
 export const DropDown_propTypes = { ...PopOver_propTypes
 };
 export const DropDownTarget_propTypes = {

package/es/Heading/Heading.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { whiteSpaceClassMapping } from '../utils/cssUtils';
-import style from './Heading.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { whiteSpaceClassMapping } from "../utils/cssUtils";
+import style from "./Heading.module.css";
 export default class Heading extends React.Component {
   render() {
     let {

package/es/Heading/__tests__/Heading.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Heading from '../Heading';
+import Heading from "../Heading";
 describe('Heading', () => {
   test('rendering the defult props', () => {
     const {

package/es/Label/Label.js

@@ -2,10 +2,10 @@
   'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
 ]}] */
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './Label.module.css';
-import colors from './LabelColors.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./Label.module.css";
+import colors from "./LabelColors.module.css";
 export default class Label extends React.Component {
   render() {
     let {

package/es/Label/__tests__/Label.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Label from '../Label.js';
+import Label from "../Label.js";
 describe('Label', () => {
   test('rendering the defult props', () => {
     const {

package/es/Layout/Box.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { BoxProps as propTypes } from './props/propTypes';
-import { BoxDefaultProps as defaultProps } from './props/defaultProps';
+import { BoxProps as propTypes } from "./props/propTypes";
+import { BoxDefaultProps as defaultProps } from "./props/defaultProps";
 /* eslint css-modules/no-unused-class: 0 */
 
-import { createProps, getClass, setProps } from './utils';
-import style from './Layout.module.css';
+import { createProps, getClass, setProps } from "./utils";
+import style from "./Layout.module.css";
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getBoxClassNames(props) {

package/es/Layout/Container.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ContainerProps as propTypes } from './props/propTypes';
-import { ContainerDefaultProps as defaultProps } from './props/defaultProps';
+import { ContainerProps as propTypes } from "./props/propTypes";
+import { ContainerDefaultProps as defaultProps } from "./props/defaultProps";
 /* eslint css-modules/no-unused-class: 0 */
 
-import { createProps, getClass, setProps } from './utils';
-import style from './Layout.module.css';
+import { createProps, getClass, setProps } from "./utils";
+import style from "./Layout.module.css";
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getContainerClassNames(props) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Box from '../Box';
+import Box from "../Box";
 describe('Box', () => {
   test('rendering the defult props', () => {
     const {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Container from '../Container';
+import Container from "../Container";
 describe('Container', () => {
   test('rendering the defult props', () => {
     const {

package/es/Layout/index.js

@@ -1,5 +1,5 @@
-export { default as Container } from './Container';
-export { default as Box } from './Box'; // let Layout = {
+export { default as Container } from "./Container";
+export { default as Box } from "./Box"; // let Layout = {
 //   docs: {
 //     componentGroup: 'Layout',
 //     folderName: 'Style Guide',

package/es/ListItem/ListContainer.js

@@ -1,11 +1,11 @@
 /**** Libraries ****/
 import React, { useCallback } from 'react';
-import { Container } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
-import style from './ListItem.module.css';
-import { ListContainerDefaultProps } from './props/defaultProps';
-import { ListContainer_Props } from './props/propTypes';
-import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { Container } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
+import style from "./ListItem.module.css";
+import { ListContainerDefaultProps } from "./props/defaultProps";
+import { ListContainer_Props } from "./props/propTypes";
+import { useResponsiveReceiver } from "../Responsive/CustomResponsive";
 
 const ListContainer = props => {
   const {

package/es/ListItem/ListItem.js

@@ -1,15 +1,15 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemDefaultProps } from './props/defaultProps';
-import { ListItem_Props } from './props/propTypes';
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemDefaultProps } from "./props/defaultProps";
+import { ListItem_Props } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from './ListItem.module.css';
+import style from "./ListItem.module.css";
 export default class ListItem extends React.Component {
   constructor(props) {
     super(props);