@skyscanner/backpack-web 34.4.0 → 34.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css +1 -1
- package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +3 -1
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +4 -2
- package/bpk-component-popover/src/BpkPopover.js +6 -1
- package/bpk-component-text/src/BpkText.d.ts +1 -0
- package/bpk-component-text/src/BpkText.js +1 -0
- package/bpk-component-text/src/BpkText.module.css +1 -1
- package/bpk-mixins/_typography.scss +27 -11
- package/bpk-scrim-utils/src/withScrim.js +26 -25
- package/package.json +2 -2
- package/unstable__bpk-mixins/_typography.scss +27 -11
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__headline{margin:0}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:
|
|
18
|
+
.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__headline{margin:0}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}
|
|
@@ -39,7 +39,9 @@ class BpkHorizontalNav extends Component {
|
|
|
39
39
|
this.selectedItemRef = null;
|
|
40
40
|
}
|
|
41
41
|
componentDidMount() {
|
|
42
|
-
|
|
42
|
+
requestAnimationFrame(() => {
|
|
43
|
+
this.scrollSelectedIntoView(false);
|
|
44
|
+
});
|
|
43
45
|
}
|
|
44
46
|
componentDidUpdate() {
|
|
45
47
|
this.scrollSelectedIntoView(true);
|
|
@@ -80,8 +80,10 @@ class BpkMobileScrollContainer extends Component {
|
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
82
|
componentDidMount() {
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
requestAnimationFrame(() => {
|
|
84
|
+
this.setScrollBarAwareHeight();
|
|
85
|
+
this.setScrollIndicatorClassName();
|
|
86
|
+
});
|
|
85
87
|
window.addEventListener('resize', this.onWindowResize);
|
|
86
88
|
}
|
|
87
89
|
componentWillUnmount() {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import { useState, useRef, cloneElement, isValidElement } from 'react';
|
|
19
|
+
import { useState, useEffect, useRef, cloneElement, isValidElement } from 'react';
|
|
20
20
|
import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, flip, shift } from '@floating-ui/react';
|
|
21
21
|
import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
22
22
|
|
|
@@ -66,6 +66,11 @@ const BpkPopover = ({
|
|
|
66
66
|
...rest
|
|
67
67
|
}) => {
|
|
68
68
|
const [isOpenState, setIsOpenState] = useState(isOpen);
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
if (!isOpen) {
|
|
71
|
+
setIsOpenState(false);
|
|
72
|
+
}
|
|
73
|
+
}, [isOpen]);
|
|
69
74
|
const arrowRef = useRef(null);
|
|
70
75
|
const {
|
|
71
76
|
context,
|
|
@@ -27,6 +27,7 @@ export declare const TEXT_STYLES: {
|
|
|
27
27
|
readonly hero3: "hero-3";
|
|
28
28
|
readonly hero4: "hero-4";
|
|
29
29
|
readonly hero5: "hero-5";
|
|
30
|
+
readonly hero6: "hero-6";
|
|
30
31
|
readonly editorial1: "editorial-1";
|
|
31
32
|
readonly editorial2: "editorial-2";
|
|
32
33
|
readonly editorial3: "editorial-3";
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:
|
|
18
|
+
.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}
|
|
@@ -560,8 +560,8 @@
|
|
|
560
560
|
@include _bpk-text-factory(
|
|
561
561
|
$bpk-font-size-8-xl,
|
|
562
562
|
$bpk-line-height-8-xl,
|
|
563
|
-
$bpk-font-weight-
|
|
564
|
-
$bpk-letter-spacing-
|
|
563
|
+
$bpk-font-weight-black,
|
|
564
|
+
$bpk-letter-spacing-hero
|
|
565
565
|
);
|
|
566
566
|
}
|
|
567
567
|
|
|
@@ -576,8 +576,8 @@
|
|
|
576
576
|
@include _bpk-text-factory(
|
|
577
577
|
$bpk-font-size-7-xl,
|
|
578
578
|
$bpk-line-height-7-xl,
|
|
579
|
-
$bpk-font-weight-
|
|
580
|
-
$bpk-letter-spacing-
|
|
579
|
+
$bpk-font-weight-black,
|
|
580
|
+
$bpk-letter-spacing-hero
|
|
581
581
|
);
|
|
582
582
|
}
|
|
583
583
|
|
|
@@ -592,8 +592,8 @@
|
|
|
592
592
|
@include _bpk-text-factory(
|
|
593
593
|
$bpk-font-size-6-xl,
|
|
594
594
|
$bpk-line-height-6-xl,
|
|
595
|
-
$bpk-font-weight-
|
|
596
|
-
$bpk-letter-spacing-
|
|
595
|
+
$bpk-font-weight-black,
|
|
596
|
+
$bpk-letter-spacing-hero
|
|
597
597
|
);
|
|
598
598
|
}
|
|
599
599
|
|
|
@@ -608,8 +608,8 @@
|
|
|
608
608
|
@include _bpk-text-factory(
|
|
609
609
|
$bpk-font-size-xxxxxl,
|
|
610
610
|
$bpk-line-height-xxxxxl,
|
|
611
|
-
$bpk-font-weight-
|
|
612
|
-
$bpk-letter-spacing-
|
|
611
|
+
$bpk-font-weight-black,
|
|
612
|
+
$bpk-letter-spacing-hero
|
|
613
613
|
);
|
|
614
614
|
}
|
|
615
615
|
|
|
@@ -623,9 +623,25 @@
|
|
|
623
623
|
@mixin bpk-hero-5 {
|
|
624
624
|
@include _bpk-text-factory(
|
|
625
625
|
$bpk-font-size-xxxxl,
|
|
626
|
-
$bpk-line-height-
|
|
627
|
-
$bpk-font-weight-
|
|
628
|
-
$bpk-letter-spacing-
|
|
626
|
+
$bpk-line-height-xxxl,
|
|
627
|
+
$bpk-font-weight-black,
|
|
628
|
+
$bpk-letter-spacing-hero
|
|
629
|
+
);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
/// Hero 6 text style
|
|
633
|
+
///
|
|
634
|
+
/// @example scss
|
|
635
|
+
/// .selector {
|
|
636
|
+
/// @include bpk-hero-6;
|
|
637
|
+
/// }
|
|
638
|
+
|
|
639
|
+
@mixin bpk-hero-6 {
|
|
640
|
+
@include _bpk-text-factory(
|
|
641
|
+
$bpk-font-size-xxxl,
|
|
642
|
+
$bpk-line-height-xxl,
|
|
643
|
+
$bpk-font-weight-black,
|
|
644
|
+
$bpk-letter-spacing-hero
|
|
629
645
|
);
|
|
630
646
|
}
|
|
631
647
|
|
|
@@ -44,32 +44,33 @@ const withScrim = WrappedComponent => {
|
|
|
44
44
|
isIphone
|
|
45
45
|
} = this.props;
|
|
46
46
|
const applicationElement = getApplicationElement();
|
|
47
|
+
requestAnimationFrame(() => {
|
|
48
|
+
/**
|
|
49
|
+
* iPhones & iPads need to have a fixed body
|
|
50
|
+
* and scrolling stored to prevent some iOS specific issues occuring
|
|
51
|
+
*
|
|
52
|
+
* Issue description:
|
|
53
|
+
* iOS safari does not prevent scrolling on the underlying content.
|
|
54
|
+
* Without the below fixes this results in users being able to scroll below any modal or dialog that uses withScrim.
|
|
55
|
+
*
|
|
56
|
+
* The fixes can be summaried here: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
|
|
57
|
+
*
|
|
58
|
+
* The most dangerous of the fixes below is the fixBody, this function applies changes to the <body> style.
|
|
59
|
+
* This has the potential to override any custom styles already applied. The assumption here is that no one internally is making these changes to body.
|
|
60
|
+
*
|
|
61
|
+
* There is a corresponding set of functions in the componentWillUnmount block that deals with undoing these changes.
|
|
62
|
+
*/
|
|
63
|
+
if (isIphone || isIpad) {
|
|
64
|
+
storeScroll();
|
|
65
|
+
fixBody();
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
|
|
69
|
+
* The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
|
|
70
|
+
*/
|
|
47
71
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
* and scrolling stored to prevent some iOS specific issues occuring
|
|
51
|
-
*
|
|
52
|
-
* Issue description:
|
|
53
|
-
* iOS safari does not prevent scrolling on the underlying content.
|
|
54
|
-
* Without the below fixes this results in users being able to scroll below any modal or dialog that uses withScrim.
|
|
55
|
-
*
|
|
56
|
-
* The fixes can be summaried here: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
|
|
57
|
-
*
|
|
58
|
-
* The most dangerous of the fixes below is the fixBody, this function applies changes to the <body> style.
|
|
59
|
-
* This has the potential to override any custom styles already applied. The assumption here is that no one internally is making these changes to body.
|
|
60
|
-
*
|
|
61
|
-
* There is a corresponding set of functions in the componentWillUnmount block that deals with undoing these changes.
|
|
62
|
-
*/
|
|
63
|
-
if (isIphone || isIpad) {
|
|
64
|
-
storeScroll();
|
|
65
|
-
fixBody();
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
|
|
69
|
-
* The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
|
|
70
|
-
*/
|
|
71
|
-
|
|
72
|
-
lockScroll();
|
|
72
|
+
lockScroll();
|
|
73
|
+
});
|
|
73
74
|
if (applicationElement) {
|
|
74
75
|
applicationElement.setAttribute('aria-hidden', 'true');
|
|
75
76
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "34.
|
|
3
|
+
"version": "34.6.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"@popperjs/core": "^2.11.8",
|
|
27
27
|
"@radix-ui/react-slider": "^1.1.2",
|
|
28
28
|
"@react-google-maps/api": "^2.12.0",
|
|
29
|
-
"@skyscanner/bpk-foundations-web": "^
|
|
29
|
+
"@skyscanner/bpk-foundations-web": "^18.1.0",
|
|
30
30
|
"@skyscanner/bpk-svgs": "^19.3.0",
|
|
31
31
|
"a11y-focus-scope": "^1.1.3",
|
|
32
32
|
"a11y-focus-store": "^1.0.0",
|
|
@@ -560,8 +560,8 @@
|
|
|
560
560
|
@include _bpk-text-factory(
|
|
561
561
|
tokens.$bpk-font-size-8-xl,
|
|
562
562
|
tokens.$bpk-line-height-8-xl,
|
|
563
|
-
tokens.$bpk-font-weight-
|
|
564
|
-
tokens.$bpk-letter-spacing-
|
|
563
|
+
tokens.$bpk-font-weight-black,
|
|
564
|
+
tokens.$bpk-letter-spacing-hero
|
|
565
565
|
);
|
|
566
566
|
}
|
|
567
567
|
|
|
@@ -576,8 +576,8 @@
|
|
|
576
576
|
@include _bpk-text-factory(
|
|
577
577
|
tokens.$bpk-font-size-7-xl,
|
|
578
578
|
tokens.$bpk-line-height-7-xl,
|
|
579
|
-
tokens.$bpk-font-weight-
|
|
580
|
-
tokens.$bpk-letter-spacing-
|
|
579
|
+
tokens.$bpk-font-weight-black,
|
|
580
|
+
tokens.$bpk-letter-spacing-hero
|
|
581
581
|
);
|
|
582
582
|
}
|
|
583
583
|
|
|
@@ -592,8 +592,8 @@
|
|
|
592
592
|
@include _bpk-text-factory(
|
|
593
593
|
tokens.$bpk-font-size-6-xl,
|
|
594
594
|
tokens.$bpk-line-height-6-xl,
|
|
595
|
-
tokens.$bpk-font-weight-
|
|
596
|
-
tokens.$bpk-letter-spacing-
|
|
595
|
+
tokens.$bpk-font-weight-black,
|
|
596
|
+
tokens.$bpk-letter-spacing-hero
|
|
597
597
|
);
|
|
598
598
|
}
|
|
599
599
|
|
|
@@ -608,8 +608,8 @@
|
|
|
608
608
|
@include _bpk-text-factory(
|
|
609
609
|
tokens.$bpk-font-size-xxxxxl,
|
|
610
610
|
tokens.$bpk-line-height-xxxxxl,
|
|
611
|
-
tokens.$bpk-font-weight-
|
|
612
|
-
tokens.$bpk-letter-spacing-
|
|
611
|
+
tokens.$bpk-font-weight-black,
|
|
612
|
+
tokens.$bpk-letter-spacing-hero
|
|
613
613
|
);
|
|
614
614
|
}
|
|
615
615
|
|
|
@@ -623,9 +623,25 @@
|
|
|
623
623
|
@mixin bpk-hero-5 {
|
|
624
624
|
@include _bpk-text-factory(
|
|
625
625
|
tokens.$bpk-font-size-xxxxl,
|
|
626
|
-
tokens.$bpk-line-height-
|
|
627
|
-
tokens.$bpk-font-weight-
|
|
628
|
-
tokens.$bpk-letter-spacing-
|
|
626
|
+
tokens.$bpk-line-height-xxxl,
|
|
627
|
+
tokens.$bpk-font-weight-black,
|
|
628
|
+
tokens.$bpk-letter-spacing-hero
|
|
629
|
+
);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
/// Hero 6 text style
|
|
633
|
+
///
|
|
634
|
+
/// @example scss
|
|
635
|
+
/// .selector {
|
|
636
|
+
/// @include bpk-hero-6;
|
|
637
|
+
/// }
|
|
638
|
+
|
|
639
|
+
@mixin bpk-hero-6 {
|
|
640
|
+
@include _bpk-text-factory(
|
|
641
|
+
tokens.$bpk-font-size-xxxl,
|
|
642
|
+
tokens.$bpk-line-height-xxl,
|
|
643
|
+
tokens.$bpk-font-weight-black,
|
|
644
|
+
tokens.$bpk-letter-spacing-hero
|
|
629
645
|
);
|
|
630
646
|
}
|
|
631
647
|
|