@skyscanner/backpack-web 17.1.0-beta.1 → 17.2.0

package/bpk-component-flare/src/BpkFlareBar.js

@@ -1,59 +1,77 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkFlareBarModule = _interopRequireDefault(require("./bpk-flare-bar.module.css"));
-var _pointer = _interopRequireDefault(require("./__generated__/js/pointer"));
-var _cornerRadius = _interopRequireDefault(require("./__generated__/js/corner-radius"));
-const _excluded = ["className", "rounded", "svgClassName"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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)(_bpkFlareBarModule.default);
-const BpkFlareBar = props => {
-  const {
-      className,
-      rounded,
-      svgClassName
-    } = 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.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './bpk-flare-bar.module.scss';
+import Pointer from './__generated__/js/pointer';
+import CornerRadius from './__generated__/js/corner-radius';
+
+const getClassName = cssModules(STYLES);
+
+const BpkFlareBar = (props) => {
+  const { className, rounded, svgClassName, ...rest } = props;
+
   const classNames = [getClassName('bpk-flare-bar__container')];
   if (className) {
     classNames.push(className);
   }
+
   const curveClassNames = [getClassName('bpk-flare-bar__curve')];
-  const leftCornerRadiusClassNames = [getClassName('bpk-flare-bar__rounded-corner')];
-  const rightCornerRadiusClassNames = [getClassName('bpk-flare-bar__rounded-corner'), getClassName('bpk-flare-bar__rounded-corner--trailing')];
+  const leftCornerRadiusClassNames = [
+    getClassName('bpk-flare-bar__rounded-corner'),
+  ];
+  const rightCornerRadiusClassNames = [
+    getClassName('bpk-flare-bar__rounded-corner'),
+    getClassName('bpk-flare-bar__rounded-corner--trailing'),
+  ];
   if (svgClassName) {
     curveClassNames.push(svgClassName);
     leftCornerRadiusClassNames.push(svgClassName);
     rightCornerRadiusClassNames.push(svgClassName);
   }
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: classNames.join(' ')
-  }, rest), /*#__PURE__*/_react.default.createElement(_pointer.default, {
-    className: curveClassNames.join(' ')
-  }), rounded && /*#__PURE__*/_react.default.createElement(_cornerRadius.default, {
-    className: leftCornerRadiusClassNames.join(' ')
-  }), rounded && /*#__PURE__*/_react.default.createElement(_cornerRadius.default, {
-    className: rightCornerRadiusClassNames.join(' ')
-  }));
+
+  return (
+    <div className={classNames.join(' ')} {...rest}>
+      <Pointer className={curveClassNames.join(' ')} />
+      {rounded && (
+        <CornerRadius className={leftCornerRadiusClassNames.join(' ')} />
+      )}
+      {rounded && (
+        <CornerRadius className={rightCornerRadiusClassNames.join(' ')} />
+      )}
+    </div>
+  );
 };
+
 BpkFlareBar.propTypes = {
-  className: _propTypes.default.string,
-  svgClassName: _propTypes.default.string,
-  rounded: _propTypes.default.bool
+  className: PropTypes.string,
+  svgClassName: PropTypes.string,
+  rounded: PropTypes.bool,
 };
+
 BpkFlareBar.defaultProps = {
   className: null,
   svgClassName: null,
-  rounded: false
+  rounded: false,
 };
-var _default = BpkFlareBar;
-exports.default = _default;
+
+export default BpkFlareBar;

package/bpk-component-flare/src/__generated__/js/corner-radius.js

@@ -1,24 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-const _excluded = ["styles"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
-var _default = _ref => {
-  let {
-      styles = {}
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("svg", _extends({
-    viewBox: "0 0 75 75"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M0 0v75h75C37.5 75 0 37.5 0 0z"
-  }));
-};
-exports.default = _default;
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg viewBox="0 0 75 75" {...props}><path d="M0 0v75h75C37.5 75 0 37.5 0 0z" /></svg>);

package/bpk-component-flare/src/__generated__/js/pointer.js

@@ -1,24 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-const _excluded = ["styles"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
-var _default = _ref => {
-  let {
-      styles = {}
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("svg", _extends({
-    viewBox: "0 0 14832 55"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"
-  }));
-};
-exports.default = _default;
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg viewBox="0 0 14832 55" {...props}><path d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z" /></svg>);

package/bpk-component-flare/src/bpk-content-bubble.module.scss

@@ -0,0 +1,61 @@
+/*
+ * 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-content-bubble {
+  &__pointer {
+    width: 100%;
+    align-items: flex-end;
+    align-self: flex-end;
+  }
+
+  &__wrapper {
+    width: 100%;
+    height: auto;
+    margin: 0 auto;
+    background-repeat: no-repeat;
+    background-position: 50% 60%;
+    background-size: cover;
+
+    &--rounded {
+      border-radius: $bpk-flare-corner-radius;
+
+      &--with-pointer {
+        border-radius: $bpk-flare-corner-radius $bpk-flare-corner-radius 0 0;
+      }
+    }
+  }
+
+  &__container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  &__content-wrapper {
+    display: flex;
+
+    // flex-direction is required because IE doesn't cope well with
+    // flex-row when the parent is flex-col
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1 1 auto;
+  }
+}

package/bpk-component-flare/src/bpk-flare-bar.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-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width: 32rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir='rtl'] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media (max-width: 32rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width: 32.25rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir='rtl'] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media (max-width: 32.25rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)}

package/bpk-component-flare/src/bpk-flare-bar.module.scss

@@ -0,0 +1,75 @@
+/*
+ * 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-spacing-v2: true;
+
+.bpk-flare-bar {
+  &__container {
+    position: relative;
+
+    // when we use `margin: X%`, the percentage is proportional to the size of the nearest block container's width
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/margin
+    // By using `display: flex` we ensure that this container is the nearest block container
+    display: flex;
+    min-width: 10rem;
+    height: $bpk-flare-height-desktop;
+    overflow: hidden;
+
+    @include bpk-breakpoint-mobile {
+      height: $bpk-flare-height-mobile;
+    }
+  }
+
+  &__curve {
+    position: absolute;
+    // stylelint-disable-next-line unit-disallowed-list
+    bottom: -1px;
+    width: 700rem; // required for correct behaviour in IE
+    height: $bpk-flare-height-desktop;
+    margin-left: 50%;
+    transform: translateX(-50%);
+    fill: $bpk-surface-default-day;
+
+    @include bpk-rtl {
+      margin-right: 50%;
+      transform: translateX(50%);
+    }
+
+    @include bpk-breakpoint-mobile {
+      height: $bpk-flare-height-mobile;
+    }
+  }
+
+  &__rounded-corner {
+    position: absolute;
+    // stylelint-disable-next-line unit-disallowed-list
+    bottom: calc(#{bpk-spacing-lg()} - 1px);
+    left: 0;
+    width: $bpk-flare-corner-radius;
+    height: $bpk-flare-corner-radius;
+    fill: $bpk-surface-default-day;
+
+    &--trailing {
+      right: 0;
+      left: auto;
+      transform: rotate(-90deg);
+    }
+  }
+}

package/bpk-component-flare/src/svgs/corner-radius.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 75 75"><path d="M0 0v75h75C37.5 75 0 37.5 0 0z"/></svg>

package/bpk-component-flare/src/svgs/pointer.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14832 55"><path d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"/></svg>

package/bpk-component-floating-notification/README.md

@@ -0,0 +1,48 @@
+# bpk-component-floating-notification
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
+import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';
+
+export default () => (
+  <BpkFloatingNotification
+    ctaText="View"
+    icon={BpkIconHeart}
+    onClick={() => {}}
+    text="Killer Combo saved to New York and Miami 🎉"
+  />
+);
+```
+
+## Props
+
+| Property       | PropType     | Required | Default Value |
+| -------------- | ------------ | -------- | ------------- |
+| animateOnEnter | bool         | false    | true          |
+| animateOnExit  | bool         | false    | true          |
+| className      | string       | false    | null          |
+| ctaText        | string       | false    | null          |
+| hideAfter      | number       | false    | 4000          |
+| icon           | ReactElement | false    | null          |
+| onClick        | func         | false    | null          |
+| onExit         | func         | false    | null          |
+| text           | string       | true     | -             |
+
+### Prop Details
+
+#### hideAfter
+
+This prop controls the amount of time that the notification stays visible before the exit animation begins.
+
+The default value is 4 seconds (4000 milliseconds).
+
+#### onExit
+
+Execute a function after the component has finished the exit animation.

package/bpk-component-floating-notification/index.js

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

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -1,90 +1,129 @@
-"use strict";
+/*
+ * 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, { useEffect, useState, ReactElement } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+import BpkAriaLive from '../../bpk-component-aria-live';
+import BpkButton from '../../bpk-component-button';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkFloatingNotification.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  animateOnEnter: ?boolean,
+  animateOnExit: ?boolean,
+  className: ?string,
+  ctaText: ?string,
+  hideAfter: ?number,
+  icon: ?() => ReactElement,
+  onClick: ?() => void,
+  onExit: ?() => void,
+  text: string,
+};
+
+const BpkFloatingNotification = (props: Props) => {
+  const [showMessage, setShowMessage] = useState(true);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactTransitionGroup = require("react-transition-group");
-var _bpkComponentAriaLive = _interopRequireDefault(require("../../bpk-component-aria-live"));
-var _bpkComponentButton = _interopRequireDefault(require("../../bpk-component-button"));
-var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-text"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkFloatingNotificationModule = _interopRequireDefault(require("./BpkFloatingNotification.module.css"));
-const _excluded = ["animateOnEnter", "animateOnExit", "className", "ctaText", "hideAfter", "icon", "onClick", "onExit", "text"];
-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 _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)(_BpkFloatingNotificationModule.default);
-const BpkFloatingNotification = props => {
-  const [showMessage, setShowMessage] = (0, _react.useState)(true);
   const {
-      animateOnEnter,
-      animateOnExit,
-      className,
-      ctaText,
-      hideAfter,
-      icon: Icon,
-      onClick,
-      onExit,
-      text
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    animateOnEnter,
+    animateOnExit,
+    className,
+    ctaText,
+    hideAfter,
+    icon: Icon,
+    onClick,
+    onExit,
+    text,
+    ...rest
+  } = props;
+
   const classNames = getClassName('bpk-floating-notification', className);
-  (0, _react.useEffect)(() => {
+
+  useEffect(() => {
     let timer;
     if (hideAfter) {
       timer = setTimeout(() => setShowMessage(false), hideAfter);
     }
     return () => timer && clearTimeout(timer);
   });
-  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-    in: showMessage,
-    classNames: {
-      exit: getClassName('bpk-floating-notification--leave'),
-      exitActive: getClassName('bpk-floating-notification--leave-active'),
-      exitDone: getClassName('bpk-floating-notification--leave-done'),
-      appear: getClassName('bpk-floating-notification--appear'),
-      appearActive: getClassName('bpk-floating-notification--appear-active')
-    },
-    timeout: 400,
-    appear: animateOnEnter,
-    exit: animateOnExit,
-    unmountOnExit: true,
-    onExited: onExit
-  }, /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: classNames
-  }, rest), Icon && /*#__PURE__*/_react.default.createElement("div", {
-    className: getClassName('bpk-floating-notification__icon')
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    "aria-hidden": true
-  })), /*#__PURE__*/_react.default.createElement(_bpkComponentText.default, {
-    tagName: "p",
-    textStyle: _bpkComponentText.TEXT_STYLES.bodyDefault,
-    className: getClassName('bpk-floating-notification__text')
-  }, text), /*#__PURE__*/_react.default.createElement(_bpkComponentAriaLive.default, {
-    "aria-hidden": true
-  }, text), ctaText && /*#__PURE__*/_react.default.createElement(_bpkComponentButton.default, {
-    link: true,
-    onClick: onClick,
-    className: getClassName('bpk-floating-notification__button')
-  }, ctaText)));
+
+  return (
+    <CSSTransition
+      in={showMessage}
+      classNames={{
+        exit: getClassName('bpk-floating-notification--leave'),
+        exitActive: getClassName('bpk-floating-notification--leave-active'),
+        exitDone: getClassName('bpk-floating-notification--leave-done'),
+        appear: getClassName('bpk-floating-notification--appear'),
+        appearActive: getClassName('bpk-floating-notification--appear-active'),
+      }}
+      timeout={400}
+      appear={animateOnEnter}
+      exit={animateOnExit}
+      unmountOnExit
+      onExited={onExit}
+    >
+      <div className={classNames} {...rest}>
+        {Icon && (
+          <div className={getClassName('bpk-floating-notification__icon')}>
+            <Icon aria-hidden />
+          </div>
+        )}
+        <BpkText
+          tagName="p"
+          textStyle={TEXT_STYLES.bodyDefault}
+          className={getClassName('bpk-floating-notification__text')}
+        >
+          {text}
+        </BpkText>
+        <BpkAriaLive aria-hidden>{text}</BpkAriaLive>
+        {ctaText && (
+          <BpkButton
+            link
+            onClick={onClick}
+            className={getClassName('bpk-floating-notification__button')}
+          >
+            {ctaText}
+          </BpkButton>
+        )}
+      </div>
+    </CSSTransition>
+  );
 };
+
 BpkFloatingNotification.propTypes = {
-  animateOnEnter: _propTypes.default.bool,
-  animateOnExit: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  ctaText: _propTypes.default.string,
-  hideAfter: _propTypes.default.number,
-  icon: _propTypes.default.ReactElement,
-  onClick: _propTypes.default.func,
-  onExit: _propTypes.default.func,
-  text: _propTypes.default.string.isRequired
+  animateOnEnter: PropTypes.bool,
+  animateOnExit: PropTypes.bool,
+  className: PropTypes.string,
+  ctaText: PropTypes.string,
+  hideAfter: PropTypes.number,
+  icon: PropTypes.ReactElement,
+  onClick: PropTypes.func,
+  onExit: PropTypes.func,
+  text: PropTypes.string.isRequired,
 };
+
 BpkFloatingNotification.defaultProps = {
   animateOnEnter: true,
   animateOnExit: true,
@@ -93,7 +132,7 @@ BpkFloatingNotification.defaultProps = {
   hideAfter: 4000,
   icon: null,
   onClick: null,
-  onExit: null
+  onExit: null,
 };
-var _default = BpkFloatingNotification;
-exports.default = _default;
+
+export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.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-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;margin:0 0 auto auto;padding:0;color:#fff}.bpk-floating-notification__icon{margin:0.25rem 0.5rem 0 0.25rem;flex-shrink:0;text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-right:0.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{display:flex}