@pingux/astro 1.17.0-alpha.0 → 1.17.0-alpha.11

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

@@ -16,10 +16,10 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ = require("../..");
@@ -34,7 +34,9 @@ var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
   argTypes: {
-    direction: {},
+    direction: {
+      defaultValue: 'bottom'
+    },
     hasAutoFocus: {},
     hasNoStatusIndicator: {},
     isDisabled: {},
@@ -118,7 +120,26 @@ var items = [{
   key: 'Shark'
 }];
 
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
 var Default = function Default(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (// const items = [
     // { id: 1, name: 'Aardvark', key: 'Aardvark' },
     // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
@@ -128,9 +149,14 @@ var Default = function Default(args) {
     // { id: 6, name: 'Orangutan', key: 'Orangutan' },
     // { id: 7, name: 'Shark', key: 'Shark' },
     // ];
-    (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+    , {
+      style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+    }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
       items: items
-    }, args), function (item) {
+    }, args, {
+      onOpenChange: onOpenChange
+    }), function (item) {
       return (0, _react2.jsx)(_.Item, {
         key: item.key,
         "data-id": item.name
@@ -142,10 +168,26 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var WithCustomValues = function WithCustomValues(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items,
     mode: "non-restrictive"
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -161,10 +203,26 @@ WithCustomValues.argTypes = {
 };
 
 var WithDisabledKeys = function WithDisabledKeys(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     disabledKeys: ['Aardvark'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -175,10 +233,26 @@ var WithDisabledKeys = function WithDisabledKeys(args) {
 exports.WithDisabledKeys = WithDisabledKeys;
 
 var Uncontrolled = function Uncontrolled(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     defaultSelectedKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -189,17 +263,32 @@ var Uncontrolled = function Uncontrolled(args) {
 exports.Uncontrolled = Uncontrolled;
 
 var Controlled = function Controlled(args) {
-  var _useState = (0, _react.useState)(['Aardvark', 'Snake']),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+  var _useState9 = (0, _react.useState)(['Aardvark', 'Snake']),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
 
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     label: "Field Label"
   }, args, {
     items: items,
     onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
@@ -211,6 +300,17 @@ var Controlled = function Controlled(args) {
 exports.Controlled = Controlled;
 
 var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (0, _react2.jsx)(_.Box, {
     sx: {
       width: '100%',
@@ -219,9 +319,14 @@ var WithCustomSize = function WithCustomSize(args) {
     }
   }, (0, _react2.jsx)(_.Box, {
     width: 300
-  }, (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -232,10 +337,26 @@ var WithCustomSize = function WithCustomSize(args) {
 exports.WithCustomSize = WithCustomSize;
 
 var WithReadOnlyValues = function WithReadOnlyValues(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name

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

@@ -189,7 +189,7 @@ var InnerPanel = function InnerPanel(_ref2) {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
-        zIndex: 3
+        zIndex: 11
       }
     }, (0, _react2.jsx)(_collections.Item, {
       key: "message2",

package/lib/cjs/components/RockerButton/RockerButton.js

@@ -64,15 +64,9 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
       itemProps = item.props;
   var state = (0, _react.useContext)(_RockerButtonGroup.RockerContext);
   var isDisabled = state.disabledKeys.has(key);
-
-  var _useFocusRing = (0, _focus.useFocusRing)(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
   var isSelected = state.selectedKey === key;
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isFocused: isFocusVisible,
     isSelected: isSelected,
     isDisabled: isDisabled
   }),
@@ -93,17 +87,19 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
   }, state, rockerButtonRef),
       rockerButtonProps = _useRockerButton.rockerButtonProps;
 
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_focus.FocusRing, {
+    focusRingClass: "is-focused"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "button",
     className: classNames,
     variant: "buttons.rocker"
   }, rockerButtonProps, {
     ref: rockerButtonRef
-  }, focusProps, itemProps, {
+  }, itemProps, {
     sx: {
       '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
     }
-  }), rendered);
+  }), rendered));
 });
 exports.CollectionRockerButton = CollectionRockerButton;
 CollectionRockerButton.displayName = 'CollectionRockerButton';

package/lib/cjs/styles/variants/boxes.js

@@ -134,6 +134,23 @@ var chip = {
 };
 exports.chip = chip;
 
+var countDefault = _objectSpread(_objectSpread({}, chip), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  height: '17px'
+});
+
+var chipCount = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, chipCount), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20'
+  }
+});
+
 var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -336,6 +353,8 @@ var _default = {
   base: base,
   card: card,
   chip: chip,
+  chipCount: chipCount,
+  countNeutral: countNeutral,
   selectedItemChip: selectedItemChip,
   readOnlyChip: readOnlyChip,
   copy: copy,

package/lib/cjs/styles/variants/buttons.js

@@ -156,7 +156,7 @@ var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
   bg: 'accent.99',
   height: '40px',
   minWidth: 'max-content',
-  pl: '0px',
+  pl: 'xs',
   ml: '10px',
   path: {
     fill: 'active'
@@ -164,7 +164,10 @@ var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
   '&.is-hovered': {
     backgroundColor: 'accent.99'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  }),
   '&.is-pressed': {
     backgroundColor: 'accent.99'
   }
@@ -388,6 +391,18 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
 var text = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -440,7 +455,8 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'accent.95',
   '&.is-selected': {
     bg: 'active',
-    color: 'white'
+    color: 'white',
+    zIndex: '1'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
@@ -713,6 +729,7 @@ var _default = {
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
+  inlinePrimary: inlinePrimary,
   inverted: inverted,
   link: link,
   primary: primary,

package/lib/cjs/styles/variants/collapsiblePanel.js

@@ -8,10 +8,17 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 var collapsiblePanelContainer = {
-  overflowX: 'hidden',
   pr: 'sm',
-  transition: 'right 500ms',
-  minHeight: '80vh'
+  minHeight: '80vh',
+  '>div': {
+    visibility: 'hidden',
+    width: 0,
+    transition: 'width .3s ease'
+  },
+  '&.is-open>div': {
+    visibility: 'visible',
+    width: '300px'
+  }
 };
 var collapsiblePanelContent = {
   bg: 'accent.99',
@@ -34,15 +41,17 @@ var collapsiblePanelContent = {
 };
 var collapsiblePanelContainerTitle = {
   alignContent: 'center',
-  bg: 'accent.99',
-  display: 'flex',
   fontWeight: '500',
   minHeight: '40px',
   alignItems: 'center',
   padding: '0 10px !important',
   flexWrap: 'wrap',
   maxWidth: 'max-content !important',
-  margin: '0'
+  margin: '0',
+  width: '0',
+  '.is-open &': {
+    width: '300px'
+  }
 };
 var collapsiblePanelBadge = {
   borderRadius: '5px',
@@ -55,7 +64,17 @@ var collapsiblePanelBadge = {
   pr: '3px !important',
   pl: '3px !important',
   alignItems: 'center',
-  fontWeight: 500
+  fontWeight: 500,
+  '.is-open &.title-badge': {
+    minWidth: '0',
+    display: 'flex',
+    transition: 'min-width .3s ease',
+    width: 'max-content'
+  },
+  '&.title-badge': {
+    display: 'none',
+    width: '0'
+  }
 };
 var collapsiblePanellItem = {
   minHeight: '45px',

package/lib/cjs/styles/variants/overlayPanel.js

@@ -10,7 +10,7 @@ exports["default"] = void 0;
 var overlayPanel = {
   position: 'fixed',
   overflowY: 'scroll',
-  zIndex: 1,
+  zIndex: 10,
   top: 0,
   bottom: 0,
   right: '-100%',
@@ -42,7 +42,7 @@ var overlayPanel = {
 };
 var overlayPanelInner = {
   position: 'absolute',
-  zIndex: 2,
+  zIndex: 9,
   bottom: 0,
   right: 0,
   background: 'white',

package/lib/components/Button/Button.stories.js

@@ -14,7 +14,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
 export default {
   title: 'Button',
   component: Button,
@@ -69,10 +69,15 @@ export var TextIconButton = function TextIconButton() {
   }), "Add a Form"));
 };
 export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Button, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
     mb: "sm",
+    mr: "auto",
     variant: "inline"
-  }, "Inline");
+  }, "Inline"), ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Inline primary"));
 };
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls

package/lib/components/Chip/Chip.stories.js

@@ -8,6 +8,7 @@ import Earth from 'mdi-react/EarthIcon';
 import Chip from '../Chip';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
+import Box from '../Box';
 import { flatColorList } from '../../styles/colors.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -60,6 +61,19 @@ export var Default = function Default(_ref5) {
     color: "white"
   }, args));
 };
+export var Count = function Count(_ref6) {
+  var args = _extends({}, _ref6);
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Chip, _extends({
+    color: "white"
+  }, args, {
+    label: "1",
+    variant: "boxes.chipCount"
+  })), ___EmotionJSX("br", null), ___EmotionJSX(Chip, _extends({}, args, {
+    label: "1",
+    variant: "boxes.countNeutral"
+  })));
+};
 export var ChipWithCustomColors = function ChipWithCustomColors() {
   return ___EmotionJSX(Chip, {
     label: "Custom Colors",

package/lib/components/CollapsiblePanel/CollapsiblePanel.js

@@ -65,6 +65,7 @@ var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "collapsiblePanelTitle"
   }, listTitle), selectedFilterCount && ___EmotionJSX(CollapsiblePanelBadge, {
     margin: "0",
+    className: "title-badge",
     selectedFilterCount: selectedFilterCount
   })), ___EmotionJSX(Box, {
     pl: "xs",
@@ -73,6 +74,7 @@ var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
     items: items,
     onSelectionChange: onSelectionChange,
     selectionMode: "none",
+    selectionStyle: "highlight",
     style: {
       width: '100%'
     },