@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

package/bpk-component-barchart/src/BpkBarchartBar.js

@@ -1,145 +1,101 @@
-/*
- * 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 { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import { remToPx } from './utils';
-import STYLES from './BpkBarchartBar.module.scss';
-
-const getClassName = cssModules(STYLES);
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _utils = require("./utils");
+var _BpkBarchartBarModule = _interopRequireDefault(require("./BpkBarchartBar.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "height", "label", "onClick", "onFocus", "onHover", "outlier", "padding", "selected", "width", "x", "y"];
+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 getClassName = (0, _bpkReactUtils.cssModules)(_BpkBarchartBarModule.default);
 const KEYCODES = {
   ENTER: 13,
-  SPACEBAR: 32,
+  SPACEBAR: 32
 };
-
-const handleKeyboardEvent = (callback) => (event) => {
+const handleKeyboardEvent = callback => event => {
   if (event.keyCode === KEYCODES.ENTER || event.keyCode === KEYCODES.SPACEBAR) {
     event.preventDefault();
     callback(event);
   }
 };
-
-const borderRadius = remToPx(borderRadiusXs);
-
-type Props = {
-  height: number,
-  label: string,
-  width: number,
-  x: number,
-  y: number,
-  className: ?string,
-  onClick: ?(?any) => mixed,
-  onHover: ?() => mixed,
-  onFocus: ?() => mixed,
-  outlier: boolean,
-  padding: number,
-  selected: boolean,
-};
-
-const BpkBarchartBar = (props: Props) => {
+const borderRadius = (0, _utils.remToPx)(_base.borderRadiusXs);
+const BpkBarchartBar = props => {
   const {
-    className,
-    height,
-    label,
-    onClick,
-    onFocus,
-    onHover,
-    outlier,
-    padding,
-    selected,
-    width,
-    x,
-    y,
-    ...rest
-  } = props;
-
-  const classNames = getClassName(
-    'bpk-barchart-bar',
-    className,
-    selected && 'bpk-barchart-bar--selected',
-    (onClick || onHover) && 'bpk-barchart-bar--interactive',
-  );
-  const rectClassNames = getClassName(
-    'bpk-barchart-bar__rect',
-    outlier && 'bpk-barchart-bar__rect--outlier',
-  );
-  const tappableAreaClassNames = getClassName(
-    'bpk-barchart-bar__tappable-area',
-  );
-
+      className,
+      height,
+      label,
+      onClick,
+      onFocus,
+      onHover,
+      outlier,
+      padding,
+      selected,
+      width,
+      x,
+      y
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const classNames = getClassName('bpk-barchart-bar', className, selected && 'bpk-barchart-bar--selected', (onClick || onHover) && 'bpk-barchart-bar--interactive');
+  const rectClassNames = getClassName('bpk-barchart-bar__rect', outlier && 'bpk-barchart-bar__rect--outlier');
+  const tappableAreaClassNames = getClassName('bpk-barchart-bar__tappable-area');
   const isAriaPressed = !!(onClick && selected);
   const rectPadding = width * (padding / 2);
   const rectWidth = width * (1 - padding);
-
-  return (
-    <g className={classNames} transform={`translate(${x}, ${y})`}>
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <rect
-        className={rectClassNames}
-        x={rectPadding}
-        y={0}
-        width={rectWidth}
-        height={height}
-        rx={borderRadius}
-        ry={borderRadius}
-        {...rest}
-      />
-      <rect
-        className={tappableAreaClassNames}
-        x={0}
-        y={0}
-        width={width}
-        height={height}
-        onClick={onClick || undefined}
-        onMouseOver={onHover || undefined}
-        onFocus={onFocus || undefined}
-        onKeyDown={onClick ? handleKeyboardEvent(onClick) : undefined}
-        tabIndex={onClick ? 0 : undefined}
-        role={onClick ? 'button' : 'graphics-symbol'}
-        aria-roledescription={onClick ? undefined : 'bar'}
-        aria-pressed={onClick ? isAriaPressed : undefined}
-        aria-label={label}
-      />
-    </g>
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: classNames,
+    transform: `translate(${x}, ${y})`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", _objectSpread({
+      className: rectClassNames,
+      x: rectPadding,
+      y: 0,
+      width: rectWidth,
+      height: height,
+      rx: borderRadius,
+      ry: borderRadius
+    }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      className: tappableAreaClassNames,
+      x: 0,
+      y: 0,
+      width: width,
+      height: height,
+      onClick: onClick || undefined,
+      onMouseOver: onHover || undefined,
+      onFocus: onFocus || undefined,
+      onKeyDown: onClick ? handleKeyboardEvent(onClick) : undefined,
+      tabIndex: onClick ? 0 : undefined,
+      role: onClick ? 'button' : 'graphics-symbol',
+      "aria-roledescription": onClick ? undefined : 'bar',
+      "aria-pressed": onClick ? isAriaPressed : undefined,
+      "aria-label": label
+    })]
+  });
 };
-
 BpkBarchartBar.propTypes = {
-  height: PropTypes.number.isRequired,
-  label: PropTypes.string.isRequired,
-  width: PropTypes.number.isRequired,
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  onHover: PropTypes.func,
-  onFocus: PropTypes.func,
-  outlier: PropTypes.bool,
-  padding: PropTypes.number,
-  selected: PropTypes.bool,
+  height: _propTypes.default.number.isRequired,
+  label: _propTypes.default.string.isRequired,
+  width: _propTypes.default.number.isRequired,
+  x: _propTypes.default.number.isRequired,
+  y: _propTypes.default.number.isRequired,
+  className: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  onHover: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  outlier: _propTypes.default.bool,
+  padding: _propTypes.default.number,
+  selected: _propTypes.default.bool
 };
-
 BpkBarchartBar.defaultProps = {
   className: null,
   onClick: null,
@@ -147,7 +103,7 @@ BpkBarchartBar.defaultProps = {
   onFocus: null,
   outlier: false,
   padding: 0,
-  selected: false,
+  selected: false
 };
-
-export default BpkBarchartBar;
+var _default = BpkBarchartBar;
+exports.default = _default;

package/bpk-component-barchart/src/BpkBarchartBar.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-barchart-bar{fill:#6d9feb;fill:var(--bpk-barchart-bar-background-color, #6d9feb)}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected){cursor:pointer}.bpk-no-touch-support .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:#0770e3;fill:var(--bpk-barchart-bar-hover-background-color, #0770e3)}:global(.bpk-no-touch-support) .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:#0770e3;fill:var(--bpk-barchart-bar-hover-background-color, #0770e3)}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):active{fill:#084eb2;fill:var(--bpk-barchart-bar-active-background-color, #084eb2)}.bpk-barchart-bar--selected{fill:#084eb2;fill:var(--bpk-barchart-bar-selected-background-color, #084eb2)}.bpk-barchart-bar__rect{fill:inherit;shape-rendering:auto}.bpk-barchart-bar__rect--outlier{mask:url(#bpk-barchart__def-mask)}.bpk-barchart-bar__tappable-area{fill:transparent}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-barchart-bar{fill:#c2c9cd;fill:var(--bpk-barchart-bar-background-color, #c2c9cd)}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected){cursor:pointer}.bpk-no-touch-support .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:#05203c;fill:var(--bpk-barchart-bar-hover-background-color, #05203c)}:global(.bpk-no-touch-support) .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:#05203c;fill:var(--bpk-barchart-bar-hover-background-color, #05203c)}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):active{fill:#0062e3;fill:var(--bpk-barchart-bar-active-background-color, #0062e3)}.bpk-barchart-bar--selected{fill:#0062e3;fill:var(--bpk-barchart-bar-selected-background-color, #0062e3)}.bpk-barchart-bar__rect{fill:inherit;shape-rendering:auto}.bpk-barchart-bar__rect--outlier{mask:url(#bpk-barchart__def-mask)}.bpk-barchart-bar__tappable-area{fill:transparent}

package/bpk-component-barchart/src/BpkBarchartBars.js

@@ -1,164 +1,140 @@
-/*
- * 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 { scaleBand, scaleLinear } from 'd3-scale';
-import PropTypes from 'prop-types';
-import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-import BpkBarchartBar from './BpkBarchartBar';
-import { remToPx } from './utils';
-
-const borderRadius = remToPx(borderRadiusXs);
-
-const getYPos = (point, { maxYValue, yScale, yScaleDataKey }) =>
-  yScale(Math.min(point[yScaleDataKey], maxYValue));
-
-const getBarHeight = (
-  point,
-  { height, margin, maxYValue, yScale, yScaleDataKey },
-) => {
-  const barHeight =
-    height -
-    margin.top -
-    margin.bottom -
-    getYPos(point, { yScale, yScaleDataKey, maxYValue });
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _src = require("../../../d3-scale/src");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
+var _BpkBarchartBar = _interopRequireDefault(require("./BpkBarchartBar"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["BarComponent", "data", "getBarLabel", "getBarSelection", "height", "innerPadding", "margin", "maxYValue", "onBarClick", "onBarFocus", "onBarHover", "outerPadding", "xScale", "xScaleDataKey", "yScale", "yScaleDataKey"];
+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 borderRadius = (0, _utils.remToPx)(_base.borderRadiusXs);
+const getYPos = (point, {
+  maxYValue,
+  yScale,
+  yScaleDataKey
+}) => yScale(Math.min(point[yScaleDataKey], maxYValue));
+const getBarHeight = (point, {
+  height,
+  margin,
+  maxYValue,
+  yScale,
+  yScaleDataKey
+}) => {
+  const barHeight = height - margin.top - margin.bottom - getYPos(point, {
+    yScale,
+    yScaleDataKey,
+    maxYValue
+  });
   return Math.max(barHeight, 0);
 };
-
-const isOutlier = (point, { maxYValue, yScaleDataKey }) =>
-  point[yScaleDataKey] > maxYValue;
-
-type Props = {
-  data: Array<any>, // We pass any here as the array can contain free form data depending on the user
-  xScaleDataKey: string,
-  yScaleDataKey: string,
-  height: number,
-  xScale: typeof scaleBand,
-  yScale: typeof scaleLinear,
-  maxYValue: number,
-  margin: {
-    top: number,
-    bottom: number,
-    left: number,
-    right: number,
-  },
-  getBarLabel: (any, string, string) => mixed,
-  BarComponent: typeof BpkBarchartBar,
-  getBarSelection: (any: any) => mixed,
-  outerPadding: number,
-  innerPadding: number,
-  onBarClick: ?(e: SyntheticEvent<any>, Object) => mixed,
-  onBarHover: ?(e: SyntheticEvent<any>, Object) => mixed,
-  onBarFocus: ?(e: SyntheticEvent<any>, Object) => mixed,
-};
-
-const BpkBarchartBars = (props: Props) => {
+const isOutlier = (point, {
+  maxYValue,
+  yScaleDataKey
+}) => point[yScaleDataKey] > maxYValue;
+const BpkBarchartBars = props => {
   const {
-    BarComponent,
-    data,
-    getBarLabel,
-    getBarSelection,
-    height,
-    innerPadding,
-    margin,
-    maxYValue,
-    onBarClick,
-    onBarFocus,
-    onBarHover,
-    outerPadding,
-    xScale,
-    xScaleDataKey,
-    yScale,
-    yScaleDataKey,
-    ...rest
-  } = props;
-
+      BarComponent,
+      data,
+      getBarLabel,
+      getBarSelection,
+      height,
+      innerPadding,
+      margin,
+      maxYValue,
+      onBarClick,
+      onBarFocus,
+      onBarHover,
+      outerPadding,
+      xScale,
+      xScaleDataKey,
+      yScale,
+      yScaleDataKey
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   xScale.paddingOuter(outerPadding);
   // `innerPadding` is not set on the scale, but instead passed to the BarComponent
   // This allows us to have full-width tappable areas, but with visibly padded bars.
   xScale.paddingInner(0);
-
   const barWidth = xScale.bandwidth();
-
-  return (
-    <g>
-      {data.map((point, i) => {
-        const x = xScale(point[xScaleDataKey]);
-        const y = getYPos(point, { yScale, yScaleDataKey, maxYValue });
-        const outlier = isOutlier(point, props);
-        const barHeight = getBarHeight(point, props);
-        return (
-          // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-          <BarComponent
-            key={`bar${i.toString()}`}
-            x={x}
-            y={outlier ? y - borderRadius : y}
-            width={barWidth}
-            height={outlier ? barHeight + borderRadius : barHeight}
-            label={getBarLabel(point, xScaleDataKey, yScaleDataKey)}
-            outlier={isOutlier(point, props)}
-            onClick={onBarClick ? (e) => onBarClick(e, { point }) : null}
-            onHover={onBarHover ? (e) => onBarHover(e, { point }) : null}
-            onFocus={onBarFocus ? (e) => onBarFocus(e, { point }) : null}
-            selected={getBarSelection(point)}
-            padding={innerPadding}
-            {...rest}
-          />
-        );
-      })}
-    </g>
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: data.map((point, i) => {
+      const x = xScale(point[xScaleDataKey]);
+      const y = getYPos(point, {
+        yScale,
+        yScaleDataKey,
+        maxYValue
+      });
+      const outlier = isOutlier(point, props);
+      const barHeight = getBarHeight(point, props);
+      return (
+        /*#__PURE__*/
+        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+        (0, _jsxRuntime.jsx)(BarComponent, _objectSpread({
+          x: x,
+          y: outlier ? y - borderRadius : y,
+          width: barWidth,
+          height: outlier ? barHeight + borderRadius : barHeight,
+          label: getBarLabel(point, xScaleDataKey, yScaleDataKey),
+          outlier: isOutlier(point, props),
+          onClick: onBarClick ? e => onBarClick(e, {
+            point
+          }) : null,
+          onHover: onBarHover ? e => onBarHover(e, {
+            point
+          }) : null,
+          onFocus: onBarFocus ? e => onBarFocus(e, {
+            point
+          }) : null,
+          selected: getBarSelection(point),
+          padding: innerPadding
+        }, rest), `bar${i.toString()}`)
+      );
+    })
+  });
 };
-
 BpkBarchartBars.propTypes = {
-  data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-  xScaleDataKey: PropTypes.string.isRequired,
-  yScaleDataKey: PropTypes.string.isRequired,
-  height: PropTypes.number.isRequired,
-  xScale: PropTypes.func.isRequired,
-  yScale: PropTypes.func.isRequired,
-  maxYValue: PropTypes.number.isRequired,
-  margin: PropTypes.shape({
-    top: PropTypes.number,
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
+  data: _propTypes.default.array.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  xScaleDataKey: _propTypes.default.string.isRequired,
+  yScaleDataKey: _propTypes.default.string.isRequired,
+  height: _propTypes.default.number.isRequired,
+  xScale: _propTypes.default.func.isRequired,
+  yScale: _propTypes.default.func.isRequired,
+  maxYValue: _propTypes.default.number.isRequired,
+  margin: _propTypes.default.shape({
+    top: _propTypes.default.number,
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number
   }).isRequired,
-  getBarLabel: PropTypes.func.isRequired,
-  BarComponent: PropTypes.elementType.isRequired,
-
-  getBarSelection: PropTypes.func,
-  outerPadding: PropTypes.number,
-  innerPadding: PropTypes.number,
-  onBarClick: PropTypes.func,
-  onBarHover: PropTypes.func,
-  onBarFocus: PropTypes.func,
+  getBarLabel: _propTypes.default.func.isRequired,
+  BarComponent: _propTypes.default.elementType.isRequired,
+  getBarSelection: _propTypes.default.func,
+  outerPadding: _propTypes.default.number,
+  innerPadding: _propTypes.default.number,
+  onBarClick: _propTypes.default.func,
+  onBarHover: _propTypes.default.func,
+  onBarFocus: _propTypes.default.func
 };
-
 BpkBarchartBars.defaultProps = {
   outerPadding: 0.35,
   innerPadding: 0.35,
   onBarClick: null,
   onBarHover: null,
   onBarFocus: null,
-  getBarSelection: () => false,
+  getBarSelection: () => false
 };
-
-export default BpkBarchartBars;
+var _default = BpkBarchartBars;
+exports.default = _default;

package/bpk-component-barchart/src/BpkBarchartDefs.js

@@ -1,3 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,33 +26,35 @@
  * 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 */
-
-const GRADIENT_ATTRIBUTES = {
+ */const GRADIENT_ATTRIBUTES = {
   x1: 0,
   y1: 0,
   x2: 0,
-  y2: 1,
+  y2: 1
 };
-
-const BpkBarchartDefs = () => (
-  <defs>
-    <linearGradient id="bpk-barchart__def-gradient" {...GRADIENT_ATTRIBUTES}>
-      <stop offset="0" stopColor="white" stopOpacity="0" />
-      <stop offset="10%" stopColor="white" stopOpacity="1" />
-    </linearGradient>
-    <mask id="bpk-barchart__def-mask">
-      <rect
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        fill="url(#bpk-barchart__def-gradient)"
-      />
-    </mask>
-  </defs>
-);
-
-export default BpkBarchartDefs;
+const BpkBarchartDefs = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", _objectSpread(_objectSpread({
+    id: "bpk-barchart__def-gradient"
+  }, GRADIENT_ATTRIBUTES), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+      offset: "0",
+      stopColor: "white",
+      stopOpacity: "0"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+      offset: "10%",
+      stopColor: "white",
+      stopOpacity: "1"
+    })]
+  })), /*#__PURE__*/(0, _jsxRuntime.jsx)("mask", {
+    id: "bpk-barchart__def-mask",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      fill: "url(#bpk-barchart__def-gradient)"
+    })
+  })]
+});
+var _default = BpkBarchartDefs;
+exports.default = _default;