@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0-alpha.1

package/bpk-component-accordion/src/withSingleItemAccordionState.js

@@ -1,82 +1,95 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-const _excluded = ["children"];
-
-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 _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 getInitiallyExpanded = children => {
-  const accordionItems = _react.Children.toArray(children);
-
-  const result = accordionItems.reduceRight((prev, item) => item.props.initiallyExpanded ? item : prev, {});
+/*
+ * 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,
+  Children,
+  cloneElement,
+  type Node,
+  type Element,
+  type ComponentType,
+} from 'react';
+import { wrapDisplayName } from '../../bpk-react-utils';
+
+const getInitiallyExpanded = (children) => {
+  const accordionItems = Children.toArray(children);
+  const result = accordionItems.reduceRight(
+    (prev, item) => (item.props.initiallyExpanded ? item : prev),
+    {},
+  );
   return (result || {}).key || null;
 };
 
-const withSingleItemAccordionState = ComposedComponent => {
-  class WithSingleItemAccordionState extends _react.Component {
-    constructor(props) {
-      super(props);
-
-      _defineProperty(this, "openAccordionItem", key => {
-        this.setState({
-          expanded: key
-        });
-      });
-
-      _defineProperty(this, "renderAccordionItem", accordionItem => {
-        const expanded = this.state.expanded === accordionItem.key;
+type Props = {
+  children: Node,
+};
 
-        const onClick = () => this.openAccordionItem(accordionItem.key);
+type State = {
+  expanded: ?string | ?number,
+};
 
-        return /*#__PURE__*/(0, _react.cloneElement)(accordionItem, {
-          expanded,
-          onClick
-        });
-      });
+const withSingleItemAccordionState = (
+  ComposedComponent: ComponentType<any>,
+) => {
+  class WithSingleItemAccordionState extends Component<Props, State> {
+    constructor(props: Props) {
+      super(props);
 
       this.state = {
-        expanded: getInitiallyExpanded(this.props.children)
+        expanded: getInitiallyExpanded(this.props.children),
       };
     }
 
+    openAccordionItem = (key: ?string | ?number) => {
+      this.setState({ expanded: key });
+    };
+
+    renderAccordionItem = (accordionItem: Element<any>) => {
+      const expanded = this.state.expanded === accordionItem.key;
+      const onClick = () => this.openAccordionItem(accordionItem.key);
+
+      return cloneElement(accordionItem, { expanded, onClick });
+    };
+
     render() {
-      const _this$props = this.props,
-            {
-        children
-      } = _this$props,
-            rest = _objectWithoutProperties(_this$props, _excluded);
+      const { children, ...rest } = this.props;
 
-      return /*#__PURE__*/_react.default.createElement(ComposedComponent, rest, _react.Children.toArray(children).map(this.renderAccordionItem));
+      return (
+        <ComposedComponent {...rest}>
+          {Children.toArray(children).map(this.renderAccordionItem)}
+        </ComposedComponent>
+      );
     }
-
   }
 
   WithSingleItemAccordionState.propTypes = {
-    children: _propTypes.default.node.isRequired
+    children: PropTypes.node.isRequired,
   };
-  WithSingleItemAccordionState.displayName = (0, _bpkReactUtils.wrapDisplayName)(ComposedComponent, 'withSingleItemAccordionState');
+
+  WithSingleItemAccordionState.displayName = wrapDisplayName(
+    ComposedComponent,
+    'withSingleItemAccordionState',
+  );
+
   return WithSingleItemAccordionState;
 };
 
-var _default = withSingleItemAccordionState;
-exports.default = _default;
+export default withSingleItemAccordionState;

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

@@ -0,0 +1,42 @@
+# bpk-component-aria-live
+
+> Backpack aria-live component.
+
+## Installation
+
+```sh
+npm install bpk-component-aria-live --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from '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 `additions` but can be `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute).
+
+`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-aria-live/index.js

@@ -1,22 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ARIA_LIVE_POLITENESS_SETTINGS", {
-  enumerable: true,
-  get: function () {
-    return _BpkAriaLive.POLITENESS_SETTINGS;
-  }
-});
-exports.default = void 0;
-
-var _BpkAriaLive = _interopRequireWildcard(require("./src/BpkAriaLive"));
-
-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
  *
@@ -34,5 +15,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkAriaLive.default;
-exports.default = _default;
+/* @flow strict */
+
+import BpkAriaLive, {
+  POLITENESS_SETTINGS as ARIA_LIVE_POLITENESS_SETTINGS,
+  type Props as BpkAriaLiveProps,
+} from './src/BpkAriaLive';
+
+export { ARIA_LIVE_POLITENESS_SETTINGS };
+export type { BpkAriaLiveProps };
+export default BpkAriaLive;

package/bpk-component-aria-live/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "bpk-component-aria-live",
+  "version": "2.1.18",
+  "description": "Backpack aria-live 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/"
+  },
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.5.8"
+  },
+  "devDependencies": {
+    "bpk-component-chip": "^5.2.16",
+    "bpk-component-code": "^3.1.11",
+    "bpk-component-fieldset": "^4.1.18",
+    "bpk-component-select": "^5.1.11",
+    "bpk-component-switch": "^2.1.12"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926"
+}

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -1,64 +1,66 @@
-"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 */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.POLITENESS_SETTINGS = void 0;
+import PropTypes from 'prop-types';
+import React, { type Node } from 'react';
+import { cssModules } from '../../bpk-react-utils';
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+import STYLES from './BpkAriaLive.module.scss';
 
-var _react = _interopRequireDefault(require("react"));
+const getClassName = cssModules(STYLES);
 
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _BpkAriaLiveModule = _interopRequireDefault(require("./BpkAriaLive.css"));
-
-const _excluded = ["className", "politenessSetting", "visible"];
-
-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)(_BpkAriaLiveModule.default);
-const POLITENESS_SETTINGS = {
+export const POLITENESS_SETTINGS = {
   off: 'off',
   polite: 'polite',
-  assertive: 'assertive'
+  assertive: 'assertive',
 };
-exports.POLITENESS_SETTINGS = POLITENESS_SETTINGS;
 
-const BpkAriaLive = props => {
-  const {
+export type Props = {
+  children: Node,
+  politenessSetting: $Keys<typeof POLITENESS_SETTINGS>,
+  visible: boolean,
+  className: ?string,
+};
+const BpkAriaLive = (props: Props) => {
+  const { className, politenessSetting, visible, ...rest } = props;
+  const classNames = getClassName(
+    'bpk-aria-live',
+    !visible && 'bpk-aria-live--invisible',
     className,
-    politenessSetting,
-    visible
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+  );
 
-  const classNames = getClassName('bpk-aria-live', !visible && 'bpk-aria-live--invisible', className);
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("div", _extends({
-      "aria-live": politenessSetting,
-      className: classNames
-    }, rest))
+    <div aria-live={politenessSetting} className={classNames} {...rest} />
   );
 };
 
 BpkAriaLive.propTypes = {
-  className: _propTypes.default.string,
-  politenessSetting: _propTypes.default.oneOf(Object.keys(POLITENESS_SETTINGS)),
-  visible: _propTypes.default.bool
+  className: PropTypes.string,
+  politenessSetting: PropTypes.oneOf(Object.keys(POLITENESS_SETTINGS)),
+  visible: PropTypes.bool,
 };
+
 BpkAriaLive.defaultProps = {
   className: null,
   politenessSetting: POLITENESS_SETTINGS.polite,
-  visible: false
+  visible: false,
 };
-var _default = BpkAriaLive;
-exports.default = _default;
+
+export default BpkAriaLive;

package/bpk-component-aria-live/src/BpkAriaLive.module.scss

@@ -0,0 +1,25 @@
+/*
+ * 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';
+
+.bpk-aria-live {
+  &--invisible {
+    @include bpk-visually-hidden;
+  }
+}

package/bpk-component-autosuggest/README.md

@@ -0,0 +1,126 @@
+# bpk-component-autosuggest
+
+> Backpack autosuggest component.
+
+## Installation
+
+```sh
+npm install bpk-component-autosuggest --save-dev
+```
+
+## Usage
+
+```js
+import React, { Component } from 'react';
+import BpkLabel from 'bpk-component-label';
+import { withRtlSupport } from 'bpk-component-icon';
+import FlightIcon from 'bpk-component-icon/lg/flight';
+import BpkAutosuggest, { BpkAutosuggestSuggestion } from '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`](https://backpack.github.io/components/text-input?platform=web) 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          |

package/bpk-component-autosuggest/index.js

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

package/bpk-component-autosuggest/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bpk-component-autosuggest",
+  "version": "6.1.16",
+  "description": "Backpack autosuggest 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": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
+  "dependencies": {
+    "bpk-component-input": "^6.1.16",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.7.2",
+    "react-autosuggest": "^9.4.3"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-icon": "^9.2.12"
+  }
+}