@pingux/astro 2.8.4 → 2.9.0-alpha.1

package/lib/cjs/components/Calendar/Calendar.js

@@ -36,13 +36,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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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; }
-/**
- * A simple component to display a monthly grid for date selection.
- * Utilizes [useCalendar, useCalendarGrid, useCalendarCell](https://react-spectrum.adobe.com/react-aria/useCalendar.html),
- * from React Aria and [useCalendarState](https://react-spectrum.adobe.com/react-stately/useCalendarState.html)
- * from React Stately.
- */
-
 var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,
     defaultValue = props.defaultValue,

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

@@ -22,9 +22,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _date = require("@internationalized/date");
 var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _Calendar = _interopRequireDefault(require("./Calendar"));
+var _Calendar2 = _interopRequireDefault(require("./Calendar.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); }
 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; }
@@ -41,6 +43,9 @@ var _default = {
     docs: {
       source: {
         type: 'code'
+      },
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Calendar2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     }
   },

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -40,16 +40,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * The `is-selected` class is added to the button after the component unmounts.
  */
 
-/**
- * Combines an DateField with a calendar to enter or select a date.
- *
- * Utilizes [useDatePicker](https://react-spectrum.adobe.com/react-aria/useDatePicker.html) from React
- * Aria and [useDatePickerState](https://react-spectrum.adobe.com/react-stately/useDatePickerState.html)
- * from React Stately.
- *
- * Props not specified are passed along to the underlying `DateField` component.
- */
-
 var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var defaultValue = props.defaultValue,
     hasAutoFocus = props.hasAutoFocus,

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

@@ -22,9 +22,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _date = require("@internationalized/date");
 var _utils = require("@react-aria/utils");
 var _addonActions = require("@storybook/addon-actions");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _DatePicker2 = _interopRequireDefault(require("./DatePicker.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); }
 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; }
@@ -37,6 +39,9 @@ var _default = {
     docs: {
       source: {
         type: 'code'
+      },
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DatePicker2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     }
   },

package/lib/cjs/experimental/PageHeader/PageHeader.js

@@ -0,0 +1,76 @@
+"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"] = 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 _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ = require("../..");
+var _react2 = require("@emotion/react");
+var _excluded = ["buttonProps", "children", "title"];
+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 PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$buttonProps = props.buttonProps,
+    buttonProps = _props$buttonProps === void 0 ? {} : _props$buttonProps,
+    children = props.children,
+    title = props.title,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var sx = {
+    wrapper: {
+      align: 'center',
+      mb: 'xs'
+    },
+    titleText: {
+      fontSize: 'xx',
+      fontWeight: '3',
+      fontColor: 'text.primary'
+    },
+    description: {
+      fontSize: 'sm',
+      color: 'text.secondary',
+      fontWeight: '0',
+      width: '800px',
+      ' > a': {
+        fontSize: 'sm'
+      }
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    isRow: true,
+    sx: sx.wrapper,
+    role: "heading",
+    "aria-level": "1"
+  }, other, {
+    ref: ref
+  }), (0, _react2.jsx)(_.Text, {
+    sx: sx.titleText,
+    as: "h1"
+  }, title), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    "aria-label": "icon button",
+    ml: "sm",
+    variant: "inverted"
+  }, buttonProps), (0, _react2.jsx)(_.Icon, {
+    icon: _PlusIcon["default"],
+    size: "sm"
+  }))), (0, _react2.jsx)(_.Text, {
+    sx: sx.description
+  }, children));
+});
+PageHeader.propTypes = {
+  /** If present, this string will render at the top of the section */
+  title: _propTypes["default"].string,
+  /** Props object that is spread into the Button element. */
+  buttonProps: _propTypes["default"].shape({})
+};
+var _default = PageHeader;
+exports["default"] = _default;

package/lib/cjs/experimental/PageHeader/PageHeader.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithoutLink = exports.WithButtonProps = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/PageHeader',
+  component: _.PageHeader,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    title: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Title of the Page'
+    }
+  }
+};
+exports["default"] = _default;
+var description = "The description of the page. The description of the page. The description of the page. The\n    description of the page.The description of the page. The description of the page. The\n    description of the page. The description of the page. The description of the page. ";
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_.PageHeader, args, description, (0, _react2.jsx)(_.Link, {
+    href: "https://uilibrary.ping-eng.com/"
+  }, "Learn more"));
+};
+exports.Default = Default;
+var WithoutLink = function WithoutLink(args) {
+  return (0, _react2.jsx)(_.PageHeader, args, description);
+};
+exports.WithoutLink = WithoutLink;
+var WithButtonProps = function WithButtonProps(args) {
+  return (0, _react2.jsx)(_.PageHeader, (0, _extends2["default"])({}, args, {
+    buttonProps: {
+      bg: 'mistyrose'
+    }
+  }), description, (0, _react2.jsx)(_.Link, {
+    href: "https://uilibrary.ping-eng.com/"
+  }, "Learn more"));
+};
+exports.WithButtonProps = WithButtonProps;

package/lib/cjs/experimental/PageHeader/PageHeader.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _index = require("../../index");
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _react2 = require("@emotion/react");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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; }
+var testId = 'test-header';
+var defaultProps = {
+  title: 'test-title',
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({}, defaultProps, props), "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", (0, _react2.jsx)(_index.Link, {
+    href: "https://uilibrary.ping-eng.com/"
+  }, "Learn more")));
+};
+(0, _testAxe["default"])(getComponent);
+test('renders default PageHeader', function () {
+  getComponent();
+  var wrapper = _testWrapper.screen.getByTestId(testId);
+  expect(wrapper).toBeInstanceOf(HTMLDivElement);
+  expect(wrapper).toBeInTheDocument();
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+  var link = _testWrapper.screen.getByRole('link');
+  expect(link).toBeInstanceOf(HTMLAnchorElement);
+  expect(link).toBeInTheDocument();
+  var title = _testWrapper.screen.getByText('test-title');
+  expect(title).toBeInstanceOf(HTMLHeadingElement);
+  expect(title).toBeInTheDocument();
+  expect(wrapper.children.length).toEqual(2);
+});
+test('button press uses callback', function () {
+  var onPress = jest.fn();
+  var customButtonProps = {
+    bg: '#000000'
+  };
+  getComponent({
+    buttonProps: _objectSpread(_objectSpread({}, customButtonProps), {}, {
+      onPress: onPress
+    })
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toHaveStyle('background: #000000');
+  _userEvent["default"].click(button);
+  expect(onPress).toHaveBeenCalled();
+});

package/lib/cjs/experimental/PageHeader/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _PageHeader["default"];
+  }
+});
+var _PageHeader = _interopRequireDefault(require("./PageHeader"));

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73;
 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");
@@ -97,6 +97,7 @@ var _exportNames = {
   TextField: true,
   TimeZonePicker: true,
   TooltipTrigger: true,
+  PageHeader: true,
   DataTable: true,
   OverlayProvider: true,
   useOverlayPosition: true,
@@ -511,6 +512,12 @@ _Object$defineProperty(exports, "OverlayProvider", {
     return _reactAria.OverlayProvider;
   }
 });
+_Object$defineProperty(exports, "PageHeader", {
+  enumerable: true,
+  get: function get() {
+    return _PageHeader["default"];
+  }
+});
 _Object$defineProperty(exports, "PasswordField", {
   enumerable: true,
   get: function get() {
@@ -1591,8 +1598,20 @@ _forEachInstanceProperty(_context71 = _Object$keys(_TooltipTrigger)).call(_conte
     }
   });
 });
+var _PageHeader = _interopRequireWildcard(require("./experimental/PageHeader"));
+_forEachInstanceProperty(_context72 = _Object$keys(_PageHeader)).call(_context72, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PageHeader[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PageHeader[key];
+    }
+  });
+});
 var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
-_forEachInstanceProperty(_context72 = _Object$keys(_DataTable)).call(_context72, function (key) {
+_forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataTable[key]) return;

package/lib/components/Calendar/Calendar.js

@@ -24,13 +24,6 @@ import { useCalendarState } from '@react-stately/calendar';
 import PropTypes from 'prop-types';
 import { Box, Button, Icon, IconButton, Text } from '../../index';
 import CalendarGrid from './CalendarGrid';
-
-/**
- * A simple component to display a monthly grid for date selection.
- * Utilizes [useCalendar, useCalendarGrid, useCalendarCell](https://react-spectrum.adobe.com/react-aria/useCalendar.html),
- * from React Aria and [useCalendarState](https://react-spectrum.adobe.com/react-stately/useCalendarState.html)
- * from React Stately.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
   var value = props.value,

package/lib/components/Calendar/Calendar.stories.js

@@ -15,9 +15,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import { parseDate } from '@internationalized/date';
 import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import Calendar from './Calendar';
+import CalendarReadme from './Calendar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Calendar',
@@ -30,6 +32,9 @@ export default {
     docs: {
       source: {
         type: 'code'
+      },
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CalendarReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
   },

package/lib/components/DatePicker/DatePicker.js

@@ -28,16 +28,6 @@ import DateField from './DateField';
  * Console Warning: The state update warning is a known issue coming from the react-aria library.
  * The `is-selected` class is added to the button after the component unmounts.
  */
-
-/**
- * Combines an DateField with a calendar to enter or select a date.
- *
- * Utilizes [useDatePicker](https://react-spectrum.adobe.com/react-aria/useDatePicker.html) from React
- * Aria and [useDatePickerState](https://react-spectrum.adobe.com/react-stately/useDatePickerState.html)
- * from React Stately.
- *
- * Props not specified are passed along to the underlying `DateField` component.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultValue = props.defaultValue,

package/lib/components/DatePicker/DatePicker.stories.js

@@ -15,9 +15,11 @@ import React, { useState } from 'react';
 import { parseDate } from '@internationalized/date';
 import { chain } from '@react-aria/utils';
 import { actions } from '@storybook/addon-actions';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import DatePicker from './DatePicker';
+import DatePickerReadme from './DatePicker.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/DatePicker',
@@ -26,6 +28,9 @@ export default {
     docs: {
       source: {
         type: 'code'
+      },
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DatePickerReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
   },

package/lib/experimental/PageHeader/PageHeader.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["buttonProps", "children", "title"];
+import React, { forwardRef } from 'react';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
+import PropTypes from 'prop-types';
+import { Box, Icon, IconButton, Text } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$buttonProps = props.buttonProps,
+    buttonProps = _props$buttonProps === void 0 ? {} : _props$buttonProps,
+    children = props.children,
+    title = props.title,
+    other = _objectWithoutProperties(props, _excluded);
+  var sx = {
+    wrapper: {
+      align: 'center',
+      mb: 'xs'
+    },
+    titleText: {
+      fontSize: 'xx',
+      fontWeight: '3',
+      fontColor: 'text.primary'
+    },
+    description: {
+      fontSize: 'sm',
+      color: 'text.secondary',
+      fontWeight: '0',
+      width: '800px',
+      ' > a': {
+        fontSize: 'sm'
+      }
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
+    isRow: true,
+    sx: sx.wrapper,
+    role: "heading",
+    "aria-level": "1"
+  }, other, {
+    ref: ref
+  }), ___EmotionJSX(Text, {
+    sx: sx.titleText,
+    as: "h1"
+  }, title), ___EmotionJSX(IconButton, _extends({
+    "aria-label": "icon button",
+    ml: "sm",
+    variant: "inverted"
+  }, buttonProps), ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    size: "sm"
+  }))), ___EmotionJSX(Text, {
+    sx: sx.description
+  }, children));
+});
+PageHeader.propTypes = {
+  /** If present, this string will render at the top of the section */
+  title: PropTypes.string,
+  /** Props object that is spread into the Button element. */
+  buttonProps: PropTypes.shape({})
+};
+export default PageHeader;

package/lib/experimental/PageHeader/PageHeader.stories.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { Link, PageHeader } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/PageHeader',
+  component: PageHeader,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    title: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Title of the Page'
+    }
+  }
+};
+var description = "The description of the page. The description of the page. The description of the page. The\n    description of the page.The description of the page. The description of the page. The\n    description of the page. The description of the page. The description of the page. ";
+export var Default = function Default(args) {
+  return ___EmotionJSX(PageHeader, args, description, ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com/"
+  }, "Learn more"));
+};
+export var WithoutLink = function WithoutLink(args) {
+  return ___EmotionJSX(PageHeader, args, description);
+};
+export var WithButtonProps = function WithButtonProps(args) {
+  return ___EmotionJSX(PageHeader, _extends({}, args, {
+    buttonProps: {
+      bg: 'mistyrose'
+    }
+  }), description, ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com/"
+  }, "Learn more"));
+};

package/lib/experimental/PageHeader/PageHeader.test.js

@@ -0,0 +1,61 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { _defineProperty(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; }
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Link, PageHeader } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-header';
+var defaultProps = {
+  title: 'test-title',
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(PageHeader, _extends({}, defaultProps, props), "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com/"
+  }, "Learn more")));
+};
+axeTest(getComponent);
+test('renders default PageHeader', function () {
+  getComponent();
+  var wrapper = screen.getByTestId(testId);
+  expect(wrapper).toBeInstanceOf(HTMLDivElement);
+  expect(wrapper).toBeInTheDocument();
+  var button = screen.getByRole('button');
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+  var link = screen.getByRole('link');
+  expect(link).toBeInstanceOf(HTMLAnchorElement);
+  expect(link).toBeInTheDocument();
+  var title = screen.getByText('test-title');
+  expect(title).toBeInstanceOf(HTMLHeadingElement);
+  expect(title).toBeInTheDocument();
+  expect(wrapper.children.length).toEqual(2);
+});
+test('button press uses callback', function () {
+  var onPress = jest.fn();
+  var customButtonProps = {
+    bg: '#000000'
+  };
+  getComponent({
+    buttonProps: _objectSpread(_objectSpread({}, customButtonProps), {}, {
+      onPress: onPress
+    })
+  });
+  var button = screen.getByRole('button');
+  expect(button).toHaveStyle('background: #000000');
+  userEvent.click(button);
+  expect(onPress).toHaveBeenCalled();
+});

package/lib/experimental/PageHeader/index.js

@@ -0,0 +1 @@
+export { default } from './PageHeader';

package/lib/index.js

@@ -157,6 +157,8 @@ export * from './components/TextField';
 export { default as TimeZonePicker } from './components/TimeZonePicker';
 export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
+export { default as PageHeader } from './experimental/PageHeader';
+export * from './experimental/PageHeader';
 
 /* eslint-enable import/export */
 

package/package.json

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