@skyscanner/backpack-web 0.0.4 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,11 +22,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
     "@skyscanner/popper.js": "^1.12.9-beta.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^26.1.0",
+    "bpk-mixins": "^28.1.0",
     "date-fns": "^2.21.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
@@ -41,8 +41,7 @@
     "react-responsive": "^6.1.2",
     "react-slider": "^1.3.1",
     "react-transition-group": "^2.5.3",
-    "react-virtualized": "^9.22.3",
-    "recompose": "^0.30.0"
+    "react-virtualized": "^9.22.3"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-animate-height/examples.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 BpkButton from '../../bpk-component-button';
-import React, { Component, type Node } from 'react';
-
-import AnimateHeight from './index';
-
-type Props = {
-  fromHeight: string | number,
-  toHeight: string | number,
-  buttonText: Node,
-};
-type State = {
-  height: string | number,
-};
-
-class AnimateHeightExample extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      height: this.props.fromHeight,
-    };
-  }
-
-  onClick = () => {
-    this.setState((prevState) => {
-      const height =
-        prevState.height !== this.props.fromHeight
-          ? this.props.fromHeight
-          : this.props.toHeight;
-
-      return { height };
-    });
-  };
-
-  render() {
-    const { buttonText, fromHeight, toHeight, ...rest } = this.props;
-    return (
-      <div>
-        <AnimateHeight {...rest} height={this.state.height} />
-        <br />
-        <BpkButton onClick={this.onClick}>{buttonText}</BpkButton>
-      </div>
-    );
-  }
-}
-
-export default AnimateHeightExample;

package/bpk-component-accordion/examples.js

@@ -1,316 +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 BpkCheckbox from '../../bpk-component-checkbox';
-import { withAlignment } from '../../bpk-component-icon';
-import StopsIcon from '../../bpk-component-icon/sm/stops';
-import TimeIcon from '../../bpk-component-icon/sm/time';
-import {
-  colorMonteverde,
-  colorPanjin,
-  iconSizeSm,
-  lineHeightBase,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-import {
-  BpkAccordion,
-  withSingleItemAccordionState,
-  BpkAccordionItem,
-  withAccordionItemState,
-} from './index';
-
-const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
-const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
-
-const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
-const AlignedTimeIcon = withAlignment(TimeIcon, lineHeightBase, iconSizeSm);
-
-const CheckboxWrapper = (props) => (
-  <div style={{ padding: `1rem 0` }} {...props} />
-);
-
-const StopsContent = () => (
-  <form>
-    <CheckboxWrapper>
-      <BpkCheckbox name="direct" label="Direct" onChange={() => null} checked />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox name="1-stop" label="1 stop" onChange={() => null} checked />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="2-plus-stops"
-        label="2+ stops"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-  </form>
-);
-
-const AirlinesContent = () => (
-  <form>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="air-france"
-        label="Air France"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="alitalia"
-        label="Alitalia"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="bmi-regional"
-        label="BMI regional"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="british-airways"
-        label="British Airways"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="easyjet"
-        label="Easyjet"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-  </form>
-);
-
-const AirportsContent = () => (
-  <form>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="lcy"
-        label="London City"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="LGW"
-        label="London Gatwick"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="lhr"
-        label="London Heathrow"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="ltn"
-        label="London Luton"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-    <CheckboxWrapper>
-      <BpkCheckbox
-        name="stn"
-        label="London Stansted"
-        onChange={() => null}
-        checked
-      />
-    </CheckboxWrapper>
-  </form>
-);
-
-const SingleItemExample = () => (
-  <SingleItemAccordion>
-    <BpkAccordionItem id="stops" title="Stops" initiallyExpanded>
-      <StopsContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="airlines" title="Airlines">
-      <AirlinesContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="airports" title="Airports">
-      <AirportsContent />
-    </BpkAccordionItem>
-  </SingleItemAccordion>
-);
-
-const SingleItemExampleInitiallyExpanded = () => (
-  <SingleItemAccordion>
-    <BpkAccordionItem id="stops" title="Stops">
-      <StopsContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem
-      id="departure-times"
-      title="Departure times"
-      initiallyExpanded
-    >
-      <AirlinesContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="journey-duration" title="Journey duration">
-      <AirportsContent />
-    </BpkAccordionItem>
-  </SingleItemAccordion>
-);
-
-const MultipleItemsOpenExample = () => (
-  <BpkAccordion>
-    <StatefulAccordionItem id="stops" title="Stops" initiallyExpanded>
-      <StopsContent />
-    </StatefulAccordionItem>
-    <StatefulAccordionItem
-      id="departure-times"
-      title="Departure times"
-      initiallyExpanded
-    >
-      <AirlinesContent />
-    </StatefulAccordionItem>
-    <StatefulAccordionItem
-      id="journey-duration"
-      title="Journey duration"
-      initiallyExpanded
-    >
-      <AirportsContent />
-    </StatefulAccordionItem>
-  </BpkAccordion>
-);
-
-const MultipleItemsOpenInitiallyExpandedExample = () => (
-  <BpkAccordion>
-    <StatefulAccordionItem id="stops" title="Stops">
-      <StopsContent />
-    </StatefulAccordionItem>
-    <StatefulAccordionItem
-      id="departure-times"
-      title="Departure times"
-      initiallyExpanded
-    >
-      <AirlinesContent />
-    </StatefulAccordionItem>
-    <StatefulAccordionItem
-      id="journey-duration"
-      title="Journey duration"
-      initiallyExpanded
-    >
-      <AirportsContent />
-    </StatefulAccordionItem>
-  </BpkAccordion>
-);
-
-const CustomExample = () => (
-  <BpkAccordion>
-    <BpkAccordionItem id="stops" title="Stops" tagName="h3" expanded>
-      <StopsContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="departure-times" title="Departure times" tagName="h2">
-      <AirlinesContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="journey-duration" title="Journey duration" expanded>
-      <AirportsContent />
-    </BpkAccordionItem>
-  </BpkAccordion>
-);
-
-const CustomTitleTextStyleExample = () => (
-  <SingleItemAccordion>
-    <BpkAccordionItem textStyle="lg" id="stops" title="Stops" initiallyExpanded>
-      <StopsContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem textStyle="lg" id="airlines" title="Airlines">
-      <AirlinesContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem textStyle="lg" id="airports" title="Airports">
-      <AirportsContent />
-    </BpkAccordionItem>
-  </SingleItemAccordion>
-);
-
-const WithIconsExample = () => (
-  <BpkAccordion>
-    <BpkAccordionItem
-      id="stops"
-      title="Stops"
-      tagName="h3"
-      expanded
-      icon={<AlignedStopsIcon fill={colorPanjin} />}
-    >
-      <StopsContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem
-      id="departure-times"
-      title="Departure times"
-      tagName="h2"
-      icon={<AlignedTimeIcon fill={colorMonteverde} />}
-    >
-      <AirlinesContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="journey-duration" title="Journey duration" expanded>
-      <AirportsContent />
-    </BpkAccordionItem>
-  </BpkAccordion>
-);
-
-const WithBoldTitlesExample = () => (
-  <SingleItemAccordion>
-    <BpkAccordionItem
-      id="stops"
-      title="Stops"
-      initiallyExpanded
-      textStyle="label-1"
-    >
-      <StopsContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="airlines" title="Airlines" textStyle="heading-4">
-      <AirlinesContent />
-    </BpkAccordionItem>
-    <BpkAccordionItem id="airports" title="Airports" textStyle="heading-3">
-      <AirportsContent />
-    </BpkAccordionItem>
-  </SingleItemAccordion>
-);
-
-export {
-  SingleItemExample,
-  SingleItemExampleInitiallyExpanded,
-  MultipleItemsOpenExample,
-  MultipleItemsOpenInitiallyExpandedExample,
-  CustomExample,
-  CustomTitleTextStyleExample,
-  WithIconsExample,
-  WithBoldTitlesExample,
-};

package/bpk-component-aria-live/examples.js

@@ -1,247 +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 BpkChip from '../../bpk-component-chip';
-import BpkFieldset from '../../bpk-component-fieldset';
-import BpkSelect from '../../bpk-component-select';
-import BpkSwitch from '../../bpk-component-switch';
-import { cssModules } from '../bpk-react-utils';
-import { BpkCode } from '../../bpk-component-code';
-
-import STYLES from './examples.module.scss';
-
-import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from './index';
-
-const getClassName = cssModules(STYLES);
-
-const AriaLiveDemo = (props: {
-  preamble: ?Node,
-  children: Node,
-  className: ?string,
-  style: ?{},
-  visible: boolean,
-}) => {
-  const { children, className, preamble, style, visible, ...rest } = props;
-
-  return (
-    <div
-      className={getClassName('bpk-storybook-aria-live-demo', className)}
-      style={style}
-    >
-      <p>
-        <strong>ARIA live region:</strong>
-      </p>
-      <p>
-        {visible
-          ? 'This content is relevant to everyone, not just assistive technologies, so it is permanently visible.'
-          : 'This would usually be visually hidden, and only visible to assistive technologies. It is visible here for demo purposes.'}
-      </p>
-      {preamble}
-      <BpkAriaLive
-        {...rest}
-        visible
-        className={getClassName('bpk-storybook-aria-live-demo__aria-content')}
-        politenessSetting={ARIA_LIVE_POLITENESS_SETTINGS.assertive}
-      >
-        {children}
-      </BpkAriaLive>
-    </div>
-  );
-};
-
-AriaLiveDemo.defaultProps = {
-  preamble: null,
-  className: null,
-  visible: false,
-  style: null,
-};
-
-class SelectExample extends React.Component<
-  {},
-  { destination: string, direct: boolean },
-> {
-  constructor() {
-    super();
-    this.state = {
-      destination: 'Panjin',
-      direct: false,
-    };
-  }
-
-  onChangeDestination = (destination: string) => {
-    this.setState({ destination });
-  };
-
-  toggleDirectness = () => {
-    this.setState((prevState) => ({ direct: !prevState.direct }));
-  };
-
-  id = 'aria-live-select-example';
-
-  render() {
-    const { destination, direct } = this.state;
-    return (
-      <div>
-        <div>
-          <p>
-            Interactive component with
-            <BpkCode>aria-controls=&quot;{this.id}&quot;</BpkCode> to link it to
-            the ARIA live region below with the same ID.
-          </p>
-          <div
-            className={getClassName(
-              'bpk-storybook-aria-live-demo__select-wrapper',
-            )}
-          >
-            <BpkFieldset
-              label="Destination"
-              className={getClassName('bpk-storybook-aria-live-demo__select')}
-            >
-              <BpkSelect
-                id="destination"
-                name="destination"
-                value={destination}
-                onChange={(event) => {
-                  this.onChangeDestination(event.target.value);
-                }}
-              >
-                <option value="Abisko">Abisko</option>
-                <option value="Nara">Nara</option>
-                <option value="Panjin">Panjin</option>
-              </BpkSelect>
-            </BpkFieldset>
-            <BpkSwitch
-              className={getClassName('bpk-storybook-aria-live-demo__switch')}
-              label="Direct flights only"
-              checked={direct}
-              onChange={this.toggleDirectness}
-            />
-          </div>
-        </div>
-        <AriaLiveDemo
-          aria-atomic
-          visible
-          id={this.id}
-          className={getClassName('bpk-storybook-aria-live-demo__aria-live')}
-          preamble={
-            <p>
-              This region has <BpkCode>id=&quot;{this.id}&quot;</BpkCode>.
-              <br />
-              It also has <BpkCode>aria-atomic=&quot;true&quot;</BpkCode> to
-              instruct assistive technologies to read out everything when
-              something changes, not just the part that changed.
-            </p>
-          }
-        >
-          <p>
-            <strong>
-              Searching for {direct ? 'direct ' : ''}flights to {destination}.
-            </strong>
-          </p>
-        </AriaLiveDemo>
-      </div>
-    );
-  }
-}
-
-class ChipsExample extends React.Component<
-  {},
-  {
-    categories: { Flights: boolean, Hotels: boolean, 'Car hire': boolean },
-    updates: Array<string>,
-  },
-> {
-  constructor() {
-    super();
-    this.state = {
-      categories: {
-        Flights: true,
-        Hotels: true,
-        'Car hire': false,
-      },
-      updates: [],
-    };
-  }
-
-  id = 'aria-live-chips-example';
-
-  toggleCategory = (category: string) => {
-    this.setState((prevState) => {
-      const nextState = prevState;
-      nextState.categories[category] = !prevState.categories[category];
-      nextState.updates.push(
-        `${category} became ${nextState.categories[category] ? 'enabled' : 'disabled'
-        }.`,
-      );
-      return nextState;
-    });
-  };
-
-  render() {
-    const { categories, updates } = this.state;
-    return (
-      <div>
-        <div
-          className={getClassName(
-            'bpk-storybook-aria-live-demo__chips-wrapper',
-          )}
-        >
-          <p>
-            Interactive component with
-            <BpkCode>aria-controls=&quot;{this.id}&quot;</BpkCode> to link it to
-            the ARIA live region below with the same ID.
-          </p>
-          {Object.keys(categories).map((category) => (
-            <BpkChip
-              className={getClassName('bpk-storybook-aria-live-demo__chip')}
-              aria-controls={this.id}
-              selected={categories[category]}
-              accessibilityLabel={category}
-              onClick={() => {
-                this.toggleCategory(category);
-              }}
-            >
-              {category}
-            </BpkChip>
-          ))}
-        </div>
-        <AriaLiveDemo
-          id={this.id}
-          className={getClassName('bpk-storybook-aria-live-demo__aria-live')}
-          preamble={
-            <p>
-              This region has <BpkCode>id=&quot;{this.id}&quot;</BpkCode>.
-              <br />
-              As the above chips are toggled, updates appear here.
-            </p>
-          }
-        >
-          {updates.map((update) => (
-            <p>
-              <strong>{update}</strong>
-            </p>
-          ))}
-        </AriaLiveDemo>
-      </div>
-    );
-  }
-}
-
-export { AriaLiveDemo, ChipsExample, SelectExample };

package/bpk-component-aria-live/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-storybook-aria-live-demo{padding:.75rem;background:#f1f2f8;color:#8f90a0;box-shadow:0 0 0 1px #8f90a0 inset;border-radius:.375rem}.bpk-storybook-aria-live-demo__aria-content{color:#111236}.bpk-storybook-aria-live-demo__chips-wrapper{margin-bottom:.75rem}.bpk-storybook-aria-live-demo__select-wrapper{display:flex;margin-bottom:.75rem;justify-content:space-between;align-items:center}.bpk-storybook-aria-live-demo__select{flex:0.5}.bpk-storybook-aria-live-demo__switch{flex:0.3}.bpk-storybook-aria-live-demo__chip{margin-right:.75rem;margin-bottom:.75rem}.bpk-storybook-aria-live-demo__aria-live{margin-top:.75rem}.bpk-storybook-aria-live-demo>p{margin-top:0;margin-bottom:1rem}