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

package/lib/Drawer/Drawer.js

@@ -345,11 +345,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           subDrawerActive = _this$props5.subDrawerActive,
           customClass = _this$props5.customClass,
           needAutoZindex = _this$props5.needAutoZindex,
-          innerPortalName = _this$props5.innerPortalName,
-          onParentAnimateComplete = _this$props5.onParentAnimateComplete,
-          onChildAnimateComplete = _this$props5.onChildAnimateComplete,
-          postAnimateParentStyles = _this$props5.postAnimateParentStyles,
-          postAnimateChildStyles = _this$props5.postAnimateChildStyles;
+          innerPortalName = _this$props5.innerPortalName;
       var zindexNumber = isActive ? this.getNextIndex() : '';
       return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
@@ -365,11 +361,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           palette: palette,
           forwardRef: forwardRef,
           customClass: customClass,
-          needAutoZindex: needAutoZindex,
-          onParentAnimateComplete: onParentAnimateComplete,
-          onChildAnimateComplete: onChildAnimateComplete,
-          postAnimateParentStyles: postAnimateParentStyles,
-          postAnimateChildStyles: postAnimateChildStyles
+          needAutoZindex: needAutoZindex
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Drawer/__tests__/Content.spec.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Drawer = require("../Drawer");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var paddingSizes = ['small', 'medium', 'large'];
+var visibilityStates = [true, false];
+describe('Content Component Snapshots', function () {
+  test.each(paddingSizes)('renders Content with paddingSize - %s', function (paddingSize) {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Content, {
+      paddingSize: paddingSize
+    }, "Content")),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(paddingSizes.flatMap(function (paddingSize) {
+    return visibilityStates.map(function (isVisible) {
+      return [paddingSize, isVisible];
+    });
+  }))('renders Content with paddingSize - %s and isVisible - %s', function (paddingSize, isVisible) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Content, {
+      paddingSize: paddingSize,
+      isVisible: isVisible
+    }, "Content")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Drawer/__tests__/Drawer.spec.js

@@ -8,19 +8,146 @@ var _Drawer = _interopRequireDefault(require("../Drawer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Drawer', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], null)),
+var sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
+var palettes = ['dark', 'default', 'darkLight', 'plain'];
+var subDrawerSizes = ['xsmall', 'small', 'medium'];
+describe('Drawer Component Snapshots', function () {
+  test('renders with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isActive: true
+    })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the isActive true', function () {
+  test.each(sizes)('renders Drawer with size - %s', function (size) {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
-      isActive: true
+      isActive: true,
+      size: size
     })),
         asFragment = _render2.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(palettes)('renders Drawer with palette - %s', function (palette) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isActive: true,
+      palette: palette
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(subDrawerSizes)('renders Drawer with subDrawerSize - %s', function (subDrawerSize) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isActive: true,
+      subDrawerSize: subDrawerSize,
+      subDrawerActive: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with custom className', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isActive: true,
+      customClass: "custom-drawer"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with subDrawerActive set to true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      subDrawerActive: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with isActive set to true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isActive: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with needAutoZindex set to true', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      needAutoZindex: true
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with needFocusScope set to true', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      needFocusScope: true
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with flexible set to true', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      flexible: true
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with isIconBold set to true', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isIconBold: true
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with isBoxIcon set to true', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isBoxIcon: true
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with needFreeze set to true', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      needFreeze: true
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', function () {
+    var customProps = {
+      'aria-label': 'Custom Drawer',
+      'data-custom': 'customValue'
+    };
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      isActive: true,
+      customProps: customProps
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with all options combined', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      size: "medium",
+      palette: "default",
+      subDrawerActive: true,
+      subDrawerSize: "small",
+      customClass: "combined-drawer",
+      isActive: true,
+      needFreeze: true,
+      needAutoZindex: true
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Drawer/__tests__/Footer.spec.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Drawer = require("../Drawer");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
+var variants = ['primary', 'secondary', 'tertiary', 'default'];
+describe('Footer Component Snapshots', function () {
+  test.each(sizes)('renders Footer with size - %s', function (size) {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Footer, {
+      size: size
+    }, "Footer Content")),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(variants)('renders Footer with variant - %s', function (variant) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Footer, {
+      variant: variant
+    }, "Footer Content")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders Footer with size - %s and all variants', function (size) {
+    variants.forEach(function (variant) {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Footer, {
+        size: size,
+        variant: variant
+      }, "Footer Content")),
+          asFragment = _render3.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

package/lib/Drawer/__tests__/Header.spec.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Drawer = require("../Drawer");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var paddingSizes = ['small', 'medium', 'large']; // describe('Header Component', () => {
+//   describe('Snapshots', () => {
+//     test('renders with default props', () => {
+//       const { asFragment } = render(<Header />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test.each(paddingSizes)('renders Header with paddingSize - %s', (paddingSize) => {
+//       const { asFragment } = render(<Header paddingSize={paddingSize} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with flexible set to true', () => {
+//       const { asFragment } = render(<Header flexible />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with isIconBold set to true', () => {
+//       const { asFragment } = render(<Header isIconBold />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with isBoxIcon set to true', () => {
+//       const { asFragment } = render(<Header isBoxIcon />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with custom className', () => {
+//       const { asFragment } = render(<Header className="custom-header" />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with title', () => {
+//       const { asFragment } = render(<Header title="Header Title" />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with closeTitle', () => {
+//       const { asFragment } = render(<Header closeTitle="Close Header" />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with iconName and iconSize', () => {
+//       const { asFragment } = render(<Header iconName="ZD-icon" iconSize="24" />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with getChildren function', () => {
+//       const { asFragment } = render(<Header getChildren={() => <div>Child Content</div>} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with getTitleChildren function', () => {
+//       const { asFragment } = render(<Header getTitleChildren={() => <div>Title Child</div>} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('renders Header with dataId', () => {
+//       const { asFragment } = render(<Header dataId="header-id" />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//   });
+//   describe('Interactions', () => {
+//     test('calls onClose handler when close button is clicked', () => {
+//       const mockOnClose = jest.fn();
+//       const { getByRole } = render(<Header onClose={mockOnClose} />);
+//       const closeButton = getByRole('button', { name: /close/i });
+//       fireEvent.click(closeButton);
+//       expect(mockOnClose).toHaveBeenCalledTimes(1);
+//     });
+//     test('calls onIconClick handler when icon is clicked', () => {
+//       const mockOnIconClick = jest.fn();
+//       const { getByRole } = render(<Header iconName="ZD-icon" onIconClick={mockOnIconClick} />);
+//       const iconButton = getByRole('button');
+//       fireEvent.click(iconButton);
+//       expect(mockOnIconClick).toHaveBeenCalledTimes(1);
+//     });
+//   });
+// });
+
+describe('Header Component - Title Prop Combinations', function () {
+  test('renders with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title only', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and close button', function () {
+    var mockOnClose = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      onClose: mockOnClose
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and icon', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, icon, and close button', function () {
+    var mockOnClose = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24",
+      onClose: mockOnClose
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and custom className', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      className: "custom-header"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and getTitleChildren function', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      getTitleChildren: function getTitleChildren() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Title Child");
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, icon, and getTitleChildren function', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24",
+      getTitleChildren: function getTitleChildren() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Title Child");
+      }
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, close button, and getTitleChildren function', function () {
+    var mockOnClose = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      onClose: mockOnClose,
+      getTitleChildren: function getTitleChildren() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Title Child");
+      }
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, icon, close button, and getTitleChildren function', function () {
+    var mockOnClose = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Drawer.Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24",
+      onClose: mockOnClose,
+      getTitleChildren: function getTitleChildren() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Title Child");
+      }
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Drawer/__tests__/__snapshots__/Content.spec.js.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Content Component Snapshots renders Content with paddingSize - large 1`] = `
+<DocumentFragment>
+  <div
+    class="largeContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - large and isVisible - false 1`] = `
+<DocumentFragment>
+  <div
+    class="largeContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - large and isVisible - true 1`] = `
+<DocumentFragment>
+  <div
+    class="largeContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - medium 1`] = `
+<DocumentFragment>
+  <div
+    class="mediumContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - medium and isVisible - false 1`] = `
+<DocumentFragment>
+  <div
+    class="mediumContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - medium and isVisible - true 1`] = `
+<DocumentFragment>
+  <div
+    class="mediumContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - small 1`] = `
+<DocumentFragment>
+  <div
+    class="smallContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - small and isVisible - false 1`] = `
+<DocumentFragment>
+  <div
+    class="smallContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Content Component Snapshots renders Content with paddingSize - small and isVisible - true 1`] = `
+<DocumentFragment>
+  <div
+    class="smallContentPadding grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;