@skyscanner/backpack-web 25.5.0 → 25.7.0-beta

package/bpk-component-graphic-promotion/src/accessibility-test.tsx

@@ -0,0 +1,146 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 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 BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
+
+const sponsor = {
+  label: 'Sponsored',
+  logo: 'path/to/logo.png',
+  altText: 'Airline Name',
+};
+const buttonText = 'Learn more';
+const onClick = () => {
+  window.location.href = 'https://www.skyscanner.net';
+};
+
+const tagline = 'Tagline';
+const headline = 'Ride your wave';
+const subheading =
+  'Portugal and 6 more countries have just been added to the UK travel green list';
+
+describe('BpkGraphicPromo accessibility tests', () => {
+  // TODO: Temporarily disabling tests due to a newer version of jest-axe which causes tests to fail when using nested interactive elements
+
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        className="test"
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in centre aligned', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.center}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in right aligned', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.end}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in inverted portrait', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues when optional text is missing', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in non-sponsored', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-grid-toggle/README.md

@@ -0,0 +1,24 @@
+# bpk-component-grid-toggle
+
+> Backpack vertical grid toggle component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import BpkGridToggle from '@skyscanner/backpack-web/bpk-component-grid-toggle';
+
+export default () => (
+  <BpkGridToggle />
+);
+```
+
+## Props
+
+| Property         | PropType | Required | Default Value |
+| ---------------- | -------- | -------- | ------------- |
+| className        | string   | false    | null          |
+| targetContainer  | string   | false    | 'body'        |

package/bpk-component-grid-toggle/index.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _BpkGridToggle = _interopRequireDefault(require("./src/BpkGridToggle"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,5 +15,7 @@ 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 = _BpkGridToggle.default;
-exports.default = _default;
+
+import component from './src/BpkGridToggle';
+
+export default component;

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -1,86 +1,96 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentLink = require("../../bpk-component-link");
-var _BpkGridToggleModule = _interopRequireDefault(require("./BpkGridToggle.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); } /*
-                                                                                                                                                                                                                                                                                                                                                                                           * 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 getClassName = (0, _bpkReactUtils.cssModules)(_BpkGridToggleModule.default);
+/*
+ * 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 { Component } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import { BpkButtonLink } from '../../bpk-component-link';
+
+import STYLES from './BpkGridToggle.module.scss';
+
+const getClassName = cssModules(STYLES);
+
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
-class BpkGridToggle extends _react.Component {
+
+class BpkGridToggle extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "handleKeyDown", e => {
-      if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'g') {
-        this.toggleGrid(e);
-      }
-    });
-    _defineProperty(this, "toggleGrid", e => {
-      e.preventDefault();
-      document.querySelector(this.props.targetContainer).classList.toggle(GRID_CLASS_NAME);
-      this.setState(state => ({
-        gridEnabled: !state.gridEnabled
-      }));
-    });
+
     this.state = {
-      gridEnabled: false
+      gridEnabled: false,
     };
   }
+
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
+
   componentWillUnmount() {
-    document.querySelector(this.props.targetContainer).classList.remove(GRID_CLASS_NAME);
+    document
+      .querySelector(this.props.targetContainer)
+      .classList.remove(GRID_CLASS_NAME);
     document.removeEventListener('keydown', this.handleKeyDown);
   }
+
+  handleKeyDown = (e) => {
+    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'g') {
+      this.toggleGrid(e);
+    }
+  };
+
+  toggleGrid = (e) => {
+    e.preventDefault();
+
+    document
+      .querySelector(this.props.targetContainer)
+      .classList.toggle(GRID_CLASS_NAME);
+
+    this.setState((state) => ({
+      gridEnabled: !state.gridEnabled,
+    }));
+  };
+
   render() {
-    const {
-      className
-    } = this.props;
-    const {
-      gridEnabled
-    } = this.state;
+    const { className } = this.props;
+    const { gridEnabled } = this.state;
     const onOrOff = gridEnabled ? 'off' : 'on';
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bpkComponentLink.BpkButtonLink, {
-      title: "Keyboard Shortcut: ctrl + cmd + g",
-      onClick: this.toggleGrid,
-      className: className,
-      children: ["Baseline grid ", onOrOff]
-    });
+
+    return (
+      <BpkButtonLink
+        title="Keyboard Shortcut: ctrl + cmd + g"
+        onClick={this.toggleGrid}
+        className={className}
+      >
+        Baseline grid {onOrOff}
+      </BpkButtonLink>
+    );
   }
 }
+
 BpkGridToggle.propTypes = {
-  targetContainer: _propTypes.default.string,
-  className: _propTypes.default.string
+  targetContainer: PropTypes.string,
+  className: PropTypes.string,
 };
+
 BpkGridToggle.defaultProps = {
   targetContainer: 'body',
-  className: null
+  className: null,
 };
-var _default = BpkGridToggle;
-exports.default = _default;
+
+export default BpkGridToggle;

package/{bpk-component-rtl-toggle/index.js → bpk-component-grid-toggle/src/BpkGridToggle.module.scss}

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "updateOnDirectionChange", {
-  enumerable: true,
-  get: function () {
-    return _updateOnDirectionChange.default;
-  }
-});
-var _BpkRtlToggle = _interopRequireDefault(require("./src/BpkRtlToggle"));
-var _updateOnDirectionChange = _interopRequireDefault(require("./src/updateOnDirectionChange"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,5 +15,38 @@ 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 = _BpkRtlToggle.default;
-exports.default = _default;
+
+@import '~bpk-mixins/index.scss';
+
+.bpk-vertical-grid {
+  &--on {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      display: block;
+      z-index: 9999;
+      width: auto;
+      height: auto;
+      background: linear-gradient(
+          to bottom,
+          rgba($bpk-status-danger-spot-day, 0.3) 0,
+          transparent $bpk-one-pixel-rem
+        )
+        repeat left 0;
+      background-size: $bpk-spacing-xs $bpk-spacing-xs;
+      pointer-events: none;
+    }
+
+    &:active {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}

package/bpk-component-horizontal-nav/README.md

@@ -0,0 +1,101 @@
+# bpk-component-horizontal-nav
+
+> Backpack horizontal nav component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import { Component } from 'react';
+import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
+
+export default class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      selected: 'flights',
+    };
+  }
+
+  onClick = (e) => {
+    this.setState({
+      selected: e.target.name,
+    });
+  }
+
+  render() {
+    return (
+      <BpkHorizontalNav>
+        <BpkHorizontalNavItem
+          name="flights"
+          selected={this.state.selected === 'flights'}
+          onClick={this.onClick}
+        >
+          Flights
+        </BpkHorizontalNavItem>
+        <BpkHorizontalNavItem
+          name="hotels"
+          selected={this.state.selected === 'hotels'}
+          onClick={this.onClick}
+        >
+          Hotels
+        </BpkHorizontalNavItem>
+        <BpkHorizontalNavItem
+          name="car-hire"
+          selected={this.state.selected === 'car-hire'}
+          onClick={this.onClick}
+        >
+          Car hire
+        </BpkHorizontalNavItem>
+      </BpkHorizontalNav>
+    );
+  }
+};
+```
+
+## Props
+
+### BpkHorizontalNav
+
+| Property                          | PropType | Required | Default Value |
+| --------------------------------- | -------- | -------- | ------------- |
+| children                          | node     | true     | -             |
+| autoScrollToSelected              | bool     | false    | false         |
+| className                         | string   | false    | null          |
+| leadingScrollIndicatorClassName   | string   | false    | null          |
+| showUnderline                     | bool     | false    | true          |
+| trailingScrollIndicatorClassName  | string   | false    | null          |
+| type                              | oneOf('default', 'light') | false | 'default' |
+
+#### `autoScrollToSelected`
+
+Ensures that the selected item is within view when loaded on narrow-screened devices.
+
+#### `showUnderline`
+
+When set to `false`, the bottom border on the component isn't included. This refers
+to the underline on the whole `BpkHorizontalNav`, not the line that appears under the selected item.
+
+### BpkHorizontalNavItem
+
+| Property    | PropType | Required | Default Value |
+| ----------- | -------- | -------- | ------------- |
+| children    | node     | true     | -             |
+| className   | string   | false    | null          |
+| spaceAround | bool     | false    | false         |
+| selected    | bool     | false    | false         |
+| disabled    | bool     | false    | false         |
+| href        | string   | false    | null          |
+
+**Note:** `disabled` and `selected` are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+
+## Theme Props
+
+* `horizontalNavLinkColor`
+* `horizontalNavLinkHoverColor`
+* `horizontalNavLinkActiveColor`
+* `horizontalNavLinkSelectedColor`
+* `horizontalNavBarSelectedColor`

package/bpk-component-horizontal-nav/index.js

@@ -1,31 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkHorizontalNavItem", {
-  enumerable: true,
-  get: function () {
-    return _BpkHorizontalNavItem.default;
-  }
-});
-Object.defineProperty(exports, "HORIZONTAL_NAV_TYPES", {
-  enumerable: true,
-  get: function () {
-    return _BpkHorizontalNav.HORIZONTAL_NAV_TYPES;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _BpkHorizontalNavItem.themeAttributes;
-  }
-});
-var _BpkHorizontalNav = _interopRequireWildcard(require("./src/BpkHorizontalNav"));
-var _BpkHorizontalNavItem = _interopRequireWildcard(require("./src/BpkHorizontalNavItem"));
-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
  *
@@ -43,5 +15,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkHorizontalNav.default;
-exports.default = _default;
+/* @flow strict */
+
+import BpkHorizontalNav, {
+  HORIZONTAL_NAV_TYPES,
+  type Props as NavProps,
+} from './src/BpkHorizontalNav';
+import BpkHorizontalNavItem, {
+  type Props as ItemProps,
+  themeAttributes,
+} from './src/BpkHorizontalNavItem';
+
+export type BpkHorizontalNavProps = NavProps;
+export type BpkHorizontalNavItemProps = ItemProps;
+export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
+export default BpkHorizontalNav;