@zohodesk/dot 1.0.0-temp-210.1 → 1.0.0-temp-211

package/es/FreezeLayer/FreezeLayer.js

@@ -21,11 +21,7 @@ export default function FreezeLayer(props) {
     forwardRef,
     isSvgMask,
     needAutoZindex,
-    customStyle,
-    onParentAnimateComplete,
-    onChildAnimateComplete,
-    postAnimateParentStyles,
-    postAnimateChildStyles
+    customStyle
   } = props;
   const finalStyle = mergeStyle(style, customStyle);
   const {
@@ -46,9 +42,7 @@ export default function FreezeLayer(props) {
   return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: animationName && animationName,
     isActive: isActive,
-    runOnMount: runOnMount,
-    onEnterComplete: onParentAnimateComplete,
-    postEnterStyles: postAnimateParentStyles
+    runOnMount: runOnMount
   }, /*#__PURE__*/React.createElement("div", {
     style: isActive && needAutoZindex ? {
       zIndex: `${getNextIndex()}`
@@ -64,9 +58,7 @@ export default function FreezeLayer(props) {
     component: Container,
     alignBox: "row",
     align: align,
-    dataId: "reactFreezeLayer",
-    onEnterComplete: onChildAnimateComplete,
-    postEnterStyles: postAnimateChildStyles
+    dataId: "reactFreezeLayer"
   }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: align,

package/es/FreezeLayer/props/defaultProps.js

@@ -5,9 +5,5 @@ export const defaultProps = {
   isSvgMask: false,
   customClass: '',
   customStyle: {},
-  needAutoZindex: true,
-  onParentAnimateComplete: () => {},
-  onChildAnimateComplete: () => {},
-  postAnimateParentStyles: {},
-  postAnimateChildStyles: {}
+  needAutoZindex: true
 };

package/es/FreezeLayer/props/propTypes.js

@@ -14,10 +14,6 @@ export const propTypes = {
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
   customStyle: PropTypes.object,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10']),
-  onParentAnimateComplete: PropTypes.func,
-  onChildAnimateComplete: PropTypes.func,
-  postAnimateParentStyles: PropTypes.object,
-  postAnimateChildStyles: PropTypes.object
+  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
 };
 export default propTypes;

package/es/Link/__tests__/Link.spec.js

@@ -1,11 +1,131 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Link from "../Link";
-describe('Link', () => {
-  test('rendering the defult props', () => {
+import LinkContext from "../LinkContext";
+describe('Link Component Snapshot Tests', () => {
+  const targetOptions = ['_blank', '_self'];
+  const mockContextOptions = {
+    options: {
+      isLink: true,
+      constructURL: jest.fn((urlName, urlData) => `https://zoho.com/${urlName}/${urlData || ''}`)
+    }
+  };
+
+  const renderWithProvider = component => render( /*#__PURE__*/React.createElement(LinkContext.Provider, {
+    value: mockContextOptions
+  }, component));
+
+  test('renders with default props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Link, null));
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with children content', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, null, "Click Here"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href prop', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      href: "https://zoho.com"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(targetOptions)('renders with target - %s', target => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      target: target
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData using provider', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      urlName: "profile",
+      urlData: {
+        id: 123
+      }
+    }));
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', {
+      id: 123
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and undefined urlData using provider', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      urlName: "profile"
+    }));
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData as undefined using provider', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      urlName: undefined,
+      urlData: undefined
+    }));
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith(undefined, undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with custom className', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      className: "custom-link"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with title prop', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      title: "Example Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with download attribute', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      download: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with rel attribute', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      rel: "noopener noreferrer"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with dataId prop', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      dataId: "test-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', () => {
+    const customProps = {
+      'data-custom': 'customValue',
+      'data-id': 'uniqueId'
+    };
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      customProps: customProps
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link rendering the defult props 1`] = `
+exports[`Link Component Snapshot Tests renders with children content 1`] = `
 <DocumentFragment>
   <a
     class="container  "
-    href="javascript:void(0);"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  >
+    Click Here
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with custom className 1`] = `
+<DocumentFragment>
+  <a
+    class="container  custom-link"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with customProps 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-custom="customValue"
+    data-id="uniqueId"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with dataId prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-id="test-id"
+    data-test-id="test-id"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with default props 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with download attribute 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    download=""
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with href prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with rel attribute 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with target - _blank 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+    target="_blank"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with target - _self 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+    target="_self"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with title prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-title="Example Title"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and undefined urlData using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/profile/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and urlData as undefined using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and urlData using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/profile/[object Object]"
     rel="noopener noreferrer"
   />
 </DocumentFragment>

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -717,7 +717,8 @@ export class ToggleDropDown extends Component {
             iconClass,
             title,
             disableTitle = '',
-            isDisabled = false
+            isDisabled = false,
+            secondaryValue
           } = item;
           listIndex += 1;
           return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
@@ -747,6 +748,7 @@ export class ToggleDropDown extends Component {
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
             },
+            secondaryValue: secondaryValue,
             ...ListItemWithIconProps
           }) : /*#__PURE__*/React.createElement(ListItem, {
             key: listIndex,
@@ -772,6 +774,7 @@ export class ToggleDropDown extends Component {
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
             },
+            secondaryValue: secondaryValue,
             ...ListItemProps
           });
         }));
@@ -786,7 +789,8 @@ export class ToggleDropDown extends Component {
           title,
           needDivider,
           isDisabled = false,
-          disableTitle = ''
+          disableTitle = '',
+          secondaryValue
         } = item;
 
         if (!needDivider) {
@@ -824,6 +828,7 @@ export class ToggleDropDown extends Component {
             ariaSelected: selectedId === item[idName],
             ariaLabel: item[keyName]
           },
+          secondaryValue: secondaryValue,
           ...ListItemWithIconProps
         }) : /*#__PURE__*/React.createElement(ListItem, {
           key: listIndex,
@@ -849,6 +854,7 @@ export class ToggleDropDown extends Component {
             ariaSelected: selectedId === item[idName],
             ariaLabel: item[keyName]
           },
+          secondaryValue: secondaryValue,
           ...ListItemProps
         }));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {

package/es/list/ListStencils/ListStencils.js

@@ -11,10 +11,15 @@ import style from "./ListStencils.module.css";
 export default class ListStencils extends Component {
   render() {
     let {
-      listType
+      listType,
+      testId,
+      customId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[listType]}`
+      className: `${style.container} ${style[listType]}`,
+      "data-test-id": testId ? testId + '_listStencils' : null,
+      "data-id": customId ? customId + '_listStencils' : null,
+      "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       className: style.innerContainer
     }, /*#__PURE__*/React.createElement("div", {

package/es/list/ListStencils/__tests__/ListStencils.spec.js

@@ -8,4 +8,13 @@ describe('ListStencils', () => {
     } = render( /*#__PURE__*/React.createElement(ListStencils, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListStencils, {
+      testId: "ticket",
+      customId: "contact"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -1,8 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListStencils customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="container classic"
+    data-id="contact_listStencils"
+    data-test-id="ticket_listStencils"
+  >
+    <div
+      class="innerContainer"
+    >
+      <div
+        class="avatar"
+      >
+        <div
+          class="container circle clarge primary "
+        />
+      </div>
+      <div
+        class="detailsColumn"
+      >
+        <div
+          class="detailsInnerColumn"
+        >
+          <div
+            class="primaryRow"
+          >
+            <div
+              class="container rectangular default primary "
+            />
+          </div>
+          <div
+            class="secondaryRow"
+          >
+            <div
+              class="container rectangular medium primary "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`ListStencils rendering the defult props 1`] = `
 <DocumentFragment>
   <div
+    aria-hidden="true"
     class="container classic"
   >
     <div

package/es/list/ListStencils/props/propTypes.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
+  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
+  customId: PropTypes.string,
+  testId: PropTypes.string
 };