@zohodesk/dot 1.9.14 → 1.9.16

package/README.md

@@ -2,6 +2,28 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+
+# 1.9.16
+
+- **FormAction, Drawer.Footer**
+  - `testId`, `customId` - Props supported
+- **Lookup**
+  - `placement` property support. **center** placement introduced. Default is *topCenter*.
+  - `hasFreezeLayer` property supported for configurable freeze layer.
+  - `freezeLayerProps` and `velocityAnimationProps` are supported under `customProps` prop
+- **Section**
+  - `customProps` prop supported
+- **ModuleHeader**
+  - `renderTitleChildren`, `renderSecondaryContent`, `isDraggable`, `htmlId`, `customClass`, `customProps` - Props supported
+- **version2/AlertHeader**
+  - `isDraggable`, `customClass`, `renderSecondaryContent`, `renderRightActions` - Props supported
+
+# 1.9.15
+
+- **version2/lookup/AlertLookup/AlertLookup**
+  - Added `renderFooterNode` prop support using `renderNode`.
+  - Footer now renders custom content when `renderFooterNode` is provided; otherwise, existing submit/cancel footer behavior is preserved.
+
 # 1.9.14
 
 - Updated `@zohodesk-private/color-variable-preprocessor@1.3.3` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.

package/es/Drawer/Drawer.js

@@ -119,12 +119,16 @@ export class Footer extends React.Component {
       paddingLeftSize,
       paddingRightClass,
       children,
+      testId,
+      customId,
       size
     } = this.props;
     return /*#__PURE__*/React.createElement(FormAction, {
       size: size,
       paddingLeftSize: paddingLeftSize,
-      paddingRightClass: paddingRightClass
+      paddingRightClass: paddingRightClass,
+      customId: customId,
+      testId: testId
     }, children);
   }
 

package/es/Drawer/props/propTypes.js

@@ -27,6 +27,8 @@ export const Footer_propTypes = {
   children: PropTypes.node,
   paddingLeftSize: PropTypes.string,
   paddingRightClass: PropTypes.string,
+  testId: PropTypes.string,
+  customId: PropTypes.string,
   size: PropTypes.string
 };
 export const Drawer_propTypes = {

package/es/FormAction/FormAction.js

@@ -19,7 +19,9 @@ export default class FormAction extends React.Component {
       children,
       paddingLeftSize,
       paddingRightClass,
-      dataSelectorId
+      dataSelectorId,
+      testId,
+      customId
     } = this.props;
     let leftbuttonGroup = [],
         rightbuttonGroup = [],
@@ -42,11 +44,15 @@ export default class FormAction extends React.Component {
     let hasCenterChild = centerbuttonGroup.length > 0;
     return /*#__PURE__*/React.createElement("div", {
       className: style.wrapperDiv,
-      "data-selector-id": dataSelectorId
+      "data-selector-id": dataSelectorId,
+      "data-test-id": testId,
+      "data-id": customId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
       align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+      dataId: customId ? `${customId}_container` : undefined,
+      testId: testId ? `${testId}_container` : undefined,
       className: `
                         ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
 
@@ -54,16 +60,23 @@ export default class FormAction extends React.Component {
                     `
     }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
       flexible: hasRightChild ? true : false,
-      shrink: !hasRightChild && hasLeftChild ? true : false
+      shrink: !hasRightChild && hasLeftChild ? true : false,
+      dataId: customId ? `${customId}_leftElement` : undefined,
+      testId: testId ? `${testId}_leftElement` : undefined
     }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
       className: style.marginRight,
       key: index
     }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
-      shrink: hasRightChild && !hasLeftChild ? true : false
+      shrink: hasRightChild && !hasLeftChild ? true : false,
+      dataId: customId ? `${customId}_rightElement` : undefined,
+      testId: testId ? `${testId}_rightElement` : undefined
     }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
       className: style.marginRight,
       key: index
-    }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, {
+      dataId: customId ? `${customId}_centerElement` : undefined,
+      testId: testId ? `${testId}_centerElement` : undefined
+    }, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
       className: style.marginRight,
       key: index
     }, item)) : centerbuttonGroup[0]) : null));

package/es/FormAction/__tests__/FormAction.spec.js

@@ -1,11 +1,105 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import FormAction from "../FormAction";
+import { render, cleanup } from '@testing-library/react';
+import FormAction, { LeftSide, RightSide, Center } from "../FormAction";
 describe('FormAction', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  const sizes = ['large', 'medium', 'small'];
+  const paddingLeftSizes = ['large', 'medium', 'xmedium', 'small', 'xsmall'];
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(FormAction, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(paddingLeftSizes)('Render with paddingLeftSize as %s', paddingLeftSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, {
+      paddingLeftSize: paddingLeftSize
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with paddingRightClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, {
+      paddingRightClass: "customPaddingRight"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with LeftSide children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("button", null, "Save"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with RightSide children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("button", null, "Cancel"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with Center children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("button", null, "Submit"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with LeftSide, Center and RightSide children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("button", null, "Save")), /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("button", null, "Preview")), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("button", null, "Cancel"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in LeftSide', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("button", null, "Save"), /*#__PURE__*/React.createElement("button", null, "Draft"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in RightSide', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("button", null, "Cancel"), /*#__PURE__*/React.createElement("button", null, "Reset"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in Center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("button", null, "Submit"), /*#__PURE__*/React.createElement("button", null, "Preview"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with direct child (defaults to left group)', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement("button", null, "Standalone")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, {
+      customId: "form-action-customId",
+      testId: "form-action-testId"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("button", null, "Save")), /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("button", null, "Preview")), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("button", null, "Cancel"))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, {
+      dataSelectorId: "form-action-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });