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

package/bpk-component-grid/src/BpkGridContainer.js

@@ -1,62 +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 PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkGridContainer.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const BpkGridContainer = (props) => {
-  const { children, className, debug, fullWidth, ...rest } = props;
-  const classNames = [getClassName('bpk-grid__container')];
-
-  if (debug) {
-    classNames.push(getClassName('bpk-grid__container--debug'));
-  }
-  if (fullWidth) {
-    classNames.push(getClassName('bpk-grid__container--full-width'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-
-  return (
-    <div className={classNames.join(' ')} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-BpkGridContainer.propTypes = {
-  children: PropTypes.node.isRequired,
-  debug: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-BpkGridContainer.defaultProps = {
-  debug: false,
-  fullWidth: false,
-  className: null,
-};
-
-export default BpkGridContainer;

package/bpk-component-grid/src/BpkGridContainer.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-grid__container{max-width:71.25rem;margin:0 auto;padding-right:.75rem;padding-left:.75rem}@media (min-width: 50.3125rem){.bpk-grid__container{padding-right:1.5rem;padding-left:1.5rem}}.bpk-grid__container--debug{background-color:#f1f2f8}.bpk-grid__container--full-width{max-width:100%}

package/bpk-component-grid/src/BpkGridContainer.module.scss

@@ -1,33 +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';
-
-.bpk-grid {
-  &__container {
-    @include bpk-grid__container;
-
-    &--debug {
-      @include bpk-grid__container--debug;
-    }
-
-    &--full-width {
-      @include bpk-grid__container--full-width;
-    }
-  }
-}

package/bpk-component-grid/src/BpkGridRow.js

@@ -1,57 +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 PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkGridRow.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const BpkGridRow = (props) => {
-  const classNames = [getClassName('bpk-grid__row')];
-  const { children, className, padded, ...rest } = props;
-
-  if (padded) {
-    classNames.push(getClassName('bpk-grid__row--padded'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-
-  return (
-    <div className={classNames.join(' ')} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-BpkGridRow.propTypes = {
-  children: PropTypes.node.isRequired,
-  padded: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-BpkGridRow.defaultProps = {
-  padded: true,
-  className: null,
-};
-
-export default BpkGridRow;

package/bpk-component-grid/src/BpkGridRow.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-grid__row{margin-right:-.75rem;margin-left:-.75rem}.bpk-grid__row::before,.bpk-grid__row::after{content:'';display:table}.bpk-grid__row::after{clear:both}@media (min-width: 50.3125rem){.bpk-grid__row--padded:first-child{padding-top:.75rem}.bpk-grid__row--padded:last-child{padding-bottom:.75rem}}

package/bpk-component-grid/src/BpkGridRow.module.scss

@@ -1,29 +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';
-
-.bpk-grid {
-  &__row {
-    @include bpk-grid__row;
-
-    &--padded {
-      @include bpk-grid__row--padded;
-    }
-  }
-}

package/bpk-component-grid-toggle/README.md

@@ -1,27 +0,0 @@
-# bpk-component-grid-toggle
-
-> Backpack vertical grid toggle component.
-
-## Installation
-
-```sh
-npm install bpk-component-grid-toggle --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkGridToggle from 'bpk-component-grid-toggle';
-
-export default () => (
-  <BpkGridToggle />
-);
-```
-
-## Props
-
-| Property         | PropType | Required | Default Value |
-| ---------------- | -------- | -------- | ------------- |
-| className        | string   | false    | null          |
-| targetContainer  | string   | false    | 'body'        |

package/bpk-component-grid-toggle/index.js

@@ -1,21 +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 component from './src/BpkGridToggle';
-
-export default component;

package/bpk-component-grid-toggle/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "bpk-component-grid-toggle",
-  "version": "3.1.12",
-  "description": "Backpack vertical grid toggle 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-component-link": "^3.1.12",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -1,96 +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 PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import { BpkButtonLink } from '../../bpk-component-link';
-
-import STYLES from './BpkGridToggle.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
-
-class BpkGridToggle extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      gridEnabled: false,
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  componentWillUnmount() {
-    document
-      .querySelector(this.props.targetContainer)
-      .classList.remove(GRID_CLASS_NAME);
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown = (e) => {
-    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'g') {
-      this.toggleGrid(e);
-    }
-  };
-
-  toggleGrid = (e) => {
-    e.preventDefault();
-
-    document
-      .querySelector(this.props.targetContainer)
-      .classList.toggle(GRID_CLASS_NAME);
-
-    this.setState((state) => ({
-      gridEnabled: !state.gridEnabled,
-    }));
-  };
-
-  render() {
-    const { className } = this.props;
-    const { gridEnabled } = this.state;
-    const onOrOff = gridEnabled ? 'off' : 'on';
-
-    return (
-      <BpkButtonLink
-        title="Keyboard Shortcut: ctrl + cmd + g"
-        onClick={this.toggleGrid}
-        className={className}
-      >
-        Baseline grid {onOrOff}
-      </BpkButtonLink>
-    );
-  }
-}
-
-BpkGridToggle.propTypes = {
-  targetContainer: PropTypes.string,
-  className: PropTypes.string,
-};
-
-BpkGridToggle.defaultProps = {
-  targetContainer: 'body',
-  className: null,
-};
-
-export default BpkGridToggle;

package/bpk-component-grid-toggle/src/BpkGridToggle.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-vertical-grid--on{position:relative}.bpk-vertical-grid--on::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:9999;width:auto;height:auto;background:linear-gradient(to bottom, rgba(209,67,91,0.3) 0, transparent .0625rem) repeat left 0;background-size:.375rem .375rem;pointer-events:none}.bpk-vertical-grid--on:active::after{display:none}

package/bpk-component-grid-toggle/src/BpkGridToggle.module.scss

@@ -1,52 +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-vertical-grid {
-  &--on {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      content: '';
-      display: block;
-      z-index: 9999;
-      width: auto;
-      height: auto;
-      background: linear-gradient(
-          to bottom,
-          rgba($bpk-color-panjin, 0.3) 0,
-          transparent $bpk-one-pixel-rem
-        )
-        repeat left 0;
-      background-size: $bpk-spacing-xs $bpk-spacing-xs;
-      pointer-events: none;
-    }
-
-    &:active {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}

package/bpk-component-horizontal-nav/README.md

@@ -1,103 +0,0 @@
-# bpk-component-horizontal-nav
-
-> Backpack horizontal nav component.
-
-## Installation
-
-```sh
-npm install bpk-component-horizontal-nav --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkHorizontalNav, { BpkHorizontalNavItem } from 'bpk-component-horizontal-nav';
-
-export default class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      selected: 'flights',
-    };
-  }
-
-  onClick = (e) => {
-    this.setState({
-      selected: e.target.name,
-    });
-  }
-
-  render() {
-    return (
-      <BpkHorizontalNav>
-        <BpkHorizontalNavItem
-          name="flights"
-          selected={this.state.selected === 'flights'}
-          onClick={this.onClick}
-        >
-          Flights
-        </BpkHorizontalNavItem>
-        <BpkHorizontalNavItem
-          name="hotels"
-          selected={this.state.selected === 'hotels'}
-          onClick={this.onClick}
-        >
-          Hotels
-        </BpkHorizontalNavItem>
-        <BpkHorizontalNavItem
-          name="car-hire"
-          selected={this.state.selected === 'car-hire'}
-          onClick={this.onClick}
-        >
-          Car hire
-        </BpkHorizontalNavItem>
-      </BpkHorizontalNav>
-    );
-  }
-};
-```
-
-## Props
-
-### BpkHorizontalNav
-
-| Property                          | PropType | Required | Default Value |
-| --------------------------------- | -------- | -------- | ------------- |
-| children                          | node     | true     | -             |
-| autoScrollToSelected              | bool     | false    | false         |
-| className                         | string   | false    | null          |
-| leadingScrollIndicatorClassName   | string   | false    | null          |
-| showUnderline                     | bool     | false    | true          |
-| trailingScrollIndicatorClassName  | string   | false    | null          |
-| type                              | oneOf('default', 'light') | false | 'default' |
-
-#### `autoScrollToSelected`
-
-Ensures that the selected item is within view when loaded on narrow-screened devices.
-
-#### `showUnderline`
-
-When set to `false`, the bottom border on the component isn't included. This refers
-to the underline on the whole `BpkHorizontalNav`, not the line that appears under the selected item.
-
-### BpkHorizontalNavItem
-
-| Property    | PropType | Required | Default Value |
-| ----------- | -------- | -------- | ------------- |
-| children    | node     | true     | -             |
-| className   | string   | false    | null          |
-| spaceAround | bool     | false    | false         |
-| selected    | bool     | false    | false         |
-| disabled    | bool     | false    | false         |
-| href        | string   | false    | null          |
-
-**Note:** `disabled` and `selected` are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-
-## Theme Props
-
-* `horizontalNavLinkColor`
-* `horizontalNavLinkHoverColor`
-* `horizontalNavLinkActiveColor`
-* `horizontalNavLinkSelectedColor`
-* `horizontalNavBarSelectedColor`

package/bpk-component-horizontal-nav/index.js

@@ -1,32 +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 BpkHorizontalNav, {
-  HORIZONTAL_NAV_TYPES,
-  type Props as NavProps,
-} from './src/BpkHorizontalNav';
-import BpkHorizontalNavItem, {
-  type Props as ItemProps,
-  themeAttributes,
-} from './src/BpkHorizontalNavItem';
-
-export type BpkHorizontalNavProps = NavProps;
-export type BpkHorizontalNavItemProps = ItemProps;
-export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
-export default BpkHorizontalNav;

package/bpk-component-horizontal-nav/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "bpk-component-horizontal-nav",
-  "version": "5.1.14",
-  "description": "Backpack horizontal nav 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": {
-    "bpk-component-mobile-scroll-container": "^3.1.12",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.6",
-    "bpk-storybook-utils": "^1.1.11"
-  }
-}