@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-price/src/BpkPrice.js

@@ -14,30 +14,15 @@
  * 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.
- */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkPrice.module.scss';
-import { SIZES, ALIGNS } from './common-types';
-
-type Props = {
-  price: string,
-  size: $Values<typeof SIZES>,
-  align: $Values<typeof ALIGNS>,
-  className: ?string,
-  leadingText: ?string,
-  trailingText: ?string,
-  previousPrice: ?string,
-};
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import STYLES from "./BpkPrice.module.css";
+import { SIZES, ALIGNS } from "./common-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const BpkPrice = (props: Props) => {
+const BpkPrice = props => {
   const {
     align,
     className,
@@ -48,81 +33,46 @@ const BpkPrice = (props: Props) => {
     trailingText,
     ...rest
   } = props;
-
   const isSmall = size === SIZES.small;
   const isAlignRight = align === ALIGNS.right;
-
-  return (
-    <div
-      className={getClassName(
-        'bpk-price',
-        isAlignRight && 'bpk-price--right',
-        className,
-      )}
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      {...rest}
-    >
-      <div
-        className={getClassName(
-          previousPrice && 'bpk-price__leading',
-          isAlignRight && 'bpk-price__leading--right',
-        )}
-      >
-        {previousPrice && (
-          <BpkText
-            className={getClassName('bpk-price__previous-price')}
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-          >
-            {previousPrice}
-          </BpkText>
-        )}
-        {previousPrice && leadingText && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-            className={getClassName('bpk-price__separator')}
-          >
-            &#67871;
-          </BpkText>
-        )}
-
-        {leadingText && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-          >
-            {leadingText}
-          </BpkText>
-        )}
-      </div>
-      <div
-        className={getClassName(isAlignRight && 'bpk-price__column-container')}
-      >
-        <BpkText
-          textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
-          className={getClassName(
-            'bpk-price__price',
-            !isAlignRight && 'bpk-price__spacing',
-          )}
-          tagName="span"
-        >
-          {price}
-        </BpkText>
-        {trailingText && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-            className={getClassName('bpk-price__trailing')}
-          >
-            {trailingText}
-          </BpkText>
-        )}
-      </div>
-    </div>
-  );
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className)
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
+    ...rest,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right'),
+      children: [previousPrice && /*#__PURE__*/_jsx(BpkText, {
+        className: getClassName('bpk-price__previous-price'),
+        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+        tagName: "span",
+        children: previousPrice
+      }), previousPrice && leadingText && /*#__PURE__*/_jsx(BpkText, {
+        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+        tagName: "span",
+        className: getClassName('bpk-price__separator'),
+        children: "\uD802\uDD1F"
+      }), leadingText && /*#__PURE__*/_jsx(BpkText, {
+        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+        tagName: "span",
+        children: leadingText
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: getClassName(isAlignRight && 'bpk-price__column-container'),
+      children: [/*#__PURE__*/_jsx(BpkText, {
+        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
+        className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
+        tagName: "span",
+        children: price
+      }), trailingText && /*#__PURE__*/_jsx(BpkText, {
+        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+        tagName: "span",
+        className: getClassName('bpk-price__trailing'),
+        children: trailingText
+      })]
+    })]
+  });
 };
-
 BpkPrice.propTypes = {
   price: PropTypes.string.isRequired,
   size: PropTypes.oneOf(Object.keys(SIZES)),
@@ -130,16 +80,14 @@ BpkPrice.propTypes = {
   className: PropTypes.string,
   leadingText: PropTypes.string,
   trailingText: PropTypes.string,
-  previousPrice: PropTypes.string,
+  previousPrice: PropTypes.string
 };
-
 BpkPrice.defaultProps = {
   size: SIZES.small,
   align: ALIGNS.left,
   className: null,
   leadingText: null,
   trailingText: null,
-  previousPrice: null,
+  previousPrice: null
 };
-
-export default BpkPrice;
+export default BpkPrice;

package/bpk-component-price/src/common-types.js

@@ -14,16 +14,11 @@
  * 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.
- */
-
-/* @flow strict */
-
-export const SIZES = {
+ */export const SIZES = {
   small: 'small',
-  large: 'large',
+  large: 'large'
 };
-
 export const ALIGNS = {
   left: 'left',
-  right: 'right',
-};
+  right: 'right'
+};

package/bpk-component-progress/index.js

@@ -14,12 +14,7 @@
  * 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.
- */
-
-/* @flow strict */
-
-import BpkProgress from './src/BpkProgress';
-import themeAttributes from './src/themeAttributes';
-
+ */import BpkProgress from "./src/BpkProgress";
+import themeAttributes from "./src/themeAttributes";
 export default BpkProgress;
-export { themeAttributes };
+export { themeAttributes };

package/bpk-component-progress/src/BpkProgress.js

@@ -14,51 +14,29 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
 import { Component } from 'react';
 import clamp from 'lodash.clamp';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkProgress.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkProgress.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
-
-const renderSteps = (numberOfSteps) => {
+const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+const renderSteps = numberOfSteps => {
   const steps = [];
   for (let i = 1; i <= numberOfSteps; i += 1) {
     const left = `${100 * (i / (numberOfSteps + 1))}%`;
-    steps.push(
-      <div
-        key={`bpk-progress__step-${i}`}
-        className={getClassName('bpk-progress__step')}
-        style={{ left }}
-      />,
-    );
+    steps.push( /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-progress__step'),
+      style: {
+        left
+      }
+    }, `bpk-progress__step-${i}`));
   }
   return steps;
 };
-
-type Props = {
-  max: number,
-  min: number,
-  value: number,
-  stepped: boolean,
-  small: boolean,
-  className: ?string,
-  onComplete: ?() => mixed,
-  onCompleteTransitionEnd: ?() => mixed,
-  getValueText: ?(number, number, number) => mixed,
-};
-
-class BpkProgress extends Component<Props> {
+class BpkProgress extends Component {
   static propTypes = {
     max: PropTypes.number.isRequired,
     min: PropTypes.number.isRequired,
@@ -68,40 +46,38 @@ class BpkProgress extends Component<Props> {
     className: PropTypes.string,
     onComplete: PropTypes.func,
     onCompleteTransitionEnd: PropTypes.func,
-    getValueText: PropTypes.func,
+    getValueText: PropTypes.func
   };
-
   static defaultProps = {
     className: null,
     stepped: false,
     small: false,
     onComplete: () => null,
     onCompleteTransitionEnd: () => null,
-    getValueText: null,
+    getValueText: null
   };
-
-  componentDidUpdate(previousProps: Props) {
-    const { max, value } = this.props;
-    if (
-      value >= max &&
-      value !== previousProps.value &&
-      this.props.onComplete
-    ) {
+  componentDidUpdate(previousProps) {
+    const {
+      max,
+      value
+    } = this.props;
+    if (value >= max && value !== previousProps.value && this.props.onComplete) {
       this.props.onComplete();
-
       if (!isTransitionEndSupported() && this.props.onCompleteTransitionEnd) {
         this.props.onCompleteTransitionEnd();
       }
     }
   }
-
   handleCompleteTransitionEnd = () => {
-    const { max, onCompleteTransitionEnd, value } = this.props;
+    const {
+      max,
+      onCompleteTransitionEnd,
+      value
+    } = this.props;
     if (value >= max && onCompleteTransitionEnd) {
       onCompleteTransitionEnd();
     }
   };
-
   render() {
     const {
       className,
@@ -113,46 +89,34 @@ class BpkProgress extends Component<Props> {
       value,
       ...rest
     } = this.props;
-
-    const classNames = getClassName(
-      'bpk-progress',
-      className,
-      small && 'bpk-progress--small',
-    );
-
-    const valueClassName = getClassName(
-      'bpk-progress__value',
-      stepped && 'bpk-progress__value--stepped',
-    );
-
+    const classNames = getClassName('bpk-progress', className, small && 'bpk-progress--small');
+    const valueClassName = getClassName('bpk-progress__value', stepped && 'bpk-progress__value--stepped');
     const adjustedValue = clamp(value, min, max);
     const percentage = 100 * (adjustedValue / (max - min));
     const numberOfSteps = stepped ? max - min - 1 : 0;
-
     delete rest.onComplete;
     delete rest.onCompleteTransitionEnd;
-
     return (
+      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <div
-        className={classNames}
-        role="progressbar"
-        aria-valuetext={getValueText ? getValueText(value, min, max) : null}
-        aria-valuenow={value}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        tabIndex="0"
-        {...rest}
-      >
-        <div
-          className={valueClassName}
-          style={{ width: `${percentage}%` }}
-          onTransitionEnd={this.handleCompleteTransitionEnd}
-        />
-        {renderSteps(numberOfSteps)}
-      </div>
+      _jsxs("div", {
+        className: classNames,
+        role: "progressbar",
+        "aria-valuetext": getValueText ? getValueText(value, min, max) : null,
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        tabIndex: "0",
+        ...rest,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: valueClassName,
+          style: {
+            width: `${percentage}%`
+          },
+          onTransitionEnd: this.handleCompleteTransitionEnd
+        }), renderSteps(numberOfSteps)]
+      })
     );
   }
 }
-
-export default BpkProgress;
+export default BpkProgress;

package/bpk-component-progress/src/themeAttributes.js

@@ -14,8 +14,4 @@
  * 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.
- */
-
-/* @flow strict */
-
-export default ['progressBarFillColor'];
+ */export default ['progressBarFillColor'];

package/bpk-component-radio/index.js

@@ -14,12 +14,7 @@
  * 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.
- */
-
-/* @flow strict */
-
-import BpkRadio from './src/BpkRadio';
-import themeAttributes from './src/themeAttributes';
-
+ */import BpkRadio from "./src/BpkRadio";
+import themeAttributes from "./src/themeAttributes";
 export default BpkRadio;
-export { themeAttributes };
+export { themeAttributes };

package/bpk-component-radio/src/BpkRadio.js

@@ -14,68 +14,46 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkRadio.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkRadio.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  name: string,
-  label: Node,
-  ariaLabel: ?string,
-  className: ?string,
-  disabled: boolean,
-  white: boolean,
-  valid: ?boolean,
-};
-
-const BpkRadio = (props: Props) => {
-  const { ariaLabel, className, disabled, label, name, valid, white, ...rest } =
-    props;
+const BpkRadio = props => {
+  const {
+    ariaLabel,
+    className,
+    disabled,
+    label,
+    name,
+    valid,
+    white,
+    ...rest
+  } = props;
 
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
-
-  const classNames = getClassName(
-    'bpk-radio',
-    white && 'bpk-radio--white',
-    disabled && 'bpk-radio--disabled',
-    white && disabled && 'bpk-radio--disabled--white',
-    isInvalid && 'bpk-radio--invalid',
-    className,
-  );
-
-  return (
-    <label className={classNames}>
-      {/* Deciding to support this because `aria-invalid` does often work with voiceover
-      despite not being in the spec. */}
-      {/* eslint-disable jsx-a11y/role-supports-aria-props */}
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */}
-      <input
-        type="radio"
-        className={getClassName('bpk-radio__input')}
-        name={name}
-        disabled={disabled}
-        aria-label={ariaLabel || label}
-        aria-invalid={isInvalid}
-        {...rest}
-      />
-      {/* eslint-enable */}
-      <div className={getClassName('bpk-radio__circle')} />
-      <span aria-hidden="true">{label}</span>
-    </label>
-  );
+  const classNames = getClassName('bpk-radio', white && 'bpk-radio--white', disabled && 'bpk-radio--disabled', white && disabled && 'bpk-radio--disabled--white', isInvalid && 'bpk-radio--invalid', className);
+  return /*#__PURE__*/_jsxs("label", {
+    className: classNames,
+    children: [/*#__PURE__*/_jsx("input", {
+      type: "radio",
+      className: getClassName('bpk-radio__input'),
+      name: name,
+      disabled: disabled,
+      "aria-label": ariaLabel || label,
+      "aria-invalid": isInvalid,
+      ...rest
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-radio__circle')
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      children: label
+    })]
+  });
 };
-
 BpkRadio.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
@@ -83,15 +61,13 @@ BpkRadio.propTypes = {
   disabled: PropTypes.bool,
   white: PropTypes.bool,
   className: PropTypes.string,
-  valid: PropTypes.bool,
+  valid: PropTypes.bool
 };
-
 BpkRadio.defaultProps = {
   ariaLabel: null,
   disabled: false,
   white: false,
   className: null,
-  valid: null,
+  valid: null
 };
-
-export default BpkRadio;
+export default BpkRadio;

package/bpk-component-radio/src/BpkRadio.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-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.125rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.125rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.5rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.5rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto}

package/bpk-component-radio/src/themeAttributes.js

@@ -14,8 +14,4 @@
  * 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.
- */
-
-/* @flow strict */
-
-export default ['radioCheckedColor'];
+ */export default ['radioCheckedColor'];

package/bpk-component-rating/index.js

@@ -14,11 +14,7 @@
  * 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.
- */
-/* @flow strict */
-
-import BpkRating from './src/BpkRating';
-import { RATING_SIZES, RATING_SCALES } from './src/common-types';
-
+ */import BpkRating from "./src/BpkRating";
+import { RATING_SIZES, RATING_SCALES } from "./src/common-types";
 export default BpkRating;
-export { RATING_SIZES, RATING_SCALES };
+export { RATING_SIZES, RATING_SCALES };