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

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _BpkModal = _interopRequireDefault(require("./BpkModal"));
+
+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('BpkModal accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const customRenderTarget = document.createElement('div');
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkModal.default, {
+      id: "my-modal",
+      title: "Modal title",
+      onClose: jest.fn(),
+      closeLabel: "Close",
+      dialogRef: jest.fn(),
+      isIphone: false,
+      getApplicationElement: jest.fn(),
+      isOpen: true,
+      renderTarget: () => customRenderTarget
+    }, "Modal content inside a custom target"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+  });
+});

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _customPropTypes = require("./customPropTypes");
+
+/*
+ * 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('titlePropType', () => {
+  it('should fail if show header is true and there is no title', () => {
+    const result = (0, _customPropTypes.titlePropType)({
+      showHeader: true
+    }, 'title', 'BpkModalInner');
+    expect(result).toEqual(expect.any(Error));
+  });
+  it('should return null for valid data', () => {
+    const result = (0, _customPropTypes.titlePropType)({
+      title: 'Modal title',
+      showHeader: true
+    }, 'title', 'BpkModalInner');
+    expect(result).toBeNull();
+  });
+  it('should be valid to pass no title if showHeader is false', () => {
+    const result = (0, _customPropTypes.titlePropType)({
+      showHeader: false
+    }, 'title', 'BpkModalInner');
+    expect(result).toBeNull();
+  });
+});
+describe('onClosePropType', () => {
+  it('should fail if showHeader is true and there is onClose', () => {
+    const result = (0, _customPropTypes.onClosePropType)({
+      showHeader: true
+    }, 'onClose', 'BpkModalInner');
+    expect(result).toEqual(expect.any(Error));
+  });
+  it('should return null for valid data', () => {
+    const result = (0, _customPropTypes.onClosePropType)({
+      onClose: () => null,
+      showHeader: true
+    }, 'onClose', 'BpkModalInner');
+    expect(result).toBeNull();
+  });
+  it('should be valid to pass no onClose if showHeader is false', () => {
+    const result = (0, _customPropTypes.onClosePropType)({
+      showHeader: false
+    }, 'onClose', 'BpkModalInner');
+    expect(result).toBeNull();
+  });
+});

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

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titlePropType = exports.onClosePropType = void 0;
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,40 +22,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-export const titlePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+const titlePropType = (props, propName, componentName) => {
   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;
 };
 
-export const onClosePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+exports.titlePropType = titlePropType;
+
+const onClosePropType = (props, propName, componentName) => {
   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/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(['linkColor', 'linkHoverColor', 'linkActiveColor', 'linkVisitedColor']);
+  });
+});

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

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _bpkComponentLink = require("../../bpk-component-link");
+
 /*
  * 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 { themeAttributes as linkAttributes } from '../../bpk-component-link';
-
-export default [...linkAttributes];
+var _default = [..._bpkComponentLink.themeAttributes];
+exports.default = _default;

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

@@ -1,3 +1,38 @@
+"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
  *
@@ -15,28 +50,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @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;
+var _default = _BpkNavigationBar.default;
+exports.default = _default;

package/bpk-component-navigation-bar/src/BpkNavigationBar-test.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _BpkNavigationBar = _interopRequireDefault(require("./BpkNavigationBar"));
+
+var _BpkNavigationBarIconButton = _interopRequireDefault(require("./BpkNavigationBarIconButton"));
+
+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('BpkNavigationBar', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: "test"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with custom class', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: "test",
+      className: "my-custom-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with arbitrary props', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: "test",
+      testid: "arbitrary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "leadingButton" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: "test",
+      leadingButton: /*#__PURE__*/_react.default.createElement(_BpkNavigationBarIconButton.default, {
+        icon: () => /*#__PURE__*/_react.default.createElement("span", null),
+        label: "test",
+        onClick: () => {}
+      }, "Click Here")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "traillingButton" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: "test",
+      trailingButton: /*#__PURE__*/_react.default.createElement(_BpkNavigationBarIconButton.default, {
+        icon: () => /*#__PURE__*/_react.default.createElement("span", null),
+        label: "test",
+        onClick: () => {}
+      }, "Click Here")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with an element for the title attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: /*#__PURE__*/_react.default.createElement("span", null, "test"),
+      trailingButton: /*#__PURE__*/_react.default.createElement(_BpkNavigationBarIconButton.default, {
+        icon: () => /*#__PURE__*/_react.default.createElement("span", null),
+        label: "test",
+        onClick: () => {}
+      }, "Click Here")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly when sticky', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBar.default, {
+      id: "test",
+      title: "test",
+      sticky: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-navigation-bar/src/{BpkNavigationBar.module.css → BpkNavigationBar.css}

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#0770e3;background-color:var(--bpk-navigation-bar-background-color, #0770e3);box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-navigation-bar__title{color:#fff;color:var(--bpk-navigation-bar-title-color, #fff)}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#0770e3;background-color:var(--bpk-navigation-bar-background-color, #0770e3);box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-navigation-bar__title{color:#fff;color:var(--bpk-navigation-bar-title-color, #fff)}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899}

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -1,106 +1,89 @@
-/*
- * 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, { type Node, type Element } from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkNavigationBar.module.scss';
-
-const getClassNames = cssModules(STYLES);
-
-export type Props = {
-  id: string,
-  title: Node,
-  className: ?string,
-  leadingButton: ?Element<any>,
-  trailingButton: ?Element<any>,
-  sticky: ?boolean,
-};
+"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 _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-text"));
+
+var _BpkNavigationBarModule = _interopRequireDefault(require("./BpkNavigationBar.css"));
+
+const _excluded = ["className", "id", "leadingButton", "sticky", "title", "trailingButton"];
+
+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 }; }
 
-const cloneWithClass = (elem: Element<any>, newStyle: string) => {
+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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const getClassNames = (0, _bpkReactUtils.cssModules)(_BpkNavigationBarModule.default);
+
+const cloneWithClass = (elem, newStyle) => {
   const className = getClassNames(elem.props.className, newStyle);
-  return React.cloneElement(elem, { ...elem.props, className });
+  return /*#__PURE__*/_react.default.cloneElement(elem, _objectSpread(_objectSpread({}, elem.props), {}, {
+    className
+  }));
 };
 
-const BpkNavigationBar = (props: Props) => {
+const BpkNavigationBar = props => {
   const {
     className,
     id,
     leadingButton,
     sticky,
     title,
-    trailingButton,
-    ...rest
-  } = props;
-
-  // If the title is a component that sets its own id we want the aria-labelledby on the nav to match this so it can find the element
+    trailingButton
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded); // If the title is a component that sets its own id we want the aria-labelledby on the nav to match this so it can find the element
   // Otherwise if its just a string we set the id on the title component.
-  const titleId =
-    typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
 
+
+  const titleId = typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <nav
-      aria-labelledby={titleId}
-      className={getClassNames(
-        'bpk-navigation-bar',
-        sticky && 'bpk-navigation-bar__sticky',
-        className,
-      )}
-      {...rest}
-    >
-      {leadingButton &&
-        cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item')}
-      {typeof title === 'string' ? (
-        <BpkText
-          id={titleId}
-          textStyle={TEXT_STYLES.heading5}
-          className={getClassNames('bpk-navigation-bar__title')}
-        >
-          {title}
-        </BpkText>
-      ) : (
-        title
-      )}
-      {trailingButton &&
-        cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')}
-    </nav>
+    _react.default.createElement("nav", _extends({
+      "aria-labelledby": titleId,
+      className: getClassNames('bpk-navigation-bar', sticky && 'bpk-navigation-bar__sticky', className)
+    }, rest), leadingButton && cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item'), typeof title === 'string' ? /*#__PURE__*/_react.default.createElement(_bpkComponentText.default, {
+      id: titleId,
+      textStyle: _bpkComponentText.TEXT_STYLES.heading5,
+      className: getClassNames('bpk-navigation-bar__title')
+    }, title) : title, trailingButton && cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item'))
   );
 };
 
 BpkNavigationBar.propTypes = {
-  title: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  leadingButton: PropTypes.element,
-  trailingButton: PropTypes.element,
-  sticky: PropTypes.bool,
+  title: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string,
+  leadingButton: _propTypes.default.element,
+  trailingButton: _propTypes.default.element,
+  sticky: _propTypes.default.bool
 };
-
 BpkNavigationBar.defaultProps = {
   className: null,
   leadingButton: null,
   trailingButton: null,
-  sticky: false,
+  sticky: false
 };
-
-export default BpkNavigationBar;
+var _default = BpkNavigationBar;
+exports.default = _default;

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink-test.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _BpkNavigationBarButtonLink = _interopRequireDefault(require("./BpkNavigationBarButtonLink"));
+
+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('BpkNavigationButtonLink', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkNavigationBarButtonLink.default, {
+      onClick: () => {},
+      className: "some-class"
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});