@zohodesk/dot 1.2.3 → 1.3.0-temp-158

package/es/v1/svg/SnippetIcon.js

@@ -1,34 +1,27 @@
 import React from 'react';
 import { SnippetIcon_defaultProps } from '../../svg/props/defaultProps';
 import { SnippetIcon_propTypes } from '../../svg/props/propTypes';
-import SVG from '@zohodesk/svg/lib/SVG/SVG';
-export default class SnippetIcon extends React.Component {
-  render() {
-    let {
-      isRender,
-      isSymbol,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(SVG, {
-      viewBox: "0 0 31 32",
-      name: "SnippetIcon",
-      isRender: isRender,
-      isSymbol: isSymbol,
-      className: className
-    }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-      d: "M14.4,8.2L15.6,9L16,8.4l-1-0.7l2.5-3.7L11.5,0L8.9,3.8L7.9,3L7.6,3.6l1.2,0.8c-2.3,3-5.9,0.8-6,0.7L2.3,4.9L0,23.8 l16.6-9.3l-0.4-0.3C15.9,13.9,12.6,11.5,14.4,8.2L14.4,8.2z M1.5,22l5.2-7.7c0.3,0.1,0.6,0.2,0.9,0.2c1.2,0,2.1-0.9,2.2-2.1 c0-1.2-0.9-2.1-2.1-2.2c-1.2,0-2.1,0.9-2.2,2.1c0,0.6,0.2,1.2,0.7,1.6L1,21.6L2.8,6c1.2,0.6,4.4,1.7,6.5-1.1l4.5,3 c-1.8,3,0.4,5.6,1.4,6.5L1.5,22L1.5,22z M6.7,13.6c-0.7-0.4-0.8-1.3-0.4-2s1.3-0.8,2-0.4c0.7,0.4,0.8,1.3,0.4,2 c-0.2,0.3-0.5,0.5-0.9,0.6C7.5,13.9,7.1,13.8,6.7,13.6L6.7,13.6z"
-    }), /*#__PURE__*/React.createElement("path", {
-      style: {
-        fill: '#03A3FE'
-      },
-      d: "M30.9,25c-4.9,0.7-5.4,1.2-5.9,6.7c-0.6-5.4-1.1-6-6.1-6.5c4.9-0.7,5.4-1.2,5.9-6.7 C25.4,23.9,25.9,24.5,30.9,25z M30.3,8.2c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C25.4,7.1,25.8,7.6,30.3,8.2z M16.2,25.7c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C11.3,24.6,11.7,25.1,16.2,25.7z"
-    })));
-  }
-
+import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+export default function SnippetIcon(props) {
+  let {
+    isRender,
+    isSymbol,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 31 32",
+    name: "SnippetIcon",
+    isRender: isRender,
+    isSymbol: isSymbol,
+    className: className
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M14.4,8.2L15.6,9L16,8.4l-1-0.7l2.5-3.7L11.5,0L8.9,3.8L7.9,3L7.6,3.6l1.2,0.8c-2.3,3-5.9,0.8-6,0.7L2.3,4.9L0,23.8 l16.6-9.3l-0.4-0.3C15.9,13.9,12.6,11.5,14.4,8.2L14.4,8.2z M1.5,22l5.2-7.7c0.3,0.1,0.6,0.2,0.9,0.2c1.2,0,2.1-0.9,2.2-2.1 c0-1.2-0.9-2.1-2.1-2.2c-1.2,0-2.1,0.9-2.2,2.1c0,0.6,0.2,1.2,0.7,1.6L1,21.6L2.8,6c1.2,0.6,4.4,1.7,6.5-1.1l4.5,3 c-1.8,3,0.4,5.6,1.4,6.5L1.5,22L1.5,22z M6.7,13.6c-0.7-0.4-0.8-1.3-0.4-2s1.3-0.8,2-0.4c0.7,0.4,0.8,1.3,0.4,2 c-0.2,0.3-0.5,0.5-0.9,0.6C7.5,13.9,7.1,13.8,6.7,13.6L6.7,13.6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: {
+      fill: '#03A3FE'
+    },
+    d: "M30.9,25c-4.9,0.7-5.4,1.2-5.9,6.7c-0.6-5.4-1.1-6-6.1-6.5c4.9-0.7,5.4-1.2,5.9-6.7 C25.4,23.9,25.9,24.5,30.9,25z M30.3,8.2c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C25.4,7.1,25.8,7.6,30.3,8.2z M16.2,25.7c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C11.3,24.6,11.7,25.1,16.2,25.7z"
+  })));
 }
 SnippetIcon.propTypes = SnippetIcon_propTypes;
-SnippetIcon.defaultProps = SnippetIcon_defaultProps; // if (__DOCS__) {
-//   SnippetIcon.docs = {
-//     componentGroup: 'SVG'
-//   };
-// }
+SnippetIcon.defaultProps = SnippetIcon_defaultProps;

package/es/v1/svg/TemplateIcon.js

@@ -1,35 +1,28 @@
 import React from 'react';
 import { TemplateIcon_defaultProps } from '../../svg/props/defaultProps';
 import { TemplateIcon_propTypes } from '../../svg/props/propTypes';
-import SVG from '@zohodesk/svg/lib/SVG/SVG';
-export default class TemplateIcon extends React.Component {
-  render() {
-    let {
-      isRender,
-      isSymbol,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(SVG, {
-      viewBox: "0 0 40 40",
-      name: "TemplateIcon",
-      isRender: isRender,
-      isSymbol: isSymbol,
-      className: className
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
-    }));
-  }
-
+import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+export default function TemplateIcon(props) {
+  let {
+    isRender,
+    isSymbol,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 40 40",
+    name: "TemplateIcon",
+    isRender: isRender,
+    isSymbol: isSymbol,
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
+  }));
 }
 TemplateIcon.propTypes = TemplateIcon_propTypes;
-TemplateIcon.defaultProps = TemplateIcon_defaultProps; // if (__DOCS__) {
-//   TemplateIcon.docs = {
-//     componentGroup: 'SVG'
-//   };
-// }
+TemplateIcon.defaultProps = TemplateIcon_defaultProps;

package/lib/Drawer/Drawer.js

@@ -259,16 +259,16 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           customProps = _this$props4.customProps;
       var _customProps$focusSco = customProps.focusScopeProps,
           focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
-      var _focusScopeProps$auto = focusScopeProps.autoFocus,
-          autoFocus = _focusScopeProps$auto === void 0 ? true : _focusScopeProps$auto,
-          _focusScopeProps$rest = focusScopeProps.restoreFocus,
-          restoreFocus = _focusScopeProps$rest === void 0 ? true : _focusScopeProps$rest,
-          _focusScopeProps$need = focusScopeProps.needArrowLoop,
-          needArrowLoop = _focusScopeProps$need === void 0 ? false : _focusScopeProps$need,
-          _focusScopeProps$need2 = focusScopeProps.needTabLoop,
-          needTabLoop = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
-          _focusScopeProps$enab = focusScopeProps.enableEnterAction,
-          enableEnterAction = _focusScopeProps$enab === void 0 ? false : _focusScopeProps$enab;
+      var _focusScopeProps$need = focusScopeProps.needAutoFocus,
+          needAutoFocus = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
+          _focusScopeProps$need2 = focusScopeProps.needRestoreFocus,
+          needRestoreFocus = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
+          _focusScopeProps$need3 = focusScopeProps.needListNavigation,
+          needListNavigation = _focusScopeProps$need3 === void 0 ? false : _focusScopeProps$need3,
+          _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
+          needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
+          _focusScopeProps$need5 = focusScopeProps.needEnterAction,
+          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
 
       var childrenWithProps = _react["default"].Children.map(children, function (child) {
         if (child.type === Header || child.type === Footer || child.type === Content) {
@@ -309,12 +309,12 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         flexible: true
       }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
         elementRef: this.createRef,
-        autoFocus: autoFocus,
-        needTabLoop: needTabLoop,
-        restoreFocus: restoreFocus,
-        needArrowLoop: needArrowLoop,
+        needAutoFocus: needAutoFocus,
+        needFocusLoop: needFocusLoop,
+        needRestoreFocus: needRestoreFocus,
+        needListNavigation: needListNavigation,
         onClose: onClose,
-        enableEnterAction: enableEnterAction
+        needEnterAction: needEnterAction
       }, content) : content);
     }
   }, {
@@ -345,6 +345,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           customClass = _this$props5.customClass,
           needAutoZindex = _this$props5.needAutoZindex,
           innerPortalName = _this$props5.innerPortalName;
+      var zindexNumber = this.getNextIndex();
       return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: responsiveId
@@ -380,8 +381,8 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           scroll: "none",
           eleRef: forwardRef,
           className: "".concat(_DrawerModule["default"].isOverlay, " ").concat(customClass),
-          style: isActive && needAutoZindex ? {
-            zIndex: "".concat(_this2.getNextIndex())
+          style: needAutoZindex ? {
+            zIndex: "".concat(zindexNumber)
           } : {}
         }, _this2.drawers(uptoTablet, styleByResolutions)));
       });

package/lib/IconButton/__tests__/IconButton.spec.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _IconButton = _interopRequireDefault(require("../IconButton.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('IconButton', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['primary', 'primaryFilled', 'default'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('rendering the isActive true with palette of- %s', function (palette) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      isActive: true,
+      palette: palette
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var hoverType = ['default', 'border', 'bg'];
+  test.each(hoverType)('rendering the hovertypes- %s', function (hoverType) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      hoverType: hoverType
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isNeedEffect is False', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      isNeedEffect: false
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      a11y: {
+        ariaLabel: 'ariaLabel',
+        ariaControls: 'ariaControls',
+        ariaLabelledby: 'ariaLabelledby',
+        ariaHaspopup: true,
+        ariaExpanded: true
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      a11y: {
+        ariaHaspopup: false,
+        ariaExpanded: false
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needButtonTag', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      needButtonTag: false
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tourId', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      tourId: "tourId"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in Icon', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      iconName: "ZD-GN-infoStroke",
+      isBold: true,
+      iconSize: "13",
+      iconClass: "iconClass"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in dataIsHtml is True', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      dataIsHtml: true
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in isDisabled is True', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in ClassName', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      className: "IconButtonClass"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering in title', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      title: "IconTitle"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('eleRef prop is a function', function () {
+    // Create a mock function
+    var mockEleRef = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      eleRef: mockEleRef
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Checking the "Children"', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      customClass: "customClassButtonGroup"
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Element 1"), /*#__PURE__*/_react["default"].createElement("span", null, "Element 2"), /*#__PURE__*/_react["default"].createElement("span", null, "Element 3"))),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton Checking the "Children" 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  >
+    <span>
+      Element 1
+    </span>
+    <span>
+      Element 2
+    </span>
+    <span>
+      Element 3
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`IconButton eleRef prop is a function 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering ally 1`] = `
+<DocumentFragment>
+  <button
+    aria-controls="ariaControls"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="ariaLabel"
+    aria-labelledby="ariaLabelledby"
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering ally 2`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    aria-haspopup="false"
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in ClassName 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in Icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size13);"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in dataIsHtml is True 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="true"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in isDisabled is True 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in title 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    data-title="IconTitle"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering isNeedEffect is False 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering needButtonTag 1`] = `
+<DocumentFragment>
+  <div
+    aria-pressed="false"
+    class="false wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the defult props 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- bg 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- border 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering tourId 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    data-tour="tourId"
+  />
+</DocumentFragment>
+`;

package/lib/form/fields/FieldContainer/props/propTypes.js

@@ -15,7 +15,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var propTypes = (_propTypes = {
   children: _propTypes2["default"].node,
-  alignContainer: _propTypes2["default"].oneOf('vertical', 'baseline'),
+  alignContainer: _propTypes2["default"].oneOf(['vertical', 'baseline']),
   renderProps: _propTypes2["default"].shape({
     start: _propTypes2["default"].func,
     middle: _propTypes2["default"].func,