@pingux/astro 1.17.0-alpha.2 → 1.17.0-alpha.3

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -1,111 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState } from 'react';
-import RockerButtonGroup from '../RockerButtonGroup';
-import RockerButton from '../RockerButton';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'RockerButtonGroup',
-  component: RockerButtonGroup,
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  },
-  argTypes: {
-    isDisabled: {
-      defaultValue: false
-    },
-    defaultSelectedKey: {},
-    selectedKey: {
-      control: {
-        type: 'none'
-      }
-    }
-  }
-};
-export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
-  return ___EmotionJSX(RockerButtonGroup, args, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-export var Uncontrolled = function Uncontrolled() {
-  return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-export var Controlled = function Controlled() {
-  var _useState = useState('and'),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentTab = _useState2[0],
-      setCurrentTab = _useState2[1];
-
-  return ___EmotionJSX(RockerButtonGroup, {
-    selectedKey: currentTab,
-    onSelectionChange: setCurrentTab
-  }, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-export var withCustomSelectedColors = function withCustomSelectedColors() {
-  return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and",
-    selectedStyles: {
-      bg: '#640099'
-    }
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or",
-    selectedStyles: {
-      bg: '#4660A2'
-    }
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe",
-    selectedStyles: {
-      bg: 'accent.30',
-      color: 'yellow'
-    }
-  }, "Maybe"));
-};
-export var DisabledSingleButton = function DisabledSingleButton() {
-  return ___EmotionJSX(RockerButtonGroup, {
-    defaultSelectedKey: "or",
-    disabledKeys: ['and']
-  }, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};

package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js

@@ -1,99 +0,0 @@
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
-import { fireEvent, queryByAttribute, render, screen } from '../../utils/testUtils/testWrapper';
-import RockerButtonGroup from './RockerButtonGroup';
-import RockerButton from '../RockerButton';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'testId';
-var testButtons = [{
-  name: 'And',
-  key: 'And',
-  selectedStyles: {
-    bg: '#640099'
-  }
-}, {
-  name: 'Or',
-  key: 'Or'
-}, {
-  name: 'Maybe?',
-  key: 'Maybe?'
-}];
-var defaultProps = {
-  'data-testid': testId,
-  defaultSelectedKey: testButtons[0].name
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$buttons = _ref.buttons,
-      buttons = _ref$buttons === void 0 ? testButtons : _ref$buttons,
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
-  return renderFn(___EmotionJSX(RockerButtonGroup, _extends({}, defaultProps, props, {
-    "data-id": "test-container"
-  }), _mapInstanceProperty(buttons).call(buttons, function (button) {
-    return ___EmotionJSX(RockerButton, {
-      title: button.name,
-      key: button.key,
-      selectedStyles: button.selectedStyles
-    });
-  })));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-axeTest(getComponent);
-test('renders rocker container with buttons', function () {
-  getComponent();
-  var rockerContainer = queryByAttribute('data-id', document, 'test-container');
-  expect(rockerContainer).toBeInTheDocument();
-  var buttons = screen.getAllByRole('button');
-  expect(buttons).toHaveLength(3);
-});
-test('buttonGroup is not disabled by default', function () {
-  getComponent();
-  var rockerContainer = queryByAttribute('data-id', document, 'test-container');
-  expect(rockerContainer).toBeEnabled();
-
-  _forEachInstanceProperty(testButtons).call(testButtons, function (button) {
-    var buttonKey = screen.getByText(button.key);
-    expect(buttonKey).not.toHaveClass('is-disabled');
-  });
-});
-test('rocker button is disabled when its key is included in disabledKeys', function () {
-  getComponent({
-    disabledKeys: _mapInstanceProperty(testButtons).call(testButtons, function (button) {
-      return button.key;
-    })
-  });
-
-  _forEachInstanceProperty(testButtons).call(testButtons, function (button) {
-    var buttonKey = screen.getByText(button.key);
-    expect(buttonKey).toHaveClass('is-disabled');
-  });
-});
-test('rockerButton renders selectedStyles prop when selected', function () {
-  getComponent();
-  var buttonColorKey = screen.getByText(testButtons[0].key);
-  expect(buttonColorKey).toHaveClass('is-selected');
-});
-test('selected button can be changed by keyboard interaction', function () {
-  getComponent();
-  userEvent.tab();
-  var button0 = screen.getByText(testButtons[0].key);
-  expect(button0).toHaveClass('is-selected');
-  var button1 = screen.getByText(testButtons[1].key);
-  expect(button1).not.toHaveClass('is-selected');
-  fireEvent.keyDown(screen.getByText(testButtons[0].key), {
-    key: 'ArrowRight',
-    code: 'ArrowRight'
-  });
-  expect(screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
-  expect(screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
-});

package/lib/components/RockerButtonGroup/index.js

@@ -1,2 +0,0 @@
-export { default } from './RockerButtonGroup';
-export * from './RockerButtonGroup';

package/lib/components/ScrollBox/ScrollBox.js

@@ -1,118 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-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";
-var _excluded = ["maxHeight", "children", "sx", "hasShadows", "onScroll"];
-
-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, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import Box from '../Box';
-import useStatusClasses from '../../hooks/useStatusClasses';
-/**
- * Scrollbox is a container that allows content to be scrolled
- */
-
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
-  var maxHeight = props.maxHeight,
-      children = props.children,
-      sx = props.sx,
-      hasShadows = props.hasShadows,
-      scrollHandler = props.onScroll,
-      others = _objectWithoutProperties(props, _excluded);
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      scrollTopPosition = _useState2[0],
-      setScrollTopPosition = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isTopShadowShowing = _useState4[0],
-      setIsTopShadowShowing = _useState4[1];
-
-  var _useState5 = useState(true),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isBottomShadowShowing = _useState6[0],
-      setIsBottomShadowShowing = _useState6[1];
-
-  var outerRef = useRef();
-  /* istanbul ignore next */
-
-  useImperativeHandle(ref, function () {
-    return outerRef.current;
-  });
-  /* istanbul ignore next */
-
-  useLayoutEffect(function () {
-    if (outerRef.current && outerRef.current.firstChild) {
-      if (outerRef.current.firstChild.offsetHeight !== 0) {
-        setIsBottomShadowShowing(outerRef.current.firstChild.scrollHeight - outerRef.current.firstChild.offsetHeight !== outerRef.current.firstChild.scrollTop);
-        setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
-      }
-    }
-  }, [scrollTopPosition]);
-  /* istanbul ignore next */
-
-  var onScroll = function onScroll() {
-    var _outerRef$current;
-
-    if ((_outerRef$current = outerRef.current) !== null && _outerRef$current !== void 0 && _outerRef$current.firstChild) {
-      var _outerRef$current2, _outerRef$current2$fi;
-
-      setScrollTopPosition((_outerRef$current2 = outerRef.current) === null || _outerRef$current2 === void 0 ? void 0 : (_outerRef$current2$fi = _outerRef$current2.firstChild) === null || _outerRef$current2$fi === void 0 ? void 0 : _outerRef$current2$fi.scrollTop);
-    }
-  };
-
-  var _useStatusClasses = useStatusClasses('', {
-    hasShadows: hasShadows,
-    isTopShadowShowing: isTopShadowShowing,
-    isBottomShadowShowing: isBottomShadowShowing
-  }),
-      classNames = _useStatusClasses.classNames;
-
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    variant: "boxes.topShadowScrollbox",
-    className: classNames,
-    role: "separator"
-  }), ___EmotionJSX(Box, _extends({
-    ref: outerRef,
-    sx: _objectSpread({
-      maxHeight: maxHeight,
-      overflowY: 'auto'
-    }, sx),
-    onScroll: onScroll,
-    variant: "boxes.scrollbox"
-  }, others), children), ___EmotionJSX(Box, {
-    variant: "boxes.bottomShadowScrollbox",
-    className: classNames,
-    role: "separator"
-  }));
-});
-ScrollBox.defaultProps = {
-  maxHeight: '100%',
-  hasShadows: false
-};
-ScrollBox.propTypes = {
-  /** Height at which the content within ScrollBox will overflow */
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number]),
-
-  /** Callback that fires when scrolling is done inside the ScrollBox */
-  onScroll: PropTypes.func,
-
-  /** If true the box will render top and bottom shadows with scroll */
-  hasShadows: PropTypes.bool
-};
-export default ScrollBox;

package/lib/components/ScrollBox/ScrollBox.stories.js

@@ -1,26 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
-import ScrollBox from './ScrollBox';
-import Box from '../Box';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'ScrollBox',
-  component: ScrollBox,
-  argTypes: {
-    maxHeight: {
-      control: {
-        type: 'text'
-      },
-      defaultValue: '100px'
-    }
-  }
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(ScrollBox, _extends({
-    maxHeight: "100px"
-  }, args), ___EmotionJSX(Box, {
-    sx: {
-      height: '150px'
-    }
-  }, ___EmotionJSX("p", null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")));
-};

package/lib/components/ScrollBox/ScrollBox.test.js

@@ -1,63 +0,0 @@
-import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
-import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import ScrollBox from './ScrollBox';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'scrollBoxTestId';
-var defaultProps = {
-  'data-testid': testId,
-  'maxHeight': '100px'
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ScrollBox, _extends({}, defaultProps, props)));
-};
-
-test('maxHeight passes into the component', function () {
-  getComponent();
-  var scrollBoxComponent = screen.getByTestId(testId);
-  expect(scrollBoxComponent).toBeInTheDocument();
-  expect(scrollBoxComponent).toHaveStyle({
-    maxHeight: '100px'
-  });
-});
-test('passing hasShadows renders the shadow css', function () {
-  getComponent({
-    hasShadows: true
-  });
-  var scrollBoxComponent = screen.getByTestId(testId);
-  expect(scrollBoxComponent).toBeInTheDocument();
-  var shadows = screen.getAllByRole('separator');
-  expect(shadows[0]).toHaveClass('has-shadows');
-  expect(shadows[1]).toHaveClass('has-shadows');
-});
-test('with hasShadows prop only the bottom shadow is rendered first', function () {
-  getComponent({
-    hasShadows: true
-  });
-  var scrollBoxComponent = screen.getByTestId(testId);
-  expect(scrollBoxComponent).toBeInTheDocument();
-  var shadows = screen.getAllByRole('separator');
-  expect(shadows[0]).not.toHaveClass('is-top-shadow-showing');
-  expect(shadows[1]).toHaveClass('is-bottom-shadow-showing');
-});
-test('with hasShadows prop only the top shadow is rendered after scroll to down', function () {
-  getComponent({
-    hasShadows: true
-  });
-  var scrollBoxComponent = screen.getByTestId(testId);
-  expect(scrollBoxComponent).toBeInTheDocument();
-  fireEvent.scroll(scrollBoxComponent, {
-    target: {
-      scrollY: 100
-    }
-  });
-  var shadows = screen.getAllByRole('separator');
-
-  _setTimeout(function () {
-    expect(shadows[0]).toHaveClass('is-top-shadow-showing');
-    expect(shadows[1]).not.toHaveClass('is-bottom-shadow-showing');
-  }, 200);
-});

package/lib/components/ScrollBox/index.js

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