@spaced-out/ui-design-system 0.1.26 → 0.1.28

package/.cspell/custom-words.txt

@@ -1,5 +1,7 @@
 Anant
+argstable
 atleast
+autodocs
 circlehollow
 CODEOWNERS
 commitlint
@@ -16,6 +18,7 @@ fontawesome
 framename
 Gaurav
 innerref
+interdimensional
 Lipsey
 Neue
 Nishant
@@ -26,14 +29,18 @@ noopener
 noreferrer
 OPACITYS
 partialformat
+pocus
 premajor
 preminor
 prepatch
 rgba
 sbdocs
 Stapleton
+storysource
 superrover
 systemjs
+tablist
+tabout
 testid
 tnum
 transclude

package/.storybook/main.js

@@ -1,18 +1,12 @@
 const path = require('path');
-
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.jsx'],
-  features: {buildStoriesJson: true},
+  features: {
+    buildStoriesJson: true,
+    storyStoreV7: false, // 👈 Opt out of on-demand story loading
+  },
   // Add any Storybook addons you want here: https://storybook.js.org/addons/
   addons: [
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
     {
       name: '@storybook/addon-docs',
       options: {
@@ -26,8 +20,60 @@ module.exports = {
     '@storybook/addon-a11y',
     '@storybook/addon-essentials',
     '@storybook/testing-react',
-    'storybook-vscode-component/register',
+    // 'storybook-vscode-component/register', This is not supported in storybook 7
+    '@storybook/addon-mdx-gfm',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+          prettierConfig: {
+            singleQuote: true,
+            trailingComma: 'all',
+            printWidth: 80,
+            tabWidth: 2,
+            bracketSpacing: false,
+            endOfLine: 'lf',
+            overrides: [
+              {
+                files: ['*.js', '*.jsx'],
+                options: {
+                  parser: 'babel-flow',
+                },
+              },
+              {
+                files: ['*.css'],
+                options: {
+                  parser: 'css',
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
   ],
+  babel: async (options) => ({
+    ...options,
+    sourceType: 'unambiguous',
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: [
+            'last 2 Chrome versions',
+            'last 2 Safari versions',
+            'last 2 Firefox versions',
+            'last 2 Edge versions',
+            'last 3 iOS Major versions',
+          ],
+        },
+      ],
+      '@babel/preset-react',
+      '@babel/preset-flow',
+    ],
+    plugins: ['macros'],
+  }),
   webpackFinal: async (config) => {
     config.module.rules = config.module.rules.map((rule) => {
       if (rule.test && rule.test.toString().includes('woff')) {
@@ -38,37 +84,33 @@ module.exports = {
       }
       return rule;
     });
-
     config.module.rules.push({
       test: /\.scss$/,
       use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
       include: path.resolve(__dirname, '../'),
     });
-
     config.module.rules.push({
       test: /\.(js|jsx)$/,
       loader: require.resolve('babel-loader'),
       options: {
-        presets: [['react-app', {flow: true, typescript: false}]],
+        presets: [
+          [
+            'react-app',
+            {
+              flow: true,
+              typescript: false,
+            },
+          ],
+        ],
       },
     });
 
-    // fonts
-    config.module.rules.push({
-      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
-      use: [
-        {
-          loader: 'file-loader',
-          query: {
-            name: '[name].[ext]',
-          },
-        },
-      ],
-      include: path.resolve(__dirname, '../'),
-    });
     config.resolve.extensions.push('.js', '.jsx');
-
     return config;
   },
   staticDirs: ['public'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
 };

package/.storybook/manager-head.html

@@ -1,6 +1,10 @@
 <!--
   Override the default favicon used in the Storybook in the browser tab.
 -->
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+/>
 <link
   rel="icon"
   sizes="any"

package/.storybook/manager.js

@@ -7,8 +7,4 @@ import senseTheme from './SenseTheme';
 
 addons.setConfig({
   theme: senseTheme,
-  previewTabs: {
-    canvas: {title: 'Playground'},
-    'storybook/docs/panel': {title: 'Documentation', index: -1},
-  },
 });

package/.storybook/preview-head.html

@@ -1,3 +1,7 @@
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+/>
 <style type="text/css">
   @font-face {
     font-family: 'Centra No 2';
@@ -30,7 +34,8 @@
   body {
     display: flex;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
+    height: auto;
     margin: 0px;
     padding: 0px;
     background: white;
@@ -108,11 +113,7 @@
     font-family: 'Centra No 2';
   }
 
-  [class*='sbdocs'] {
-    font-family: 'Centra No 2' !important;
-  }
-
-  [class*='docblock'] {
+  .sbdocs *:not(i) {
     font-family: 'Centra No 2' !important;
   }
 
@@ -128,4 +129,29 @@
   #root div {
     display: flex;
   }
+
+  div:has(> .docblock-argstable) {
+    overflow: auto !important;
+  }
+
+  .docblock-argstable {
+    max-width: 98%;
+  }
+
+  code {
+    white-space: pre-wrap !important;
+    background-color: #f1f1f5 !important;
+    border-color: #d3d2e0 !important;
+    color: #17172a !important;
+  }
+
+  .docblock-source {
+    background-color: #f1f1f5 !important;
+    box-shadow: none !important;
+    border-color: #d3d2e0 !important;
+  }
+
+  a.sbdocs {
+    color: #5c34cd !important;
+  }
 </style>

package/.storybook/preview.js

@@ -33,11 +33,6 @@
 
 import {themes} from '@storybook/theming';
 import {wd} from 'paths.macro';
-import {addParameters} from '@storybook/react';
-
-addParameters({
-  viewMode: 'docs',
-});
 
 export const parameters = {
   backgrounds: {

package/CHANGELOG.md

@@ -2,6 +2,47 @@
 
 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.1.28](https://github.com/spaced-out/ui-design-system/compare/v0.1.27...v0.1.28) (2023-05-26)
+
+
+### Features
+
+* added @storybook/addon-storysource ([b25a7f7](https://github.com/spaced-out/ui-design-system/commit/b25a7f787fbfe366ba9ec7f96a48096cbcdb24f1))
+* tokens page now support search ([bae8e7f](https://github.com/spaced-out/ui-design-system/commit/bae8e7fac06ee31cb0e4ea390e0709a4d51a171d))
+
+
+### Bug Fixes
+
+* added fun entries missing messages ([eabe577](https://github.com/spaced-out/ui-design-system/commit/eabe5772da715d9066794ff99aa76b39a2e8f847))
+* checkbox onChange getting triggered twice ([#118](https://github.com/spaced-out/ui-design-system/issues/118)) ([79f01fd](https://github.com/spaced-out/ui-design-system/commit/79f01fd80d11bc3c22280e3432dc05567c680830))
+* fixed broken links in docs ([faf1301](https://github.com/spaced-out/ui-design-system/commit/faf1301dbc6285d49a1c3c5ead91fc493df47b96))
+* no scaling on iPhones ([11556c0](https://github.com/spaced-out/ui-design-system/commit/11556c006e73c3d067e9c7187ac72d41617c3349))
+* story style fixes ([3ef77e7](https://github.com/spaced-out/ui-design-system/commit/3ef77e77ca2fe2fcc0d08a6baf7ef079bc3c8dab))
+* style fixes for sb ([14900e9](https://github.com/spaced-out/ui-design-system/commit/14900e995e43673fea0b744b22a1e064f81ae16d))
+* style fixes for sb ([2672025](https://github.com/spaced-out/ui-design-system/commit/2672025e2bd214b035ae89eafbb004bd1663958f))
+
+### [0.1.27](https://github.com/spaced-out/ui-design-system/compare/v0.1.26...v0.1.27) (2023-05-17)
+
+
+### Features
+
+* [@floating-ui](https://github.com/floating-ui) bump to `v0.24.0` ([#115](https://github.com/spaced-out/ui-design-system/issues/115)) ([3c44db3](https://github.com/spaced-out/ui-design-system/commit/3c44db3c0e12b8483fef08881fe6efc1e94ee721))
+* **accessibility:** last tab out should close the menu for all composite components using menu ([#111](https://github.com/spaced-out/ui-design-system/issues/111)) ([b76a823](https://github.com/spaced-out/ui-design-system/commit/b76a82340478371de87b4cf02a58f9fdae30068f))
+* floating ui migration ([#112](https://github.com/spaced-out/ui-design-system/issues/112)) ([85a1769](https://github.com/spaced-out/ui-design-system/commit/85a17695d4c54e091f8b77efbbd02b0b21444e60))
+* moved [@floating-ui](https://github.com/floating-ui) to stable version 0.16.0 ([b287e6d](https://github.com/spaced-out/ui-design-system/commit/b287e6d526e9fe01e8e65702ccb79f6af1b3e230))
+* storybook upgrade tokens revamp and menu changes to include search ([#114](https://github.com/spaced-out/ui-design-system/issues/114)) ([2e8a9df](https://github.com/spaced-out/ui-design-system/commit/2e8a9df5dd79eedc6490256083720dbbf2b56f6a))
+
+
+### Bug Fixes
+
+* add classnames support for tablerow and checkbox ([#116](https://github.com/spaced-out/ui-design-system/issues/116)) ([a159563](https://github.com/spaced-out/ui-design-system/commit/a159563a3c80e7244fb8240c5cf2ae2f0ce9fc37))
+* changed modal styles ([892d328](https://github.com/spaced-out/ui-design-system/commit/892d3284dc2531df0744e9db95684f53a6740af1))
+* chip icon external classnames support ([#113](https://github.com/spaced-out/ui-design-system/issues/113)) ([4ff43e4](https://github.com/spaced-out/ui-design-system/commit/4ff43e402e0937f9c137cb92ff6d3dba44998b63))
+* collapsible card isopen bug ([#117](https://github.com/spaced-out/ui-design-system/issues/117)) ([0d31766](https://github.com/spaced-out/ui-design-system/commit/0d31766bb2164096e8d33985cb56acb5b2758ed9))
+* tooltip fixes for [@floating-ui](https://github.com/floating-ui) bump ([7c16c44](https://github.com/spaced-out/ui-design-system/commit/7c16c44fd15fed26236da11007d678cabf58d1f0))
+* updated docs ([3718bb8](https://github.com/spaced-out/ui-design-system/commit/3718bb8918549a194b941e85d4782ded75270451))
+* updated dropdown docs ([4597dee](https://github.com/spaced-out/ui-design-system/commit/4597dee9a13cfd6f794871e83c69d7774bb0ad63))
+
 ### [0.1.26](https://github.com/spaced-out/ui-design-system/compare/v0.1.25...v0.1.26) (2023-05-03)
 
 

package/babel.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  sourceType: 'unambiguous',
   presets: [
     [
       '@babel/preset-env',

package/lib/components/Badge/Badge.module.css

@@ -8,6 +8,7 @@
   border-radius: size100;
   height: size22;
   padding: spaceNone spaceXSmall;
+  width: fit-content;
 }
 
 .fixedWidth {

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("@floating-ui/react-dom");
+var _react2 = require("@floating-ui/react");
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
@@ -51,14 +51,14 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy
-  } = (0, _reactDom.useFloating)({
+  } = (0, _react2.useFloating)({
+    open: true,
     strategy: 'absolute',
     placement: anchorPosition,
-    whileElementsMounted: _reactDom.autoUpdate,
-    middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   const onMenuToggle = isOpen => {
     if (isOpen) {
@@ -94,7 +94,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       iconRightType: iconRightType,
       disabled: disabled,
       size: size,
-      ref: reference,
+      ref: refs.setReference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -106,7 +106,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       }
     }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
-      ref: floating,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,
@@ -123,7 +123,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
           clickAway();
         }
       },
-      size: menu.size || size
+      size: menu.size || size,
+      onTabOut: clickAway
     }))));
   });
 });

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -12,7 +12,7 @@ import {
   shift,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom';
+} from '@floating-ui/react';
 
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
@@ -83,7 +83,8 @@ export const ButtonDropdown: React$AbstractComponent<
     const menuBtnRef = React.useRef(null);
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
-    const {x, y, reference, floating, strategy} = useFloating({
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
       strategy: 'absolute',
       placement: anchorPosition,
       whileElementsMounted: autoUpdate,
@@ -135,7 +136,7 @@ export const ButtonDropdown: React$AbstractComponent<
                 iconRightType={iconRightType}
                 disabled={disabled}
                 size={size}
-                ref={reference}
+                ref={refs.setReference}
                 onClick={(e) => {
                   e.stopPropagation();
                   onOpen();
@@ -153,7 +154,7 @@ export const ButtonDropdown: React$AbstractComponent<
             {isOpen && menu && (
               <div
                 onClickCapture={cancelNext}
-                ref={floating}
+                ref={refs.setFloating}
                 style={{
                   display: 'flex',
                   position: strategy,
@@ -174,6 +175,7 @@ export const ButtonDropdown: React$AbstractComponent<
                     }
                   }}
                   size={menu.size || size}
+                  onTabOut={clickAway}
                 />
               </div>
             )}

package/lib/components/Checkbox/Checkbox.js

@@ -30,7 +30,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
   React.useImperativeHandle(forwardRef, () => checkboxInput.current);
-  const handleOnChange = () => {
+  const handleOnClick = () => {
     if (!disabled) {
       onChange && onChange({
         value,
@@ -51,9 +51,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       checkboxInput.current.indeterminate = false;
     }
   }, [indeterminate]);
-  const onClickHandler = () => {
-    checkboxInput.current?.click();
-  };
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "checkbox",
     className: (0, _classify.default)(_CheckboxModule.default.checkboxContainer, {
@@ -61,7 +58,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_CheckboxModule.default.horizontalCheckbox]: align === 'horizontal-fixed',
       [_CheckboxModule.default.fluidCheckbox]: align === 'horizontal-fluid'
     }, classNames?.wrapper),
-    onClick: onClickHandler
+    onClick: handleOnClick
   }, /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_CheckboxModule.default.checkboxSquare, {
       [_CheckboxModule.default.disabled]: disabled
@@ -69,10 +66,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   }, /*#__PURE__*/React.createElement("input", {
     tabIndex: disabled ? -1 : tabIndex,
     type: "checkbox",
-    value: value,
     checked: checked,
+    readOnly: true,
     ref: checkboxInput,
-    onChange: handleOnChange,
     className: (0, _classify.default)(_CheckboxModule.default.inputCheckbox),
     disabled: disabled,
     name: name,

package/lib/components/Checkbox/Checkbox.js.flow

@@ -61,7 +61,7 @@ export const Checkbox: React$AbstractComponent<
     const checkboxInput = React.createRef<HTMLInputElement>();
     React.useImperativeHandle(forwardRef, () => checkboxInput.current);
 
-    const handleOnChange = () => {
+    const handleOnClick = () => {
       if (!disabled) {
         onChange &&
           onChange({
@@ -86,10 +86,6 @@ export const Checkbox: React$AbstractComponent<
       }
     }, [indeterminate]);
 
-    const onClickHandler = () => {
-      checkboxInput.current?.click();
-    };
-
     return (
       <div
         data-testid="checkbox"
@@ -102,7 +98,7 @@ export const Checkbox: React$AbstractComponent<
           },
           classNames?.wrapper,
         )}
-        onClick={onClickHandler}
+        onClick={handleOnClick}
       >
         <span
           className={classify(
@@ -116,10 +112,9 @@ export const Checkbox: React$AbstractComponent<
           <input
             tabIndex={disabled ? -1 : tabIndex}
             type="checkbox"
-            value={value}
             checked={checked}
+            readOnly
             ref={checkboxInput}
-            onChange={handleOnChange}
             className={classify(css.inputCheckbox)}
             disabled={disabled}
             name={name}

package/lib/components/Chip/Chip.js

@@ -55,7 +55,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.wrapper),
     onClick: onClick
   }), iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: _ChipModule.default.chipIcon,
+    className: (0, _classify.classify)(_ChipModule.default.chipIcon, classNames?.icon),
     name: iconName,
     type: iconType,
     size: "small"

package/lib/components/Chip/Chip.js.flow

@@ -10,7 +10,7 @@ import {Truncate} from '../Truncate';
 import css from './Chip.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
 
 export const CHIP_SEMANTIC = Object.freeze({
   primary: 'primary',
@@ -91,7 +91,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
       >
         {iconName && size !== 'small' && (
           <Icon
-            className={css.chipIcon}
+            className={classify(css.chipIcon, classNames?.icon)}
             name={iconName}
             type={iconType}
             size="small"

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -55,6 +55,9 @@ const CollapsibleCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     headerIconType = 'solid'
   } = _ref3;
   const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
+  React.useEffect(() => {
+    setCollapsibleCardIsOpen(Boolean(isOpen));
+  }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "CollapsibleCard",
     className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),

package/lib/components/CollapsibleCard/CollapsibleCard.js.flow

@@ -91,6 +91,10 @@ export const CollapsibleCard: React$AbstractComponent<
       Boolean(isOpen),
     );
 
+    React.useEffect(() => {
+      setCollapsibleCardIsOpen(Boolean(isOpen));
+    }, [isOpen]);
+
     return (
       <div
         data-testid="CollapsibleCard"

package/lib/components/Dialog/Dialog.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.DIALOG_SEMANTIC = void 0;
+exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.DIALOG_SEMANTIC = exports.BasicDialog = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Modal = require("../Modal");
 var _DialogModule = _interopRequireDefault(require("./Dialog.module.css"));
@@ -138,4 +139,24 @@ const Dialog = _ref5 => {
     iconName: iconName
   }))), children);
 };
-exports.Dialog = Dialog;
+exports.Dialog = Dialog;
+const BasicDialog = _ref6 => {
+  let {
+    heading,
+    body,
+    confirmText,
+    abortText,
+    handleConfirm,
+    handleAbort,
+    ...restDialogProps
+  } = _ref6;
+  return /*#__PURE__*/React.createElement(Dialog, restDialogProps, !!heading && /*#__PURE__*/React.createElement(DialogHeader, null, heading), !!body && /*#__PURE__*/React.createElement(DialogBody, null, body), /*#__PURE__*/React.createElement(DialogFooter, null, !!abortText && /*#__PURE__*/React.createElement(_Button.Button, {
+    isFluid: true,
+    type: "tertiary",
+    onClick: handleAbort
+  }, abortText), !!confirmText && /*#__PURE__*/React.createElement(_Button.Button, {
+    isFluid: true,
+    onClick: handleConfirm
+  }, confirmText)));
+};
+exports.BasicDialog = BasicDialog;

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
+import {Button} from '../Button';
 import {Icon} from '../Icon';
 import type {ModalProps} from '../Modal';
 import {Modal} from '../Modal';
@@ -51,6 +52,16 @@ export type DialogProps = {
   iconName?: string,
 };
 
+export type BasicDialogProps = {
+  ...DialogProps,
+  heading?: React.Node,
+  body?: React.Node,
+  confirmText?: string,
+  abortText?: string,
+  handleConfirm?: (event: SyntheticEvent<>) => mixed,
+  handleAbort?: (event: SyntheticEvent<>) => mixed,
+};
+
 const DialogIcon = ({
   semantic,
   iconName,
@@ -188,3 +199,30 @@ export const Dialog = ({
     {children}
   </Modal>
 );
+
+export const BasicDialog = ({
+  heading,
+  body,
+  confirmText,
+  abortText,
+  handleConfirm,
+  handleAbort,
+  ...restDialogProps
+}: BasicDialogProps): React.Node => (
+  <Dialog {...restDialogProps}>
+    {!!heading && <DialogHeader>{heading}</DialogHeader>}
+    {!!body && <DialogBody>{body}</DialogBody>}
+    <DialogFooter>
+      {!!abortText && (
+        <Button isFluid type="tertiary" onClick={handleAbort}>
+          {abortText}
+        </Button>
+      )}
+      {!!confirmText && (
+        <Button isFluid onClick={handleConfirm}>
+          {confirmText}
+        </Button>
+      )}
+    </DialogFooter>
+  </Dialog>
+);