@pingux/astro 2.208.3 → 2.209.0-alpha.0

package/lib/components/IconButtonToggle/iconButtonToggleAttributes.js

@@ -0,0 +1,56 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+export var iconButtonToggleArgTypes = {
+  isToggled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the icon is in the toggled state (use only in controlled mode).'
+  }),
+  onToggle: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback invoked when the toggle button is pressed.'
+  }),
+  title: {
+    description: 'Text content displayed in a tooltip on hover or focus.',
+    control: {
+      type: 'text'
+    }
+  },
+  variant: {
+    description: 'The styling variation of the button element.',
+    control: {
+      type: 'text'
+    }
+  },
+  defaultIcon: {
+    description: 'Icon component rendered in the default (untoggled) state.',
+    control: {
+      type: null
+    }
+  },
+  toggledIcon: {
+    description: 'Icon component rendered in the toggled state.',
+    control: {
+      type: null
+    }
+  },
+  iconProps: {
+    description: 'Props passed to the underlying icon element.',
+    control: {
+      type: null
+    }
+  },
+  buttonProps: {
+    description: 'Props passed to the underlying button element.',
+    control: {
+      type: null
+    }
+  }
+};

package/lib/components/Image/Image.stories.js

@@ -5,9 +5,9 @@ import React, { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Image } from '../../index';
-import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { chiefIdentityChampions, fallbackImg, pingImg } from '../../utils/devUtils/constants/images';
 import ImageReadme from './Image.mdx';
+import { imageArgTypes } from './imageAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Image',
@@ -19,21 +19,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    isDisabled: {},
-    variant: {
-      control: false
-    },
-    as: {
-      control: {
-        type: 'select'
-      },
-      options: htmlElements
-    },
-    src: {
-      control: false
-    }
-  },
+  argTypes: imageArgTypes,
   args: {
     as: 'img',
     src: pingImg

package/lib/components/Image/imageAttributes.js

@@ -0,0 +1,16 @@
+import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+export var imageArgTypes = {
+  isDisabled: {},
+  variant: {
+    control: false
+  },
+  as: {
+    control: {
+      type: 'select'
+    },
+    options: htmlElements
+  },
+  src: {
+    control: false
+  }
+};

package/lib/components/Input/Input.stories.js

@@ -1,16 +1,23 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { Input } from '../../index';
+import { inputArgTypes } from './inputAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/Base Components/Input',
   component: Input,
-  argTypes: {
-    placeholder: {},
-    type: {},
-    name: {},
-    id: {}
-  },
+  argTypes: _objectSpread({}, inputArgTypes),
   args: {
     placeholder: 'This is a basic input'
   }

package/lib/components/Input/inputAttributes.js

@@ -0,0 +1,6 @@
+export var inputArgTypes = {
+  placeholder: {},
+  type: {},
+  name: {},
+  id: {}
+};

package/lib/components/Label/Label.stories.js

@@ -2,23 +2,12 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Label } from '../../index';
 import { modes } from '../../utils/devUtils/constants/labelModes';
+import { labelArgTypes } from './labelAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/Base Components/Label',
   component: Label,
-  argTypes: {
-    mode: {
-      control: {
-        type: 'select',
-        options: modes
-      }
-    },
-    isDisabled: {},
-    isRequired: {},
-    requiredIndicator: {
-      control: 'none'
-    }
-  },
+  argTypes: labelArgTypes,
   args: {
     mode: modes.DEFAULT
   }

package/lib/components/Label/labelAttributes.js

@@ -0,0 +1,14 @@
+import { modes } from '../../utils/devUtils/constants/labelModes';
+export var labelArgTypes = {
+  mode: {
+    control: {
+      type: 'select',
+      options: modes
+    }
+  },
+  isDisabled: {},
+  isRequired: {},
+  requiredIndicator: {
+    control: 'none'
+  }
+};

package/lib/components/Link/Link.stories.js

@@ -1,15 +1,11 @@
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-var _context;
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Link, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import LinkReadme from './Link.mdx';
-import variants from './Link.styles';
+import { linkArgTypes } from './linkAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Link',
@@ -21,34 +17,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    href: {
-      control: {
-        type: 'text'
-      }
-    },
-    isDisabled: {},
-    isSafariCompatible: {
-      table: {
-        disable: true
-      }
-    },
-    as: {
-      control: {
-        type: 'select'
-      },
-      options: htmlElements
-    },
-    target: {
-      control: false
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: _concatInstanceProperty(_context = []).call(_context, _Object$keys(variants), ['button'])
-      }
-    }
-  },
+  argTypes: linkArgTypes,
   args: {
     href: 'https://uilibrary.ping-eng.com/',
     as: 'a',

package/lib/components/Link/linkAttributes.js

@@ -0,0 +1,33 @@
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import variants from './Link.styles';
+export var linkArgTypes = {
+  href: {
+    control: {
+      type: 'text'
+    }
+  },
+  isDisabled: {},
+  isSafariCompatible: {
+    table: {
+      disable: true
+    }
+  },
+  as: {
+    control: {
+      type: 'select'
+    },
+    options: htmlElements
+  },
+  target: {
+    control: false
+  },
+  variant: {
+    control: {
+      type: 'select',
+      options: _concatInstanceProperty(_context = []).call(_context, _Object$keys(variants), ['button'])
+    }
+  }
+};

package/lib/components/ListView/stories/ListViewOnyxDark.stories.js

@@ -1,9 +1,60 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { AstroProvider, NextGenDarkTheme } from '../../..';
+import { booleanArg, funcArg } from '../../../utils/docUtils/docArgTypes';
 import { ListViewNextGen } from './ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Onyx Dark ListView'
+  title: 'Onyx Dark ListView',
+  argTypes: {
+    selectionMode: {
+      control: {
+        type: 'select'
+      },
+      options: ['expansion', 'single', 'multiple', 'none'],
+      description: 'The type of selection that is allowed in the list view.'
+    },
+    isHoverable: _objectSpread(_objectSpread({}, booleanArg), {}, {
+      description: 'Whether list items display a hover state.'
+    }),
+    loadingState: {
+      control: {
+        type: 'text'
+      },
+      description: 'The current loading state of the list view (e.g. loading, loadingMore, filtering).'
+    },
+    'aria-label': {
+      control: {
+        type: 'text'
+      },
+      description: 'Defines a string value that labels the list view for accessibility.'
+    },
+    onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Handler that is called when the list view receives focus.'
+    }),
+    onLoadMore: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Handler that is called when more items should be loaded from the data source.'
+    }),
+    onLoadPrev: _objectSpread(_objectSpread({}, funcArg), {}, {
+      description: 'Handler that is called when previous items should be loaded from the data source.'
+    }),
+    containerProps: {
+      control: {
+        type: null
+      },
+      description: 'Props to pass to the outer container element of the list view.'
+    }
+  }
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/components/ListView/stories/listViewOnyxDarkAttributes.js

@@ -0,0 +1,51 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { booleanArg, funcArg } from '../../../utils/docUtils/docArgTypes';
+export var listViewOnyxDarkArgTypes = {
+  selectionMode: {
+    control: {
+      type: 'select'
+    },
+    options: ['expansion', 'single', 'multiple', 'none'],
+    description: 'The type of selection that is allowed in the list view.'
+  },
+  isHoverable: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether list items display a hover state.'
+  }),
+  loadingState: {
+    control: {
+      type: 'text'
+    },
+    description: 'The current loading state of the list view (e.g. loading, loadingMore, filtering).'
+  },
+  'aria-label': {
+    control: {
+      type: 'text'
+    },
+    description: 'Defines a string value that labels the list view for accessibility.'
+  },
+  onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the list view receives focus.'
+  }),
+  onLoadMore: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when more items should be loaded from the data source.'
+  }),
+  onLoadPrev: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when previous items should be loaded from the data source.'
+  }),
+  containerProps: {
+    control: {
+      type: null
+    },
+    description: 'Props to pass to the outer container element of the list view.'
+  }
+};

package/lib/components/Modal/Convenience/ModalBody.stories.js

@@ -1,6 +1,18 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import DocsLayout from '../../../../.storybook/storybookDocsLayout';
 import { Box, ModalBody, Text } from '../../../index';
+import { modalBodyArgTypes } from './modalBodyAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal/Convenience/ModalBody',
@@ -11,7 +23,8 @@ export default {
         return ___EmotionJSX(DocsLayout, null);
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, modalBodyArgTypes)
 };
 export var Default = function Default() {
   return ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?")));

package/lib/components/Modal/Convenience/ModalFooter.stories.js

@@ -1,7 +1,19 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import DocsLayout from '../../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../../hooks';
 import { ModalFooter } from '../../../index';
+import { modalFooterArgTypes } from './modalFooterAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal/Convenience/ModalFooter',
@@ -12,7 +24,8 @@ export default {
         return ___EmotionJSX(DocsLayout, null);
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, modalFooterArgTypes)
 };
 export var Default = function Default() {
   var state = useModalState();

package/lib/components/Modal/Convenience/ModalHeader.stories.js

@@ -1,7 +1,19 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import DocsLayout from '../../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../../hooks';
 import { ModalHeader } from '../../../index';
+import { modalHeaderArgTypes } from './modalHeaderAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal/Convenience/ModalHeader',
@@ -12,7 +24,8 @@ export default {
         return ___EmotionJSX(DocsLayout, null);
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, modalHeaderArgTypes)
 };
 export var Default = function Default() {
   var state = useModalState();

package/lib/components/Modal/Convenience/modalBodyAttributes.js

@@ -0,0 +1,35 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { booleanArg } from '../../../utils/docUtils/docArgTypes';
+export var modalBodyArgTypes = {
+  isScrollable: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the modal body content area is scrollable.'
+  }),
+  scrollProps: {
+    description: 'Props passed to the scrollable container element.',
+    control: {
+      type: null
+    }
+  },
+  containerProps: {
+    description: 'Props passed to the outer container Box element.',
+    control: {
+      type: null
+    }
+  },
+  children: {
+    description: 'Content to render inside the modal body.',
+    control: {
+      type: null
+    }
+  }
+};

package/lib/components/Modal/Convenience/modalFooterAttributes.js

@@ -0,0 +1,44 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { funcArg } from '../../../utils/docUtils/docArgTypes';
+export var modalFooterArgTypes = {
+  onSubmit: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback invoked when the primary (submit) button is pressed.'
+  }),
+  onCancel: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback invoked when the secondary (cancel) button is pressed.'
+  }),
+  primaryButtonText: {
+    description: 'Label text for the primary submit button.',
+    control: {
+      type: 'text'
+    }
+  },
+  secondaryButtonText: {
+    description: 'Label text for the secondary cancel button.',
+    control: {
+      type: 'text'
+    }
+  },
+  children: {
+    description: 'Additional content to render inside the footer.',
+    control: {
+      type: null
+    }
+  },
+  footerProps: {
+    description: 'Props passed to the footer container Box element.',
+    control: {
+      type: null
+    }
+  }
+};

package/lib/components/Modal/Convenience/modalHeaderAttributes.js

@@ -0,0 +1,53 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { booleanArg, funcArg } from '../../../utils/docUtils/docArgTypes';
+export var modalHeaderArgTypes = {
+  hasCloseButton: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the modal header renders a close button.'
+  }),
+  hasNoSeparator: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'When true, the divider line below the header is hidden.'
+  }),
+  onClose: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback invoked when the close button is pressed.'
+  }),
+  title: {
+    description: 'The title text or node displayed in the modal header.',
+    control: {
+      type: 'text'
+    }
+  },
+  titleProps: {
+    description: 'Props passed to the title element.',
+    control: {
+      type: null
+    }
+  },
+  containerProps: {
+    description: 'Props passed to the header container Box element.',
+    control: {
+      type: null
+    }
+  },
+  closeButton: {
+    description: 'Custom close button node to render in place of the default close button.',
+    control: {
+      type: null
+    }
+  },
+  closeButtonProps: {
+    description: 'Props passed to the default close IconButton.',
+    control: {
+      type: null
+    }
+  }
+};