@skyscanner/backpack-web 4.1.0 → 6.0.0

package/bpk-component-ticket/src/BpkTicket.js

@@ -33,7 +33,6 @@ type Props = {
   stubProps: { [string]: any },
   padded: boolean,
   vertical: boolean,
-  withNotches: boolean,
   className: ?string,
   stubClassName: ?string,
   href: ?string,
@@ -49,7 +48,6 @@ const BpkTicket = (props: Props) => {
     stubClassName,
     stubProps,
     vertical,
-    withNotches,
     ...rest
   } = props;
 
@@ -57,7 +55,6 @@ const BpkTicket = (props: Props) => {
     'bpk-ticket',
     className,
     vertical && 'bpk-ticket--vertical',
-    withNotches && 'bpk-ticket--with-notches',
   );
 
   const mainClassNames = getClassName(
@@ -66,7 +63,6 @@ const BpkTicket = (props: Props) => {
     padded && 'bpk-ticket__main--padded',
     vertical && 'bpk-ticket__main--vertical',
     !vertical && 'bpk-ticket__main--horizontal',
-    withNotches && 'bpk-ticket__paper--with-notches',
   );
 
   const mainInnerClassNames = getClassName(
@@ -82,7 +78,6 @@ const BpkTicket = (props: Props) => {
     padded && 'bpk-ticket__stub--padded',
     vertical && 'bpk-ticket__stub--vertical',
     !vertical && 'bpk-ticket__stub--horizontal',
-    withNotches && 'bpk-ticket__paper--with-notches',
   );
 
   const stubInnerClassNames = getClassName(
@@ -91,30 +86,6 @@ const BpkTicket = (props: Props) => {
     !vertical && 'bpk-ticket__stub-inner--horizontal',
   );
 
-  const punchlineClassNames = getClassName(
-    'bpk-ticket__punchline',
-    vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--horizontal-with-notches'
-        : 'bpk-ticket__punchline--horizontal'),
-    !vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--vertical-with-notches'
-        : 'bpk-ticket__punchline--vertical'),
-  );
-
-  const startNotchClassNames = getClassName(
-    'bpk-ticket__notch',
-    vertical && 'bpk-ticket__notch--left',
-    !vertical && 'bpk-ticket__notch--top',
-  );
-
-  const endNotchClassNames = getClassName(
-    'bpk-ticket__notch',
-    vertical && 'bpk-ticket__notch--right',
-    !vertical && 'bpk-ticket__notch--bottom',
-  );
-
   const mainContent = padded ? (
     children
   ) : (
@@ -131,15 +102,6 @@ const BpkTicket = (props: Props) => {
     <div key="main" className={mainClassNames}>
       {mainContent}
     </div>,
-    <div
-      key="punchline"
-      className={punchlineClassNames}
-      role="presentation"
-      aria-hidden="true"
-    >
-      {withNotches && <div className={startNotchClassNames} />}
-      {withNotches && <div className={endNotchClassNames} />}
-    </div>,
     // $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
     <div key="stub" className={stubClassNames} {...stubProps}>
       {stubContent}
@@ -172,7 +134,6 @@ BpkTicket.propTypes = {
   vertical: PropTypes.bool,
   stubClassName: PropTypes.string,
   stubProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  withNotches: PropTypes.bool,
 };
 
 BpkTicket.defaultProps = {
@@ -182,7 +143,6 @@ BpkTicket.defaultProps = {
   vertical: false,
   stubClassName: null,
   stubProps: {},
-  withNotches: true,
 };
 
 export default BpkTicket;

package/bpk-component-ticket/src/BpkTicket.module.scss

@@ -41,7 +41,6 @@ $bpk-spacing-v2: true;
 }
 
 .bpk-ticket {
-  $notch-size: bpk-spacing-md();
   $ticket-padding: bpk-spacing-base();
 
   position: relative;
@@ -49,12 +48,14 @@ $bpk-spacing-v2: true;
   display: flex;
   flex-direction: row;
   align-items: stretch;
+  flex: none;
   color: $bpk-card-color;
   text-decoration: none;
+  box-shadow: 0 5px 12px rgba($bpk-button-outline-background-color, 0.08),
+    0 3px 12px rgba($bpk-button-outline-background-color, 0.08);
   cursor: pointer;
 
-  @include bpk-box-shadow-sm;
-  @include bpk-border-radius-sm;
+  @include bpk-border-radius-md;
   @include hidden-box-shadow-after;
 
   @include bpk-hover {
@@ -71,35 +72,22 @@ $bpk-spacing-v2: true;
     flex-direction: column;
   }
 
-  &--with-notches {
-    box-shadow: none;
-
-    &::after {
-      content: none;
-    }
-  }
-
   &__paper {
     position: relative;
     background-color: $bpk-card-background-color;
-
-    &--with-notches {
-      @include bpk-box-shadow-sm;
-      @include hidden-box-shadow-after;
-    }
   }
 
   @mixin main-styles {
     &--horizontal {
-      border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
+      border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
 
       @include bpk-rtl {
-        border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
+        border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
       }
     }
 
     &--vertical {
-      border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0;
+      border-radius: $bpk-border-radius-md $bpk-border-radius-md 0 0;
     }
   }
 
@@ -123,15 +111,18 @@ $bpk-spacing-v2: true;
   @mixin stub-styles {
     &--horizontal {
       min-width: 30%;
-      border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
+      border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
+      box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-color-sky-gray-tint-05;
 
       @include bpk-rtl {
-        border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
+        border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
+        box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-color-sky-gray-tint-05;
       }
     }
 
     &--vertical {
-      border-radius: 0 0 $bpk-border-radius-sm $bpk-border-radius-sm;
+      border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
+      box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-color-sky-gray-tint-05;
     }
   }
 
@@ -151,147 +142,4 @@ $bpk-spacing-v2: true;
 
     @include stub-styles;
   }
-
-  &__punchline {
-    position: relative;
-    z-index: 1;
-    flex: 0 0 auto;
-    background-color: $bpk-card-background-color;
-
-    &--horizontal {
-      height: $bpk-one-pixel-rem * 2;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-x;
-      background-position: 0 50%;
-      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
-    }
-
-    &--horizontal-with-notches {
-      height: $notch-size * 2;
-      margin: auto $notch-size;
-      padding: 0 $notch-size;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-x;
-      background-position: 0 50%;
-      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
-    }
-
-    &--vertical {
-      width: $bpk-one-pixel-rem * 2;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-
-    &--vertical-with-notches {
-      width: $notch-size * 2;
-      margin: $notch-size auto;
-      padding: $notch-size 0;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-
-    &--fallback {
-      display: table-cell;
-      width: 2 * $bpk-one-pixel-rem;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-  }
-
-  &__notch {
-    position: absolute;
-    width: $notch-size * 2;
-    height: $notch-size;
-    overflow: hidden;
-
-    &::after {
-      position: relative;
-      content: '';
-      display: block;
-      width: $notch-size * 4;
-      height: $notch-size * 4;
-      transform: translate3d(
-        0,
-        0,
-        0
-      ); // BPK-1011 fix rendering bug in safari 11
-
-      border: $notch-size solid $bpk-color-white;
-      border-radius: $notch-size * 2;
-      box-shadow: $bpk-box-shadow-sm inset;
-    }
-
-    &--top {
-      top: -$notch-size;
-
-      &::after {
-        right: -50%;
-        bottom: 200%;
-        left: -50%;
-      }
-    }
-
-    &--right {
-      right: -$notch-size;
-      width: $notch-size;
-      height: $notch-size * 2;
-
-      &::after {
-        right: 100%;
-        bottom: 50%;
-
-        @include bpk-rtl {
-          right: auto;
-          left: 200%;
-        }
-      }
-    }
-
-    &--bottom {
-      bottom: -$notch-size;
-
-      &::after {
-        right: -50%;
-        bottom: 100%;
-        left: -50%;
-      }
-    }
-
-    &--left {
-      left: -$notch-size;
-      width: $notch-size;
-      height: $notch-size * 2;
-
-      &::after {
-        right: 200%;
-        bottom: 50%;
-
-        @include bpk-rtl {
-          right: auto;
-          left: 100%;
-        }
-      }
-    }
-  }
 }

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -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-react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-react-utils/src/Portal.js

@@ -155,7 +155,7 @@ class Portal extends Component {
   getTargetElement() {
     return typeof this.props.target === 'function'
       ? this.props.target()
-      : this.props.target;
+      : this.props.target?.ref.current;
   }
 
   getRenderTarget() {

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,7 +17,7 @@
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0"
+    "bpk-react-utils": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "4.1.0",
+  "version": "6.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",