@pingux/astro 2.9.2 → 2.13.0-alpha.3

package/lib/cjs/styles/variants/README.md

@@ -0,0 +1,98 @@
+# Variant Naming Conventions
+
+Variant names should be camel case so that dot notation can be used, e.g. `delete theme.buttons.myButton`.
+
+When it comes to mapping the variant within the theme, the foundation of a component is the main differentiator. There are two types currently:
+  1. Components which leverage a Theme UI base
+  2. Custom components or layout components, often built on the `Box` component
+
+If a component is built on top of a Theme UI component, we follow their existing [variant groups](https://theme-ui.com/components/variants), e.g. any variant for an `IconButton` should be placed within the `buttons` object in the theme because it uses the `IconButton` from Theme UI as its base.
+
+If a component is custom or used for layout purposes, it will often have `Box` as its base. For these components, we create our own variant group for it under the `variants` object in the theme, e.g. `variants.modal`. Within this object is typically where internal layout variants will go for that component, e.g. `variants.modal.container`. NOTE: You don't need to specify `variants` in the naming, it's just used here for demo purposes.
+
+
+## Example of component with Theme UI base
+
+In the example below, `MyBadge` utilizes the Astro `Badge` component which is based on the Theme UI `Badge` component. The object within `MyBadge.styles.js` would then be exported as part of the theme within the `badges` object.
+
+```js
+// `src/components/MyBadge/MyBadge.js`
+const MyBadge = () => <Badge variant="myBadge" />;
+
+// `src/components/MyBadge/MyBadge.styles.js`
+const myBadge = { backgroundColor: 'red' };
+export default { myBadge };
+
+// `src/styles/variants/index.js`
+import defaultBadges from '../../components/Badge/Badge.styles';
+import myBadge from '../../components/MyBadge/MyBadge.styles';
+export const badges = { ...defaultBadges, ...myBadge };
+
+// `src/styles/theme.js`
+import { badges } from './variants';
+const theme = { badges };
+```
+
+This results in a `theme` object as such:
+
+```json
+{
+  "badges": {
+    "myBadge": { "backgroundColor": "red" }
+  }
+}
+```
+
+## Example of custom component and internal layout components
+
+In the example below, `MyComponent` is custom and has `Box` as its foundation. It also includes layout components and a `Button`. Since the `Button` component is built on a Theme UI base, it will follow the variant naming rules for those types of components. The object within `MyComponent.styles.js` should then be exported as part of the theme within the `variants` object.
+
+```js
+// `src/components/MyComponent/MyComponent.js`
+const MyComponent = () => (
+  <Box variant="myComponent.container">
+    <Box variant="myComponent.leftSide" />
+    <Box variant="myComponent.rightSide" />
+    {/* The Button variant is exported differently in the theme */}
+    <Button variant="myComponentButton">Click me</Button>
+  </Box>
+);
+
+// `src/components/MyComponent/MyComponent.styles.js`
+export const myComponentButton = { backgroundColor: 'critical' };
+const container = { paddingTop: 'xl' };
+const leftSide = { width: '100px', backgroundColor: 'green' };
+const rightSide = { width: '20px', backgroundColor: 'orange' };
+export default { container, leftSide, rightSide };
+
+// `src/styles/variants/variants.js`
+import myComponent from '../../components/MyComponent/MyComponent.styles';
+export default { myComponent };
+
+// `src/styles/variants/index.js`
+import defaultButtons from '../../components/Button/Button.styles';
+import { myComponentButton } from '../../components/MyComponent/MyComponent.styles';
+export const buttons = { ...defaultButtons, myComponentButton };
+export { default as variants } from './variants';
+
+// `src/styles/theme.js`
+import { buttons, variants } from './variants';
+const theme = { buttons, variants };
+```
+
+This results in a `theme` object as such:
+
+```json
+{
+  "buttons": {
+    "myComponentButton": { "backgroundColor": "critical" }
+  },
+  "variants": {
+    "myComponent": {
+      "container": { "paddingTop": "xl" },
+      "leftSide": { "width": "100px", "backgroundColor": "green" },
+      "rightSide": { "width": "20px", "backgroundColor": "orange" }
+    }
+  }
+}
+```

package/lib/cjs/styles/variants/variants.js

@@ -50,6 +50,7 @@ var _Table = _interopRequireDefault(require("../../components/Table/Table.styles
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
 var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
+var _PanelHeader = _interopRequireDefault(require("../../experimental/PanelHeader/PanelHeader.styles"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -81,6 +82,7 @@ var _default = _objectSpread({
   navBar: _NavBar["default"],
   overlayPanel: _OverlayPanel["default"],
   popoverMenu: _PopoverMenu["default"],
+  panelHeader: _PanelHeader["default"],
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],
   separator: _Separator["default"],

package/lib/cjs/types/box.d.ts

@@ -0,0 +1,10 @@
+import { StylePropertyValue } from 'theme-ui';
+import { DOMAttributes, StyleProps } from './shared';
+export interface BoxProps extends StyleProps, DOMAttributes {
+    /** The background color of the box. */
+    bg?: StylePropertyValue<string | undefined>;
+    /** When true, display as a row rather than a column. */
+    isRow?: boolean;
+    /** Whether the box is disabled. */
+    isDisabled?: boolean;
+}

package/lib/cjs/types/box.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/icon.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { TestingAttributes } from './shared/test';
+import { DOMAttributes, StyleProps } from './shared';
+export type SVGComponentProps = {
+    title?: string;
+};
+export type IconTypeExtended = ReactNode & {
+    type: {
+        name: string;
+    };
+} | React.ElementType;
+export interface IconProps extends StyleProps, DOMAttributes, TestingAttributes {
+    /**
+   * The title associated with the icon. It is recommended that icons always have an associated
+   * title in order to allow a better user experience for those using screen readers.
+   * The **`id`** in the title object will be the id of the title and
+   * is also what will be supplied to the **`aria-labelledby`** attribute in the SVG.
+   * The **`name`** in the title object will be the content of the title.
+   * This prop can only be used when importing the icon from [@pingux/mdi-react](https://www.npmjs.com/package/@pingux/mdi-react).
+   * */
+    title?: {
+        id?: string;
+        name: string;
+    };
+    /** The icon to render. */
+    icon: IconTypeExtended;
+    /**
+     * The size of the icon container. If given a number value, it will be converted to pixels.
+     * Tshirt sizing is recommended and can be passed to the size prop as 'xs', 'sm' , 'md'
+     * rendering 15, 20, and 25 pixel svg containers.  */
+    size?: number | string;
+    /** A theme-aware prop to set the icon's color. */
+    color?: string;
+}

package/lib/cjs/types/icon.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './box';
+export * from './icon';
+export * from './loader';
+export * from './popoverContainer';
+export * from './shared';
+export * from './tableCell';
+export * from './text';

package/lib/cjs/types/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _context, _context2, _context3, _context4, _context5, _context6, _context7;
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _box = require("./box");
+_forEachInstanceProperty(_context = _Object$keys(_box)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _box[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _box[key];
+    }
+  });
+});
+var _icon = require("./icon");
+_forEachInstanceProperty(_context2 = _Object$keys(_icon)).call(_context2, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _icon[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _icon[key];
+    }
+  });
+});
+var _loader = require("./loader");
+_forEachInstanceProperty(_context3 = _Object$keys(_loader)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _loader[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _loader[key];
+    }
+  });
+});
+var _popoverContainer = require("./popoverContainer");
+_forEachInstanceProperty(_context4 = _Object$keys(_popoverContainer)).call(_context4, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _popoverContainer[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _popoverContainer[key];
+    }
+  });
+});
+var _shared = require("./shared");
+_forEachInstanceProperty(_context5 = _Object$keys(_shared)).call(_context5, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shared[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _shared[key];
+    }
+  });
+});
+var _tableCell = require("./tableCell");
+_forEachInstanceProperty(_context6 = _Object$keys(_tableCell)).call(_context6, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tableCell[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tableCell[key];
+    }
+  });
+});
+var _text = require("./text");
+_forEachInstanceProperty(_context7 = _Object$keys(_text)).call(_context7, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _text[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _text[key];
+    }
+  });
+});

package/lib/cjs/types/loader.d.ts

@@ -0,0 +1,14 @@
+import { StyleProps } from './shared';
+export interface LoaderProps extends StyleProps {
+    /**
+     * Color key from theme or string value.
+     * Default color inherits the font color.
+    */
+    color?: string;
+    /**
+   * Size as number or pixel / em / rem value.
+   * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.
+   * Default size inherits the font size.
+  */
+    size?: number | string;
+}

package/lib/cjs/types/loader.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/mdx.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/types/popoverContainer.d.ts

@@ -0,0 +1,23 @@
+import { DOMAttributes, Modify, StyleProps } from './shared';
+type PopoverPlacement = 'top' | 'right' | 'bottom' | 'left';
+type StylePropsExtended = Modify<StyleProps, {
+    direction?: PopoverPlacement;
+}>;
+export interface PopoverArrowProps extends DOMAttributes, StylePropsExtended {
+    arrowCrossOffset?: string;
+}
+export interface PopoverContainerProps extends StylePropsExtended, DOMAttributes {
+    placement?: string;
+    arrowProps?: PopoverArrowProps;
+    arrowCrossOffset?: string;
+    onClose?(): unknown;
+    isNotClosedOnBlur?: boolean;
+    hasNoArrow?: boolean;
+    isKeyboardDismissDisabled?: boolean;
+    isNonModal?: boolean;
+    isDismissable?: boolean;
+}
+export interface PopoverWrapperProps extends PopoverContainerProps {
+    isOpen?: boolean;
+}
+export {};

package/lib/cjs/types/popoverContainer.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/dom.d.ts

@@ -0,0 +1,9 @@
+import React, { AriaAttributes, DOMAttributes as ReactDOMAttributes } from 'react';
+export type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem' | (string & Record<string, unknown>);
+export interface FocusableElement extends Element, HTMLOrSVGElement {
+}
+export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
+    role?: AriaRole | undefined;
+    className?: string | undefined;
+}
+export type ReactRef = React.Ref<HTMLElement>;

package/lib/cjs/types/shared/dom.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dom';
+export * from './style';
+export * from './utils';

package/lib/cjs/types/shared/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _context, _context2, _context3;
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _dom = require("./dom");
+_forEachInstanceProperty(_context = _Object$keys(_dom)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dom[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _dom[key];
+    }
+  });
+});
+var _style = require("./style");
+_forEachInstanceProperty(_context2 = _Object$keys(_style)).call(_context2, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _style[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
+var _utils = require("./utils");
+_forEachInstanceProperty(_context3 = _Object$keys(_utils)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});

package/lib/cjs/types/shared/style.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SxProp, ThemeUICSSObject, ThemeUICSSProperties } from 'theme-ui';
+export type SxObject = {
+    [styleKey: string]: ThemeUICSSObject;
+};
+export interface StyleProps extends ThemeUICSSProperties, SxProp {
+    /** The styling variation of the element. */
+    variant?: string;
+    /** The base HTML tag name or React component type to render */
+    as?: string | React.ReactNode | React.ElementType;
+}

package/lib/cjs/types/shared/style.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/test.d.ts

@@ -0,0 +1,3 @@
+export interface TestingAttributes {
+    'data-testid'?: string;
+}

package/lib/cjs/types/shared/test.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/utils.d.ts

@@ -0,0 +1 @@
+export type Modify<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;

package/lib/cjs/types/shared/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/tableCell.d.ts

@@ -0,0 +1,5 @@
+import { DOMAttributes, StyleProps } from './shared';
+export interface TableCellProps extends StyleProps, DOMAttributes {
+    /** Determines whether or not the html rendered is a th or td element. */
+    isHeading?: boolean;
+}

package/lib/cjs/types/tableCell.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/text.d.ts

@@ -0,0 +1,3 @@
+import { DOMAttributes, StyleProps } from './shared';
+export interface TextProps extends StyleProps, DOMAttributes {
+}

package/lib/cjs/types/text.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/AccordionGridGroup/AccordionGridGroup.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/AccordionGridGroup/AccordionGridGroup" />
+
+# AccordionGridGroup
+
+The AccordionGrid component combines the look and functionality of a grid with that of an accordion, and is a composite component with two children:
+- The header, which controls the expansion of the body.
+- The body, which renders the content.
+
+The purpose of this component is to allow keyboard interaction with the children passed into the body and header. Use it to pass complex or focusable components into an accordion component. 
+It should have clear, concise labels, and should not be used for small amounts of static text. Use [Box](./?path=/story/components-box--default) instead.
+
+### Required components
+
+This component requires the Header, Body and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | When focus is on the header panel of a collapsed section, these keys toggle the component. |
+| Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
+| Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
+| Arrow Keys | All components are accessible using arrow keys. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The accordion grid item header button uses the **`aria-selected`** attribute to indicate the selection state of the row.
+- The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- The **`aria-multiselectable`** attribute indicates that the user can toggle numerous items from the grid. 
+- The grid uses the **`aria-label`** attribute to provide an accessible name.

package/lib/components/AccordionGroup/Accordion.styles.js

@@ -41,8 +41,7 @@ var header = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
   color: 'neutral.10',
-  paddingLeft: '5px',
-  paddingRight: '5px',
+  padding: '0 5px',
   flexGrow: 0,
   fontWeight: 700,
   '&.is-hovered': {

package/lib/components/AccordionGroup/AccordionGroup.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/AccordionGroup/AccordionGroup" />
+
+# AccordionGroup
+
+Accordions are for grouping big chunks of content into easier-to-scan headers, which the user can expand when they want to read what is associated with that header.
+
+Accordions should be used:
+- To organize related information.
+- To shorten pages and reduce scrolling when it’s not crucial that users review the content.
+- When white space is at a minimum and content cannot be displayed all at once. 
+
+Accordions should not have focusable items as children.
+
+It is built on React Aria [useAccordion](https://reactspectrum.blob.core.windows.net/reactspectrum/d77b35e970e5549f66b47a83f07423f5c93b7297/docs/react-aria/useAccordion.html).
+
+### Required components
+
+This component requires Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | When focus is on the accordion header of a collapsed section, these keys expand the section. |
+| Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
+| Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- When expanded, the **`aria-controls`** attribute is added to the button pointing to the content. The button uses **`aria-label`** to provide an accessible name. 
+- The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.  

package/lib/components/ArrayField/ArrayField.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ArrayField/ArrayField" />
+
+# ArrayField
+
+The component displays array collections to provide useful functions and optimizations for arrays.
+
+ArrayField should:
+- Be used for dynamic-sized arrays/lists.
+- Be used with common array/list manipulations.
+- Be used to create an instance or collect information.
+
+### Required Components
+
+This component requires the appropriate field component ([TextField](./?path=/story/form-textfield--default) or [SelectField](./?path=/story/form-selectfield--default)) and the ArrayFieldDeleteButton. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | ---- |
+| Space or Enter | When focused, selects the item. |
+| Tab | Moves focus to the next focusable component and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The input uses the **`aria-invalid`** attribute to alert users that the values entered are not in the expected format.
+- The field and buttons use the **`aria-label`** attribute to provide accessible names.

package/lib/components/AstroWrapper/AstroWrapper.mdx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/AstroWrapper/AstroWrapper" />
+
+# AstroWrapper
+
+The AstroWrapper component provides a standard background, global styles, and the Astro theme, by default. This component should be used:
+- Sparingly and cautiously when altering the default theme.
+- With the **`themeOverrides`** prop to change some base theme properties.
+- When targeting multiple components on a global scale.
+
+It should not be used for minor CSS alterations. Use sx objects instead.
+
+### Required components 
+
+This component can be used independently and does not require additional components.

package/lib/components/Avatar/Avatar.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Avatar/Avatar" />
+
+# Avatar
+
+Avatars are graphical representations of a user, and are usually photos, illustrations, or the user’s initials. When photos or illustrations aren’t available, the user’s initials are used instead. 
+The alternate text used on the image cannot be empty as it describes the function/appearance of the image.
+
+This component is built on [Avatar from Theme-UI](https://theme-ui.com/components/avatar/).
+
+### Required components
+
+This component can be used independently and does not require additional components.