@pingux/astro 2.9.2 → 2.13.0-alpha.3

package/lib/components/NavBar/NavBar.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Navbar/Navbar" />
+
+# Navbar
+
+The NavBar component is primarily to navigate within apps.
+This component is built to have the NavBarSection component passed into it. NavBarSection is an iterative component with an array of objects passed into it.
+
+The NavBar should:
+- Be visually separate from the content.
+- Have descriptive titles describing the destination, action item or category.
+- Group navigation items into sections based on related categories.
+- Order content logically for a natural progression.
+
+### Required Components
+
+This component requires these components:
+- NavBarItem
+- NavBarItemLink
+- NavBarItemButton
+- NavBarSection
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | All of the content in the NavBar is focusable. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Toggles the component when the accordion is focused. |
+| Arrow keys | All components within the NavBar are accessible using arrow keys. |
+| Esc | Pressing the escape key when the accordion is open and focused collapses the component. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- Each Link component uses the **`aria-label`** attribute to provide an accessible name.
+- The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.

package/lib/components/NumberField/NumberField.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/NumberField/NumberField" />
+
+# NumberField
+ 
+This component is a variation of an input field that only accepts numeric values, and can be incremented and decremented using stepper buttons. 
+It uses the [useNumberField](https://react-spectrum.adobe.com/react-aria/useNumberField.html) component from React Aria and the [useNumberFieldState](https://react-spectrum.adobe.com/react-stately/useNumberFieldState.html) component from React Stately.
+
+The NumberFields should:
+- Be used when the users may not know exact values and need to adjust it relative to its current state.
+- Set a common default value when possible for proper context. For example, travel companies put the default number of passengers to 1. The default value is easily modified by typing into the field. 
+- Use formatOptions props to include unit symbols, as appropriate.
+- Have a clear and concise label to specify what value the user should enter.
+
+This component shouldn’t be used with other digit-based values like date, telephone, and Zip code.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The input is focusable using the Tab key and follows the page tab sequence. |
+| Arrow keys | Can be used to increment or decrement the numbers displayed in the field. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| Stepper buttons | Pressing and holding the stepper buttons allows continuous increments or decrements. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The input component uses the **`aria-labelledby`** attribute to reference the label.
+- The two icon buttons each use the **`aria-controls`** attribute with the input ID and the **`aria-label`** attribute to provide an accessible name.

package/lib/components/OverlayPanel/OverlayPanel.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/OverlayPanel/OverlayPanel" />
+
+# OverlayPanel
+
+OverlayPanel is a generic container component that can overlay other components on a page. 
+In Astro, this component is used to display detailed information and present modal interactions.
+
+**Note**: The way the OverlayPanel displays in Firefox browser differs from other browsers. This is a Storybook-only issue and will not affect the way it works in your application, but test your application in Chrome or Safari.
+
+This component should:
+- Be used to show content that is too long to put in a popover or modal.
+- Show content related to the state of the main view.
+
+This component should not:
+- Be overused, as it disrupts the user’s workflow.
+- Cover content that is contextually relevant to the overlay being displayed.
+
+### Required Components
+
+This component requires the OverlayProvider component.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | The trigger is focusable using the Tab key and follows the page tab sequence. |
+| Space or Enter | Opens or closes the panel when the trigger is focused. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Esc | Pressing the escape key closes the overlay and focuses on the previous focusable component. |
+
+#### Screen Readers
+
+The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of content.

package/lib/components/PasswordField/PasswordField.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/PasswordField/PasswordField" />
+
+# PasswordField
+ 
+The PasswordField component combines the Input, Label, IconButton and HelpText components to create a complete, form-ready solution.
+
+Password fields should specify requirements, whenever possible. 
+However, they should not allow users to disable the mask button in most cases, unless for a good reason. 
+This feature is helpful for smaller screens where the users are more likely to incorrectly enter their passwords than on a computer with a keyboard.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The input is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| Space or Enter | Toggles the PasswordType component to hide or reveal the input. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The input component uses the **`aria-labelledby`** attribute to reference the label ID.
+- The icon buttons use **`aria-label`** attribute to provide an accessible name.

package/lib/components/PopoverContainer/PopoverContainer.js

@@ -10,13 +10,12 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children"],
-  _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
+  _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isNonModal", "width", "direction", "sx"],
   _excluded3 = ["arrowCrossOffset", "sx", "direction"];
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, OverlayContainer, useModal, useOverlay } from 'react-aria';
-import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 
@@ -31,19 +30,8 @@ var PopoverContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref
   }, others), children));
 });
-PopoverContainer.propTypes = {
-  placement: PropTypes.string,
-  arrowProps: PropTypes.shape({}),
-  onClose: PropTypes.func,
-  isNotClosedOnBlur: PropTypes.bool,
-  hasNoArrow: PropTypes.bool,
-  isKeyboardDismissDisabled: PropTypes.bool,
-  isNonModal: PropTypes.bool,
-  isDismissable: PropTypes.bool,
-  width: PropTypes.string,
-  arrowCrossOffset: PropTypes.string,
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
-};
+
+// eslint-disable-next-line max-len
 export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -53,14 +41,12 @@ export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     isOpen = props.isOpen,
     hasNoArrow = props.hasNoArrow,
     isNotClosedOnBlur = props.isNotClosedOnBlur,
-    isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
     isNonModal = props.isNonModal,
-    isDismissable = props.isDismissable,
     width = props.width,
     direction = props.direction,
     sx = props.sx,
     others = _objectWithoutProperties(props, _excluded2);
-  var popoverRef = useRef();
+  var popoverRef = useRef(null);
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return popoverRef.current;
@@ -77,6 +63,9 @@ export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
       isOpen: isOpen
     }),
     classNames = _useStatusClasses.classNames;
+  if (!isOpen) {
+    return null;
+  }
   return isOpen && ___EmotionJSX(Box, _extends({}, mergeProps(others, overlayProps, modalProps), {
     variant: "popoverMenu.container",
     ref: popoverRef,
@@ -92,20 +81,6 @@ export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     direction: direction
   })));
 });
-PopoverWrapper.propTypes = {
-  placement: PropTypes.string,
-  arrowProps: PropTypes.shape({}),
-  isOpen: PropTypes.bool,
-  hasNoArrow: PropTypes.bool,
-  isNotClosedOnBlur: PropTypes.bool,
-  isKeyboardDismissDisabled: PropTypes.bool,
-  isNonModal: PropTypes.bool,
-  isDismissable: PropTypes.bool,
-  width: PropTypes.string,
-  arrowCrossOffset: PropTypes.string,
-  sx: PropTypes.shape({}),
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
-};
 PopoverWrapper.defaultProps = {
   placement: 'bottom'
 };
@@ -144,10 +119,4 @@ export var PopoverArrow = function PopoverArrow(props) {
     sx: _objectSpread(_objectSpread({}, arrowCrossOffset && calculateOffset()), sx)
   }));
 };
-PopoverArrow.propTypes = {
-  width: PropTypes.string,
-  arrowCrossOffset: PropTypes.string,
-  sx: PropTypes.shape({}),
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
-};
 export default PopoverContainer;

package/lib/components/PopoverMenu/PopoverMenu.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/PopoverMenu/PopoverMenu" />
+
+# PopoverMenu
+
+The PopoverMenu component serves as a wrapper for the Menu component and the associated trigger.
+It links the Menu's open state to the trigger's press state to provide the necessary overlay context. 
+It primarily uses the [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria 
+and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
+
+The PopoverMenu should:
+- Be triggered by a [Button](./?path=/docs/components-button--default) or [IconButton](./?path=/docs/components-iconbutton--default).
+- Include actionable labels, such as view, edit, and delete.
+
+The PopoverMenu shouldn’t have more than five options.
+
+### Required Components
+
+This component requires these components:
+
+- OverlayProvider
+- [Button](./?path=/docs/components-button--default)
+- [Menu](./?path=/docs/components-menu--default)
+- Item: This component originates from the [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html) and is exported within Astro.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | The trigger and menu items are focusable using the Tab key. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Pressing Space or Enter on a focused trigger opens or closes the menu and selects the MenuItems it is focused on. |
+| Arrow keys | Moves the selection through the popover. |
+| Esc | Pressing the escape key closes the popover and focuses on the previous focusable component. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The  **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.
+- The trigger uses the  **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- The menu ID is supplied to the  **`aria-controls`** attribute pointing to the content. 
+- The  **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
+- The default  **`aria-disabled`** attribute is set to “False” by default. 
+- The button ID is supplied to the  **`aria-labelledby`** attribute to reference it.
+
+

package/lib/components/RadioGroupField/RadioGroupField.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/RadioGroupField/RadioGroupField" />
+
+# RadioGroupField
+
+The RadioGroupField component allows users to select a single option from a list of mutually exclusive options. 
+This component uses [useRadioGroup](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html) from React Aria and [useRadioGroupState](https://react-spectrum.adobe.com/react-stately/useRadioGroupState.html) from React Stately.
+
+RadioGroupField should:
+- Offer at least two choices.
+- Have a clear label describing the context.
+- Include a None option, when appropriate.
+
+RadioGroupField shouldn’t be used to change state or set off an action. Nor should it be used to display a list of more than 6 options. If that’s the case, use the [SelectField](./?path=/story/form-selectfield--default) instead.
+
+### Required components
+
+This component requires the RadioField component.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA RadioGroup](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Arrow Keys | Once focused, the radio button can be selected using any of the arrow keys. |
+| Space | If the radio button is focused, pressing space selects or deselects it. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The **`aria-labelledby`** attribute is used to reference the label, and the **`aria-orientation`**  attribute is set to “Vertical” by default.
+- Each radio input also uses the **`aria-labelledby`** attribute pointing to its label.

package/lib/components/RequirementsList/RequirementsList.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/RequirementsList/RequirementsList" />
+
+# RequirementsList
+
+The RequirementsList component is used to display password requirements and includes indicators showing the requirement status.
+
+This list should:
+- Be sorted in a logical way that makes content easy to scan.
+- Have each item associated with an action.
+
+The list shouldn’t use punctuation at the end of each line.
+
+### Required Components
+
+This component can be used independently and does not require additional components.

package/lib/components/RockerButtonGroup/RockerButtonGroup.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/RockerButtonGroup/RockerButtonGroup" />
+
+# RockerButtonGroup
+
+This component handles a single selection state for a group of rocker buttons. It is intended to be used with the RockerButton component as children.
+
+This component should:
+- Be used for a single-item selection.
+- Contain concise labels.
+
+It shouldn’t be used as a replacement for RadioButton.
+
+### Required Components
+
+This component requires the RockerButton component.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | The group is focusable using the Tab key and follows the page tab sequence. |
+| Arrow keys & Enter or Space| After the RockerButtonGroup has focus, individual rocker buttons can be focused using the right and left arrow keys, and selected by either pressing the Enter key or Space. |
+| Arrow keys | The right and left arrow keys can loop back to the beginning and end of the group |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
+- The default **`aria-disabled`** attribute is set to “False” by default. 
+- The buttons use the **`aria-pressed`** attribute to indicate the current status of the toggle button.

package/lib/components/ScrollBox/ScrollBox.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ScrollBox/ScrollBox" />
+
+# ScrollBox
+
+The ScrollBox component is a container that allows users to scroll through content.
+
+This component should:
+- Be used for large amounts of text, such as disclaimers and terms of service.
+- Always have a visible scroll bar or default operating scroll bar.
+
+It shouldn’t rely on the user to scroll down to the end. Include important information in the visible area.
+
+### Required Components
+
+This component requires the [Box](./?path=/story/components-box--default) component.

package/lib/components/SearchField/SearchField.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/SearchField/SearchField" />
+
+# SearchField
+
+The SearchField component renders a search field with associated controls, including visual elements and keyboard interaction handlers.
+It is built with [useSearchField](https://react-spectrum.adobe.com/react-aria/useSearchField.html) from React Aria and [useSearchFieldState](https://react-spectrum.adobe.com/react-stately/useSearchFieldState.html) from React Stately.
+
+This component should be:
+- Used for searching and filtering.
+- Limited to a single use per page.
+
+It shouldn’t:
+- Use important information as placeholders. Once the search term is entered, the placeholder is no longer visible.
+- Be used if all the information is easily accessible and within view.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Enter or Space | Once the user starts typing, the previously hidden clear button can be focused and selected by pressing the Enter or Space key. |
+| Esc and Enter | The field can be cleared by pressing the Escape key and handles submit events on Enter. |

package/lib/components/SelectField/SelectField.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/SelectField/SelectField" />
+
+# SelectField
+
+The component allows items to be selected from a drop-down list and displayed in the field.
+It is a variation of the [LinkSelectField](./?path=/docs/form-linkselectfield--default) component that uses [useSelect](https://react-spectrum.adobe.com/react-aria/useSelect.html) from React Aria and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from React Stately and does not rely on native browsers or mobile implementations.
+
+The SelectField component should be used to present choices between mutually exclusive options.
+
+It shouldn’t be used:
+- When there are fewer than three options. Use the [RadioGroupField](./?path=/docs/form-radiogroupfield--default) component instead. 
+- If the user input can't be predicted using the preset values and the exact input value is important to specify, use the [TextField](./?path=/docs/form-textfield--default) component instead.
+- For large complex lists. The user should be able to easily scan and navigate the list. 
+If the list is large, use the [ComboBoxField](./?path=/docs/form-comboboxfield--default) component instead.
+
+### Required components
+
+This component requires the OverlayProvider and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| Space or Enter | Pressing Space or Enter when the trigger button is focused opens or closes the menu. Pressing Space or Enter when the menu item is focused selects the listbox option. |
+| Arrow keys | Can be used to move through the listbox selection. |
+| Typing in input field | Adds focus to it and opens the popover. |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first item in the listbox. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last item in the listbox. |
+| Esc | Pressing the escape key closes the popover menu and adds focus to the input.|
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-labelledby`** attribute to reference the label ID, the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover, 
+- The **`aria-haspopup`** attribute indicates the type of popup content as a listbox. Once expanded, the **`aria-controls`** attribute is added to the button pointing to the popover. 
+- The component uses the **`aria-invalid`** attribute to detect incorrect values or status errors, and is set to “False” by default.
+- The listbox uses the **`aria-labelledby`** attribute pointing to the label ID.
+- Each option in the list uses the **`aria-selected`** attribute to indicate the selection state, **`aria-posinset`** to give the option’s position in the current set of list items, and **`aria-setsize`** to define the current set of options. The default **`aria-disabled`** value is false for each option.

package/lib/components/Separator/Separator.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Separator/Separator" />
+
+# Separator
+
+The Separator component is a basic separator that accepts most of the styling props from [styled-system](https://styled-system.com/table).
+
+This component should be used to divide or group content within a page. However, it shouldn't be placed between the last component and the footer or between buttons.
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Screen Readers
+
+The **`aria-orientation`** attribute indicates whether the  orientation is horizontal, vertical, unknown, or ambiguous

package/lib/components/Stepper/Stepper.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Stepper/Stepper" />
+
+# Stepper
+
+The Stepper component acts as a wrapper for individual step components. 
+It is used to display progress through a sequence of logical and numbered steps, usually within a configuration wizard.
+
+This component should be used:
+- To reveal or hide sections of content.
+- For progressive disclosure.
+
+It shouldn’t have more than 6 steps or be used as a replacement for a static label or text.
+
+### Required Components
+
+This component requires the Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html) and [Text](./?path=/docs/components-text--default) components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Function |
+| ---- | ---- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
+| Shift + Tab | Moves focus to the previous focusable component.  |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first step. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-orientation`**  attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
+- Each step uses the **`aria-selected`**  attribute to indicate the selection status, and the **`aria-control`**  attribute is supplied with the associated panel ID that displays the content.
+- Each step uses the **`aria-labelledby`** with the label ID to reference it.

package/lib/components/SwitchField/SwitchField.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/SwitchField/SwitchField" />
+
+# SwitchField
+
+The SwitchField component combines a switch, label, and helper text for a complete solution. 
+
+This component should be used for:
+- Communicating activations and deactivations.
+- Describing changes with immediate response (setting applied, hidden functionality) without user confirmation. 
+
+It shouldn’t change labels while toggling between states, or have indeterminate partial states. It can only be on or off.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| Space | When focused, Space toggles the switched field. |
+
+#### Screen readers
+
+The hidden input uses the **`aria-labelledby`** attribute to associate the label, the **`aria-label`** attribute to provide an accessible name, 
+and the **`aria-checked`** attribute for the switched state.

package/lib/components/Table/Table.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Table/Table" />
+
+# Table
+
+Data tables display information in a grid-like format of rows and columns. 
+They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. 
+
+Column header names describe the type of content displayed in each column. 
+Each row contains data related to a single entity.
+
+Tables should:
+- Have consistently aligned content.
+- Use multiple heading rows for higher-level grouping of the columns.
+- Use column dividers sparingly.
+
+Tables shouldn’t use different indicators to represent empty fields.
+
+This basic component is rendered as an HTML `<table>`, which accepts the `<TableBody>` component and the `<TableHead>` as children.
+
+### Required Components
+
+This component requires these additional components: 
+
+- TableCaption
+- TableHead
+- TableRow
+- TableCell
+- TableBody

package/lib/components/TableCell/TableCell.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "isHeading"];
 import React from 'react';
-import PropTypes from 'prop-types';
 import Box from '../Box';
 
 /**
@@ -23,8 +22,4 @@ var TableCell = function TableCell(props) {
     as: isHeading ? 'th' : 'td'
   }, others), children);
 };
-TableCell.propTypes = {
-  /** Determines whether or not the html rendered is a th or td element. */
-  isHeading: PropTypes.bool
-};
 export default TableCell;