@skyscanner/backpack-web 6.0.0 → 7.0.0-alpha.2

package/bpk-component-nudger/src/BpkNudger-test.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _BpkConfigurableNudger = _interopRequireDefault(require("./BpkConfigurableNudger"));
+
+var _BpkNudger = _interopRequireDefault(require("./BpkNudger"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('BpkNudger', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 2,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render as an on dark nudger correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 2,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase",
+      buttonType: "secondaryOnDark"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render as a configurable nudger correctly', () => {
+    const compareValues = (a, b) => {
+      const options = ['economy', 'premium', 'business', 'first'];
+      const [aIndex, bIndex] = [options.indexOf(a), options.indexOf(b)];
+      return aIndex - bIndex;
+    };
+
+    const incrementValue = currentValue => {
+      const options = ['economy', 'premium', 'business', 'first'];
+      const [aIndex] = [options.indexOf(currentValue) + 1];
+      return options[aIndex];
+    };
+
+    const decrementValue = currentValue => {
+      const options = ['economy', 'premium', 'business', 'first'];
+      const [aIndex] = [options.indexOf(currentValue) - 1];
+      return options[aIndex];
+    };
+
+    const formatValue = a => a.toString();
+
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkConfigurableNudger.default, {
+      id: "nudger",
+      min: "economy",
+      max: "first",
+      value: "premium",
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase",
+      compareValues: compareValues,
+      incrementValue: incrementValue,
+      decrementValue: decrementValue,
+      formatValue: formatValue
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "className" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 2,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase",
+      className: "my-nudger"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a value = min', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 1,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a value = max', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 9,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a value < min', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 0,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a value > max', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 10,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should return a number up/down on change', async () => {
+    const onChangeSpy = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      min: 1,
+      max: 9,
+      value: 3,
+      onChange: onChangeSpy,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    }));
+
+    const minusButton = _react2.screen.getByRole('button', {
+      name: 'Decrease'
+    });
+
+    await _userEvent.default.click(minusButton);
+    expect(onChangeSpy).toHaveBeenCalledWith(2);
+
+    const plusButton = _react2.screen.getByRole('button', {
+      name: 'Increase'
+    });
+
+    await _userEvent.default.click(plusButton);
+    expect(onChangeSpy).toHaveBeenCalledWith(4);
+  });
+});

package/bpk-component-nudger/src/BpkNudger.js

@@ -1,69 +1,63 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkConfigurableNudger from './BpkConfigurableNudger';
-import {
-  type CommonProps,
-  COMMON_DEFAULT_PROPS,
-  COMMON_PROP_TYPES,
-} from './common-types';
-import STYLES from './BpkNudger.module.scss';
-
-type Props = {
-  ...$Exact<CommonProps<number>>,
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bpkReactUtils = require("bpk-react-utils");
+
+var _BpkConfigurableNudger = _interopRequireDefault(require("./BpkConfigurableNudger"));
+
+var _commonTypes = require("./common-types");
+
+var _BpkNudgerModule = _interopRequireDefault(require("./BpkNudger.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-const getClassName = cssModules(STYLES);
-const compareValues = (a: number, b: number): number => a - b;
-const incrementValue = (currentValue: number): number => currentValue + 1;
-const decrementValue = (currentValue: number): number => currentValue - 1;
-const formatValue = (currentValue: number): string => currentValue.toString();
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-const BpkNudger = (props: Props) => {
-  const { ...rest } = props;
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkNudgerModule.default);
+
+const compareValues = (a, b) => a - b;
+
+const incrementValue = currentValue => currentValue + 1;
+
+const decrementValue = currentValue => currentValue - 1;
+
+const formatValue = currentValue => currentValue.toString();
+
+const BpkNudger = props => {
+  const rest = _extends({}, props);
 
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkConfigurableNudger
-      inputClassName={getClassName('bpk-nudger__input--numeric')}
-      compareValues={compareValues}
-      incrementValue={incrementValue}
-      decrementValue={decrementValue}
-      formatValue={formatValue}
-      {...rest}
-    />
+    _react.default.createElement(_BpkConfigurableNudger.default, _extends({
+      inputClassName: getClassName('bpk-nudger__input--numeric'),
+      compareValues: compareValues,
+      incrementValue: incrementValue,
+      decrementValue: decrementValue,
+      formatValue: formatValue
+    }, rest))
   );
 };
 
-BpkNudger.propTypes = {
-  ...COMMON_PROP_TYPES,
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
-BpkNudger.defaultProps = COMMON_DEFAULT_PROPS;
-
-export default BpkNudger;
+BpkNudger.propTypes = _objectSpread(_objectSpread({}, _commonTypes.COMMON_PROP_TYPES), {}, {
+  max: _propTypes.default.number.isRequired,
+  min: _propTypes.default.number.isRequired,
+  value: _propTypes.default.number.isRequired
+});
+BpkNudger.defaultProps = _commonTypes.COMMON_DEFAULT_PROPS;
+var _default = BpkNudger;
+exports.default = _default;

package/bpk-component-nudger/src/accessibility-test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _BpkNudger = _interopRequireDefault(require("./BpkNudger"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('BpkNudger accessibility tests', () => {
+  /*
+  This component's accessibility is lacking right now due to
+  use of a read only input. We should improve it soon and then
+  this test will become possible.
+  */
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+      id: "label",
+      htmlFor: "nudger"
+    }, "Nudger"), /*#__PURE__*/_react.default.createElement(_BpkNudger.default, {
+      id: "nudger",
+      "aria-labelledby": "label",
+      min: 1,
+      max: 9,
+      value: 2,
+      onChange: () => null,
+      decreaseButtonLabel: "Decrease",
+      increaseButtonLabel: "Increase"
+    })));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-nudger/src/common-types.js

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMMON_PROP_TYPES = exports.COMMON_DEFAULT_PROPS = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,31 +26,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
-import PropTypes from 'prop-types';
-
-export type CommonProps<T> = {
-  id: string,
-  min: T,
-  max: T,
-  value: T,
-  onChange: (T) => mixed,
-  className: ?string,
-  increaseButtonLabel: string,
-  decreaseButtonLabel: string,
-  buttonType: string,
-};
-
-export const COMMON_PROP_TYPES = {
-  id: PropTypes.string.isRequired,
-  decreaseButtonLabel: PropTypes.string.isRequired,
-  increaseButtonLabel: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  buttonType: PropTypes.oneOf(['secondary', 'secondaryOnDark']),
+const COMMON_PROP_TYPES = {
+  id: _propTypes.default.string.isRequired,
+  decreaseButtonLabel: _propTypes.default.string.isRequired,
+  increaseButtonLabel: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
+  buttonType: _propTypes.default.oneOf(['secondary', 'secondaryOnDark'])
 };
-
-export const COMMON_DEFAULT_PROPS = {
+exports.COMMON_PROP_TYPES = COMMON_PROP_TYPES;
+const COMMON_DEFAULT_PROPS = {
   className: null,
-  buttonType: 'secondary',
+  buttonType: 'secondary'
 };
+exports.COMMON_DEFAULT_PROPS = COMMON_DEFAULT_PROPS;

package/bpk-component-nudger/src/themeAttributes-test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _themeAttributes = _interopRequireDefault(require("./themeAttributes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('themeAttributes', () => {
+  it('should export the correct theme attributes', () => {
+    expect(_themeAttributes.default).toEqual(['buttonSecondaryTextColor', 'buttonSecondaryHoverTextColor', 'buttonSecondaryActiveTextColor', 'buttonSecondaryBorderColor', 'buttonSecondaryHoverBorderColor', 'buttonSecondaryActiveBorderColor', 'buttonSecondaryBackgroundColor', 'buttonSecondaryHoverBackgroundColor', 'buttonSecondaryActiveBackgroundColor']);
+  });
+});

package/bpk-component-nudger/src/themeAttributes.js

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _themeAttributes = require("bpk-component-button/themeAttributes");
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,9 +24,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
-
-export default themeAttributes;
+var _default = _themeAttributes.secondaryThemeAttributes;
+exports.default = _default;

package/bpk-component-overlay/index.js

@@ -1,3 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BORDER_RADIUS_STYLES", {
+  enumerable: true,
+  get: function () {
+    return _BpkOverlay.BORDER_RADIUS_STYLES;
+  }
+});
+Object.defineProperty(exports, "OVERLAY_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _BpkOverlay.OVERLAY_TYPES;
+  }
+});
+exports.default = void 0;
+
+var _BpkOverlay = _interopRequireWildcard(require("./src/BpkOverlay"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,14 +40,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
-
-import BpkOverlay, {
-  OVERLAY_TYPES,
-  BORDER_RADIUS_STYLES,
-  type Props as BpkOverlayProps,
-} from './src/BpkOverlay';
-
-export type { BpkOverlayProps };
-export default BpkOverlay;
-export { OVERLAY_TYPES, BORDER_RADIUS_STYLES };
+var _default = _BpkOverlay.default;
+exports.default = _default;

package/bpk-component-overlay/src/BpkOverlay-test.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _BpkOverlay = _interopRequireWildcard(require("./BpkOverlay"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('BpkOverlay', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkOverlay.default, null, /*#__PURE__*/_react.default.createElement("span", null, "Backpack")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with foregroundContent', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkOverlay.default, {
+      foregroundContent: /*#__PURE__*/_react.default.createElement("span", null, "Skyscanner")
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Backpack")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  Object.keys(_BpkOverlay.OVERLAY_TYPES).map(overlayType => it(`should render correctly with overlayType={${overlayType}}`, () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkOverlay.default, {
+      overlayType: overlayType
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Backpack")));
+    expect(asFragment()).toMatchSnapshot();
+  }));
+  Object.keys(_BpkOverlay.BORDER_RADIUS_STYLES).map(borderRadiusStyle => it(`should render correctly with borderRadiusStyle={${borderRadiusStyle}}`, () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkOverlay.default, {
+      borderRadiusStyle: borderRadiusStyle
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Backpack")));
+    expect(asFragment()).toMatchSnapshot();
+  }));
+  it('should support custom class names', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkOverlay.default, {
+      className: "custom-classname"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Backpack")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should support arbitrary props', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkOverlay.default, {
+      testid: "123"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Backpack")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});