@zohodesk/components 1.0.0-temp-79 → 1.0.0-temp-80

package/es/Popup/__tests__/Popup.spec.js

@@ -1,29 +1,22 @@
 /* eslint-disable no-undef */
-
 /**** Libraries ****/
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 /**** Components ****/
-
 import Popup from '../Popup';
-
 class SamplePopup extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", null, "Sample Popup");
   }
-
 }
-
 class SamplePopupCopy extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       "data-id": "samplePopup",
@@ -32,33 +25,26 @@ class SamplePopupCopy extends React.Component {
       }
     }, "Sample Popup");
   }
-
 }
-
 SamplePopupCopy.propTypes = {
   removeClose: PropTypes.func
 };
-
 class SamplePopupCopy1 extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       "data-id": "samplePopup"
     }, "Sample Popup");
   }
-
 }
-
 describe('Popup component conditions', () => {
   it('should click same popup with removeClose', () => {
     let PopupWrapperComponent = Popup(SamplePopupCopy);
     let div = document.createElement('div');
     document.body.append(div);
     /*eslint-disable */
-
     let popupDom = ReactDOM.render( /*#__PURE__*/React.createElement(PopupWrapperComponent, null), div);
     /*eslint-enable */
 
@@ -101,7 +87,6 @@ describe('Popup component conditions', () => {
     let div = document.createElement('div');
     document.body.append(div);
     /*eslint-disable */
-
     let popupDom = ReactDOM.render( /*#__PURE__*/React.createElement(PopupWrapperComponent, null), div);
     /*eslint-enable */
 
@@ -123,12 +108,15 @@ describe('Popup component conditions', () => {
     let PopupWrapperComponent = Popup(SamplePopupCopy1);
     let popupDom = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(PopupWrapperComponent, null));
     popupDom.togglePopup();
-    expect(popupDom.state.isPopupOpen).toBeTruthy(); //TestUtils.Simulate.keyUp(document, {keyCode:27});
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
 
+    //TestUtils.Simulate.keyUp(document, {keyCode:27});
     let e = document.createEvent('HTMLEvents');
     e.initEvent('keyup', false, true);
     e.keyCode = 27;
     document.dispatchEvent(e);
     expect(popupDom.state.isPopupOpen).toBeFalsy();
   });
-}); //Group Popup Handling Open and close
+});
+
+//Group Popup Handling Open and close

package/es/Popup/viewPort.js

@@ -4,7 +4,6 @@ let viewPort = {
     if (!el) {
       return;
     }
-
     let rectTemp = el.getBoundingClientRect();
     let rect = {
       height: rectTemp.height || el.clientHeight,
@@ -27,11 +26,9 @@ let viewPort = {
       x: 0,
       y: 0
     };
-
     if (customFrame) {
       customFrameRect = customFrame.getBoundingClientRect();
     }
-
     let newRect = {
       top: rect.top - customFrameRect.top,
       left: rect.left - customFrameRect.left,
@@ -64,7 +61,6 @@ let viewPort = {
     if (!el) {
       return;
     }
-
     let elRects = viewPort.frameRelativeRects(el, customFrame);
     let {
       rect
@@ -82,11 +78,9 @@ let viewPort = {
       needArrow,
       isAbsolute
     } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
     if (!el) {
       return;
     }
-
     let elViewPortEle = viewPort.getViewPortEle(el);
     let elRects = viewPort.frameRelativeRects(el, customFrame, elViewPortEle);
     let {
@@ -101,12 +95,13 @@ let viewPort = {
     let relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
     let {
       rectGap: documentGap
-    } = relativeBoxDocumentRects; //rect => PopOverContainer, relativeBoxGap => PopOverTarget
+    } = relativeBoxDocumentRects;
+
+    //rect => PopOverContainer, relativeBoxGap => PopOverTarget
+
     //Horizontal ~ ----- X axis
     //Vertical ~ ||||||| Y axis
-
     let paddingSpace = 5; // space between target and relative element
-
     let arrowSize = needArrow ? 10 : 0;
     rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
     rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
@@ -289,7 +284,6 @@ let viewPort = {
     if (!el) {
       return;
     }
-
     let elRects = viewPort.frameRelativeRects(el, customFrame);
     let {
       rectGap
@@ -316,11 +310,9 @@ let viewPort = {
       needArrow,
       isAbsolute
     });
-
     if (!viewPortPossibilities) {
       return;
     }
-
     let {
       views,
       viewsOffset,
@@ -329,12 +321,10 @@ let viewPort = {
     } = viewPortPossibilities;
     let view = null;
     let isViewFound = false;
-
     if (!isViewFound && defaultView && views[defaultView]) {
       view = defaultView;
       isViewFound = true;
     }
-
     if (!isViewFound) {
       if (customOrder.length > 0) {
         isViewFound = customOrder.some(position => {
@@ -352,11 +342,9 @@ let viewPort = {
         });
       }
     }
-
     if (!isViewFound) {
       view = defaultView;
     }
-
     return {
       view,
       views,

package/es/Provider/IdProvider.js

@@ -1,35 +1,29 @@
 import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
 import { getLibraryConfig } from './Config';
 let globalId = getLibraryConfig('idCounter'),
-    deletedIndexes = [],
-    globalPrefix;
+  deletedIndexes = [],
+  globalPrefix;
 export function setGlobalIdPrefix(value) {
   globalPrefix = value;
 }
 export function removeGlobalIdPrefix() {
   globalPrefix = undefined;
 }
-
 function getGlobalIdPrefix() {
   return globalPrefix;
 }
-
 function setGlobalId(id) {
   globalId = id;
 }
-
 function getGlobalId() {
   return globalId;
 }
-
 function setDeletedIndexes(array) {
   deletedIndexes = array;
 }
-
 function getDeletedIndexes() {
   return deletedIndexes;
 }
-
 function callback(_ref) {
   let {
     globalId,
@@ -38,7 +32,6 @@ function callback(_ref) {
   setGlobalId(globalId);
   setDeletedIndexes(deletedIndexes);
 }
-
 export function useUniqueId(prefix) {
   return useNumberGenerator({
     getGlobalId,

package/es/Provider/LibraryContext.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibraryContextInit from './LibraryContextInit';
 import { getLibraryConfig } from './Config';
-
 const LibraryContextProvider = _ref => {
   let {
     isReducedMotion = getLibraryConfig('isReducedMotion'),
@@ -13,22 +12,21 @@ const LibraryContextProvider = _ref => {
     isReducedMotion,
     direction
   });
-
   function setGlobalContext(key, data) {
     if (value[key] != data) {
-      setValue({ ...value,
+      setValue({
+        ...value,
         [key]: data
       });
     }
   }
-
   return /*#__PURE__*/React.createElement(LibraryContextInit.Provider, {
-    value: { ...value,
+    value: {
+      ...value,
       setGlobalContext
     }
   }, children);
 };
-
 LibraryContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
   isReducedMotion: PropTypes.bool,

package/es/Provider/NumberGenerator/NumberGenerator.js

@@ -5,10 +5,8 @@ export function addGlobalId(globalId) {
   } else {
     globalId = `${globalId}1`;
   }
-
   return globalId;
 }
-
 function decreaseGlobalId(number, globalId) {
   if (`${number}` == `${globalId}`) {
     if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) - 1)) {
@@ -17,19 +15,16 @@ function decreaseGlobalId(number, globalId) {
       globalId = `${globalId}`;
       globalId = globalId.substring(0, globalId.length - 1);
     }
-
     return {
       isDeleted: true,
       globalId
     };
   }
-
   return {
     isDeleted: false,
     globalId
   };
 }
-
 export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
   deletedIndexes = [...deletedIndexes];
   [...numbers].reverse().map(number => {
@@ -37,14 +32,12 @@ export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
     globalId = result.globalId;
     !result.isDeleted && deletedIndexes.push(number);
   });
-
   for (; deletedIndexes.indexOf(globalId) != -1;) {
     let presentHighValue = globalId;
     let result = decreaseGlobalId(globalId, globalId);
     globalId = result.globalId;
     deletedIndexes = deletedIndexes.filter(ele => `${ele}` != `${presentHighValue}`);
   }
-
   return {
     globalId,
     deletedIndexes
@@ -59,10 +52,9 @@ export function useNumberGenerator(_ref) {
     callback
   } = _ref;
   let presentValues = useRef([]),
-      presentIndex = useRef(0);
+    presentIndex = useRef(0);
   prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
   let globalPrefix = typeof getGlobalPrefix() === 'undefined' ? '' : `${getGlobalPrefix()}_`;
-
   function getNextId() {
     presentIndex.current = presentIndex.current + 1;
     let currentIndex = presentIndex.current;
@@ -74,7 +66,6 @@ export function useNumberGenerator(_ref) {
     });
     return `${globalPrefix}${prefix}${presentValues.current[currentIndex]}`;
   }
-
   useEffect(() => {
     presentValues.current = presentValues.current.filter((value, index) => index <= presentIndex.current);
   });
@@ -94,31 +85,27 @@ export function getNumberGenerators(_ref2) {
     callback
   } = _ref2;
   let presentIndex = 0,
-      presentValues = [],
-      {
-    name
-  } = Component.props;
+    presentValues = [],
+    {
+      name
+    } = Component.props;
   let didUpdateRef = Component.componentDidUpdate ? Component.componentDidUpdate.bind(Component) : undefined,
-      renderRef = Component.render.bind(Component),
-      willUnMountRef = Component.componentWillUnmount ? Component.componentWillUnmount.bind(Component) : undefined;
+    renderRef = Component.render.bind(Component),
+    willUnMountRef = Component.componentWillUnmount ? Component.componentWillUnmount.bind(Component) : undefined;
   prefix = typeof prefix !== 'undefined' ? `${prefix}_` : '';
-
   Component.componentDidUpdate = function () {
     didUpdateRef && didUpdateRef(...arguments);
     presentValues = presentValues.filter((value, index) => index <= presentIndex);
   };
-
   Component.componentWillUnmount = function () {
     callback(decreaseGlobalIds(presentValues, getDeletedIndexes(), getGlobalId()));
     willUnMountRef && willUnMountRef();
     didUpdateRef = null, renderRef = null, willUnMountRef = null;
   };
-
   Component.render = function () {
     presentIndex = -1;
     return renderRef();
   };
-
   function getNextId() {
     presentIndex += 1;
     let isValuePresent = typeof presentValues[presentIndex] !== 'undefined';
@@ -131,6 +118,5 @@ export function getNumberGenerators(_ref2) {
     });
     return `${globalPrefix}${prefix}${result}`;
   }
-
   return getNextId;
 }

package/es/Provider/ZindexProvider.js

@@ -1,32 +1,26 @@
 import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
 import { getLibraryConfig } from './Config';
 let globalId = getLibraryConfig('zindexCounter'),
-    deletedIndexes = [],
-    globalPrefix;
+  deletedIndexes = [],
+  globalPrefix;
 export function removeGlobalZIndexPrefix() {
   globalPrefix = undefined;
 }
-
 function getGlobalZIndexPrefix() {
   return globalPrefix;
 }
-
 export function setInitialZIndex(id) {
   globalId = id;
 }
-
 function getGlobalId() {
   return globalId;
 }
-
 function setDeletedIndexes(array) {
   deletedIndexes = array;
 }
-
 function getDeletedIndexes() {
   return deletedIndexes;
 }
-
 function callback(_ref) {
   let {
     globalId,
@@ -35,7 +29,6 @@ function callback(_ref) {
   setInitialZIndex(globalId);
   setDeletedIndexes(deletedIndexes);
 }
-
 export function useZIndex(prefix) {
   return useNumberGenerator({
     getGlobalId,

package/es/Provider/docs/Provider_Id__Class.docs.js

@@ -6,7 +6,6 @@ export default class Provider_Id__Class extends React.Component {
     setGlobalIdPrefix('zohodesk');
     this.getNextId = getUniqueId(this);
   }
-
   render() {
     let id = this.getNextId();
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -15,15 +14,15 @@ export default class Provider_Id__Class extends React.Component {
       id: id
     }, "Id ", id));
   }
-
 }
-
 if (false) {
   Provider_Id__Class.docs = {
     componentGroup: 'Provider',
     folderName: 'Functions'
   };
-} // setGlobalIdPrefix  => to set prefix for all id
+}
+
+// setGlobalIdPrefix  => to set prefix for all id
 // removeGlobalIdPrefix => remove prfeix
 // useUniqueId => for function components
 // getUniqueId => for class components

package/es/Provider/docs/Provider_Id__Function.docs.js

@@ -9,7 +9,6 @@ export default function Provider_Id__Function() {
     id: id
   }, "Id ", id));
 }
-
 if (false) {
   Provider_Id__Function.docs = {
     componentGroup: 'Provider',

package/es/Provider/docs/Provider_Zindex__Class.docs.js

@@ -6,7 +6,6 @@ export default class Provider_Zindex__Class extends React.Component {
     setInitialZIndex('1000');
     this.getNextId = getZIndex(this);
   }
-
   render() {
     let zIndex = this.getNextId();
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -19,14 +18,14 @@ export default class Provider_Zindex__Class extends React.Component {
       }
     }, "Zindex  ", zIndex));
   }
-
 }
-
 if (false) {
   Provider_Zindex__Class.docs = {
     componentGroup: 'Provider',
     folderName: 'Functions'
   };
-} // setGlobalZIndexPrefix
+}
+
+// setGlobalZIndexPrefix
 // useZIndex
 // getZIndex

package/es/Provider/docs/Provider_Zindex__Function.docs.js

@@ -14,7 +14,6 @@ export default function Provider_Zindex__Function() {
     }
   }, "Zindex ", Zindex2));
 }
-
 if (false) {
   Provider_Zindex__Function.docs = {
     componentGroup: 'Provider',

package/es/Provider.js

@@ -2,45 +2,63 @@ import React from 'react';
 import AppContainer from './AppContainer/AppContainer';
 import { Container } from './Layout';
 import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
-/* default mode & theme css */
 
+/* default mode, themes & contrast */
 import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css';
 import '../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/mode/defaultMode.module.css';
-/* dark mode & theme css */
+import '../assets/Appearance/default/mode/contrast/defaultContrast.module.css';
 
+/* dark mode, themes & contrast */
 import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/mode/darkMode.module.css';
-/* pure dark mode & theme css */
+import '../assets/Appearance/dark/mode/contrast/darkContrast.module.css';
 
+/* pureDark mode, themes & contrast */
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/mode/pureDarkMode.module.css';
+import '../assets/Appearance/pureDark/mode/contrast/pureDarkContrast.module.css';
 import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {
@@ -49,28 +67,33 @@ export default class Provider extends React.Component {
     setGlobalIdPrefix('ZD');
     this.state = {
       appearanceName: 'default',
-      themeName: 'blue'
+      themeName: 'blue',
+      isContrastChecked: false
     };
     this.setTheme = this.setTheme.bind(this);
     this.setAppearance = this.setAppearance.bind(this);
+    this.setContrast = this.setContrast.bind(this);
   }
-
   setAppearance(mode) {
     this.setState({
       appearanceName: mode
     });
   }
-
   setTheme(theme) {
     this.setState({
       themeName: theme
     });
   }
-
+  setContrast() {
+    this.setState(prevState => ({
+      isContrastChecked: !prevState.isContrastChecked
+    }));
+  }
   render() {
     let {
       appearanceName,
-      themeName
+      themeName,
+      isContrastChecked
     } = this.state;
     return /*#__PURE__*/React.createElement(LibraryContext.Provider, {
       value: {
@@ -83,13 +106,15 @@ export default class Provider extends React.Component {
           'data-mode': appearanceName,
           'data-theme': themeName
         }
-      }
+      },
+      className: isContrastChecked ? 'contrast' : ''
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
     }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
       onThemeChange: this.setTheme,
-      onAppearanceChange: this.setAppearance
+      onAppearanceChange: this.setAppearance,
+      onContrastChange: this.setContrast,
+      isChecked: isContrastChecked
     })));
   }
-
 }

package/es/Radio/Radio.js

@@ -10,7 +10,6 @@ export default class Radio extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
-
   onChange(e) {
     let {
       onChange,
@@ -18,7 +17,6 @@ export default class Radio extends React.Component {
     } = this.props;
     onChange && onChange(value, e);
   }
-
   render() {
     let {
       id,
@@ -110,11 +108,9 @@ export default class Radio extends React.Component {
               ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
     })));
   }
-
 }
 Radio.defaultProps = defaultProps;
 Radio.propTypes = propTypes;
-
 if (false) {
   Radio.docs = {
     componentGroup: 'Form Elements',