@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/components/NumberField/NumberField.test.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/react';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { NumberField } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-NumberField';
+var testLabel = 'test-NumberField-label';
+var testValue = 5;
+var testStep = 1;
+var incrementAriaLabel = 'arrow-up';
+var decrementAriaLabel = 'arrow-down';
+var defaultProps = {
+  defaultValue: testValue,
+  step: testStep,
+  'data-testid': testId,
+  label: testLabel,
+  helperText: 'test-helper-text',
+  incrementAriaLabel: incrementAriaLabel,
+  decrementAriaLabel: decrementAriaLabel
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(NumberField, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent, {
+  // ListItem represents list's child without parent
+  rules: {
+    'aria-required-parent': {
+      enabled: false
+    }
+  }
+});
+test('renders NumberField component', function () {
+  getComponent();
+  expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
+});
+test('arrow up is adding step to the number value', function () {
+  var mockOnChange = jest.fn();
+  getComponent({
+    onChange: mockOnChange,
+    value: testValue,
+    step: testStep
+  });
+  userEvent.click(screen.getByLabelText(incrementAriaLabel));
+  expect(mockOnChange).toHaveBeenCalledWith(testValue + testStep);
+});
+test('arrow down is subtract step to the number value', function () {
+  var mockOnChange = jest.fn();
+  getComponent({
+    onChange: mockOnChange,
+    value: testValue,
+    step: testStep
+  });
+  userEvent.click(screen.getByLabelText(decrementAriaLabel));
+  expect(mockOnChange).toHaveBeenCalledWith(testValue - testStep);
+});
+test('value can be set from outside (controlled state)', function () {
+  var controlledValue = 11;
+  getComponent({
+    value: controlledValue
+  });
+  expect(screen.getByLabelText(testLabel)).toHaveValue('11');
+});
+test('calling onChange with integer when input value changed (controlled state)', function () {
+  var mockOnChange = jest.fn();
+  var newTestValue = 123;
+  getComponent({
+    onChange: mockOnChange
+  });
+  var numberInput = screen.getByLabelText(testLabel);
+  userEvent.clear(numberInput);
+  userEvent.type(numberInput, newTestValue.toString());
+  numberInput.blur();
+  expect(mockOnChange).toHaveBeenCalledWith(newTestValue);
+});
+test('should be marked as required if isRequired prop if passed', function () {
+  getComponent({
+    isRequired: true
+  });
+  expect(screen.getByRole('textbox')).toBeRequired();
+});
+test('should show helper text if appropriate prop passed', function () {
+  var helperText = 'test helper text';
+  getComponent({
+    helperText: helperText,
+    status: statuses.ERROR
+  });
+  var fieldHelperText = screen.getByText(helperText);
+  expect(fieldHelperText).toBeInTheDocument();
+  expect(fieldHelperText).toHaveClass("is-".concat(statuses.ERROR));
+});
+test('should be able to be focused via keyboard', function () {
+  getComponent();
+  userEvent.tab();
+  expect(screen.getByLabelText(testLabel)).toHaveFocus();
+});
+test('should be able to interact with the keyboard', function () {
+  getComponent();
+  userEvent.tab();
+  var numberInput = screen.getByLabelText(testLabel);
+  userEvent.type(numberInput, '{arrowup}');
+  expect(numberInput).toHaveValue((testValue + 1).toString());
+  userEvent.type(numberInput, '{arrowdown}{arrowdown}');
+  expect(numberInput).toHaveValue((testValue - 1).toString());
+});
+test('should show hintText text if prop is passed', function () {
+  var hintText = 'some hint text';
+  getComponent({
+    hintText: hintText
+  });
+  var helpHintButton = screen.getByTestId('help-hint__button');
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(hintText)).toBeInTheDocument();
+});
+test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
+  getComponent();
+  userEvent.tab();
+  expect(screen.getByLabelText(testLabel)).toHaveFocus();
+  userEvent.tab();
+  expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
+  userEvent.tab();
+  expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+});

package/lib/components/NumberField/index.js

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

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -0,0 +1,100 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FocusScope } from '@react-aria/focus';
+import Box from '../Box';
+import { useStatusClasses, useOverlayPanelState } from '../../hooks';
+import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$sx;
+
+  var children = props.children,
+      isOpen = props.isOpen,
+      onCloseProp = props.onClose,
+      className = props.className,
+      state = props.state,
+      size = props.size,
+      triggerRef = props.triggerRef,
+      others = _objectWithoutProperties(props, ["children", "isOpen", "onClose", "className", "state", "size", "triggerRef"]);
+
+  var _useOverlayPanelState = useOverlayPanelState(),
+      onClose = _useOverlayPanelState.onClose;
+
+  var overlayPanelRef = useRef();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      contain = _useState2[0],
+      setIsContained = _useState2[1];
+  /* istanbul ignore next */
+
+
+  useImperativeHandle(ref, function () {
+    return overlayPanelRef.current;
+  });
+
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({
+    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;
+
+  var handleClose = function handleClose(e) {
+    e.stopPropagation();
+
+    if (e.key === 'Escape') {
+      setIsContained(false);
+    }
+  };
+
+  useEffect(function () {
+    if (!contain && onClose) {
+      onClose(state, triggerRef, onCloseProp);
+    }
+  }, [contain]);
+  return ___EmotionJSX(FocusScope, {
+    autoFocus: true,
+    contain: contain
+  }, ___EmotionJSX(Box, _extends({
+    variant: "overlayPanel.overlayPanel",
+    ref: overlayPanelRef
+  }, others, {
+    className: classNames,
+    onKeyUp: handleClose
+  }), ___EmotionJSX(Box, {
+    variant: "overlayPanel.overlayPanelBody",
+    className: classNames
+  }, children)));
+});
+OverlayPanel.propTypes = {
+  /** Sets the open state of the menu. */
+  isOpen: PropTypes.bool,
+
+  /** Sets the open state of the menu. */
+  size: PropTypes.oneOf(_Object$values(panelSizes)),
+
+  /** JSX styling that is passed into the component. */
+  sx: PropTypes.shape({
+    width: PropTypes.string
+  }),
+
+  /** State object that is passed in from the useOverlayPanelState hook */
+  state: PropTypes.shape({
+    close: PropTypes.func
+  }),
+
+  /** Callback function that runs when the esc key is used to close the OverlayPanel. */
+  onClose: PropTypes.func,
+
+  /** Ref that is connected to the button that triggers the overlay state.
+   Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
+  triggerRef: PropTypes.shape({})
+};
+OverlayPanel.defaultProps = {
+  size: 'medium'
+};
+export default OverlayPanel;

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

@@ -0,0 +1,192 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState, useRef } from 'react';
+import { Item } from '@react-stately/collections';
+import { useOverlayPanelState } from '../../hooks';
+import OverlayPanel from './OverlayPanel';
+import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button } from '../../index';
+import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'OverlayPanel',
+  component: OverlayPanel,
+  argTypes: {
+    children: {
+      description: 'Overlay panel content.',
+      control: 'none'
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: panelSizes
+      },
+      defaultValue: 'medium'
+    },
+    isOpen: {
+      control: 'none'
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  var _useOverlayPanelState = useOverlayPanelState(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = useRef();
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay is open.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(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."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+      ref: triggerRef,
+      onPress: state.open
+    }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+      isOpen: state.isOpen,
+      state: state
+    }, args, {
+      triggerRef: triggerRef
+    }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
+    }, "Close Panel"), ___EmotionJSX(Text, {
+      pt: "md"
+    }, "Children render here."))))
+  );
+};
+export var InnerPanel = function InnerPanel(_ref2) {
+  var args = _extends({}, _ref2);
+
+  var _useOverlayPanelState2 = useOverlayPanelState(),
+      state = _useOverlayPanelState2.state,
+      onClose = _useOverlayPanelState2.onClose;
+
+  var _useOverlayPanelState3 = useOverlayPanelState(),
+      innerState = _useOverlayPanelState3.state,
+      onCloseInner = _useOverlayPanelState3.onClose;
+
+  var outerTriggerRef = useRef();
+  var innerTriggerRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      messagesOpen = _useState2[0],
+      setMessagesOpen = _useState2[1];
+
+  var toggleMessagesOpen = function toggleMessagesOpen() {
+    setMessagesOpen(!messagesOpen);
+  };
+
+  var closeOuterPanel = function closeOuterPanel() {
+    if (innerState.isOpen) {
+      innerState.close();
+    }
+
+    onClose(state, outerTriggerRef);
+  };
+
+  var closeInnerPanel = function closeInnerPanel() {
+    onCloseInner(innerState, innerTriggerRef);
+  };
+
+  var inner = ___EmotionJSX(React.Fragment, null, innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
+    ,
+    isOpen: innerState.isOpen
+  }, args, {
+    state: innerState,
+    triggerRef: innerTriggerRef
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    onPress: closeInnerPanel
+  }, "Close Inner Panel"), ___EmotionJSX(Text, {
+    pt: "md"
+  }, "Children render here."))));
+
+  var outer = // should have higher z-index applied
+  ___EmotionJSX(React.Fragment, null, state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+    isOpen: state.isOpen,
+    sx: {
+      p: '0px'
+    }
+  }, args, {
+    state: state,
+    triggerRef: outerTriggerRef
+  }), ___EmotionJSX(Box, {
+    sx: {
+      p: '12px'
+    }
+  }, ___EmotionJSX(Button, {
+    onPress: closeOuterPanel
+  }, "Close Panel"), ___EmotionJSX(Text, {
+    pt: "md",
+    mb: "24px"
+  }, "Children render here."), ___EmotionJSX(List, null, ___EmotionJSX(ListItem, null, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 1")), ___EmotionJSX(Separator, {
+    margin: "0"
+  }), ___EmotionJSX(ListItem, {
+    title: "Form 2"
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 2")), ___EmotionJSX(Separator, {
+    margin: "0"
+  })), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+    onPress: toggleMessagesOpen
+  }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+    ref: innerTriggerRef,
+    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.
+    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      ref: outerTriggerRef,
+      onPress: state.open
+    }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
+      sx: {
+        zIndex: 3
+      }
+    }, ___EmotionJSX(Item, {
+      key: "message2",
+      status: "success"
+    }, "Z Index higher than inner pannel")))
+  );
+};
+export var CustomWidth = function CustomWidth() {
+  var _useOverlayPanelState4 = useOverlayPanelState(),
+      state = _useOverlayPanelState4.state,
+      onClose = _useOverlayPanelState4.onClose;
+
+  var triggerRef = useRef();
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(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."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+      ref: triggerRef,
+      onPress: state.open
+    }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, {
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: {
+        width: '720px'
+      }
+    }, ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
+    }, "Close Panel"), ___EmotionJSX(Text, {
+      pt: "md"
+    }, "Children render here."))))
+  );
+};

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

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import axeTest from '../../utils/testUtils/testAxe';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import OverlayPanel from './OverlayPanel';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(OverlayPanel, _extends({}, defaultProps, props)));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+axeTest(getComponent);
+test('default overlayPanel', function () {
+  getComponent({
+    children: ___EmotionJSX("div", null, "Test")
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  var child = screen.queryByText('Test');
+  expect(overlayPanel).toBeInTheDocument();
+  expect(child).toBeInTheDocument();
+});
+test('custom overlayPanel gets custom width', function () {
+  getComponent({
+    children: ___EmotionJSX("div", null, "Test"),
+    sx: {
+      width: '240px'
+    }
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  expect(overlayPanel).toBeInTheDocument();
+  expect(overlayPanel).toHaveStyleRule('width', '240px');
+});
+test('onClose callback fires when provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    onClose: onClose,
+    children: ___EmotionJSX("div", null, "Test")
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  expect(onClose).toHaveBeenCalled();
+});
+test('neither callback fires when not provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    children: ___EmotionJSX("div", null, "Test")
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  expect(onClose).not.toHaveBeenCalled();
+});
+test('triggerRef.current.focus() fires when provided', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: ___EmotionJSX("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  expect(focusFunction).toHaveBeenCalled();
+});

package/lib/components/OverlayPanel/index.js

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

package/lib/components/PageHeader/PageHeader.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Text from '../Text/Text';
+import Box from '../Box/Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+      children = props.children,
+      others = _objectWithoutProperties(props, ["title", "children"]);
+
+  return ___EmotionJSX(Box, _extends({
+    isRow: true,
+    justifyContent: "space-between",
+    role: "heading",
+    "aria-level": "1",
+    ref: ref
+  }, others), ___EmotionJSX(Text, {
+    variant: "title",
+    mb: "md"
+  }, title), children);
+});
+PageHeader.displayName = 'PageHeader';
+export default PageHeader;
+PageHeader.propTypes = {
+  /** Title for the Page Header. */
+  title: PropTypes.string
+};

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

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import PageHeader from '../PageHeader/PageHeader';
+import Button from '../Button/Button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'PageHeader',
+  component: PageHeader,
+  argTypes: {
+    title: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Forms'
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  return ___EmotionJSX(PageHeader, args, ___EmotionJSX(Button, null, "Add a Form"));
+};

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

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PageHeader from './PageHeader';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(PageHeader, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders pageheader and title', function () {
+  getComponent();
+  var title = screen.getByRole('heading');
+  expect(title).toBeInTheDocument();
+});

package/lib/components/PageHeader/index.js

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