@skyscanner/backpack-web 0.4.0 → 1.0.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "Backpack panel component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^30.0.0",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.12",
+  "version": "7.1.13",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^7.0.0",
-    "bpk-component-input": "^6.1.10",
-    "bpk-component-label": "^5.1.7",
-    "bpk-component-select": "^5.1.7",
-    "bpk-component-text": "^7.0.1",
-    "bpk-mixins": "^30.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-input": "^6.1.11",
+    "bpk-component-label": "^5.1.8",
+    "bpk-component-select": "^5.1.8",
+    "bpk-component-text": "^7.0.2",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -27,7 +27,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.12",
-    "bpk-component-image": "^5.1.8"
+    "bpk-component-fieldset": "^4.1.13",
+    "bpk-component-image": "^5.1.9"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "4.1.10",
+  "version": "4.1.11",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
     "@skyscanner/popper.js": "^1.12.9-beta.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.8",
-    "bpk-component-link": "^3.1.7",
-    "bpk-component-text": "^7.0.1",
-    "bpk-mixins": "^30.0.0",
+    "bpk-component-close-button": "^3.1.9",
+    "bpk-component-link": "^3.1.8",
+    "bpk-component-text": "^7.0.2",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -28,8 +28,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.2",
-    "bpk-component-content-container": "^5.0.1",
-    "bpk-component-input": "^6.1.10"
+    "bpk-component-button": "^6.2.3",
+    "bpk-component-content-container": "^5.0.2",
+    "bpk-component-input": "^6.1.11"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-progress",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "Backpack progress bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^7.0.0",
-    "bpk-mixins": "^30.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
@@ -24,7 +24,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.2",
-    "bpk-storybook-utils": "^1.1.6"
+    "bpk-component-button": "^6.2.3",
+    "bpk-storybook-utils": "^1.1.7"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-radio",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "description": "Backpack radio button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^30.0.0",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -22,7 +22,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^7.0.0",
-    "bpk-storybook-utils": "^1.1.6"
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-storybook-utils": "^1.1.7"
   }
 }

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,47 @@ 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 This place was amazing"
+    title="Very good"
+    subtitle="This place was amazing"
     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}
   />
 
-  // 0-5 scale
+  // Show scale rating
   <BpkRating
-    ariaLabel="2 It was ok I guess"
-    title="Meh"
-    value={2}
-    ratingScale={RATING_SCALES.zeroToFive}
+    ariaLabel="3.8 Good Nice choice"
+    title="Good"
+    subtitle="Nice choice"
+    value={3.8}
+  />
+
+  // 0-10 scale
+  <BpkRating
+    ariaLabel="9.9 Awesome It was almost perfect"
+    title="Awesome"
+    subtitle="It was almost perfect"
+    value={9.9}
+    ratingScale={RATING_SCALES.zeroToTen}
   />
 );
 ```
@@ -55,19 +62,10 @@ export default () => (
 | Property  | PropType              | Required | Default Value     |
 | --------- | --------------------- | -------- | ----------------- |
 | ariaLabel | string                | true     | -                 |
-| title     | string                | true     | -                 |
+| title     | oneOfType(string, node) | true     | -                 |
 | value     | 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "3.1.8",
+  "version": "4.0.1",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^30.0.0",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^7.0.0",
-    "bpk-component-text": "^7.0.1"
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-text": "^7.0.2"
   }
 }

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;