@zohodesk/dot 1.7.10 → 1.7.12

package/es/Drawer/Drawer.js

@@ -233,7 +233,10 @@ export default class Drawer extends React.Component {
       subDrawerActive,
       customClass,
       needAutoZindex,
-      innerPortalName
+      innerPortalName,
+      onAnimateEnter,
+      postAnimateStyles,
+      onAnimateExit
     } = this.props;
     let zindexNumber = isActive ? this.getNextIndex() : '';
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -252,7 +255,10 @@ export default class Drawer extends React.Component {
         palette: palette,
         forwardRef: forwardRef,
         customClass: customClass,
-        needAutoZindex: needAutoZindex
+        needAutoZindex: needAutoZindex,
+        onAnimateEnter: onAnimateEnter,
+        postAnimateStyles: postAnimateStyles,
+        onAnimateExit: onAnimateExit
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Container, {

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Content } from "../Drawer";
+const paddingSizes = ['small', 'medium', 'large'];
+const visibilityStates = [true, false];
+describe('Content Component Snapshots', () => {
+  test.each(paddingSizes)('renders Content with paddingSize - %s', paddingSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Content, {
+      paddingSize: paddingSize
+    }, "Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(paddingSizes.flatMap(paddingSize => visibilityStates.map(isVisible => [paddingSize, isVisible])))('renders Content with paddingSize - %s and isVisible - %s', (paddingSize, isVisible) => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Content, {
+      paddingSize: paddingSize,
+      isVisible: isVisible
+    }, "Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Drawer/__tests__/Drawer.spec.js

@@ -1,14 +1,64 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Drawer from "../Drawer";
-describe('Drawer', () => {
-  test('rendering the defult props', () => {
+const sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
+const palettes = ['dark', 'default', 'darkLight', 'plain'];
+const subDrawerSizes = ['xsmall', 'small', 'medium'];
+describe('Drawer Component Snapshots', () => {
+  test('renders with default props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Drawer, null));
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders Drawer with size - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('renders Drawer with palette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(subDrawerSizes)('renders Drawer with subDrawerSize - %s', subDrawerSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true,
+      subDrawerSize: subDrawerSize,
+      subDrawerActive: true
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the isActive true', () => {
+  test('renders with custom className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true,
+      customClass: "custom-drawer"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with subDrawerActive set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      subDrawerActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with isActive set to true', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Drawer, {
@@ -16,4 +66,80 @@ describe('Drawer', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders Drawer with needAutoZindex set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      needAutoZindex: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with needFocusScope set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      needFocusScope: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with flexible set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      flexible: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with isIconBold set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isIconBold: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with isBoxIcon set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isBoxIcon: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with needFreeze set to true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      needFreeze: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', () => {
+    const customProps = {
+      'aria-label': 'Custom Drawer',
+      'data-custom': 'customValue'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true,
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Drawer with all options combined', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Drawer, {
+      size: "medium",
+      palette: "default",
+      subDrawerActive: true,
+      subDrawerSize: "small",
+      customClass: "combined-drawer",
+      isActive: true,
+      needFreeze: true,
+      needAutoZindex: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Footer } from "../Drawer";
+const sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
+const variants = ['primary', 'secondary', 'tertiary', 'default'];
+describe('Footer Component Snapshots', () => {
+  test.each(sizes)('renders Footer with size - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Footer, {
+      size: size
+    }, "Footer Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(variants)('renders Footer with variant - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Footer, {
+      variant: variant
+    }, "Footer Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('renders Footer with size - %s and all variants', size => {
+    variants.forEach(variant => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Footer, {
+        size: size,
+        variant: variant
+      }, "Footer Content"));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Header } from "../Drawer";
+const 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', () => {
+  test('renders with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title only', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and close button', () => {
+    const mockOnClose = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      onClose: mockOnClose
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, icon, and close button', () => {
+    const mockOnClose = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24",
+      onClose: mockOnClose
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and custom className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      className: "custom-header"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title and getTitleChildren function', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, icon, and getTitleChildren function', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24",
+      getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, close button, and getTitleChildren function', () => {
+    const mockOnClose = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      onClose: mockOnClose,
+      getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders Header with title, icon, close button, and getTitleChildren function', () => {
+    const mockOnClose = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Header, {
+      title: "Header Title",
+      iconName: "ZD-icon",
+      iconSize: "24",
+      onClose: mockOnClose,
+      getTitleChildren: () => /*#__PURE__*/React.createElement("div", null, "Title Child")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/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>
+`;