@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-banner-alert/examples.js

@@ -1,253 +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, { Component } from 'react';
-import { action } from 'bpk-storybook-utils';
-import { fontWeightBold } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import CurrencyIcon from '../bpk-component-icon/sm/currency';
-import { AriaLiveDemo } from '../bpk-component-aria-live/examples';
-import { BpkButtonPrimary } from '../bpk-component-button';
-import { cssModules } from '../bpk-react-utils';
-
-import STYLES from './examples.module.scss';
-
-import BpkBannerAlert, {
-  ALERT_TYPES,
-  withBannerAlertState,
-  BpkBannerAlertDismissable,
-  BpkBannerAlertExpandable,
-} from './index';
-
-const getClassName = cssModules(STYLES);
-
-const message = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
-const longMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sagittis purus, id
-blandit ipsum. Pellentesque nec diam nec erat condimentum dapibus. Nunc diam augue, egestas id egestas ut, facilisis
-nec mi. Donec et congue odio, nec laoreet est. Integer rhoncus varius arcu, a fringilla libero laoreet at. Mauris
-porta varius ullamcorper. Sed laoreet libero mauris, non pretium lectus accumsan et. Suspendisse vehicula ullamcorper
-sapien, et dapibus mi aliquet non. Pellentesque auctor sagittis lectus vitae rhoncus. Fusce id enim porttitor, mattis
-ante in, vestibulum nulla.`;
-
-type Props = {};
-type State = {
-  dismissed: boolean,
-  updates: Array<string>,
-};
-
-class BpkBannerAlertDismissableState extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      dismissed: false,
-      updates: [],
-    };
-  }
-
-  render() {
-    return (
-      <>
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkBannerAlertDismissable
-          show={!this.state.dismissed}
-          dismissButtonLabel="Dismiss"
-          onDismiss={() => {
-            this.setState((prevState) => ({
-              dismissed: true,
-              updates: [...prevState.updates, 'Success alert dismissed'],
-            }));
-          }}
-          message="Neutral alert with dismiss option"
-          {...this.props}
-        />
-        {this.state.dismissed && (
-          <BpkButtonPrimary
-            className={getClassName('bpk-banner-alert-examples__component')}
-            onClick={() => {
-              this.setState((prevState) => ({
-                dismissed: false,
-                updates: [...prevState.updates, 'Success alert added'],
-              }));
-            }}
-          >
-            Reset
-          </BpkButtonPrimary>
-        )}
-        <AriaLiveDemo
-          visible
-          className={getClassName('bpk-banner-alert-examples__component')}
-        >
-          {this.state.updates.map((u) => (
-            <>
-              {u}
-              <br />
-            </>
-          ))}
-        </AriaLiveDemo>
-      </>
-    );
-  }
-}
-
-const BpkBannerAlertExpandableState = withBannerAlertState(
-  BpkBannerAlertExpandable,
-);
-
-const Neutral = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert
-    message="Neutral alert"
-    type={ALERT_TYPES.NEUTRAL}
-    {...props}
-  />
-);
-const Primary = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert
-    message="Primary alert"
-    type={ALERT_TYPES.PRIMARY}
-    {...props}
-  />
-);
-const Success = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert
-    message="Success alert"
-    type={ALERT_TYPES.SUCCESS}
-    {...props}
-  />
-);
-const SuccessLongMessage = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert message={longMessage} type={ALERT_TYPES.SUCCESS} {...props} />
-);
-const Dismissable = () => (
-  <BpkBannerAlertDismissable
-    dismissButtonLabel="Dismiss"
-    message="Dimissable alert"
-    type={ALERT_TYPES.SUCCESS}
-    onDismiss={action('dismissed')}
-  />
-);
-const SuccessExpandable = () => (
-  <BpkBannerAlertExpandable
-    message="Success alert"
-    type={ALERT_TYPES.SUCCESS}
-    toggleButtonLabel="View more"
-  >
-    {longMessage}
-  </BpkBannerAlertExpandable>
-);
-const SuccessAnimateOnEnter = () => (
-  <BpkBannerAlert
-    animateOnEnter
-    message={message}
-    type={ALERT_TYPES.SUCCESS}
-    onDismiss={action('dismissed')}
-  />
-);
-const SuccessWithReactRenderedMessage = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert
-    message={
-      <span style={{ fontWeight: fontWeightBold }}>
-        Successful alert with custom rendered message
-      </span>
-    }
-    type={ALERT_TYPES.SUCCESS}
-    {...props}
-  />
-);
-const Warn = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert message="Warn alert" type={ALERT_TYPES.WARN} {...props} />
-);
-const ErrorExample = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert message="Error alert" type={ALERT_TYPES.ERROR} {...props} />
-);
-const Event = (props: {}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <BpkBannerAlert message="Event alert" type={ALERT_TYPES.EVENT} {...props} />
-);
-const SuccessDismissableBehaviour = () => (
-  <BpkBannerAlertDismissableState
-    dismissButtonLabel="Dismiss"
-    message="Success alert with dismiss option"
-    type={ALERT_TYPES.SUCCESS}
-  />
-);
-const SuccessExpandableBehaviour = () => (
-  <BpkBannerAlertExpandableState
-    message="Success alert with more information"
-    type={ALERT_TYPES.SUCCESS}
-    toggleButtonLabel="View more"
-  >
-    {longMessage}
-  </BpkBannerAlertExpandableState>
-);
-const SuccessAutomaticallyDismissed = () => (
-  <BpkBannerAlertDismissableState
-    hideAfter={5}
-    message={message}
-    type={ALERT_TYPES.SUCCESS}
-    dismissButtonLabel="Dismiss"
-  />
-);
-const SuccessCustomIcon = () => (
-  <BpkBannerAlert
-    message="Success alert with custom icon"
-    type={ALERT_TYPES.SUCCESS}
-    icon={CurrencyIcon}
-  />
-);
-
-const DocsDefault = () => (
-  <>
-    <Neutral />
-    <Primary className={getClassName('bpk-banner-alert-examples__component')} />
-    <Success className={getClassName('bpk-banner-alert-examples__component')} />
-    <SuccessWithReactRenderedMessage
-      className={getClassName('bpk-banner-alert-examples__component')}
-    />
-    <Warn className={getClassName('bpk-banner-alert-examples__component')} />
-    <ErrorExample
-      className={getClassName('bpk-banner-alert-examples__component')}
-    />
-  </>
-);
-
-export {
-  Neutral,
-  Primary,
-  Success,
-  SuccessLongMessage,
-  Dismissable,
-  SuccessExpandable,
-  SuccessAnimateOnEnter,
-  SuccessWithReactRenderedMessage,
-  Warn,
-  ErrorExample,
-  Event,
-  SuccessDismissableBehaviour,
-  SuccessExpandableBehaviour,
-  SuccessAutomaticallyDismissed,
-  SuccessCustomIcon,
-  DocsDefault,
-};

package/bpk-component-banner-alert/examples.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-banner-alert-examples__component{margin-top:1rem}

package/bpk-component-barchart/examples.js

@@ -1,334 +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 { number } from 'prop-types';
-import { cssModules, withDefaultProps } from '../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../bpk-component-text';
-import { updateOnDirectionChange } from '../bpk-component-rtl-toggle';
-import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { scaleLinear, scaleBand } from 'd3-scale';
-
-import { remToPx } from './src/utils';
-import { ORIENTATION_X, ORIENTATION_Y } from './src/orientation';
-import { withSelectedState } from './hocs';
-import STYLES from './stories.module.scss';
-
-import BpkBarchart, {
-  BpkChartGridLines,
-  BpkChartAxis,
-  BpkChartMargin,
-} from './index';
-
-const getClassName = cssModules(STYLES);
-
-const Heading = withDefaultProps(BpkText, {
-  textStyle: TEXT_STYLES.subheading,
-  tagName: 'h1',
-  className: getClassName('bpk-heading'),
-});
-
-const RtlBarchart = updateOnDirectionChange(BpkBarchart);
-const SelectableBarChart = withSelectedState(RtlBarchart);
-
-const data = require('./data.json');
-
-const margin = {
-  top: 0,
-  left: 40, // eslint-disable-line backpack/use-tokens
-  bottom: 40, // eslint-disable-line backpack/use-tokens
-  right: 0,
-};
-
-const Gridlines = ({ size, ...rest }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size}>
-    <BpkChartMargin margin={margin}>
-      <BpkChartAxis
-        orientation={ORIENTATION_X}
-        height={size}
-        width={size}
-        margin={margin}
-        {...rest}
-      />
-      <BpkChartAxis
-        orientation={ORIENTATION_Y}
-        width={size}
-        height={size}
-        margin={margin}
-        {...rest}
-      />
-      <BpkChartGridLines
-        orientation={ORIENTATION_X}
-        width={size}
-        height={size}
-        margin={margin}
-        {...rest}
-      />
-      <BpkChartGridLines
-        orientation={ORIENTATION_Y}
-        width={size}
-        height={size}
-        margin={margin}
-        {...rest}
-      />
-    </BpkChartMargin>
-  </svg>
-);
-
-Gridlines.propTypes = { size: number.isRequired };
-
-const AxesAndGridlines = () => {
-  const dataset = [
-    [5, 20],
-    [480, 90],
-    [250, 50],
-    [100, 33],
-    [330, 95],
-    [410, 12],
-    [475, 44],
-    [25, 67],
-    [85, 21],
-    [220, 88],
-  ];
-  const size = 440;
-  const scale = scaleLinear()
-    .domain([5, 480])
-    .range([0, size - 40]);
-  const scale2 = scaleBand()
-    .domain(dataset.map((d) => d[0]))
-    .range([0, size - 40]);
-
-  return (
-    <div>
-      <Heading>Linear scale</Heading>
-      <Gridlines scale={scale} size={size} />
-      <Gridlines scale={scale} size={size} numTicks={2} />
-      <Heading>Band scale</Heading>
-      <Gridlines scale={scale2} size={size} />
-      <Gridlines scale={scale2} size={size} tickEvery={2} />
-      <Gridlines scale={scale2} size={size} tickEvery={2} tickOffset={1} />
-    </div>
-  );
-};
-
-const DefaultExample = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-      minWidth: '400px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-  />
-);
-
-const CustomScrollColors = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-      minWidth: '400px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-    className={getClassName('bpk-barchart-custom-scrollers')}
-    leadingScrollIndicatorClassName={getClassName(
-      'bpk-barchart-custom-scrollers--leading',
-    )}
-    trailingScrollIndicatorClassName={getClassName(
-      'bpk-barchart-custom-scrollers--trailing',
-    )}
-  />
-);
-
-const DefaultDisabledDataTable = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-      minWidth: '400px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-    disableDataTable
-  />
-);
-
-const Interactive = () => (
-  <SelectableBarChart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-      minWidth: '400px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-  />
-);
-
-const Outliers = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices2}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-    outlierPercentage={25}
-  />
-);
-
-const CustomTicks = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-    yAxisNumTicks={3}
-    xAxisTickEvery={2}
-    xAxisTickOffset={1}
-  />
-);
-
-const CustomTickLabels = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-    }}
-    xAxisLabel="Month"
-    xAxisMargin={3 * remToPx(lineHeightSm) + 12}
-    xAxisTickValue={(tick) => {
-      let season = '❄️';
-      if (['Mar', 'Apr', 'May'].indexOf(tick) > -1) {
-        season = '🌻';
-      }
-      if (['Jun', 'Jul', 'Aug'].indexOf(tick) > -1) {
-        season = '☀️';
-      }
-      if (['Sep', 'Oct', 'Nov'].indexOf(tick) > -1) {
-        season = '🍁';
-      }
-      return [
-        <tspan x="0" dy="0" style={{ fontWeight: 'bold' }} key="month">
-          {tick}
-        </tspan>,
-        <tspan x="0" dy={remToPx(lineHeightSm)} key="season">
-          {season}
-        </tspan>,
-        <tspan key="ltr">&lrm;</tspan>,
-      ];
-    }}
-    yAxisLabel="Average Price"
-    yAxisMargin={4 * remToPx(lineHeightSm)}
-    yAxisTickValue={(v) => `£${v}`}
-  />
-);
-
-const GridlinesExample = () => (
-  <RtlBarchart
-    initialWidth={500}
-    initialHeight={300}
-    data={data.prices}
-    xScaleDataKey="month"
-    yScaleDataKey="price"
-    style={{
-      maxWidth: '580px',
-    }}
-    xAxisLabel="Month"
-    yAxisLabel="Average Price (£)"
-    showGridlines
-  />
-);
-
-const CustomYAxisDomain = () => (
-  <div>
-    <Heading>Domain (0 - 800)</Heading>
-    <RtlBarchart
-      initialWidth={500}
-      initialHeight={300}
-      data={data.prices}
-      xScaleDataKey="month"
-      yScaleDataKey="price"
-      style={{
-        maxWidth: '580px',
-      }}
-      showGridlines
-      yAxisDomain={[0, 800]}
-    />
-    <Heading>Domain (300 - null)</Heading>
-    <RtlBarchart
-      initialWidth={500}
-      initialHeight={300}
-      data={data.prices}
-      xScaleDataKey="month"
-      yScaleDataKey="price"
-      style={{
-        maxWidth: '580px',
-      }}
-      showGridlines
-      yAxisDomain={[300, null]}
-    />
-  </div>
-);
-
-export {
-  AxesAndGridlines,
-  DefaultExample,
-  CustomScrollColors,
-  DefaultDisabledDataTable,
-  Interactive,
-  Outliers,
-  CustomTicks,
-  CustomTickLabels,
-  GridlinesExample,
-  CustomYAxisDomain,
-};

package/bpk-component-barchart/hocs.js

@@ -1,67 +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 isEqual from 'lodash/isEqual';
-import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from '../bpk-react-utils';
-
-// eslint-disable-next-line import/prefer-default-export
-export const withSelectedState = (ComposedComponent: ComponentType<any>) => {
-  type State = {
-    selectedPoint: ?number,
-  };
-  class WithSelectedState extends Component<{}, State> {
-    constructor() {
-      super();
-
-      this.state = {
-        selectedPoint: null,
-      };
-    }
-
-    onBarClick = (e: SyntheticEvent<any>, { point }: { point: number }) => {
-      this.setState({
-        selectedPoint: point,
-      });
-    };
-
-    getBarSelection = (point: number) =>
-      isEqual(this.state.selectedPoint, point);
-
-    render() {
-      const { ...rest } = this.props;
-
-      return (
-        <ComposedComponent
-          {...rest}
-          onBarClick={this.onBarClick}
-          getBarSelection={this.getBarSelection}
-        />
-      );
-    }
-  }
-
-  WithSelectedState.displayName = wrapDisplayName(
-    ComposedComponent,
-    'withSelectedState',
-  );
-
-  return WithSelectedState;
-};

package/bpk-component-barchart/stories.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-heading{margin-bottom:.75rem}.bpk-barchart-custom-scrollers{background:#d0eeec}.bpk-barchart-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #d0eeec, rgba(208,238,236,0));pointer-events:none;left:0}.bpk-barchart-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #d0eeec, rgba(208,238,236,0));pointer-events:none;right:0}