@skyscanner/backpack-web 14.0.0 → 14.1.0

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}

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

@@ -0,0 +1,91 @@
+/*
+ * 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.scss';
+
+$bpk-spacing-v2: true;
+$dot-size: bpk-spacing-md();
+$dot-margin: bpk-spacing-sm();
+$displayed-total: 5;
+/* stylelint-disable-next-line scss/operator-no-newline-after */
+$container-width: $dot-size * $displayed-total + $dot-margin * $displayed-total *
+  2;
+
+.bpk-page-indicator {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  &__showNav {
+    justify-content: space-between;
+  }
+
+  &__container {
+    max-width: $container-width;
+    min-height: $dot-size;
+    overflow: hidden;
+  }
+
+  &__indicators-container {
+    --direction: -1;
+
+    /* stylelint-disable scss/operator-no-newline-after */
+    transform: translateX(
+      calc(
+        var(--direction) * var(--scroll-index, 0) * #{$dot-size + $dot-margin *
+          2}
+      )
+    );
+    /* stylelint-enable scss/operator-no-newline-after */
+    transition: transform $bpk-duration-sm ease-in-out;
+    white-space: nowrap;
+
+    @include bpk-rtl {
+      --direction: 1;
+    }
+  }
+
+  &__indicator {
+    display: inline-block;
+    width: $dot-size;
+    height: $dot-size;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    margin-inline: $dot-margin;
+
+    &--default {
+      background-color: $bpk-line-day;
+    }
+
+    &--overImage {
+      background-color: $bpk-line-on-dark-day;
+    }
+
+    &--active {
+      &-default {
+        background-color: $bpk-text-secondary-day;
+      }
+
+      &-overImage {
+        background-color: $bpk-text-on-dark-day;
+      }
+    }
+  }
+}