@skyscanner/backpack-web 17.1.0-beta.1 → 17.2.0

package/bpk-component-blockquote/src/BpkBlockquote.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkBlockquoteModule = _interopRequireDefault(require("./BpkBlockquote.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -27,22 +16,36 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * limitations under the License.
  */
 
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBlockquoteModule.default);
-const BpkBlockquote = props => {
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkBlockquote.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkBlockquote = (props) => {
   const classNames = [getClassName('bpk-blockquote')];
   if (props.extraSpace) {
     classNames.push(getClassName('bpk-blockquote--extra-spacing'));
   }
-  return /*#__PURE__*/_react.default.createElement("blockquote", {
-    className: classNames.join(' ')
-  }, props.children);
+
+  return (
+    <blockquote className={classNames.join(' ')}>{props.children}</blockquote>
+  );
 };
+
 BpkBlockquote.propTypes = {
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
-  extraSpace: _propTypes.default.bool
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  extraSpace: PropTypes.bool,
 };
+
 BpkBlockquote.defaultProps = {
-  extraSpace: false
+  extraSpace: false,
 };
-var _default = BpkBlockquote;
-exports.default = _default;
+
+export default BpkBlockquote;

package/bpk-component-blockquote/src/BpkBlockquote.module.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-blockquote{margin:0 0 1rem 0;padding:1.5rem;box-shadow:2px 0 0 0 #0062e3 inset;box-shadow:2px 0 0 0 var(--bpk-blockquote-bar-color, #0062e3) inset}html[dir='rtl'] .bpk-blockquote{padding:1.5rem;border-left:0;box-shadow:-2px 0 0 0 #0062e3 inset;box-shadow:-2px 0 0 0 var(--bpk-blockquote-bar-color, #0062e3) inset}.bpk-blockquote>*:last-child{margin-bottom:0}.bpk-blockquote--extra-spacing{margin-top:2rem;margin-bottom:2rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-blockquote{margin:0 0 1rem 0;padding:1.5rem;background-color:#f1f2f8;color:#68697f;box-shadow:2px 0 0 0 #0770e3 inset;box-shadow:2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}html[dir='rtl'] .bpk-blockquote{padding:1.5rem;border-left:0;box-shadow:-2px 0 0 0 #0770e3 inset;box-shadow:-2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}.bpk-blockquote>*:last-child{margin-bottom:0}.bpk-blockquote--extra-spacing{margin-top:2rem;margin-bottom:2rem}

package/bpk-component-blockquote/src/BpkBlockquote.module.scss

@@ -0,0 +1,29 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+
+.bpk-blockquote {
+  @include bpk-blockquote;
+}
+
+.bpk-blockquote--extra-spacing {
+  @include bpk-blockquote--extra-spacing;
+}

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,5 +15,5 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['blockquoteBarColor'];
-exports.default = _default;
+
+export default ['blockquoteBarColor'];

package/bpk-component-breadcrumb/README.md

@@ -0,0 +1,56 @@
+# bpk-component-breadcrumb
+
+> Backpack breadcrumb component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+```js
+import React, { Component } from 'react';
+import BpkBreadcrumb, { BpkBreadcrumbItem } from '@skyscanner/backpack-web/bpk-component-breadcrumb';
+
+
+export default class App extends Component {
+  render() {
+    return (
+      <BpkBreadcrumb label="breadcrumb">
+        <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
+        <BpkBreadcrumbItem href="/page-1">Page 1</BpkBreadcrumbItem>
+        <BpkBreadcrumbItem active>
+          Page 2
+        </BpkBreadcrumbItem>
+      </BpkBreadcrumb>
+    );
+  }
+}
+
+```
+
+## Structured Data
+
+[JSON-LD](https://json-ld.org/) schema mark up can be used to
+add [structured data](https://developers.google.com/search/docs/guides/intro-structured-data)
+to the component to improve the SEO of the component through the `schemaMetaData` property.
+
+## Props
+
+### BpkBreadcrumb
+
+| Property           | PropType                             | Required | Default Value |
+| ------------------ | ------------------------------------ | -------- | ------------- |
+| children           | node                                 | true     | -             |
+| label              | string                               | true     | -             |
+| schemaMetaData     | array({url: string, label: string})  | false    | null          |
+
+
+
+### BpkBreadcrumbItem
+
+| Property           | PropType                   | Required | Default Value |
+| ------------------ | -------------------------- | -------- | ------------- |
+| children           | node                       | true     | -             |
+| href               | string                     | false    | null          |
+| active             | bool                       | false    | false         |
+| linkProps          | object                     | false    | null          |

package/bpk-component-breadcrumb/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkBreadcrumbItem", {
-  enumerable: true,
-  get: function () {
-    return _BpkBreadcrumbItem.default;
-  }
-});
-exports.default = void 0;
-var _BpkBreadcrumb = _interopRequireDefault(require("./src/BpkBreadcrumb"));
-var _BpkBreadcrumbItem = _interopRequireDefault(require("./src/BpkBreadcrumbItem"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,5 +15,17 @@ 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 = _BpkBreadcrumb.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkBreadcrumb, {
+  type Props as BpkBreadcrumbProps,
+} from './src/BpkBreadcrumb';
+import BpkBreadcrumbItem, {
+  type Props as BpkBreadcrumbItemProps,
+} from './src/BpkBreadcrumbItem';
+
+export type { BpkBreadcrumbProps, BpkBreadcrumbItemProps };
+
+export default BpkBreadcrumb;
+export { BpkBreadcrumbItem };

package/bpk-component-breadcrumb/src/BpkBreadcrumb.js

@@ -1,83 +1,112 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkBreadcrumbModule = _interopRequireDefault(require("./BpkBreadcrumb.module.css"));
-const _excluded = ["children", "label", "schemaMetaData"];
-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) { 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); }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBreadcrumbModule.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.
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React, { type Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkBreadcrumb.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type SchemaMetaDataItem = {
+  url: string,
+  label: string,
+};
+
+export type Props = {
+  children: Node,
+  schemaMetaData: ?(SchemaMetaDataItem[]),
+  label: string,
+};
+
 /*
   The google structured data reference for the stringified output of
   the following function is here:
   https://developers.google.com/search/docs/data-types/breadcrumb
 */
-const buildMetaData = schemaMetaData => {
+const buildMetaData = (schemaMetaData: SchemaMetaDataItem[]): string => {
   const itemListElement = schemaMetaData.map((schemaMetaDataItem, index) => ({
     '@type': 'ListItem',
     position: index + 1,
     item: {
       '@id': schemaMetaDataItem.url,
-      name: schemaMetaDataItem.label
-    }
+      name: schemaMetaDataItem.label,
+    },
   }));
+
   return JSON.stringify({
     '@context': 'http://schema.org',
     '@type': 'BreadcrumbList',
-    itemListElement
+    itemListElement,
   });
 };
-class BpkBreadcrumb extends _react.default.Component {
-  constructor(props) {
+
+class BpkBreadcrumb extends React.Component<Props> {
+  metaData: ?string;
+
+  static defaultProps = {
+    schemaMetaData: null,
+  };
+
+  constructor(props: Props) {
     super(props);
-    _defineProperty(this, "metaData", void 0);
+
     this.metaData = props.schemaMetaData && buildMetaData(props.schemaMetaData);
   }
+
   render() {
-    const _this$props = this.props,
-      {
-        children,
-        label,
-        schemaMetaData
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.metaData && /*#__PURE__*/_react.default.createElement("script", {
-      type: "application/ld+json"
-      // eslint-disable-next-line react/no-danger
-      ,
-      dangerouslySetInnerHTML: {
-        __html: this.metaData
-      }
-    }), /*#__PURE__*/_react.default.createElement("nav", _extends({
-      "aria-label": label
-    }, rest), /*#__PURE__*/_react.default.createElement("ol", {
-      className: getClassName('bpk-breadcrumb')
-    }, children)));
+    const { children, label, schemaMetaData, ...rest } = this.props;
+
+    return (
+      <React.Fragment>
+        {this.metaData && (
+          <script
+            type="application/ld+json"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: this.metaData }}
+          />
+        )}
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+        <nav aria-label={label} {...rest}>
+          <ol className={getClassName('bpk-breadcrumb')}>{children}</ol>
+        </nav>
+      </React.Fragment>
+    );
   }
 }
-_defineProperty(BpkBreadcrumb, "defaultProps", {
-  schemaMetaData: null
-});
+
 BpkBreadcrumb.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  label: _propTypes.default.string.isRequired,
-  schemaMetaData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    url: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string.isRequired
-  }))
+  children: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+  schemaMetaData: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ),
 };
+
 BpkBreadcrumb.defaultProps = {
-  schemaMetaData: null
+  schemaMetaData: null,
 };
-var _default = BpkBreadcrumb;
-exports.default = _default;
+
+export default BpkBreadcrumb;

package/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss

@@ -0,0 +1,27 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+.bpk-breadcrumb {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+  list-style-type: none;
+}

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -1,68 +1,93 @@
-"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, { type Node } from 'react';
+
+import BpkLink from '../../bpk-component-link';
+import BpkText from '../../bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+import { withRtlSupport } from '../../bpk-component-icon';
+import ArrowRight from '../../bpk-component-icon/sm/arrow-right';
+
+import STYLES from './BpkBreadcrumbItem.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  children: Node,
+  active: boolean,
+  href: ?string,
+  className: ?string,
+  linkProps: ?{ [string]: any },
+};
+
+const RtlSupportedArrowRight = withRtlSupport(ArrowRight);
+
+const BpkBreadcrumbItem = (props: Props) => {
+  const { active, children, className, href, linkProps, ...rest } = props;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkComponentLink = _interopRequireDefault(require("../../bpk-component-link"));
-var _bpkComponentText = _interopRequireDefault(require("../../bpk-component-text"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentIcon = require("../../bpk-component-icon");
-var _arrowRight = _interopRequireDefault(require("../../bpk-component-icon/sm/arrow-right"));
-var _BpkBreadcrumbItemModule = _interopRequireDefault(require("./BpkBreadcrumbItem.module.css"));
-const _excluded = ["active", "children", "className", "href", "linkProps"];
-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; }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBreadcrumbItemModule.default);
-const RtlSupportedArrowRight = (0, _bpkComponentIcon.withRtlSupport)(_arrowRight.default);
-const BpkBreadcrumbItem = props => {
-  const {
-      active,
-      children,
-      className,
-      href,
-      linkProps
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
   return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("li", _extends({
-      className: getClassName('bpk-breadcrumb-item', className)
-    }, rest), active ?
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_bpkComponentText.default, _extends({
-      className: getClassName('bpk-breadcrumb-item__active-item'),
-      "aria-current": "page"
-    }, linkProps), children) :
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_bpkComponentLink.default, _extends({
-      href: href,
-      className: getClassName('bpk-breadcrumb-item__link')
-    }, linkProps), children), !active && /*#__PURE__*/_react.default.createElement(RtlSupportedArrowRight, {
-      className: getClassName('bpk-breadcrumb-item__arrow')
-    }))
+    <li className={getClassName('bpk-breadcrumb-item', className)} {...rest}>
+      {active ? (
+        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+        <BpkText
+          className={getClassName('bpk-breadcrumb-item__active-item')}
+          aria-current="page"
+          {...linkProps}
+        >
+          {children}
+        </BpkText>
+      ) : (
+        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+        <BpkLink
+          href={href}
+          className={getClassName('bpk-breadcrumb-item__link')}
+          {...linkProps}
+        >
+          {children}
+        </BpkLink>
+      )}
+      {!active && (
+        <RtlSupportedArrowRight
+          className={getClassName('bpk-breadcrumb-item__arrow')}
+        />
+      )}
+    </li>
   );
 };
+
 BpkBreadcrumbItem.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  active: _propTypes.default.bool,
-  href: _propTypes.default.string,
-  className: _propTypes.default.string,
-  linkProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
+  children: PropTypes.node.isRequired,
+  active: PropTypes.bool,
+  href: PropTypes.string,
+  className: PropTypes.string,
+  linkProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 BpkBreadcrumbItem.defaultProps = {
   active: false,
   href: null,
   className: null,
-  linkProps: null
+  linkProps: null,
 };
-var _default = BpkBreadcrumbItem;
-exports.default = _default;
+
+export default BpkBreadcrumbItem;

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.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-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#545860}.bpk-breadcrumb-item__arrow{margin:0 0.25rem;fill:rgba(0,0,0,0.2)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#444560}.bpk-breadcrumb-item__arrow{margin:0 0.25rem;fill:#b2b2bf}

package/{bpk-component-boilerplate/index.js → bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss}

@@ -1,11 +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
  *
@@ -23,5 +15,26 @@ 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.scss';
+
+$bpk-spacing-v2: true;
+
+.bpk-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+
+  &__link {
+    @include bpk-text;
+  }
+
+  &__active-item {
+    color: $bpk-text-secondary-day;
+  }
+
+  &__arrow {
+    margin: 0 bpk-spacing-sm();
+    fill: $bpk-text-disabled-day;
+  }
+}

package/bpk-component-breakpoint/README.md

@@ -0,0 +1,32 @@
+# bpk-component-breakpoint
+
+> Backpack breakpoint component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
+
+export default () => (
+  <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
+    {isActive => (isActive ? <span>Mobile viewport is active</span> : <span>Mobile viewport is inactive</span>)}
+  </BpkBreakpoint>
+
+  <BpkBreakpoint query={BREAKPOINTS.TABLET}>
+    <span>Tablet viewport is active</span>
+  </BpkBreakpoint>
+);
+```
+
+## Props
+
+| Property  | PropType               | Required | Default Value |
+| --------- | ---------------------- | -------- | ------------- |
+| children  | oneOfType(node, func)  | true     | -             |
+| query     | oneOf(BREAKPOINTS)     | true     | -             |
+| legacy    | bool                   | false    | false         |