@skyscanner/backpack-web 0.4.0 → 2.0.0

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

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

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

@@ -18,8 +18,7 @@
 
 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,11 +18,10 @@
 
 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,11 +16,10 @@
  * limitations under the License.
  */
 
+import BpkButton from 'bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import BpkButton from '../../bpk-component-button';
-import { cssModules } from '../../bpk-react-utils';
+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,8 +18,7 @@
 
 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,11 +20,10 @@
 
 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,11 +20,10 @@
 
 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,8 +22,7 @@ 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,8 +22,7 @@ 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,8 +20,7 @@
 
 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

@@ -12,40 +12,56 @@ npm install bpk-component-rating --save-dev
 
 ```js
 import React from 'react';
-import BpkRating, { RATING_SIZES, RATING_SCALES, RATING_TYPES } from 'bpk-component-rating';
+import BpkRating, { RATING_SIZES, RATING_SCALES } from 'bpk-component-rating';
 
 export default () => (
   <BpkRating
-    ariaLabel="9 Excellent would recommend"
+    ariaLabel="4.8 Excellent 2,420 reviews"
+    value={4.8}
     title="Excellent"
-    subtitle="It was almost perfect!"
-    value={9}
+    subtitle="2,420 reviews"
   />
 
-  // Large rating
+  // Large size rating
   <BpkRating
-    ariaLabel="9 Excellent would recommend"
-    title="Excellent"
-    subtitle="It was almost perfect!"
+    ariaLabel="4.4 Very good 120 reviews"
+    title="Very good"
+    subtitle="120 reviews"
     size={RATING_SIZES.large}
-    value={9}
+    value={4.4}
   />
 
-  // Pill-shaped rating
+  // Title only rating
   <BpkRating
-    ariaLabel="9 Excellent would recommend"
-    title="Excellent"
-    subtitle="It was almost perfect!"
-    type={RATING_TYPE.pill}
-    value={9}
+    ariaLabel="2.3 Bad"
+    title="Bad"
+    value={2.3}
+  />
+
+  // Show scale rating
+  <BpkRating
+    ariaLabel="3.8 Good 530 reviews"
+    title="Good"
+    subtitle="530 reviews"
+    value={3.8}
   />
 
-  // 0-5 scale
+  // Hide scale rating
   <BpkRating
-    ariaLabel="2 It was ok I guess"
-    title="Meh"
-    value={2}
-    ratingScale={RATING_SCALES.zeroToFive}
+    ariaLabel="3.8 Good 530 reviews"
+    title="Good"
+    subtitle="530 reviews"
+    value={3.8}
+    showScale={false}
+  />
+
+  // 0-10 scale
+  <BpkRating
+    ariaLabel="9.9 Awesome 6,549 reviews"
+    title="Awesome"
+    subtitle="6,549 reviews"
+    value={9.9}
+    ratingScale={RATING_SCALES.zeroToTen}
   />
 );
 ```
@@ -55,19 +71,10 @@ export default () => (
 | Property  | PropType              | Required | Default Value     |
 | --------- | --------------------- | -------- | ----------------- |
 | ariaLabel | string                | true     | -                 |
-| title     | string                | true     | -                 |
-| value     | number                | true     | -                 |
+| title     | oneOfType(string, node) | true     | -                 |
+| value     | oneOfType(string, number) | true     | -               |
 | className | string                | false    | null              |
-| ratingScale | oneOf(RATING_SCALES) | false    | RATING_SCALES.zeroToTen |
+| ratingScale | oneOf(RATING_SCALES) | false    | RATING_SCALES.zeroToFive |
 | size      | oneOf(RATING_SIZES)   | false    | RATING_SIZES.base |
 | subtitle  | string                | false    | null              |
-| type      | oneOf(RATING_TYPES)   | false    | RATING_TYPES.default |
-| vertical  | boolean               | false    | false             |
-
-## Theme props
-
-* `ratingHighColor`
-* `ratingHighTextColor`
-* `ratingMediumColor`
-* `ratingMediumTextColor`
-* `ratingLowColor`
+| showScale  | boolean               | false    | true             |

package/bpk-component-rating/index.js

@@ -18,8 +18,7 @@
 /* @flow strict */
 
 import BpkRating from './src/BpkRating';
-import { RATING_SIZES, RATING_TYPES, RATING_SCALES } from './src/common-types';
-import themeAttributes from './src/themeAttributes';
+import { RATING_SIZES, RATING_SCALES } from './src/common-types';
 
 export default BpkRating;
-export { RATING_SIZES, RATING_TYPES, RATING_SCALES, themeAttributes };
+export { RATING_SIZES, RATING_SCALES };

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: string | 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,29 +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);
-  } else {
-    adjustedValue = value.toFixed(1);
   }
 
   return (
@@ -137,29 +106,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 +150,21 @@ const BpkRating = (props: Props) => {
 
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  value: PropTypes.number.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).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)),
   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: 'large' };
 
 export const RATING_SCALES = {
   zeroToFive: 'zeroToFive',