@skyscanner/backpack-web 14.0.0 → 14.1.0

package/bpk-component-page-indicator/src/NavButton.js

@@ -0,0 +1,85 @@
+/*
+ * 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 { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
+import BpkButton from '../../bpk-component-button';
+import LeftArrowIcon from '../../bpk-component-icon/lg/chevron-left';
+import RightArrowIcon from '../../bpk-component-icon/lg/chevron-right';
+
+export const DIRECTIONS = {
+  PREV: 'PREV',
+  INDICATORS: 'INDICATORS',
+  NEXT: 'NEXT',
+};
+
+type Props = {
+  direction: $Keys<typeof DIRECTIONS>,
+  disabled?: boolean,
+  currentIndex: number,
+  onClick: ?() => void,
+  ariaLabel: string,
+};
+
+const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
+const AlignedRightArrowIcon = withButtonAlignment(
+  withRtlSupport(RightArrowIcon),
+);
+
+const NavButton = (props: Props) => {
+  const { ariaLabel, currentIndex, direction, disabled, onClick } = props;
+  return (
+    <BpkButton
+      iconOnly
+      link
+      onClick={(e) => {
+        if (direction === DIRECTIONS.PREV) {
+          onClick(e, currentIndex - 1, direction);
+        } else {
+          onClick(e, currentIndex + 1, direction);
+        }
+      }}
+      aria-label={ariaLabel}
+      disabled={disabled}
+    >
+      {direction === DIRECTIONS.PREV ? (
+        <AlignedLeftArrowIcon />
+      ) : (
+        <AlignedRightArrowIcon />
+      )}
+    </BpkButton>
+  );
+};
+
+NavButton.propTypes = {
+  direction: PropTypes.oneOf(Object.keys(DIRECTIONS)).isRequired,
+  disabled: PropTypes.bool,
+  ariaLabel: PropTypes.string.isRequired,
+  currentIndex: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+};
+
+NavButton.defaultProps = {
+  disabled: false,
+  onClick: null,
+};
+
+export default NavButton;

package/bpk-component-pagination/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-pagination --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkPagination from 'bpk-component-pagination';
+import BpkPagination from '@skyscanner/backpack-web/bpk-component-pagination';
 
 const Pagination = () => (
   <BpkPagination

package/bpk-component-pagination/src/BpkPaginationNudger.module.scss

@@ -32,30 +32,9 @@ $bpk-spacing-v2: true;
     cursor: pointer;
     appearance: none;
 
-    @include bpk-themeable-property(
-      color,
-      --bpk-pagination-nudger-color,
-      $bpk-color-sky-blue
-    );
-
-    @include bpk-hover {
-      @include bpk-themeable-property(
-        color,
-        --bpk-pagination-nudger-hover-color,
-        $bpk-color-sky-blue-shade-02
-      );
-    }
-
-    &:active {
-      @include bpk-themeable-property(
-        color,
-        --bpk-pagination-nudger-active-color,
-        $bpk-color-sky-blue
-      );
-    }
+    @include bpk-button--link;
 
     &:disabled {
-      color: $bpk-color-sky-gray-tint-06;
       cursor: not-allowed;
     }
 

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -36,7 +36,8 @@ const BpkPaginationPage = (props) => {
 
   return (
     <BpkButton
-      secondary
+      primaryOnDark={!isSelected}
+      primary={isSelected}
       onClick={onSelect}
       className={classNames.join(' ')}
       aria-label={pageLabel(page, isSelected)}

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -25,68 +25,16 @@ $bpk-spacing-v2: true;
   height: $bpk-button-height;
   padding: 0;
   border-radius: 50%;
+  color: $bpk-text-link-day;
 
+  @include bpk-border-lg(
+    var(--bpk-pagination-selected-background-color, $bpk-line-day)
+  );
   @include bpk-label-1;
 }
 
 .bpk-pagination-page--selected {
-  background-image: $bpk-button-secondary-background-image;
-  color: $bpk-button-selected-color;
+  color: $bpk-text-primary-inverse-day;
   box-shadow: $bpk-button-selected-box-shadow;
   cursor: auto;
-
-  @include bpk-themeable-property(
-    background-color,
-    --bpk-pagination-selected-background-color,
-    $bpk-color-sky-blue-shade-02
-  );
-  @include bpk-border-lg($bpk-color-sky-blue-shade-02);
-  @include bpk-border-lg(
-    var(
-      --bpk-pagination-selected-background-color,
-      $bpk-color-sky-blue-shade-02
-    )
-  );
-
-  @include bpk-hover {
-    background-image: $bpk-button-selected-hover-background-image;
-    color: $bpk-button-selected-hover-color;
-    box-shadow: $bpk-button-selected-hover-box-shadow;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-pagination-selected-background-color,
-      $bpk-color-sky-blue-shade-02
-    );
-    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
-    @include bpk-border-lg(
-      var(
-        --bpk-pagination-selected-background-color,
-        $bpk-color-sky-blue-shade-02
-      )
-    );
-  }
-
-  &:active {
-    background-image: $bpk-button-selected-active-background-image;
-    color: $bpk-button-selected-active-color;
-    box-shadow: $bpk-button-selected-active-box-shadow;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-pagination-selected-background-color,
-      $bpk-color-sky-blue-shade-02
-    );
-    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
-    @include bpk-border-lg(
-      var(
-        --bpk-pagination-selected-background-color,
-        $bpk-color-sky-blue-shade-02
-      )
-    );
-  }
-
-  &:disabled {
-    box-shadow: $bpk-button-selected-disabled-box-shadow;
-  }
 }

package/bpk-component-panel/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-panel --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkPanel from 'bpk-component-panel';
+import BpkPanel from '@skyscanner/backpack-web/bpk-component-panel';
 
 export default () => (
   <BpkPanel>

package/bpk-component-phone-input/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-phone-input --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkPhoneInput from 'bpk-component-phone-input';
-import BpkImage from 'bpk-component-image';
+import BpkPhoneInput from '@skyscanner/backpack-web/bpk-component-phone-input';
+import BpkImage from '@skyscanner/backpack-web/bpk-component-image';
 
 const DIALING_CODE_TO_ID_MAP = {
   '44': 'uk',

package/bpk-component-popover/README.md

@@ -4,17 +4,15 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-popover --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkButton from 'bpk-component-button';
-import BpkPopover from 'bpk-component-popover';
-import BpkText from 'bpk-component-text';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 
 class App extends Component {
   constructor() {

package/bpk-component-price/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-price --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkPrice, { SIZES, ALIGNS } from 'bpk-component-price';
+import BpkPrice, { SIZES, ALIGNS } from '@skyscanner/backpack-web/bpk-component-price';
 
 export default () => (
   <BpkPrice

package/bpk-component-progress/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-progress --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkProgress from 'bpk-component-progress';
+import BpkProgress from '@skyscanner/backpack-web/bpk-component-progress';
 
 const Progress = () => (
   <BpkProgress

package/bpk-component-radio/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-radio --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkRadio from 'bpk-component-radio';
+import BpkRadio from '@skyscanner/backpack-web/bpk-component-radio';
 
 export default () => (
   <BpkRadio

package/bpk-component-radio/src/BpkRadio.js

@@ -45,18 +45,17 @@ const BpkRadio = (props: Props) => {
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
 
-  const classNames = [
-    getClassName(
-      'bpk-radio',
-      white && 'bpk-radio--white',
-      disabled && 'bpk-radio--disabled',
-      isInvalid && 'bpk-radio--invalid',
-      className,
-    ),
-  ];
+  const classNames = getClassName(
+    'bpk-radio',
+    white && 'bpk-radio--white',
+    disabled && 'bpk-radio--disabled',
+    white && disabled && 'bpk-radio--disabled--white',
+    isInvalid && 'bpk-radio--invalid',
+    className,
+  );
 
   return (
-    <label className={classNames.join(' ')}>
+    <label className={classNames}>
       {/* Deciding to support this because `aria-invalid` does often work with voiceover
       despite not being in the spec. */}
       {/* eslint-disable jsx-a11y/role-supports-aria-props */}

package/bpk-component-radio/src/BpkRadio.module.scss

@@ -31,6 +31,10 @@ $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
 
   &--disabled {
     @include bpk-radio--disabled;
+
+    &--white {
+      color: $bpk-text-disabled-on-dark-day;
+    }
   }
 
   &--invalid {

package/bpk-component-rating/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-rating --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkRating, { RATING_SIZES, RATING_SCALES } from 'bpk-component-rating';
+import BpkRating, { RATING_SIZES, RATING_SCALES } from '@skyscanner/backpack-web/bpk-component-rating';
 
 export default () => (
   <BpkRating

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

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-rtl-toggle --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkRtlToggle from 'bpk-component-rtl-toggle';
+import BpkRtlToggle from '@skyscanner/backpack-web/bpk-component-rtl-toggle';
 
 export default () => (
   <BpkRtlToggle />

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

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-scrollable-calendar --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import { DateUtils } from 'bpk-component-calendar';
-import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from 'bpk-component-scrollable-calendar';
+import { DateUtils } from '@skyscanner/backpack-web/bpk-component-calendar';
+import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-scrollable-calendar';
 import format from 'date-fns/format';
 
 const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');

package/bpk-component-section-list/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-section-list --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSectionList, { BpkSectionListSection, BpkSectionListItem } from 'bpk-component-section-list';
+import BpkSectionList, { BpkSectionListSection, BpkSectionListItem } from '@skyscanner/backpack-web/bpk-component-section-list';
 
 export default () => (
   <BpkSectionList>

package/bpk-component-select/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-select --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSelect from 'bpk-component-select';
+import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';
 
 export default () => (
   <BpkSelect

package/bpk-component-skip-link/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-skip-link --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSkipLink from 'bpk-component-skip-link';
+import BpkSkipLink from '@skyscanner/backpack-web/bpk-component-skip-link';
 
 export default () => <BpkSkipLink href="#main" label="Skip to main content" />;
 ```

package/bpk-component-slider/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-slider --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkSlider from 'bpk-component-slider';
+import BpkSlider from '@skyscanner/backpack-web/bpk-component-slider';
 
 const Slider = () => (
   <BpkSlider

package/bpk-component-spinner/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-spinner --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
+import { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
 
 export default () => (
   <div>

package/bpk-component-split-input/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-split-input --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSplitInput, { INPUT_TYPES } from 'bpk-component-split-input';
+import BpkSplitInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-split-input';
 
 export default () => (
   <BpkSplitInput

package/bpk-component-star-rating/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-star-rating --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -17,7 +15,7 @@ import BpkStarRating, {
   STAR_TYPES,
   BpkInteractiveStarRating,
   withInteractiveStarRatingState
-} from 'bpk-component-star-rating';
+} from '@skyscanner/backpack-web/bpk-component-star-rating';
 
 const InteractiveStarRating = withInteractiveStarRatingState(BpkInteractiveStarRating);
 

package/bpk-component-switch/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-switch --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSwitch from 'bpk-component-switch';
+import BpkSwitch from '@skyscanner/backpack-web/bpk-component-switch';
 
 export default () => (
   <div>

package/bpk-component-table/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-table --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -19,7 +17,7 @@ import {
   BpkTableRow,
   BpkTableCell,
   BpkTableHeadCell,
-} from 'bpk-component-table';
+} from '@skyscanner/backpack-web/bpk-component-table';
 
 export default () => (
   <BpkTable>

package/bpk-component-text/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-text --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```javascript
 import React from 'react';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
 
 export default () => (
   <BpkText tagName="h1" textStyle={TEXT_STYLES.subheading}>My heading</BpkText>
@@ -25,8 +23,8 @@ When using the same style in many places repeating the `textStyle` and `tagName`
 
 ```javascript
 import React from 'react';
-import BpkText from 'bpk-component-text';
-import { withDefaultProps } from 'bpk-react-utils';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import { withDefaultProps } from '@skyscanner/backpack-web/bpk-react-utils';
 
 const LargeParagraph = withDefaultProps(BpkText, { textStyle: 'bodyLongform', tagName: 'p' });
 const TinySpan = withDefaultProps(BpkText, { textStyle: 'caption', tagName: 'span' });
@@ -56,7 +54,7 @@ Heading `textStyle` should not be confused with heading `tagName` that provide s
 
 ```javascript
 import React from 'react';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
 
 export default () => (
   <BpkText tagName="h1" textStyle={TEXT_STYLES.heading1}>My heading</BpkText>

package/bpk-component-textarea/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-textarea --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkTextarea from 'bpk-component-textarea';
+import BpkTextarea from '@skyscanner/backpack-web/bpk-component-textarea';
 
 export default () => (
   <BpkTextarea