@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

package/bpk-component-fieldset/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,5 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['fieldsetLabelTextColor'];
-exports.default = _default;
+
+export default ['fieldsetLabelTextColor'];

package/bpk-component-flare/README.md

@@ -0,0 +1,52 @@
+# bpk-component-flare
+
+> Backpack example component.
+
+## Installation
+
+```sh
+npm install bpk-component-flare --save-dev
+```
+
+## Usage
+
+Note that the default background color is white. You will need to apply a custom className if you wish to change this.
+
+### React components
+
+```js
+import React from 'react';
+import { BpkContentBubble } from 'bpk-component-flare';
+
+export default MyComponent = () => (
+  <div>
+      <BpkContentBubble
+      className="myCustomClassName"
+      showPointer={false}
+      rounded={false}
+      content={...}
+      />
+  </div>
+)
+```
+
+
+## Props
+
+### BpkContentBubble
+
+| Property         | PropType                                 | Required | Default Value |
+| ---------------- | ---------------------------------------- | -------- | ------------- |
+| className        | string                                   | false    | null          |
+| content          | node                                     | false    | null          |
+| contentClassName | string                                   | false    | null          |
+| flareProps       | object - see [BpkFlareBar](#bpkflarebar) | false    | null          |
+| showPointer      | bool                                     | false    | true          |
+
+### BpkFlareBar
+
+| Property     | PropType | Required | Default Value |
+| ------------ | -------- | -------- | ------------- |
+| className    | string   | false    | null          |
+| svgClassName | string   | false    | null          |
+

package/bpk-component-flare/index.js

@@ -1,28 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkContentBubble", {
-  enumerable: true,
-  get: function () {
-    return _BpkContentBubble.default;
-  }
-});
-Object.defineProperty(exports, "BpkFlareBar", {
-  enumerable: true,
-  get: function () {
-    return _BpkFlareBar.default;
-  }
-});
-exports.default = void 0;
-
-var _BpkFlareBar = _interopRequireDefault(require("./src/BpkFlareBar"));
-
-var _BpkContentBubble = _interopRequireDefault(require("./src/BpkContentBubble"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -40,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 = _BpkFlareBar.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkFlareBar from './src/BpkFlareBar';
+import BpkContentBubble from './src/BpkContentBubble';
+
+export default BpkFlareBar;
+export { BpkFlareBar, BpkContentBubble };

package/bpk-component-flare/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bpk-component-flare",
+  "version": "3.0.1",
+  "description": "Backpack FlareBar and ContentBubble component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "gulp"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-component-label": "^6.0.1",
+    "bpk-component-text": "^8.0.1",
+    "bpk-mixins": "^31.4.0",
+    "bpk-react-utils": "^7.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

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

@@ -1,62 +1,59 @@
-"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 _BpkFlareBar = _interopRequireDefault(require("./BpkFlareBar"));
-
-const _excluded = ["className", "content", "contentClassName", "flareProps", "rounded", "showPointer"];
-
-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 STYLES = {
-  "bpk-content-bubble__pointer": "bpk-content-bubble-module__bpk-content-bubble__pointer___nBC2r",
-  "bpk-content-bubble__wrapper": "bpk-content-bubble-module__bpk-content-bubble__wrapper___3fSYc",
-  "bpk-content-bubble__wrapper--rounded": "bpk-content-bubble-module__bpk-content-bubble__wrapper--rounded___3eQFp",
-  "bpk-content-bubble__wrapper--rounded--with-pointer": "bpk-content-bubble-module__bpk-content-bubble__wrapper--rounded--with-pointer___e909_",
-  "bpk-content-bubble__container": "bpk-content-bubble-module__bpk-content-bubble__container___1QSOD",
-  "bpk-content-bubble__content-wrapper": "bpk-content-bubble-module__bpk-content-bubble__content-wrapper___3oaXx",
-  "bpk-keyframe-spin": "bpk-content-bubble-module__bpk-keyframe-spin___1j0K0"
-};
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-
-const BpkContentBubble = props => {
+/*
+ * 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 BpkFlareBar from './BpkFlareBar';
+import STYLES from './bpk-content-bubble.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkContentBubble = (props) => {
   const {
     className,
     content,
     contentClassName,
     flareProps,
     rounded,
-    showPointer
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+    showPointer,
+    ...rest
+  } = props;
 
   const wrapperClassNames = [getClassName('bpk-content-bubble__wrapper')];
-  const contentClassNames = [getClassName('bpk-content-bubble__content-wrapper')];
+  const contentClassNames = [
+    getClassName('bpk-content-bubble__content-wrapper'),
+  ];
 
   if (showPointer) {
-    wrapperClassNames.push(getClassName('bpk-content-bubble__wrapper--with-pointer'));
+    wrapperClassNames.push(
+      getClassName('bpk-content-bubble__wrapper--with-pointer'),
+    );
   }
-
   if (rounded) {
-    wrapperClassNames.push(getClassName('bpk-content-bubble__wrapper--rounded'));
-
+    wrapperClassNames.push(
+      getClassName('bpk-content-bubble__wrapper--rounded'),
+    );
     if (showPointer) {
-      wrapperClassNames.push(getClassName('bpk-content-bubble__wrapper--rounded--with-pointer'));
+      wrapperClassNames.push(
+        getClassName('bpk-content-bubble__wrapper--rounded--with-pointer'),
+      );
     }
   }
 
@@ -68,34 +65,38 @@ const BpkContentBubble = props => {
     contentClassNames.push(contentClassName);
   }
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: wrapperClassNames.join(' ')
-  }, rest), /*#__PURE__*/_react.default.createElement("div", {
-    className: getClassName('bpk-content-bubble__container')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: contentClassNames.join(' ')
-  }, content && content), showPointer && /*#__PURE__*/_react.default.createElement(_BpkFlareBar.default, _extends({
-    rounded: rounded,
-    className: getClassName('bpk-content-bubble__pointer')
-  }, flareProps))));
+  return (
+    <div className={wrapperClassNames.join(' ')} {...rest}>
+      <div className={getClassName('bpk-content-bubble__container')}>
+        <div className={contentClassNames.join(' ')}>{content && content}</div>
+        {showPointer && (
+          <BpkFlareBar
+            rounded={rounded}
+            className={getClassName('bpk-content-bubble__pointer')}
+            {...flareProps}
+          />
+        )}
+      </div>
+    </div>
+  );
 };
 
 BpkContentBubble.propTypes = {
-  flareProps: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  content: _propTypes.default.node,
-  rounded: _propTypes.default.bool,
-  showPointer: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  contentClassName: _propTypes.default.string
+  flareProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  content: PropTypes.node,
+  rounded: PropTypes.bool,
+  showPointer: PropTypes.bool,
+  className: PropTypes.string,
+  contentClassName: PropTypes.string,
 };
+
 BpkContentBubble.defaultProps = {
   flareProps: null,
   rounded: true,
   content: null,
   showPointer: true,
   className: null,
-  contentClassName: null
+  contentClassName: null,
 };
-var _default = BpkContentBubble;
-exports.default = _default;
+
+export default BpkContentBubble;

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

@@ -1,83 +1,76 @@
-"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 _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; }
-
-var STYLES = {
-  "bpk-flare-bar__container": "bpk-flare-bar-module__bpk-flare-bar__container___3ZpVt",
-  "bpk-flare-bar__curve": "bpk-flare-bar-module__bpk-flare-bar__curve___1TXcV",
-  "bpk-flare-bar__rounded-corner": "bpk-flare-bar-module__bpk-flare-bar__rounded-corner___grgft",
-  "bpk-flare-bar__rounded-corner--trailing": "bpk-flare-bar-module__bpk-flare-bar__rounded-corner--trailing___6BsNp",
-  "bpk-keyframe-spin": "bpk-flare-bar-module__bpk-keyframe-spin___1Rs-k"
-};
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-
-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,33 +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,33 +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.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-bubble__pointer{width:100%;align-items:flex-end;align-self:flex-end}.bpk-content-bubble__wrapper{width:100%;height:auto;margin:0 auto;background-repeat:no-repeat;background-position:50% 60%;background-size:cover}.bpk-content-bubble__wrapper--rounded{border-radius:1.3125rem}.bpk-content-bubble__wrapper--rounded--with-pointer{border-radius:1.3125rem 1.3125rem 0 0}.bpk-content-bubble__container{display:flex;height:100%;flex-direction:column}.bpk-content-bubble__content-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto}

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

@@ -0,0 +1,60 @@
+/*
+ * 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';
+
+.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

@@ -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-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)}