@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/components/RequirementsList/RequirementsList.test.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import RequirementsList from '.';
+import axeTest from '../../utils/testUtils/testAxe'; // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
+// Failure occured with ThemeUI refactor.
+// https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var emotionCache = createCache({
+  key: 'requirements-test'
+});
+emotionCache.compat = true;
+var testId = 'test-requirements-list';
+var testStatusIdDefault = 'status-icon__default';
+var testStatusIdSuccess = 'status-icon__success';
+var testStatusIdWarning = 'status-icon__warning';
+var testStatusIdError = 'status-icon__error';
+var testRequirements = [{
+  name: '6 characters',
+  status: 'default'
+}, {
+  name: '1 UPPERCASE letter',
+  status: 'success'
+}, {
+  name: '1 lowercase letter',
+  status: 'success'
+}, {
+  name: '1 number',
+  status: 'error'
+}, {
+  name: 'Password Strength',
+  status: 'warning'
+}];
+var defaultProps = {
+  'data-testid': testId,
+  requirements: testRequirements
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(CacheProvider, {
+    value: emotionCache
+  }, ___EmotionJSX(RequirementsList, _extends({}, defaultProps, props))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('base case requirements list', function () {
+  getComponent();
+  var requirementsList = screen.getByTestId(testId);
+  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInTheDocument();
+});
+test('empty variables requirements list', function () {
+  getComponent({
+    requirementsList: []
+  });
+  var requirementsList = screen.getByTestId(testId);
+  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInTheDocument();
+});
+test('should render default status icon if such passed in props', function () {
+  getComponent({
+    requirements: [{
+      name: '6 characters',
+      status: 'default'
+    }]
+  });
+  expect(screen.getByTestId(testStatusIdDefault)).toBeInTheDocument();
+});
+test('should render success status icon if such passed in props', function () {
+  getComponent({
+    requirements: [{
+      name: '6 characters',
+      status: 'success'
+    }]
+  });
+  expect(screen.getByTestId(testStatusIdSuccess)).toBeInTheDocument();
+});
+test('should render warning status icon if such passed in props', function () {
+  getComponent({
+    requirements: [{
+      name: '6 characters',
+      status: 'warning'
+    }]
+  });
+  expect(screen.getByTestId(testStatusIdWarning)).toBeInTheDocument();
+});
+test('should render error status icon if such passed in props', function () {
+  getComponent({
+    requirements: [{
+      name: '6 characters',
+      status: 'error'
+    }]
+  });
+  expect(screen.getByTestId(testStatusIdError)).toBeInTheDocument();
+});

package/lib/components/RequirementsList/index.js

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

package/lib/components/RockerButton/RockerButton.js

@@ -0,0 +1,98 @@
+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";
+
+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, useContext, useImperativeHandle, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Item } from '@react-stately/collections';
+import { FocusRing } from '@react-aria/focus';
+import { useRockerButton, useStatusClasses, usePropWarning } from '../../hooks';
+import { Box } from '../../index';
+import { RockerContext } from '../RockerButtonGroup';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      item = props.item;
+  var key = item.key,
+      rendered = item.rendered,
+      itemProps = item.props;
+  var state = useContext(RockerContext);
+  var isDisabled = state.disabledKeys.has(key);
+  var isSelected = state.selectedKey === key;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isSelected,
+    isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var rockerButtonRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return rockerButtonRef.current;
+  });
+
+  var _useRockerButton = useRockerButton({
+    item: item,
+    isDisabled: isDisabled,
+    isSelected: isSelected
+  }, state, rockerButtonRef),
+      rockerButtonProps = _useRockerButton.rockerButtonProps;
+
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-focused"
+  }, ___EmotionJSX(Box, _extends({
+    as: "button",
+    className: classNames,
+    variant: "buttons.rocker"
+  }, rockerButtonProps, {
+    ref: rockerButtonRef
+  }, itemProps, {
+    sx: {
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
+    }
+  }), rendered));
+});
+CollectionRockerButton.displayName = 'CollectionRockerButton';
+CollectionRockerButton.propTypes = {
+  /** Allows custom styles to be passed to button. */
+  selectedStyles: PropTypes.shape({}),
+  // adding to surface in props table
+
+  /** @ignore */
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      selectedStyles: PropTypes.shape({})
+    }),
+    rendered: PropTypes.node
+  })
+};
+CollectionRockerButton.defaultProps = {
+  selectedStyles: {
+    bg: 'active'
+  },
+  item: {
+    props: {
+      selectedStyles: {
+        bg: 'active'
+      }
+    }
+  }
+}; // Export Item as default for simplicity, convert to CollectionRockerButton within
+// RockerButtonGroup component.
+
+export default Item;

package/lib/components/RockerButton/index.js

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

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -0,0 +1,90 @@
+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 _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onSelectionChange", "tabListProps", "disabledKeys"];
+
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTabList } from '@react-aria/tabs';
+import { useTabListState } from '@react-stately/tabs';
+import { usePropWarning } from '../../hooks';
+import Box from '../Box';
+import { CollectionRockerButton } from '../RockerButton';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var RockerContext = /*#__PURE__*/React.createContext({});
+/**
+ * This component handles a single selection state for a group of rocker buttons.
+ * It is intended to be used with < RockerButton > as children.
+*/
+
+var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context;
+
+  var children = props.children,
+      onSelectionChange = props.onSelectionChange,
+      tabListProps = props.tabListProps,
+      disabledKeys = props.disabledKeys,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var buttonGroupRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return buttonGroupRef.current;
+  });
+  var state = useTabListState(_objectSpread(_objectSpread({}, props), {}, {
+    onSelectionChange: onSelectionChange
+  }));
+
+  var _useTabList = useTabList(props, state, buttonGroupRef),
+      raTabListProps = _useTabList.tabListProps; // removed tabList role for now as this isn't really the role we are looking for
+
+
+  delete raTabListProps.role;
+  return ___EmotionJSX(RockerContext.Provider, {
+    value: state
+  }, ___EmotionJSX(Box, _extends({
+    variant: "rockerbutton.rockerContainer"
+  }, others), ___EmotionJSX(Box, _extends({
+    variant: "rockerbutton.rockerContainerInner",
+    isRow: true
+  }, tabListProps, raTabListProps, {
+    ref: buttonGroupRef,
+    role: "toolbar"
+  }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+    return ___EmotionJSX(CollectionRockerButton, {
+      key: item.key,
+      item: item
+    });
+  }))));
+});
+RockerButtonGroup.propTypes = {
+  /** The default button key to be selected. (uncontrolled) */
+  defaultSelectedKey: PropTypes.string,
+
+  /** The button key that is currently selected. (controlled) */
+  selectedKey: PropTypes.string,
+
+  /** Which keys should be disabled. */
+  disabledKeys: PropTypes.arrayOf(PropTypes.string),
+
+  /** Handler that is called when the selected button has changed. */
+  onSelectionChange: PropTypes.func
+};
+RockerButtonGroup.displayName = 'RockerButtonGroup';
+export default RockerButtonGroup;

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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,99 @@
+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

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

package/lib/components/ScrollBox/ScrollBox.js

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,26 @@
+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?")));
+};