@skyscanner/backpack-web 23.1.2 → 23.2.0

package/bpk-component-button/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "BpkButtonSecondaryOnDark", {
     return _BpkButtonSecondaryOnDark.default;
   }
 });
+Object.defineProperty(exports, "BpkButtonV2", {
+  enumerable: true,
+  get: function () {
+    return _BpkButton2.default;
+  }
+});
 Object.defineProperty(exports, "buttonThemeAttributes", {
   enumerable: true,
   get: function () {
@@ -107,6 +113,7 @@ Object.defineProperty(exports, "secondaryThemeAttributes", {
   }
 });
 var _BpkButton = _interopRequireDefault(require("./src/BpkButton"));
+var _BpkButton2 = _interopRequireDefault(require("./src/BpkButtonV2/BpkButton"));
 var _BpkButtonPrimary = _interopRequireDefault(require("./src/BpkButtonPrimary"));
 var _BpkButtonPrimaryOnDark = _interopRequireDefault(require("./src/BpkButtonPrimaryOnDark"));
 var _BpkButtonPrimaryOnLight = _interopRequireDefault(require("./src/BpkButtonPrimaryOnLight"));

package/bpk-component-button/src/BpkButton.d.ts

@@ -0,0 +1,36 @@
+/*
+ * 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" />
+import type { Props } from './common-types';
+
+declare const BpkButtonV2: ({
+  blank,
+  children,
+  className,
+  disabled,
+  href,
+  iconOnly,
+  onClick,
+  rel: propRel,
+  size,
+  submit,
+  type,
+  ...rest
+}: Props) => JSX.Element;
+export default BpkButtonV2;

package/bpk-component-button/src/BpkButton.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-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-background-color, #05203c)}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, #154679)}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, #154679)}.bpk-button:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5);color:#c80456;color:var(--bpk-button-destructive-text-color, #c80456);background-color:#e0e3e5;background-color:var(--bpk-button-destructive-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, #c80456)}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, #fff);background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, #c80456)}.bpk-button--destructive:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, #0062e3)}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, #024daf)}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, #fff);background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, #024daf)}.bpk-button--featured:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--link{border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{border-radius:0;background:none;box-shadow:none;padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3);padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,0.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,0.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255,255,255,0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, #fff)}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,0.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255,255,255,0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, #161616);background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, #fff)}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-hover-background-color, #c2c9cd)}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-primary-on-dark-active-background-color, #c2c9cd)}.bpk-button--primary-on-dark:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, #fff);background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, #05203c)}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, #154679)}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, #fff);background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, #154679)}.bpk-button--primary-on-light:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, #161616);background-color:#e0e3e5;background-color:var(--bpk-button-secondary-background-color, #e0e3e5)}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-hover-background-color, #c2c9cd)}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, #161616);background-color:#c2c9cd;background-color:var(--bpk-button-secondary-active-background-color, #c2c9cd)}.bpk-button--secondary:disabled{background-color:#e0e3e5;color:rgba(0,0,0,0.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, #fff);background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, #243346)}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, #010913)}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, #fff);background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, #010913)}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,0.2)}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}

package/bpk-component-button/src/BpkButtonV2/BpkButton.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bpkReactUtils = require("../../../bpk-react-utils");
+var _commonTypes = require("./common-types");
+var _BpkButtonModule = _interopRequireDefault(require("./BpkButton.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "type", "size", "className", "href", "disabled", "onClick", "submit", "iconOnly", "blank", "rel"];
+/*
+ * 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.
+ */
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+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 getCommonClassName = (0, _bpkReactUtils.cssModules)(_BpkButtonModule.default);
+const BpkButtonV2 = _ref => {
+  let {
+      children,
+      type = _commonTypes.BUTTON_TYPES.primary,
+      size = _commonTypes.SIZE_TYPES.small,
+      className = null,
+      href = null,
+      disabled = false,
+      onClick = () => {},
+      submit = false,
+      iconOnly = false,
+      blank = false,
+      rel: propRel = undefined
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const classNames = getCommonClassName('bpk-button', size === _commonTypes.SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === _commonTypes.SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, className);
+  const target = blank ? '_blank' : '';
+  const rel = blank ? propRel || 'noopener noreferrer' : propRel;
+  if (!disabled && href) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+      href: href,
+      className: classNames,
+      onClick: onClick,
+      target: target,
+      rel: rel
+    }, rest), {}, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", _objectSpread(_objectSpread({
+    type: submit ? 'submit' : 'button',
+    disabled: disabled,
+    className: classNames,
+    onClick: onClick
+  }, rest), {}, {
+    children: children
+  }));
+};
+var _default = BpkButtonV2;
+exports.default = _default;

package/bpk-component-button/src/BpkButtonV2/common-types.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE_TYPES = exports.BUTTON_TYPES = void 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.
+ */
+
+const BUTTON_TYPES = {
+  primary: 'primary',
+  primaryOnDark: 'primary-on-dark',
+  primaryOnLight: 'primary-on-light',
+  secondary: 'secondary',
+  secondaryOnDark: 'secondary-on-dark',
+  destructive: 'destructive',
+  featured: 'featured',
+  link: 'link',
+  linkOnDark: 'link-on-dark'
+};
+exports.BUTTON_TYPES = BUTTON_TYPES;
+const SIZE_TYPES = {
+  small: 'small',
+  large: 'large'
+};
+exports.SIZE_TYPES = SIZE_TYPES;

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

@@ -0,0 +1,51 @@
+/*
+ * 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 type { ReactNode, SyntheticEvent } from 'react';
+
+export declare const BUTTON_TYPES: {
+  readonly primary: 'primary';
+  readonly primaryOnDark: 'primary-on-dark';
+  readonly primaryOnLight: 'primary-on-light';
+  readonly secondary: 'secondary';
+  readonly secondaryOnDark: 'secondary-on-dark';
+  readonly destructive: 'destructive';
+  readonly featured: 'featured';
+  readonly link: 'link';
+  readonly linkOnDark: 'link-on-dark';
+};
+export declare const SIZE_TYPES: {
+  readonly small: 'small';
+  readonly large: 'large';
+};
+export type ButtonType = typeof BUTTON_TYPES[keyof typeof BUTTON_TYPES];
+export type SizeType = typeof SIZE_TYPES[keyof typeof SIZE_TYPES];
+export type Props = {
+  children: string | ReactNode;
+  type?: ButtonType;
+  size?: SizeType;
+  className?: string | null;
+  disabled?: boolean;
+  iconOnly?: boolean;
+  onClick?: (event: SyntheticEvent) => void;
+  rel?: string | undefined;
+  submit?: boolean;
+  href?: string | null;
+  blank?: boolean;
+  [rest: string]: any;
+};

package/bpk-component-map/src/BpkMap.js

@@ -36,6 +36,7 @@ const BpkMap = props => {
     children,
     className,
     greedyGestureHandling,
+    mapId,
     mapOptionStyles,
     mapRef,
     onRegionChange,
@@ -80,6 +81,8 @@ const BpkMap = props => {
     } : undefined,
     zoom: zoom,
     options: {
+      // If you want to set style by mapId, you should remove the styles property: https://developers.google.com/maps/documentation/get-map-id#javascript
+      mapId,
       gestureHandling,
       disableDefaultUI: !showControls,
       mapTypeControl: false,
@@ -132,7 +135,8 @@ BpkMap.propTypes = {
     elementType: _propTypes.default.string,
     // eslint-disable-next-line react/forbid-prop-types
     stylers: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
-  }))
+  })),
+  mapId: _propTypes.default.string
 };
 BpkMap.defaultProps = {
   bounds: null,
@@ -147,7 +151,8 @@ BpkMap.defaultProps = {
   showControls: true,
   zoom: 15,
   className: null,
-  mapOptionStyles: null
+  mapOptionStyles: null,
+  mapId: null
 };
 var _default = BpkMap;
 exports.default = _default;

package/package.json

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