@skyscanner/backpack-web 25.6.0 → 25.7.0-beta

package/bpk-component-modal/src/BpkModalV2/README.md

@@ -0,0 +1,90 @@
+# bpk-component-modal
+
+> ## 🧪 Experimental Component: `BpkModalV2`
+>
+> ### Why a version 2?
+>
+> The `BpkModalV2` introduce the HTML `<dialog>` element to the bpk-component-modal in Backpack.
+>
+> This is a powerful solution for accessibility within a modal:
+> > *The native HTML `<dialog>` element should be used in creating modal dialogs as it provides usability and accessibility features that must be replicated if using other elements for a similar purpose* [Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog]
+>
+> ### Help and feedbacks
+>
+> As an experimental component and in order to improve it, we would like to hear about your issues/feedbacks.
+>
+> Contact: @Tony (Anthony Byledbal)
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import { Component } from 'react';
+import BpkModalV2 from '@skyscanner/backpack-web/bpk-component-modal';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+
+class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    return (
+      <div id="modal-container">
+        <div id="pagewrap">
+          <BpkButton onClick={this.onOpen}>Open modal</BpkButton>
+        </div>
+        <BpkModal
+          id="bpk-modal"
+          ariaLabelledby="bpk-modal-label-my-dialog"
+          closeLabel="bpk-modal-button-close"
+          isOpen={this.state.isOpen}
+          onClose={this.onClose}
+            >
+              <div>
+                Back to results
+              </div>
+          }
+        >
+          This is a modal. You can put anything you want in here.
+        </BpkModal>
+      </div>
+    );
+  }
+}
+```
+
+## Props
+
+| Property              | PropType | Required | Default Value |
+| --------------------- | -------- | -------- | ------------- |
+| id                    | string   | true     | -             |
+| children              | node     | true     | -             |
+| closeLabel            | string   | true     | -             |
+| isOpen                | bool     | true     | -             |
+| onClose               | func     | true     | -             |
+| fullScreenOnMobile    | bool     | false    | false         |
+| noFullScreenOnMobile  | bool     | false    | false         |
+| padded                | bool     | false    | false         |
+| showHeader            | bool     | false    | true          |
+| title                 | string   | false    | ''            |
+| wide                  | bool     | false    | false         |

package/bpk-component-modal/src/BpkModalV2/accessibility-test.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { BpkModalV2 } from './BpkModal';
+
+describe('BpkModal accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkModalV2
+        id="bpk-modal-element"
+        ariaLabelledby="bpk-modal-label-my-dialog"
+        closeLabel="bpk-modal-button-close"
+        isOpen
+        onClose={jest.fn()}
+        title="Backpack Dialog Element"
+        padded
+      >
+        Dialog content
+      </BpkModalV2>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-modal/src/accessibility-test.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import BpkModal from './BpkModal';
+
+describe('BpkModal accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const customRenderTarget = document.createElement('div');
+
+    const { container } = render(
+      <BpkModal
+        id="my-modal"
+        title="Modal title"
+        onClose={jest.fn()}
+        closeLabel="Close"
+        dialogRef={jest.fn()}
+        isIphone={false}
+        getApplicationElement={jest.fn()}
+        isOpen
+        renderTarget={() => customRenderTarget}
+      >
+        Modal content inside a custom target
+      </BpkModal>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-modal/src/customPropTypes.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.titlePropType = exports.onClosePropType = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -20,19 +14,41 @@ exports.titlePropType = exports.onClosePropType = void 0;
  * 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.
- */const titlePropType = (props, propName, componentName) => {
+ */
+
+/* @flow strict */
+
+export const titlePropType = (
+  props: Object,
+  propName: string,
+  componentName: string,
+): ?Error => {
   const titleValue = props[propName];
+
   if (props.showHeader && (!titleValue || typeof titleValue !== 'string')) {
-    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`);
+    return new Error(
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`,
+    );
   }
+
   return null;
 };
-exports.titlePropType = titlePropType;
-const onClosePropType = (props, propName, componentName) => {
+
+export const onClosePropType = (
+  props: Object,
+  propName: string,
+  componentName: string,
+): ?Error => {
   const onCloseValue = props[propName];
-  if (props.showHeader && (!onCloseValue || typeof onCloseValue !== 'function')) {
-    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`);
+
+  if (
+    props.showHeader &&
+    (!onCloseValue || typeof onCloseValue !== 'function')
+  ) {
+    return new Error(
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`,
+    );
   }
+
   return null;
 };
-exports.onClosePropType = onClosePropType;

package/bpk-component-modal/src/legacy-prop-types.js

@@ -1,54 +1,46 @@
-"use strict";
+/*
+ * 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.
+ */
+
+import PropTypes from 'prop-types';
+
+import { isDeviceIphone } from '../../bpk-react-utils';
+
+import { titlePropType, onClosePropType } from './customPropTypes';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _customPropTypes = require("./customPropTypes");
-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; }
-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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /*
-                                                                                                                                                                                                                                                                                                                     * 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.
-                                                                                                                                                                                                                                                                                                                     */
 const modalDialogPropTypes = {
-  id: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node.isRequired,
-  isIphone: _propTypes.default.bool.isRequired,
-  dialogRef: _propTypes.default.func.isRequired,
-  title: _customPropTypes.titlePropType,
-  onClose: _customPropTypes.onClosePropType,
-  className: _propTypes.default.string,
-  contentClassName: _propTypes.default.string,
-  closeLabel: _propTypes.default.string,
-  closeText: _propTypes.default.string,
-  wide: _propTypes.default.bool,
-  showHeader: _propTypes.default.bool,
-  fullScreenOnMobile: _propTypes.default.bool,
-  fullScreen: _propTypes.default.bool,
-  padded: _propTypes.default.bool,
-  accesoryView: _propTypes.default.func
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  isIphone: PropTypes.bool.isRequired,
+  dialogRef: PropTypes.func.isRequired,
+  title: titlePropType,
+  onClose: onClosePropType,
+  className: PropTypes.string,
+  contentClassName: PropTypes.string,
+  closeLabel: PropTypes.string,
+  closeText: PropTypes.string,
+  wide: PropTypes.bool,
+  showHeader: PropTypes.bool,
+  fullScreenOnMobile: PropTypes.bool,
+  fullScreen: PropTypes.bool,
+  padded: PropTypes.bool,
+  accesoryView: PropTypes.func,
 };
+
 const modalDialogDefaultProps = {
   title: null,
   onClose: () => null,
@@ -61,26 +53,26 @@ const modalDialogDefaultProps = {
   fullScreenOnMobile: true,
   fullScreen: false,
   padded: true,
-  accessoryView: null
+  accessoryView: null,
 };
-const {
-    dialogRef
-  } = modalDialogPropTypes,
-  newModalDialogPropTypes = _objectWithoutProperties(modalDialogPropTypes, ["dialogRef"]);
-const propTypes = _objectSpread(_objectSpread({}, newModalDialogPropTypes), {}, {
-  onClose: _propTypes.default.func,
-  isIphone: _propTypes.default.bool,
-  isOpen: _propTypes.default.bool.isRequired,
-  renderTarget: _propTypes.default.func,
-  closeOnScrimClick: _propTypes.default.bool,
-  closeOnEscPressed: _propTypes.default.bool
-});
-exports.propTypes = propTypes;
-const defaultProps = _objectSpread(_objectSpread({}, modalDialogDefaultProps), {}, {
+
+const { dialogRef, ...newModalDialogPropTypes } = modalDialogPropTypes;
+
+export const propTypes = {
+  ...newModalDialogPropTypes,
+  onClose: PropTypes.func,
+  isIphone: PropTypes.bool,
+  isOpen: PropTypes.bool.isRequired,
+  renderTarget: PropTypes.func,
+  closeOnScrimClick: PropTypes.bool,
+  closeOnEscPressed: PropTypes.bool,
+};
+
+export const defaultProps = {
+  ...modalDialogDefaultProps,
   onClose: () => null,
   renderTarget: null,
-  isIphone: (0, _bpkReactUtils.isDeviceIphone)(),
+  isIphone: isDeviceIphone(),
   closeOnScrimClick: true,
-  closeOnEscPressed: true
-});
-exports.defaultProps = defaultProps;
+  closeOnEscPressed: true,
+};

package/bpk-component-modal/src/themeAttributes-test.ts

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+import themeAttributes from './themeAttributes';
+
+describe('themeAttributes', () => {
+  it('should export the correct theme attributes', () => {
+    expect(themeAttributes).toEqual([
+      'linkColor',
+      'linkHoverColor',
+      'linkActiveColor',
+      'linkVisitedColor',
+    ]);
+  });
+});

package/bpk-component-modal/src/{themeAttributes.js → themeAttributes.ts}

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _bpkComponentLink = require("../../bpk-component-link");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,6 +15,8 @@ var _bpkComponentLink = require("../../bpk-component-link");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-var _default = [..._bpkComponentLink.themeAttributes];
-exports.default = _default;
+import { themeAttributes as linkAttributes } from '../../bpk-component-link';
+
+export default [...linkAttributes];

package/bpk-component-navigation-bar/README.md

@@ -0,0 +1,109 @@
+# bpk-component-navigation-bar
+
+> Backpack navigation bar component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+### BpkNavigationBar
+
+```js
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
+
+import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
+
+const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
+
+export default () => (
+  <BpkNavigationBar
+    title="Backpack"
+    leadingButton={
+      <BpkNavigationBarIconButton
+        onClick={() => {}}
+        icon={ArrowIconWithRtl}
+        label="back"
+      />
+    }
+    trailingButton={
+      <BpkNavigationBarButtonLink onClick={() => {}}>Done</BpkNavigationBarButtonLink>
+    }
+  />
+)
+```
+
+#### Props
+
+| Property              | PropType | Required | Default Value    |
+| --------------------- | -------- | -------- | ---------------- |
+| id                    | string   | true     | -                |
+| title                 | node     | true     | -                |
+| className             | string   | false    | null             |
+| leadingButton         | element  | false    | null             |
+| trailingButton        | element  | false    | null             |
+| sticky                | bool     | false    | false            |
+
+#### Theme props
+
+* `navigationBarBackgroundColor`
+* `navigationBarTitleColor`
+
+### BpkNavigationBarIconButton
+
+```js
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
+import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
+
+export default () => (
+  <BpkNavigationBarIconButton
+    onClick={() => {}}
+    icon={ArrowIcon}
+    label="back"
+  />
+)
+```
+
+#### Props
+
+| Property              | PropType | Required | Default Value    |
+| --------------------- | -------- | -------- | ---------------- |
+| icon                  | func     | true     | -                |
+| onClick               | func     | true     | -                |
+| label                 | string     | true     | -              |
+| className             | string   | false    | null             |
+
+#### Theme props
+
+* `navigationBarIconButtonColor`
+* `navigationBarIconButtonActiveColor`
+* `navigationBarIconButtonHoverColor`
+
+### BpkNavigationBarButtonLink
+
+```js
+import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
+
+export default () => (
+  <BpkNavigationBarButtonLink onClick={() => {}}>
+    Done
+  </BpkNavigationBarButtonLink>
+)
+```
+
+#### Props
+
+| Property              | PropType | Required | Default Value    |
+| --------------------- | -------- | -------- | ---------------- |
+| children              | node     | true     | -                |
+| onClick               | func     | true     | -                |
+| className             | string   | false    | null             |
+
+#### Theme props
+
+* `navigationBarButtonLinkColor`
+* `navigationBarButtonLinkActiveColor`
+* `navigationBarButtonLinkHoverColor`
+* `navigationBarButtonLinkVisitedColor`

package/bpk-component-navigation-bar/index.js

@@ -1,32 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkNavigationBarButtonLink", {
-  enumerable: true,
-  get: function () {
-    return _BpkNavigationBarButtonLink.default;
-  }
-});
-Object.defineProperty(exports, "BpkNavigationBarIconButton", {
-  enumerable: true,
-  get: function () {
-    return _BpkNavigationBarIconButton.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _BpkNavigationBar = _interopRequireDefault(require("./src/BpkNavigationBar"));
-var _BpkNavigationBarIconButton = _interopRequireDefault(require("./src/BpkNavigationBarIconButton"));
-var _BpkNavigationBarButtonLink = _interopRequireDefault(require("./src/BpkNavigationBarButtonLink"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -44,5 +15,28 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkNavigationBar.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkNavigationBar, {
+  type Props as BpkNavigationBarProps,
+} from './src/BpkNavigationBar';
+import BpkNavigationBarIconButton, {
+  type Props as BpkNavigationBarIconButtonProps,
+} from './src/BpkNavigationBarIconButton';
+import BpkNavigationBarButtonLink, {
+  type Props as BpkNavigationBarButtonLinkProps,
+} from './src/BpkNavigationBarButtonLink';
+import themeAttributes from './src/themeAttributes';
+
+export type {
+  BpkNavigationBarProps,
+  BpkNavigationBarIconButtonProps,
+  BpkNavigationBarButtonLinkProps,
+};
+export {
+  BpkNavigationBarIconButton,
+  BpkNavigationBarButtonLink,
+  themeAttributes,
+};
+export default BpkNavigationBar;