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

package/bpk-component-rating/src/BpkRating.js

@@ -1,176 +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 clamp from 'lodash.clamp';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkRating.module.scss';
-import { RATING_SIZES, RATING_SCALES } from './common-types';
-
-const getClassName = cssModules(STYLES);
-
-const getMinValue = () =>
-  // Currently the min value is zero no matter what scale is used.
-  // If this ever changes, this function should be changed to return
-  // different values based on the rating scale.
-  0;
-
-const getMaxValue = (ratingScale) => {
-  switch (ratingScale) {
-    case RATING_SCALES.zeroToFive:
-      return 5;
-    default:
-      return 10;
-  }
-};
-
-type Props = {
-  ariaLabel: string,
-  className: ?string,
-  ratingScale: $Values<typeof RATING_SCALES>,
-  showScale: ?boolean,
-  size: $Values<typeof RATING_SIZES>,
-  subtitle: ?string,
-  title: string | Node,
-  value: string | number,
-};
-
-const BpkRating = (props: Props) => {
-  const {
-    ariaLabel,
-    className,
-    ratingScale,
-    showScale,
-    size,
-    subtitle,
-    title,
-    value,
-    ...rest
-  } = props;
-
-  const classNames = [getClassName('bpk-rating', className)];
-  const valueStyles = [getClassName('bpk-rating__value')];
-  const scaleStyles = [getClassName('bpk-rating__scale')];
-  const textWrapperStyles = [getClassName('bpk-rating__text-wrapper')];
-  const titleStyles = [];
-  const subtitleStyles = [getClassName('bpk-rating__subtitle')];
-
-  let valueTextSize = TEXT_STYLES.label1;
-  let scaleTextSize = TEXT_STYLES.caption;
-  let titleTextSize = TEXT_STYLES.label1;
-  let subtitleTextSize = TEXT_STYLES.caption;
-
-  if (size === RATING_SIZES.large) {
-    classNames.push(getClassName('bpk-rating--large'));
-    textWrapperStyles.push(getClassName('bpk-rating__text-wrapper--large'));
-    titleStyles.push(getClassName('bpk-rating__title--large'));
-    subtitleStyles.push(getClassName('bpk-rating__subtitle--large'));
-
-    valueTextSize = TEXT_STYLES.hero5;
-    scaleTextSize = TEXT_STYLES.bodyDefault;
-    titleTextSize = TEXT_STYLES.heading5;
-    subtitleTextSize = TEXT_STYLES.bodyDefault;
-  }
-
-  const minValue = getMinValue();
-  const maxValue = getMaxValue(ratingScale);
-
-  let adjustedValue = value;
-
-  if (adjustedValue >= maxValue || adjustedValue <= minValue) {
-    adjustedValue = clamp(adjustedValue, minValue, maxValue);
-  }
-
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div
-      className={classNames.join(' ')}
-      aria-label={ariaLabel}
-      role="figure"
-      {...rest}
-    >
-      <BpkText
-        textStyle={valueTextSize}
-        tagName="span"
-        className={valueStyles.join(' ')}
-        aria-hidden="true"
-      >
-        {adjustedValue}
-
-        {showScale && (
-          <BpkText
-            textStyle={scaleTextSize}
-            className={scaleStyles.join(' ')}
-            tagName="span"
-            aria-hidden="true"
-          >
-            /{maxValue}
-          </BpkText>
-        )}
-      </BpkText>
-
-      <div className={textWrapperStyles.join(' ')}>
-        <BpkText
-          textStyle={titleTextSize}
-          className={titleStyles.join(' ')}
-          tagName="span"
-          aria-hidden="true"
-        >
-          {title}
-        </BpkText>
-
-        {subtitle && (
-          <BpkText
-            className={subtitleStyles.join(' ')}
-            textStyle={subtitleTextSize}
-            tagName="span"
-            aria-hidden="true"
-          >
-            {subtitle}
-          </BpkText>
-        )}
-      </div>
-    </div>
-  );
-};
-
-BpkRating.propTypes = {
-  ariaLabel: PropTypes.string.isRequired,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  className: PropTypes.string,
-  ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
-  size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
-  subtitle: PropTypes.string,
-  showScale: PropTypes.bool,
-};
-
-BpkRating.defaultProps = {
-  className: null,
-  ratingScale: RATING_SCALES.zeroToFive,
-  size: RATING_SIZES.base,
-  subtitle: null,
-  showScale: true,
-};
-
-export default BpkRating;

package/bpk-component-rating/src/BpkRating.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-rating{display:flex}.bpk-rating--vertical{flex-direction:column}.bpk-rating__component{justify-content:center;align-items:center;border-radius:50%;color:#fff}.bpk-rating--base-rating{display:flex;width:3rem;height:3rem}.bpk-rating--lg-rating{display:flex;width:3.75rem;height:3.75rem}.bpk-rating--sm-rating{display:flex;width:2.25rem;height:2.25rem}.bpk-rating--sm-pill{width:2.25rem;height:1.875rem;border-radius:1.125rem}.bpk-rating--base-pill{width:3rem;height:2.25rem;border-radius:1.125rem}.bpk-rating--lg-pill{width:4.125rem;height:2.625rem;border-radius:1.3125rem}.bpk-rating__text-wrapper{display:flex;flex-direction:column;justify-content:center}.bpk-rating__text-wrapper--horizontal{padding-left:0.75rem}html[dir='rtl'] .bpk-rating__text-wrapper--horizontal{padding-right:0.75rem}.bpk-rating__text-wrapper--vertical{padding-top:0.375rem}.bpk-rating__text--horizontal{text-align:left}html[dir='rtl'] .bpk-rating__text--horizontal{text-align:right}.bpk-rating__text--vertical{align-self:center;text-align:center}.bpk-rating--high-rating{align-self:center;color:#111236;color:#111236;color:var(--bpk-rating-high-text-color, #111236);background-color:#73cec6;background-color:var(--bpk-rating-high-color, #73cec6)}.bpk-rating--medium-rating{align-self:center;color:#111236;color:var(--bpk-rating-medium-text-color, #111236);background-color:#ffb54d;background-color:var(--bpk-rating-medium-color, #ffb54d)}.bpk-rating--low-rating{align-self:center;background-color:#d1435b;background-color:var(--bpk-rating-low-color, #d1435b)}

package/bpk-component-rating/src/BpkRating.module.scss

@@ -1,86 +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-spacing-v2: true;
-
-.bpk-rating {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: baseline;
-
-  &--large {
-    align-items: center;
-  }
-
-  &__value {
-    display: flex;
-    padding-right: bpk-spacing-md();
-    justify-content: center;
-    align-items: baseline;
-    color: $bpk-color-sky-gray;
-
-    @include bpk-rtl {
-      padding-right: 0;
-      padding-left: bpk-spacing-md();
-    }
-  }
-
-  &__text-wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    white-space: nowrap;
-
-    &--large {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  &__scale {
-    color: $bpk-color-sky-gray-tint-02;
-  }
-
-  &__title {
-    &--large {
-      padding-top: $bpk-one-pixel-rem;
-    }
-  }
-
-  &__subtitle {
-    padding-left: bpk-spacing-md();
-    color: $bpk-color-sky-gray-tint-02;
-
-    @include bpk-rtl {
-      padding-right: bpk-spacing-md();
-      padding-left: 0;
-    }
-
-    &--large {
-      padding-top: $bpk-one-pixel-rem;
-      padding-left: 0;
-
-      @include bpk-rtl {
-        padding-right: 0;
-        padding-left: 0;
-      }
-    }
-  }
-}

package/bpk-component-rating/src/common-types.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 */
-
-export const RATING_SIZES = { base: 'base', large: 'large' };
-
-export const RATING_SCALES = {
-  zeroToFive: 'zeroToFive',
-  zeroToTen: 'zeroToTen',
-};

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

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

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

@@ -1,23 +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 BpkRtlToggle from './src/BpkRtlToggle';
-import updateOnDirectionChange from './src/updateOnDirectionChange';
-
-export default BpkRtlToggle;
-export { updateOnDirectionChange };

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

@@ -1,24 +0,0 @@
-{
-  "name": "bpk-component-rtl-toggle",
-  "version": "3.1.12",
-  "description": "Backpack RTL 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-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -1,93 +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 React from 'react';
-import PropTypes from 'prop-types';
-
-import { BpkButtonLink } from '../../bpk-component-link';
-
-import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';
-
-const getDirection = () => getHtmlElement().dir || DIRECTIONS.LTR;
-
-const setDirection = (direction) => {
-  const htmlElement = getHtmlElement();
-
-  htmlElement.dir = direction;
-  htmlElement.dispatchEvent(new Event(DIRECTION_CHANGE_EVENT));
-};
-
-class BpkRtlToggle extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      direction: getDirection(),
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown = (e) => {
-    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'r') {
-      this.toggleRtl(e);
-    }
-  };
-
-  toggleRtl = (e) => {
-    e.preventDefault();
-
-    const direction =
-      getDirection() === DIRECTIONS.RTL ? DIRECTIONS.LTR : DIRECTIONS.RTL;
-
-    setDirection(direction);
-
-    this.setState({ direction });
-  };
-
-  render() {
-    const { className } = this.props;
-    const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
-
-    return (
-      <BpkButtonLink
-        title="Keyboard Shortcut: ctrl + cmd + r"
-        onClick={this.toggleRtl}
-        className={className}
-      >
-        RTL {onOrOff}
-      </BpkButtonLink>
-    );
-  }
-}
-
-BpkRtlToggle.propTypes = {
-  className: PropTypes.string,
-};
-
-BpkRtlToggle.defaultProps = {
-  className: null,
-};
-
-export default BpkRtlToggle;

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js

@@ -1,60 +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 React, { Component } from 'react';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';
-
-const updateOnDirectionChange = (EnhancedComponent) => {
-  class UpdateOnDirectionChange extends Component {
-    componentDidMount() {
-      getHtmlElement().addEventListener(
-        DIRECTION_CHANGE_EVENT,
-        this.onDirectionChange,
-        false,
-      );
-    }
-
-    componentWillUnmount() {
-      getHtmlElement().removeEventListener(
-        DIRECTION_CHANGE_EVENT,
-        this.onDirectionChange,
-        false,
-      );
-    }
-
-    onDirectionChange = () => {
-      this.forceUpdate();
-    };
-
-    render() {
-      return <EnhancedComponent {...this.props} />;
-    }
-  }
-
-  UpdateOnDirectionChange.displayName = wrapDisplayName(
-    EnhancedComponent,
-    'updateOnDirectionChange',
-  );
-
-  return UpdateOnDirectionChange;
-};
-
-export default updateOnDirectionChange;

package/bpk-component-rtl-toggle/src/utils.js

@@ -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.
- */
-
-const DIRECTIONS = {
-  LTR: 'ltr',
-  RTL: 'rtl',
-};
-
-const DIRECTION_CHANGE_EVENT = 'bpkchangedirection';
-
-const getHtmlElement = () =>
-  typeof document !== 'undefined' ? document.querySelector('html') : {};
-
-export { DIRECTIONS, DIRECTION_CHANGE_EVENT, getHtmlElement };

package/bpk-component-scrollable-calendar/README.md

@@ -1,102 +0,0 @@
-# bpk-component-scrollable-calendar
-
-> Backpack scrollable calendar component.
-
-## Installation
-
-```sh
-npm install bpk-component-scrollable-calendar --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import { DateUtils } from 'bpk-component-calendar';
-import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from 'bpk-component-scrollable-calendar';
-import format from 'date-fns/format';
-
-const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
-const formatMonth = date => format(date, 'MMMM yyyy');
-const daysOfWeek = [
-  {
-    name: 'Sunday',
-    nameAbbr: 'Sun',
-    index: 0,
-    isWeekend: true,
-  },
-  // ...
-];
-
-export default class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      selectionConfiguration: {
-        type: CALENDAR_SELECTION_TYPE.single,
-        date: null,
-      }
-    };
-  }
-
-  handleDateSelect = (date) => {
-    this.setState({
-      selectionConfiguration: {
-        type: this.props.selectionConfiguration.type,
-        date: date,
-      },
-    });
-  };
-
-  render() {
-    return (
-      <BpkScrollableCalendar
-        id="calendar"
-        onDateSelect={this.handleDateSelect}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        daysOfWeek={daysOfWeek}
-        weekStartsOn={1}
-        selectionConfiguration={this.state.selectionConfiguration}
-        // Subtract one day from today's date to make today selectable by default
-        minDate={DateUtils.addDays(new Date(), -1)}
-        maxDate={DateUtils.addMonths(new Date(), 12)}
-      />
-    );
-  }
-}
-```
-
-### BpkScrollableCalendarGridList
-
-This component is the main scrollable grid of months for the scrollable calendar.
-It is composed of `BpkScrollableCalendarGrid` elements. It uses all the same props
-as `BpkCalendarGrid`, but in addition `minDate` and `maxDate` are required to build
-the actual list.
-
-[Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
-
-| Property | PropType | Required | Default Value |
-| -------- | -------- | -------- | ------------- |
-| maxDate  | Date     | true     | -             |
-| minDate  | Date     | true     | -             |
-
-### BpkScrollableCalendarGrid
-
-The BpkScrollableCalendarGrid component displays a month as a table.
-Above this table it displays the month's name in a `BpkText`. When
-used with `BpkScrollableCalendarDate`, it only displays days from
-that specific month. It is built on top of BpkCalendarGrid and
-uses the same props.
-
-[Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
-
-### BpkScrollableCalendarDate
-
-The BpkScrollableCalendarDate component is used to render the content of a cell
-(a single day) inside the calendar grid. It is built on top of BpkCalendarDate
-and uses the same props. The only difference is that when isOutside is true,
-null is returned in order to only display of specific month in the calendar grid.
-
-[Please refer to the props of BpkCalendarDate here](https://backpack.github.io/components/calendar?platform=web#bpkcalendardate).