@zohodesk/dot 1.9.15 → 1.9.17

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,28 +44,35 @@ 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,
-      className: `
-                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
-
-                        ${style[`${size}Footer`]}
-                    `
+      dataId: customId ? `${customId}_container` : undefined,
+      testId: testId ? `${testId}_container` : undefined,
+      className: `${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${style[`${size}Footer`]} ${paddingRightClass}`
     }, 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();
+  });
 });

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

@@ -1,16 +1,491 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormAction rendering the defult props 1`] = `
+exports[`FormAction Render with Center children 1`] = `
 <DocumentFragment>
   <div
     class="wrapperDiv"
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Submit
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with LeftSide children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="flexible basis_zero noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Save
+        </button>
+      </div>
+      <div
+        class="noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Cancel
+        </button>
+      </div>
+      <div
+        class="noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Preview
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-                        mediumFooter
-                     flex rowdir"
+exports[`FormAction Render with RightSide children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row justifyContent_end footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-id="form-action-customId"
+    data-selector-id="formAction"
+    data-test-id="form-action-testId"
+  >
+    <div
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      data-id="form-action-customId_container"
+      data-selector-id="container"
+      data-test-id="form-action-testId_container"
+    >
+      <div
+        class="flexible basis_zero noShrink"
+        data-id="form-action-customId_leftElement"
+        data-selector-id="box"
+        data-test-id="form-action-testId_leftElement"
+      >
+        <button>
+          Save
+        </button>
+      </div>
+      <div
+        class="noShrink"
+        data-id="form-action-customId_rightElement"
+        data-selector-id="box"
+        data-test-id="form-action-testId_rightElement"
+      >
+        <button>
+          Cancel
+        </button>
+      </div>
+      <div
+        class="noShrink"
+        data-id="form-action-customId_centerElement"
+        data-selector-id="box"
+        data-test-id="form-action-testId_centerElement"
+      >
+        <button>
+          Preview
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="form-action-dataSelectorId"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with direct child (defaults to left group) 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Standalone
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with multiple children in Center 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="marginRight"
+        >
+          <button>
+            Submit
+          </button>
+        </div>
+        <div
+          class="marginRight"
+        >
+          <button>
+            Preview
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with multiple children in LeftSide 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="marginRight"
+        >
+          <button>
+            Save
+          </button>
+        </div>
+        <div
+          class="marginRight"
+        >
+          <button>
+            Draft
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with multiple children in RightSide 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row justifyContent_end footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="marginRight"
+        >
+          <button>
+            Cancel
+          </button>
+        </div>
+        <div
+          class="marginRight"
+        >
+          <button>
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as large 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent largePadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as medium 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as small 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent smallPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent xmediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as xsmall 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent xsmallPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingRightClass 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter customPaddingRight"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with size as large 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent largePadding largeFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with size as medium 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent mediumPadding mediumFooter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with size as small 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="flex row footerParent smallPadding smallFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/es/FormAction/props/propTypes.js

@@ -4,5 +4,7 @@ export const propTypes = {
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small']),
+  testId: PropTypes.string,
+  customId: PropTypes.string,
   dataSelectorId: PropTypes.string
 };

package/es/FreezeLayer/css/cssJSLogic.js

@@ -12,9 +12,9 @@ export default function cssJSLogic({
   let zIndexClass = `index${zIndex}`;
   let freezeClass = compileClassNames({
     [style.container]: true,
-    [customClass]: !!customClass,
     [style[zIndexClass]]: !!zIndex,
-    [style[palette]]: !isSvgMask && !!palette
+    [style[palette]]: !isSvgMask && !!palette,
+    [customClass]: !!customClass
   });
   return {
     freezeClass

package/es/IconButton/IconButton.js

@@ -119,7 +119,7 @@ export default class IconButton extends React.Component {
       tourId: tourId,
       align: "both",
       isCover: false,
-      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${className || ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${isActive ? style[`${palette}_active`] : style[palette]} ${className}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       onClick: this.triggerClick,
@@ -137,7 +137,7 @@ export default class IconButton extends React.Component {
       isBold: isBold,
       size: iconSize,
       name: iconName,
-      iconClass: `${iconClass} ${style.icon_button_center}`
+      iconClass: `${style.icon_button_center} ${iconClass}`
     }) : null, children ? children : null));
   }