@zohodesk/dot 1.9.15 → 1.9.17

package/lib/FormAction/FormAction.js

@@ -76,7 +76,9 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
           children = _this$props.children,
           paddingLeftSize = _this$props.paddingLeftSize,
           paddingRightClass = _this$props.paddingRightClass,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          testId = _this$props.testId,
+          customId = _this$props.customId;
       var leftbuttonGroup = [],
           rightbuttonGroup = [],
           centerbuttonGroup = [];
@@ -100,28 +102,39 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
       var hasCenterChild = centerbuttonGroup.length > 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _FormActionModule["default"].wrapperDiv,
-        "data-selector-id": dataSelectorId
+        "data-selector-id": dataSelectorId,
+        "data-test-id": testId,
+        "data-id": customId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
         align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
-        className: "\n                        ".concat("".concat(_FormActionModule["default"].footerParent, " ").concat(hasCenterChild ? '' : _FormActionModule["default"]["".concat(paddingLeftSize ? paddingLeftSize : size, "Padding")], " ").concat(paddingRightClass), "\n\n                        ", _FormActionModule["default"]["".concat(size, "Footer")], "\n                    ")
+        dataId: customId ? "".concat(customId, "_container") : undefined,
+        testId: testId ? "".concat(testId, "_container") : undefined,
+        className: "".concat(_FormActionModule["default"].footerParent, " ").concat(hasCenterChild ? '' : _FormActionModule["default"]["".concat(paddingLeftSize ? paddingLeftSize : size, "Padding")], " ").concat(_FormActionModule["default"]["".concat(size, "Footer")], " ").concat(paddingRightClass)
       }, hasLeftChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: hasRightChild ? true : false,
-        shrink: !hasRightChild && hasLeftChild ? true : false
+        shrink: !hasRightChild && hasLeftChild ? true : false,
+        dataId: customId ? "".concat(customId, "_leftElement") : undefined,
+        testId: testId ? "".concat(testId, "_leftElement") : undefined
       }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _FormActionModule["default"].marginRight,
           key: index
         }, item);
       }) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: hasRightChild && !hasLeftChild ? true : false
+        shrink: hasRightChild && !hasLeftChild ? true : false,
+        dataId: customId ? "".concat(customId, "_rightElement") : undefined,
+        testId: testId ? "".concat(testId, "_rightElement") : undefined
       }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _FormActionModule["default"].marginRight,
           key: index
         }, item);
-      }) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map(function (item, index) {
+      }) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        dataId: customId ? "".concat(customId, "_centerElement") : undefined,
+        testId: testId ? "".concat(testId, "_centerElement") : undefined
+      }, centerbuttonGroup.length > 1 ? centerbuttonGroup.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _FormActionModule["default"].marginRight,
           key: index

package/lib/FormAction/__tests__/FormAction.spec.js

@@ -1,18 +1,118 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _FormAction = _interopRequireDefault(require("../FormAction"));
+var _FormAction = _interopRequireWildcard(require("../FormAction"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('FormAction', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    (0, _react2.cleanup)();
+  });
+  var sizes = ['large', 'medium', 'small'];
+  var paddingLeftSizes = ['large', 'medium', 'xmedium', 'small', 'xsmall'];
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(sizes)('Render with size as %s', function (size) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      size: size
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(paddingLeftSizes)('Render with paddingLeftSize as %s', function (paddingLeftSize) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      paddingLeftSize: paddingLeftSize
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with paddingRightClass', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      paddingRightClass: "customPaddingRight"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with LeftSide children', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save")))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with RightSide children', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel")))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with Center children', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Submit")))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with LeftSide, Center and RightSide children', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save")), /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Preview")), /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel")))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in LeftSide', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save"), /*#__PURE__*/_react["default"].createElement("button", null, "Draft")))),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in RightSide', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", null, "Reset")))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in Center', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Submit"), /*#__PURE__*/_react["default"].createElement("button", null, "Preview")))),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with direct child (defaults to left group)', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement("button", null, "Standalone"))),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      customId: "form-action-customId",
+      testId: "form-action-testId"
+    }, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save")), /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Preview")), /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel")))),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      dataSelectorId: "form-action-dataSelectorId"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -14,6 +14,8 @@ var propTypes = {
   paddingLeftSize: _propTypes["default"].oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['large', 'medium', 'small']),
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;