carbon-react 111.15.0 → 111.17.0

package/lib/components/form/form.component.js

@@ -39,6 +39,7 @@ const Form = ({
   noValidate = true,
   height,
   fullWidthButtons = false,
+  footerPadding = {},
   ...rest
 }) => {
   const {
@@ -49,7 +50,9 @@ const Form = ({
   } = (0, _react.useContext)(_modal.ModalContext);
   const formRef = (0, _react.useRef)(null);
   const formFooterRef = (0, _react.useRef)(null);
+  const hasPadding = !!Object.keys(footerPadding).length;
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
+  const classNames = `${stickyFooter ? "sticky" : ""} ${hasPadding ? "padded" : ""}`.trimEnd();
   return /*#__PURE__*/_react.default.createElement(_form.StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -65,28 +68,28 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
-  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, {
+  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
-    className: stickyFooter ? "sticky" : "",
+    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
-  }, leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
+  }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/_react.default.createElement(_formSummary.default, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
     buttonAlignment: buttonAlignment
-  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, {
+  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
-    className: stickyFooter ? "sticky" : "",
+    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     fullWidthButtons: fullWidthButtons
-  }, leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
+  }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
     fullWidthButtons: fullWidthButtons
   }, leftSideButtons), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
     fullWidthButtons: fullWidthButtons
@@ -103,6 +106,162 @@ Form.propTypes = {
   "children": _propTypes.default.node,
   "errorCount": _propTypes.default.number,
   "fieldSpacing": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7]),
+  "footerPadding": _propTypes.default.shape({
+    "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])
+  }),
   "fullWidthButtons": _propTypes.default.bool,
   "height": _propTypes.default.string,
   "leftSideButtons": _propTypes.default.node,

package/lib/components/form/form.style.js

@@ -80,8 +80,13 @@ const StyledFormFooter = _styledComponents.default.div`
       align-items: stretch;
     `}
   `}
+
+  ${_styledSystem.padding}
 `;
 exports.StyledFormFooter = StyledFormFooter;
+StyledFormFooter.defaultProps = {
+  theme: _base.default
+};
 
 const formBottomMargins = fieldSpacing => ({
   0: "var(--spacing000)",

package/lib/components/modal/modal.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ModalContextProps {
     isInModal?: boolean;
     isAnimationComplete?: boolean;
     triggerRefocusFlag?: boolean;
 }
 export declare const ModalContext: React.Context<ModalContextProps>;
-export interface ModalProps {
+export interface ModalProps extends TagProps {
     /** Custom class name  */
     className?: string;
     /** Modal content */

package/lib/components/modal/modal.component.js

@@ -123,6 +123,9 @@ Modal.propTypes = {
   "ariaRole": _propTypes.default.string,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "disableClose": _propTypes.default.bool,
   "disableEscKey": _propTypes.default.bool,
   "enableBackgroundUI": _propTypes.default.bool,

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
-interface SidebarHeaderProps {
+import { PaddingProps } from "styled-system";
+export interface SidebarHeaderProps extends PaddingProps {
     /** This component supports children. */
     children?: React.ReactNode;
     /** A custom id. */
     id: string;
+    /** Close icon button to be rendered */
+    closeIcon?: React.ReactNode;
 }
-declare const SidebarHeader: ({ children, id }: SidebarHeaderProps) => JSX.Element;
+declare const SidebarHeader: {
+    ({ children, id, closeIcon, ...rest }: SidebarHeaderProps): JSX.Element;
+    displayName: string;
+};
 export default SidebarHeader;

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -13,17 +13,179 @@ var _sidebarHeader = _interopRequireDefault(require("./sidebar-header.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const SidebarHeader = ({
   children,
-  id
-}) => /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
+  id,
+  closeIcon,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
+  hasClose: !!closeIcon,
   id: id,
-  "data-component": "sidebar-header"
-}, children);
+  "data-component": "sidebar-header",
+  p: "27px 32px 32px"
+}, rest), children, closeIcon);
 
 SidebarHeader.propTypes = {
   "children": _propTypes.default.node,
-  "id": _propTypes.default.string.isRequired
+  "closeIcon": _propTypes.default.node,
+  "id": _propTypes.default.string.isRequired,
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])
 };
+SidebarHeader.displayName = "SidebarHeader";
 var _default = SidebarHeader;
 exports.default = _default;

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

@@ -1,2 +1,4 @@
-declare const SidebarHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default SidebarHeaderStyle;
+declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
+    hasClose?: boolean | undefined;
+}, never>;
+export default StyledSidebarHeader;

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -5,18 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledSystem = require("styled-system");
+
+var _themes = require("../../../../style/themes");
+
+var _iconButton = _interopRequireDefault(require("../../../icon-button/icon-button.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const SidebarHeaderStyle = _styledComponents.default.div`
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+const StyledSidebarHeader = _styledComponents.default.div`
   background-color: var(--colorsUtilityYang100);
   box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
   box-sizing: border-box;
   width: 100%;
   color: var(--colorsActionMinorYin090);
   transition: all 0.2s ease;
-  padding: 27px 32px 32px 32px;
+
+  ${_styledSystem.padding}
+
+  ${({
+  hasClose
+}) => hasClose && (0, _styledComponents.css)`
+      display: flex;
+      justify-content: space-between;
+
+      > ${_iconButton.default}:first-of-type {
+        position: absolute;
+        z-index: 1;
+        right: 25px;
+      }
+    `}
 `;
-var _default = SidebarHeaderStyle;
+StyledSidebarHeader.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = StyledSidebarHeader;
 exports.default = _default;

package/lib/components/sidebar/sidebar.component.d.ts

@@ -53,6 +53,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps {
     focusableContainers?: CustomRefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
+    /** Padding to be set on the Sidebar header */
+    headerPadding?: PaddingProps;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;