@skyscanner/backpack-web 14.0.0 → 15.0.0

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;
+      }
+    }
+  }
+}

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