@zohodesk/dot 1.5.0 → 1.5.1

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

@@ -1,6 +1,125 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessageBanner rendering the defult props 1`] = `
+exports[`MessageBanner rendering the customClass props 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_default customMessage flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_default  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the href props along with urlText props 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_default  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        />
+        <div
+          class="shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <a
+            class="container  link"
+            data-id="MessageBanner_link"
+            data-test-id="MessageBanner_link"
+            href="https://www.zoho.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            This is a HREF Message
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the onClose props via mock function 1`] = `
 <DocumentFragment>
   <div
     class="type_primary palette_default  flex rowdir"
@@ -25,9 +144,209 @@ exports[`MessageBanner rendering the defult props 1`] = `
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+    <div
+      class="close shrinkOff"
+      data-id="MessageBanner_close"
+      data-selector-id="box"
+      data-test-id="MessageBanner_close"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-close-e    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size35);"
         />
       </div>
     </div>
   </div>
 </DocumentFragment>
 `;
+
+exports[`MessageBanner rendering the palette of - blue 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_blue  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the palette of - default 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_default  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the palette of - white 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_white  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the type of - primary 1`] = `
+<DocumentFragment>
+  <div
+    class="type_primary palette_default  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`MessageBanner rendering the type of - secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="type_secondary palette_default  flex rowdir"
+    data-id="MessageBanner"
+    data-selector-id="messageBanner"
+    data-test-id="MessageBanner"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="message basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="This is a Message"
+        >
+          This is a Message
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/NewStar/NewStar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
-import style from "./NewStar.module.css";
+import style from './NewStar.module.css';
 export default class NewStar extends React.Component {
   render() {
     let {

package/es/NewStar/__tests__/NewStar.spec.js

@@ -1,11 +1,37 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import NewStar from "../NewStar";
+import NewStar from '../NewStar';
 describe('NewStar', () => {
-  test('rendering the defult props', () => {
+  const PALETTE = ['green', 'blue', 'yellow'];
+  const POSITION = ['topRight', 'topLeft', 'bottomRight', 'bottomLeft'];
+  test('rendering the default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(NewStar, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(PALETTE)('rendering the palette of - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(NewStar, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(POSITION)('rendering the position of - %s', position => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(NewStar, {
+      position: position
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(NewStar, {
+      customClass: "customStar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,6 +1,294 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NewStar rendering the defult props 1`] = `
+exports[`NewStar rendering the customClass props 1`] = `
+<DocumentFragment>
+  <div
+    class="star topRight customStar flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    class="star topRight  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the palette of - blue 1`] = `
+<DocumentFragment>
+  <div
+    class="star topRight  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  blue starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  blue starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  blue starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the palette of - green 1`] = `
+<DocumentFragment>
+  <div
+    class="star topRight  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  green starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  green starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  green starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the palette of - yellow 1`] = `
+<DocumentFragment>
+  <div
+    class="star topRight  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  yellow starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  yellow starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  yellow starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the position of - bottomLeft 1`] = `
+<DocumentFragment>
+  <div
+    class="star bottomLeft  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the position of - bottomRight 1`] = `
+<DocumentFragment>
+  <div
+    class="star bottomRight  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the position of - topLeft 1`] = `
+<DocumentFragment>
+  <div
+    class="star topLeft  flex rowdir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starOne  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starTwo  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-snippet_star  undefined starThree  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size10);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`NewStar rendering the position of - topRight 1`] = `
 <DocumentFragment>
   <div
     class="star topRight  flex rowdir"

package/es/PlusIcon/PlusIcon.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./PlusIcon.module.css";
-import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './PlusIcon.module.css';
+import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 export default class PlusIcon extends React.Component {
   constructor(props) {
     super(props);