@skyscanner/backpack-web 0.2.0 → 1.0.0

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "4.0.5",
+  "version": "4.0.7",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.1",
-    "bpk-mixins": "^29.0.0",
+    "bpk-component-button": "^6.2.3",
+    "bpk-mixins": "^31.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -23,6 +23,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.7"
+    "bpk-component-icon": "^9.2.9"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "description": "Backpack panel component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^29.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.11",
+  "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": "^6.2.0",
-    "bpk-component-input": "^6.1.9",
-    "bpk-component-label": "^5.1.6",
-    "bpk-component-select": "^5.1.6",
-    "bpk-component-text": "^7.0.0",
-    "bpk-mixins": "^29.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.11",
-    "bpk-component-image": "^5.1.7"
+    "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.9",
+  "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.7",
-    "bpk-component-link": "^3.1.6",
-    "bpk-component-text": "^7.0.0",
-    "bpk-mixins": "^29.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.1",
-    "bpk-component-content-container": "^5.0.0",
-    "bpk-component-input": "^6.1.9"
+    "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.6",
+  "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": "^6.2.0",
-    "bpk-mixins": "^29.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.1",
-    "bpk-storybook-utils": "^1.1.5"
+    "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.7",
+  "version": "3.1.9",
   "description": "Backpack radio button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^29.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": "^6.2.0",
-    "bpk-storybook-utils": "^1.1.5"
+    "@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.7",
+  "version": "4.0.1",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^29.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": "^6.2.0",
-    "bpk-component-text": "^7.0.0"
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-text": "^7.0.2"
   }
 }