@pingux/astro 1.41.0-alpha.1 → 1.41.0-alpha.3

package/lib/cjs/Patterns/UnsavedChangesPattern.stories.hidden.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _hooks = require("../hooks");
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Design Patterns/Unsaved Changes'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var state = (0, _hooks.useModalState)();
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isShowingNeutral = _useState4[0],
+      setIsShowingNeutral = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isShowingSuccess = _useState6[0],
+      setIsShowingSuccess = _useState6[1];
+
+  var closeModalAndClearInput = function closeModalAndClearInput() {
+    setValue('');
+    state.close();
+    setIsShowingNeutral(true);
+    (0, _setTimeout2["default"])(function () {
+      return setIsShowingNeutral(false);
+    }, 3000);
+  };
+
+  var closeModalAndShowSuccess = function closeModalAndShowSuccess() {
+    setValue('');
+    state.close();
+    setIsShowingSuccess(true);
+    (0, _setTimeout2["default"])(function () {
+      return setIsShowingSuccess(null);
+    }, 3000);
+  };
+
+  var sx = {
+    mainContentBox: {
+      p: 'xx'
+    },
+    textFieldBoxStyle: {
+      p: 'sm'
+    },
+    modalTextSaveChanges: {
+      mb: 'lg',
+      fontWeight: '0',
+      fontSize: 'xx',
+      lineHeight: '23px'
+    },
+    modalTextSaveOrDiscard: {
+      mb: 'lg',
+      fontSize: 'md',
+      lineHeight: '17.89px',
+      fontWeight: '0'
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.mainContentBox,
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.textFieldBoxStyle,
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.TextField, {
+    label: "Place Holder",
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    value: value
+  })), (0, _react2.jsx)(_index.Link, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Go Somewhere Else")), state.isOpen && (0, _react2.jsx)(_index.Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close,
+    hasCloseButton: true
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.modalTextSaveChanges,
+    variant: "Bold"
+  }, "Save Changes?"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.modalTextSaveOrDiscard
+  }, "Save or discard your changes before leaving this page."), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    onPress: closeModalAndShowSuccess
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    onPress: closeModalAndClearInput
+  }, "Discard Changes"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    onPress: state.close
+  }, "Cancel"))), (0, _react2.jsx)(_index.Messages, null, isShowingNeutral && (0, _react2.jsx)(_index.Item, null, "Changes have been Discarded."), isShowingSuccess && (0, _react2.jsx)(_index.Item, {
+    status: "success"
+  }, "Form has been saved successfully."))));
+};
+
+exports.Default = Default;

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

@@ -61,8 +61,7 @@ var Default = function Default() {
     ml: "sm",
     bg: "background"
   }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mb: "xs"
+    isRow: true
   }, (0, _react2.jsx)(_index.Chip, {
     label: "Any",
     bg: "neutral.20",
@@ -77,7 +76,6 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -90,7 +90,7 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       "aria-hidden": "true",
       icon: icon,
       mx: 5,
-      size: 16
+      size: "xs"
     }, iconProps)));
   }, [children.length, filteredChildren, icon, iconProps, onAction]);
   return (0, _react2.jsx)("nav", {

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSpan = exports.Default = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -86,20 +86,4 @@ var Default = function Default(args) {
   }, "March 2020 Assets"));
 };
 
-exports.Default = Default;
-
-var WithSpan = function WithSpan() {
-  return (0, _react2.jsx)(_Breadcrumbs["default"], {
-    icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_collections.Item, {
-    key: "Parent",
-    "aria-label": "parent",
-    elementType: "span"
-  }, "Parent"), (0, _react2.jsx)(_collections.Item, {
-    key: "FonsVernall",
-    "aria-label": "fons-vernall",
-    elementType: "span"
-  }, "Fons Vernall"));
-};
-
-exports.WithSpan = WithSpan;
+exports.Default = Default;

package/lib/cjs/components/Card/Card.js

@@ -18,26 +18,137 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("@react-aria/utils");
+
+var _interactions = require("@react-aria/interactions");
+
+var _focus = require("@react-aria/focus");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * A Box component built for the common "Card" use case. Has default variant of card.
- * See Box for list of props.
- */
 var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      onHoverStart = props.onHoverStart,
+      onHoverChange = props.onHoverChange,
+      onHoverEnd = props.onHoverEnd,
+      onPress = props.onPress,
+      onPressStart = props.onPressStart,
+      onPressEnd = props.onPressEnd,
+      onPressChange = props.onPressChange,
+      onPressUp = props.onPressUp,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _useHover = (0, _interactions.useHover)(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: ref,
+    onPress: onPress,
+    onPressStart: onPressStart,
+    onPressEnd: onPressEnd,
+    onPressChange: onPressChange,
+    onPressUp: onPressUp
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useFocusRing2 = (0, _focus.useFocusRing)({
+    within: true
+  }),
+      focusWithinProps = _useFocusRing2.focusProps,
+      isFocusedWithin = _useFocusRing2.isFocusVisible;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isHovered: isHovered,
+    isPressed: isPressed,
+    isFocused: isFocusVisible || isFocusedWithin
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var ariaLabel = props['aria-label'];
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    "aria-label": ariaLabel,
     variant: "boxes.card",
-    ref: ref
-  }, props));
+    className: classNames,
+    ref: ref,
+    isFocused: isFocusVisible
+  }, others, (0, _utils.mergeProps)(hoverProps, pressProps, focusProps, focusWithinProps)));
 });
+Card.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': _propTypes["default"].string,
+
+  /**
+   * Handler that is called when a hover interaction starts.
+   * (e: HoverEvent) => void
+   */
+  onHoverStart: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when a hover interaction ends.
+  * (e: HoverEvent) => void
+  */
+  onHoverEnd: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when the hover state changes.
+  * (isHovering: boolean) => void
+  */
+  onHoverChange: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when the press is released over the target.
+  * (e: PressEvent) => void
+  */
+  onPress: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when a press interaction starts.
+  * (e: PressEvent) => void
+  */
+  onPressStart: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when a press interaction ends, either over the target or when the
+  * pointer leaves the target.
+  * (e: PressEvent) => void
+  */
+  onPressEnd: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when the press state changes.
+  * (isPressed: boolean) => void
+  */
+  onPressChange: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when a press is released over the target, regardless of whether it
+  * started on the target or not.
+  * (e: PressEvent) => void
+  */
+  onPressUp: _propTypes["default"].func
+};
 Card.displayName = 'Card';
 var _default = Card;
 exports["default"] = _default;

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

@@ -8,23 +8,34 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.CardRow = void 0;
+exports["default"] = exports.InteractiveCard = exports.Default = exports.CardRow = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Card = _interopRequireDefault(require("./Card"));
+var _index = require("../../index");
+
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
-var _Box = _interopRequireDefault(require("../Box"));
+var _Card = _interopRequireDefault(require("./Card.mdx"));
 
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/Card',
-  component: _Card["default"],
+  component: _index.Card,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Card["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     children: {
       description: 'Card content.',
-      defaultValue: 'Card Children',
+      defaultValue: 'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at enim nunc. Cras congue consequat odio, ac sodales lacus imperdiet quis. In id ex eu lorem sollicitudin hendrerit feugiat ultrices elit. Curabitur imperdiet libero vitae luctus blandit. Ut ac dignissim tortor. Pellentesque convallis eu metus vitae mollis. Donec sapien felis, laoreet eu egestas eu, blandit quis tellus. Donec luctus suscipit nibh, et tincidunt nisl facilisis ut. Mauris molestie purus at lectus venenatis, ac ultrices felis ultrices.',
       table: {
         type: {}
       },
@@ -37,12 +48,12 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_Card["default"], args);
+  return (0, _react2.jsx)(_index.Card, args);
 };
 
 exports.Default = Default;
 
-var CardRow = function CardRow() {
+var CardRow = function CardRow(args) {
   var sx = {
     li: {
       display: 'inline',
@@ -53,27 +64,55 @@ var CardRow = function CardRow() {
       display: 'block'
     }
   };
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
     as: "ul",
     pl: "0px"
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     as: "li",
     sx: sx.li
-  }, (0, _react2.jsx)(_Card["default"], {
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     sx: sx.card
-  }, "First")), (0, _react2.jsx)(_Box["default"], {
+  }, args))), (0, _react2.jsx)(_index.Box, {
     as: "li",
     sx: sx.li
-  }, (0, _react2.jsx)(_Card["default"], {
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     sx: sx.card
-  }, "Second")), (0, _react2.jsx)(_Box["default"], {
+  }, args))), (0, _react2.jsx)(_index.Box, {
     as: "li",
     sx: sx.li
-  }, (0, _react2.jsx)(_Card["default"], {
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     sx: sx.card
-  }, "Third")));
+  }, args))));
+};
+
+exports.CardRow = CardRow;
+
+var InteractiveCard = function InteractiveCard() {
+  var sx = {
+    alignContent: 'center',
+    height: '221px',
+    justifyContent: 'center',
+    textAlign: 'center',
+    width: '233px'
+  };
+  return (0, _react2.jsx)(_index.Card, {
+    onPress: function onPress() {
+      return console.log('card pressed');
+    },
+    onHoverStart: function onHoverStart() {
+      return console.log('card hovered');
+    },
+    tabIndex: "0",
+    sx: sx
+  }, "Interactive Card", (0, _react2.jsx)(_index.Button, {
+    variant: "inline",
+    mt: "md",
+    onPress: function onPress() {
+      return console.log('button pressed');
+    }
+  }, "Explore"));
 };
 
-exports.CardRow = CardRow;
+exports.InteractiveCard = InteractiveCard;

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

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _Card = _interopRequireDefault(require("./Card"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -45,4 +47,52 @@ test('renders children within Card component', function () {
   var mockedChildren = _react2.screen.getByRole('button');
 
   expect(mockedChildren).toBeInTheDocument();
+});
+test('card allows hover, focus, and press events', function () {
+  var children = (0, _react3.jsx)(_Button["default"], null);
+  var onPress = jest.fn();
+  getComponent({
+    children: children,
+    onPress: onPress,
+    tabIndex: 0
+  });
+
+  var card = _react2.screen.getByTestId(testId);
+
+  expect(card).not.toHaveClass('is-hovered');
+
+  _userEvent["default"].hover(card);
+
+  expect(card).toHaveClass('is-hovered');
+
+  _userEvent["default"].click(card);
+
+  expect(onPress).toHaveBeenCalled();
+  expect(card).not.toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(card).toHaveClass('is-focused');
+});
+test('allows focus within card', function () {
+  var children = (0, _react3.jsx)(_Button["default"], null);
+  getComponent({
+    children: children,
+    tabIndex: 0
+  });
+
+  var button = _react2.screen.getByRole('button');
+
+  var card = _react2.screen.getByTestId(testId);
+
+  expect(button).not.toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(button).not.toHaveClass('is-focused');
+  expect(card).toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(button).toHaveClass('is-focused');
 });

package/lib/cjs/components/Chip/Badge.js

@@ -60,11 +60,6 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/**
- * Badge component.
- * Built on top of the [Badge from Theme-UI](https://theme-ui.com/components/box/) and uses the
- * available [props from Theme-UI](https://theme-ui.com/sx-prop).
-*/
 var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var align = props.align,
       bg = props.bg,

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

@@ -34,11 +34,22 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _colors = require("../../styles/colors.js");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _Chip = _interopRequireDefault(require("./Chip.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/Chip',
   component: _["default"],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Chip["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     bg: {
       control: {

package/lib/cjs/components/Chip/Chip.js

@@ -22,11 +22,6 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-/**
- * Chip component.
- * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
- * available [props from Theme-UI](https://theme-ui.com/sx-prop).
-*/
 var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   (0, _hooks.useDeprecationWarning)('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');
   return (0, _react2.jsx)(_Badge["default"], (0, _extends2["default"])({

package/lib/cjs/components/CodeView/CodeView.js

@@ -68,10 +68,6 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/**
- * Component for code syntax highlighting.
- * Built on top of [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
- */
 var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       outerClassName = props.className,

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

@@ -22,6 +22,10 @@ var _CodeView = _interopRequireDefault(require("./CodeView"));
 
 var _ = require("../..");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _CodeView2 = _interopRequireDefault(require("./CodeView.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
@@ -43,6 +47,11 @@ var _default = {
     }
   },
   parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeView2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    },
     a11y: {
       config: {
         rules: [

package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.js

@@ -44,10 +44,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * The CollapsiblePanel serves as a filter menu with a menu title
- * and selected count displayed in a badge.
- */
 var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
       className = props.className,

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

@@ -62,6 +62,10 @@ var _hooks = require("../../hooks");
 
 var _index = require("../../index");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _CollapsiblePanel2 = _interopRequireDefault(require("./CollapsiblePanel.mdx"));
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -77,6 +81,9 @@ var _default = {
   component: _CollapsiblePanel["default"],
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CollapsiblePanel2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }