@skyscanner/backpack-web 4.1.0 → 6.0.0-alpha.1

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-popover-portal{z-index:900}@media (max-width: 32.25rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover-portal[x-placement='top']{margin-bottom:.75rem}.bpk-popover-portal[x-placement='right']{margin-left:.75rem}.bpk-popover-portal[x-placement='bottom']{margin-top:.75rem}.bpk-popover-portal[x-placement='left']{margin-right:.75rem}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #dddde5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}@media (min-width: 32.3125rem){.bpk-popover{max-width:32.25rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{position:absolute;pointer-events:none}.bpk-popover__arrow::before,.bpk-popover__arrow::after{position:absolute;content:' ';display:block}.bpk-popover__arrow::before{border:.8125rem solid transparent}.bpk-popover__arrow::after{border:.75rem solid transparent}.bpk-popover-portal[x-placement='top'] .bpk-popover__arrow{top:100%;width:1.5rem;height:.75rem}.bpk-popover-portal[x-placement='top'] .bpk-popover__arrow::before{bottom:-.8125rem;margin-left:-.0625rem;border-top-color:#dddde5}html[dir='rtl'] .bpk-popover-portal[x-placement='top'] .bpk-popover__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-popover-portal[x-placement='top'] .bpk-popover__arrow::after{bottom:-.6875rem;border-top-color:#fff}.bpk-popover-portal[x-placement='right'] .bpk-popover__arrow{right:100%;width:.75rem;height:1.5rem}.bpk-popover-portal[x-placement='right'] .bpk-popover__arrow::before{left:-.8125rem;margin-top:-.0625rem;border-right-color:#dddde5}.bpk-popover-portal[x-placement='right'] .bpk-popover__arrow::after{left:-.6875rem;border-right-color:#fff}.bpk-popover-portal[x-placement='bottom'] .bpk-popover__arrow{bottom:100%;width:1.5rem;height:.75rem}.bpk-popover-portal[x-placement='bottom'] .bpk-popover__arrow::before{top:-.8125rem;margin-left:-.0625rem;border-bottom-color:#dddde5}html[dir='rtl'] .bpk-popover-portal[x-placement='bottom'] .bpk-popover__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-popover-portal[x-placement='bottom'] .bpk-popover__arrow::after{top:-.6875rem;border-bottom-color:#fff}.bpk-popover-portal[x-placement='left'] .bpk-popover__arrow{left:100%;width:.75rem;height:1.5rem}.bpk-popover-portal[x-placement='left'] .bpk-popover__arrow::before{right:-.8125rem;margin-top:-.0625rem;border-left-color:#dddde5}.bpk-popover-portal[x-placement='left'] .bpk-popover__arrow::after{right:-.6875rem;border-left-color:#fff}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__close-button{float:right}html[dir='rtl'] .bpk-popover__close-button{float:left}.bpk-popover__footer{padding:0.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #dddde5 inset}html[dir='rtl'] .bpk-popover__footer{text-align:left}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-popover-portal{z-index:900}@media (max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #dddde5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{position:aboslute;width:1.5rem;height:1.5rem;transform:rotate(45deg);border:.0625rem solid transparent;background:inherit}.bpk-popover-portal[data-popper-placement='top'] .bpk-popover__arrow{bottom:-.6875rem;border-right-color:#dddde5;border-bottom-color:#dddde5}.bpk-popover-portal[data-popper-placement='right'] .bpk-popover__arrow{left:-.6875rem;border-bottom-color:#dddde5;border-left-color:#dddde5}.bpk-popover-portal[data-popper-placement='bottom'] .bpk-popover__arrow{top:-.6875rem;border-top-color:#dddde5;border-left-color:#dddde5}.bpk-popover-portal[data-popper-placement='left'] .bpk-popover__arrow{right:-.6875rem;border-top-color:#dddde5;border-right-color:#dddde5}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__close-button{float:right}html[dir='rtl'] .bpk-popover__close-button{float:left}.bpk-popover__footer{padding:0.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #dddde5 inset}html[dir='rtl'] .bpk-popover__footer{text-align:left}

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -22,8 +22,7 @@ import { createPopper, basePlacements } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
-
-import { PortalV1, cssModules } from '../../bpk-react-utils';
+import { Portal, cssModules } from '../../bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';
 import STYLES from './BpkPopover.module.scss';
@@ -83,6 +82,7 @@ class BpkPopoverPortal extends Component<Props> {
 
     this.popper = null;
     this.previousTargetElement = null;
+    this.ref = React.createRef();
   }
 
   onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
@@ -216,20 +216,30 @@ class BpkPopoverPortal extends Component<Props> {
       classNames.push(portalClassName);
     }
 
+    const targetElement =
+      typeof target === 'function' ? (
+        target
+      ) : (
+        <div ref={this.ref}>{target}</div>
+      );
+
     return (
-      <PortalV1
-        beforeClose={this.beforeClose}
-        className={classNames.join(' ')}
-        isOpen={isOpen}
-        onClose={this.onClose}
-        onRender={this.onRender}
-        style={portalStyle}
-        renderTarget={renderTarget}
-        target={target}
-      >
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkPopover onClose={this.onClose} {...rest} />
-      </PortalV1>
+      <>
+        {typeof targetElement !== 'function' && targetElement}
+        <Portal
+          beforeClose={this.beforeClose}
+          className={classNames.join(' ')}
+          isOpen={isOpen}
+          onClose={this.onClose}
+          onRender={this.onRender}
+          style={portalStyle}
+          renderTarget={renderTarget}
+          target={targetElement}
+        >
+          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+          <BpkPopover onClose={this.onClose} {...rest} />
+        </Portal>
+      </>
     );
   }
 }

package/bpk-component-price/README.md

@@ -12,14 +12,15 @@ npm install bpk-component-price --save-dev
 
 ```js
 import React from 'react';
-import BpkPrice, { SIZES } from 'bpk-component-price';
+import BpkPrice, { SIZES, ALIGNS } from 'bpk-component-price';
 
 export default () => (
   <BpkPrice
     size={SIZES.large}
+    align={ALIGNS.left}
     subtitle="£209"
     title="£1,830"
-    description="/ night"
+    description="a night"
   />
 );
 ```
@@ -30,6 +31,7 @@ export default () => (
 | --------- | -------- | -------- | ------------- |
 | title     | string   | true     | -             |
 | size | oneOf(SIZES)   | false    | SIZES.small         |
+| align | oneOf(ALIGNS)   | false    | ALIGNS.left         |
 | subtitle  | string   | false    | null          |
 | description | string   | false    | null          |
 | className | string   | false    | null          |

package/bpk-component-price/index.js

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
 
-import BpkPrice, { SIZES } from './src/BpkPrice';
+import BpkPrice from './src/BpkPrice';
+import { SIZES, ALIGNS } from './src/common-types';
 
 export default BpkPrice;
-export { SIZES };
+export { SIZES, ALIGNS };

package/bpk-component-price/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-price",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Backpack price component.",
   "license": "Apache-2.0",
   "repository": {

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

@@ -19,20 +19,16 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 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 +37,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 +62,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 +79,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 +92,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 +100,7 @@ BpkPrice.propTypes = {
 
 BpkPrice.defaultProps = {
   size: SIZES.small,
+  align: ALIGNS.left,
   className: null,
   subtitle: null,
   description: null,

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price{display:flex;flex-direction:column}.bpk-price--right{text-align:right}html[dir='rtl'] .bpk-price--right{text-align:left}.bpk-price__subtitle{color:#68697f;text-decoration-line:line-through}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__title{word-break:break-all}.bpk-price__spacing::after{content:'';margin-right:0.25rem}html[dir='rtl'] .bpk-price__spacing::after{margin-right:unset;margin-left:0.25rem}.bpk-price__description{color:#68697f;white-space:nowrap}

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/src/BpkProgress.js

@@ -22,7 +22,6 @@ 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 STYLES from './BpkProgress.module.scss';

package/bpk-component-radio/src/BpkRadio.js

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkRadio.module.scss';

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

@@ -20,7 +20,6 @@
 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';
 

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

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-rating{display:flex}.bpk-rating--vertical{flex-direction:column}.bpk-rating__component{justify-content:center;align-items:center;border-radius:50%;color:#fff}.bpk-rating--base-rating{display:flex;width:3rem;height:3rem}.bpk-rating--lg-rating{display:flex;width:3.75rem;height:3.75rem}.bpk-rating--sm-rating{display:flex;width:2.25rem;height:2.25rem}.bpk-rating--sm-pill{width:2.25rem;height:1.875rem;border-radius:1.125rem}.bpk-rating--base-pill{width:3rem;height:2.25rem;border-radius:1.125rem}.bpk-rating--lg-pill{width:4.125rem;height:2.625rem;border-radius:1.3125rem}.bpk-rating__text-wrapper{display:flex;flex-direction:column;justify-content:center}.bpk-rating__text-wrapper--horizontal{padding-left:0.75rem}html[dir='rtl'] .bpk-rating__text-wrapper--horizontal{padding-right:0.75rem}.bpk-rating__text-wrapper--vertical{padding-top:0.375rem}.bpk-rating__text--horizontal{text-align:left}html[dir='rtl'] .bpk-rating__text--horizontal{text-align:right}.bpk-rating__text--vertical{align-self:center;text-align:center}.bpk-rating--high-rating{align-self:center;color:#111236;color:#111236;color:var(--bpk-rating-high-text-color, #111236);background-color:#73cec6;background-color:var(--bpk-rating-high-color, #73cec6)}.bpk-rating--medium-rating{align-self:center;color:#111236;color:var(--bpk-rating-medium-text-color, #111236);background-color:#ffb54d;background-color:var(--bpk-rating-medium-color, #ffb54d)}.bpk-rating--low-rating{align-self:center;background-color:#d1435b;background-color:var(--bpk-rating-low-color, #d1435b)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{display:flex;padding-right:0.5rem;justify-content:center;align-items:baseline;color:#111236}html[dir='rtl'] .bpk-rating__value{padding-right:0;padding-left:0.5rem}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#68697f}.bpk-rating__title--large{padding-top:.0625rem}.bpk-rating__subtitle{padding-left:0.5rem;color:#68697f}html[dir='rtl'] .bpk-rating__subtitle{padding-right:0.5rem;padding-left:0}.bpk-rating__subtitle--large{padding-top:.0625rem;padding-left:0}html[dir='rtl'] .bpk-rating__subtitle--large{padding-right:0;padding-left:0}

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

@@ -18,7 +18,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { BpkButtonLink } from '../../bpk-component-link';
 
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';

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

@@ -17,7 +17,6 @@
  */
 
 import React, { Component } from 'react';
-
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js

@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-
 import {
   BpkCalendarDate,
   BpkCalendarDatePropTypes,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -17,7 +17,6 @@
  */
 
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {

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-section-list/src/BpkSectionListItem.js

@@ -20,7 +20,6 @@
 
 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';

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

@@ -20,7 +20,6 @@
 
 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';
 

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

@@ -19,7 +19,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSelect.module.scss';

package/bpk-component-skip-link/src/BpkSkipLink.js

@@ -19,7 +19,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSkipLink.module.scss';

package/bpk-component-slider/src/BpkSlider.js

@@ -19,7 +19,6 @@
 import React from 'react';
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
-
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkSlider.module.scss';

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -20,9 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
-
 import { cssModules } from '../../bpk-react-utils';
+import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
 
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -20,9 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
-
 import { cssModules } from '../../bpk-react-utils';
+import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';

package/bpk-component-spinner/src/BpkSpinner.js

@@ -20,9 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
-
 import { cssModules } from '../../bpk-react-utils';
+import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';

package/bpk-component-spinner/src/BpkSpinner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0770e3;fill:var(--bpk-spinner-primary-color, #0770e3)}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#444560}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:.1875rem;vertical-align:top}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0770e3;fill:var(--bpk-spinner-primary-color, #0770e3)}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#444560}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top}

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

@@ -18,10 +18,9 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
 import BpkInput from '../../bpk-component-input';
 import { cssModules } from '../../bpk-react-utils';
+import PropTypes from 'prop-types';
 
 import STYLES from './BpkInputField.module.scss';
 
@@ -39,7 +38,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.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-input-field{display:flex;max-width:7.5rem;margin-right:0.25rem;align-items:center}.bpk-input-field input{text-align:center}.bpk-input-field:last-child{margin-right:0}

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

@@ -18,9 +18,8 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
+import PropTypes from 'prop-types';
 import { INPUT_TYPES } from '../../bpk-component-input';
 
 import InputField from './BpkInputField';
@@ -215,7 +214,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.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{display:flex}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{font-size:1rem;line-height:1.5rem;font-weight:400;display:flex;width:100%;padding-top:0.25rem;flex-direction:row;align-items:center;direction:ltr}.bpk-split-input__textbox{display:flex;align-items:center}

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/src/BpkInteractiveStar.js

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import { STAR_TYPES } from './BpkStar';

package/bpk-component-star-rating/src/BpkStar.js

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import SmallIcon from '../../bpk-component-icon/sm/star';
 import LargeIcon from '../../bpk-component-icon/lg/star';
 import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline';

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkStar, { STAR_TYPES } from './BpkStar';