@zohodesk/dot 1.0.0-temp-156 → 1.0.0-temp-159

package/es/Hooks/Dragger/useDragger.js

@@ -1,13 +1,13 @@
 //Hooks from React
-import { useEffect, useRef, useCallback } from 'react';
-//CustomFunction
-import { DragPosCalc } from './utils/DraggerUtil';
-//GlobalConfig
-import { getDotLibraryConfig } from '../../Provider/Config';
-//Props
+import { useEffect, useRef, useCallback } from 'react'; //CustomFunction
+
+import { DragPosCalc } from './utils/DraggerUtil'; //GlobalConfig
+
+import { getDotLibraryConfig } from '../../Provider/Config'; //Props
+
 import defaultProps from './props/defaultProps';
-import propTypes from './props/propTypes';
-//CSS
+import propTypes from './props/propTypes'; //CSS
+
 import style from './css/Dragger.module.css';
 export default function useDragger(_ref) {
   let {
@@ -25,8 +25,8 @@ export default function useDragger(_ref) {
   useEffect(() => {
     parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
   }, []); //did Mount
-
   //calculateDragPosition --> To sperate Dom action
+
   const calculateDragPosition = useCallback((x, y) => {
     if (parentEle.current && draggableEle.current) {
       return DragPosCalc({
@@ -46,6 +46,7 @@ export default function useDragger(_ref) {
   const elementDrag = useCallback(e => {
     e = e || window.event;
     e.preventDefault();
+
     if (draggable.current) {
       const left = offset.current.x + e.clientX;
       const top = offset.current.y + e.clientY;
@@ -93,6 +94,7 @@ export default function useDragger(_ref) {
   }, []);
   const removeListener = useCallback(draggableEle => {
     let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+
     if (dragController) {
       dragController.removeEventListener('mousedown', dragMouseDown);
       draggableEle.current = null;
@@ -107,13 +109,13 @@ export default function useDragger(_ref) {
     } else {
       removeListener(draggableEle);
     }
+
     return () => {
       removeListener(draggableEle);
     };
   }, [ChildRef.current, isActive]);
   return null;
-}
+} //Props
 
-//Props
 useDragger.propTypes = propTypes;
 useDragger.defaultProps = defaultProps;

package/es/IconButton/IconButton.js

@@ -1,4 +1,5 @@
 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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -19,13 +20,15 @@ export default class IconButton extends React.Component {
     this.triggerMouseOver = this.triggerMouseOver.bind(this);
     this.onBlur = this.onBlur.bind(this);
   }
+
   handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-      e.preventDefault();
-      this.triggerClick(e);
+      e.preventDefault(); // this.triggerClick(e);
+
       this.triggerMouseDown(e);
     }
   }
+
   triggerClick(e) {
     let {
       onClick,
@@ -35,6 +38,7 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
+
   triggerMouseOver(e) {
     let {
       onMouseOver,
@@ -44,6 +48,7 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
+
   triggerMouseDown(e) {
     let {
       onMouseDown,
@@ -53,6 +58,7 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
+
   onBlur(e) {
     let {
       isDisabled
@@ -61,6 +67,7 @@ export default class IconButton extends React.Component {
       isPressed: false
     }) : null;
   }
+
   render() {
     let {
       palette,
@@ -132,11 +139,10 @@ export default class IconButton extends React.Component {
       iconClass: iconClass
     }) : null, children ? children : null));
   }
+
 }
 IconButton.propTypes = propTypes;
-IconButton.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+IconButton.defaultProps = defaultProps; // if (__DOCS__) {
 //   IconButton.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/IconButton/IconButton.module.css

@@ -2,8 +2,8 @@
   --iconColor: var(--zdt_iconButton_icon_black);
 }
 .wrapper {
-  height: 28px;
-  width: 28px;
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);

package/es/IconButton/__tests__/IconButton.spec.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import IconButton from '../IconButton.js';
+describe('IconButton', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['primary', 'primaryFilled', 'default'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('rendering the isActive true with palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      isActive: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const hoverType = ['default', 'border', 'bg'];
+  test.each(hoverType)('rendering the hovertypes- %s', hoverType => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      hoverType: hoverType
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isNeedEffect is False', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      isNeedEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      a11y: {
+        ariaLabel: 'ariaLabel',
+        ariaControls: 'ariaControls',
+        ariaLabelledby: 'ariaLabelledby',
+        ariaHaspopup: true,
+        ariaExpanded: true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      a11y: {
+        ariaHaspopup: false,
+        ariaExpanded: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needButtonTag', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      needButtonTag: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tourId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      tourId: "tourId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in Icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      iconName: "ZD-GN-infoStroke",
+      isBold: true,
+      iconSize: "13",
+      iconClass: "iconClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in dataIsHtml is True', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      dataIsHtml: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in isDisabled is True', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in ClassName', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      className: "IconButtonClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      title: "IconTitle"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('eleRef prop is a function', () => {
+    // Create a mock function
+    const mockEleRef = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      eleRef: mockEleRef
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Checking the "Children"', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      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();
+  });
+});

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

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton Checking the "Children" 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  >
+    <span>
+      Element 1
+    </span>
+    <span>
+      Element 2
+    </span>
+    <span>
+      Element 3
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`IconButton eleRef prop is a function 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering ally 1`] = `
+<DocumentFragment>
+  <button
+    aria-controls="ariaControls"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="ariaLabel"
+    aria-labelledby="ariaLabelledby"
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering ally 2`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    aria-haspopup="false"
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in ClassName 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in Icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size13);"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in dataIsHtml is True 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="true"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in isDisabled is True 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in title 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    data-title="IconTitle"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering isNeedEffect is False 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering needButtonTag 1`] = `
+<DocumentFragment>
+  <div
+    aria-pressed="false"
+    class="false wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the defult props 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- bg 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- border 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering tourId 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    data-tour="tourId"
+  />
+</DocumentFragment>
+`;

package/es/Image/Image.js

@@ -29,10 +29,10 @@ export default class Image extends React.Component {
       "data-original": original
     });
   }
+
 }
 Image.propTypes = propTypes;
-Image.defaultProps = defaultProps;
-// if (__DOCS__) {
+Image.defaultProps = defaultProps; // if (__DOCS__) {
 //   Image.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/Image/Image.module.css

@@ -1,10 +1,10 @@
 .imgFullSize{
-    height:100%;
-    width:100%
+    height:100% ;
+    width:100% 
 }
 .imgMaxFullSize{
-    max-height:100%;
-    max-width:100%
+    max-height:100% ;
+    max-width:100% 
 }
 .imgFullSize, .imgMaxFullSize{
   /*  Variable:Ignore  */