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

package/bpk-component-navigation-stack/src/BpkNavigationStack.module.scss

@@ -1,51 +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-navigation-stack {
-  display: flex;
-  overflow: hidden;
-
-  &::after {
-    content: '';
-    min-height: inherit;
-  }
-
-  &__view-track {
-    display: flex;
-    width: 100%;
-    transition: transform $bpk-duration-sm ease;
-
-    &--view-entering {
-      .bpk-navigation-stack__view:nth-last-child(2) {
-        visibility: visible;
-      }
-    }
-  }
-
-  &__view {
-    display: flex;
-    visibility: hidden;
-    min-width: 100%;
-
-    &--current {
-      visibility: visible;
-    }
-  }
-}

package/bpk-component-navigation-stack/src/withNavigationStackState.js

@@ -1,104 +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,
-  cloneElement,
-  type Element,
-  type ComponentType,
-} from 'react';
-
-import BpkNavigationStack, {
-  type Views,
-  type Props as BpkNavigationStackProps,
-} from './BpkNavigationStack';
-
-export type Props = {
-  ...$Diff<$Exact<BpkNavigationStackProps>, { views: Views }>,
-  initialViews: Views,
-};
-
-type State = {
-  views: Views,
-};
-
-export default (
-  Stack: ComponentType<any>, // TODO: Improve type
-  assignCallbacksToChildren: boolean = true,
-) => {
-  class WithNavigationStackState extends Component<Props, State> {
-    static defaultProps = {
-      ...BpkNavigationStack.defaultProps,
-    };
-
-    constructor(props: Props) {
-      super(props);
-
-      this.state = {
-        views: this.props.initialViews,
-      };
-    }
-
-    pushView = (view: Element<any>) => {
-      this.setState((prevState) => {
-        const views = prevState.views.slice();
-        views.push(view);
-
-        return {
-          views,
-        };
-      });
-    };
-
-    popView = () => {
-      this.setState((prevState) => {
-        const views = prevState.views.slice();
-        views.pop();
-
-        return {
-          views,
-        };
-      });
-    };
-
-    render() {
-      const {
-        initialViews, // unused
-        ...rest
-      } = this.props;
-
-      const callbacks = {
-        pushView: this.pushView,
-        popView: this.popView,
-      };
-
-      const [views, optionalCallbacks] = assignCallbacksToChildren
-        ? [this.state.views.map((view) => cloneElement(view, callbacks)), {}]
-        : [this.state.views, callbacks];
-
-      return (
-        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        <Stack views={views} {...optionalCallbacks} {...rest} />
-      );
-    }
-  }
-
-  return WithNavigationStackState;
-};

package/bpk-component-nudger/README.md

@@ -1,170 +0,0 @@
-# bpk-component-nudger
-
-> Backpack nudger component.
-
-## Installation
-
-```sh
-npm install bpk-component-nudger --save-dev
-```
-
-## Usage
-
-### `BpkNudger`
-
-```js
-import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import BpkNudger from 'bpk-component-nudger';
-
-class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      value: 1,
-    };
-  }
-
-  handleChange = value => {
-    this.setState({ value });
-  };
-
-  render() {
-    return (
-      <div>
-        <BpkLabel htmlFor="my-nudger">Number of passengers</BpkLabel>
-        <BpkNudger
-          id="my-nudger"
-          min={1}
-          max={10}
-          value={this.state.value}
-          onChange={this.handleChange}
-          decreaseButtonLabel="Decrease"
-          increaseButtonLabel="Increase"
-        />
-      </div>
-    );
-  }
-}
-```
-
-### `BpkConfigurableNudger`
-
-```js
-import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import { BpkConfigurableNudger } from 'bpk-component-nudger';
-
-const options = ['economy', 'premium', 'business', 'first'];
-
-const compareValues = (value1, value2) => {
-    const [aIndex, bIndex] = [options.indexOf(value1), options.indexOf(value2)];
-    return aIndex - bIndex;
-  };
-
-const incrementValue = currentValue => {
-    const [aIndex] = [options.indexOf(currentValue) + 1];
-    return options[aIndex];
-  };
-
-const decrementValue = currentValue => {
-    const [aIndex] = [options.indexOf(currentValue) - 1];
-    return options[aIndex];
-  };
-
-const formatValue = currentValue => currentValue.toString();
-
-class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      value: 1,
-    };
-  }
-
-  handleChange = value => {
-    this.setState({ value });
-  };
-
-  render() {
-    return (
-      <div>
-        <BpkLabel htmlFor="nudger">Number of passengers</BpkLabel>
-        <BpkConfigurableNudger
-          id="nudger"
-          min="economy"
-          max="first"
-          value={this.state.value}
-          onChange={this.handleChange}
-          decreaseButtonLabel="Decrease"
-          increaseButtonLabel="Increase"
-          compareValues={compareValues}
-          incrementValue={incrementValue}
-          decrementValue={decrementValue}
-          formatValue={formatValue}
-        />
-      </div>
-    );
-  }
-}
-```
-
-## Props
-
-### BpkNudger
-
-| Property            | PropType                      | Required | Default Value |
-| ------------------- | ----------------------------- | -------- | ------------- |
-| id                  | string                        | true     | -             |
-| decreaseButtonLabel | string                        | true     | -             |
-| increaseButtonLabel | string                        | true     | -             |
-| max                 | number                        | true     | -             |
-| min                 | number                        | true     | -             |
-| onChange            | func                          | true     | -             |
-| value               | number                        | true     | -             |
-| className           | string                        | false    | null          |
-| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |
-
-### BpkConfigurableNudger
-
-| Property            | PropType                      | Required | Default Value |
-| ------------------- | ----------------------------- | -------- | ------------- |
-| id                  | string                        | true     | -             |
-| decreaseButtonLabel | string                        | true     | -             |
-| increaseButtonLabel | string                        | true     | -             |
-| max                 | number                        | true     | -             |
-| min                 | number                        | true     | -             |
-| onChange            | func                          | true     | -             |
-| value               | number                        | true     | -             |
-| compareValues       | func                          | true     | -             |
-| incrementValue      | func                          | true     | -             |
-| decrementValue      | func                          | true     | -             |
-| formatValue         | func                          | true     | -             |
-| className           | string                        | false    | null          |
-| inputClassName      | string                        | false    | null          |
-| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |
-
-### `compareValues`
-
-Given `a` and `b`:
-- If `a` is less than `b` then `compareValues(a, b)` should return a value less than `0`
-- If  `a` and `b` are equal then `compareValues(a, b)` should return exactly `0`
-- If `a` is greater than `b` then `compareValues(a, b)` should return a value greater than `0`
-
-We use this along with the `min` and `max` values to determine when we should disable the increment and decrement buttons. This is inspired by the `compareFunction` in [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description)
-
-For integer numbers the following is a correct implementation `const compareValues = (a: number, b: number): number => a - b;`
-
-### `incrementValue` & `decrementValue`
-
-Functions that handle the incrementing or decrementing of the current selected value.
-
-### `formatValue`
-
-A simple function that will allow you to set the format of the display value e.g. local dates or times.
-
-## Theme Props
-
-Same as [secondary button](/components/web/buttons#theme-props)

package/bpk-component-nudger/index.js

@@ -1,26 +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 BpkNudger from './src/BpkNudger';
-import BpkConfigurableNudger from './src/BpkConfigurableNudger';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkNudger;
-export { themeAttributes, BpkConfigurableNudger };

package/bpk-component-nudger/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "bpk-component-nudger",
-  "version": "7.0.6",
-  "description": "Backpack nudger component.",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:Skyscanner/backpack.git"
-  },
-  "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "lodash.clamp": "^4.0.3",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-label": "^5.1.12",
-    "bpk-storybook-utils": "^1.1.11"
-  }
-}

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -1,147 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-/*
- * 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 BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
-import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';
-import { withButtonAlignment } from '../../bpk-component-icon';
-import MinusIcon from '../../bpk-component-icon/sm/minus';
-import PlusIcon from '../../bpk-component-icon/sm/plus';
-import { cssModules } from '../../bpk-react-utils';
-
-import {
-  type CommonProps,
-  COMMON_PROP_TYPES,
-  COMMON_DEFAULT_PROPS,
-} from './common-types';
-import STYLES from './BpkNudger.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const AlignedMinusIcon = withButtonAlignment(MinusIcon);
-const AlignedPlusIcon = withButtonAlignment(PlusIcon);
-
-type Props<T> = {
-  ...$Exact<CommonProps<T>>,
-  inputClassName: ?string,
-  formatValue: (T) => string,
-  incrementValue: (T) => T,
-  decrementValue: (T) => T,
-  compareValues: (T, T) => number,
-};
-
-const BpkConfigurableNudger = <T>(props: Props<T>) => {
-  const {
-    buttonType,
-    className,
-    compareValues,
-    decreaseButtonLabel,
-    decrementValue,
-    formatValue,
-    id,
-    increaseButtonLabel,
-    incrementValue,
-    inputClassName,
-    max,
-    min,
-    onChange,
-    value,
-    ...rest
-  } = props;
-
-  const classNames = getClassName('bpk-nudger', className);
-
-  const maxButtonDisabled = compareValues(value, max) >= 0;
-  const minButtonDisabled = compareValues(value, min) <= 0;
-
-  const minusIconClassNames = getClassName(
-    'bpk-nudger__icon',
-    minButtonDisabled && 'bpk-nudger__icon--disabled',
-  );
-  const plusIconClassNames = getClassName(
-    'bpk-nudger__icon',
-    maxButtonDisabled && 'bpk-nudger__icon--disabled',
-  );
-  const inputStyles = getClassName(
-    'bpk-nudger__input',
-    inputClassName && inputClassName,
-    buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark',
-  );
-
-  const ButtonComponent =
-    buttonType === 'secondary' ? BpkButtonSecondary : BpkButtonSecondaryOnDark;
-
-  return (
-    <div className={classNames}>
-      <ButtonComponent
-        iconOnly
-        onClick={() => onChange(decrementValue(value))}
-        disabled={minButtonDisabled}
-        title={decreaseButtonLabel}
-        aria-controls={id}
-        className={getClassName('bpk-nudger__button')}
-      >
-        <AlignedMinusIcon className={minusIconClassNames} />
-      </ButtonComponent>
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <input
-        type="text"
-        aria-live="assertive"
-        readOnly
-        value={formatValue(value)}
-        id={id}
-        className={inputStyles}
-        {...rest}
-      />
-      <ButtonComponent
-        iconOnly
-        onClick={() => onChange(incrementValue(value))}
-        disabled={maxButtonDisabled}
-        title={increaseButtonLabel}
-        aria-controls={id}
-        className={getClassName('bpk-nudger__button')}
-      >
-        <AlignedPlusIcon className={plusIconClassNames} />
-      </ButtonComponent>
-    </div>
-  );
-};
-
-BpkConfigurableNudger.propTypes = {
-  ...COMMON_PROP_TYPES,
-  compareValues: PropTypes.func.isRequired,
-  decrementValue: PropTypes.func.isRequired,
-  formatValue: PropTypes.PropTypes.func.isRequired,
-  incrementValue: PropTypes.func.isRequired,
-  max: PropTypes.any.isRequired,
-  min: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-  inputClassName: PropTypes.string,
-};
-
-BpkConfigurableNudger.defaultProps = {
-  ...COMMON_DEFAULT_PROPS,
-  inputClassName: null,
-};
-
-export default BpkConfigurableNudger;

package/bpk-component-nudger/src/BpkNudger.js

@@ -1,69 +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 BpkConfigurableNudger from './BpkConfigurableNudger';
-import {
-  type CommonProps,
-  COMMON_DEFAULT_PROPS,
-  COMMON_PROP_TYPES,
-} from './common-types';
-import STYLES from './BpkNudger.module.scss';
-
-type Props = {
-  ...$Exact<CommonProps<number>>,
-};
-
-const getClassName = cssModules(STYLES);
-const compareValues = (a: number, b: number): number => a - b;
-const incrementValue = (currentValue: number): number => currentValue + 1;
-const decrementValue = (currentValue: number): number => currentValue - 1;
-const formatValue = (currentValue: number): string => currentValue.toString();
-
-const BpkNudger = (props: Props) => {
-  const { ...rest } = props;
-
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkConfigurableNudger
-      inputClassName={getClassName('bpk-nudger__input--numeric')}
-      compareValues={compareValues}
-      incrementValue={incrementValue}
-      decrementValue={decrementValue}
-      formatValue={formatValue}
-      {...rest}
-    />
-  );
-};
-
-BpkNudger.propTypes = {
-  ...COMMON_PROP_TYPES,
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
-BpkNudger.defaultProps = COMMON_DEFAULT_PROPS;
-
-export default BpkNudger;

package/bpk-component-nudger/src/BpkNudger.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-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;text-align:center;vertical-align:middle;margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-nudger__input--outline{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}

package/bpk-component-nudger/src/BpkNudger.module.scss

@@ -1,49 +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-spacing-v2: true;
-
-.bpk-nudger {
-  &__button {
-    position: relative;
-  }
-
-  &__input {
-    display: inline-block;
-    padding: bpk-spacing-md() 0;
-    border: none;
-    text-align: center;
-    vertical-align: middle;
-
-    @include bpk-text;
-    @include bpk-subheading;
-
-    &--secondary-on-dark {
-      background-color: transparent;
-      color: $bpk-color-white;
-    }
-
-    &--numeric {
-      $size: bpk-spacing-lg() + (bpk-spacing-md() * 2);
-
-      width: $size;
-    }
-  }
-}