@skyscanner/backpack-web 18.2.0 → 19.0.0

package/bpk-component-nudger/README.md

@@ -11,7 +11,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### `BpkNudger`
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import BpkNudger from '@skyscanner/backpack-web/bpk-component-nudger';
 
@@ -50,7 +50,7 @@ class App extends Component {
 ### `BpkConfigurableNudger`
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import { BpkConfigurableNudger } from '@skyscanner/backpack-web/bpk-component-nudger';
 

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -20,7 +20,6 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
 import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';

package/bpk-component-nudger/src/BpkNudger.js

@@ -18,7 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-overlay/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
 

package/bpk-component-overlay/src/BpkOverlay.js

@@ -18,7 +18,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 
 import { cssModules, deprecated } from '../../bpk-react-utils';
 

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

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkPageIndicator from '@skyscanner/backpack-web/bpk-component-page-indicator';
 
 export default () =>

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

@@ -17,7 +17,6 @@
  */
 /* @flow strict */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';

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

@@ -17,7 +17,6 @@
  */
 /* @flow strict */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';

package/bpk-component-pagination/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkPagination from '@skyscanner/backpack-web/bpk-component-pagination';
 
 const Pagination = () => (

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

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';

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

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const BpkPaginationBreak = (props) => {

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

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 

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

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 import BpkButton from '../../bpk-component-button';

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

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import BpkButton from '../../bpk-component-button';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-panel/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkPanel from '@skyscanner/backpack-web/bpk-component-panel';
 
 export default () => (

package/bpk-component-panel/src/BpkPanel.js

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 

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

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkPhoneInput from '@skyscanner/backpack-web/bpk-component-phone-input';
 import BpkImage from '@skyscanner/backpack-web/bpk-component-image';
 

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -18,7 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-popover/README.md

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 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';

package/bpk-component-popover/src/BpkPopover.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import { BpkButtonLink } from '../../bpk-component-link';

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -20,7 +20,8 @@
 
 import { createPopper } from '@popperjs/core';
 import PropTypes from 'prop-types';
-import React, { Component, type Node } from 'react';
+import type { Node } from 'react';
+import { Component } from 'react';
 import focusStore from 'a11y-focus-store';
 
 import { Portal, cssModules } from '../../bpk-react-utils';
@@ -43,7 +44,7 @@ export type Props = {
   portalStyle: ?Object,
   portalClassName: ?string,
   renderTarget: ?() => ?HTMLElement,
-  popperModifiers: ?Object,
+  popperModifiers: ?Array<Object>,
 };
 
 export const propTypes = {
@@ -55,7 +56,7 @@ export const propTypes = {
   portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   portalClassName: PropTypes.string,
   renderTarget: PropTypes.func,
-  popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  popperModifiers: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
 };
 
 export const defaultProps = {

package/bpk-component-price/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkPrice, { SIZES, ALIGNS } from '@skyscanner/backpack-web/bpk-component-price';
 
 export default () => (
@@ -27,9 +26,10 @@ export default () => (
 
 | Property  | PropType | Required | Default Value |
 | --------- | -------- | -------- | ------------- |
-| title     | string   | true     | -             |
+| price     | string   | true     | -             |
 | size | oneOf(SIZES)   | false    | SIZES.small         |
 | align | oneOf(ALIGNS)   | false    | ALIGNS.left         |
-| subtitle  | string   | false    | null          |
-| description | string   | false    | null          |
+| leadingText | string   | false    | null          |
+| trailingText | string   | false    | null          |
+| previousPrice | string   | false    | null          |
 | className | string   | false    | null          |

package/bpk-component-price/src/BpkPrice.js

@@ -18,7 +18,6 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
@@ -27,19 +26,28 @@ import STYLES from './BpkPrice.module.scss';
 import { SIZES, ALIGNS } from './common-types';
 
 type Props = {
-  title: string,
+  price: string,
   size: $Values<typeof SIZES>,
   align: $Values<typeof ALIGNS>,
   className: ?string,
-  subtitle: ?string,
-  description: ?string,
+  leadingText: ?string,
+  trailingText: ?string,
+  previousPrice: ?string,
 };
 
 const getClassName = cssModules(STYLES);
 
 const BpkPrice = (props: Props) => {
-  const { align, className, description, size, subtitle, title, ...rest } =
-    props;
+  const {
+    align,
+    className,
+    leadingText,
+    previousPrice,
+    price,
+    size,
+    trailingText,
+    ...rest
+  } = props;
 
   const isSmall = size === SIZES.small;
   const isAlignRight = align === ALIGNS.right;
@@ -54,35 +62,60 @@ const BpkPrice = (props: Props) => {
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       {...rest}
     >
-      {subtitle && (
-        <BpkText
-          className={getClassName('bpk-price__subtitle')}
-          textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-          tagName="span"
-        >
-          {subtitle}
-        </BpkText>
-      )}
+      <div
+        className={getClassName(
+          previousPrice && 'bpk-price__leading',
+          isAlignRight && 'bpk-price__leading--right',
+        )}
+      >
+        {previousPrice && (
+          <BpkText
+            className={getClassName('bpk-price__previous-price')}
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+          >
+            {previousPrice}
+          </BpkText>
+        )}
+        {previousPrice && (
+          <BpkText
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+            className={getClassName('bpk-price__separator')}
+          >
+            &#67871;
+          </BpkText>
+        )}
+
+        {leadingText && (
+          <BpkText
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+          >
+            {leadingText}
+          </BpkText>
+        )}
+      </div>
       <div
         className={isAlignRight && getClassName('bpk-price__column-container')}
       >
         <BpkText
           textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
           className={getClassName(
-            'bpk-price__title',
+            'bpk-price__price',
             !isAlignRight && 'bpk-price__spacing',
           )}
           tagName="span"
         >
-          {title}
+          {price}
         </BpkText>
-        {description && (
+        {trailingText && (
           <BpkText
             textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
             tagName="span"
-            className={getClassName('bpk-price__description')}
+            className={getClassName('bpk-price__trailing')}
           >
-            {description}
+            {trailingText}
           </BpkText>
         )}
       </div>
@@ -91,20 +124,22 @@ const BpkPrice = (props: Props) => {
 };
 
 BpkPrice.propTypes = {
-  title: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired,
   size: PropTypes.oneOf(Object.keys(SIZES)),
   align: PropTypes.oneOf(Object.keys(ALIGNS)),
   className: PropTypes.string,
-  subtitle: PropTypes.string,
-  description: PropTypes.string,
+  leadingText: PropTypes.string,
+  trailingText: PropTypes.string,
+  previousPrice: PropTypes.string,
 };
 
 BpkPrice.defaultProps = {
   size: SIZES.small,
   align: ALIGNS.left,
   className: null,
-  subtitle: null,
-  description: null,
+  leadingText: null,
+  trailingText: null,
+  previousPrice: null,
 };
 
 export default BpkPrice;

package/bpk-component-price/src/BpkPrice.module.scss

@@ -21,6 +21,7 @@
 .bpk-price {
   display: flex;
   flex-direction: column;
+  color: $bpk-text-secondary-day;
 
   &--right {
     text-align: right;
@@ -30,17 +31,30 @@
     }
   }
 
-  &__subtitle {
-    color: $bpk-text-secondary-day;
+  &__leading {
+    display: flex;
+    flex-direction: row;
+
+    &--right {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__previous-price {
     text-decoration-line: line-through;
   }
 
+  &__separator {
+    margin: 0 bpk-spacing-sm();
+  }
+
   &__column-container {
     display: flex;
     flex-direction: column;
   }
 
-  &__title {
+  &__price {
+    color: $bpk-text-primary-day;
     word-break: break-all;
   }
 
@@ -54,8 +68,7 @@
     }
   }
 
-  &__description {
-    color: $bpk-text-secondary-day;
+  &__trailing {
     white-space: nowrap;
   }
 }

package/bpk-component-progress/README.md

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkProgress from '@skyscanner/backpack-web/bpk-component-progress';
 
 const Progress = () => (

package/bpk-component-progress/src/BpkProgress.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import clamp from 'lodash.clamp';
 
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-radio/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkRadio from '@skyscanner/backpack-web/bpk-component-radio';
 
 export default () => (

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

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 

package/bpk-component-rating/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkRating, { RATING_SIZES, RATING_SCALES } from '@skyscanner/backpack-web/bpk-component-rating';
 
 export default () => (

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

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
 
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
 

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

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkRtlToggle from '@skyscanner/backpack-web/bpk-component-rtl-toggle';
 
 export default () => (

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { BpkButtonLink } from '../../bpk-component-link';
@@ -32,7 +32,7 @@ const setDirection = (direction) => {
   htmlElement.dispatchEvent(new Event(DIRECTION_CHANGE_EVENT));
 };
 
-class BpkRtlToggle extends React.Component {
+class BpkRtlToggle extends Component {
   constructor(props) {
     super(props);
 

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 import { wrapDisplayName } from '../../bpk-react-utils';
 

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

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 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';

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 import {
   BpkCalendarDate,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Component } from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
 import { VariableSizeList as List } from 'react-window';
 
@@ -42,7 +42,7 @@ const COLUMN_COUNT = 7;
 // Most calendar grids have 5 rows:
 const ESTIMATED_MONTH_ITEM_HEIGHT = BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT;
 
-class BpkScrollableCalendarGridList extends React.Component {
+class BpkScrollableCalendarGridList extends Component {
   constructor(props) {
     super(props);
 

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

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkSectionList, { BpkSectionListSection, BpkSectionListItem } from '@skyscanner/backpack-web/bpk-component-section-list';
 
 export default () => (

package/bpk-component-section-list/src/BpkSectionList.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 
 type Props = {
   children: Node,

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 import BpkLargeChevronRightIcon from '../../bpk-component-icon/lg/chevron-right';

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -19,7 +19,8 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
+import { Children } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
@@ -44,7 +45,7 @@ const BpkSectionListSection = (props: Props) => {
         </header>
       )}
       <ul className={getClassName('bpk-section-list-section')}>
-        {React.Children.map(children, (child) => (
+        {Children.map(children, (child) => (
           <li>{child}</li>
         ))}
       </ul>

package/bpk-component-select/README.md

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage (controlled)
 
 ```js
-import React from 'react';
 import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';
 
 export default () => (
@@ -29,7 +28,6 @@ export default () => (
 ## Usage (uncontrolled)
 
 ```js
-import React from 'react';
 import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';
 
 export default () => (