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

package/bpk-component-barchart/src/BpkChartDataTable.js

@@ -14,63 +14,55 @@
  * 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 dataProp from './customPropTypes';
-import STYLES from './BpkChartDataTable.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import dataProp from "./customPropTypes";
+import STYLES from "./BpkChartDataTable.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  data: Array<any>, // We pass any here as the array can contain free form data depending on the user
-  xScaleDataKey: string,
-  yScaleDataKey: string,
-  xAxisLabel: string,
-  yAxisLabel: string,
-};
-
-const BpkChartDataTable = (props: Props) => {
-  const { data, xAxisLabel, xScaleDataKey, yAxisLabel, yScaleDataKey } = props;
+const BpkChartDataTable = props => {
+  const {
+    data,
+    xAxisLabel,
+    xScaleDataKey,
+    yAxisLabel,
+    yScaleDataKey
+  } = props;
   const rows = data.map((point, i) => {
     const key = `chart-data-table-row-${i}`;
-
-    return (
-      <tr key={key}>
-        <td>{point[xScaleDataKey]}</td>
-        <td>{point[yScaleDataKey]}</td>
-      </tr>
-    );
+    return /*#__PURE__*/_jsxs("tr", {
+      children: [/*#__PURE__*/_jsx("td", {
+        children: point[xScaleDataKey]
+      }), /*#__PURE__*/_jsx("td", {
+        children: point[yScaleDataKey]
+      })]
+    }, key);
+  });
+  return /*#__PURE__*/_jsxs("table", {
+    className: getClassName('bpk-chart-data-table'),
+    children: [/*#__PURE__*/_jsx("thead", {
+      children: /*#__PURE__*/_jsxs("tr", {
+        children: [/*#__PURE__*/_jsx("th", {
+          children: xAxisLabel
+        }), /*#__PURE__*/_jsx("th", {
+          children: yAxisLabel
+        })]
+      })
+    }), /*#__PURE__*/_jsx("tbody", {
+      children: rows
+    })]
   });
-
-  return (
-    <table className={getClassName('bpk-chart-data-table')}>
-      <thead>
-        <tr>
-          <th>{xAxisLabel}</th>
-          <th>{yAxisLabel}</th>
-        </tr>
-      </thead>
-      <tbody>{rows}</tbody>
-    </table>
-  );
 };
-
 BpkChartDataTable.propTypes = {
-  data: dataProp, // This is actually required and will fail if not present
+  data: dataProp,
+  // This is actually required and will fail if not present
   xScaleDataKey: PropTypes.string.isRequired,
   yScaleDataKey: PropTypes.string.isRequired,
   xAxisLabel: PropTypes.string.isRequired,
-  yAxisLabel: PropTypes.string.isRequired,
+  yAxisLabel: PropTypes.string.isRequired
 };
-
 BpkChartDataTable.defaultProps = {
-  data: null,
+  data: null
 };
-
-export default BpkChartDataTable;
+export default BpkChartDataTable;

package/bpk-component-barchart/src/BpkChartGridLines.js

@@ -14,37 +14,14 @@
  * 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 { ORIENTATION_X, ORIENTATION_Y } from './orientation';
-import { identity, center } from './utils';
-import STYLES from './BpkChartGridLines.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
+import { identity, center } from "./utils";
+import STYLES from "./BpkChartGridLines.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  width: number,
-  height: number,
-  margin: {
-    top: number,
-    bottom: number,
-    left: number,
-    right: number,
-  },
-  scale: Object,
-  orientation: string,
-  numTicks: ?number,
-  tickOffset: number,
-  tickEvery: number,
-};
-
-const BpkChartGridLines = (props: Props) => {
+const BpkChartGridLines = props => {
   const {
     height,
     margin,
@@ -56,42 +33,33 @@ const BpkChartGridLines = (props: Props) => {
     width,
     ...rest
   } = props;
-
-  const ticks = scale.ticks
-    ? scale.ticks(numTicks)
-    : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
+  const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
   const position = (scale.bandwidth ? center : identity)(scale.copy());
-
-  const lineProps = (tick) => {
+  const lineProps = tick => {
     const value = position(tick);
-    return orientation === ORIENTATION_X
-      ? {
-          x1: value,
-          x2: value,
-          y2: height - margin.top - margin.bottom,
-        }
-      : {
-          x2: width - margin.left - margin.right,
-          y1: value,
-          y2: value,
-        };
+    return orientation === ORIENTATION_X ? {
+      x1: value,
+      x2: value,
+      y2: height - margin.top - margin.bottom
+    } : {
+      x2: width - margin.left - margin.right,
+      y1: value,
+      y2: value
+    };
   };
-
-  const toLine = (tick, i) => (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <line
-      className={getClassName('bpk-chart__grid-line')}
-      key={`${orientation}gridline${i.toString()}`}
-      {...lineProps(tick)}
-      {...rest}
-    />
-  );
-
-  return (
-    <g className={getClassName('bpk-chart__grid-lines')}>{ticks.map(toLine)}</g>
-  );
+  const toLine = (tick, i) =>
+  /*#__PURE__*/
+  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+  _jsx("line", {
+    className: getClassName('bpk-chart__grid-line'),
+    ...lineProps(tick),
+    ...rest
+  }, `${orientation}gridline${i.toString()}`);
+  return /*#__PURE__*/_jsx("g", {
+    className: getClassName('bpk-chart__grid-lines'),
+    children: ticks.map(toLine)
+  });
 };
-
 BpkChartGridLines.propTypes = {
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
@@ -99,20 +67,17 @@ BpkChartGridLines.propTypes = {
     top: PropTypes.number,
     bottom: PropTypes.number,
     left: PropTypes.number,
-    right: PropTypes.number,
+    right: PropTypes.number
   }).isRequired,
-
   scale: PropTypes.func.isRequired,
   orientation: PropTypes.oneOf([ORIENTATION_X, ORIENTATION_Y]).isRequired,
   numTicks: PropTypes.number,
   tickOffset: PropTypes.number,
-  tickEvery: PropTypes.number,
+  tickEvery: PropTypes.number
 };
-
 BpkChartGridLines.defaultProps = {
   numTicks: null,
   tickOffset: 0,
-  tickEvery: 1,
+  tickEvery: 1
 };
-
-export default BpkChartGridLines;
+export default BpkChartGridLines;

package/bpk-component-barchart/src/BpkChartMargin.js

@@ -14,42 +14,31 @@
  * 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 type { Node } from 'react';
-import PropTypes from 'prop-types';
-
-type Props = {
-  children: Node,
-  margin: {
-    top: number,
-    bottom: number,
-    left: number,
-    right: number,
-  },
-};
-
-const BpkChartMargin = (props: Props) => {
-  const { children, margin, ...rest } = props;
-
+ */import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkChartMargin = props => {
+  const {
+    children,
+    margin,
+    ...rest
+  } = props;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <g transform={`translate(${margin.left}, ${margin.top})`} {...rest}>
-      {children}
-    </g>
+    _jsx("g", {
+      transform: `translate(${margin.left}, ${margin.top})`,
+      ...rest,
+      children: children
+    })
   );
 };
-
 BpkChartMargin.propTypes = {
   children: PropTypes.node.isRequired,
   margin: PropTypes.shape({
     top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  }).isRequired,
+    right: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }).isRequired
 };
-
-export default BpkChartMargin;
+export default BpkChartMargin;

package/bpk-component-barchart/src/RTLtransforms.js

@@ -14,42 +14,25 @@
  * 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 { isRTL } from '../../bpk-react-utils';
-
-const rtlConditionalValue = (ltrValue: number, rtlValue: number) =>
-  isRTL() ? rtlValue : ltrValue;
+ */import { isRTL } from "../../bpk-react-utils";
+const rtlConditionalValue = (ltrValue, rtlValue) => isRTL() ? rtlValue : ltrValue;
 
 // Setting type as any as data which is passed to this function can be of any type
-const applyArrayRTLTransform = (arr: any) =>
-  isRTL() ? arr.slice(0).reverse() : arr;
-
-type objType = {
-  top: number,
-  left: number,
-  right: number,
-  bottom: number,
-};
-
-const applyMarginRTLTransform = (obj: objType) => {
+const applyArrayRTLTransform = arr => isRTL() ? arr.slice(0).reverse() : arr;
+const applyMarginRTLTransform = obj => {
   if (!isRTL()) {
     return obj;
   }
-  const { left, right, ...rest } = obj;
+  const {
+    left,
+    right,
+    ...rest
+  } = obj;
   // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
   return {
     left: right,
     right: left,
-    ...rest,
+    ...rest
   };
 };
-
-export {
-  applyArrayRTLTransform,
-  applyMarginRTLTransform,
-  rtlConditionalValue,
-  isRTL,
-};
+export { applyArrayRTLTransform, applyMarginRTLTransform, rtlConditionalValue, isRTL };

package/bpk-component-barchart/src/customPropTypes.js

@@ -14,38 +14,21 @@
  * 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 */
-
-type Props = {
-  xScaleDataKey: string,
-  yScaleDataKey: string,
-};
-
-export default (props: Props, propName: string, componentName: string) => {
-  const { xScaleDataKey, yScaleDataKey } = props;
+ */export default ((props, propName, componentName) => {
+  const {
+    xScaleDataKey,
+    yScaleDataKey
+  } = props;
   const data = props[propName];
   if (!Array.isArray(data)) {
-    return new Error(
-      `Invalid prop ${propName} supplied to ${componentName}. Should be an array`,
-    );
+    return new Error(`Invalid prop ${propName} supplied to ${componentName}. Should be an array`);
   }
-
   for (let i = 0; i < data.length; i += 1) {
     const object = data[i];
-    const valid =
-      Object.prototype.hasOwnProperty.call(object, xScaleDataKey) &&
-      Object.prototype.hasOwnProperty.call(object, yScaleDataKey);
+    const valid = Object.prototype.hasOwnProperty.call(object, xScaleDataKey) && Object.prototype.hasOwnProperty.call(object, yScaleDataKey);
     if (!valid) {
-      return new Error(
-        `Invalid prop ${propName} supplied to ${componentName}.` +
-          `Value ${JSON.stringify(
-            object,
-          )} should contain keys '${xScaleDataKey}' and '${yScaleDataKey}'`,
-      );
+      return new Error(`Invalid prop ${propName} supplied to ${componentName}.` + `Value ${JSON.stringify(object)} should contain keys '${xScaleDataKey}' and '${yScaleDataKey}'`);
     }
   }
-
   return null;
-};
+});

package/bpk-component-barchart/src/orientation.js

@@ -14,9 +14,5 @@
  * 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 ORIENTATION_X = 'x';
-export const ORIENTATION_Y = 'y';
+ */export const ORIENTATION_X = 'x';
+export const ORIENTATION_Y = 'y';

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

@@ -14,13 +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 [
-  'barchartBarBackgroundColor',
-  'barchartBarHoverBackgroundColor',
-  'barchartBarActiveBackgroundColor',
-  'barchartBarSelectedBackgroundColor',
-];
+ */export default ['barchartBarBackgroundColor', 'barchartBarHoverBackgroundColor', 'barchartBarActiveBackgroundColor', 'barchartBarSelectedBackgroundColor'];

package/bpk-component-barchart/src/utils.js

@@ -14,30 +14,22 @@
  * 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 */
-
-// Using Function here as scale refers to the d3-scale 3rd party library
-const center = (scale: Function) => {
+ */ // Using Function here as scale refers to the d3-scale 3rd party library
+const center = scale => {
   let offset = scale.bandwidth() / 2;
   if (scale.round()) {
     offset = Math.round(offset);
   }
-  return (d: number) => scale(d) + offset;
+  return d => scale(d) + offset;
 };
 
 // Using any here as x can be any form see utils-test.js
-const identity = (x: any) => x;
-
-const remToPx = (value: string) => {
+const identity = x => x;
+const remToPx = value => {
   let parsed = 0;
-
   if (/rem$/.test(value)) {
     parsed = parseFloat(value.replace(/rem/, '')) * 16;
   }
-
   return parsed;
 };
-
-export { center, identity, remToPx };
+export { center, identity, remToPx };

package/bpk-component-blockquote/index.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkBlockquote from './src/BpkBlockquote';
-import themeAttributes from './src/themeAttributes';
-
+import BpkBlockquote from "./src/BpkBlockquote";
+import themeAttributes from "./src/themeAttributes";
 export default BpkBlockquote;
-export { themeAttributes };
+export { themeAttributes };

package/bpk-component-blockquote/src/BpkBlockquote.js

@@ -17,34 +17,25 @@
  */
 
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkBlockquote.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkBlockquote.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const BpkBlockquote = (props) => {
+const BpkBlockquote = props => {
   const classNames = [getClassName('bpk-blockquote')];
   if (props.extraSpace) {
     classNames.push(getClassName('bpk-blockquote--extra-spacing'));
   }
-
-  return (
-    <blockquote className={classNames.join(' ')}>{props.children}</blockquote>
-  );
+  return /*#__PURE__*/_jsx("blockquote", {
+    className: classNames.join(' '),
+    children: props.children
+  });
 };
-
 BpkBlockquote.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-  extraSpace: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  extraSpace: PropTypes.bool
 };
-
 BpkBlockquote.defaultProps = {
-  extraSpace: false,
+  extraSpace: false
 };
-
-export default BpkBlockquote;
+export default BpkBlockquote;

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

@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export default ['blockquoteBarColor'];
+export default ['blockquoteBarColor'];

package/{bpk-component-graphic-promotion/index.ts → bpk-component-boilerplate/index.d.ts}

@@ -16,11 +16,9 @@
  * limitations under the License.
  */
 
-import BpkGraphicPromo, {
-  type Props as BpkGraphicPromoProps,
-  TEXT_ALIGN,
-} from './src/BpkGraphicPromo';
+import BpkBoilerplate, {
+  type Props as BpkBoilerplateProps,
+} from './src/BpkBoilerplate';
 
-export type { BpkGraphicPromoProps };
-export { TEXT_ALIGN };
-export default BpkGraphicPromo;
+export type { BpkBoilerplateProps };
+export default BpkBoilerplate;

package/{bpk-component-drawer/src/BpkDrawer.module.scss → bpk-component-boilerplate/index.js}

@@ -16,8 +16,5 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index.scss';
-
-.bpk-drawer__container {
-  position: fixed;
-}
+import BpkBoilerplate from "./src/BpkBoilerplate";
+export default BpkBoilerplate;

package/{bpk-component-nudger/src/common-types.ts → bpk-component-boilerplate/src/BpkBoilerplate.d.ts}

@@ -1,7 +1,7 @@
 /*
  * Backpack - Skyscanner's Design System
  *
- * Copyright 2016 Skyscanner Ltd
+ * Copyright 2022 Skyscanner Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-export type CommonProps = {
-  id: string;
-  min: string | number;
-  max: string | number;
-  value: string | number;
-  onChange: (arg0: any) => void | null;
+export type Props = {
   className?: string | null;
-  increaseButtonLabel: string;
-  decreaseButtonLabel: string;
-  buttonType?: string;
+  [rest: string]: any;
 };
+declare const BpkBoilerplate: {
+  ({ className, ...rest }: Props): JSX.Element;
+  defaultProps: {
+    className: null;
+  };
+};
+export default BpkBoilerplate;

package/{bpk-component-aria-live/src/accessibility-test.tsx → bpk-component-boilerplate/src/BpkBoilerplate.js}

@@ -16,15 +16,19 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import BpkAriaLive from './BpkAriaLive';
-
-describe('BpkAriaLive accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(<BpkAriaLive>Backpack</BpkAriaLive>);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkBoilerplate.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkBoilerplate = ({
+  className = null,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-boilerplate', className);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    ...rest,
+    children: "I am an example component."
   });
-});
+};
+export default BpkBoilerplate;

package/{bpk-component-icon/src/withDescription.module.scss → bpk-component-boilerplate/src/BpkBoilerplate.module.css}

@@ -1,22 +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.
- */
-@import '~bpk-mixins/index.scss';
-
-.bpk-icon-description {
-  @include bpk-visually-hidden;
-}
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-boilerplate{display:flex}