@skyscanner/backpack-web 18.2.1 → 20.0.0

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';

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,11 +17,11 @@
  */
 
 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';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import {
   DateUtils,
   BpkCalendarGridPropTypes,
@@ -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);
 
@@ -174,10 +174,6 @@ BpkScrollableCalendarGridList.propTypes = {
   className: PropTypes.string,
   minDate: PropTypes.instanceOf(Date).isRequired,
   maxDate: PropTypes.instanceOf(Date).isRequired,
-  selectedDate: deprecated(
-    PropTypes.instanceOf(Date),
-    'Use selectionConfiguration to set selectedDate',
-  ),
   focusedDate: PropTypes.instanceOf(Date),
   ...BpkCalendarGridPropTypes,
 };
@@ -185,7 +181,6 @@ BpkScrollableCalendarGridList.propTypes = {
 BpkScrollableCalendarGridList.defaultProps = {
   className: null,
   focusedDate: null,
-  selectedDate: null,
 };
 
 export default BpkScrollableCalendarGridList;

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 () => (

package/bpk-component-select/src/BpkSelect.js

@@ -18,7 +18,8 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Element } from 'react';
+import type { Element } from 'react';
+import { cloneElement } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
@@ -85,7 +86,7 @@ const BpkSelect = (props: Props) => {
   if (image) {
     return (
       <div className={getClassName('bpk-select-wrapper', wrapperClassName)}>
-        {React.cloneElement(image, {
+        {cloneElement(image, {
           'aria-hidden': true,
           className: getClassName(
             'bpk-select-wrapper__image',

package/bpk-component-skip-link/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 BpkSkipLink from '@skyscanner/backpack-web/bpk-component-skip-link';
 
 export default () => <BpkSkipLink href="#main" label="Skip to main content" />;

package/bpk-component-skip-link/src/BpkSkipLink.js

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

package/bpk-component-slider/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 BpkSlider from '@skyscanner/backpack-web/bpk-component-slider';
 
 const Slider = () => (