@skyscanner/backpack-web 4.1.0 → 6.0.0

package/bpk-component-price/src/BpkPrice.js

@@ -24,15 +24,12 @@ import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkPrice.module.scss';
-
-export const SIZES = {
-  small: 'small',
-  large: 'large',
-};
+import { SIZES, ALIGNS } from './common-types';
 
 type Props = {
   title: string,
   size: $Values<typeof SIZES>,
+  align: $Values<typeof ALIGNS>,
   className: ?string,
   subtitle: ?string,
   description: ?string,
@@ -41,15 +38,17 @@ type Props = {
 const getClassName = cssModules(STYLES);
 
 const BpkPrice = (props: Props) => {
-  const { className, description, size, subtitle, title, ...rest } = props;
+  const { align, className, description, size, subtitle, title, ...rest } =
+    props;
 
   const isSmall = size === SIZES.small;
+  const isAlignRight = align === ALIGNS.right;
 
   return (
     <div
       className={getClassName(
         'bpk-price',
-        isSmall && 'bpk-price--small',
+        isAlignRight && 'bpk-price--right',
         className,
       )}
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
@@ -64,9 +63,15 @@ const BpkPrice = (props: Props) => {
           {subtitle}
         </BpkText>
       )}
-      <div className={isSmall && getClassName('bpk-price__titleColumn')}>
+      <div
+        className={isAlignRight && getClassName('bpk-price__column-container')}
+      >
         <BpkText
           textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
+          className={getClassName(
+            'bpk-price__title',
+            !isAlignRight && 'bpk-price__spacing',
+          )}
           tagName="span"
         >
           {title}
@@ -75,10 +80,7 @@ const BpkPrice = (props: Props) => {
           <BpkText
             textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
             tagName="span"
-            className={getClassName(
-              'bpk-price__description',
-              !isSmall && 'bpk-price__descriptionSpacing',
-            )}
+            className={getClassName('bpk-price__description')}
           >
             {description}
           </BpkText>
@@ -91,6 +93,7 @@ const BpkPrice = (props: Props) => {
 BpkPrice.propTypes = {
   title: PropTypes.string.isRequired,
   size: PropTypes.oneOf(Object.keys(SIZES)),
+  align: PropTypes.oneOf(Object.keys(ALIGNS)),
   className: PropTypes.string,
   subtitle: PropTypes.string,
   description: PropTypes.string,
@@ -98,6 +101,7 @@ BpkPrice.propTypes = {
 
 BpkPrice.defaultProps = {
   size: SIZES.small,
+  align: ALIGNS.left,
   className: null,
   subtitle: null,
   description: null,

package/bpk-component-price/src/BpkPrice.module.scss

@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: column;
 
-  &--small {
+  &--right {
     text-align: right;
 
     @include bpk-rtl {
@@ -35,21 +35,27 @@
     text-decoration-line: line-through;
   }
 
-  &__titleColumn {
+  &__column-container {
     display: flex;
     flex-direction: column;
   }
 
-  &__description {
-    color: $bpk-color-sky-gray-tint-02;
+  &__title {
+    word-break: break-all;
+  }
 
-    &Spacing {
-      margin-left: bpk-spacing-sm();
+  &__spacing::after {
+    content: '';
+    margin-right: bpk-spacing-sm();
 
-      @include bpk-rtl {
-        margin-right: bpk-spacing-sm();
-        margin-left: unset;
-      }
+    @include bpk-rtl {
+      margin-right: unset;
+      margin-left: bpk-spacing-sm();
     }
   }
+
+  &__description {
+    color: $bpk-color-sky-gray-tint-02;
+    white-space: nowrap;
+  }
 }

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

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+export const SIZES = {
+  small: 'small',
+  large: 'large',
+};
+
+export const ALIGNS = {
+  left: 'left',
+  right: 'right',
+};

package/bpk-component-progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-progress",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack progress bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "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.6",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-button": "^6.2.7",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-radio",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack radio button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
   },
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.5"
+    "bpk-component-text": "^7.0.6"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rtl-toggle",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack RTL toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.11",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-component-link": "^3.1.12",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.19",
+  "version": "6.1.20",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,16 +15,16 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.1.18",
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-calendar": "^11.1.19",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-virtualized": "^9.22.3"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-storybook-utils": "^1.1.11"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.12",
+  "version": "3.2.13",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-storybook-utils": "^1.1.11"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,11 +15,11 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-storybook-utils": "^1.1.11"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-skip-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "publishConfig": {

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.11"
+    "bpk-component-rtl-toggle": "^3.1.12"
   }
 }

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-svgs": "^14.1.9",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-split-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-split-input",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Backpack split-input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,9 +13,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-input": "^6.1.16",
+    "bpk-component-input": "^6.1.17",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-split-input/src/BpkInputField.js

@@ -39,7 +39,7 @@ class BpkInputField extends Component {
   render() {
     const { focus, id, index, label, value, ...rest } = this.props;
     return (
-      <div key={index} className={getClassName('BpkInputField')}>
+      <div key={index} className={getClassName('bpk-input-field')}>
         <BpkInput
           id={id}
           autoComplete="off"

package/bpk-component-split-input/src/BpkInputField.module.scss

@@ -18,10 +18,10 @@
 /* stylelint-disable */
 @import '~bpk-mixins';
 
-.BpkInputField {
+.bpk-input-field {
   display: flex;
   max-width: 3*bpk-spacing-xxl();
-  margin-right: bpk-spacing-xs();
+  margin-right: bpk-spacing-sm();
   align-items: center;
 
   input {
@@ -29,6 +29,6 @@
   }
 }
 
-.BpkInputField:last-child {
+.bpk-input-field:last-child {
   margin-right: $bpk-spacing-none;
 }

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -215,7 +215,9 @@ class BpkSplitInput extends Component {
 
   render() {
     return (
-      <div className={getClassName('BpkSplitInput')}>{this.renderInputs()}</div>
+      <div className={getClassName('bpk-split-input')}>
+        {this.renderInputs()}
+      </div>
     );
   }
 }

package/bpk-component-split-input/src/BpkSplitInput.module.scss

@@ -20,11 +20,11 @@
 
 @import '~bpk-mixins/index';
 
-.BpkSplitInput {
+.bpk-split-input {
   @include bpk-body-default;
   display: flex;
   width: 100%;
-  padding-top: bpk-spacing-xs();
+  padding-top: bpk-spacing-sm();
   flex-direction: row;
   align-items: center;
   direction: ltr;

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.12",
+    "bpk-component-icon": "^9.2.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-table": "^3.1.11",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-table": "^3.1.12",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "4.2.11",
+  "version": "4.2.12",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.11",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-label": "^5.1.12",
+    "bpk-storybook-utils": "^1.1.11"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-label": "^5.1.11",
-    "bpk-component-select": "^5.1.11",
+    "bpk-component-label": "^5.1.12",
+    "bpk-component-select": "^5.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-ticket/README.md

@@ -34,5 +34,4 @@ export default () => (
 | vertical      | bool     | false    | false         |
 | stubProps     | object   | false    | {}            |
 | stubClassName | string   | false    | null          |
-| withNotches   | bool     | false    | true          |
 

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.12",
+  "version": "5.0.1",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-icon": "^9.2.12"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-icon": "^9.2.13"
   }
 }