@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

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

@@ -1,165 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @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;
-
-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 {
-    BarComponent,
-    data,
-    getBarLabel,
-    getBarSelection,
-    height,
-    innerPadding,
-    margin,
-    maxYValue,
-    onBarClick,
-    onBarFocus,
-    onBarHover,
-    outerPadding,
-    xScale,
-    xScaleDataKey,
-    yScale,
-    yScaleDataKey,
-    ...rest
-  } = props;
-
-  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>
-  );
-};
-
-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,
-  }).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,
-};
-
-BpkBarchartBars.defaultProps = {
-  outerPadding: 0.35,
-  innerPadding: 0.35,
-  onBarClick: null,
-  onBarHover: null,
-  onBarFocus: null,
-  getBarSelection: () => false,
-};
-
-export default BpkBarchartBars;

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

@@ -1,48 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import React from 'react';
-
-const GRADIENT_ATTRIBUTES = {
-  x1: 0,
-  y1: 0,
-  x2: 0,
-  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;

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

@@ -1,186 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import React, { type Node } from 'react';
-import PropTypes from 'prop-types';
-import {
-  spacingXs,
-  lineHeightSm,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import { rtlConditionalValue } from './RTLtransforms';
-import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
-import { identity, center, remToPx } from './utils';
-import STYLES from './BpkChartAxis.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const spacing = remToPx(spacingXs);
-const lineHeight = remToPx(lineHeightSm);
-
-const getAxisConfig = ({ height, margin, orientation, scale, width }) => {
-  const position = (scale.bandwidth ? center : identity)(scale.copy());
-
-  if (orientation === ORIENTATION_X) {
-    return {
-      containerProps: {
-        textAnchor: 'middle',
-        transform: `translate(0, ${height - margin.bottom - margin.top})`,
-      },
-      textProps: {
-        y: lineHeight,
-        x: 0,
-      },
-      labelProps: {
-        x: (width - margin.left - margin.right) / 2,
-        y: margin.bottom - spacing,
-      },
-      tickPosition: (tick) => [position(tick), 0],
-    };
-  }
-
-  const containerTranslateX = rtlConditionalValue(0, width - margin.right);
-  const labelTranslateX = rtlConditionalValue(
-    lineHeight - margin.left,
-    margin.right - spacing,
-  );
-  const labelTranslateY = (height - margin.top - margin.bottom) / 2;
-
-  return {
-    containerProps: {
-      textAnchor: 'end',
-      transform: `translate(${containerTranslateX}, 0)`,
-    },
-    textProps: {
-      y: 0,
-      x: rtlConditionalValue(-1, 1) * spacing,
-      dy: '0.32em',
-    },
-    labelProps: {
-      transform: `translate(${labelTranslateX}, ${labelTranslateY}) rotate(-90)`,
-    },
-    tickPosition: (tick) => [0, position(tick)],
-  };
-};
-
-type Props = {
-  height: number,
-  width: number,
-  margin: {
-    top: number,
-    bottom: number,
-    left: number,
-    right: number,
-  },
-  scale: Object,
-  label: ?Node,
-  orientation: string,
-  tickValue: (any, any) => any,
-  numTicks: ?number,
-  tickOffset: number,
-  tickEvery: number,
-};
-
-const BpkChartAxis = (props: Props) => {
-  const {
-    height,
-    label,
-    margin,
-    numTicks,
-    orientation,
-    scale,
-    tickEvery,
-    tickOffset,
-    tickValue,
-    width,
-    ...rest
-  } = props;
-
-  const { containerProps, labelProps, textProps, tickPosition } =
-    getAxisConfig(props);
-
-  const ticks = scale.ticks
-    ? scale.ticks(numTicks)
-    : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
-
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <g
-      className={getClassName('bpk-chart__axis')}
-      aria-hidden="true"
-      {...containerProps}
-      {...rest}
-    >
-      {ticks.map((tick, i) => (
-        <g
-          transform={`translate(${tickPosition(tick).join(', ')})`}
-          key={`${orientation}axis${i.toString()}`}
-        >
-          <text
-            className={getClassName('bpk-chart__axis-tick-text')}
-            {...textProps}
-          >
-            {tickValue(tick, i)}
-          </text>
-        </g>
-      ))}
-      {label && (
-        <text
-          className={getClassName('bpk-chart__axis-label')}
-          textAnchor="middle"
-          {...labelProps}
-        >
-          {label}
-        </text>
-      )}
-    </g>
-  );
-};
-
-BpkChartAxis.propTypes = {
-  height: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  margin: PropTypes.shape({
-    top: PropTypes.number,
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-  }).isRequired,
-  scale: PropTypes.func.isRequired,
-  label: PropTypes.node,
-
-  orientation: PropTypes.oneOf([ORIENTATION_X, ORIENTATION_Y]).isRequired,
-  tickValue: PropTypes.func,
-  numTicks: PropTypes.number,
-  tickOffset: PropTypes.number,
-  tickEvery: PropTypes.number,
-};
-
-BpkChartAxis.defaultProps = {
-  tickOffset: 0,
-  tickEvery: 1,
-  tickValue: identity,
-  numTicks: null,
-  label: null,
-};
-
-export default BpkChartAxis;

package/bpk-component-barchart/src/BpkChartAxis.module.css

@@ -1,18 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- * 
- * Copyright 2016 Skyscanner Ltd
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chart__axis-tick-text{fill:#68697f;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-chart__axis-label{fill:#68697f;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}

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

@@ -1,37 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '~bpk-mixins/index';
-
-.bpk-chart {
-  &__axis-tick {
-    &-text {
-      fill: $bpk-color-sky-gray-tint-02;
-
-      @include bpk-text;
-      @include bpk-caption;
-    }
-  }
-
-  &__axis-label {
-    fill: $bpk-color-sky-gray-tint-02;
-
-    @include bpk-text;
-    @include bpk-caption;
-  }
-}

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

@@ -1,77 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import dataProp from './customPropTypes';
-import STYLES from './BpkChartDataTable.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-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,
-  xAxisLabel: string,
-  yAxisLabel: string,
-};
-
-const BpkChartDataTable = (props: Props) => {
-  const { data, xAxisLabel, xScaleDataKey, yAxisLabel, yScaleDataKey } = props;
-  const rows = data.map((point, i) => {
-    const key = `chart-data-table-row-${i}`;
-
-    return (
-      <tr key={key}>
-        <td>{point[xScaleDataKey]}</td>
-        <td>{point[yScaleDataKey]}</td>
-      </tr>
-    );
-  });
-
-  return (
-    <table className={getClassName('bpk-chart-data-table')}>
-      <thead>
-        <tr>
-          <th>{xAxisLabel}</th>
-          <th>{yAxisLabel}</th>
-        </tr>
-      </thead>
-      <tbody>{rows}</tbody>
-    </table>
-  );
-};
-
-BpkChartDataTable.propTypes = {
-  data: dataProp, // This is actually required and will fail if not present
-  xScaleDataKey: PropTypes.string.isRequired,
-  yScaleDataKey: PropTypes.string.isRequired,
-  xAxisLabel: PropTypes.string.isRequired,
-  yAxisLabel: PropTypes.string.isRequired,
-};
-
-BpkChartDataTable.defaultProps = {
-  data: null,
-};
-
-export default BpkChartDataTable;

package/bpk-component-barchart/src/BpkChartDataTable.module.css

@@ -1,18 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- * 
- * Copyright 2016 Skyscanner Ltd
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chart-data-table{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-chart-data-table thead,.bpk-chart-data-table tbody{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}

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

@@ -1,28 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '~bpk-mixins/index';
-
-.bpk-chart-data-table {
-  @include bpk-visually-hidden;
-
-  thead,
-  tbody {
-    @include bpk-visually-hidden;
-  }
-}

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

@@ -1,119 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
-import { identity, center } from './utils';
-import STYLES from './BpkChartGridLines.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  width: number,
-  height: number,
-  margin: {
-    top: number,
-    bottom: number,
-    left: number,
-    right: number,
-  },
-  scale: Object,
-  orientation: string,
-  numTicks: ?number,
-  tickOffset: number,
-  tickEvery: number,
-};
-
-const BpkChartGridLines = (props: Props) => {
-  const {
-    height,
-    margin,
-    numTicks,
-    orientation,
-    scale,
-    tickEvery,
-    tickOffset,
-    width,
-    ...rest
-  } = props;
-
-  const ticks = scale.ticks
-    ? scale.ticks(numTicks)
-    : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
-  const position = (scale.bandwidth ? center : identity)(scale.copy());
-
-  const lineProps = (tick) => {
-    const value = position(tick);
-    return orientation === ORIENTATION_X
-      ? {
-          x1: value,
-          x2: value,
-          y2: height - margin.top - margin.bottom,
-        }
-      : {
-          x2: width - margin.left - margin.right,
-          y1: value,
-          y2: value,
-        };
-  };
-
-  const toLine = (tick, i) => (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <line
-      className={getClassName('bpk-chart__grid-line')}
-      key={`${orientation}gridline${i.toString()}`}
-      {...lineProps(tick)}
-      {...rest}
-    />
-  );
-
-  return (
-    <g className={getClassName('bpk-chart__grid-lines')}>{ticks.map(toLine)}</g>
-  );
-};
-
-BpkChartGridLines.propTypes = {
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  margin: PropTypes.shape({
-    top: PropTypes.number,
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-  }).isRequired,
-
-  scale: PropTypes.func.isRequired,
-  orientation: PropTypes.oneOf([ORIENTATION_X, ORIENTATION_Y]).isRequired,
-  numTicks: PropTypes.number,
-  tickOffset: PropTypes.number,
-  tickEvery: PropTypes.number,
-};
-
-BpkChartGridLines.defaultProps = {
-  numTicks: null,
-  tickOffset: 0,
-  tickEvery: 1,
-};
-
-export default BpkChartGridLines;