@zohodesk/dot 1.0.0-temp-193.8 → 1.0.0-temp-193.9

package/es/Separator/props/defaultProps.js

@@ -1,7 +1,6 @@
 export const defaultProps = {
   palette: 'default',
   type: 'dot',
-  wrap: false,
   shrink: false,
   aligndirection: 'row',
   customClass: {

package/es/Separator/props/propTypes.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  aligndirection: PropTypes.string,
+  aligndirection: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   children: PropTypes.any,
   palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
   shrink: PropTypes.bool,
   type: PropTypes.oneOf(['dot', 'slash', 'arrow', 'comma', 'none']),
-  wrap: PropTypes.bool,
+  wrap: PropTypes.oneOf(['wrap', 'wrap-reverse', 'nowrap']),
   customClass: PropTypes.object,
   customSeparatorType: PropTypes.string
 };

package/es/v1/DotProvider/DotProvider.js

@@ -21,9 +21,10 @@ const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const wrapperElementRef = useRef(null);
-  const element = useMemo(() => {
-    return typeof method_providerRef === 'function' ? method_providerRef() : Element !== React.Fragment && isValidElement ? wrapperElementRef.current : document.documentElement;
-  }, [method_providerRef, Element, wrapperElementRef.current]);
+  let element = typeof method_providerRef === 'function' && method_providerRef();
+  element = useMemo(() => {
+    return element ? element : Element !== React.Fragment && isValidElement ? wrapperElementRef.current : document.documentElement;
+  }, [element, Element, wrapperElementRef.current]);
   const getEleRef = useCallback(ele => {
     wrapperElementRef.current = ele;
 

package/lib/MessageBanner/__tests__/MessageBanner.spec.js

@@ -9,10 +9,60 @@ var _MessageBanner = _interopRequireDefault(require("../MessageBanner"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('MessageBanner', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], null)),
+  var PALETTE = ['default', 'blue', 'white'];
+  var TYPE = ['primary', 'secondary'];
+  var mockOnClose = jest.fn();
+  test('rendering the default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], {
+      message: "This is a Message"
+    })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the href props along with urlText props', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], {
+      href: "https://www.zoho.com/",
+      urlText: "This is a HREF Message"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PALETTE)('rendering the palette of - %s', function (palette) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], {
+      message: "This is a Message",
+      palette: palette
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(TYPE)('rendering the type of - %s', function (type) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], {
+      message: "This is a Message",
+      type: type
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass props', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], {
+      message: "This is a Message",
+      customClass: "customMessage"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the onClose props via mock function', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MessageBanner["default"], {
+      message: "This is a Message",
+      onClose: mockOnClose
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/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/lib/NewStar/__tests__/NewStar.spec.js

@@ -9,10 +9,36 @@ var _NewStar = _interopRequireDefault(require("../NewStar"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('NewStar', function () {
-  test('rendering the defult props', function () {
+  var PALETTE = ['green', 'blue', 'yellow'];
+  var POSITION = ['topRight', 'topLeft', 'bottomRight', 'bottomLeft'];
+  test('rendering the default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NewStar["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(PALETTE)('rendering the palette of - %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NewStar["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(POSITION)('rendering the position of - %s', function (position) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NewStar["default"], {
+      position: position
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass props', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NewStar["default"], {
+      customClass: "customStar"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });