@skyscanner/backpack-web 0.2.0 → 1.0.0

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

@@ -17,29 +17,23 @@
  */
 /* @flow strict */
 
-import React from 'react';
+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_TYPES, RATING_SCALES } from './common-types';
+import { RATING_SIZES, RATING_SCALES } from './common-types';
 
 const getClassName = cssModules(STYLES);
 
-// The thresholds are what determine whether a rating is low, medium or high.
-// They are expressed as a percentage of the scale. For example, on a 1-5 scale,
-// 5 * 0.8 (4) would be a high rating.
-const MEDIUM_RATING_THRESHOLD = 0.6;
-const HIGH_RATING_THRESHOLD = 0.8;
-
 const getMinValue = () =>
   // Currently the min value is zero no matter what scale is used.
   // If this ever changes, this function should be changed to return
   // different values based on the rating scale.
   0;
+
 const getMaxValue = (ratingScale) => {
   switch (ratingScale) {
     case RATING_SCALES.zeroToFive:
@@ -49,22 +43,15 @@ const getMaxValue = (ratingScale) => {
   }
 };
 
-const getMediumRatingThreshold = (ratingScale) =>
-  getMaxValue(ratingScale) * MEDIUM_RATING_THRESHOLD;
-
-const getHighRatingThreshold = (ratingScale) =>
-  getMaxValue(ratingScale) * HIGH_RATING_THRESHOLD;
-
-export type Props = {
+type Props = {
   ariaLabel: string,
+  className: ?string,
   ratingScale: $Values<typeof RATING_SCALES>,
+  showScale: ?boolean,
   size: $Values<typeof RATING_SIZES>,
-  title: string,
-  type: $Values<typeof RATING_TYPES>,
-  value: number,
-  vertical: boolean,
-  className: ?string,
   subtitle: ?string,
+  title: string | Node,
+  value: number,
 };
 
 const BpkRating = (props: Props) => {
@@ -72,33 +59,36 @@ const BpkRating = (props: Props) => {
     ariaLabel,
     className,
     ratingScale,
+    showScale,
     size,
     subtitle,
     title,
-    type,
     value,
-    vertical,
     ...rest
   } = props;
+
   const classNames = [getClassName('bpk-rating', className)];
-  const scoreStyles = [
-    getClassName(
-      'bpk-rating__component',
-      `bpk-rating--${size}-rating`,
-      type === RATING_TYPES.pill && `bpk-rating--${size}-pill`,
-    ),
-  ];
+  const valueStyles = [getClassName('bpk-rating__value')];
+  const scaleStyles = [getClassName('bpk-rating__scale')];
   const textWrapperStyles = [getClassName('bpk-rating__text-wrapper')];
-  const textStyles = [getClassName('bpk-rating__text')];
+  const titleStyles = [];
+  const subtitleStyles = [getClassName('bpk-rating__subtitle')];
 
-  let titleTextSize = TEXT_STYLES.bodyDefault;
   let valueTextSize = TEXT_STYLES.label1;
-  if (size === RATING_SIZES.lg) {
-    titleTextSize = TEXT_STYLES.bodyLongform;
-    valueTextSize = TEXT_STYLES.heading4;
-  } else if (size === RATING_SIZES.sm) {
-    titleTextSize = TEXT_STYLES.footnote;
-    valueTextSize = TEXT_STYLES.label2;
+  let scaleTextSize = TEXT_STYLES.caption;
+  let titleTextSize = TEXT_STYLES.label1;
+  let subtitleTextSize = TEXT_STYLES.caption;
+
+  if (size === RATING_SIZES.large) {
+    classNames.push(getClassName('bpk-rating--large'));
+    textWrapperStyles.push(getClassName('bpk-rating__text-wrapper--large'));
+    titleStyles.push(getClassName('bpk-rating__title--large'));
+    subtitleStyles.push(getClassName('bpk-rating__subtitle--large'));
+
+    valueTextSize = TEXT_STYLES.hero5;
+    scaleTextSize = TEXT_STYLES.bodyDefault;
+    titleTextSize = TEXT_STYLES.heading5;
+    subtitleTextSize = TEXT_STYLES.bodyDefault;
   }
 
   const minValue = getMinValue();
@@ -106,27 +96,8 @@ const BpkRating = (props: Props) => {
 
   let adjustedValue = value;
 
-  if (adjustedValue >= getHighRatingThreshold(ratingScale)) {
-    scoreStyles.push(getClassName('bpk-rating--high-rating'));
-  } else if (adjustedValue >= getMediumRatingThreshold(ratingScale)) {
-    scoreStyles.push(getClassName('bpk-rating--medium-rating'));
-  } else {
-    scoreStyles.push(getClassName('bpk-rating--low-rating'));
-  }
-
-  if (vertical) {
-    classNames.push(getClassName('bpk-rating--vertical'));
-    textWrapperStyles.push(getClassName('bpk-rating__text-wrapper--vertical'));
-    textStyles.push(getClassName('bpk-rating__text--vertical'));
-  } else {
-    textWrapperStyles.push(
-      getClassName('bpk-rating__text-wrapper--horizontal'),
-    );
-    textStyles.push(getClassName('bpk-rating__text--horizontal'));
-  }
-
   if (adjustedValue >= maxValue || adjustedValue <= minValue) {
-    adjustedValue = clamp(adjustedValue, minValue, maxValue);
+    adjustedValue = clamp(adjustedValue, minValue, maxValue).toFixed(1);
   } else {
     adjustedValue = value.toFixed(1);
   }
@@ -137,29 +108,37 @@ const BpkRating = (props: Props) => {
       <BpkText
         textStyle={valueTextSize}
         tagName="span"
-        className={scoreStyles.join(' ')}
+        className={valueStyles.join(' ')}
         aria-hidden="true"
       >
         {adjustedValue}
+
+        {showScale && (
+          <BpkText
+            textStyle={scaleTextSize}
+            className={scaleStyles.join(' ')}
+            tagName="span"
+            aria-hidden="true"
+          >
+            /{maxValue}
+          </BpkText>
+        )}
       </BpkText>
+
       <div className={textWrapperStyles.join(' ')}>
         <BpkText
-          className={textStyles.join(' ')}
           textStyle={titleTextSize}
+          className={titleStyles.join(' ')}
           tagName="span"
           aria-hidden="true"
         >
-          <strong>{title}</strong>{' '}
-          {subtitle && type === RATING_TYPES.pill && <span>{subtitle}</span>}
+          {title}
         </BpkText>
-        {subtitle && type !== RATING_TYPES.pill && (
+
+        {subtitle && (
           <BpkText
-            className={textStyles.join(' ')}
-            textStyle={
-              size === RATING_SIZES.lg
-                ? TEXT_STYLES.footnote
-                : TEXT_STYLES.caption
-            }
+            className={subtitleStyles.join(' ')}
+            textStyle={subtitleTextSize}
             tagName="span"
             aria-hidden="true"
           >
@@ -173,23 +152,21 @@ const BpkRating = (props: Props) => {
 
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   value: PropTypes.number.isRequired,
   className: PropTypes.string,
   ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
   size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
   subtitle: PropTypes.string,
-  type: PropTypes.oneOf([RATING_TYPES.default, RATING_TYPES.pill]),
-  vertical: PropTypes.bool,
+  showScale: PropTypes.bool,
 };
 
 BpkRating.defaultProps = {
   className: null,
-  ratingScale: RATING_SCALES.zeroToTen,
+  ratingScale: RATING_SCALES.zeroToFive,
   size: RATING_SIZES.base,
   subtitle: null,
-  type: RATING_TYPES.default,
-  vertical: false,
+  showScale: true,
 };
 
 export default BpkRating;

package/bpk-component-rating/src/BpkRating.module.scss

@@ -22,127 +22,65 @@ $bpk-spacing-v2: true;
 
 .bpk-rating {
   display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
 
-  &--vertical {
-    flex-direction: column;
-  }
-
-  &__component {
-    justify-content: center;
+  &--large {
     align-items: center;
-    border-radius: 50%;
-    color: $bpk-color-white;
   }
 
-  &--base-rating {
+  &__value {
     display: flex;
-    width: bpk-spacing-lg() * 2;
-    height: bpk-spacing-lg() * 2;
-  }
+    padding-right: bpk-spacing-md();
+    justify-content: center;
+    align-items: baseline;
+    color: $bpk-color-sky-gray;
 
-  &--lg-rating {
-    display: flex;
-    width: bpk-spacing-xxl() + (bpk-spacing-sm() * 5);
-    height: bpk-spacing-xxl() + (bpk-spacing-sm() * 5);
+    @include bpk-rtl {
+      padding-right: 0;
+      padding-left: bpk-spacing-md();
+    }
   }
 
-  &--sm-rating {
+  &__text-wrapper {
     display: flex;
-    width: bpk-spacing-sm() * 9;
-    height: bpk-spacing-sm() * 9;
-  }
+    flex-direction: row;
+    align-items: baseline;
+    white-space: nowrap;
 
-  &--sm-pill {
-    width: bpk-spacing-sm() * 9;
-    height: bpk-spacing-xl() - (bpk-spacing-sm() / 2);
-    border-radius: $bpk-border-radius-pill;
+    &--large {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 
-  &--base-pill {
-    width: bpk-spacing-lg() * 2;
-    height: bpk-spacing-sm() * 9;
-    border-radius: $bpk-border-radius-pill;
+  &__scale {
+    color: $bpk-color-sky-gray-tint-02;
   }
 
-  &--lg-pill {
-    width: (bpk-spacing-xl() * 2) + (bpk-spacing-sm() / 2);
-    height: bpk-spacing-xxl() + (bpk-spacing-sm() / 2);
-    border-radius: $bpk-border-radius-pill-lg;
+  &__title {
+    &--large {
+      padding-top: $bpk-one-pixel-rem;
+    }
   }
 
-  &__text-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    &--horizontal {
-      // We could use `padding-inline-start: $bpk-spacing-sm` here, but it's unsupported in IE
-      padding-left: bpk-spacing-sm() * 3;
+  &__subtitle {
+    padding-left: bpk-spacing-md();
+    color: $bpk-color-sky-gray-tint-02;
 
-      @include bpk-rtl {
-        padding-right: bpk-spacing-sm() * 3;
-      }
-    }
-
-    &--vertical {
-      padding-top: bpk-spacing-sm() + ($bpk-one-pixel-rem * 2);
+    @include bpk-rtl {
+      padding-right: bpk-spacing-md();
+      padding-left: 0;
     }
-  }
 
-  &__text {
-    &--horizontal {
-      // We could use `text-align: start` here, but it's unsupported in IE
-      text-align: left;
+    &--large {
+      padding-top: $bpk-one-pixel-rem;
+      padding-left: 0;
 
       @include bpk-rtl {
-        text-align: right;
+        padding-right: 0;
+        padding-left: 0;
       }
     }
-
-    &--vertical {
-      align-self: center;
-      text-align: center;
-    }
-  }
-
-  &--high-rating {
-    align-self: center;
-    color: $bpk-color-sky-gray;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-rating-high-text-color,
-      $bpk-color-sky-gray
-    );
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-rating-high-color,
-      $bpk-color-glencoe
-    );
-  }
-
-  &--medium-rating {
-    align-self: center;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-rating-medium-text-color,
-      $bpk-color-sky-gray
-    );
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-rating-medium-color,
-      $bpk-color-erfoud
-    );
-  }
-
-  &--low-rating {
-    align-self: center;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-rating-low-color,
-      $bpk-color-panjin
-    );
   }
 }

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

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

package/bpk-component-rtl-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rtl-toggle",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "description": "Backpack RTL toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.6",
+    "bpk-component-link": "^3.1.8",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

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

@@ -18,8 +18,7 @@
 
 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,8 +17,7 @@
  */
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.11",
+  "version": "6.1.13",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.2.0",
-    "bpk-component-calendar": "^11.1.11",
-    "bpk-component-text": "^7.0.0",
-    "bpk-mixins": "^29.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-calendar": "^11.1.13",
+    "bpk-component-text": "^7.0.2",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-virtualized": "^9.22.3"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.5"
+    "bpk-storybook-utils": "^1.1.7"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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,11 +18,10 @@
 
 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,13 +17,12 @@
  */
 
 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,6 +18,8 @@
 
 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,
@@ -26,12 +28,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.7",
+  "version": "3.2.9",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.2.0",
-    "bpk-component-icon": "^9.2.7",
-    "bpk-component-text": "^7.0.0",
-    "bpk-mixins": "^29.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-icon": "^9.2.9",
+    "bpk-component-text": "^7.0.2",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.5"
+    "bpk-storybook-utils": "^1.1.7"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -20,10 +20,9 @@
 
 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,9 +20,8 @@
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "5.1.6",
+  "version": "5.1.8",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^29.0.0",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.5"
+    "bpk-storybook-utils": "^1.1.7"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -19,8 +19,7 @@
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -13,7 +13,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "dependencies": {
-    "bpk-mixins": "^29.0.0",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },