@pingux/astro 2.73.0 → 2.74.0-alpha.1

package/lib/cjs/components/PopoverMenu/PopoverMenu.js

@@ -61,7 +61,7 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       targetRef: triggerRef,
       overlayRef: menuPopoverRef,
       scrollRef: menuRef,
-      offset: 15,
+      offset: 5,
       placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
       // Our API preference is for default false so we invert this since it should be default true
       shouldFlip: !isNotFlippable,

package/lib/cjs/components/PopoverMenu/PopoverMenu.mdx

@@ -1,19 +1,23 @@
-import { Meta } from '@storybook/addon-docs';
+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 
+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.
+The PopoverMenu shouldn’t:
+
+- Have more than five options.
+- Have a disabled menu item, because there is no way of explaining why it is disabled.
 
 ### Required Components
 
@@ -32,22 +36,21 @@ This component should adhere to the [WAI-ARIA Dialog](https://www.w3.org/WAI/ARI
 
 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. |
+| 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. |
+| 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.
-
 
+- 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/cjs/components/PopoverMenu/PopoverMenu.stories.d.ts

@@ -8,5 +8,3 @@ export declare const Controlled: StoryFn;
 export declare const Placement: StoryFn;
 export declare const NotFlippable: StoryFn;
 export declare const NotClosedOnSelect: StoryFn;
-export declare const DisabledItem: StoryFn;
-export declare const isPressed: StoryFn;

package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.js

@@ -8,9 +8,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPressed = exports["default"] = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DisabledItem = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _DotsVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsVerticalIcon"));
 var _addonActions = require("@storybook/addon-actions");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -55,7 +56,16 @@ var Default = function Default(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
       onAction: (0, _addonActions.action)('onAction')
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
@@ -82,8 +92,18 @@ var DefaultOpen = function DefaultOpen() {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
       isDefaultOpen: true
-    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
-      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['duplicate']
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
     }, "Edit"), (0, _react2.jsx)(_index.Item, {
@@ -108,7 +128,16 @@ var Controlled = function Controlled() {
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
       isOpen: isOpen,
       onOpenChange: setIsOpen
-    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
       onAction: (0, _addonActions.action)('onAction')
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
@@ -129,7 +158,16 @@ var Placement = function Placement() {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
       direction: "left"
-    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
       onAction: (0, _addonActions.action)('onAction')
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
@@ -151,7 +189,16 @@ var NotFlippable = function NotFlippable() {
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
       direction: "left",
       isNotFlippable: true
-    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
       onAction: (0, _addonActions.action)('onAction')
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
@@ -172,7 +219,16 @@ var NotClosedOnSelect = function NotClosedOnSelect() {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
       isNotClosedOnSelect: true
-    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
       onAction: (0, _addonActions.action)('onAction')
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
@@ -186,45 +242,4 @@ var NotClosedOnSelect = function NotClosedOnSelect() {
     }, "Delete")))))
   );
 };
-exports.NotClosedOnSelect = NotClosedOnSelect;
-var DisabledItem = function DisabledItem() {
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
-      onAction: (0, _addonActions.action)('onAction'),
-      disabledKeys: ['duplicate']
-    }, (0, _react2.jsx)(_index.Item, {
-      key: "edit"
-    }, "Edit"), (0, _react2.jsx)(_index.Item, {
-      key: "duplicate"
-    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
-      key: "delete",
-      textValue: "delete"
-    }, (0, _react2.jsx)(_index.Text, {
-      color: "critical.bright"
-    }, "Delete")))))
-  );
-};
-exports.DisabledItem = DisabledItem;
-var isPressed = function isPressed() {
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
-      onAction: (0, _addonActions.action)('onAction'),
-      disabledKeys: ['duplicate']
-    }, (0, _react2.jsx)(_index.Item, {
-      key: "edit",
-      isPressed: true
-    }, "Edit"), (0, _react2.jsx)(_index.Item, {
-      key: "duplicate"
-    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
-      key: "delete",
-      textValue: "delete"
-    }, (0, _react2.jsx)(_index.Text, {
-      color: "critical.bright"
-    }, "Delete")))))
-  );
-};
-exports.isPressed = isPressed;
+exports.NotClosedOnSelect = NotClosedOnSelect;

package/lib/cjs/components/PopoverMenu/PopoverMenu.test.js

@@ -28,7 +28,7 @@ test('renders a popover menu when trigger is clicked', function () {
   expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
   expect(_testWrapper.screen.queryByRole('presentation')).toBeVisible();
   expect(_testWrapper.screen.queryByRole('presentation')).toHaveStyle({
-    top: '15px'
+    top: '5px'
   });
   // Should have two accessible dismiss buttons applied (in addition to the trigger button)
   expect(_testWrapper.screen.queryAllByRole('button')).toHaveLength(3);

package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.d.ts

@@ -5,5 +5,5 @@ export default _default;
 export declare const Default: StoryFn<RockerButtonGroupProps>;
 export declare const Uncontrolled: StoryFn;
 export declare const Controlled: StoryFn;
-export declare const withCustomSelectedColors: StoryFn;
 export declare const DisabledSingleButton: StoryFn;
+export declare const customColors: StoryFn;

package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withCustomSelectedColors = exports["default"] = exports.Uncontrolled = exports.DisabledSingleButton = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.customColors = exports.Uncontrolled = exports.DisabledSingleButton = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -93,7 +93,23 @@ var Controlled = function Controlled() {
   }, "Maybe"));
 };
 exports.Controlled = Controlled;
-var withCustomSelectedColors = function withCustomSelectedColors() {
+var DisabledSingleButton = function DisabledSingleButton() {
+  return (0, _react2.jsx)(_index.RockerButtonGroup, {
+    defaultSelectedKey: "or",
+    disabledKeys: ['and']
+  }, (0, _react2.jsx)(_index.RockerButton, {
+    name: "and",
+    key: "and"
+  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+    name: "or",
+    key: "or"
+  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+    name: "maybe",
+    key: "maybe"
+  }, "Maybe"));
+};
+exports.DisabledSingleButton = DisabledSingleButton;
+var customColors = function customColors() {
   return (0, _react2.jsx)(_index.RockerButtonGroup, null, (0, _react2.jsx)(_index.RockerButton, {
     name: "and",
     key: "and",
@@ -110,25 +126,8 @@ var withCustomSelectedColors = function withCustomSelectedColors() {
     name: "maybe",
     key: "maybe",
     selectedStyles: {
-      bg: 'accent.30',
-      color: 'yellow'
+      bg: 'decorative.4'
     }
   }, "Maybe"));
 };
-exports.withCustomSelectedColors = withCustomSelectedColors;
-var DisabledSingleButton = function DisabledSingleButton() {
-  return (0, _react2.jsx)(_index.RockerButtonGroup, {
-    defaultSelectedKey: "or",
-    disabledKeys: ['and']
-  }, (0, _react2.jsx)(_index.RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-exports.DisabledSingleButton = DisabledSingleButton;
+exports.customColors = customColors;

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -50,7 +50,7 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
       targetRef: triggerRef,
       overlayRef: menuPopoverRef,
       scrollRef: menuRef,
-      offset: 15,
+      offset: 5,
       placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
       // Our API preference is for default false so we invert this since it should be default true
       shouldFlip: !isNotFlippable,

package/lib/components/PopoverMenu/PopoverMenu.mdx

@@ -1,19 +1,23 @@
-import { Meta } from '@storybook/addon-docs';
+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 
+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.
+The PopoverMenu shouldn’t:
+
+- Have more than five options.
+- Have a disabled menu item, because there is no way of explaining why it is disabled.
 
 ### Required Components
 
@@ -32,22 +36,21 @@ This component should adhere to the [WAI-ARIA Dialog](https://www.w3.org/WAI/ARI
 
 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. |
+| 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. |
+| 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.
-
 
+- 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/PopoverMenu/PopoverMenu.stories.js

@@ -1,9 +1,10 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
+import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
 import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Button, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import { Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import PopoverMenuReadme from './PopoverMenu.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -41,7 +42,16 @@ export var Default = function Default(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
     }, ___EmotionJSX(Item, {
       key: "edit"
@@ -67,8 +77,18 @@ export var DefaultOpen = function DefaultOpen() {
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       isDefaultOpen: true
-    }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
-      onAction: action('onAction')
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
+      onAction: action('onAction'),
+      disabledKeys: ['duplicate']
     }, ___EmotionJSX(Item, {
       key: "edit"
     }, "Edit"), ___EmotionJSX(Item, {
@@ -92,7 +112,16 @@ export var Controlled = function Controlled() {
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       isOpen: isOpen,
       onOpenChange: setIsOpen
-    }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
     }, ___EmotionJSX(Item, {
       key: "edit"
@@ -112,7 +141,16 @@ export var Placement = function Placement() {
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       direction: "left"
-    }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
     }, ___EmotionJSX(Item, {
       key: "edit"
@@ -133,7 +171,16 @@ export var NotFlippable = function NotFlippable() {
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       direction: "left",
       isNotFlippable: true
-    }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
     }, ___EmotionJSX(Item, {
       key: "edit"
@@ -153,7 +200,16 @@ export var NotClosedOnSelect = function NotClosedOnSelect() {
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       isNotClosedOnSelect: true
-    }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
     }, ___EmotionJSX(Item, {
       key: "edit"
@@ -166,43 +222,4 @@ export var NotClosedOnSelect = function NotClosedOnSelect() {
       color: "critical.bright"
     }, "Delete")))))
   );
-};
-export var DisabledItem = function DisabledItem() {
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
-      onAction: action('onAction'),
-      disabledKeys: ['duplicate']
-    }, ___EmotionJSX(Item, {
-      key: "edit"
-    }, "Edit"), ___EmotionJSX(Item, {
-      key: "duplicate"
-    }, "Duplicate"), ___EmotionJSX(Item, {
-      key: "delete",
-      textValue: "delete"
-    }, ___EmotionJSX(Text, {
-      color: "critical.bright"
-    }, "Delete")))))
-  );
-};
-export var isPressed = function isPressed() {
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
-      onAction: action('onAction'),
-      disabledKeys: ['duplicate']
-    }, ___EmotionJSX(Item, {
-      key: "edit",
-      isPressed: true
-    }, "Edit"), ___EmotionJSX(Item, {
-      key: "duplicate"
-    }, "Duplicate"), ___EmotionJSX(Item, {
-      key: "delete",
-      textValue: "delete"
-    }, ___EmotionJSX(Text, {
-      color: "critical.bright"
-    }, "Delete")))))
-  );
 };

package/lib/components/PopoverMenu/PopoverMenu.test.js

@@ -25,7 +25,7 @@ test('renders a popover menu when trigger is clicked', function () {
   expect(screen.queryByRole('presentation')).toBeInTheDocument();
   expect(screen.queryByRole('presentation')).toBeVisible();
   expect(screen.queryByRole('presentation')).toHaveStyle({
-    top: '15px'
+    top: '5px'
   });
   // Should have two accessible dismiss buttons applied (in addition to the trigger button)
   expect(screen.queryAllByRole('button')).toHaveLength(3);

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -76,7 +76,22 @@ export var Controlled = function Controlled() {
     key: "maybe"
   }, "Maybe"));
 };
-export var withCustomSelectedColors = function withCustomSelectedColors() {
+export var DisabledSingleButton = function DisabledSingleButton() {
+  return ___EmotionJSX(RockerButtonGroup, {
+    defaultSelectedKey: "or",
+    disabledKeys: ['and']
+  }, ___EmotionJSX(RockerButton, {
+    name: "and",
+    key: "and"
+  }, "And"), ___EmotionJSX(RockerButton, {
+    name: "or",
+    key: "or"
+  }, "Or"), ___EmotionJSX(RockerButton, {
+    name: "maybe",
+    key: "maybe"
+  }, "Maybe"));
+};
+export var customColors = function customColors() {
   return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
     name: "and",
     key: "and",
@@ -93,23 +108,7 @@ export var withCustomSelectedColors = function withCustomSelectedColors() {
     name: "maybe",
     key: "maybe",
     selectedStyles: {
-      bg: 'accent.30',
-      color: 'yellow'
+      bg: 'decorative.4'
     }
   }, "Maybe"));
-};
-export var DisabledSingleButton = function DisabledSingleButton() {
-  return ___EmotionJSX(RockerButtonGroup, {
-    defaultSelectedKey: "or",
-    disabledKeys: ['and']
-  }, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.73.0",
+  "version": "2.74.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",

package/lib/cjs/components/Menu/Menu.stories.d.ts

@@ -1,5 +0,0 @@
-import { StoryFn } from '@storybook/react';
-import { MenuProps } 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: StoryFn<MenuProps>;

package/lib/cjs/components/Menu/Menu.stories.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _reactStately = require("react-stately");
-var _storybookAddonDesigns = require("storybook-addon-designs");
-var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks");
-var _Menu = _interopRequireDefault(require("./Menu.mdx"));
-var _menuAttributes = require("./menuAttributes");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Components/Menu',
-  component: _index.Menu,
-  decorators: [_storybookAddonDesigns.withDesign],
-  parameters: {
-    actions: {
-      argTypesRegex: '^on.*'
-    },
-    docs: {
-      page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Menu["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
-      }
-    },
-    design: {
-      type: 'figma'
-    }
-  },
-  argTypes: _menuAttributes.menuArgTypes
-};
-exports["default"] = _default;
-var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({
-    "aria-label": "Example Menu"
-  }, args), (0, _react2.jsx)(_reactStately.Item, {
-    key: "edit",
-    textValue: "Edit",
-    "data-id": "edit"
-  }, (0, _react2.jsx)(_index.Text, null, "Edit")), (0, _react2.jsx)(_reactStately.Item, {
-    key: "duplicate",
-    textValue: "Duplicate",
-    "data-id": "duplicate"
-  }, (0, _react2.jsx)(_index.Text, null, "Duplicate")), (0, _react2.jsx)(_reactStately.Item, {
-    key: "delete",
-    textValue: "Delete",
-    "data-id": "delete"
-  }, (0, _react2.jsx)(_index.Text, {
-    color: "critical.bright"
-  }, "Delete")));
-};
-exports.Default = Default;
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.menu["default"]
-  }
-};

package/lib/components/Menu/Menu.stories.js

@@ -1,57 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
-import { Item } from 'react-stately';
-import { withDesign } from 'storybook-addon-designs';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Menu, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import MenuReadme from './Menu.mdx';
-import { menuArgTypes } from './menuAttributes';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/Menu',
-  component: Menu,
-  decorators: [withDesign],
-  parameters: {
-    actions: {
-      argTypesRegex: '^on.*'
-    },
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(MenuReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
-      }
-    },
-    design: {
-      type: 'figma'
-    }
-  },
-  argTypes: menuArgTypes
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(Menu, _extends({
-    "aria-label": "Example Menu"
-  }, args), ___EmotionJSX(Item, {
-    key: "edit",
-    textValue: "Edit",
-    "data-id": "edit"
-  }, ___EmotionJSX(Text, null, "Edit")), ___EmotionJSX(Item, {
-    key: "duplicate",
-    textValue: "Duplicate",
-    "data-id": "duplicate"
-  }, ___EmotionJSX(Text, null, "Duplicate")), ___EmotionJSX(Item, {
-    key: "delete",
-    textValue: "Delete",
-    "data-id": "delete"
-  }, ___EmotionJSX(Text, {
-    color: "critical.bright"
-  }, "Delete")));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.menu["default"]
-  }
-};