@pingux/astro 2.5.5 → 2.5.6-alpha.1

package/lib/components/Messages/Messages.stories.js

@@ -18,9 +18,11 @@ import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values"
 import React, { useEffect, useReducer, useState } from 'react';
 import { Item } from 'react-stately';
 import AccountIcon from 'mdi-react/AccountIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Messages } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
+import MessagesReadme from './Messages.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Messages',
@@ -39,6 +41,9 @@ export default {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(MessagesReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Modal/Modal.js

@@ -23,12 +23,6 @@ import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Text from '../Text';
-
-/**
-  * Modals are overlays that interrupt a user’s workflow to convey an important message.
-  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
-  * such as Button.
-*/
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Modal/Modal.stories.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../hooks';
 import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
+import ModalReadme from './Modal.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal',
   component: Modal,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ModalReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     title: {
       control: {

package/lib/components/NavBar/NavBar.js

@@ -12,16 +12,6 @@ import useNavBarStyling from '../../hooks/useNavBarStyling/useNavBarStyling';
 import useProgressiveState from '../../hooks/useProgressiveState';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
-
-/**
- * Composed component that spreads children.
- *
- * This component is built to have the NavBarSection component passed into it.
- *
- * NavBarSection is an iterative component that using
- * an array of objects that is passed into it.
- *
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBar = function NavBar(props) {
   var defaultSelectedKey = props.defaultSelectedKey,

package/lib/components/NavBar/NavBar.stories.js

@@ -11,7 +11,9 @@ import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
 import ViewGridPlusOutline from 'mdi-react/ViewGridPlusOutlineIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
+import NavBarReadme from './NavBar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   component: NavBar,
@@ -20,7 +22,14 @@ export default {
     NavBarItemLink: NavBarItemLink,
     NavBarItemButton: NavBarItemButton
   },
-  title: 'Components/NavBar'
+  title: 'Components/NavBar',
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NavBarReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
 };
 var Credentials = function Credentials(props) {
   return ___EmotionJSX("svg", _extends({

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -9,14 +9,6 @@ import PropTypes from 'prop-types';
 import { Box } from '../..';
 import { useOverlayPanelState, useStatusClasses } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
-
-/**
- * In Astro, side panels are used to show details and present modal interactions.
- *
- * Note: The way the OverlayPanel displays in the Firefox browser differs from other browsers.
- * This is a Storybook only issue and will not effect the way it works in your app. Be sure to
- * use Chrome or Safari to view how this component works.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -9,10 +9,12 @@ import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import CogIcon from 'mdi-react/CogIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
 import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import OverlayPanelReadme from './OverlayPanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/OverlayPanel',
@@ -35,6 +37,9 @@ export default {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayPanelReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -19,13 +19,6 @@ import { PressResponder } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import PopoverContainer from '../PopoverContainer';
-
-/**
- * The PopoverMenu serves as a wrapper around a Menu and its associated trigger, linking the Menu's
- * open state with the trigger's press state and providing necessary overlay context.
- *
- * Primarily utilizes [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.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;

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

@@ -1,13 +1,18 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Button, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import PopoverMenuReadme from './PopoverMenu.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/PopoverMenu',
   component: PopoverMenu,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverMenuReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/RequirementsList/RequirementsList.js

@@ -24,11 +24,6 @@ import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import Icon from '../Icon';
 import Text from '../Text';
-
-/**
- * List of requirements for a password, with indicators that can change to show when
- * requirements are satisfied.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -1,26 +1,35 @@
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RequirementsList } from '../../index';
+import RequirementsListReadme from './RequirementsList.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/RequirementsList',
   component: RequirementsList,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RequirementsListReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     requirements: {
       control: {
         type: 'object'
       },
       defaultValue: [{
-        'name': 'requirement 1',
-        'status': 'default'
+        name: 'requirement 1',
+        status: 'default'
       }, {
-        'name': 'requirement 2',
-        'status': 'warning'
+        name: 'requirement 2',
+        status: 'warning'
       }, {
-        'name': 'requirement 3',
-        'status': 'error'
+        name: 'requirement 3',
+        status: 'error'
       }, {
-        'name': 'requirement 4',
-        'status': 'success'
+        name: 'requirement 4',
+        status: 'success'
       }],
       description: 'Requirements and their status.'
     }

package/lib/components/RockerButton/RockerButton.js

@@ -13,12 +13,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { FocusRing } from 'react-aria';
 import { Item } from 'react-stately';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { usePropWarning, useRockerButton, useStatusClasses } from '../../hooks';
 import { Box } from '../../index';
+import { accent, getBaseHexColor, getDarkerColor } from '../../styles/colors';
 import { RockerContext } from '../RockerButtonGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _itemProps$selectedSt, _itemProps$selectedSt2;
   var className = props.className,
     item = props.item;
   var key = item.key,
@@ -27,12 +31,21 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
   var state = useContext(RockerContext);
   var isDisabled = state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
+  var rockerButtonRef = useRef();
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress(rockerButtonRef),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useStatusClasses = useStatusClasses(className, {
+      isHovered: isHovered,
+      isPressed: isPressed,
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
     classNames = _useStatusClasses.classNames;
-  var rockerButtonRef = useRef();
+  var backgroundHexColor = (_itemProps$selectedSt = itemProps.selectedStyles) !== null && _itemProps$selectedSt !== void 0 && _itemProps$selectedSt.bg ? getBaseHexColor((_itemProps$selectedSt2 = itemProps.selectedStyles) === null || _itemProps$selectedSt2 === void 0 ? void 0 : _itemProps$selectedSt2.bg) : accent[20];
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -49,25 +62,33 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
   }, ___EmotionJSX(Box, _extends({
     as: "button",
     className: classNames,
-    variant: "variants.rockerButton.thumbSwitch"
-  }, rockerButtonProps, {
-    ref: rockerButtonRef
-  }, itemProps, {
+    variant: "variants.rockerButton.thumbSwitch",
+    ref: rockerButtonRef,
     sx: {
-      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles),
+      '&.is-selected.is-hovered': {
+        bg: getDarkerColor(backgroundHexColor, 0.2)
+      },
+      '&.is-selected.is-pressed': {
+        bg: getDarkerColor(backgroundHexColor, 0.4)
+      }
     }
-  }), rendered));
+  }, mergeProps(hoverProps, pressProps, itemProps, rockerButtonProps)), rendered));
 });
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {
   /** Allows custom styles to be passed to button. */
-  selectedStyles: PropTypes.shape({}),
+  selectedStyles: PropTypes.shape({
+    bg: PropTypes.string
+  }),
   // adding to surface in props table
   /** @ignore */
   item: PropTypes.shape({
     key: PropTypes.string,
     props: PropTypes.shape({
-      selectedStyles: PropTypes.shape({})
+      selectedStyles: PropTypes.shape({
+        bg: PropTypes.string
+      })
     }),
     rendered: PropTypes.node
   })

package/lib/components/RockerButton/RockerButton.styles.js

@@ -26,7 +26,7 @@ var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
-  fontSize: '14px',
+  fontSize: '13px',
   borderRadius: '15px',
   alignSelf: 'center',
   paddingTop: '0px',
@@ -34,11 +34,14 @@ var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
-    bg: 'active',
+    bg: 'accent.20',
     color: 'white',
     zIndex: '1'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'white'
+  }
 });
 export default {
   container: container,

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -23,12 +23,6 @@ import Box from '../Box';
 import { CollectionRockerButton } from '../RockerButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var RockerContext = /*#__PURE__*/React.createContext({});
-
-/**
- * This component handles a single selection state for a group of rocker buttons.
- * It is intended to be used with < RockerButton > as children.
-*/
-
 var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var children = props.children,

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

@@ -2,13 +2,18 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RockerButton, RockerButtonGroup } from '../../index';
+import RockerButtonGroupReadme from './RockerButtonGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/RockerButtonGroup',
   component: RockerButtonGroup,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RockerButtonGroupReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js

@@ -16,7 +16,10 @@ var testButtons = [{
   }
 }, {
   name: 'Or',
-  key: 'Or'
+  key: 'Or',
+  selectedStyles: {
+    bg: 'accent.30'
+  }
 }, {
   name: 'Maybe?',
   key: 'Maybe?'
@@ -90,4 +93,40 @@ test('selected button can be changed by keyboard interaction', function () {
   });
   expect(screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
   expect(screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
+});
+test('rockerButton renders correct darker bg when selectedStyles prop is passed', function () {
+  getComponent();
+  var button0 = screen.getByText(testButtons[0].key);
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveStyle('background-color: #640099');
+  userEvent.hover(button0);
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveClass('is-hovered');
+  expect(button0).toHaveStyle('background-color: #590089');
+  fireEvent.keyDown(button0, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveClass('is-pressed');
+  expect(button0).toHaveStyle('background-color: #4d0077');
+});
+test('rockerButton renders correct bg when selectedStyles prop is css variable', function () {
+  getComponent();
+  var button1 = screen.getByText(testButtons[1].key);
+  fireEvent.keyDown(screen.getByText(testButtons[0].key), {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  userEvent.hover(button1);
+  expect(button1).toHaveClass('is-selected');
+  expect(button1).toHaveClass('is-hovered');
+  expect(button1).toHaveStyle('background-color: #364872');
+  fireEvent.keyDown(button1, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button1).toHaveClass('is-selected');
+  expect(button1).toHaveClass('is-pressed');
+  expect(button1).toHaveStyle('background-color: #2e3e63');
 });

package/lib/styles/colors.js

@@ -6,6 +6,7 @@ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import chroma from 'chroma-js';
 
 // SEMANTIC COLORS
@@ -83,6 +84,9 @@ export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, fu
 export var decorativeLight = _mapInstanceProperty(decorative).call(decorative, function (color) {
   return chroma(color).brighten(2).hex();
 });
+export var getDarkerColor = function getDarkerColor(color, percentage) {
+  return chroma.valid(color) ? chroma.mix(color, '#000000', percentage).hex() : '';
+};
 
 // export const focus = chroma(accent[50]).alpha(0.75).hex();
 export var focus = chroma('#D033FF').hex();
@@ -152,4 +156,17 @@ function flattenColors(obj) {
 }
 
 /* used by Storybook's stories */
-export var flatColorList = flattenColors(allColors);
+export var flatColorList = flattenColors(allColors);
+export var getBaseHexColor = function getBaseHexColor(colorName) {
+  if (chroma.valid(colorName)) {
+    return colorName;
+  }
+  try {
+    var keys = _includesInstanceProperty(colorName).call(colorName, '.') ? colorName.split('.') : [colorName];
+    return _reduceInstanceProperty(keys).call(keys, function (obj, key) {
+      return obj[key];
+    }, allColors);
+  } catch (error) {
+    return accentBase;
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.5.5",
+  "version": "2.5.6-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",