@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0

package/bpk-component-banner-alert/src/BpkBannerAlertExpandable.js

@@ -1,62 +1,63 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _commonTypes = require("./common-types");
-
-var _BpkBannerAlertInner = _interopRequireWildcard(require("./BpkBannerAlertInner"));
-
-const _excluded = ["children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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 BpkBannerAlertExpandable = props => {
-  const {
-    children
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+/*
+ * 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 PropTypes from 'prop-types';
+import React, { type Node } from 'react';
+
+import {
+  type CommonProps,
+  type OnExpandToggleHandler,
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+} from './common-types';
+import BpkBannerAlertInner, { CONFIGURATION } from './BpkBannerAlertInner';
+
+type Props = {
+  ...$Exact<CommonProps>,
+  children: Node,
+  expanded: boolean,
+  toggleButtonLabel: string,
+  onExpandToggle: OnExpandToggleHandler,
+};
 
+const BpkBannerAlertExpandable = (props: Props) => {
+  const { children, ...rest } = props;
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_BpkBannerAlertInner.default, _extends({
-      configuration: _BpkBannerAlertInner.CONFIGURATION.EXPANDABLE
-    }, rest), children)
+    <BpkBannerAlertInner configuration={CONFIGURATION.EXPANDABLE} {...rest}>
+      {children}
+    </BpkBannerAlertInner>
   );
 };
 
-BpkBannerAlertExpandable.propTypes = _objectSpread(_objectSpread({}, _commonTypes.COMMON_PROP_TYPES), {}, {
-  children: _propTypes.default.node.isRequired,
-  toggleButtonLabel: _propTypes.default.string.isRequired,
-  expanded: _propTypes.default.bool,
-  onExpandToggle: _propTypes.default.func
-});
-BpkBannerAlertExpandable.defaultProps = _objectSpread(_objectSpread({}, _commonTypes.COMMON_DEFAULT_PROPS), {}, {
+BpkBannerAlertExpandable.propTypes = {
+  ...COMMON_PROP_TYPES,
+  children: PropTypes.node.isRequired,
+  toggleButtonLabel: PropTypes.string.isRequired,
+  expanded: PropTypes.bool,
+  onExpandToggle: PropTypes.func,
+};
+
+BpkBannerAlertExpandable.defaultProps = {
+  ...COMMON_DEFAULT_PROPS,
   expanded: false,
-  onExpandToggle: null
-});
-var _default = BpkBannerAlertExpandable;
-exports.default = _default;
+  onExpandToggle: null,
+};
+
+export default BpkBannerAlertExpandable;

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -1,105 +1,127 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CONFIGURATION = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkComponentIcon = require("../../bpk-component-icon");
-
-var _bpkAnimateHeight = _interopRequireDefault(require("../../bpk-animate-height"));
-
-var _bpkComponentCloseButton = _interopRequireDefault(require("../../bpk-component-close-button"));
-
-var _tickCircle = _interopRequireDefault(require("../../bpk-component-icon/sm/tick-circle"));
-
-var _chevronDown = _interopRequireDefault(require("../../bpk-component-icon/lg/chevron-down"));
-
-var _informationCircle = _interopRequireDefault(require("../../bpk-component-icon/sm/information-circle"));
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _AnimateAndFade = _interopRequireDefault(require("./AnimateAndFade"));
-
-var _commonTypes = require("./common-types");
-
-var _BpkBannerAlertModule = _interopRequireDefault(require("./BpkBannerAlert.css"));
-
-const _excluded = ["animateOnEnter", "animateOnLeave", "bannerClassName", "children", "configuration", "dismissButtonLabel", "expanded", "icon", "message", "onDismiss", "onExpandToggle", "show", "toggleButtonLabel", "type"];
-
-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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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)(_BpkBannerAlertModule.default);
-const ExpandIcon = (0, _bpkComponentIcon.withButtonAlignment)(_chevronDown.default);
-const CONFIGURATION = {
+/*
+ * 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 */
+
+/* This is an internal component to Backpack that powers `BpkBannerAlert`,
+ * `BpkBannerAlertDismissable` and `BpkBannerAlertExpandable`.
+ */
+
+import PropTypes from 'prop-types';
+import React, { type Node, type StatelessFunctionalComponent } from 'react';
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import { withButtonAlignment } from '../../bpk-component-icon';
+import BpkAnimateHeight from '../../bpk-animate-height';
+import BpkCloseButton from '../../bpk-component-close-button';
+import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle';
+import ChevronDownIcon from '../../bpk-component-icon/lg/chevron-down';
+import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle';
+import { cssModules } from '../../bpk-react-utils';
+
+import AnimateAndFade from './AnimateAndFade';
+import {
+  type AlertTypeValue,
+  type CommonProps,
+  type OnDismissHandler,
+  type OnExpandToggleHandler,
+  ALERT_TYPES,
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+} from './common-types';
+import STYLES from './BpkBannerAlert.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const ExpandIcon = withButtonAlignment(ChevronDownIcon);
+
+export const CONFIGURATION = {
   NONE: 'none',
   DISMISSABLE: 'dismissable',
-  EXPANDABLE: 'expandable'
+  EXPANDABLE: 'expandable',
 };
-exports.CONFIGURATION = CONFIGURATION;
-
-const getIconForType = (type, CustomIcon) => {
-  const classMap = {
-    [_commonTypes.ALERT_TYPES.PRIMARY]: getClassName('bpk-banner-alert__primary-icon'),
-    [_commonTypes.ALERT_TYPES.SUCCESS]: getClassName('bpk-banner-alert__success-icon'),
-    [_commonTypes.ALERT_TYPES.WARN]: getClassName('bpk-banner-alert__warn-icon'),
-    [_commonTypes.ALERT_TYPES.ERROR]: getClassName('bpk-banner-alert__error-icon'),
-    [_commonTypes.ALERT_TYPES.NEUTRAL]: getClassName('bpk-banner-alert__neutral-icon'),
-    [_commonTypes.ALERT_TYPES.EVENT]: getClassName('bpk-banner-alert__event-icon')
+
+const getIconForType = (
+  type: AlertTypeValue,
+  CustomIcon: ?StatelessFunctionalComponent<any>,
+) => {
+  const classMap: { [AlertTypeValue]: string } = {
+    [ALERT_TYPES.PRIMARY]: getClassName('bpk-banner-alert__primary-icon'),
+    [ALERT_TYPES.SUCCESS]: getClassName('bpk-banner-alert__success-icon'),
+    [ALERT_TYPES.WARN]: getClassName('bpk-banner-alert__warn-icon'),
+    [ALERT_TYPES.ERROR]: getClassName('bpk-banner-alert__error-icon'),
+    [ALERT_TYPES.NEUTRAL]: getClassName('bpk-banner-alert__neutral-icon'),
+    [ALERT_TYPES.EVENT]: getClassName('bpk-banner-alert__event-icon'),
   };
   const className = classMap[type];
-  const componentMap = {
-    [_commonTypes.ALERT_TYPES.PRIMARY]: _informationCircle.default,
-    [_commonTypes.ALERT_TYPES.SUCCESS]: _tickCircle.default,
-    [_commonTypes.ALERT_TYPES.WARN]: _informationCircle.default,
-    [_commonTypes.ALERT_TYPES.ERROR]: _informationCircle.default,
-    [_commonTypes.ALERT_TYPES.NEUTRAL]: _informationCircle.default,
-    [_commonTypes.ALERT_TYPES.EVENT]: _informationCircle.default
+  const componentMap: { [AlertTypeValue]: Node } = {
+    [ALERT_TYPES.PRIMARY]: InfoCircleIcon,
+    [ALERT_TYPES.SUCCESS]: TickCircleIcon,
+    [ALERT_TYPES.WARN]: InfoCircleIcon,
+    [ALERT_TYPES.ERROR]: InfoCircleIcon,
+    [ALERT_TYPES.NEUTRAL]: InfoCircleIcon,
+    [ALERT_TYPES.EVENT]: InfoCircleIcon,
   };
   const Icon = CustomIcon || componentMap[type];
-  const AlignedIcon = (0, _bpkComponentIcon.withButtonAlignment)(Icon);
-  return /*#__PURE__*/_react.default.createElement(AlignedIcon, {
-    className: className
-  });
+  const AlignedIcon = withButtonAlignment(Icon);
+
+  return <AlignedIcon className={className} />;
 };
 
-const ToggleButton = props => {
-  const classNames = [getClassName('bpk-banner-alert__expand-icon')];
+type ToggleButtonProps = {
+  label: ?string,
+  expanded: boolean,
+};
 
+const ToggleButton = (props: ToggleButtonProps) => {
+  const classNames = [getClassName('bpk-banner-alert__expand-icon')];
   if (props.expanded) {
     classNames.push(getClassName('bpk-banner-alert__expand-icon--flipped'));
   }
 
-  return /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: getClassName('bpk-banner-alert__toggle-button'),
-    "aria-label": props.label,
-    "aria-expanded": props.expanded,
-    title: props.label
-  }, /*#__PURE__*/_react.default.createElement(ExpandIcon, {
-    className: classNames.join(' ')
-  }));
+  return (
+    <button
+      type="button"
+      className={getClassName('bpk-banner-alert__toggle-button')}
+      aria-label={props.label}
+      aria-expanded={props.expanded}
+      title={props.label}
+    >
+      <ExpandIcon className={classNames.join(' ')} />
+    </button>
+  );
+};
+
+type Props = {
+  ...$Exact<CommonProps>,
+  configuration: $Values<typeof CONFIGURATION>,
+
+  // Only relevant when configuration == CONFIGURATION.EXPANDABLE
+  children: Node,
+  expanded: boolean,
+  toggleButtonLabel: ?string,
+  onExpandToggle: OnExpandToggleHandler,
+
+  // Only relevant when configuration == CONFIGURATION.DISMISSABLE
+  dismissButtonLabel: string,
+  onDismiss: OnDismissHandler,
 };
 
-const BpkBannerAlertInner = props => {
+const BpkBannerAlertInner = (props: Props) => {
   const {
     animateOnEnter,
     animateOnLeave,
@@ -114,10 +136,9 @@ const BpkBannerAlertInner = props => {
     onExpandToggle,
     show,
     toggleButtonLabel,
-    type
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
-
+    type,
+    ...rest
+  } = props;
   const onBannerExpandToggle = () => {
     if (props.onExpandToggle) {
       props.onExpandToggle(!expanded);
@@ -133,8 +154,12 @@ const BpkBannerAlertInner = props => {
   const isExpandable = configuration === CONFIGURATION.EXPANDABLE;
   const dismissable = configuration === CONFIGURATION.DISMISSABLE;
   const showChildren = isExpandable && expanded;
+
   const headerClassNames = [getClassName('bpk-banner-alert__header')];
-  const sectionClassNames = ['bpk-banner-alert', `bpk-banner-alert--${type}`].map(sectionClassName => getClassName(sectionClassName));
+  const sectionClassNames = [
+    'bpk-banner-alert',
+    `bpk-banner-alert--${type}`,
+  ].map((sectionClassName) => getClassName(sectionClassName));
 
   if (bannerClassName) {
     sectionClassNames.push(bannerClassName);
@@ -143,75 +168,95 @@ const BpkBannerAlertInner = props => {
   if (isExpandable) {
     headerClassNames.push(getClassName('bpk-banner-alert__header--expandable'));
   }
+
   /* eslint-disable
     jsx-a11y/no-static-element-interactions,
     jsx-a11y/click-events-have-key-events,
     */
   // Disabling 'click-events-have-key-events and interactive-supports-focus' because header element is not focusable.
   // ToggleButton is focusable and works for this.
-
-
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_AnimateAndFade.default, _extends({
-      animateOnEnter: animateOnEnter,
-      animateOnLeave: dismissable || animateOnLeave,
-      show: show
-    }, rest), /*#__PURE__*/_react.default.createElement("section", {
-      className: sectionClassNames.join(' '),
-      role: "alert"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      role: isExpandable ? 'button' : undefined,
-      className: headerClassNames.join(' '),
-      onClick: onBannerExpandToggle
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: getClassName('bpk-banner-alert__icon')
-    }, getIconForType(type, icon)), /*#__PURE__*/_react.default.createElement("span", {
-      className: getClassName('bpk-banner-alert__message')
-    }, message), isExpandable && /*#__PURE__*/_react.default.createElement("span", {
-      className: getClassName('bpk-banner-alert__toggle')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, {
-      expanded: expanded,
-      label: toggleButtonLabel
-    })), dismissable && /*#__PURE__*/_react.default.createElement("span", {
-      className: getClassName('bpk-banner-alert__toggle')
-    }, /*#__PURE__*/_react.default.createElement(_bpkComponentCloseButton.default, {
-      className: getClassName('bpk-banner-alert__toggle-button'),
-      onClick: onBannerDismiss,
-      "aria-label": dismissButtonLabel,
-      label: dismissButtonLabel
-    }))), /*#__PURE__*/_react.default.createElement(_bpkAnimateHeight.default, {
-      duration: parseInt(_base.durationSm, 10),
-      height: showChildren ? 'auto' : 0
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: getClassName('bpk-banner-alert__children-container')
-    }, children))))
+    <AnimateAndFade
+      animateOnEnter={animateOnEnter}
+      animateOnLeave={dismissable || animateOnLeave}
+      show={show}
+      {...rest}
+    >
+      <section className={sectionClassNames.join(' ')} role="alert">
+        <div
+          role={isExpandable ? 'button' : undefined}
+          className={headerClassNames.join(' ')}
+          onClick={onBannerExpandToggle}
+        >
+          <span className={getClassName('bpk-banner-alert__icon')}>
+            {getIconForType(type, icon)}
+          </span>
+          <span className={getClassName('bpk-banner-alert__message')}>
+            {message}
+          </span>
+          {isExpandable && (
+            <span className={getClassName('bpk-banner-alert__toggle')}>
+              <ToggleButton expanded={expanded} label={toggleButtonLabel} />
+            </span>
+          )}
+          {dismissable && (
+            <span className={getClassName('bpk-banner-alert__toggle')}>
+              <BpkCloseButton
+                className={getClassName('bpk-banner-alert__toggle-button')}
+                onClick={onBannerDismiss}
+                aria-label={dismissButtonLabel}
+                label={dismissButtonLabel}
+              />
+            </span>
+          )}
+        </div>
+        <BpkAnimateHeight
+          duration={parseInt(durationSm, 10)}
+          height={showChildren ? 'auto' : 0}
+        >
+          <div className={getClassName('bpk-banner-alert__children-container')}>
+            {children}
+          </div>
+        </BpkAnimateHeight>
+      </section>
+    </AnimateAndFade>
   );
   /* eslint-enable */
 };
 
-BpkBannerAlertInner.propTypes = _objectSpread(_objectSpread({}, _commonTypes.COMMON_PROP_TYPES), {}, {
-  configuration: _propTypes.default.oneOf([CONFIGURATION.NONE, CONFIGURATION.DISMISSABLE, CONFIGURATION.EXPANDABLE]).isRequired,
+BpkBannerAlertInner.propTypes = {
+  ...COMMON_PROP_TYPES,
+  configuration: PropTypes.oneOf([
+    CONFIGURATION.NONE,
+    CONFIGURATION.DISMISSABLE,
+    CONFIGURATION.EXPANDABLE,
+  ]).isRequired,
+
   // Only relevant when configuration == CONFIGURATION.EXPANDABLE
-  children: _propTypes.default.node,
-  expanded: _propTypes.default.bool,
-  toggleButtonLabel: _propTypes.default.string,
-  onExpandToggle: _propTypes.default.func,
+  children: PropTypes.node,
+  expanded: PropTypes.bool,
+  toggleButtonLabel: PropTypes.string,
+  onExpandToggle: PropTypes.func,
+
   // Only relevant when configuration == CONFIGURATION.DISMISSABLE
-  dismissButtonLabel: _propTypes.default.string,
-  onDismiss: _propTypes.default.func
-});
-BpkBannerAlertInner.defaultProps = _objectSpread(_objectSpread({}, _commonTypes.COMMON_DEFAULT_PROPS), {}, {
+  dismissButtonLabel: PropTypes.string,
+  onDismiss: PropTypes.func,
+};
+
+BpkBannerAlertInner.defaultProps = {
+  ...COMMON_DEFAULT_PROPS,
   configuration: CONFIGURATION.NONE,
+
   // Only relevant when configuration == CONFIGURATION.EXPANDABLE
   children: null,
   expanded: false,
   toggleButtonLabel: null,
   onExpandToggle: null,
+
   // Only relevant when configuration == CONFIGURATION.DISMISSABLE
   dismissButtonLabel: '',
-  onDismiss: null
-});
-var _default = BpkBannerAlertInner;
-exports.default = _default;
+  onDismiss: null,
+};
+
+export default BpkBannerAlertInner;

package/bpk-component-banner-alert/src/common-types.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COMMON_PROP_TYPES = exports.COMMON_DEFAULT_PROPS = exports.ALERT_TYPES = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,30 +15,56 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const ALERT_TYPES = {
+/* @flow strict */
+import PropTypes from 'prop-types';
+import { type Node, type StatelessFunctionalComponent } from 'react';
+
+export const ALERT_TYPES = {
   PRIMARY: 'primary',
   SUCCESS: 'success',
   WARN: 'warn',
   ERROR: 'error',
   NEUTRAL: 'neutral',
-  EVENT: 'event'
+  EVENT: 'event',
 };
-exports.ALERT_TYPES = ALERT_TYPES;
-const COMMON_PROP_TYPES = {
-  type: _propTypes.default.oneOf([ALERT_TYPES.PRIMARY, ALERT_TYPES.SUCCESS, ALERT_TYPES.WARN, ALERT_TYPES.ERROR, ALERT_TYPES.NEUTRAL, ALERT_TYPES.EVENT]).isRequired,
-  message: _propTypes.default.node.isRequired,
-  animateOnEnter: _propTypes.default.bool,
-  animateOnLeave: _propTypes.default.bool,
-  show: _propTypes.default.bool,
-  bannerClassName: _propTypes.default.string,
-  icon: _propTypes.default.func
+
+export type AlertTypeValue = $Values<typeof ALERT_TYPES>;
+
+export type CommonProps = {
+  type: AlertTypeValue,
+  message: Node,
+  animateOnEnter: boolean,
+  animateOnLeave: boolean,
+  show: boolean,
+  bannerClassName: ?string,
+  icon: ?StatelessFunctionalComponent<any>,
 };
-exports.COMMON_PROP_TYPES = COMMON_PROP_TYPES;
-const COMMON_DEFAULT_PROPS = {
+
+export type OnExpandToggleHandler = ?(boolean) => void;
+export type OnDismissHandler = ?() => void;
+export type OnHideHandler = ?() => void;
+
+export const COMMON_PROP_TYPES = {
+  type: PropTypes.oneOf([
+    ALERT_TYPES.PRIMARY,
+    ALERT_TYPES.SUCCESS,
+    ALERT_TYPES.WARN,
+    ALERT_TYPES.ERROR,
+    ALERT_TYPES.NEUTRAL,
+    ALERT_TYPES.EVENT,
+  ]).isRequired,
+  message: PropTypes.node.isRequired,
+  animateOnEnter: PropTypes.bool,
+  animateOnLeave: PropTypes.bool,
+  show: PropTypes.bool,
+  bannerClassName: PropTypes.string,
+  icon: PropTypes.func,
+};
+
+export const COMMON_DEFAULT_PROPS = {
   animateOnEnter: false,
   animateOnLeave: false,
   show: true,
   bannerClassName: null,
-  icon: null
+  icon: null,
 };
-exports.COMMON_DEFAULT_PROPS = COMMON_DEFAULT_PROPS;

package/bpk-component-banner-alert/src/themeAttributes.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,5 +15,10 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['bannerAlertPrimaryColor', 'bannerAlertSuccessColor', 'bannerAlertWarnColor', 'bannerAlertErrorColor'];
-exports.default = _default;
+
+export default [
+  'bannerAlertPrimaryColor',
+  'bannerAlertSuccessColor',
+  'bannerAlertWarnColor',
+  'bannerAlertErrorColor',
+];