@pingux/astro 2.9.2 → 2.13.0-alpha.4

package/lib/cjs/components/Icon/Icon.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
@@ -17,13 +17,13 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 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) { (0, _defineProperty2["default"])(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; }
 var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -32,7 +32,7 @@ var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx = props.sx;
   var _useTShirtSize = (0, _hooks.useTShirtSize)(props),
     sizeProps = _useTShirtSize.sizeProps;
-  var title = props.title || (IconComponent.type ? {
+  var title = props.title || ((0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
   } : null);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
@@ -48,29 +48,6 @@ var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, sx)
   }));
 });
-Icon.propTypes = {
-  /** The icon to render. */
-  icon: _propTypes["default"].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["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-  /** A theme-aware prop to set the icon's color. */
-  color: _propTypes["default"].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["default"].shape({
-    id: _propTypes["default"].string,
-    name: _propTypes["default"].string
-  })
-};
 Icon.defaultProps = {
   size: 20
 };

package/lib/cjs/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/cjs/components/Icon/Icon.stories.d.ts

@@ -0,0 +1,8 @@
+import { Story } from '@storybook/react';
+import { IconProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: Story<IconProps>;
+export declare const SVGIcons: Story;
+export declare const Sizes: Story;
+export declare const CommonlyUsed: Story;

package/lib/cjs/components/Icon/Icon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Icon';

package/lib/cjs/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/cjs/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/cjs/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/cjs/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.
+
+

package/lib/cjs/components/ImageUploadField/ImageUploadField.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ImageUploadField/ImageUploadField" />
+
+# ImageUploadField
+
+The ImageUploadField component is a variation of the [FileInputField](./?path=/docs/form-fileinputfield--default) used for uploading images. 
+
+### Required components
+
+This component requires the OverlayProvider component. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Space or Enter | When the trigger is focused, the file browser opens. When the menu item is focused, it triggers an action. |
+| Down arrow | After uploading, pressing the Down arrow with a focused trigger opens the popover menu. |
+| Arrow keys | Can be used to move the selection in the popover. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| 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 trigger. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The input uses the **`aria-labelledby`** attribute to reference the label.
+- The trigger button uses the **`aria-label`** attribute to provide an accessible name.
+- The **`aria-expanded`** attribute is used to indicate the expansion or collapse of the popover.
+- The **`aria-haspopup`** attribute indicates the type of popup content as a menu. Once expanded, **`aria-controls`** is added to the button pointing to the popover. 
+- The menu uses vertical **`aria-orientation`** by default, and each menu item has a “False” **`aria-disabled`** value. 

package/lib/cjs/components/Link/Link.mdx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Link/Link" />
+
+# Link
+
+This basic link component is built on [Link from Theme-UI](https://theme-ui.com/components/link) and [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) from React Aria.
+
+Links should:
+- Have the same font size as surrounding text when used inline.
+- Be considerate of the screen reader. Write descriptive link text and alternate text.
+
+Link shouldn’t be used in titles, and preferably used within the body text.
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+This component adheres to [WAI-ARIA Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the link. |
+| Tab | Focuses the link and follows the page tab sequence. |

package/lib/cjs/components/Link/Link.styles.js

@@ -42,8 +42,18 @@ var web = _objectSpread(_objectSpread({}, app), {}, {
   },
   '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline)
 });
+var popover = _objectSpread(_objectSpread({}, app), {}, {
+  color: 'white',
+  fontSize: 'sm',
+  fontWeight: 1,
+  textDecoration: 'underline',
+  '&.is-hovered': {
+    cursor: 'pointer'
+  }
+});
 var _default = {
   app: app,
+  popover: popover,
   web: web
 };
 exports["default"] = _default;

package/lib/cjs/components/LinkSelectField/LinkSelectField.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/LinkSelectField/LinkSelectField" />
+
+# LinkSelectField
+
+The LinkSelectField component collects information from a dropdown menu of options using [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. 
+It does not rely on native browser or mobile implementations.
+
+This component should be used to limit the options available to users. 
+It should not be used:
+- When there are fewer than 3 options for the user to choose from: 
+  - Use the [RadioGroupField](./?path=/docs/form-radiogroupfield--default) if users must choose 1 option. 
+  - Use the [CheckBoxField](./?path=/docs/form-checkboxfield--default) if users can choose more than 1 option. 
+- If the exact input value is important to specify, use the [TextField](./?path=/docs/form-textfield--default).
+
+### 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 | Focuses the field and follows the page tab sequence. |
+| Space or Enter | When the trigger is focused, the menu opens or closes. When the menu item is focused, it selects the listbox option. |
+| Arrow keys | Can be used to move the selection in the listbox. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| 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 previously focused component.|
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover menu, the  **`aria-label`** attribute to provide an accessible name, and the  **`aria-labelledby`** attribute to reference the label.
+- The **`aria-haspopup`** attribute indicates the type of popup content as a listbox.
+- A visually hidden DismissButton is added for screen reader users to close the overlay in the absence of a dismiss button.
+- The listbox in the popover uses the **`aria-labelledby`** attribute, which also references the label.
+- Each option 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 **`aria-disabled`** attribute value is “False” for each option, by default.

package/lib/cjs/components/ListItem/ListItem.mdx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ListItem/ListItem" />
+
+# ListItem
+
+ListItems are items that display within the [ListView](./?path=/docs/components-listview--default) component. 
+This component accepts most of its styling properties from [Styled System](https://styled-system.com/table/). 
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the item. |
+| Tab | Focuses item and follows the page tab sequence. |

package/lib/cjs/components/ListView/ListView.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ListView/ListView" />
+
+# ListView
+
+ListViews are used to display a list of items. Users can select, view, or edit items in this list.
+This virtualized component supports asynchronous data in infinitely scrollable lists. 
+
+This component should:
+- Be used to list items that contain a significant amount of information within them.
+- Be able to access ListItem information.
+
+It shouldn’t be used to list items that only have a single piece of information.
+
+### Required Components
+
+This component requires [ListItem](./?path=/docs/components-listitem--default).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA ListBox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the item. |
+| Tab | Focuses item and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Arrow keys | Can be used to move the selection in the menu.  |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first row. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | 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 **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid. 
+- Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows. 
+- Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component’s column position and aria-selected to indicate the currently selected state.