@pingux/astro 1.41.0 → 1.42.0-alpha.0

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

@@ -42,10 +42,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; }
 
-/**
- * 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,

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

@@ -16,11 +16,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _index = require("../../index");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _Card = _interopRequireDefault(require("./Card.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/Card',
   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.',

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'
       }

package/lib/cjs/components/CopyText/CopyText.js

@@ -67,10 +67,6 @@ TooltipWrapper.propTypes = {
   targetRef: _propTypes["default"].shape({}),
   tooltip: _propTypes["default"].string
 };
-/**
- * Allows copying some pieces of text by clicking on the text or by the button nearby.
- */
-
 var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       textToCopy = props.textToCopy,

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

@@ -20,11 +20,22 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _CopyText = _interopRequireDefault(require("./CopyText"));
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _CopyText2 = _interopRequireDefault(require("./CopyText.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/CopyText',
   component: _CopyText["default"],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CopyText2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     mode: {
       control: 'none'

package/lib/cjs/components/DataTable/DataTable.js

@@ -96,32 +96,6 @@ var ROW_HEIGHTS = {
     large: 75
   }
 };
-/**
- * Inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
- * from React Spectrum and [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
- * from React Stately.
- *
- * DataTable is a complex collection component that is built from many child elements including
- * columns, rows and cells. Columns are defined within DataTableHeader element via DataTableColumn
- * and rows are defined within a DataTableBody element via DataTableRow. Rows contain DataTableCell
- * elements that correspond to each column.
- *
- * [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C)
- * uses the alias DataTableHeader.
- *
- * [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C)
- * uses the alias DataTableColumn.
- *
- * [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support)
- * uses the alias DataTableCell.
- *
- * [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components)
- * uses the alias DataTableCell.
- *
- * [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and)
- * uses the alias DataTableBody.
-*/
-
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var width = props.width,
       height = props.height,

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

@@ -62,6 +62,10 @@ var _faker = require("@faker-js/faker");
 
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _DataTable = _interopRequireDefault(require("./DataTable.mdx"));
+
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _index = require("../../index");
@@ -77,6 +81,9 @@ var _default = {
   component: _index.DataTable,
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DataTable["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -91,8 +91,6 @@ var breadCrumbDataIds = {
   environmentButton: 'breadcrumb--environment-button',
   orgButton: 'breadcrumb--org-button'
 };
-/** The Environment Picker with Search and Sections support */
-
 exports.breadCrumbDataIds = breadCrumbDataIds;
 var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,

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

@@ -52,6 +52,10 @@ var _EnvironmentBreadcrumb = _interopRequireDefault(require("./EnvironmentBreadc
 
 var _index = require("../../index");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _EnvironmentBreadcrumb2 = _interopRequireDefault(require("./EnvironmentBreadcrumb.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); }
@@ -67,6 +71,9 @@ var _default = {
   component: _EnvironmentBreadcrumb["default"],
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_EnvironmentBreadcrumb2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -52,13 +52,6 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-/**
- * A `HelpHint` is a composed component using tooltip trigger and icon button.
- *
- * For customization the trigger icon,
- * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
- */
-
 
 var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,

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

@@ -16,11 +16,22 @@ var _ = _interopRequireDefault(require("."));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _HelpHint = _interopRequireDefault(require("./HelpHint.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/HelpHint',
   component: _["default"],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_HelpHint["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     children: {
       description: 'Tooltip content',

package/lib/cjs/components/Icon/Icon.js

@@ -50,18 +50,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; }
 
-/**
- * Basic icon component.
- * Icons will fill the given container, which is '1em' x '1em' by default, and will maintain their
- * aspect ratio.
- * Use SVGR to import SVG files as React components and pass them into this component, and you can
- * use the theme to color the icon. But ensure you pass `dimensions: false` in webpack config
- * (see [SVGR docs](https://react-svgr.com/docs/options/#dimensions)).
- * Otherwise icon will not be resizable by `size` prop.
- * Icons can also be used from the [Material UI Icon Library](https://materialdesignicons.com/).
- * 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 Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = props.color,
       IconComponent = props.icon,

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

@@ -38,6 +38,10 @@ var _colors = require("../../styles/colors");
 
 var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _Icon = _interopRequireDefault(require("./Icon.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -45,6 +49,9 @@ var _default = {
   component: _index.Icon,
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Icon["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Card/Card.js

@@ -8,11 +8,6 @@ import { useHover, usePress } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import Box from '../Box';
 import { useStatusClasses } from '../../hooks';
-/**
- * A Box component built for the common "Card" use case. Has default variant of card.
- * See Box for list of props.
- */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Card = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

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

@@ -1,10 +1,19 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Box, Button, Card } from '../../index';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CardReadme from './Card.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Card',
   component: Card,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CardReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     children: {
       description: 'Card content.',

package/lib/components/Chip/Badge.js

@@ -22,12 +22,6 @@ import { Badge as ThemeUIBadge } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { Box, Text } from '../../';
 import * as colors from '../../styles/colors';
-/**
- * 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).
-*/
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var align = props.align,

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

@@ -10,10 +10,19 @@ import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Box from '../Box';
 import { flatColorList } from '../../styles/colors.js';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import ChipReadme from './Chip.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Chip',
   component: Chip,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ChipReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     bg: {
       control: {

package/lib/components/Chip/Chip.js

@@ -3,12 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Badge from './Badge';
 import { useDeprecationWarning } from '../../hooks';
-/**
- * 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).
-*/
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useDeprecationWarning('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');

package/lib/components/CodeView/CodeView.js

@@ -26,11 +26,6 @@ import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
 import codeView from '../../styles/variants/codeView';
-/**
- * Component for code syntax highlighting.
- * Built on top of [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
- */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,

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

@@ -4,6 +4,8 @@ import Prism from 'prismjs';
 import 'prismjs/components/prism-powershell';
 import CodeView from './CodeView';
 import { Text } from '../..';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@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}";
 export default {
@@ -24,6 +26,11 @@ export default {
     }
   },
   parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeViewReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    },
     a11y: {
       config: {
         rules: [

package/lib/components/CollapsiblePanel/CollapsiblePanel.js

@@ -9,11 +9,6 @@ import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { useStatusClasses } from '../../hooks';
 import CollapsiblePanelBadge from '../CollapsiblePanelContainer/CollapsiblePanelBadge';
 import { Box, ListView, CollapsiblePanelContainer, Text } from '../../index';
-/**
- * The CollapsiblePanel serves as a filter menu with a menu title
- * and selected count displayed in a badge.
- */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,

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

@@ -27,12 +27,17 @@ import AccountIcon from 'mdi-react/AccountIcon';
 import CollapsiblePanel from './CollapsiblePanel';
 import { useOverlayPanelState } from '../../hooks';
 import { Breadcrumbs, Box, Button, CheckboxField, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CollapsiblePanelReadme from './CollapsiblePanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/CollapsiblePanel',
   component: CollapsiblePanel,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CollapsiblePanelReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/CopyText/CopyText.js

@@ -32,10 +32,6 @@ TooltipWrapper.propTypes = {
   targetRef: PropTypes.shape({}),
   tooltip: PropTypes.string
 };
-/**
- * Allows copying some pieces of text by clicking on the text or by the button nearby.
- */
-
 var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       textToCopy = props.textToCopy,

package/lib/components/CopyText/CopyText.stories.js

@@ -3,10 +3,19 @@ import React from 'react';
 import Link from '../Link';
 import Text from '../Text';
 import CopyText from './CopyText';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CopyTextReadme from './CopyText.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/CopyText',
   component: CopyText,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CopyTextReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     mode: {
       control: 'none'

package/lib/components/DataTable/DataTable.js

@@ -51,32 +51,6 @@ var ROW_HEIGHTS = {
     large: 75
   }
 };
-/**
- * Inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
- * from React Spectrum and [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
- * from React Stately.
- *
- * DataTable is a complex collection component that is built from many child elements including
- * columns, rows and cells. Columns are defined within DataTableHeader element via DataTableColumn
- * and rows are defined within a DataTableBody element via DataTableRow. Rows contain DataTableCell
- * elements that correspond to each column.
- *
- * [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C)
- * uses the alias DataTableHeader.
- *
- * [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C)
- * uses the alias DataTableColumn.
- *
- * [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support)
- * uses the alias DataTableCell.
- *
- * [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components)
- * uses the alias DataTableCell.
- *
- * [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and)
- * uses the alias DataTableBody.
-*/
-
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   var width = props.width,
       height = props.height,

package/lib/components/DataTable/DataTable.stories.js

@@ -30,6 +30,8 @@ import ApplicationIcon from 'mdi-react/ApplicationIcon';
 import { action } from '@storybook/addon-actions';
 import { faker } from '@faker-js/faker';
 import isChromatic from 'chromatic/isChromatic';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import DataTableReadme from './DataTable.mdx';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -38,6 +40,9 @@ export default {
   component: DataTable,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTableReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -39,8 +39,6 @@ export var breadCrumbDataIds = {
   environmentButton: 'breadcrumb--environment-button',
   orgButton: 'breadcrumb--org-button'
 };
-/** The Environment Picker with Search and Sections support */
-
 var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       imperativeDisabledKeys = props.disabledKeys,

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -22,12 +22,17 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React, { useState } from 'react';
 import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
 import { Item, Section, Chip, Box, Text } from '../../index';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import EnvironmentBreadcrumbReadme from './EnvironmentBreadcrumb.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/EnvironmentBreadcrumb',
   component: EnvironmentBreadcrumb,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EnvironmentBreadcrumbReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }