@zohodesk/dot 1.0.0 → 1.2.0

package/coverage/sorter.js

@@ -0,0 +1,196 @@
+/* eslint-disable */
+var addSorting = (function() {
+    'use strict';
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() {
+        return document.querySelector('.coverage-summary');
+    }
+    // returns the thead element of the summary table
+    function getTableHeader() {
+        return getTable().querySelector('thead tr');
+    }
+    // returns the tbody element of the summary table
+    function getTableBody() {
+        return getTable().querySelector('tbody');
+    }
+    // returns the th element for nth column
+    function getNthColumn(n) {
+        return getTableHeader().querySelectorAll('th')[n];
+    }
+
+    function onFilterInput() {
+        const searchValue = document.getElementById('fileSearch').value;
+        const rows = document.getElementsByTagName('tbody')[0].children;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (
+                row.textContent
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase())
+            ) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        }
+    }
+
+    // loads the search box
+    function addSearchBox() {
+        var template = document.getElementById('filterTemplate');
+        var templateClone = template.content.cloneNode(true);
+        templateClone.getElementById('fileSearch').oninput = onFilterInput;
+        template.parentElement.appendChild(templateClone);
+    }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML =
+                    colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function(a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function(a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc
+            ? ' sorted-desc'
+            : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function() {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i = 0; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function() {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData();
+        addSearchBox();
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

package/es/FreezeLayer/FreezeLayer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
-import { mergeStyle } from '@zohodesk/components/es/utils/';
+import { mergeStyle } from '@zohodesk/utils';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import cssJSLogic from './css/cssJSLogic';

package/es/FreezeLayer/css/cssJSLogic.js

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

package/es/Image/__tests__/Image.spec.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render } from "@testing-library/react";
+import Image from '../Image.js';
+describe('Image - ', () => {
+  test('rendering the default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('checking  "isCover" is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, {
+      src: "https://www.w3schools.com/images/lamp.jpg",
+      alt: "Lamp",
+      isCover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "alt" and "src" value ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, {
+      src: "https://www.w3schools.com/images/lamp.jpg",
+      alt: "Lamp"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering  "dataid" value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, {
+      src: "https://www.w3schools.com/images/lamp.jpg",
+      alt: "Lamp",
+      dataId: "imageData"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "Original" value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, {
+      src: "https://www.w3schools.com/images/lamp.jpg",
+      alt: "Lamp",
+      original: "https://www.w3schools.com/images/lamp.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "Id" value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, {
+      src: "https://www.w3schools.com/images/lamp.jpg",
+      alt: "Lamp",
+      htmlId: "test"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering "title" value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Image, {
+      src: "https://www.w3schools.com/images/lamp.jpg",
+      alt: "Lamp",
+      title: "ImageTest Value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image -  checking  "isCover" is false 1`] = `
+<DocumentFragment>
+  <img
+    alt="Lamp"
+    class="  imgFullSize "
+    src="https://www.w3schools.com/images/lamp.jpg"
+  />
+</DocumentFragment>
+`;
+
+exports[`Image -  rendering  "dataid" value 1`] = `
+<DocumentFragment>
+  <img
+    alt="Lamp"
+    class="  imgMaxFullSize "
+    data-id="imageData"
+    data-test-id="imageData"
+    src="https://www.w3schools.com/images/lamp.jpg"
+  />
+</DocumentFragment>
+`;
+
+exports[`Image -  rendering "Id" value 1`] = `
+<DocumentFragment>
+  <img
+    alt="Lamp"
+    class="  imgMaxFullSize "
+    id="test"
+    src="https://www.w3schools.com/images/lamp.jpg"
+  />
+</DocumentFragment>
+`;
+
+exports[`Image -  rendering "Original" value 1`] = `
+<DocumentFragment>
+  <img
+    alt="Lamp"
+    class="  imgMaxFullSize "
+    data-original="https://www.w3schools.com/images/lamp.jpg"
+    src="https://www.w3schools.com/images/lamp.jpg"
+  />
+</DocumentFragment>
+`;
+
+exports[`Image -  rendering "alt" and "src" value  1`] = `
+<DocumentFragment>
+  <img
+    alt="Lamp"
+    class="  imgMaxFullSize "
+    src="https://www.w3schools.com/images/lamp.jpg"
+  />
+</DocumentFragment>
+`;
+
+exports[`Image -  rendering "title" value 1`] = `
+<DocumentFragment>
+  <img
+    alt="Lamp"
+    class="  imgMaxFullSize "
+    data-title="ImageTest Value"
+    src="https://www.w3schools.com/images/lamp.jpg"
+  />
+</DocumentFragment>
+`;
+
+exports[`Image -  rendering the default props 1`] = `
+<DocumentFragment>
+  <img
+    class="  imgMaxFullSize "
+  />
+</DocumentFragment>
+`;

package/es/Loader/Loader.js

@@ -18,8 +18,4 @@ export default class Loader extends React.Component {
     }));
   }
 
-} // if (__DOCS__) {
-//   Loader.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+}

package/es/alert/AlertHeader/props/propTypes.js

@@ -6,7 +6,7 @@ export const propTypes = {
   dataId: PropTypes.string,
   iconClass: PropTypes.string,
   iconName: PropTypes.string,
-  iconSize: PropTypes.sting,
+  iconSize: PropTypes.string,
   iconType: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket', 'update']),
   needIcon: PropTypes.bool,
   onClose: PropTypes.func,

package/es/v1/ActionButton/ActionButton.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { defaultProps } from '../../ActionButton/props/defaultProps';
+import { propTypes } from '../../ActionButton/props/propTypes';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Icon } from '@zohodesk/icons';
+import Button from '@zohodesk/components/lib/Button/Button';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import style from '../../ActionButton/ActionButton.module.css';
+
+function ActionButton(props) {
+  let {
+    isLoading,
+    onClick,
+    size,
+    dataId,
+    dataSelectorId,
+    isArrow,
+    text,
+    subText,
+    arrowBoxSize,
+    palette,
+    onHover,
+    position,
+    className,
+    iconName,
+    iconSize,
+    dataTitle,
+    isDisabled,
+    isPopupOpen,
+    removeClose,
+    children,
+    dropBoxClass,
+    isBoxPaddingNeed,
+    getContainerRef,
+    getTargetRef,
+    removeChildrenTooltip,
+    innerClassName,
+    popupGroup,
+    togglePopup,
+    defaultPosition
+  } = props;
+
+  const handleTogglePopup = e => {
+    togglePopup(e, defaultPosition);
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    className: ` ${style.container} ${style[palette + 'Box']} ${style[size]} ${className} ${isDisabled ? CssProvider('isDisabled') : ''} ${!onClick ? style.wholeDiv : ''} `,
+    onClick: onHover ? removeClose : !onClick ? handleTogglePopup : undefined,
+    onMouseEnter: !onClick ? onHover && handleTogglePopup : undefined,
+    onMouseLeave: !onClick ? onHover && handleTogglePopup : undefined,
+    eleRef: getTargetRef,
+    dataSelectorId: dataSelectorId
+  }, isLoading ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    status: "loading",
+    palette: palette,
+    size: "medium",
+    customClass: {
+      customButton: style.btn
+    },
+    text: text
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    onClick: onClick,
+    dataId: dataId,
+    className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
+    "data-title": dataTitle,
+    tagName: "button",
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.contentwrapper
+  }, /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    alignBox: "row",
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${style.iconClr} ${text ? style.iconMrgn : ''}`
+  }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    className: style.txt,
+    "data-title": removeChildrenTooltip ? null : text
+  }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
+    "data-title": removeChildrenTooltip ? null : subText,
+    className: style.subTxt
+  }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
+    onClick: onClick ? !onHover && handleTogglePopup : undefined,
+    onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
+    onMouseLeave: onClick ? onHover && handleTogglePopup : undefined,
+    className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
+    dataId: `${dataId}_arrowButton`,
+    tabIndex: "0",
+    tagName: "button",
+    dataSelectorId: `${dataSelectorId}_arrowButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "6",
+    iconClass: style.arrow
+  })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    size: "small",
+    isActive: isPopupOpen,
+    boxPosition: position,
+    isAnimate: true,
+    isArrow: isArrow,
+    customClass: {
+      customDropBoxWrap: dropBoxClass
+    },
+    isBoxPaddingNeed: isBoxPaddingNeed,
+    getRef: getContainerRef,
+    popupGroup: popupGroup,
+    needFocusScope: true,
+    onClose: handleTogglePopup
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    scroll: "vertical"
+  }, children)) : null) : null));
+}
+
+ActionButton.defaultProps = defaultProps;
+ActionButton.propTypes = propTypes; // ActionButton.docs = {
+//   componentGroup: 'Atom'
+// };
+
+export default Popup(ActionButton);

package/es/v1/AlphabeticList/AlphabeticList.js

@@ -0,0 +1,90 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from '../../AlphabeticList/props/defaultProps';
+import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from '../../AlphabeticList/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+/*** CSS ***/
+
+import style from '../../AlphabeticList/AlphabeticList.module.css';
+const AlphabeticListItemMemo = /*#__PURE__*/memo(AlphabeticListItem);
+
+function AlphabeticList(props) {
+  let {
+    onSelect,
+    selectedCharacter,
+    align,
+    type,
+    i18nKeys,
+    dataId,
+    dataSelectorId
+  } = props;
+  let {
+    allText = 'All',
+    allTitle = 'All'
+  } = i18nKeys;
+  let alignType = align === 'vertical' ? style.column : style.row;
+  let letters = type == 'alphabeticalwithhash' ? AlphabeticCharactersWithHash : type == 'alphabetical' ? AlphabeticCharacters : NumberList;
+
+  const handleSelectAll = () => {
+    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
+  };
+
+  const handleSelect = id => {
+    onSelect && selectedCharacter !== id && onSelect(id);
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    tagName: "ul",
+    isCover: false,
+    alignBox: align === 'vertical' ? 'column' : 'row',
+    className: `${style.container} ${alignType} ${type != 'alphabetical' ? style.numbers : ''}`,
+    dataId: "navigationDiv",
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    tagName: "li",
+    className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,
+    dataId: `All_${dataId}`
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: handleSelectAll,
+    className: `${style.heading} ${style.letter}`,
+    "data-title": allTitle
+  }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItemMemo, {
+    id: letter,
+    isActive: letter === selectedCharacter,
+    onClick: handleSelect,
+    text: letter,
+    key: letter,
+    dataId: dataId
+  })));
+}
+
+AlphabeticList.propTypes = AlphabeticList_propTypes;
+AlphabeticList.defaultProps = AlphabeticList_defaultProps;
+
+function AlphabeticListItem(props) {
+  let {
+    isActive,
+    text,
+    dataId,
+    onClick,
+    id
+  } = props;
+
+  const handleClick = () => {
+    onClick && onClick(id);
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    tagName: "li",
+    className: `${style.list} ${isActive ? style.selected : ''}`,
+    onClick: handleClick,
+    dataId: `${text}_${dataId}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.letter
+  }, text));
+}
+
+AlphabeticListItem.propTypes = AlphabeticListItem_propTypes;
+AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;
+export default /*#__PURE__*/memo(AlphabeticList);