@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0

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

@@ -1,48 +1,64 @@
-"use strict";
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import React from 'react';
+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);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
-var _utils = require("./utils");
-
-var _BpkBarchartBarModule = _interopRequireDefault(require("./BpkBarchartBar.css"));
-
-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 _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)(_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 = (0, _utils.remToPx)(_base.borderRadiusXs);
+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 => {
+const BpkBarchartBar = (props: Props) => {
   const {
     className,
     height,
@@ -55,59 +71,76 @@ const BpkBarchartBar = props => {
     selected,
     width,
     x,
-    y
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+    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',
+  );
 
-  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 /*#__PURE__*/_react.default.createElement("g", {
-    className: classNames,
-    transform: `translate(${x}, ${y})`
-  }, /*#__PURE__*/_react.default.createElement("rect", _extends({
-    className: rectClassNames,
-    x: rectPadding,
-    y: 0,
-    width: rectWidth,
-    height: height,
-    rx: borderRadius,
-    ry: borderRadius
-  }, rest)), /*#__PURE__*/_react.default.createElement("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
-  }));
+
+  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>
+  );
 };
 
 BpkBarchartBar.propTypes = {
-  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
+  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,
 };
+
 BpkBarchartBar.defaultProps = {
   className: null,
   onClick: null,
@@ -115,7 +148,7 @@ BpkBarchartBar.defaultProps = {
   onFocus: null,
   outlier: false,
   padding: 0,
-  selected: false
+  selected: false,
 };
-var _default = BpkBarchartBar;
-exports.default = _default;
+
+export default BpkBarchartBar;

package/bpk-component-barchart/src/BpkBarchartBar.module.scss

@@ -0,0 +1,68 @@
+/*
+ * 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-barchart-bar {
+  @include bpk-themeable-property(
+    fill,
+    --bpk-barchart-bar-background-color,
+    $bpk-color-sky-blue-tint-01
+  );
+
+  &--interactive:not(.bpk-barchart-bar--selected) {
+    cursor: pointer;
+
+    @include bpk-hover {
+      @include bpk-themeable-property(
+        fill,
+        --bpk-barchart-bar-hover-background-color,
+        $bpk-color-sky-blue
+      );
+    }
+
+    &:active {
+      @include bpk-themeable-property(
+        fill,
+        --bpk-barchart-bar-active-background-color,
+        $bpk-color-sky-blue-shade-01
+      );
+    }
+  }
+
+  &--selected {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-barchart-bar-selected-background-color,
+      $bpk-color-sky-blue-shade-01
+    );
+  }
+
+  &__rect {
+    fill: inherit;
+    shape-rendering: auto;
+
+    &--outlier {
+      mask: url(#bpk-barchart__def-mask);
+    }
+  }
+
+  &__tappable-area {
+    fill: transparent;
+  }
+}

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

@@ -1,61 +1,76 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _d3Scale = require("d3-scale");
-
-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");
-
-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 _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 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
-  });
+/*
+ * 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 from 'react';
+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 });
   return Math.max(barHeight, 0);
 };
 
-const isOutlier = (point, {
-  maxYValue,
-  yScaleDataKey
-}) => point[yScaleDataKey] > maxYValue;
+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 => {
+const BpkBarchartBars = (props: Props) => {
   const {
     BarComponent,
     data,
@@ -72,82 +87,79 @@ const BpkBarchartBars = props => {
     xScale,
     xScaleDataKey,
     yScale,
-    yScaleDataKey
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+    yScaleDataKey,
+    ...rest
+  } = props;
 
-  xScale.paddingOuter(outerPadding); // `innerPadding` is not set on the scale, but instead passed to the BarComponent
+  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 /*#__PURE__*/_react.default.createElement("g", null, 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'.
-      _react.default.createElement(BarComponent, _extends({
-        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))
-    );
-  }));
+
+  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>
+  );
 };
 
 BpkBarchartBars.propTypes = {
-  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
+  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,
   }).isRequired,
-  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
+  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,
 };
+
 BpkBarchartBars.defaultProps = {
   outerPadding: 0.35,
   innerPadding: 0.35,
   onBarClick: null,
   onBarHover: null,
   onBarFocus: null,
-  getBarSelection: () => false
+  getBarSelection: () => false,
 };
-var _default = BpkBarchartBars;
-exports.default = _default;
+
+export default BpkBarchartBars;

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

@@ -1,42 +1,48 @@
-"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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+/* @flow strict */
 
-var _react = _interopRequireDefault(require("react"));
-
-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); }
+import React from 'react';
 
 const GRADIENT_ATTRIBUTES = {
   x1: 0,
   y1: 0,
   x2: 0,
-  y2: 1
+  y2: 1,
 };
 
-const BpkBarchartDefs = () => /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", _extends({
-  id: "bpk-barchart__def-gradient"
-}, GRADIENT_ATTRIBUTES), /*#__PURE__*/_react.default.createElement("stop", {
-  offset: "0",
-  stopColor: "white",
-  stopOpacity: "0"
-}), /*#__PURE__*/_react.default.createElement("stop", {
-  offset: "10%",
-  stopColor: "white",
-  stopOpacity: "1"
-})), /*#__PURE__*/_react.default.createElement("mask", {
-  id: "bpk-barchart__def-mask"
-}, /*#__PURE__*/_react.default.createElement("rect", {
-  x: "0",
-  y: "0",
-  width: "100%",
-  height: "100%",
-  fill: "url(#bpk-barchart__def-gradient)"
-})));
+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>
+);
 
-var _default = BpkBarchartDefs;
-exports.default = _default;
+export default BpkBarchartDefs;