@pingux/astro 2.9.2 → 2.13.0-alpha.4

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.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "tooltipProps", "iconButtonProps"];
-import React, { forwardRef, useRef } from 'react';
-import { useFocusRing } from 'react-aria';
+var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps"];
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { FocusScope, mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { v4 as uuid } from 'uuid';
-import { Icon } from '../..';
-import IconButton from '../IconButton';
-import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
+import { Box, Icon, IconButton, PopoverContainer } from '../..';
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HelpIcon = function HelpIcon() {
   return ___EmotionJSX("svg", {
@@ -26,42 +28,158 @@ var HelpIcon = function HelpIcon() {
   }));
 };
 var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-    tooltipProps = props.tooltipProps,
+  var _context;
+  var align = props.align,
+    arrowCrossOffset = props.arrowCrossOffset,
+    children = props.children,
+    className = props.className,
+    closeDelay = props.closeDelay,
+    direction = props.direction,
+    hasNoArrow = props.hasNoArrow,
     iconButtonProps = props.iconButtonProps,
+    isDarkMode = props.isDarkMode,
+    isNotFlippable = props.isNotFlippable,
+    offset = props.offset,
+    popoverProps = props.popoverProps,
     others = _objectWithoutProperties(props, _excluded);
-  var tooltipId = uuid();
-  var buttonRef = useRef();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocusWithinOverlay = _useState2[0],
+    setIsFocusWithinOverlay = _useState2[1];
+  var _useFocusWithin = useFocusWithin({
+      onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {
+        return setIsFocusWithinOverlay(isFocusWithin);
+      }
+    }),
+    focusWithinProps = _useFocusWithin.focusWithinProps;
+  var overlayRef = useRef();
+  var triggerRef = useRef(null);
   var _useFocusRing = useFocusRing(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
-  var isTooltipOpen = isFocusVisible || isHovered;
-  return ___EmotionJSX(TooltipTrigger, _extends({
-    ref: ref,
-    direction: "top"
-  }, others, {
-    isOpen: isTooltipOpen
-  }, tooltipProps), ___EmotionJSX(IconButton, _extends({
-    ref: buttonRef,
-    variant: "hintButton",
+  var _useHover2 = useHover({}),
+    overlayHoverProps = _useHover2.hoverProps,
+    isOverlayHovered = _useHover2.isHovered;
+  var popoverState = useOverlayTriggerState({});
+  var open = popoverState.open,
+    close = popoverState.close,
+    isOpen = popoverState.isOpen;
+  var _useOverlayTrigger = useOverlayTrigger({
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
+
+  /* istanbul ignore next */
+  useImperativeHandle(ref, function () {
+    return triggerRef.current;
+  });
+
+  // Set a timeout to close the overlay upon hover / focus loss,
+  // but keep it open if the trigger or overlay are hovered again before it closes.
+  useEffect(function () {
+    var timeout;
+    if (isHovered || isOverlayHovered || isFocusWithinOverlay) {
+      open();
+    } else {
+      timeout = _setTimeout(close, closeDelay || 1000);
+    }
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [isHovered, isOverlayHovered, isFocusWithinOverlay, open, close, closeDelay]);
+  useEffect(function () {
+    if (isOpen) {
+      return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'true');
+    }
+    return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'false');
+  }, [isOpen]);
+  var _useOverlayPosition = useOverlayPosition({
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
+      offset: 15,
+      isOpen: isOpen,
+      onClose: close,
+      shouldUpdatePosition: true,
+      shouldFlip: !isNotFlippable
+    }),
+    positionProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement;
+  var _useStatusClasses = useStatusClasses(className, {
+      isDarkMode: isDarkMode
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({}, others, {
+    ref: ref
+  }), ___EmotionJSX(IconButton, _extends({
+    ref: triggerRef,
     "aria-label": "label help hint",
     "data-testid": "help-hint__button",
-    "aria-describedby": isTooltipOpen ? tooltipId : null
-  }, iconButtonProps, hoverProps, focusProps), ___EmotionJSX(Icon, {
+    variant: "hintButton"
+  }, mergeProps(triggerProps, iconButtonProps, focusProps, hoverProps)), ___EmotionJSX(Icon, {
     icon: HelpIcon
-  })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
-    role: "tooltip",
-    "aria-live": "polite",
-    id: tooltipId
-  }), children));
+  })), ___EmotionJSX(PopoverContainer, _extends({
+    arrowCrossOffset: arrowCrossOffset,
+    arrowProps: {
+      width: '8px',
+      height: '4px'
+    },
+    className: classNames,
+    direction: direction,
+    hasNoArrow: hasNoArrow,
+    isDismissable: !isOpen,
+    isNonModal: true,
+    isOpen: isOpen,
+    onClose: close,
+    placement: placement,
+    ref: overlayRef
+  }, mergeProps(overlayProps, positionProps, popoverProps, overlayHoverProps), focusWithinProps), ___EmotionJSX(FocusScope, {
+    restoreFocus: true,
+    autoFocus: isFocusVisible
+  }, ___EmotionJSX(Box, {
+    variant: "helpHint.popoverContainer"
+  }, children))));
 });
 HelpHint.propTypes = {
-  /** Props object that is spread directly into the tooltip element. */
-  tooltipProps: PropTypes.shape({}),
+  /** Props object that is spread directly into the popover element. */
+  popoverProps: PropTypes.shape({}),
   /** Props object that is spread directly into the IconButton element. */
-  iconButtonProps: PropTypes.shape({})
+  iconButtonProps: PropTypes.shape({}),
+  /** Defaults to true, displays dark popover with white text */
+  isDarkMode: PropTypes.bool,
+  /** Where the popover menu opens relative to its trigger. */
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  /**
+     * Whether the popover is prevented from flipping directions when insufficient space is
+     * available for the given `direction` placement.
+     */
+  isNotFlippable: PropTypes.bool,
+  /** Alignment of the popover menu relative to the trigger. */
+  align: PropTypes.oneOf(['start', 'end', 'middle']),
+  /**
+   * Allows to add an arrow to popover container
+   */
+  hasNoArrow: PropTypes.bool,
+  /** Popover offset relative to its trigger. */
+  offset: PropTypes.number,
+  /** Arrow offset relative to the left of the popover.
+   * Must be passed as a px or percentage. */
+  arrowCrossOffset: PropTypes.string,
+  /** The additional offset applied along the cross axis
+   * between the element and its anchor element. */
+  crossOffset: PropTypes.number,
+  /** Amount of time before the popover closes */
+  closeDelay: PropTypes.number
+};
+HelpHint.defaultProps = {
+  align: 'middle',
+  direction: 'top',
+  hasNoArrow: false,
+  isDarkMode: true,
+  isNotFlippable: false
 };
 export default HelpHint;

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 popover 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 **`aria-expanded`** to indicate the expansion and collapse of the popover.
+- The **`aria-live`** attribute announces the dynamic changes in live region content.
+