@skyscanner/backpack-web 13.0.0 → 14.1.0

package/bpk-component-input/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-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 BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from 'bpk-component-input';
+import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from '@skyscanner/backpack-web/bpk-component-input';
 
 export default () => (
   <BpkInput
@@ -75,8 +73,8 @@ You can still attach custom handlers for these events as they will still be call
 
 ```js
 import React from 'react';
-import BpkInput, { withOpenEvents } from 'bpk-component-input';
-import BpkPopover from 'bpk-component-popover';
+import BpkInput, { withOpenEvents } from '@skyscanner/backpack-web/bpk-component-input';
+import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
 
 const EnhancedInput = withOpenEvents(BpkInput);
 

package/bpk-component-label/README.md

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

package/bpk-component-label/src/BpkLabel.js

@@ -38,25 +38,20 @@ export type Props = {
 const BpkLabel = (props: Props) => {
   const { children, className, disabled, required, valid, white, ...rest } =
     props;
-  const classNames = [getClassName('bpk-label')];
   const invalid = valid === false;
 
-  if (white) {
-    classNames.push(getClassName('bpk-label--white'));
-  }
-  if (invalid) {
-    classNames.push(getClassName('bpk-label--invalid'));
-  }
-  if (disabled) {
-    classNames.push(getClassName('bpk-label--disabled'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
+  const classNames = getClassName(
+    'bpk-label',
+    white && 'bpk-label--white',
+    invalid && 'bpk-label--invalid',
+    disabled && 'bpk-label--disabled',
+    white && disabled && 'bpk-label--disabled--white',
+    className,
+  );
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <label className={classNames.join(' ')} {...rest}>
+    <label className={classNames} {...rest}>
       {children}
       {!disabled && required && (
         <span className={getClassName('bpk-label__asterisk')}>*</span>

package/bpk-component-label/src/BpkLabel.module.scss

@@ -31,6 +31,10 @@
 
   &--disabled {
     @include bpk-label--disabled;
+
+    &--white {
+      color: $bpk-text-disabled-on-dark-day;
+    }
   }
 
   &__asterisk {

package/bpk-component-link/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-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 BpkLink, { BpkButtonLink } from 'bpk-component-link';
+import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
 
 export default () => (
   <div>

package/bpk-component-list/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-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 { BpkList, BpkListItem } from 'bpk-component-list';
+import { BpkList, BpkListItem } from '@skyscanner/backpack-web/bpk-component-list';
 
 export default () => (
   <BpkList>

package/bpk-component-loading-button/README.md

@@ -4,17 +4,15 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-loading-button --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkLoadingButton from 'bpk-component-loading-button';
-import BaggageIcon from 'bpk-component-icon/sm/baggage';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
+import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
+import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
+import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 
 const AlignedBaggageIcon = withButtonAlignment(withRtlSupport(BaggageIcon));
 const icon = <AlignedBaggageIcon />;

package/bpk-component-map/README.md

@@ -6,21 +6,19 @@ Requires **React 16.8+**
 
 ## Installation
 
-```sh
-npm install bpk-component-map --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkText from 'bpk-component-text';
-import { withRtlSupport } from 'bpk-component-icon';
-import LandmarkIconSm from 'bpk-component-icon/sm/landmark';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
+import LandmarkIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/landmark';
 import BpkMap, {
   BpkIconMarker,
   BpkOverlayView,
-} from 'bpk-component-map';
+} from '@skyscanner/backpack-web/bpk-component-map';
 
 const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
 
@@ -64,7 +62,7 @@ Price markers are used to display clickable prices on a map.
 
 ```js
 import React from 'react';
-import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from 'bpk-component-map';
+import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from '@skyscanner/backpack-web/bpk-component-map';
 
 export default () => (
   <BpkMap
@@ -106,7 +104,7 @@ If you intend to include multiple maps on one page, it's better to load the Goog
 
 ```js
 import React from 'react';
-import BpkMap, { withGoogleMapsScript } from 'bpk-component-map';
+import BpkMap, { withGoogleMapsScript } from '@skyscanner/backpack-web/bpk-component-map';
 
 const BpkMapWithScript = withGoogleMapsScript(BpkMap);
 

package/bpk-component-mobile-scroll-container/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-mobile-scroll-container --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
+import BpkMobileScrollContainer from '@skyscanner/backpack-web/bpk-component-mobile-scroll-container';
 
 import STYLES from './MyComponent.scss';
 

package/bpk-component-modal/README.md

@@ -4,17 +4,15 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-modal --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 BpkModal from 'bpk-component-modal';
-import BpkButton from 'bpk-component-button';
-import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
+import BpkModal from '@skyscanner/backpack-web/bpk-component-modal';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 class App extends Component {
   constructor() {

package/bpk-component-navigation-bar/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-navigation-bar --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -14,10 +12,10 @@ npm install bpk-component-navigation-bar --save-dev
 
 ```js
 import React from 'react';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import { withRtlSupport } from 'bpk-component-icon';
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 
-import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
+import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
 
@@ -58,8 +56,8 @@ export default () => (
 
 ```js
 import React from 'react';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import { BpkNavigationBarIconButton } from 'bpk-component-navigation-bar';
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
+import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 export default () => (
   <BpkNavigationBarIconButton
@@ -89,7 +87,7 @@ export default () => (
 
 ```js
 import React from 'react';
-import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
+import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 export default () => (
   <BpkNavigationBarButtonLink onClick={() => {}}>

package/bpk-component-nudger/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-nudger --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -14,8 +12,8 @@ npm install bpk-component-nudger --save-dev
 
 ```js
 import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import BpkNudger from 'bpk-component-nudger';
+import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
+import BpkNudger from '@skyscanner/backpack-web/bpk-component-nudger';
 
 class App extends Component {
   constructor() {
@@ -53,8 +51,8 @@ class App extends Component {
 
 ```js
 import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import { BpkConfigurableNudger } from 'bpk-component-nudger';
+import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
+import { BpkConfigurableNudger } from '@skyscanner/backpack-web/bpk-component-nudger';
 
 const options = ['economy', 'premium', 'business', 'first'];
 

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

@@ -29,6 +29,7 @@ $bpk-spacing-v2: true;
     display: inline-block;
     padding: bpk-spacing-md() 0;
     border: none;
+    color: $bpk-text-primary-day;
     text-align: center;
     vertical-align: middle;
 
@@ -37,7 +38,7 @@ $bpk-spacing-v2: true;
 
     &--secondary-on-dark {
       background-color: transparent;
-      color: $bpk-text-primary-night;
+      color: $bpk-text-on-dark-day;
     }
 
     &--numeric {

package/bpk-component-overlay/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-overlay --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkText from 'bpk-component-text';
-import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from 'bpk-component-overlay';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
 
 export default () => (
   <div>

package/bpk-component-page-indicator/README.md

@@ -0,0 +1,42 @@
+# bpk-component-page-indicator
+
+> Backpack page indicator component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPageIndicator from '@skyscanner/backpack-web/bpk-component-page-indicator';
+
+export default () =>
+  <BpkPageIndicator
+    currentIndex={0}
+    totalIndicators={7}
+    onClick={(e, newIndex, direction) => {
+      console.log('Slide to new index:', newIndex);
+      console.log('Slide direction:', direction);
+    }}
+    indicatorLabel='Go to slide'
+    prevNavLabel='Previous slide'
+    nextNavLabel='Next slide'
+  />;
+```
+
+## Props
+
+| Property        | PropType       | Required | Default Value   |
+|-----------------|----------------|----------|-----------------|
+| currentIndex    | number         | true     | -               |
+| totalIndicators | number         | true     | -               |
+| indicatorLabel  | string         | true     | -               |
+| prevNavLabel    | string         | true     | -               |
+| nextNavLabel    | string         | true     | -               |
+| className       | string         | false    | null            |
+| showNav         | bool           | false    | false           |
+| variant         | oneOf(VARIANT) | false    | VARIANT.default |
+| onClick         | func           | false    | null            |
+

package/bpk-component-page-indicator/index.js

@@ -0,0 +1,28 @@
+/*
+ * 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 BpkPageIndicator, {
+  type Props as BpkPageIndicatorProps,
+  VARIANT,
+} from './src/BpkPageIndicator';
+import { DIRECTIONS } from './src/NavButton';
+
+export type { BpkPageIndicatorProps };
+export { DIRECTIONS, VARIANT };
+export default BpkPageIndicator;

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

@@ -0,0 +1,147 @@
+/*
+ * 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 NavButton, { DIRECTIONS } from './NavButton';
+import STYLES from './BpkPageIndicator.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const DISPLAYED_TOTAL = 5;
+const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);
+
+export const VARIANT = {
+  default: 'default',
+  overImage: 'overImage',
+};
+
+export type Props = {
+  className: ?string,
+  showNav: ?boolean,
+  currentIndex: number,
+  totalIndicators: number,
+  onClick: ?() => void,
+  indicatorLabel: string,
+  prevNavLabel: string,
+  nextNavLabel: string,
+  variant: ?$Keys<typeof VARIANT>,
+};
+
+const BpkPageIndicator = ({
+  className,
+  currentIndex,
+  indicatorLabel,
+  nextNavLabel,
+  onClick,
+  prevNavLabel,
+  showNav,
+  totalIndicators,
+  variant,
+}: Props) => (
+  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+  <div className={className}>
+    <div
+      className={getClassName(
+        'bpk-page-indicator',
+        showNav && 'bpk-page-indicator__showNav',
+      )}
+    >
+      {showNav && (
+        <NavButton
+          currentIndex={currentIndex}
+          onClick={onClick}
+          disabled={currentIndex === 0}
+          direction={DIRECTIONS.PREV}
+          ariaLabel={prevNavLabel}
+        />
+      )}
+      <div className={getClassName('bpk-page-indicator__container')}>
+        <div
+          className={getClassName('bpk-page-indicator__indicators-container')}
+          style={
+            currentIndex > START_SCROLL_INDEX
+              ? {
+                  '--scroll-index':
+                    totalIndicators > DISPLAYED_TOTAL
+                      ? Math.min(
+                          currentIndex - START_SCROLL_INDEX,
+                          totalIndicators - DISPLAYED_TOTAL,
+                        )
+                      : 0,
+                }
+              : undefined
+          }
+        >
+          {[...Array(totalIndicators)].map((val, index) => (
+            <button
+              type="button"
+              onClick={(e) => {
+                onClick(e, index, DIRECTIONS.INDICATORS);
+              }}
+              className={getClassName(
+                'bpk-page-indicator__indicator',
+                `bpk-page-indicator__indicator--${variant}`,
+                index === currentIndex &&
+                  `bpk-page-indicator__indicator--active-${variant}`,
+              )}
+              aria-label={`${indicatorLabel} ${index + 1}`}
+              aria-current={currentIndex === index ? 'true' : 'false'}
+              // eslint-disable-next-line react/no-array-index-key
+              key={`indicator-${index}`}
+            />
+          ))}
+        </div>
+      </div>
+      {showNav && (
+        <NavButton
+          currentIndex={currentIndex}
+          onClick={onClick}
+          disabled={currentIndex === totalIndicators - 1}
+          ariaLabel={nextNavLabel}
+          direction={DIRECTIONS.NEXT}
+        />
+      )}
+    </div>
+  </div>
+);
+
+BpkPageIndicator.propTypes = {
+  indicatorLabel: PropTypes.string.isRequired,
+  prevNavLabel: PropTypes.string.isRequired,
+  nextNavLabel: PropTypes.string.isRequired,
+  currentIndex: PropTypes.number.isRequired,
+  totalIndicators: PropTypes.number.isRequired,
+  variant: PropTypes.oneOf(Object.keys(VARIANT)),
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  showNav: PropTypes.bool,
+};
+
+BpkPageIndicator.defaultProps = {
+  onClick: null,
+  className: null,
+  showNav: false,
+  variant: VARIANT.default,
+};
+
+export default BpkPageIndicator;

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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-page-indicator{display:flex}