@pingux/astro 1.1.0-alpha.8 → 1.1.1-alpha.1

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

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = void 0;
-
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _hooks = require("../../hooks");
-
-var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
-
-var _react2 = require("@emotion/react");
-
-var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _props$sx;
-
-  var children = props.children,
-      isOpen = props.isOpen,
-      className = props.className,
-      size = props.size,
-      others = (0, _objectWithoutProperties2["default"])(props, ["children", "isOpen", "className", "size"]);
-  var overlayPanelRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return overlayPanelRef.current;
-  });
-
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({
-    isOpen: isOpen
-  }, "is-".concat((props === null || props === void 0 ? void 0 : (_props$sx = props.sx) === null || _props$sx === void 0 ? void 0 : _props$sx.width) ? 'custom' : size), size)),
-      classNames = _useStatusClasses.classNames;
-
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanel"
-  }, others, {
-    className: classNames
-  }), (0, _react2.jsx)(_Box["default"], {
-    variant: "overlayPanel.overlayPanelBody",
-    className: classNames
-  }, children));
-});
-OverlayPanel.propTypes = {
-  /** Sets the open state of the menu. */
-  isOpen: _propTypes["default"].bool,
-
-  /** Sets the open state of the menu. */
-  size: _propTypes["default"].oneOf((0, _values["default"])(_panelSizes.panelSizes)),
-
-  /** JSX styling that is passed into the component. */
-  sx: _propTypes["default"].shape({
-    width: _propTypes["default"].string
-  })
-};
-OverlayPanel.defaultProps = {
-  size: 'medium'
-};
-var _default = OverlayPanel;
-exports["default"] = _default;

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

@@ -1,211 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.CustomWidth = exports.InnerPanel = exports.Default = exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _collections = require("@react-stately/collections");
-
-var _hooks = require("../../hooks");
-
-var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
-
-var _index = require("../../index");
-
-var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
-
-var _react2 = require("@emotion/react");
-
-var _default = {
-  title: 'OverlayPanel',
-  component: _OverlayPanel["default"],
-  argTypes: {
-    children: {
-      description: 'Overlay panel content.',
-      control: 'none'
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: _panelSizes.panelSizes
-      },
-      defaultValue: 'medium'
-    },
-    isOpen: {
-      control: 'none'
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-
-var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, _ref);
-  var state = (0, _hooks.useOverlayPanelState)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
-      onPress: state.open
-    }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
-      isOpen: state.isOpen
-    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_collections.Item, {
-      key: "accordionKey",
-      textValue: "accordionKey",
-      label: "Accordion Label",
-      "data-id": "accordionItem"
-    }, (0, _react2.jsx)(_index.Text, null, "Render me!"))))))
-  );
-};
-
-exports.Default = Default;
-
-var InnerPanel = function InnerPanel(_ref2) {
-  var args = (0, _extends2["default"])({}, _ref2);
-  var state = (0, _hooks.useOverlayPanelState)();
-  var innerState = (0, _hooks.useOverlayPanelState)();
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      messagesOpen = _useState2[0],
-      setMessagesOpen = _useState2[1];
-
-  var toggleMessagesOpen = function toggleMessagesOpen() {
-    setMessagesOpen(!messagesOpen);
-  };
-
-  var closeOuterPanel = function closeOuterPanel() {
-    if (innerState.isOpen) {
-      innerState.close();
-    }
-
-    state.close();
-  };
-
-  var inner = (0, _react2.jsx)(_react["default"].Fragment, null, innerState.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
-    ,
-    isOpen: innerState.isOpen
-  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-    onPress: innerState.close
-  }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
-    pt: "md"
-  }, "Children render here."))));
-  var outer = // should have higher z-index applied
-  (0, _react2.jsx)(_react["default"].Fragment, null, state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
-    isOpen: state.isOpen,
-    sx: {
-      p: '0px'
-    }
-  }, args), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      p: '12px'
-    }
-  }, (0, _react2.jsx)(_index.Button, {
-    onPress: closeOuterPanel
-  }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-    pt: "md",
-    mb: "24px"
-  }, "Children render here."), (0, _react2.jsx)(_index.List, null, (0, _react2.jsx)(_index.ListItem, null, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 1")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 2"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 2")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 3"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 3")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 4"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 4")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 5"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 5")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
-    onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
-    onPress: innerState.open
-  }, "Open Inner Panel"), inner)));
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.open
-    }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
-      sx: {
-        zIndex: 3
-      }
-    }, (0, _react2.jsx)(_collections.Item, {
-      key: "message2",
-      status: "success"
-    }, "Z Index higher than inner pannel")))
-  );
-};
-
-exports.InnerPanel = InnerPanel;
-
-var CustomWidth = function CustomWidth() {
-  var state = (0, _hooks.useOverlayPanelState)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    //
-    // For a custom width, provide the width via the 'sx' prop
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
-      onPress: state.open
-    }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], {
-      isOpen: state.isOpen,
-      sx: {
-        width: '720px'
-      }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
-  );
-};
-
-exports.CustomWidth = CustomWidth;

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

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
-var _testWrapper = require("../../utils/testUtils/testWrapper");
-
-var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
-
-var _react2 = require("@emotion/react");
-
-var testId = 'test-overlayPanel';
-var defaultProps = {
-  'data-testid': testId
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({}, defaultProps, props)));
-};
-
-afterEach(function () {
-  jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
-
-(0, _testAxe["default"])(getComponent);
-test('default overlayPanel', function () {
-  getComponent({
-    children: (0, _react2.jsx)("div", null, "Test")
-  });
-
-  var overlayPanel = _testWrapper.screen.getByTestId(testId);
-
-  var child = _testWrapper.screen.queryByText('Test');
-
-  expect(overlayPanel).toBeInTheDocument();
-  expect(child).toBeInTheDocument();
-});
-test('custom overlayPanel gets custom width', function () {
-  getComponent({
-    children: (0, _react2.jsx)("div", null, "Test"),
-    sx: {
-      width: '240px'
-    }
-  });
-
-  var overlayPanel = _testWrapper.screen.getByTestId(testId);
-
-  expect(overlayPanel).toBeInTheDocument();
-  expect(overlayPanel).toHaveStyleRule('width', '240px');
-});

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

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

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -1,50 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Text = _interopRequireDefault(require("../Text/Text"));
-
-var _Box = _interopRequireDefault(require("../Box/Box"));
-
-var _react2 = require("@emotion/react");
-
-var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var title = props.title,
-      children = props.children,
-      others = (0, _objectWithoutProperties2["default"])(props, ["title", "children"]);
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    isRow: true,
-    justifyContent: "space-between",
-    role: "heading",
-    "aria-level": "1",
-    ref: ref
-  }, others), (0, _react2.jsx)(_Text["default"], {
-    variant: "title",
-    mb: "md"
-  }, title), children);
-});
-PageHeader.displayName = 'PageHeader';
-var _default = PageHeader;
-exports["default"] = _default;
-PageHeader.propTypes = {
-  /** Title for the Page Header. */
-  title: _propTypes["default"].string
-};

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

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.Default = exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _PageHeader = _interopRequireDefault(require("../PageHeader/PageHeader"));
-
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
-var _react2 = require("@emotion/react");
-
-var _default = {
-  title: 'PageHeader',
-  component: _PageHeader["default"],
-  argTypes: {
-    title: {
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Forms'
-    }
-  }
-};
-exports["default"] = _default;
-
-var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, _ref);
-  return (0, _react2.jsx)(_PageHeader["default"], args, (0, _react2.jsx)(_Button["default"], null, "Add a Form"));
-};
-
-exports.Default = Default;

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

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _PageHeader = _interopRequireDefault(require("./PageHeader"));
-
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
-var _react3 = require("@emotion/react");
-
-var testTitle = 'Test Title';
-var defaultProps = {
-  title: testTitle
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_PageHeader["default"], (0, _extends2["default"])({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-(0, _testAxe["default"])(getComponent);
-test('renders pageheader and title', function () {
-  getComponent();
-
-  var title = _react2.screen.getByRole('heading');
-
-  expect(title).toBeInTheDocument();
-});

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

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