@skyscanner/backpack-web 21.0.1 → 22.0.0

package/README.md

@@ -8,7 +8,7 @@
 ## Quick links
 
 - [Documentation](https://www.skyscanner.design/)
-- [Changelog](./CHANGELOG.md)
+- [Changelog](https://github.com/Skyscanner/backpack/releases)
 
 ## Usage
 

package/bpk-component-icon/index.js

@@ -20,7 +20,6 @@ import {
   iconSizeSm,
   iconSizeLg,
   privateButtonLineHeight,
-  privateButtonLargeLineHeight,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import withAlignment from './src/withAlignment';
@@ -33,11 +32,7 @@ function withButtonAlignment(WrappedComponent) {
 }
 
 function withLargeButtonAlignment(WrappedComponent) {
-  return withAlignment(
-    WrappedComponent,
-    privateButtonLargeLineHeight,
-    iconSizeLg,
-  );
+  return withAlignment(WrappedComponent, privateButtonLineHeight, iconSizeLg);
 }
 
 export {

package/bpk-component-slider/README.md

@@ -34,7 +34,6 @@ const Slider = () => (
 | Property                 | PropType                      | Required | Default Value |
 | ------------------------ | ----------------------------- | -------- | ------------- |
 | className                | string                        | false    | null          |
-| large                    | bool                          | false    | false         |
 
 ## Theme Props
 

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

@@ -26,7 +26,7 @@ import STYLES from './BpkSlider.module.scss';
 const getClassName = cssModules(STYLES);
 
 const BpkSlider = (props) => {
-  const { className, large, ...rest } = props;
+  const { className, ...rest } = props;
   const invert = isRTL();
   const classNames = [getClassName('bpk-slider')];
   const thumbClassNames = [getClassName('bpk-slider__handle')];
@@ -40,10 +40,6 @@ const BpkSlider = (props) => {
   if (className) {
     classNames.push(getClassName(className));
   }
-  if (large) {
-    classNames.push(getClassName('bpk-slider--large'));
-    thumbClassNames.push(getClassName('bpk-slider__handle--large'));
-  }
 
   return (
     <Slider
@@ -60,12 +56,10 @@ const BpkSlider = (props) => {
 
 BpkSlider.propTypes = {
   className: PropTypes.string,
-  large: PropTypes.bool,
 };
 
 BpkSlider.defaultProps = {
   className: null,
-  large: false,
 };
 
 export default BpkSlider;

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

@@ -19,61 +19,45 @@
 @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;
+$slider-handle-size: bpk-spacing-base() + bpk-spacing-sm();
+$slider-handle-touch-size: bpk-spacing-xxl();
+$slider-bar-height: bpk-spacing-sm();
 
 .bpk-slider {
-  height: bpk-spacing-xl();
+  height: $slider-handle-size;
   -webkit-tap-highlight-color: transparent;
 
-  &--large {
-    height: bpk-spacing-xxl();
-  }
-
   &__handle {
     display: flex;
-    width: bpk-spacing-xl();
-    height: bpk-spacing-xl();
+    width: $slider-handle-size;
+    height: $slider-handle-size;
     justify-content: center;
     align-items: center;
-    border: $bpk-one-pixel-rem solid $bpk-surface-highlight-day;
-    border-radius: $bpk-border-radius-lg;
-    background-color: $bpk-surface-default-day;
+    border-radius: 50%;
+    background-color: $bpk-core-accent-day;
     cursor: pointer;
 
     @include bpk-box-shadow-sm;
 
     &::after {
+      position: absolute;
       content: '';
-      display: block;
-      width: $slider-control-inset-size;
-      height: $slider-control-inset-size;
-      border-radius: $bpk-border-radius-lg;
-      box-shadow: inset 0 0 0 $bpk-one-pixel-rem rgba(37, 32, 31, 0.3);
+      width: $slider-handle-touch-size;
+      height: $slider-handle-touch-size;
+      border-radius: 50%;
     }
 
     &--active {
       transform: scale(1.2) translate3d(0, 0, 0);
-    }
-
-    &--large {
-      width: bpk-spacing-xxl();
-      height: bpk-spacing-xxl();
-      border-radius: $bpk-border-radius-lg;
-
-      &::after {
-        width: $slider-large-control-inset-size;
-        height: $slider-large-control-inset-size;
-        border-radius: $bpk-border-radius-lg;
-      }
+      background-color: $bpk-private-slider-selected-day;
     }
   }
 
   &__bar {
-    top: calc(50% - #{bpk-spacing-sm()});
-    height: bpk-spacing-md();
+    top: calc(50% - #{$slider-bar-height / 2});
+    height: $slider-bar-height;
     border-radius: $bpk-border-radius-sm;
-    background-color: $bpk-surface-highlight-day;
+    background-color: $bpk-line-day;
   }
 
   // stylelint-disable-next-line selector-attribute-quotes
@@ -81,21 +65,21 @@ $slider-large-control-inset-size: bpk-spacing-sm() * 7;
     @include bpk-themeable-property(
       background-color,
       --bpk-slider-bar-color,
-      $bpk-core-primary-day
+      $bpk-core-accent-day
     );
   }
 
   &--range {
     // stylelint-disable-next-line selector-attribute-quotes
     > div[class$='0'] {
-      background-color: $bpk-surface-highlight-day;
+      background-color: $bpk-line-day;
     }
     // stylelint-disable-next-line selector-attribute-quotes
     > div[class$='1'] {
       @include bpk-themeable-property(
         background-color,
         --bpk-slider-bar-color,
-        $bpk-core-primary-day
+        $bpk-core-accent-day
       );
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "21.0.1",
+  "version": "22.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^15.1.0",
-    "@skyscanner/bpk-svgs": "^16.2.3",
+    "@skyscanner/bpk-foundations-web": "^15.2.0",
+    "@skyscanner/bpk-svgs": "^16.2.4",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^40.1.0",
+    "bpk-mixins": "^40.2.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",