@skyscanner/backpack-web 22.3.1 → 23.1.0-beta.1

package/bpk-theming/src/BpkThemeProvider.js

@@ -1,3 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "component", "style", "theme", "themeAttributes"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,13 +25,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const uniq = (arr = []) => {
   const seen = {};
-  return arr.filter((item) => {
+  return arr.filter(item => {
     if (seen.hasOwnProperty[item]) {
       return false;
     }
@@ -29,7 +43,6 @@ const uniq = (arr = []) => {
     return true;
   });
 };
-
 const createStyle = (theme, themeAttributes) => {
   if (!theme) {
     return {};
@@ -37,58 +50,56 @@ const createStyle = (theme, themeAttributes) => {
   const flattenedThemeAttributes = [].concat(...themeAttributes);
   let style = {};
   const missingThemeAttributes = [];
-  flattenedThemeAttributes.forEach((attribute) => {
+  flattenedThemeAttributes.forEach(attribute => {
     if (theme[attribute]) {
-      const cssName = attribute
-        .replace(/([A-Z])/g, (variable) => `-${variable.toLowerCase()}`)
-        .replace(/([0-9])/, (variable) => `-${variable.toLowerCase()}`);
+      const cssName = attribute.replace(/([A-Z])/g, variable => `-${variable.toLowerCase()}`).replace(/([0-9])/, variable => `-${variable.toLowerCase()}`);
       const value = theme[attribute];
       style[`--bpk-${cssName}`] = value;
     } else {
       missingThemeAttributes.push(attribute);
     }
   });
-
   if (missingThemeAttributes.length > 0) {
     style = {};
   }
-
   return style;
 };
-
-class BpkThemeProvider extends Component {
+class BpkThemeProvider extends _react.Component {
   getChildContext() {
-    return { theme: this.props.theme };
+    return {
+      theme: this.props.theme
+    };
   }
-
   render() {
-    const {
-      children,
-      component: WrapperComponent,
-      style: userStyle,
-      theme,
-      themeAttributes,
-      ...rest
-    } = this.props;
-
+    const _this$props = this.props,
+      {
+        children,
+        component: WrapperComponent,
+        style: userStyle,
+        theme,
+        themeAttributes
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
     const dedupedThemeAttributes = uniq(themeAttributes);
     const style = createStyle(theme, dedupedThemeAttributes);
-
-    return (
-      <WrapperComponent style={{ ...userStyle, ...style }} {...rest}>
-        {children}
-      </WrapperComponent>
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, _objectSpread(_objectSpread({
+      style: _objectSpread(_objectSpread({}, userStyle), style)
+    }, rest), {}, {
+      children: children
+    }));
   }
 }
-
 BpkThemeProvider.childContextTypes = {
-  theme: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  theme: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
 };
 
 const themeAttributesPropType = (props, propName, componentName) => {
-  const { theme } = props;
-  let { themeAttributes } = props;
+  const {
+    theme
+  } = props;
+  let {
+    themeAttributes
+  } = props;
   if (!theme) {
     return null;
   }
@@ -99,11 +110,10 @@ const themeAttributesPropType = (props, propName, componentName) => {
   if (!Array.isArray(themeAttributes)) {
     return new Error(`${componentName}: \`themeAttributes\` must be an array.`);
   }
-
   themeAttributes = [].concat(...themeAttributes);
-  const extraneousThemeAttributes = { ...theme };
+  const extraneousThemeAttributes = _objectSpread({}, theme);
   const missingThemeAttributes = [];
-  themeAttributes.forEach((attribute) => {
+  themeAttributes.forEach(attribute => {
     if (theme[attribute]) {
       delete extraneousThemeAttributes[attribute];
     } else {
@@ -112,38 +122,31 @@ const themeAttributesPropType = (props, propName, componentName) => {
   });
   const errors = [];
   if (missingThemeAttributes.length > 0) {
-    errors.push(
-      `${componentName}: To apply theming, the theme prop must include \`${themeAttributes.join(
-        ', ',
-      )}\` (missing \`${missingThemeAttributes.join(', ')}\`)`,
-    );
+    errors.push(`${componentName}: To apply theming, the theme prop must include \`${themeAttributes.join(', ')}\` (missing \`${missingThemeAttributes.join(', ')}\`)`);
   }
   if (Object.keys(extraneousThemeAttributes).length > 0) {
-    errors.push(
-      `${componentName}: Extraneous theme attributes supplied: \`${Object.keys(
-        extraneousThemeAttributes,
-      ).join(', ')}\`.`,
-    );
+    errors.push(`${componentName}: Extraneous theme attributes supplied: \`${Object.keys(extraneousThemeAttributes).join(', ')}\`.`);
   }
   if (errors.length > 0) {
     return new Error(errors.join('\n'));
   }
   return false;
 };
-
 BpkThemeProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  theme: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  themeAttributes: themeAttributesPropType, // eslint-disable-line react/require-default-props
+  children: _propTypes.default.node.isRequired,
+  theme: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  themeAttributes: themeAttributesPropType,
+  // eslint-disable-line react/require-default-props
   // (disabled because isRequired is inside the custom validator)
-  component: PropTypes.elementType,
-  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  component: _propTypes.default.elementType,
+  style: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
 };
 
 BpkThemeProvider.defaultProps = {
   theme: null,
   component: 'div',
-  style: null,
+  style: null
 };
-
-export default BpkThemeProvider;
+var _default = BpkThemeProvider;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "22.3.1",
+  "version": "23.1.0-beta.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-animate-height/README.md

@@ -1,53 +0,0 @@
-# bpk-animate-height
-
-> Animate height using CSS transitions.
-
-Note: This was forked from https://github.com/Stanko/react-animate-height. We have added functionality to
-set the display property of the container to `display: none;` when the height is equal to 0.
-
-More information on the easing values can be found at [http://easings.net/](http://easings.net/)
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import AnimateHeight from '@skyscanner/backpack-web/bpk-animate-height';
-import { Component } from 'react';
-
-class AnimateHeightContainer extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      expanded: false,
-    };
-  }
-
-  render() {
-    return (
-      <AnimateHeight
-        height={this.state.expanded ? 'auto' : 0}
-        duration={200}
-      >
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
-        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
-        ridiculus mus.
-      </AnimateHeight>
-    );
-  }
-}
-```
-
-## Props
-
-| Property            | PropType         | Required | Default Value |
-| ------------------- | ---------------- | -------- | ------------- |
-| children            | node             | true     | -             |
-| duration            | number           | true     | -             |
-| height              | string or number | true     | -             |
-| easing              | string           | false    | 'ease'        |
-| onAnimationComplete | function         | false    | null          |
-| style               | object           | false    | {}            |

package/bpk-component-accordion/README.md

@@ -1,121 +0,0 @@
-# bpk-component-accordion
-
-> Backpack accordion component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-### withSingleItemAccordionState(BpkAccordion)
-
-The `withSingleItemAccordionState` higher-order component is used to limit one section to be expanded at any time.
-
-```js
-import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from '@skyscanner/backpack-web/bpk-component-accordion';
-
-const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
-
-export default () => (
-  <SingleItemAccordion>
-    <BpkAccordionItem id="stops" title="Stops">
-      My stops content.
-    </BpkAccordionItem>
-    <BpkAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
-      My departure times content.
-    </BpkAccordionItem>
-    <BpkAccordionItem id="journey-duration" title="Journey duration">
-      My journey duration content.
-    </BpkAccordionItem>
-  </SingleItemAccordion>
-)
-```
-
-### withAccordionItemState(BpkAccordionItem)
-
-The `withAccordionItemState` higher-order component is used to allow multiple items to be expanded simultaneously.
-
-```js
-import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from '@skyscanner/backpack-web/bpk-component-accordion';
-
-const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
-
-export default () => (
-  <BpkAccordion>
-    <StatefulAccordionItem id="stops" title="Stops">
-      My stops content.
-    </StatefulAccordionItem>
-    <StatefulAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
-      My departure times content.
-    </StatefulAccordionItem>
-    <StatefulAccordionItem id="journey-duration" title="Journey duration" initiallyExpanded>
-      My journey duration content.
-    </StatefulAccordionItem>
-  </BpkAccordion>
-)
-```
-
-### Displaying icons
-
-`BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://skyscanner.design/latest/components/alignment/web.html)
-
-```js
-import { BpkAccordion, BpkAccordionItem } from '@skyscanner/backpack-web/bpk-component-accordion';
-import { withAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
-import StopsIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/stops';
-import { lineHeightBase, iconSizeSm, colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
-
-<BpkAccordion>
-  <BpkAccordionItem id="stops" title="Stops" icon={<AlignedStopsIcon fill={colorPanjin}/>}>
-    My stops content.
-  </BpkAccordionItem>
-</BpkAccordion>
-
-```
-
-## Props
-
-### BpkAccordion
-
-| Property        | PropType | Required | Default Value |
-| --------------- | -------- | -------- | ------------- |
-| children        | node     | true     | -             |
-| className       | string   | false    | null          |
-| onDark          | bool     | false    | false         |
-| divider         | bool     | false    | true          |
-
-### BpkAccordionItem
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| id        | string   | true     | -             |
-| title     | string   | true     | -             |
-| expanded  | bool     | false    | false         |
-| icon      | node     | false    | null          |
-| onClick   | func     | false    | () => null    |
-| tagName   | string   | false    | span          |
-| textStyle | string   | false    | "base"        |
-
-### withSingleItemAccordionState(BpkAccordion)
-
-| Property                       | PropType | Required | Default Value |
-| ------------------------------ | -------- | -------- | ------------- |
-| ~~expanded~~ initiallyExpanded | bool     | false    | false         |
-
-### withState(BpkAccordionItem)
-
-| Property                       | PropType | Required | Default Value |
-| ------------------------------ | -------- | -------- | ------------- |
-| ~~expanded~~ initiallyExpanded | bool     | false    | false         |
-
-## Prop Details
-
-## Theme Props
-
-* `accordionColor`,
-* `accordionHoverColor`,
-* `accordionActiveColor`,

package/bpk-component-accordion/src/BpkAccordionItem.module.scss

@@ -1,102 +0,0 @@
-/*
- * 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-accordion {
-  &__title {
-    height: auto;
-
-    &--collapsed {
-      @include bpk-border-bottom-sm($bpk-line-day);
-
-      &-on-dark {
-        @include bpk-border-bottom-sm($bpk-line-on-dark-day);
-      }
-    }
-  }
-
-  &__toggle-button {
-    width: 100%;
-    padding: 0;
-    border: 0;
-    background-color: transparent;
-    color: $bpk-text-primary-day;
-    text-align: left;
-    cursor: pointer;
-    appearance: none;
-
-    @include bpk-rtl {
-      text-align: right;
-    }
-  }
-
-  &__flex-container {
-    display: inline-flex;
-    width: 100%;
-    margin: (bpk-spacing-base()) 0;
-    flex-direction: row;
-  }
-
-  &__title-text {
-    display: inline-block;
-    flex-grow: 1;
-
-    &--on-dark {
-      color: $bpk-canvas-day;
-    }
-  }
-
-  &__icon-wrapper {
-    display: inline-block;
-  }
-
-  &__leading-icon {
-    @include bpk-margin-trailing(bpk-spacing-md(), true);
-  }
-
-  &__item-expand-icon {
-    fill: $bpk-text-primary-day;
-
-    &--flipped {
-      transform: scaleY(-1);
-    }
-
-    &--on-dark {
-      fill: $bpk-canvas-day;
-    }
-  }
-
-  &__content-container {
-    margin: 0;
-
-    &--expanded {
-      padding-bottom: bpk-spacing-base();
-
-      @include bpk-border-bottom-sm($bpk-line-day);
-
-      &-on-dark {
-        padding-bottom: bpk-spacing-base();
-
-        @include bpk-border-bottom-sm($bpk-line-on-dark-day);
-      }
-    }
-  }
-}

package/bpk-component-aria-live/README.md

@@ -1,39 +0,0 @@
-# bpk-component-aria-live
-
-> Backpack aria-live component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```tsx
-import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from '@skyscanner/backpack-web/bpk-component-aria-live';
-
-export default () => (
-  <>
-    <BpkAriaLive>
-      Information about an interaction section of the page. This will be visible only to accessibility technologies.
-    </BpkAriaLive>
-
-    <BpkAriaLive visible politenessSetting={ARIA_LIVE_POLITENESS_SETTINGS.assertive}>
-      Information about an interaction section of the page. This will be visible to everybody.
-    </BpkAriaLive>
-  </>
-);
-```
-
-## Props
-
-| Property | PropType | Required | Default Value |
-| - | - | - | - |
-| className | string | false | null |
-| politenessSetting | oneOf([`ARIA_LIVE_POLITENESS_SETTINGS.off`, `ARIA_LIVE_POLITENESS_SETTINGS.polite`, `ARIA_LIVE_POLITENESS_SETTINGS.assertive`]) | false | `ARIA_LIVE_POLITENESS_SETTINGS.polite` |
-| visible | bool | false | false |
-
-`aria-relevant` and `aria-atomic` props can also be set.
-
-`aria-relevant` determines what sort of changes should be read out. By default it is `text` but can be `additions`, `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant).
-
-`aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).

package/bpk-component-autosuggest/README.md

@@ -1,124 +0,0 @@
-# bpk-component-autosuggest
-
-> Backpack autosuggest component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { Component } from 'react';
-import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
-import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
-import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';
-import BpkAutosuggest, { BpkAutosuggestSuggestion } from '@skyscanner/backpack-web/bpk-component-autosuggest';
-
-const BpkFlightIcon = withRtlSupport(FlightIcon);
-
-const offices = [
-  {
-    name: 'Barcelona',
-    code: 'BCN',
-    country: 'Spain',
-  },
-  ...
-];
-
-const getSuggestions = (value) => {
-  const inputValue = value.trim().toLowerCase();
-  const inputLength = inputValue.length;
-
-  return inputLength === 0 ? [] : offices.filter(office =>
-    office.name.toLowerCase().indexOf(inputValue) !== -1,
-  );
-};
-
-const getSuggestionValue = ({ name, code }) => `${name} (${code})`;
-
-const renderSuggestion = suggestion => (
-  <BpkAutosuggestSuggestion
-    value={getSuggestionValue(suggestion)}
-    subHeading={suggestion.country}
-    tertiaryLabel="Airport"
-    indent={suggestion.indent}
-    icon={BpkFlightIcon}
-  />
-);
-
-class MyComponent extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      value: '',
-      suggestions: [],
-    };
-
-  }
-
-  onChange = (e, { newValue }) => {
-    this.setState({
-      value: newValue,
-    });
-  }
-
-  onSuggestionsFetchRequested = ({ value }) => {
-    this.setState({
-      suggestions: getSuggestions(value),
-    });
-  }
-
-  onSuggestionsClearRequested = () => {
-    this.setState({
-      suggestions: [],
-    });
-  }
-
-  render() {
-    const { value, suggestions } = this.state;
-
-    const inputProps = {
-      id: 'my-autosuggest',
-      name: 'my-autosuggest',
-      placeholder: 'Enter an office name',
-      value,
-      onChange: this.onChange,
-    };
-
-    return (
-      <div>
-        <BpkLabel htmlFor="my-autosuggest">Office</BpkLabel>
-        <BpkAutosuggest
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          getSuggestionValue={getSuggestionValue}
-          renderSuggestion={renderSuggestion}
-          inputProps={inputProps}
-        />
-      </div>
-    );
-  }
-}
-```
-
-## Props
-
-*BpkAutosuggest:*
-
-[Please refer to `react-autosuggest`'s documentation for a full list of props](https://github.com/moroshko/react-autosuggest#props).
-
-**Note:** The `inputProps` object is passed directly to a [`BpkInput`](../bpk-component-input/README.md#props) component, so its prop types apply also.
-
-*BpkAutosuggestSuggestion:*
-
-| Property          | PropType             | Required | Default Value |
-| ----------------- | -------------------- | -------- | ------------- |
-| value             | string               | true     | -             |
-| subHeading        | string               | false    | null          |
-| tertiaryLabel     | string               | false    | null          |
-| icon              | func                 | false    | null          |
-| indent            | bool                 | false    | false         |
-| className         | string               | false    | null          |