@skyscanner/backpack-web 26.0.0 → 28.0.0

package/bpk-mixins/src/mixins/_utils.scss

@@ -0,0 +1,249 @@
+/*
+ * 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.
+ */
+
+////
+/// @group utils
+////
+
+/// Hide visually and from screen readers.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-hidden();
+///   }
+
+@mixin bpk-hidden {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+/// Hide only visually, but have it available for screen readers:
+///
+/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///
+/// @example scss
+///   .selector {
+///     @include bpk-visually-hidden();
+///   }
+
+@mixin bpk-visually-hidden {
+  position: absolute;
+  width: 1px; /* stylelint-disable-line unit-disallowed-list */
+  height: 1px; /* stylelint-disable-line unit-disallowed-list */
+  margin: -1px; /* stylelint-disable-line unit-disallowed-list */
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard:
+///
+/// https://www.drupal.org/node/897638
+///
+/// @require {mixin} bpk-visually-hidden
+///
+/// @example scss
+///   .selector {
+///     @include bpk-visually-hidden();
+///     @include bpk-visually-hidden--focusable();
+///   }
+
+@mixin bpk-visually-hidden--focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
+
+/// Hide visually and from screen readers, but maintain layout.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-invisible();
+///   }
+
+@mixin bpk-invisible {
+  visibility: hidden;
+}
+
+/// Clearfix: contain floats.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-clearfix();
+///   }
+
+@mixin bpk-clearfix {
+  &::before,
+  &::after {
+    content: '';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+/// Target RTL specific styles.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-rtl() {
+///       /* RTL scss goes here */
+///     }
+///   }
+
+@mixin bpk-rtl {
+  html[dir='rtl'] & {
+    @content;
+  }
+}
+
+/// :hover pseudo selector wrapper which prevents styles displaying on touch devices
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-hover() {
+///       /* Non-touch specific hover scss goes here */
+///     }
+///   }
+
+@mixin bpk-hover {
+  .bpk-no-touch-support &:hover:not(:active):not(:disabled) {
+    @content;
+  }
+
+  // Duplicating the above rule with `:global(...)` pseudo selector around the
+  // global `.bpk-no-touch-support` class to provide support for CSS modules.
+  // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped
+  //   leaving a duplicate rule which in turn will be 'uglified' out - so no worries there
+  // - when processed through node-sass only, the `:global(...)` pseudo selector will be left
+  //   intact and ignored by all browsers
+  // stylelint-disable-next-line selector-pseudo-class-no-unknown
+  :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) {
+    @content;
+  }
+}
+
+/// Target locale specific styles.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-locale('ja-JP') {
+///       /* ja-JP scss goes here */
+///     }
+///   }
+
+@mixin bpk-locale($locale) {
+  html[lang='#{$locale}'] &,
+  html[lang='#{to_lower_case($locale)}'] & {
+    @content;
+  }
+}
+
+/// Create a Backpack themeable property with
+/// fallback support for old browsers and when
+/// the CSS variable is not defined.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color);
+///   }
+
+@mixin bpk-themeable-property($property, $variableName, $fallback) {
+  #{$property}: $fallback;
+  #{$property}: var($variableName, $fallback);
+}
+
+/// Create a property that uses the Backpack primary color blue-500.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-apply-primary-color-to(color);
+///   }
+@mixin bpk-apply-primary-color-to($property) {
+  @include bpk-themeable-property(
+    $property,
+    --bpk-primary-color,
+    $bpk-color-sky-blue
+  );
+}
+
+/// Replace part of a string with another string.
+///
+/// @param {string} $string - The string inside which the replacement should take place.
+/// @param {string} $search - The substring to be replaced.
+/// @param {string} $replace [''] - The string to replace $search.
+
+@function str-replace($string, $search, $replace: '') {
+  /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */
+  /* stylelint-disable-next-line scss/no-global-function-names */
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}
+
+/// Increases the tappable area of the element to the
+/// minimum required for touch devices.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-touch-area;
+///   }
+
+@mixin bpk-touch-tappable {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    /* stylelint-disable-next-line function-calc-no-invalid */
+    top: calc((-#{bpk-spacing-xxl() + bpk-spacing-sm()} / 2) + 50%);
+    /* stylelint-disable-next-line function-calc-no-invalid */
+    left: calc((-#{bpk-spacing-xxl() + bpk-spacing-sm()} / 2) + 50%);
+    content: '';
+    width: bpk-spacing-xxl() + bpk-spacing-sm();
+    height: bpk-spacing-xxl() + bpk-spacing-sm();
+  }
+}

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

@@ -192,7 +192,7 @@ class Portal extends Component {
 
   // This function is taken from modernizr
   // See https://github.com/modernizr/modernizr
-  // eslint-disable-next-line class-methods-use-this
+
   supportsPassiveEvents() {
     let supportsPassiveOption = false;
     try {

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

@@ -18,9 +18,7 @@
 // We disable eslint on the below line because it breaks the flow type definitions and the FlowIssue comment below
 // We can remove this when we migrate this file to TypeScript.
 // $FlowIssue[value-as-type] - PropType is imported as a type so is incorrectly reporting the PropType is not a valid type
-const deprecated = (propType, alternativeSuggestion) =>
-// eslint-disable-line
-(props, propName, componentName, ...rest) => {
+const deprecated = (propType, alternativeSuggestion) => (props, propName, componentName, ...rest) => {
   if (props[propName] != null) {
     const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`;
     // eslint-disable-next-line no-console

package/bpk-stylesheets/base.css

@@ -0,0 +1,20 @@
+/*
+ * 
+ * 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.
+ * 
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
+

package/bpk-stylesheets/base.js

@@ -0,0 +1 @@
+(()=>{"use strict";(()=>{if("undefined"==typeof document)return;const o=[];o.push("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch?"touch-support":"no-touch-support"),document.documentElement.className+=` ${o.map((o=>`bpk-${o}`)).join(" ")}`})()})();

package/bpk-stylesheets/font.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.
+*/
+@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-f9356ad6.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-46f9f429.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Book-ab1dbcbe.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-10532ac3.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-db5d0ac5.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Italic-8eec3f3a.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:500;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-c08dc28b.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-865e167a.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Medium-d0ae478a.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:500;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-81517f37.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-bbdb6b0c.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-MediumItalic-226fe64c.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:700;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-8545937e.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-a099c9f7.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Bold-ec4cc5a7.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:700;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-01b5d138.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-4d6d36e3.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BoldItalic-dc9284dc.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:normal;font-weight:900;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-bb3c9434.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-bba2eb55.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-Black-314703cc.ttf") format("ttf")}@font-face{font-family:'Skyscanner Relative';font-style:italic;font-weight:900;src:url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-c2149c91.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-a34cd594.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/SkyscannerRelative-BlackItalic-7e516ee5.ttf") format("ttf")}

package/{bpk-component-nudger-row/index.d.ts → bpk-stylesheets/font.js}

@@ -16,6 +16,4 @@
  * limitations under the License.
  */
 
-import BpkNudgerRow, { type Props as BpkNudgerRowProps } from './src/BpkNudgerRow';
-export type { BpkNudgerRowProps };
-export default BpkNudgerRow;
+import './font.scss';

package/bpk-stylesheets/font.scss

@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+
+$base-url: 'https://js.skyscnr.com/sttc/bpk-fonts';
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Book-f9356ad6.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Book-46f9f429.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Book-ab1dbcbe.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Italic-10532ac3.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Italic-db5d0ac5.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Italic-8eec3f3a.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 500;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Medium-c08dc28b.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Medium-865e167a.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Medium-d0ae478a.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 500;
+  src:
+    url('#{$base-url}/SkyscannerRelative-MediumItalic-81517f37.woff2')
+      format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-MediumItalic-bbdb6b0c.woff')
+      format('woff'),
+    url('#{$base-url}/SkyscannerRelative-MediumItalic-226fe64c.ttf')
+      format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Bold-8545937e.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Bold-a099c9f7.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Bold-ec4cc5a7.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 700;
+  src:
+    url('#{$base-url}/SkyscannerRelative-BoldItalic-01b5d138.woff2')
+      format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-BoldItalic-4d6d36e3.woff')
+      format('woff'),
+    url('#{$base-url}/SkyscannerRelative-BoldItalic-dc9284dc.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: normal;
+  font-weight: 900;
+  src:
+    url('#{$base-url}/SkyscannerRelative-Black-bb3c9434.woff2') format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-Black-bba2eb55.woff') format('woff'),
+    url('#{$base-url}/SkyscannerRelative-Black-314703cc.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Skyscanner Relative';
+  font-style: italic;
+  font-weight: 900;
+  src:
+    url('#{$base-url}/SkyscannerRelative-BlackItalic-c2149c91.woff2')
+      format('woff2'),
+    url('#{$base-url}/SkyscannerRelative-BlackItalic-a34cd594.woff')
+      format('woff'),
+    url('#{$base-url}/SkyscannerRelative-BlackItalic-7e516ee5.ttf')
+      format('ttf');
+}

package/{bpk-storybook-utils/src/BpkStorybookUtils.js → bpk-stylesheets/index.js}

@@ -15,17 +15,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable global-require, no-console, import/no-mutable-exports */
-let action = (...args) => () => console.info(args);
-try {
-  const storybookAction = require('@storybook/addon-actions').action;
-  if (storybookAction) {
-    action = storybookAction;
+
+import './index.scss';
+
+(() => {
+  if (typeof document === 'undefined') {
+    return;
   }
-} catch (e) {
-  console.info('Storybook action is not available. Falling back to `console.log`.');
-}
-export default {
-  action
-};
-export { action };
+
+  const classNames = [];
+
+  // touch support
+  classNames.push(
+    'ontouchstart' in window ||  
+      (window.DocumentTouch && document instanceof DocumentTouch) // eslint-disable-line no-undef
+      ? 'touch-support'
+      : 'no-touch-support',
+  );
+
+  // add more feature tests here...
+
+   
+  document.documentElement.className += ` ${classNames
+    .map((className) => `bpk-${className}`)
+    .join(' ')}`;
+})();

package/bpk-stylesheets/index.scss

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+
+@import '~normalize.css';
+@import '../bpk-mixins/index.scss';
+
+// stylelint-disable-next-line selector-max-type
+html {
+  font-size: $bpk-font-size-root;
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: inherit;
+
+  &::before,
+  &::after {
+    box-sizing: inherit;
+  }
+}
+
+/* stylelint-disable selector-class-pattern */
+body {
+  color: $bpk-font-color-base;
+  font-family: $bpk-font-family-base;
+  font-size: $bpk-font-size-base;
+  line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+
+  :global(&.scaffold-font-size) {
+    font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
+  }
+
+  :global(&.enable-font-smoothing) {
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+:global(.hidden),
+:global(.hide) {
+  @include bpk-hidden;
+}
+
+:global(.visuallyhidden),
+:global(.visually-hidden) {
+  @include bpk-visually-hidden;
+}
+
+:global(.visuallyhidden.focusable),
+:global(.visually-hidden.focusable) {
+  @include bpk-visually-hidden--focusable;
+}
+
+:global(.invisible) {
+  @include bpk-invisible;
+}
+
+:global(.clearfix) {
+  @include bpk-clearfix;
+}
+
+/* stylelint-enable */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "26.0.0",
+  "version": "28.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,10 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^16.1.0",
-    "@skyscanner/bpk-svgs": "^17.0.0",
+    "@skyscanner/bpk-foundations-web": "^17.0.0",
+    "@skyscanner/bpk-svgs": "^18.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^41.2.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",
@@ -36,6 +35,7 @@
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
+    "normalize.css": "4.2.0",
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
@@ -46,6 +46,7 @@
     "react-window": "^1.8.7"
   },
   "peerDependencies": {
+    "node-sass": ">=4.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

package/bpk-component-nudger-row/src/BpkNudgerRow.js

@@ -1,69 +0,0 @@
-/*
- * 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.
- */
-
-import { cssModules } from "../../bpk-react-utils";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import BpkNudger from "../../bpk-component-nudger";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkLabel from "../../bpk-component-label";
-import STYLES from "./BpkNudgerRow.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkNudgerRow = ({
-  className = null,
-  decreaseButtonLabel,
-  increaseButtonLabel,
-  max,
-  min,
-  nudgerId,
-  onChange,
-  subtitle,
-  title,
-  value
-}) => {
-  const classNames = getClassName('bpk-nudger-row', className);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
-    children: [/*#__PURE__*/_jsx(BpkLabel, {
-      htmlFor: nudgerId,
-      children: /*#__PURE__*/_jsxs("span", {
-        // For a11y on IOS, role='text' forces label to be read in full. More info: https://axesslab.com/text-splitting/
-        // eslint-disable-next-line jsx-a11y/aria-role
-        role: "text",
-        className: getClassName('bpk-nudger-row__title-subtitle'),
-        children: [/*#__PURE__*/_jsx(BpkText, {
-          textStyle: TEXT_STYLES.heading5,
-          children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
-          className: getClassName('bpk-nudger-row__subtitle'),
-          children: subtitle
-        })]
-      })
-    }), /*#__PURE__*/_jsx(BpkNudger, {
-      id: nudgerId,
-      decreaseButtonLabel: decreaseButtonLabel,
-      increaseButtonLabel: increaseButtonLabel,
-      min: min,
-      max: max,
-      onChange: onChange,
-      value: value
-    })]
-  });
-};
-export default BpkNudgerRow;