@zohodesk/dot 1.7.10 → 1.7.12

package/lib/FreezeLayer/FreezeLayer.js

@@ -39,7 +39,10 @@ function FreezeLayer(props) {
       forwardRef = props.forwardRef,
       isSvgMask = props.isSvgMask,
       needAutoZindex = props.needAutoZindex,
-      customStyle = props.customStyle;
+      customStyle = props.customStyle,
+      onAnimateEnter = props.onAnimateEnter,
+      postAnimateStyles = props.postAnimateStyles,
+      onAnimateExit = props.onAnimateExit;
   var finalStyle = (0, _utils.mergeStyle)(_FreezeLayerModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
@@ -77,7 +80,10 @@ function FreezeLayer(props) {
     component: _Layout.Container,
     alignBox: "row",
     align: align,
-    dataId: "reactFreezeLayer"
+    dataId: "reactFreezeLayer",
+    onEnterComplete: onAnimateEnter,
+    postEnterStyles: postAnimateStyles,
+    onExitComplete: onAnimateExit
   }, children) : isSvgMask ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: align,

package/lib/FreezeLayer/props/propTypes.js

@@ -24,7 +24,10 @@ var propTypes = {
   palette: _propTypes["default"].oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: _propTypes["default"].bool,
   customStyle: _propTypes["default"].object,
-  zIndex: _propTypes["default"].oneOf(['3', '5', '7', '10'])
+  zIndex: _propTypes["default"].oneOf(['3', '5', '7', '10']),
+  onAnimateEnter: _propTypes["default"].func,
+  postAnimateStyles: _propTypes["default"].object,
+  onAnimateExit: _propTypes["default"].func
 };
 exports.propTypes = propTypes;
 var _default = propTypes;

package/lib/Link/__tests__/Link.spec.js

@@ -6,12 +6,138 @@ var _react2 = require("@testing-library/react");
 
 var _Link = _interopRequireDefault(require("../Link"));
 
+var _LinkContext = _interopRequireDefault(require("../LinkContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Link', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null)),
-        asFragment = _render.asFragment;
+describe('Link Component Snapshot Tests', function () {
+  var targetOptions = ['_blank', '_self'];
+  var mockContextOptions = {
+    options: {
+      isLink: true,
+      constructURL: jest.fn(function (urlName, urlData) {
+        return "https://zoho.com/".concat(urlName, "/").concat(urlData || '');
+      })
+    }
+  };
+
+  var renderWithProvider = function renderWithProvider(component) {
+    return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_LinkContext["default"].Provider, {
+      value: mockContextOptions
+    }, component));
+  };
+
+  test('renders with default props', function () {
+    var _renderWithProvider = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], null)),
+        asFragment = _renderWithProvider.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with children content', function () {
+    var _renderWithProvider2 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Click Here")),
+        asFragment = _renderWithProvider2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href prop', function () {
+    var _renderWithProvider3 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      href: "https://zoho.com"
+    })),
+        asFragment = _renderWithProvider3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(targetOptions)('renders with target - %s', function (target) {
+    var _renderWithProvider4 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      target: target
+    })),
+        asFragment = _renderWithProvider4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData using provider', function () {
+    var _renderWithProvider5 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      urlName: "profile",
+      urlData: {
+        id: 123
+      }
+    })),
+        asFragment = _renderWithProvider5.asFragment;
+
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', {
+      id: 123
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and undefined urlData using provider', function () {
+    var _renderWithProvider6 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      urlName: "profile"
+    })),
+        asFragment = _renderWithProvider6.asFragment;
+
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData as undefined using provider', function () {
+    var _renderWithProvider7 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      urlName: undefined,
+      urlData: undefined
+    })),
+        asFragment = _renderWithProvider7.asFragment;
+
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith(undefined, undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with custom className', function () {
+    var _renderWithProvider8 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      className: "custom-link"
+    })),
+        asFragment = _renderWithProvider8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with title prop', function () {
+    var _renderWithProvider9 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      title: "Example Title"
+    })),
+        asFragment = _renderWithProvider9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with download attribute', function () {
+    var _renderWithProvider10 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      download: true
+    })),
+        asFragment = _renderWithProvider10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with rel attribute', function () {
+    var _renderWithProvider11 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      rel: "noopener noreferrer"
+    })),
+        asFragment = _renderWithProvider11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with dataId prop', function () {
+    var _renderWithProvider12 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      dataId: "test-id"
+    })),
+        asFragment = _renderWithProvider12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', function () {
+    var customProps = {
+      'data-custom': 'customValue',
+      'data-id': 'uniqueId'
+    };
+
+    var _renderWithProvider13 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      customProps: customProps
+    })),
+        asFragment = _renderWithProvider13.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

package/lib/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/lib/list/ListStencils/ListStencils.js

@@ -57,9 +57,15 @@ var ListStencils = /*#__PURE__*/function (_Component) {
   _createClass(ListStencils, [{
     key: "render",
     value: function render() {
-      var listType = this.props.listType;
+      var _this$props = this.props,
+          listType = _this$props.listType,
+          testId = _this$props.testId,
+          customId = _this$props.customId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListStencilsModule["default"].container, " ").concat(_ListStencilsModule["default"][listType])
+        className: "".concat(_ListStencilsModule["default"].container, " ").concat(_ListStencilsModule["default"][listType]),
+        "data-test-id": testId ? testId + '_listStencils' : null,
+        "data-id": customId ? customId + '_listStencils' : null,
+        "aria-hidden": "true"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _ListStencilsModule["default"].innerContainer
       }, /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -15,4 +15,13 @@ describe('ListStencils', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('customId and testId', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListStencils["default"], {
+      testId: "ticket",
+      customId: "contact"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/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/lib/list/ListStencils/props/propTypes.js

@@ -10,6 +10,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
-  listType: _propTypes["default"].oneOf(['classic', 'compact', 'superCompact'])
+  listType: _propTypes["default"].oneOf(['classic', 'compact', 'superCompact']),
+  customId: _propTypes["default"].string,
+  testId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -59,13 +59,13 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
-    "@zohodesk-private/css-variable-migrator": "^1.0.7",
+    "@zohodesk-private/css-variable-migrator": "^1.0.8",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.4",
-    "@zohodesk/components": "1.2.63",
+    "@zohodesk/components": "1.3.2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.74",
+    "@zohodesk/icons": "1.0.78",
     "@zohodesk/layout": "^3.1.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
@@ -77,8 +77,8 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/components": "1.2.63",
-    "@zohodesk/icons": "1.0.74",
+    "@zohodesk/components": "1.3.2",
+    "@zohodesk/icons": "1.0.78",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",