@pingux/astro 2.9.1 → 2.13.0-alpha.3

package/lib/components/ComboBoxField/ComboBoxField.mdx

@@ -0,0 +1,66 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ComboBoxField/ComboBoxField" />
+
+# ComboBoxField
+
+The ComboBoxField combines the features of a textbox and a listbox. 
+This component provides a more compact way to present a list of choices, as the list is hidden until you click the drop-down arrow.
+A combo box also gives you the ability to enter a value that is not in the list.
+
+Use this component for large complex lists, ideally sorted. Do not use this component:
+- If the list will never have more than 6 items.
+- With small lists where one option is pre-selected by default. Use the [RadioGroupField](./?path=/docs/form-radiogroupfield--default) instead.
+
+This component uses [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) from React
+Aria and [useComboBoxState](https://react-spectrum.adobe.com/react-stately/useComboBoxState.html)
+from React Stately.
+
+### Required Components
+
+This component is built using [useOverLayTrigger](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html), and requires the 
+react-aria [OverlayProvider](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html#:~:text=contained%20in%20an-,OverlayProvider,-%2C%20which%20is%20used), 
+exported from Astro 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 ComboBox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | ---- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Selects the component when it is focused. |
+| Down arrow | Opens the popover if it isn’t already open.  |
+| Up and down arrows | Can be used to move through the selection in the popover. |
+| 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 overlay and adds focus to the previously focused component. |
+
+#### Screen Readers
+This component uses the following attributes to assist screen readers:
+
+Input:
+- The input uses **`aria-expanded`** to indicate the expansion/collapse of the listbox. 
+- When expanded **`aria-controls`** is added to the input pointing to the ListBox.
+- The input has **`aria-labelledby`** supplied with label ID and **`aria-activedescendent`** identifies the currently focused option from the list. 
+- The label uses **`aria-hidden`** to hide its content from assistive technology.
+- The **`aria-autocomplete`** list model displays all the possible values in the pop-up list.
+- The Input has **`aria-invalid`** set to true when the entered value does not conform to the expected format.
+
+Button:
+- The trigger button uses **`aria-expanded`** to indicate the expansion/collapse of content.
+- The attribute **`aria-haspopup`** has “True” set as the value, which indicates that the type of popup content is a Listbox. 
+- The button and label ID are supplied to **`aria-labelledby`** to reference it.
+- When expanded **`aria-controls`** is added to the input pointing to the listbox.
+
+Option:
+- The ListBox has the label and its ID supplied to **`aria-labelledby`** and **`aria-label`** provides an accessible name to the component.
+- Each ListBox option has the default **`aria-disabled`** set as false and **`aria-selected`** to indicate the currently selected option.
+- The **`aria-posinset`** attribute defines an element's number or position in the current set of list items.
+- The **`aria-setsize`** attribute defines the number of items in the current set of list items.

package/lib/components/CopyText/CopyText.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CopyText/CopyText" />
+
+# CopyText
+
+CopyText allows users to copy information by clicking on the text or a nearby CopyButton. These components should have labels that match the action. 
+Do not override the colors used for this component for accessibility reasons, and ensure tooltip text is included.
+
+### Required Components
+
+This component requires the [Text](./?path=/docs/components-text--default) component. 
+
+### Accessibility
+
+#### Keyboard Navigation
+ 
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the button. |
+| Tab | Focuses the button and follows the page tab sequence.|

package/lib/components/DataTable/DataTable.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/DataTable/DataTable" />
+
+# DataTable
+
+DataTables are containers that display data in rows, columns, and cells, which allows users to quickly scan, sort, and compare information. This component was inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+from React Spectrum and build using [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+from React Stately.
+
+Columns are defined within the DataTableHeader component with the DataTableColumn component, and rows are defined within the DataTableBody component with the DataTableRow component. 
+Rows contain DataTableCell components that correspond to each column.
+
+DataTables should:
+- Contain vertically aligned content.
+- Use multiple heading rows for higher-level column groupings.
+- Use column dividers sparingly.
+
+They should not use different indicators to represent empty fields.
+
+### Required Components
+
+This component requires these additional React Spectrum components:
+- [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C) aliased DataTableHeader
+- [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C) aliased DataTableColumn
+- [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support) aliased DataTableCell
+- [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components) aliased DataTableRow
+- [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and) aliased DataTableBody
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. | 
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter  | Focuses the component and triggers an action if one is associated with it. |
+| Arrow keys | Can be used to navigate between the components in the table. |
+| Focus on a row and scroll down | Shifts the focus to the entire table, not the previously focused row. |
+| Home or page up | Shifts the focus to the first row. |
+| End or page down | Shifts the focus to the last visible row. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute is used to provide an accessible name.
+- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure. 
+- The DataTableHeader uses the **`aria-rowindex`** attribute and DataTableColumn uses the **`aria-colindex`** attribute to enumerate the header row and columns. 
+- In the body component, the DataTableRow uses the **`aria-labelledby`** attribute and the grid ID to identify the component and the **`aria-rowindex`** attribute is passed to each row.
+- Each DataTableCell uses the **`aria-colindex`** attribute to enumerate the columns within each row.
+

package/lib/components/DatePicker/DatePicker.mdx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/DatePicker/DatePicker" />
+
+# DatePicker
+
+Date pickers allow users to select specific past, present, or future dates. 
+This component combines the [Calendar](./?path=/docs/components-calendar--default) component with the DateField component and can be localized to meet your needs. 
+
+This component is built on [useDatePicker](https://react-spectrum.adobe.com/react-aria/useDatePicker.html) from React Aria 
+and [useDatePickerState](https://react-spectrum.adobe.com/react-stately/useDatePickerState.html) from React Stately. 
+
+Properties not specified are passed to the underlying DateField component.
+
+### Required components 
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA DatePicker](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Opens the popover when the trigger is focused, selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date. |
+| Pressing Home:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
+| Up and down Arrow keys | When segments are focused, it increments and decrements dates starting from the present day. |
+| Left and right arrows | Moves focus between segments. |
+| Page up | Changes the grid of dates to the previous month. |
+| Page down | Changes the grid of dates to the next month. |
+| Shift + page up | Changes the grid of dates to the same month in the previous year. |
+| Shift+ page down | Changes the grid of dates to the same month in the next year. |
+| Esc | Closes the overlay and shifts focus to the trigger. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+
+- The hidden input, DateField, and all three spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.
+- Each spin button has the **`aria-valuenow`** attribute that defines the current value and it is always used with its text alternative, **`aria-valuetext`**. 
+The spin buttons also have the **`aria-valuemin`** and **`aria-valuemax`** attributes to specify the minimum and maximum values allowed for a range widget.
+- The **`aria-selected`** attribute is added to the grid cell when a date is selected, and **`aria-disabled`** is set to “false” by default.

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -138,7 +138,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelectionChange: handleSelectionChange,
     selectedKeys: selectedKeys,
     selectionMode: 'single',
-    disallowEmptySelection: false
+    disallowEmptySelection: true,
+    allowDuplicateSelectionEvents: true
   };
   var listBoxState = useListState(listBoxProps);
 

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/EnvironmentBreadcrumb/EnvironmentBreadcrumb" />
+
+# EnvironmentBreadcrumb
+
+EnvironmentBreadcrumb shows users where they are within the environment hierarchy. 
+They take up little space but still provide context for the user’s place in the hierarchy, but should be treated as secondary navigation and never entirely replace the primary navigation.
+
+### Required components
+
+This component requires the [Badge](./?path=/docs/components-badge--default),
+[Box](./?path=/story/components-box--default), [Text](./?path=/docs/components-text--default) components and  
+Item 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 |
+| ---- | --------- |
+| Space or Enter  | Selects the breadcrumb item. |
+| Tab | Focuses the breadcrumb item and follows the page tab sequence. | 
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Arrow keys | Can be used to navigate between the items in the dropdown list. |
+| Esc | Closes the popover when it is expanded. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- Each breadcrumb item uses an **`aria-label`** attribute to provide an accessible name.
+- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- When expanded, **`aria-controls`** is added to the button pointing to the pop-up content.
+- The **`aria-haspopup`** attribute describes the type of content presented.

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -110,10 +110,7 @@ var environmentsWithSections = [{
   }]
 }];
 export var Default = function Default(args) {
-  var _useState = useState({
-      name: 'Snail',
-      isSandbox: true
-    }),
+  var _useState = useState(defaultEnvironments[0]),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEnvironment = _useState2[0],
     setSelectedEnvironment = _useState2[1];
@@ -156,10 +153,7 @@ export var Default = function Default(args) {
   });
 };
 export var DefaultClosed = function DefaultClosed(args) {
-  var _useState3 = useState({
-      name: 'Snail',
-      isSandbox: true
-    }),
+  var _useState3 = useState(defaultEnvironments[0]),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedEnvironment = _useState4[0],
     setSelectedEnvironment = _useState4[1];
@@ -211,9 +205,7 @@ export var WithSections = function WithSections() {
     _useState8 = _slicedToArray(_useState7, 2),
     filteredOptionsNumber = _useState8[0],
     setFilteredOptionsNumber = _useState8[1];
-  var _useState9 = useState({
-      name: 'Consumer Banking Prod'
-    }),
+  var _useState9 = useState(environmentsWithSections[0].options[0]),
     _useState10 = _slicedToArray(_useState9, 2),
     selectedEnvironment = _useState10[0],
     setSelectedEnvironment = _useState10[1];
@@ -317,10 +309,7 @@ export var OrgLevel = function OrgLevel() {
   });
 };
 export var DefaultOpen = function DefaultOpen() {
-  var _useState11 = useState({
-      name: 'Dog',
-      isSandbox: true
-    }),
+  var _useState11 = useState(defaultEnvironments[0]),
     _useState12 = _slicedToArray(_useState11, 2),
     selectedEnvironment = _useState12[0],
     setSelectedEnvironment = _useState12[1];
@@ -368,10 +357,7 @@ export var ControlledMenu = function ControlledMenu() {
     _useState14 = _slicedToArray(_useState13, 2),
     isOpen = _useState14[0],
     setIsOpen = _useState14[1];
-  var _useState15 = useState({
-      name: 'Shark',
-      isSandbox: true
-    }),
+  var _useState15 = useState(defaultEnvironments[0]),
     _useState16 = _slicedToArray(_useState15, 2),
     selectedEnvironment = _useState16[0],
     setSelectedEnvironment = _useState16[1];
@@ -416,32 +402,6 @@ export var ControlledMenu = function ControlledMenu() {
   });
 };
 export var RightAlignedBadges = function RightAlignedBadges(args) {
-  var _useState17 = useState({
-      name: 'Snail',
-      isSandbox: true
-    }),
-    _useState18 = _slicedToArray(_useState17, 2),
-    selectedEnvironment = _useState18[0],
-    setSelectedEnvironment = _useState18[1];
-  var envNode = ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Text, {
-    color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
-    variant: "environmentBadge",
-    bg: "neutral.40"
-  }) : null);
-  var findEnvObj = function findEnvObj(envName) {
-    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref11) {
-      var name = _ref11.name;
-      return name === envName;
-    });
-  };
-  var handleSelectionChange = function handleSelectionChange(newEnvName) {
-    var envObj = findEnvObj(newEnvName);
-    setSelectedEnvironment(_objectSpread({}, envObj));
-  };
   var items = [{
     name: 'Default'
   }, {
@@ -471,6 +431,30 @@ export var RightAlignedBadges = function RightAlignedBadges(args) {
   }, {
     name: 'Mouse'
   }];
+  var _useState17 = useState(items[0]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    selectedEnvironment = _useState18[0],
+    setSelectedEnvironment = _useState18[1];
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true,
+    key: selectedEnvironment.name
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+    label: "SANDBOX",
+    variant: "environmentBadge",
+    bg: "neutral.40"
+  }) : null);
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(items).call(items, function (_ref11) {
+      var name = _ref11.name;
+      return name === envName;
+    });
+  };
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
   return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
     items: items,
     name: "Globochem",

package/lib/components/FileInputField/FileInputField.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/FileInputField/FileInputField" />
+
+# FileInputField
+
+The FileInputField component allows users to upload files by clicking the button or dragging and dropping the files to a specific location. 
+We use [react-dropzone](https://react-dropzone.js.org/) for the drag-and-drop functionality.
+
+This component should have clear, concise file names and labels that guide users through the upload process, and should not allow users to upload executable files, such as .exe, .bin, .app files.
+
+### 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 | Focuses the field and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Selects the component when it is focused. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- This component uses the **`aria-label`** to provide an accessible name and has **`aria-labelledby`** attribute, supplied with the label ID.
+- Upon uploading the file, the Button component, with the name of the uploaded file, displays with **`aria-describedby`** attribute, which references the helpText if passed along. 
+- The delete button has an **`aria-label`** to provide an accessible name.

package/lib/components/HelpHint/HelpHint.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/HelpHint/HelpHint" />
+
+# HelpHint
+
+HelpHints display information intended to help users enter, select or provide the appropriate information in a field. This component can be customized, and consists of the [TooltipTrigger](./?path=/docs/components-tooltiptrigger--default) and [IconButton](./?path=/docs/components-iconbutton--default).
+
+When implementing this component, use short, clear language and a text size relative to the trigger button. They should not block important information when the tooltip displays, nor should it be used to communicate important information.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Aria Attribute | Role |
+| ---- | ---- |
+| Space or Enter | Selects the help hint. |
+| Tab | Focuses the help hint and follows the page tab sequence. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-desribedby`** attribute, which announces the tooltip text.
+- The **`aria-live`** attribute announces the dynamic changes in live region content.
+

package/lib/components/Icon/Icon.js

@@ -8,10 +8,10 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 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";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 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 } from 'react';
-import PropTypes from 'prop-types';
 import { useTShirtSize } from '../../hooks';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -21,7 +21,7 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
     sx = props.sx;
   var _useTShirtSize = useTShirtSize(props),
     sizeProps = _useTShirtSize.sizeProps;
-  var title = props.title || (IconComponent.type ? {
+  var title = props.title || (_typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
   } : null);
   return ___EmotionJSX(Box, _extends({
@@ -37,29 +37,6 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
     }, sx)
   }));
 });
-Icon.propTypes = {
-  /** The icon to render. */
-  icon: PropTypes.elementType.isRequired,
-  /**
-   * 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: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** A theme-aware prop to set the icon's color. */
-  color: PropTypes.string,
-  /**
-   * 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: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string
-  })
-};
 Icon.defaultProps = {
   size: 20
 };

package/lib/components/Icon/Icon.mdx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Icon/Icon" />
+
+# Icon
+
+Icons are small images that represent concepts or capabilities that often provide information or lead users to other pages within the application. 
+
+Icon should be:
+- Centrally aligned when used in a group with an appropriate amount of space between them.
+- Paired with text or a tooltip when its intention is not immediately evident. 
+- Relatively sized when used with text.
+
+Icon shouldn’t:
+- Include letters in the icon design.
+- Be randomly scaled to fit the layout.
+
+Regarding sizing, this component uses the **1em x 1em** container by default and maintains the aspect ratios. You can:
+
+- Use SVGR to import SVG files as React components and then pass them into icon components. 
+- Use the theme to color the icon.
+  
+  **Note**: Ensure that the dimensions in Webpack configuration file are set to false, or the icon cannot be resized using the size property. 
+  See [SVGR docs](https://react-svgr.com/docs/options/#dimensions) for more information. 
+- Import icons from the [Material UI Icon Library](https://materialdesignicons.com/)
+
+It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the available [props from Theme-UI](https://theme-ui.com/sx-prop).
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Labelling
+
+The Icon component accepts the title prop:
+`title={{ id: 'unique id', name: 'short description of the icon'}}`.
+The `name` will be passed inside `<title>` element of the SVG.
+The `id` is optional. If not specified, it will be generated automatically.
+This is needed to make SVG icon accessible.
+
+#### Screen Readers
+
+If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+
+
+
+

package/lib/components/IconBadge/IconBadge.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/IconBadge/IconBadge" />
+
+# IconBadge
+
+IconBadge is a pair of overlapping icons. It should be paired with text or a [tooltip](./?path=/story/components-tooltiptrigger--icon-with-tooltip) when its meaning is unclear.
+It should only have Icon as a child component.
+
+The component follows the same pattern as icons. Check [Icon](./?path=/docs/components-icon--default) component for best practices.
+
+### Required Components
+
+This component requires the [Icon](./?path=/story/components-icon--default) component. 

package/lib/components/IconButton/IconButton.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/IconButton/IconButton" />
+
+# IconButton
+
+The component combines the functionality of a [Button](./?path=/docs/components-button--default) and an [Icon](./?path=/story/components-icon--default). 
+This component applies specific styles necessary for icons and changes the behavior pattern for buttons and ensures compatibility across browsers and devices. 
+
+IconButtons should:
+- Use meaningful symbols that represent a basic idea or concept.
+- Include a title rendered as a tooltip when more descriptive information is needed.
+- Use an **aria-label** or **aria-labelledby** attribute to provide a label or label ID.
+
+IconButtons should not include anything other than an [Icon](.?path=/docs/components-icon--default) as a child component. If you need to pair an icon with text inside a button, review the [Button](./?path=/docs/components-button--default) component.
+
+### Required Components
+
+This component requires the [Icon](./?path=/story/components-icon--default) component. 
+
+### Accessibility
+This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the icon button. |
+| Tab | Focuses the icon button and follows the page tab sequence. |
+
+#### Screen Readers
+
+This component uses the **`aria-label`** to provide an accessible name.

package/lib/components/IconButtonToggle/IconButtonToggle.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/IconButtonToggle/IconButtonToggle" />
+
+# IconButtonToggle
+
+The component combines the functionality of an IconButton and two conditionally toggled Icons.
+It uses [Icon](./?path=/story/components-icon--default) component under the hood and users can change its property via `iconProps` prop.
+
+### Required Components
+
+This component can be used independently and does not require additional components.  
+
+### Accessibility
+This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the component. |
+| Tab | Focuses the component and follows the page tab sequence. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- This component uses the **`aria-label`** to provide an accessible name, which toggles based on the toggle state.
+- The **`aria-labelledby`** attribute is used to provide the label ID.
+
+
+

package/lib/components/Image/Image.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Image/Image" />
+
+# Image
+
+Image fields are used to display images, such as photos, screen captures, and diagrams. 
+
+Images should:
+- Be clear and easy to read if text is included. 
+- Aim to be one of the five ratios: 1:1, 3:2, 16:9, 21:9, 3:1.
+
+Images should not:
+- Include long paragraphs of text over the image. Ideally, when placing text over an image, the text contrast ratio should meet [AA standards](https://www.w3.org/WAI/WCAG21/Techniques/general/G18).
+- Be used to represent concepts or capabilities using small and simple graphics. Use an [Icon](./?path=/docs/components-icon--default) instead.
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`alt`** attribute specifies an alternate text for the image.
+
+