@skyscanner/backpack-web 27.0.0 → 28.0.0

package/bpk-component-infinite-scroll/src/intersection-observer.js

@@ -18,9 +18,8 @@
 
 if (typeof window === 'undefined') {
   global.IntersectionObserver = class {
-    observe() {} // eslint-disable-line class-methods-use-this
-
-    unobserve() {} // eslint-disable-line class-methods-use-this
+    observe() {}
+    unobserve() {}
   };
 } else {
   require('intersection-observer'); /* eslint-disable-line global-require */

package/bpk-component-nudger/src/BpkNudger.d.ts

@@ -18,5 +18,5 @@
 
 /// <reference types="react" />
 import { type CommonProps } from './common-types';
-declare const BpkNudger: ({ className, buttonType, ...rest }: CommonProps) => JSX.Element;
+declare const BpkNudger: ({ buttonType, className, icon, id, subtitle, title, ...rest }: CommonProps) => JSX.Element;
 export default BpkNudger;

package/bpk-component-nudger/src/BpkNudger.js

@@ -17,9 +17,13 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkLabel from "../../bpk-component-label";
 import BpkConfigurableNudger from "./BpkConfigurableNudger";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const compareValues = (a, b) => a - b;
 const incrementValue = currentValue => currentValue + 1;
@@ -28,15 +32,42 @@ const formatValue = currentValue => currentValue.toString();
 const BpkNudger = ({
   buttonType = 'secondary',
   className = null,
+  icon,
+  id,
+  subtitle,
+  title,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkConfigurableNudger, {
-  inputClassName: getClassName('bpk-nudger__input--numeric'),
-  compareValues: compareValues,
-  incrementValue: incrementValue,
-  decrementValue: decrementValue,
-  formatValue: formatValue,
-  className: className,
-  buttonType: buttonType,
-  ...rest
-});
+}) => {
+  const classNames = getClassName(title && 'bpk-nudger__container');
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    children: [title && /*#__PURE__*/_jsxs(BpkLabel, {
+      htmlFor: id,
+      className: getClassName('bpk-nudger__label'),
+      children: [icon, /*#__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__label--title-subtitle'),
+        children: [/*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.heading5,
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+          className: getClassName('bpk-nudger__label--subtitle'),
+          children: subtitle
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(BpkConfigurableNudger, {
+      inputClassName: getClassName('bpk-nudger__input--numeric'),
+      compareValues: compareValues,
+      incrementValue: incrementValue,
+      decrementValue: decrementValue,
+      formatValue: formatValue,
+      className: className,
+      buttonType: buttonType,
+      id: id,
+      ...rest
+    })]
+  });
+};
 export default BpkNudger;

package/bpk-component-nudger/src/BpkNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-nudger__input--secondary-on-dark{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:0.5rem}.bpk-nudger__label--title-subtitle{display:flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#545860}

package/bpk-component-nudger/src/common-types.d.ts

@@ -16,14 +16,18 @@
  * limitations under the License.
  */
 
+import type { ReactNode } from "react";
 export type CommonProps = {
     id: string;
     min: string | number;
     max: string | number;
     value: string | number;
-    onChange: (arg0: any) => (void | null);
+    onChange: (arg0: any) => void | null;
     className?: string | null;
     increaseButtonLabel: string;
     decreaseButtonLabel: string;
     buttonType?: string;
+    title?: string;
+    subtitle?: string;
+    icon?: ReactNode;
 };

package/bpk-mixins/sass-functions.js

@@ -17,7 +17,7 @@
  */
 
 // We disable eslint here as this package is listed as a peerDep so consumers are required to install this when using this package.
-// eslint-disable-next-line import/no-unresolved
+ 
 const nodeSass = require('node-sass');
 
 module.exports = {

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/index.js

@@ -27,7 +27,7 @@ import './index.scss';
 
   // touch support
   classNames.push(
-    'ontouchstart' in window || // eslint-disable-line no-undef
+    'ontouchstart' in window ||  
       (window.DocumentTouch && document instanceof DocumentTouch) // eslint-disable-line no-undef
       ? 'touch-support'
       : 'no-touch-support',
@@ -35,7 +35,7 @@ import './index.scss';
 
   // add more feature tests here...
 
-  // eslint-disable-next-line no-undef
+   
   document.documentElement.className += ` ${classNames
     .map((className) => `bpk-${className}`)
     .join(' ')}`;

package/package.json

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

package/bpk-component-nudger-row/index.d.ts

@@ -1,21 +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 BpkNudgerRow, { type Props as BpkNudgerRowProps } from './src/BpkNudgerRow';
-export type { BpkNudgerRowProps };
-export default BpkNudgerRow;

package/bpk-component-nudger-row/index.js

@@ -1,20 +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 BpkNudgerRow from "./src/BpkNudgerRow";
-export default BpkNudgerRow;

package/bpk-component-nudger-row/src/BpkNudgerRow.d.ts

@@ -1,33 +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.
- */
-
-/// <reference types="react" />
-export type Props = {
-    title: string;
-    nudgerId: string;
-    value: number;
-    decreaseButtonLabel: string;
-    increaseButtonLabel: string;
-    min: number;
-    max: number;
-    onChange: (arg0: any) => (null | void);
-    subtitle?: string;
-    className?: string | null;
-};
-declare const BpkNudgerRow: ({ title, nudgerId, subtitle, decreaseButtonLabel, increaseButtonLabel, min, max, onChange, value, className }: Props) => JSX.Element;
-export default BpkNudgerRow;

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;

package/bpk-component-nudger-row/src/BpkNudgerRow.module.css

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger-row{display:flex;justify-content:space-between;align-items:center}.bpk-nudger-row__title-subtitle{display:flex;flex-direction:column;justify-content:space-between}.bpk-nudger-row__subtitle{color:#545860}