@spaced-out/ui-design-system 0.0.46 → 0.0.48

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.48](https://github.com/spaced-out/ui-design-system/compare/v0.0.47...v0.0.48) (2023-03-13)
+
+
+### Bug Fixes
+
+* exposed classnames for dialog modal and panel semantic components ([551c7c1](https://github.com/spaced-out/ui-design-system/commit/551c7c1451d70073de5ca8f6a5935e68cd3fefe6))
+
+### [0.0.47](https://github.com/spaced-out/ui-design-system/compare/v0.0.46...v0.0.47) (2023-03-13)
+
+
+### Features
+
+* banner component ([bbf4420](https://github.com/spaced-out/ui-design-system/commit/bbf4420b9ed333c902a56442d9a64b8558c820a1))
+
 ### [0.0.46](https://github.com/spaced-out/ui-design-system/compare/v0.0.45...v0.0.46) (2023-03-10)
 
 

package/lib/components/Banner/Banner.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Banner = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _InContextAlert = require("../InContextAlert");
+var _BannerModule = _interopRequireDefault(require("./Banner.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Banner = _ref => {
+  let {
+    classNames,
+    semantic,
+    leftIconType = 'solid',
+    alignment = 'top',
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InContextAlert.InContextAlert, _extends({}, props, {
+    leftIconType: leftIconType,
+    semantic: semantic,
+    classNames: {
+      wrapper: (0, _classify.default)(_BannerModule.default.bannerContainer, {
+        [_BannerModule.default.neutral]: semantic === _InContextAlert.ALERT_SEMANTIC.neutral,
+        [_BannerModule.default.success]: semantic === _InContextAlert.ALERT_SEMANTIC.success,
+        [_BannerModule.default.information]: semantic === _InContextAlert.ALERT_SEMANTIC.information,
+        [_BannerModule.default.warning]: semantic === _InContextAlert.ALERT_SEMANTIC.warning,
+        [_BannerModule.default.danger]: semantic === _InContextAlert.ALERT_SEMANTIC.danger,
+        [_BannerModule.default.topAligned]: alignment === 'top',
+        [_BannerModule.default.bottomAligned]: alignment === 'bottom'
+      }, classNames?.wrapper),
+      alertText: (0, _classify.default)(classNames?.alertText),
+      actionContainer: (0, _classify.default)(_BannerModule.default.alertContainer, classNames?.actionContainer)
+    }
+  })));
+};
+exports.Banner = Banner;

package/lib/components/Banner/Banner.js.flow

@@ -0,0 +1,51 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {InContextAlertProps} from '../InContextAlert';
+import {ALERT_SEMANTIC, InContextAlert} from '../InContextAlert';
+
+import css from './Banner.module.css';
+
+
+export type BannerProps = {
+  ...InContextAlertProps,
+  alignment?: 'top' | 'bottom',
+};
+
+export const Banner = ({
+  classNames,
+  semantic,
+  leftIconType = 'solid',
+  alignment = 'top',
+  ...props
+}: BannerProps): React.Node => (
+  <>
+    <InContextAlert
+      {...props}
+      leftIconType={leftIconType}
+      semantic={semantic}
+      classNames={{
+        wrapper: classify(
+          css.bannerContainer,
+          {
+            [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+            [css.success]: semantic === ALERT_SEMANTIC.success,
+            [css.information]: semantic === ALERT_SEMANTIC.information,
+            [css.warning]: semantic === ALERT_SEMANTIC.warning,
+            [css.danger]: semantic === ALERT_SEMANTIC.danger,
+            [css.topAligned]: alignment === 'top',
+            [css.bottomAligned]: alignment === 'bottom',
+          },
+          classNames?.wrapper,
+        ),
+        alertText: classify(classNames?.alertText),
+        actionContainer: classify(
+          css.alertContainer,
+          classNames?.actionContainer,
+        ),
+      }}
+    />
+  </>
+);

package/lib/components/Banner/Banner.module.css

@@ -0,0 +1,56 @@
+@value (
+  colorNeutralLight,
+  colorSuccessLight,
+  colorInformationLight,
+  colorWarningLight,
+  colorDangerLight
+) from '../../styles/variables/_color.css';
+
+@value (
+  spaceMedium,
+  spaceSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  borderWidthPrimary
+) from '../../styles/variables/_border.css';
+
+.bannerContainer {
+  border: none;
+  border-radius: initial;
+  padding: spaceSmall spaceMedium;
+}
+
+.neutral {
+  border-color: colorNeutralLight;
+}
+
+.success {
+  border-color: colorSuccessLight;
+}
+
+.information {
+  border-color: colorInformationLight;
+}
+
+.warning {
+  border-color: colorWarningLight;
+}
+
+.danger {
+  border-color: colorDangerLight;
+}
+
+.topAligned {
+  border-bottom-width: borderWidthPrimary;
+  border-bottom-style: solid;
+}
+
+.bottomAligned {
+  border-top-width: borderWidthPrimary;
+  border-top-style: solid;
+}
+
+.alertContainer {
+  padding-left: calc(spaceSmall * 2);
+}

package/lib/components/Banner/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Banner = require("./Banner");
+Object.keys(_Banner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Banner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Banner[key];
+    }
+  });
+});

package/lib/components/Banner/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Banner';

package/lib/components/Dialog/Dialog.js

@@ -68,10 +68,11 @@ const DialogIcon = _ref => {
 };
 const DialogHeader = _ref2 => {
   let {
-    children
+    children,
+    className
   } = _ref2;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogHeader
+    className: (0, _classify.default)(_DialogModule.default.dialogHeader, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _DialogModule.default.headerContent
   }, children)));
@@ -79,19 +80,21 @@ const DialogHeader = _ref2 => {
 exports.DialogHeader = DialogHeader;
 const DialogBody = _ref3 => {
   let {
-    children
+    children,
+    className
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogBody
+    className: (0, _classify.default)(_DialogModule.default.dialogBody, className)
   }, children);
 };
 exports.DialogBody = DialogBody;
 const DialogFooter = _ref4 => {
   let {
-    children
+    children,
+    className
   } = _ref4;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogFooter
+    className: (0, _classify.default)(_DialogModule.default.dialogFooter, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _DialogModule.default.dialogFooterActions
   }, children)));

package/lib/components/Dialog/Dialog.js.flow

@@ -23,14 +23,17 @@ export type DialogSemanticType = $Values<typeof DIALOG_SEMANTIC>;
 
 export type DialogHeaderProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type DialogFooterProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type DialogBodyProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type DialogPropsBase = {
@@ -106,24 +109,33 @@ const DialogIcon = ({
   }
 };
 
-export const DialogHeader = ({children}: DialogHeaderProps): React.Node => (
+export const DialogHeader = ({
+  children,
+  className,
+}: DialogHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.dialogHeader}>
+      <div className={classify(css.dialogHeader, className)}>
         <div className={css.headerContent}>{children}</div>
       </div>
     )}
   </>
 );
 
-export const DialogBody = ({children}: DialogBodyProps): React.Node => (
-  <div className={css.dialogBody}>{children}</div>
+export const DialogBody = ({
+  children,
+  className,
+}: DialogBodyProps): React.Node => (
+  <div className={classify(css.dialogBody, className)}>{children}</div>
 );
 
-export const DialogFooter = ({children}: DialogFooterProps): React.Node => (
+export const DialogFooter = ({
+  children,
+  className,
+}: DialogFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.dialogFooter}>
+      <div className={classify(css.dialogFooter, className)}>
         <div className={css.dialogFooterActions}>{children}</div>
       </div>
     )}

package/lib/components/InContextAlert/InContextAlert.js

@@ -26,7 +26,8 @@ exports.ALERT_SEMANTIC = ALERT_SEMANTIC;
 const AlertIcon = _ref => {
   let {
     semantic,
-    leftIconName
+    leftIconName,
+    leftIconType
   } = _ref;
   switch (semantic) {
     case ALERT_SEMANTIC.neutral:
@@ -34,42 +35,42 @@ const AlertIcon = _ref => {
         color: _typography.TEXT_COLORS.neutral,
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
-        type: "regular"
+        type: leftIconType
       });
     case ALERT_SEMANTIC.success:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-check',
         size: "small",
         color: _typography.TEXT_COLORS.success,
-        type: "regular"
+        type: leftIconType
       });
     case ALERT_SEMANTIC.information:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-info',
         size: "small",
         color: _typography.TEXT_COLORS.information,
-        type: "regular"
+        type: leftIconType
       });
     case ALERT_SEMANTIC.warning:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.warning,
-        type: "regular"
+        type: leftIconType
       });
     case ALERT_SEMANTIC.danger:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'shield-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.danger,
-        type: "regular"
+        type: leftIconType
       });
     default:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
-        type: "regular"
+        type: leftIconType
       });
   }
 };
@@ -83,7 +84,8 @@ const InContextAlert = props => {
     leftIconName = '',
     onCloseClick,
     actionText = '',
-    onAction
+    onAction,
+    leftIconType
   } = props;
   const [dismissed, setDismissed] = React.useState(false);
   const closeClickHandler = e => {
@@ -100,21 +102,24 @@ const InContextAlert = props => {
     }, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(AlertIcon, {
     semantic: semantic,
-    leftIconName: leftIconName
+    leftIconName: leftIconName,
+    leftIconType: leftIconType
   }), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     className: (0, _classify.classify)(classNames?.alertText)
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: 2
-  }, children)), actionText ? /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmall, {
+  }, children)), !!(actionText || dismissable) && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer)
+  }, !!actionText && /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmall, {
     className: _InContextAlertModule.default.actionText,
     onClick: onAction
-  }, actionText) : dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
     color: _typography.TEXT_COLORS.primary,
     name: "close",
     size: "small",
     type: "regular",
     onClick: closeClickHandler,
     className: _InContextAlertModule.default.closeIcon
-  })));
+  }))));
 };
 exports.InContextAlert = InContextAlert;

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import {TEXT_COLORS} from '../../types/typography';
 import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
 import {ButtonTextExtraSmall, SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
@@ -19,7 +20,11 @@ export const ALERT_SEMANTIC = Object.freeze({
   danger: 'danger',
 });
 
-type ClassNames = $ReadOnly<{wrapper?: string, alertText?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  alertText?: string,
+  actionContainer?: string,
+}>;
 export type AlertSemanticType = $Values<typeof ALERT_SEMANTIC>;
 
 type InContextAlertBaseProps = {
@@ -40,14 +45,17 @@ export type InContextAlertProps = {
   ...InContextAlertBaseProps,
   semantic: AlertSemanticType,
   leftIconName?: string,
+  leftIconType?: IconType,
 };
 
 const AlertIcon = ({
   semantic,
   leftIconName,
+  leftIconType,
 }: {
   semantic: AlertSemanticType,
   leftIconName: string,
+  leftIconType?: IconType,
 }) => {
   switch (semantic) {
   case ALERT_SEMANTIC.neutral:
@@ -56,7 +64,7 @@ const AlertIcon = ({
         color={TEXT_COLORS.neutral}
         name={leftIconName ? leftIconName : 'face-smile'}
         size="small"
-        type="regular"
+        type={leftIconType}
       />
     );
   case ALERT_SEMANTIC.success:
@@ -65,7 +73,7 @@ const AlertIcon = ({
         name={leftIconName ? leftIconName : 'circle-check'}
         size="small"
         color={TEXT_COLORS.success}
-        type="regular"
+        type={leftIconType}
       />
     );
 
@@ -75,7 +83,7 @@ const AlertIcon = ({
         name={leftIconName ? leftIconName : 'circle-info'}
         size="small"
         color={TEXT_COLORS.information}
-        type="regular"
+        type={leftIconType}
       />
     );
 
@@ -85,7 +93,7 @@ const AlertIcon = ({
         name={leftIconName ? leftIconName : 'circle-exclamation'}
         size="small"
         color={TEXT_COLORS.warning}
-        type="regular"
+        type={leftIconType}
       />
     );
 
@@ -95,7 +103,7 @@ const AlertIcon = ({
         name={leftIconName ? leftIconName : 'shield-exclamation'}
         size="small"
         color={TEXT_COLORS.danger}
-        type="regular"
+        type={leftIconType}
       />
     );
 
@@ -105,7 +113,7 @@ const AlertIcon = ({
         color={TEXT_COLORS.neutral}
         name={leftIconName ? leftIconName : 'face-smile'}
         size="small"
-        type="regular"
+        type={leftIconType}
       />
     );
   }
@@ -122,6 +130,7 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
     onCloseClick,
     actionText = '',
     onAction,
+    leftIconType,
   } = props;
   const [dismissed, setDismissed] = React.useState(false);
   const closeClickHandler = (e) => {
@@ -145,27 +154,42 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
             classNames?.wrapper,
           )}
         >
-          <AlertIcon semantic={semantic} leftIconName={leftIconName} />
+          <AlertIcon
+            semantic={semantic}
+            leftIconName={leftIconName}
+            leftIconType={leftIconType}
+          />
           {React.Children.count(children) > 0 && (
             <SubTitleExtraSmall className={classify(classNames?.alertText)}>
               <Truncate line={2}>{children}</Truncate>
             </SubTitleExtraSmall>
           )}
-          {actionText ? (
-            <ButtonTextExtraSmall className={css.actionText} onClick={onAction}>
-              {actionText}
-            </ButtonTextExtraSmall>
-          ) : (
-            dismissable && (
-              <Icon
-                color={TEXT_COLORS.primary}
-                name="close"
-                size="small"
-                type="regular"
-                onClick={closeClickHandler}
-                className={css.closeIcon}
-              />
-            )
+          {!!(actionText || dismissable) && (
+            <div
+              className={classify(
+                css.actionContainer,
+                classNames?.actionContainer,
+              )}
+            >
+              {!!actionText && (
+                <ButtonTextExtraSmall
+                  className={css.actionText}
+                  onClick={onAction}
+                >
+                  {actionText}
+                </ButtonTextExtraSmall>
+              )}
+              {!!dismissable && (
+                <Icon
+                  color={TEXT_COLORS.primary}
+                  name="close"
+                  size="small"
+                  type="regular"
+                  onClick={closeClickHandler}
+                  className={css.closeIcon}
+                />
+              )}
+            </div>
           )}
         </div>
       )}

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -14,7 +14,8 @@
 ) from '../../styles/variables/_color.css';
 
 @value (
-  spaceXSmall
+  spaceXSmall,
+  spaceSmall
 ) from '../../styles/variables/_space.css';
 
 @value (
@@ -68,8 +69,14 @@
   margin-left: auto;
 }
 
+.actionContainer {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  gap: spaceSmall;
+}
+
 .actionText {
   cursor: pointer;
-  margin-left: auto;
   text-decoration: underline;
 }

package/lib/components/InContextAlert/index.js

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ALERT_SEMANTIC", {
-  enumerable: true,
-  get: function () {
-    return _InContextAlert.ALERT_SEMANTIC;
-  }
-});
-Object.defineProperty(exports, "InContextAlert", {
-  enumerable: true,
-  get: function () {
-    return _InContextAlert.InContextAlert;
-  }
-});
-var _InContextAlert = require("./InContextAlert");
+var _InContextAlert = require("./InContextAlert");
+Object.keys(_InContextAlert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InContextAlert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InContextAlert[key];
+    }
+  });
+});

package/lib/components/InContextAlert/index.js.flow

@@ -1,3 +1,3 @@
 // @flow strict
 
-export {ALERT_SEMANTIC, InContextAlert} from './InContextAlert';
+export * from './InContextAlert';

package/lib/components/Modal/Modal.js

@@ -23,10 +23,11 @@ const ModalHeader = _ref => {
   let {
     children,
     hideCloseBtn,
-    onCloseButtonClick
+    onCloseButtonClick,
+    className
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalHeader
+    className: (0, _classify.default)(_ModalModule.default.modalHeader, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _ModalModule.default.headerContent
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
@@ -39,19 +40,21 @@ const ModalHeader = _ref => {
 exports.ModalHeader = ModalHeader;
 const ModalBody = _ref2 => {
   let {
-    children
+    children,
+    className
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalBody
+    className: (0, _classify.default)(_ModalModule.default.modalBody, className)
   }, children);
 };
 exports.ModalBody = ModalBody;
 const ModalFooter = _ref3 => {
   let {
-    children
+    children,
+    className
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalFooter
+    className: (0, _classify.default)(_ModalModule.default.modalFooter, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _ModalModule.default.modalFooterActions
   }, children)));

package/lib/components/Modal/Modal.js.flow

@@ -40,24 +40,28 @@ export type ModalHeaderProps = {
   children?: React.Node,
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
 };
 
 export type ModalFooterProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type ModalBodyProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export const ModalHeader = ({
   children,
   hideCloseBtn,
   onCloseButtonClick,
+  className,
 }: ModalHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.modalHeader}>
+      <div className={classify(css.modalHeader, className)}>
         <div className={css.headerContent}>
           <Truncate>{children}</Truncate>
         </div>
@@ -74,14 +78,20 @@ export const ModalHeader = ({
   </>
 );
 
-export const ModalBody = ({children}: ModalBodyProps): React.Node => (
-  <div className={css.modalBody}>{children}</div>
+export const ModalBody = ({
+  children,
+  className,
+}: ModalBodyProps): React.Node => (
+  <div className={classify(css.modalBody, className)}>{children}</div>
 );
 
-export const ModalFooter = ({children}: ModalFooterProps): React.Node => (
+export const ModalFooter = ({
+  children,
+  className,
+}: ModalFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.modalFooter}>
+      <div className={classify(css.modalFooter, className)}>
         <div className={css.modalFooterActions}>{children}</div>
       </div>
     )}

package/lib/components/Panel/Panel.js

@@ -20,10 +20,11 @@ const PanelHeader = _ref => {
   let {
     children,
     hideCloseBtn,
-    onCloseButtonClick
+    onCloseButtonClick,
+    className
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelHeader
+    className: (0, _classify.default)(_PanelModule.default.panelHeader, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _PanelModule.default.headerContent
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
@@ -36,19 +37,21 @@ const PanelHeader = _ref => {
 exports.PanelHeader = PanelHeader;
 const PanelBody = _ref2 => {
   let {
-    children
+    children,
+    className
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelBody
+    className: (0, _classify.default)(_PanelModule.default.panelBody, className)
   }, children);
 };
 exports.PanelBody = PanelBody;
 const PanelFooter = _ref3 => {
   let {
-    children
+    children,
+    className
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelFooter
+    className: (0, _classify.default)(_PanelModule.default.panelFooter, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _PanelModule.default.panelFooterActions
   }, children)));

package/lib/components/Panel/Panel.js.flow

@@ -20,14 +20,17 @@ export type PanelHeaderProps = {
   children?: React.Node,
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
 };
 
 export type PanelFooterProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type PanelBodyProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type PanelProps = {
@@ -40,10 +43,11 @@ export const PanelHeader = ({
   children,
   hideCloseBtn,
   onCloseButtonClick,
+  className,
 }: PanelHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.panelHeader}>
+      <div className={classify(css.panelHeader, className)}>
         <div className={css.headerContent}>
           <Truncate>{children}</Truncate>
         </div>
@@ -60,14 +64,20 @@ export const PanelHeader = ({
   </>
 );
 
-export const PanelBody = ({children}: PanelBodyProps): React.Node => (
-  <div className={css.panelBody}>{children}</div>
+export const PanelBody = ({
+  children,
+  className,
+}: PanelBodyProps): React.Node => (
+  <div className={classify(css.panelBody, className)}>{children}</div>
 );
 
-export const PanelFooter = ({children}: PanelFooterProps): React.Node => (
+export const PanelFooter = ({
+  children,
+  className,
+}: PanelFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.panelFooter}>
+      <div className={classify(css.panelFooter, className)}>
         <div className={css.panelFooterActions}>{children}</div>
       </div>
     )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {