@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

package/bpk-component-code/src/BpkCodeBlock.js

@@ -1,63 +1,53 @@
-/*
- * 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.
- */
-/* @flow strict */
-
-import type { Node } from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkCodeBlock.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-  alternate: boolean,
-  className: ?string,
-};
-const BpkCodeBlock = (props: Props) => {
-  const { alternate, children, className, ...rest } = props;
-  const preClassNames = getClassName(
-    'bpk-code__pre',
-    alternate && 'bpk-code__pre--alternate',
-    className,
-  );
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkCodeBlockModule = _interopRequireDefault(require("./BpkCodeBlock.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["alternate", "children", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkCodeBlockModule.default);
+const BpkCodeBlock = props => {
+  const {
+      alternate,
+      children,
+      className
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const preClassNames = getClassName('bpk-code__pre', alternate && 'bpk-code__pre--alternate', className);
   const codeClassNames = getClassName('bpk-code', 'bpk-code--block');
-
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <pre className={preClassNames} {...rest}>
-      <code className={codeClassNames}>{children}</code>
-    </pre>
+    (0, _jsxRuntime.jsx)("pre", _objectSpread(_objectSpread({
+      className: preClassNames
+    }, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: codeClassNames,
+        children: children
+      })
+    }))
   );
 };
-
 BpkCodeBlock.propTypes = {
-  children: PropTypes.node.isRequired,
-  alternate: PropTypes.bool,
-  className: PropTypes.string,
+  children: _propTypes.default.node.isRequired,
+  alternate: _propTypes.default.bool,
+  className: _propTypes.default.string
 };
-
 BpkCodeBlock.defaultProps = {
   alternate: false,
-  className: null,
+  className: null
 };
-
-export default BpkCodeBlock;
+var _default = BpkCodeBlock;
+exports.default = _default;

package/bpk-component-code/src/BpkCodeBlock.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-code--block{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-code--block::-webkit-scrollbar{display:none}.bpk-code__pre{margin:0 0 .75rem;padding:1.5rem;background-color:#f1f2f8;border-radius:.25rem}.bpk-code__pre--alternate{background-color:transparent;box-shadow:0 0 0 1px #b2b2bf inset}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-code--block{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-code--block::-webkit-scrollbar{display:none}.bpk-code__pre{margin:0 0 .75rem;padding:1.5rem;background-color:#e0e3e5;border-radius:.25rem}.bpk-code__pre--alternate{background-color:transparent;box-shadow:0 0 0 1px #c2c9cd inset}

package/bpk-component-content-cards/index.js

@@ -1,3 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _BpkContentCards = _interopRequireDefault(require("./src/BpkContentCards"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,7 +23,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import BpkContentCards from './src/BpkContentCards';
-
-export default BpkContentCards;
+var _default = _BpkContentCards.default;
+exports.default = _default;

package/bpk-component-content-cards/src/BpkContentCard.js

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bpkComponentText = _interopRequireDefault(require("../../bpk-component-text"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkContentCardModule = _interopRequireDefault(require("./BpkContentCard.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -17,65 +28,37 @@
  */
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from '../../bpk-component-text';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkContentCard.module.scss';
-
-const getClassName = cssModules(STYLES);
 
-type CardLayout = 'HORIZONTAL' | 'VERTICAL';
-
-type Props = {
-  card: {
-    image: {
-      url: string,
-      alt?: string,
-    },
-    headline: string,
-    description: string,
-    href: string,
-  },
-  layout: CardLayout,
-};
-
-const BpkContentCard = ({ card, layout }: Props) => (
-  <a
-    className={getClassName(
-      'bpk-content-card--link',
-      layout === 'HORIZONTAL'
-        ? 'bpk-content-card--horizontal'
-        : 'bpk-content-card--vertical',
-    )}
-    href={card.href}
-    target="_blank"
-    rel="noreferrer"
-  >
-    <div className={getClassName('bpk-content-card--image-container')}>
-      <img
-        className={getClassName('bpk-content-card--image')}
-        alt={card.image.alt || ''}
-        src={card.image.url}
-        loading="lazy"
-      />
-    </div>
-
-    <div>
-      <BpkText
-        className={getClassName('bpk-content-card--headline')}
-        tagName="h3"
-      >
-        {card.headline}
-      </BpkText>
-      <BpkText
-        className={getClassName('bpk-content-card--description')}
-        tagName="p"
-      >
-        {card.description}
-      </BpkText>
-    </div>
-  </a>
-);
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 
-export default BpkContentCard;
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkContentCardModule.default);
+const BpkContentCard = ({
+  card,
+  layout
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+  className: getClassName('bpk-content-card--link', layout === 'HORIZONTAL' ? 'bpk-content-card--horizontal' : 'bpk-content-card--vertical'),
+  href: card.href,
+  target: "_blank",
+  rel: "noreferrer",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: getClassName('bpk-content-card--image-container'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: getClassName('bpk-content-card--image'),
+      alt: card.image.alt || '',
+      src: card.image.url,
+      loading: "lazy"
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+      className: getClassName('bpk-content-card--headline'),
+      tagName: "h3",
+      children: card.headline
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+      className: getClassName('bpk-content-card--description'),
+      tagName: "p",
+      children: card.description
+    })]
+  })]
+});
+var _default = BpkContentCard;
+exports.default = _default;

package/bpk-component-content-cards/src/BpkContentCard.module.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-card--link{color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media (max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media (max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media (max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media (max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media (max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:0.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#545860;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}

package/bpk-component-content-cards/src/BpkContentCards.js

@@ -1,3 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bpkComponentText = _interopRequireDefault(require("../../bpk-component-text"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkContentCard = _interopRequireDefault(require("./BpkContentCard"));
+var _BpkContentCardsModule = _interopRequireDefault(require("./BpkContentCards.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -18,53 +30,34 @@
 /* eslint react/no-array-index-key: 0 */
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from '../../bpk-component-text';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkContentCard from './BpkContentCard';
-import STYLES from './BpkContentCards.module.scss';
-
-const getClassName = cssModules(STYLES);
 
-type Props = {
-  heading: string,
-  cards: Array<{
-    image: {
-      url: string,
-      alt?: string,
-    },
-    headline: string,
-    description: string,
-    href: string,
-  }>,
-};
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 
-const BpkContentCards = ({ cards, heading }: Props) => {
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkContentCardsModule.default);
+const BpkContentCards = ({
+  cards,
+  heading
+}) => {
   if (cards.length === 0) {
     return null;
   }
-
-  return (
-    <div>
-      <BpkText
-        tagName="h2"
-        className={getClassName('bpk-content-cards--header-text')}
-      >
-        {heading}
-      </BpkText>
-      <div role="list" className={getClassName('bpk-content-cards--layout')}>
-        {cards.map((card, index) => (
-          <div role="listitem" key={index}>
-            <BpkContentCard
-              card={card}
-              layout={cards.length === 1 ? 'HORIZONTAL' : 'VERTICAL'}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+      tagName: "h2",
+      className: getClassName('bpk-content-cards--header-text'),
+      children: heading
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "list",
+      className: getClassName('bpk-content-cards--layout'),
+      children: cards.map((card, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "listitem",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BpkContentCard.default, {
+          card: card,
+          layout: cards.length === 1 ? 'HORIZONTAL' : 'VERTICAL'
+        })
+      }, index))
+    })]
+  });
 };
-
-export default BpkContentCards;
+var _default = BpkContentCards;
+exports.default = _default;

package/bpk-component-content-cards/src/BpkContentCards.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-content-cards{display:flex}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-cards--header-text{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media (max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}

package/bpk-component-datatable/index.js

@@ -1,21 +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.
- */
-import BpkDataTable from './src/BpkDataTable';
-import BpkDataTableColumn from './src/BpkDataTableColumn';
+"use strict";
 
-export { BpkDataTable, BpkDataTableColumn };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BpkDataTable", {
+  enumerable: true,
+  get: function () {
+    return _BpkDataTable.default;
+  }
+});
+Object.defineProperty(exports, "BpkDataTableColumn", {
+  enumerable: true,
+  get: function () {
+    return _BpkDataTableColumn.default;
+  }
+});
+var _BpkDataTable = _interopRequireDefault(require("./src/BpkDataTable"));
+var _BpkDataTableColumn = _interopRequireDefault(require("./src/BpkDataTableColumn"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }