@skyscanner/backpack-web 11.0.0 → 11.1.0

package/bpk-component-radio/src/BpkRadio.module.scss

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
 $bpk-radio-circle-size: $bpk-one-pixel-rem * 8;
 $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
 

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
   },
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^9.3.0",
-    "bpk-component-text": "^8.0.4"
+    "bpk-component-text": "^8.0.5"
   }
 }

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,16 +15,16 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^9.3.0",
-    "bpk-component-calendar": "^13.0.1",
-    "bpk-component-text": "^8.0.4",
+    "bpk-component-calendar": "^13.0.2",
+    "bpk-component-text": "^8.0.5",
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-window": "^1.8.7"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.4"
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
 $calendar-height: 7 * ($bpk-calendar-day-size + bpk-spacing-lg());
 
 .bpk-scrollable-calendar-grid-list {

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^9.3.0",
-    "bpk-component-icon": "^10.0.4",
-    "bpk-component-text": "^8.0.4",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-text": "^8.0.5",
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.4"
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-section-list/src/BpkSectionListItem.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-section-list/src/BpkSectionListSection.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,11 +15,11 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.4"
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-select/src/BpkSelect.module.scss

@@ -19,7 +19,7 @@
 // Use of stylelint-disable-next-line declaration-no-important in this file is to ensure that
 // the correct styles are applied for Internet Explorer 11 and are not overriden by system styles.
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.5.8"
   },
   "publishConfig": {

package/bpk-component-skip-link/src/BpkSkipLink.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-skip-link {
   display: inline-block;
@@ -30,6 +30,7 @@
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
+
   // We want the skiplink to remain visible for a short period of time after it is blurred so that
   // a user tabbing quickly has a chance to see that it appeared
   transition-delay: $bpk-duration-sm;

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^9.3.0",
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^4.0.4"
+    "bpk-component-rtl-toggle": "^4.0.5"
   }
 }

package/bpk-component-slider/src/BpkSlider.module.scss

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
 $slider-control-inset-size: 22 * $bpk-one-pixel-rem;
 $slider-large-control-inset-size: bpk-spacing-sm() * 7;
 

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-svgs": "^14.4.3",
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-split-input",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Backpack split-input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,9 +13,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-input": "^7.0.4",
+    "bpk-component-input": "^7.0.5",
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 /* stylelint-disable */
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-input-field {
   display: flex;

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

@@ -18,7 +18,7 @@
 
  /* stylelint-disable */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-split-input {
   @include bpk-body-default;

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.4",
+    "bpk-component-icon": "^10.0.5",
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-table": "^4.0.4",
-    "bpk-storybook-utils": "^2.0.4"
+    "bpk-component-table": "^4.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-star-rating/src/BpkInteractiveStar.module.scss

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
-@keyframes star_dust {
+@keyframes star-dust {
   0% {
     transform: scale(1);
   }
@@ -60,7 +60,7 @@
 
     &--selected {
       animation-duration: 300ms;
-      animation-name: star_dust;
+      animation-name: star-dust;
     }
   }
 }

package/bpk-component-star-rating/src/BpkStar.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 @mixin large-star {
   width: $bpk-icon-size-lg;

package/bpk-component-switch/README.md

@@ -28,7 +28,7 @@ export default () => (
 | --------- | -------- | -------- | ------------- |
 | label     | Node     | true     | -             |
 | className | string   | false    | null          |
-| type      | oneOf(SWITCH_TYPES.primary, SWITCH_TYPES.event) | false | SWITCH_TYPES.primary
+| small     | boolean  | false    | false         |
 
 This component uses a hidden [`<input type="checkbox" />`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), so it supports all the same properties as it (for example `checked`).
 

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-switch/src/BpkSwitch.js

@@ -20,7 +20,7 @@
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
 
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkSwitch.module.scss';
 
@@ -33,11 +33,6 @@ export const SWITCH_TYPES = {
 
 export type SwitchTypeValue = $Values<typeof SWITCH_TYPES>;
 
-const switchTypeClassNames = {
-  [SWITCH_TYPES.primary]: getClassName('bpk-switch__switch--primary'),
-  [SWITCH_TYPES.event]: getClassName('bpk-switch__switch--event'),
-};
-
 export type Props = {
   label: Node,
   type: SwitchTypeValue,
@@ -45,12 +40,13 @@ export type Props = {
 };
 
 const BpkSwitch = (props: Props) => {
-  const { className, label, type, ...rest } = props;
+  const { className, label, small, type, ...rest } = props;
 
-  const switchClassNames = [
-    getClassName('bpk-switch__switch'),
-    switchTypeClassNames[type],
-  ];
+  const switchClassNames = getClassName(
+    'bpk-switch__switch',
+    `bpk-switch__switch--${type}`,
+    small && 'bpk-switch__switch--small',
+  );
 
   return (
     <label className={getClassName('bpk-switch', className)}>
@@ -64,20 +60,25 @@ const BpkSwitch = (props: Props) => {
       <span aria-hidden className={getClassName('bpk-switch__label')}>
         {label}
       </span>
-      <span aria-hidden className={switchClassNames.join(' ')} />
+      <span aria-hidden className={switchClassNames} />
     </label>
   );
 };
 
 BpkSwitch.propTypes = {
   label: PropTypes.node.isRequired,
-  type: PropTypes.oneOf([SWITCH_TYPES.primary, SWITCH_TYPES.event]),
+  type: deprecated(
+    PropTypes.oneOf([SWITCH_TYPES.primary, SWITCH_TYPES.event]),
+    'This property is deprecated and only one type supported, please remove your usage of this property',
+  ),
   className: PropTypes.string,
+  small: PropTypes.boolean,
 };
 
 BpkSwitch.defaultProps = {
   className: null,
   type: SWITCH_TYPES.primary,
+  small: false,
 };
 
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.module.scss

@@ -16,22 +16,17 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
-$primary-on-color: $bpk-color-sky-blue;
-$event-on-color: $bpk-color-abisko;
-$off-color: $bpk-color-sky-gray-tint-06;
-$handle-color: $bpk-color-white;
-
 $height: bpk-spacing-xl();
 $width: bpk-spacing-sm() * 13;
 $border-width: $bpk-one-pixel-rem * 2;
 
 .bpk-switch {
   position: relative;
-  display: inline-block;
+  display: flex;
+  align-items: center;
 
   // Checkbox is invisible so the switch element can be the visual element.
   &__checkbox {
@@ -43,12 +38,13 @@ $border-width: $bpk-one-pixel-rem * 2;
         @include bpk-themeable-property(
           background,
           --bpk-switch-checked-color,
-          $primary-on-color
+          $bpk-core-accent-day
         );
       }
 
+      // This is now deprecated and will be removed in the future.
       &--event {
-        background: $event-on-color;
+        background: $bpk-color-abisko;
       }
 
       &::before {
@@ -71,7 +67,7 @@ $border-width: $bpk-one-pixel-rem * 2;
     height: $height;
     transition: background $bpk-duration-sm linear;
     border-radius: $height / 2;
-    background: $off-color;
+    background: $bpk-surface-highlight-day;
     cursor: pointer;
 
     // The 'handle'.
@@ -85,9 +81,19 @@ $border-width: $bpk-one-pixel-rem * 2;
       height: $height - ($border-width * 2);
       transition: left $bpk-duration-sm ease-out;
       border-radius: 50%;
-      background: $handle-color;
+      background: $bpk-text-on-dark-day;
 
       @include bpk-box-shadow-sm;
     }
+
+    &--small {
+      width: bpk-spacing-xxl();
+      height: bpk-spacing-sm() * 5;
+
+      &::before {
+        width: bpk-spacing-base();
+        height: bpk-spacing-base();
+      }
+    }
   }
 }

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-table/src/BpkTable.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-table {
   @include bpk-table;

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-text/src/BpkText.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-text {
   @include bpk-text;

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.6.3",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^6.0.4",
-    "bpk-storybook-utils": "^2.0.4"
+    "bpk-component-label": "^6.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-textarea/src/BpkTextarea.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;