@skyscanner/backpack-web 14.2.0-beta.1 → 15.1.0

package/bpk-component-banner-alert/src/withBannerAlertState.js

@@ -1,127 +1,185 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkBannerAlertExpandable = _interopRequireDefault(require("./BpkBannerAlertExpandable"));
-const _excluded = ["animateOnLeave", "children", "expanded", "hideAfter", "onDismiss", "onExpandToggle", "onHide", "show"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-const withBannerAlertState = WrappedComponent => {
-  class component extends _react.Component {
-    constructor(props) {
-      super(props);
-      _defineProperty(this, "hideIntervalId", void 0);
-      _defineProperty(this, "onExpandToggle", () => {
-        this.setState(prevState => {
-          const expanded = !prevState.expanded;
-          if (this.props.onExpandToggle) {
-            this.props.onExpandToggle(expanded);
-          }
-          return {
-            expanded
-          };
-        });
-      });
-      _defineProperty(this, "onDismiss", () => {
-        this.setState({
-          show: false
-        });
-        if (this.props.onDismiss) {
-          this.props.onDismiss();
-        }
-      });
-      _defineProperty(this, "onHide", () => {
-        this.setState({
-          show: false
-        });
-        if (this.props.onHide) {
-          this.props.onHide();
+/*
+ * 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 ComponentType, Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { wrapDisplayName } from '../../bpk-react-utils';
+
+import {
+  type OnDismissHandler,
+  type OnExpandToggleHandler,
+} from './common-types';
+import BpkBannertAlertExpandable from './BpkBannerAlertExpandable';
+
+const withBannerAlertState = (WrappedComponent: ComponentType<any>) => {
+  type Props = {
+    onDismiss: OnDismissHandler,
+    onExpandToggle: OnExpandToggleHandler,
+    onHide: ?() => void,
+    expanded: boolean,
+    show: boolean,
+    hideAfter: ?number,
+    animateOnLeave: boolean,
+    children: Node,
+  };
+
+  type State = {
+    expanded: boolean,
+    show: boolean,
+  };
+
+  class component extends Component<Props, State> {
+    hideIntervalId: ?TimeoutID;
+
+    static propTypes = {
+      onDismiss: PropTypes.func,
+      onExpandToggle: PropTypes.func,
+      onHide: PropTypes.func,
+      expanded: PropTypes.bool,
+      show: PropTypes.bool,
+      hideAfter: (
+        props: Object,
+        propName: string,
+        componentName: string,
+        ...rest: mixed[]
+      ) => {
+        if (
+          WrappedComponent === BpkBannertAlertExpandable &&
+          typeof props[propName] === 'number'
+        ) {
+          return new Error(
+            `Invalid prop \`${propName}\` supplied to ${componentName}. \`${propName}\` is not supported for expandable banner alerts.`,
+          );
         }
-      });
+
+        return PropTypes.number(props, propName, componentName, ...rest);
+      },
+      animateOnLeave: PropTypes.bool,
+      children: PropTypes.node,
+    };
+
+    static defaultProps = {
+      onDismiss: null,
+      onExpandToggle: null,
+      onHide: null,
+      expanded: false,
+      show: true,
+      hideAfter: null,
+      animateOnLeave: false,
+      children: null,
+    };
+
+    constructor(props: Props) {
+      super(props);
+
       this.state = {
         expanded: props.expanded,
-        show: true
+        show: true,
       };
+
       this.hideIntervalId = null;
     }
+
     componentDidMount() {
-      const {
-        hideAfter
-      } = this.props;
-      if (WrappedComponent !== _BpkBannerAlertExpandable.default && hideAfter && hideAfter > 0) {
+      const { hideAfter } = this.props;
+
+      if (
+        WrappedComponent !== BpkBannertAlertExpandable &&
+        hideAfter &&
+        hideAfter > 0
+      ) {
         this.hideIntervalId = setTimeout(() => {
           this.onHide();
         }, hideAfter * 1000);
       }
     }
+
     componentWillUnmount() {
       if (this.hideIntervalId) {
         clearTimeout(this.hideIntervalId);
       }
     }
+
+    onExpandToggle = () => {
+      this.setState((prevState) => {
+        const expanded = !prevState.expanded;
+
+        if (this.props.onExpandToggle) {
+          this.props.onExpandToggle(expanded);
+        }
+
+        return { expanded };
+      });
+    };
+
+    onDismiss = () => {
+      this.setState({ show: false });
+
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
+    };
+
+    onHide = () => {
+      this.setState({ show: false });
+
+      if (this.props.onHide) {
+        this.props.onHide();
+      }
+    };
+
     render() {
-      const _this$props = this.props,
-        {
-          animateOnLeave,
-          children,
-          expanded,
-          hideAfter,
-          onDismiss,
-          onExpandToggle,
-          onHide,
-          show
-        } = _this$props,
-        rest = _objectWithoutProperties(_this$props, _excluded);
+      const {
+        animateOnLeave,
+        children,
+        expanded,
+        hideAfter,
+        onDismiss,
+        onExpandToggle,
+        onHide,
+        show,
+        ...rest
+      } = this.props;
+
       return (
-        /*#__PURE__*/
         // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        _react.default.createElement(WrappedComponent, _extends({
-          expanded: this.state.expanded,
-          onExpandToggle: this.onExpandToggle,
-          onDismiss: this.onDismiss,
-          show: this.state.show,
-          animateOnLeave: hideAfter && hideAfter > 0 || animateOnLeave
-        }, rest), children)
+        <WrappedComponent
+          expanded={this.state.expanded}
+          onExpandToggle={this.onExpandToggle}
+          onDismiss={this.onDismiss}
+          show={this.state.show}
+          animateOnLeave={(hideAfter && hideAfter > 0) || animateOnLeave}
+          {...rest}
+        >
+          {children}
+        </WrappedComponent>
       );
     }
   }
-  _defineProperty(component, "propTypes", {
-    onDismiss: _propTypes.default.func,
-    onExpandToggle: _propTypes.default.func,
-    onHide: _propTypes.default.func,
-    expanded: _propTypes.default.bool,
-    show: _propTypes.default.bool,
-    hideAfter: (props, propName, componentName, ...rest) => {
-      if (WrappedComponent === _BpkBannerAlertExpandable.default && typeof props[propName] === 'number') {
-        return new Error(`Invalid prop \`${propName}\` supplied to ${componentName}. \`${propName}\` is not supported for expandable banner alerts.`);
-      }
-      return _propTypes.default.number(props, propName, componentName, ...rest);
-    },
-    animateOnLeave: _propTypes.default.bool,
-    children: _propTypes.default.node
-  });
-  _defineProperty(component, "defaultProps", {
-    onDismiss: null,
-    onExpandToggle: null,
-    onHide: null,
-    expanded: false,
-    show: true,
-    hideAfter: null,
-    animateOnLeave: false,
-    children: null
-  });
-  component.displayName = (0, _bpkReactUtils.wrapDisplayName)(WrappedComponent, 'withBannerAlertState');
+
+  component.displayName = wrapDisplayName(
+    WrappedComponent,
+    'withBannerAlertState',
+  );
+
   return component;
 };
-var _default = withBannerAlertState;
-exports.default = _default;
+
+export default withBannerAlertState;

package/bpk-component-barchart/README.md

@@ -0,0 +1,187 @@
+# bpk-component-barchart
+
+> Backpack bar chart component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkBarchart from '@skyscanner/backpack-web/bpk-component-barchart';
+
+const priceData = [
+  {
+    day: 'mon',
+    price: 240,
+  },
+  // ...
+];
+
+export default () => (
+  <BpkBarchart
+    xAxisLabel="Weekday"
+    yAxisLabel="Price (£)"
+    xScaleDataKey="day"
+    yScaleDataKey="price"
+    initialWidth={500}
+    initialHeight={300}
+    data={priceData}
+  />
+);
+```
+
+### Props
+
+| Property                                | PropType                              | Required | Default Value           |
+| --------------------------------------- | ------------------------------------- | -------- | ----------------------- |
+| [data](#data)                           | custom(validates usage of scale keys) | true     | -                       |
+| [xScaleDataKey](#xscaledatakey)         | string                                | true     | -                       |
+| [yScaleDataKey](#yscaledatakey)         | string                                | true     | -                       |
+| xAxisLabel                              | string                                | true     | -                       |
+| yAxisLabel                              | string                                | true     | -                       |
+| initialWidth                            | number                                | true     | -                       |
+| initialHeight                           | number                                | true     | -                       |
+| className                               | string                                | false    | null                    |
+| leadingScrollIndicatorClassName         | string                                | false    | null                    |
+| trailingScrollIndicatorClassName        | string                                | false    | null                    |
+| [outlierPercentage](#outlierpercentage) | number                                | false    | null                    |
+| showGridlines                           | bool                                  | false    | false                   |
+| xAxisMargin                             | number                                | false    | 3                       |
+| xAxisTickValue                          | func                                  | false    | identity                |
+| xAxisTickOffset                         | number                                | false    | 0                       |
+| xAxisTickEvery                          | number                                | false    | 1                       |
+| yAxisMargin                             | number                                | false    | 2.625                   |
+| yAxisTickValue                          | func                                  | false    | identity                |
+| yAxisNumTicks                           | number                                | false    | null                    |
+| yAxisDomain                             | array                                 | false    | Calculated by component |
+| [onBarClick](#onbarclick)               | func                                  | false    | null                    |
+| [onBarHover](#onbarhover)               | func                                  | false    | null                    |
+| [onBarFocus](#onbarfocus)               | func                                  | false    | null                    |
+| [getBarLabel](#getbarlabel)             | func                                  | false    | See prop details        |
+| [getBarSelection](#getbarselection)     | func                                  | false    | See prop details        |
+| BarComponent                            | elementType                                  | false    | BpkBarchartBar          |
+| disableDataTable                        | bool                                  | false    | false                   |
+
+### Theme Props
+
+* `barchartBarBackgroundColor`
+* `barchartBarHoverBackgroundColor`
+* `barchartBarActiveBackgroundColor`
+* `barchartBarSelectedBackgroundColor`
+
+### Prop Details
+
+#### data
+
+An array of data points with a value for the x axis and y axis respectively. The keys for the x axis and y axis can be anything you choose. Specify the keys with the props `xScaleDataKey` and `yScaleDataKey`. For this data the `xScaleDataKey` would be `day` and the `yScaleDataKey` `price`.
+
+```json
+[
+  {
+    "day": "mon",
+    "price": 240
+  },
+  {
+    "day": "tus",
+    "price": 340
+  },
+  {
+    "day": "wen",
+    "price": 300
+  },
+  {
+    "day": "thu",
+    "price": 340
+  },
+  {
+    "day": "fri",
+    "price": 353
+  },
+  {
+    "day": "sat",
+    "price": 290
+  },
+  {
+    "day": "sun",
+    "price": 380
+  }
+]
+```
+
+
+
+#### xScaleDataKey
+
+The key in each data point that holds the value for the x axis of that data point.
+
+#### yScaleDataKey
+
+The key in each data point that holds the value for the y axis of that data point.
+
+#### yAxisDomain
+
+Override the default y axis domain.  This is an array with two elements, the lower then upper domain.  If either value is set to `null` the default value is used instead.
+
+```javascript
+<BpkBarchart
+  ...
+  yAxisDomain={[null, 100]} // The y axis will go from 0 (the default) to 100.
+/>
+```
+
+#### `outlierPercentage`
+
+Values that are `outlierPercentage` percent above the mean of the whole dataset are considered outliers and rendered cut off instead of at their full height.
+
+#### `onBarClick`
+
+```javascript
+const onBarClick = (event, {
+  point: <Object>, // The `data` array object from the bar clicked
+}) => {
+  ...
+}
+```
+
+#### `onBarHover`
+
+```javascript
+const onBarHover = (event, {
+  point: <Object>, // The `data` array object from the bar hovered
+}) => {
+  ...
+}
+```
+
+#### `onBarFocus`
+
+```javascript
+const onBarFocus = (event, {
+  point: <Object>, // The `data` array object from the bar focused
+}) => {
+  ...
+}
+```
+
+#### `getBarLabel`
+
+By default the following function is used:
+
+```javascript
+(point, xScaleDataKey, yScaleDataKey) => {
+  return `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`;
+}
+```
+
+#### `getBarSelection`
+
+Must be a function which returns true based on the `point` argument:
+
+```javascript
+const getBarSelection = (point) => {
+  return point.myKnownProperty === 'foo';
+}
+```

package/bpk-component-barchart/data.json

@@ -0,0 +1,20 @@
+{
+  "prices": [
+    {
+      "month": "Jan",
+      "price": 305
+    },
+    {
+      "month": "Feb",
+      "price": 348
+    },
+    {
+      "month": "Mar",
+      "price": 418
+    },
+    {
+      "month": "Apr",
+      "price": 448
+    }
+  ]
+}

package/bpk-component-barchart/index.js

@@ -1,53 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkBarchartBars", {
-  enumerable: true,
-  get: function () {
-    return _BpkBarchartBars.default;
-  }
-});
-Object.defineProperty(exports, "BpkBarchartDefs", {
-  enumerable: true,
-  get: function () {
-    return _BpkBarchartDefs.default;
-  }
-});
-Object.defineProperty(exports, "BpkChartAxis", {
-  enumerable: true,
-  get: function () {
-    return _BpkChartAxis.default;
-  }
-});
-Object.defineProperty(exports, "BpkChartGridLines", {
-  enumerable: true,
-  get: function () {
-    return _BpkChartGridLines.default;
-  }
-});
-Object.defineProperty(exports, "BpkChartMargin", {
-  enumerable: true,
-  get: function () {
-    return _BpkChartMargin.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _BpkBarchart = _interopRequireDefault(require("./src/BpkBarchart"));
-var _BpkBarchartBars = _interopRequireDefault(require("./src/BpkBarchartBars"));
-var _BpkBarchartDefs = _interopRequireDefault(require("./src/BpkBarchartDefs"));
-var _BpkChartAxis = _interopRequireDefault(require("./src/BpkChartAxis"));
-var _BpkChartGridLines = _interopRequireDefault(require("./src/BpkChartGridLines"));
-var _BpkChartMargin = _interopRequireDefault(require("./src/BpkChartMargin"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -65,5 +15,24 @@ 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 = _BpkBarchart.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkBarchart from './src/BpkBarchart';
+import BpkBarchartBars from './src/BpkBarchartBars';
+import BpkBarchartDefs from './src/BpkBarchartDefs';
+import BpkChartAxis from './src/BpkChartAxis';
+import BpkChartGridLines from './src/BpkChartGridLines';
+import BpkChartMargin from './src/BpkChartMargin';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkBarchart;
+
+export {
+  BpkBarchartBars,
+  BpkBarchartDefs,
+  BpkChartAxis,
+  BpkChartGridLines,
+  BpkChartMargin,
+  themeAttributes,
+};