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

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

@@ -0,0 +1,103 @@
+# bpk-component-horizontal-nav
+
+> Backpack horizontal nav component.
+
+## Installation
+
+```sh
+npm install bpk-component-horizontal-nav --save-dev
+```
+
+## Usage
+
+```js
+import React, { Component } from 'react';
+import BpkHorizontalNav, { BpkHorizontalNavItem } from '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,36 +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
  *
@@ -48,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;

package/bpk-component-horizontal-nav/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bpk-component-horizontal-nav",
+  "version": "5.1.14",
+  "description": "Backpack horizontal nav component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-component-mobile-scroll-container": "^3.1.12",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^6.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-text": "^7.0.6",
+    "bpk-storybook-utils": "^1.1.11"
+  }
+}

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -1,141 +1,170 @@
-"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.
+ */
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React, { Component, type Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
+
+import STYLES from './BpkHorizontalNav.module.scss';
+
+const getClassName = cssModules(STYLES);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.HORIZONTAL_NAV_TYPES = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _bpkComponentMobileScrollContainer = _interopRequireDefault(require("../../bpk-component-mobile-scroll-container"));
-
-var _BpkHorizontalNavModule = _interopRequireDefault(require("./BpkHorizontalNav.css"));
-
-const _excluded = ["autoScrollToSelected", "children", "className", "leadingScrollIndicatorClassName", "showUnderline", "trailingScrollIndicatorClassName", "type"];
-
-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 }; }
-
-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); }
-
-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; }
-
-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; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkHorizontalNavModule.default);
 const HORIZONTAL_NAV_TYPES = {
   default: 'default',
-  light: 'light'
+  light: 'light',
+};
+
+export type Props = {
+  autoScrollToSelected: boolean,
+  children: Node,
+  showUnderline: boolean,
+  type: $Keys<typeof HORIZONTAL_NAV_TYPES>,
+  className: ?string,
+  leadingScrollIndicatorClassName: ?string,
+  trailingScrollIndicatorClassName: ?string,
 };
-exports.HORIZONTAL_NAV_TYPES = HORIZONTAL_NAV_TYPES;
 
-const getPos = ref => {
+const getPos = (ref: ?Element): ?{ left: number, right: number } => {
   if (!ref) {
     return null;
   }
-
   const pos = ref.getBoundingClientRect();
   return pos;
 };
 
-class BpkHorizontalNav extends _react.Component {
-  constructor(props) {
+class BpkHorizontalNav extends Component<Props> {
+  selectedItemRef: ?Element;
+
+  scrollRef: ?Element;
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    autoScrollToSelected: PropTypes.bool,
+    className: PropTypes.string,
+    leadingScrollIndicatorClassName: PropTypes.string,
+    showUnderline: PropTypes.bool,
+    trailingScrollIndicatorClassName: PropTypes.string,
+    type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES)),
+  };
+
+  static defaultProps = {
+    autoScrollToSelected: false,
+    className: null,
+    leadingScrollIndicatorClassName: null,
+    showUnderline: true,
+    trailingScrollIndicatorClassName: null,
+    type: HORIZONTAL_NAV_TYPES.default,
+  };
+
+  constructor(props: Props) {
     super(props);
 
-    _defineProperty(this, "selectedItemRef", void 0);
-
-    _defineProperty(this, "scrollRef", void 0);
-
-    _defineProperty(this, "componentDidMount", () => {
-      this.scrollSelectedIntoView(false);
-    });
-
-    _defineProperty(this, "scrollSelectedIntoView", useSmoothScroll => {
-      if (!this.props.autoScrollToSelected || !this.scrollRef || !this.selectedItemRef) {
-        return;
-      } // Using find dom node is preferable here over changing the underlying mechanism of BpkHorizontalNavItem to accomodate dom-node refs
-      // eslint-disable-next-line react/no-find-dom-node
-
-
-      const selectedItemRef = _reactDom.default.findDOMNode(this.selectedItemRef);
-
-      if (!this.scrollRef) {
-        return;
-      }
-
-      const selectedItemPos = getPos(selectedItemRef);
-
-      if (!selectedItemPos) {
-        return;
-      }
+    this.scrollRef = null;
+    this.selectedItemRef = null;
+  }
 
-      const scrollPos = getPos(this.scrollRef);
+  componentDidMount = () => {
+    this.scrollSelectedIntoView(false);
+  };
 
-      if (!scrollPos) {
-        return;
-      } // We only need to carry out a scroll if the element is not already fully within the scroll view
+  componentDidUpdate() {
+    this.scrollSelectedIntoView(true);
+  }
 
+  scrollSelectedIntoView = (useSmoothScroll: boolean) => {
+    if (
+      !this.props.autoScrollToSelected ||
+      !this.scrollRef ||
+      !this.selectedItemRef
+    ) {
+      return;
+    }
 
-      const needsScroll = selectedItemPos.left < scrollPos.left || selectedItemPos.right > scrollPos.right;
+    if (!this.scrollRef) {
+      return;
+    }
 
-      if (!needsScroll) {
-        return;
-      }
+    const selectedItemPos = getPos(this.selectedItemRef);
+    if (!selectedItemPos) {
+      return;
+    }
 
-      const scrollAdjustment = selectedItemPos.left - scrollPos.left; // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
+    const scrollPos = getPos(this.scrollRef);
+    if (!scrollPos) {
+      return;
+    }
 
-      if (this.scrollRef && this.scrollRef.scroll && typeof this.scrollRef.scroll === 'function' && useSmoothScroll) {
-        this.scrollRef.scroll({
-          left: scrollAdjustment,
-          behavior: 'smooth'
-        });
-      } else if (this.scrollRef) {
-        this.scrollRef.scrollLeft = scrollAdjustment;
-      }
-    });
+    // We only need to carry out a scroll if the element is not already fully within the scroll view
+    const needsScroll =
+      selectedItemPos.left < scrollPos.left ||
+      selectedItemPos.right > scrollPos.right;
 
-    this.scrollRef = null;
-    this.selectedItemRef = null;
-  }
+    if (!needsScroll) {
+      return;
+    }
 
-  componentDidUpdate() {
-    this.scrollSelectedIntoView(true);
-  }
+    const scrollAdjustment = selectedItemPos.left - scrollPos.left;
+    // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
+    if (
+      this.scrollRef &&
+      this.scrollRef.scroll &&
+      typeof this.scrollRef.scroll === 'function' &&
+      useSmoothScroll
+    ) {
+      this.scrollRef.scroll({
+        left: scrollAdjustment,
+        behavior: 'smooth',
+      });
+    } else if (this.scrollRef) {
+      this.scrollRef.scrollLeft = scrollAdjustment;
+    }
+  };
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       autoScrollToSelected,
       children: rawChildren,
       className,
       leadingScrollIndicatorClassName,
       showUnderline,
       trailingScrollIndicatorClassName,
-      type
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+      type,
+      ...rest
+    } = this.props;
+
+    const classNames = getClassName(
+      'bpk-horizontal-nav',
+      showUnderline && `bpk-horizontal-nav--show-${type}-underline`,
+      className,
+    );
 
-    const classNames = getClassName('bpk-horizontal-nav', showUnderline && `bpk-horizontal-nav--show-${type}-underline`, className);
     let children = rawChildren;
 
     if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
-      children = _react.default.Children.map(rawChildren, child => {
+      children = React.Children.map(rawChildren, (child) => {
         const childProps = {};
-
+        let childRef;
         if (autoScrollToSelected) {
           if (child && child.props && child.props.selected) {
-            childProps.ref = ref => {
+            childRef = (ref) => {
               this.selectedItemRef = ref;
             };
           }
@@ -145,48 +174,34 @@ class BpkHorizontalNav extends _react.Component {
           childProps.type = HORIZONTAL_NAV_TYPES.light;
         }
 
-        return child ? /*#__PURE__*/_react.default.cloneElement(child, childProps) : null;
+        return child ? (
+          <div ref={childRef}>{React.cloneElement(child, childProps)}</div>
+        ) : null;
       });
     }
 
     return (
-      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _react.default.createElement(_bpkComponentMobileScrollContainer.default, _extends({
-        innerContainerTagName: "nav",
-        className: classNames,
-        leadingIndicatorClassName: leadingScrollIndicatorClassName,
-        trailingIndicatorClassName: trailingScrollIndicatorClassName,
-        scrollerRef: ref => {
+      <BpkMobileScrollContainer
+        innerContainerTagName="nav"
+        className={classNames}
+        leadingIndicatorClassName={leadingScrollIndicatorClassName}
+        trailingIndicatorClassName={trailingScrollIndicatorClassName}
+        scrollerRef={(ref) => {
           this.scrollRef = ref;
-        }
-      }, rest), /*#__PURE__*/_react.default.createElement("div", {
-        className: getClassName('bpk-horizontal-nav__list'),
-        role: "tablist"
-      }, children))
+        }}
+        {...rest}
+      >
+        <div
+          className={getClassName('bpk-horizontal-nav__list')}
+          role="tablist"
+        >
+          {children}
+        </div>
+      </BpkMobileScrollContainer>
     );
   }
-
 }
 
-_defineProperty(BpkHorizontalNav, "propTypes", {
-  children: _propTypes.default.node.isRequired,
-  autoScrollToSelected: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  leadingScrollIndicatorClassName: _propTypes.default.string,
-  showUnderline: _propTypes.default.bool,
-  trailingScrollIndicatorClassName: _propTypes.default.string,
-  type: _propTypes.default.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-});
-
-_defineProperty(BpkHorizontalNav, "defaultProps", {
-  autoScrollToSelected: false,
-  className: null,
-  leadingScrollIndicatorClassName: null,
-  showUnderline: true,
-  trailingScrollIndicatorClassName: null,
-  type: HORIZONTAL_NAV_TYPES.default
-});
-
-var _default = BpkHorizontalNav;
-exports.default = _default;
+export default BpkHorizontalNav;
+export { HORIZONTAL_NAV_TYPES };

package/{bpk-component-boilerplate/index.js → bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss}

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _BpkBoilerplate = _interopRequireDefault(require("./src/BpkBoilerplate"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,5 +15,23 @@ 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 = _BpkBoilerplate.default;
-exports.default = _default;
+
+@import '~bpk-mixins/index';
+
+.bpk-horizontal-nav {
+  &--show-default-underline {
+    @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06, '');
+  }
+
+  &--show-light-underline {
+    @include bpk-border-bottom-sm($bpk-color-white, '');
+  }
+
+  &__list {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    align-items: stretch;
+    list-style-type: none;
+  }
+}