@zohodesk/dot 1.7.9 → 1.7.11

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/Onboarding/Onboarding.js

@@ -205,6 +205,7 @@ const Onboarding = _ref => {
     const {
       imageSource,
       videoSource,
+      mediaElement,
       heading,
       description,
       hasVideoPlayButton = false,
@@ -229,8 +230,8 @@ const Onboarding = _ref => {
       $ui_alignItems: "center",
       $flag_fullsize: true
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : null}`
-    }, renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
+      className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : ''}`
+    }, mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",

package/es/Onboarding/__tests__/Onboarding.spec.js

@@ -425,4 +425,16 @@ describe('Onboarding', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering data with mediaElement', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Onboarding, {
+      sliderData: [{
+        tabName: "description",
+        description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.",
+        mediaElement: /*#__PURE__*/React.createElement("div", null, "Custom Element")
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -40,7 +40,7 @@ exports[`Onboarding rendering  data of customprops for Secondarybuttonprops  1`]
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -159,7 +159,7 @@ exports[`Onboarding rendering  data of customprops for descriptionProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -344,7 +344,7 @@ exports[`Onboarding rendering  data of customprops for headingProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -457,7 +457,7 @@ exports[`Onboarding rendering  data of customprops for primarybuttonprops  1`] =
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -645,7 +645,7 @@ exports[`Onboarding rendering  data of customprops for secondaryButtonLinkProps
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -900,7 +900,7 @@ exports[`Onboarding rendering  data of image without hasVideoPlayButton 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -1015,7 +1015,7 @@ exports[`Onboarding rendering  data of videoSource  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <video
                   autoplay=""
@@ -1136,7 +1136,7 @@ exports[`Onboarding rendering data of SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1541,7 +1541,7 @@ exports[`Onboarding rendering data of primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1651,7 +1651,7 @@ exports[`Onboarding rendering data of secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1771,7 +1771,7 @@ exports[`Onboarding rendering data of sliderData with heading and description 1`
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1887,7 +1887,7 @@ exports[`Onboarding rendering data of sliderData with image  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -2002,7 +2002,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2032,7 +2032,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2233,7 +2233,7 @@ exports[`Onboarding rendering data with hasExpandedButton - hasSecondaryButton a
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2352,7 +2352,7 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2430,6 +2430,123 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
 </DocumentFragment>
 `;
 
+exports[`Onboarding rendering data with mediaElement 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead "
+              >
+                <div>
+                  Custom Element
+                </div>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+                data-title="Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
+              >
+                Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
 <DocumentFragment>
   <div
@@ -2470,7 +2587,7 @@ exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2793,7 +2910,7 @@ exports[`Onboarding rendering data without primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2892,7 +3009,7 @@ exports[`Onboarding rendering data without secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -3206,7 +3323,7 @@ exports[`Onboarding rendering with customId - hasSecondaryButtonLink  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div

package/es/Onboarding/props/propTypes.js

@@ -26,6 +26,7 @@ export const propTypes = {
       link: PropTypes.string,
       videoFormat: PropTypes.string
     }),
+    mediaElement: PropTypes.node,
     description: PropTypes.string,
     hasPrimaryButton: PropTypes.bool,
     hasVideoPlayButton: PropTypes.bool,

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();
+  });
 });