@skyscanner/backpack-web 1.0.0 → 2.0.1

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

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationPage from './BpkPaginationPage';
 import BpkPaginationBreak from './BpkPaginationBreak';

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

@@ -18,10 +18,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
-import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
+
+import { cssModules } from '../../bpk-react-utils';
+import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
+import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
 
 import STYLES from './BpkPaginationNudger.module.scss';
 

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

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import BpkButton from 'bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import BpkButton from '../../bpk-component-button';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPaginationPage.module.scss';
 

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

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { secondaryThemeAttributes } from 'bpk-component-button';
+import { secondaryThemeAttributes } from '../../bpk-component-button';
 
 export default [
   ...secondaryThemeAttributes,

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

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPanel.module.scss';
 

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

@@ -20,10 +20,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
-import BpkLabel from 'bpk-component-label';
-import BpkSelect from 'bpk-component-select';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
+import BpkLabel from '../../bpk-component-label';
+import BpkSelect from '../../bpk-component-select';
 
 import STYLES from './BpkPhoneInput.module.scss';
 

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

@@ -20,10 +20,11 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
-import { BpkButtonLink } from 'bpk-component-link';
-import BpkCloseButton from 'bpk-component-close-button';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { BpkButtonLink } from '../../bpk-component-link';
+import BpkCloseButton from '../../bpk-component-close-button';
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPopover.module.scss';
 import { ARROW_ID } from './constants';

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

@@ -22,7 +22,8 @@ import Popper from '@skyscanner/popper.js';
 import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
-import { Portal, cssModules } from 'bpk-react-utils';
+
+import { Portal, cssModules } from '../../bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';
 import STYLES from './BpkPopover.module.scss';

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from 'bpk-component-link';
+import { themeAttributes as linkAttributes } from '../../bpk-component-link';
 
 export default [...linkAttributes];

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

@@ -22,7 +22,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import clamp from 'lodash.clamp';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkProgress.module.scss';
 

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

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkRadio.module.scss';
 

package/bpk-component-rating/README.md

@@ -24,9 +24,9 @@ export default () => (
 
   // Large size rating
   <BpkRating
-    ariaLabel="4.4 Very good This place was amazing"
+    ariaLabel="4.4 Very good 120 reviews"
     title="Very good"
-    subtitle="This place was amazing"
+    subtitle="120 reviews"
     size={RATING_SIZES.large}
     value={4.4}
   />
@@ -40,17 +40,26 @@ export default () => (
 
   // Show scale rating
   <BpkRating
-    ariaLabel="3.8 Good Nice choice"
+    ariaLabel="3.8 Good 530 reviews"
     title="Good"
-    subtitle="Nice choice"
+    subtitle="530 reviews"
     value={3.8}
   />
 
+  // Hide scale rating
+  <BpkRating
+    ariaLabel="3.8 Good 530 reviews"
+    title="Good"
+    subtitle="530 reviews"
+    value={3.8}
+    showScale={false}
+  />
+
   // 0-10 scale
   <BpkRating
-    ariaLabel="9.9 Awesome It was almost perfect"
+    ariaLabel="9.9 Awesome 6,549 reviews"
     title="Awesome"
-    subtitle="It was almost perfect"
+    subtitle="6,549 reviews"
     value={9.9}
     ratingScale={RATING_SCALES.zeroToTen}
   />
@@ -63,7 +72,7 @@ export default () => (
 | --------- | --------------------- | -------- | ----------------- |
 | ariaLabel | string                | true     | -                 |
 | title     | oneOfType(string, node) | true     | -                 |
-| value     | number                | true     | -                 |
+| value     | oneOfType(string, number) | true     | -               |
 | className | string                | false    | null              |
 | ratingScale | oneOf(RATING_SCALES) | false    | RATING_SCALES.zeroToFive |
 | size      | oneOf(RATING_SIZES)   | false    | RATING_SIZES.base |

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

@@ -20,8 +20,9 @@
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkRating.module.scss';
 import { RATING_SIZES, RATING_SCALES } from './common-types';
@@ -51,7 +52,7 @@ type Props = {
   size: $Values<typeof RATING_SIZES>,
   subtitle: ?string,
   title: string | Node,
-  value: number,
+  value: string | number,
 };
 
 const BpkRating = (props: Props) => {
@@ -97,9 +98,7 @@ const BpkRating = (props: Props) => {
   let adjustedValue = value;
 
   if (adjustedValue >= maxValue || adjustedValue <= minValue) {
-    adjustedValue = clamp(adjustedValue, minValue, maxValue).toFixed(1);
-  } else {
-    adjustedValue = value.toFixed(1);
+    adjustedValue = clamp(adjustedValue, minValue, maxValue);
   }
 
   return (
@@ -153,7 +152,7 @@ const BpkRating = (props: Props) => {
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  value: PropTypes.number.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   className: PropTypes.string,
   ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
   size: PropTypes.oneOf(Object.keys(RATING_SIZES)),

package/bpk-component-rating/src/common-types.js

@@ -18,7 +18,7 @@
 
 /* @flow */
 
-export const RATING_SIZES = { base: 'base', large: 'lg' };
+export const RATING_SIZES = { base: 'base', large: 'large' };
 
 export const RATING_SCALES = {
   zeroToFive: 'zeroToFive',

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

@@ -18,7 +18,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BpkButtonLink } from 'bpk-component-link';
+
+import { BpkButtonLink } from '../../bpk-component-link';
 
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';
 

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

@@ -17,7 +17,8 @@
  */
 
 import React, { Component } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';
 

package/bpk-component-scrollable-calendar/index.js

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
 
-import { CALENDAR_SELECTION_TYPE } from 'bpk-component-calendar';
+import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
 
 import BpkScrollableCalendar from './src/BpkScrollableCalendar';
 import BpkScrollableCalendarDate from './src/BpkScrollableCalendarDate';

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

@@ -21,7 +21,7 @@ import {
   BpkCalendarGridHeader,
   withCalendarState,
   composeCalendar,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 import BpkscrollableCalendarDate from './BpkScrollableCalendarDate';
 import BpkScrollableCalendarGridList from './BpkScrollableCalendarGridList';

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

@@ -18,10 +18,11 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+
 import {
   BpkCalendarDate,
   BpkCalendarDatePropTypes,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 class BpkScrollableCalendarDate extends PureComponent {
   render() {

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

@@ -17,12 +17,13 @@
  */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {
   BpkCalendarGrid,
   BpkCalendarGridPropTypes,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 import STYLES from './BpkScrollableCalendarGrid.module.scss';
 

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

@@ -18,8 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
-import { DateUtils, BpkCalendarGridPropTypes } from 'bpk-component-calendar';
 import { startOfDay, startOfMonth } from 'date-fns';
 import {
   AutoSizer,
@@ -28,6 +26,12 @@ import {
   CellMeasurerCache,
 } from 'react-virtualized';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import {
+  DateUtils,
+  BpkCalendarGridPropTypes,
+} from '../../bpk-component-calendar';
+
 import STYLES from './BpkScrollableCalendarGridList.module.scss';
 import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid';
 import getMonthsArray from './utils';

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { DateUtils } from 'bpk-component-calendar';
+import { DateUtils } from '../../bpk-component-calendar';
 
 const getMonthsArray = (startDate, count) => {
   const months = [];

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

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkLargeChevronRightIcon from 'bpk-component-icon/lg/chevron-right';
-import { withRtlSupport } from 'bpk-component-icon';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkLargeChevronRightIcon from '../../bpk-component-icon/lg/chevron-right';
+import { withRtlSupport } from '../../bpk-component-icon';
 
 import STYLES from './BpkSectionListItem.module.scss';
 

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

@@ -20,8 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkSectionListSection.module.scss';
 

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

@@ -19,7 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSelect.module.scss';
 

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

@@ -19,7 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSkipLink.module.scss';
 

package/bpk-component-slider/src/BpkSlider.js

@@ -19,7 +19,8 @@
 import React from 'react';
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
-import { cssModules, isRTL } from 'bpk-react-utils';
+
+import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkSlider.module.scss';
 

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
 import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
 import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
 import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -20,7 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';
 import STYLES from './BpkInteractiveStar.module.scss';

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -20,7 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import { STAR_TYPES } from './BpkStar';
 import BpkInteractiveStar from './BpkInteractiveStar';

package/bpk-component-star-rating/src/BpkStar.js

@@ -20,14 +20,15 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import SmallIcon from 'bpk-component-icon/sm/star';
-import LargeIcon from 'bpk-component-icon/lg/star';
-import OutlineSmallIcon from 'bpk-component-icon/sm/star-outline';
-import OutlineLargeIcon from 'bpk-component-icon/lg/star-outline';
-import HalfSmallIcon from 'bpk-component-icon/sm/star-half';
-import HalfLargeIcon from 'bpk-component-icon/lg/star-half';
-import { withRtlSupport } from 'bpk-component-icon';
-import { cssModules } from 'bpk-react-utils';
+
+import SmallIcon from '../../bpk-component-icon/sm/star';
+import LargeIcon from '../../bpk-component-icon/lg/star';
+import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline';
+import OutlineLargeIcon from '../../bpk-component-icon/lg/star-outline';
+import HalfSmallIcon from '../../bpk-component-icon/sm/star-half';
+import HalfLargeIcon from '../../bpk-component-icon/lg/star-half';
+import { withRtlSupport } from '../../bpk-component-icon';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkStar.module.scss';
 

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -20,7 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkStar, { STAR_TYPES } from './BpkStar';
 import STYLES from './BpkStarRating.module.scss';

package/bpk-component-star-rating/src/withInteractiveStarRatingState.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 const withInteractiveStarRatingState = (
   InteractiveStarRating: ComponentType<any>,

package/bpk-component-switch/src/BpkSwitch.js

@@ -19,7 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSwitch.module.scss';
 

package/bpk-component-table/src/BpkTable.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';
 

package/bpk-component-table/src/BpkTableCell.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';
 

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';
 

package/bpk-component-text/src/BpkText.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkText.module.scss';
 

package/bpk-component-textarea/src/BpkTextarea.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTextarea.module.scss';
 

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -18,9 +18,10 @@
 
 import React from 'react';
 import Konami from 'konami';
-import BpkLabel from 'bpk-component-label';
-import BpkSelect from 'bpk-component-select';
-import { cssModules } from 'bpk-react-utils';
+
+import BpkLabel from '../../bpk-component-label';
+import BpkSelect from '../../bpk-component-select';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkThemeToggle.module.scss';
 import bpkCustomThemes from './theming';

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -18,7 +18,8 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from 'bpk-react-utils';
+
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
 

package/bpk-component-ticket/src/BpkTicket.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTicket.module.scss';
 

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -26,7 +26,8 @@ The actual component that developers create (i.e. the default export from this p
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTooltip.module.scss';
 import { ARROW_ID, TOOLTIP_TYPES } from './constants';