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

package/bpk-animate-height/README.md

@@ -0,0 +1,53 @@
+# bpk-animate-height
+
+> Animate height using CSS transitions.
+
+Note: This was forked from https://github.com/Stanko/react-animate-height. We have added functionality to
+set the display property of the container to `display: none;` when the height is equal to 0.
+
+More information on the easing values can be found at [http://easings.net/](http://easings.net/)
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import AnimateHeight from '@skyscanner/backpack-web/bpk-animate-height';
+import React, { Component } from 'react';
+
+class AnimateHeightContainer extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      expanded: false,
+    };
+  }
+
+  render() {
+    return (
+      <AnimateHeight
+        height={this.state.expanded ? 'auto' : 0}
+        duration={200}
+      >
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+        ridiculus mus.
+      </AnimateHeight>
+    );
+  }
+}
+```
+
+## Props
+
+| Property            | PropType         | Required | Default Value |
+| ------------------- | ---------------- | -------- | ------------- |
+| children            | node             | true     | -             |
+| duration            | number           | true     | -             |
+| height              | string or number | true     | -             |
+| easing              | string           | false    | 'ease'        |
+| onAnimationComplete | function         | false    | null          |
+| style               | object           | false    | {}            |

package/bpk-animate-height/index.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _AnimateHeight = _interopRequireDefault(require("./src/AnimateHeight"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,5 +15,7 @@ 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 = _AnimateHeight.default;
-exports.default = _default;
+
+import AnimateHeight from './src/AnimateHeight';
+
+export default AnimateHeight;

package/bpk-animate-height/src/AnimateHeight.js

@@ -1,59 +1,58 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-const _excluded = ["children", "duration", "easing", "onAnimationComplete", "style"];
-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 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 _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; }
-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); }
+/*
+ * 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 PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
 // IE11 doesn't support `Number.isNaN` so we must use the global.
 // When IE11 support drops we can migrate.
 // eslint-disable-next-line no-restricted-globals
-const isNumber = n => !isNaN(parseFloat(n)) && isFinite(n);
-const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
-class AnimateHeight extends _react.Component {
+const isNumber = (n) => !isNaN(parseFloat(n)) && isFinite(n);
+
+const isTransitionEndSupported = () =>
+  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+
+class AnimateHeight extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "onTransitionEnd", () => {
-      if (this.contentElement && this.props.height === 0) {
-        this.contentElement.style.display = 'none';
-      }
-      if (this.props.onAnimationComplete) {
-        this.props.onAnimationComplete();
-      }
-    });
+
     let height = 'auto';
     let overflow = 'visible';
+
     if (isNumber(this.props.height)) {
       height = this.props.height < 0 ? 0 : this.props.height;
       overflow = this.props.transitionOverflow;
     }
+
     this.state = {
       height,
-      overflow
+      overflow,
     };
   }
+
   componentDidMount() {
     if (this.contentElement && this.props.height === 0) {
       this.contentElement.style.display = 'none';
     }
   }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      height
-    } = this.props;
+    const { height } = this.props;
 
     // Check if 'height' prop has changed
     if (this.contentElement && nextProps.height !== height) {
@@ -62,12 +61,15 @@ class AnimateHeight extends _react.Component {
       this.contentElement.style.overflow = this.props.transitionOverflow;
       const contentHeight = this.contentElement.offsetHeight;
       this.contentElement.style.overflow = '';
+
       let newHeight = null;
       let shouldSetTimeout = false;
       let timeoutHeight = null;
       let timeoutOverflow = this.props.transitionOverflow;
       let timeoutDuration = nextProps.duration;
+
       clearTimeout(this.timeoutID);
+
       if (isNumber(nextProps.height)) {
         // If new height is a number
         newHeight = nextProps.height < 0 ? 0 : nextProps.height;
@@ -79,24 +81,29 @@ class AnimateHeight extends _react.Component {
         timeoutHeight = 'auto';
         timeoutOverflow = 'visible';
       }
+
       if (this.state.height === 'auto') {
         // If previous height was 'auto'
         // set it explicitly to be able to use transition
         shouldSetTimeout = true;
         timeoutHeight = newHeight;
+
         newHeight = contentHeight;
         timeoutDuration = 50;
       }
+
       this.setState((state, props) => ({
         height: newHeight,
-        overflow: props.transitionOverflow
+        overflow: props.transitionOverflow,
       }));
+
       if (shouldSetTimeout) {
         this.timeoutID = setTimeout(() => {
           this.setState({
             height: timeoutHeight,
-            overflow: timeoutOverflow
+            overflow: timeoutOverflow,
           });
+
           if (!isTransitionEndSupported()) {
             this.onTransitionEnd();
           }
@@ -104,60 +111,74 @@ class AnimateHeight extends _react.Component {
       }
     }
   }
+
   componentWillUnmount() {
     clearTimeout(this.timeoutID);
     this.timeoutID = null;
   }
+
+  onTransitionEnd = () => {
+    if (this.contentElement && this.props.height === 0) {
+      this.contentElement.style.display = 'none';
+    }
+    if (this.props.onAnimationComplete) {
+      this.props.onAnimationComplete();
+    }
+  };
+
   render() {
-    const _this$props = this.props,
-      {
-        children,
-        duration,
-        easing,
-        onAnimationComplete,
-        style
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
-    const {
-      height,
-      overflow
-    } = this.state;
-    const componentStyle = _objectSpread(_objectSpread({}, style), {}, {
+    const { children, duration, easing, onAnimationComplete, style, ...rest } =
+      this.props;
+
+    const { height, overflow } = this.state;
+
+    const componentStyle = {
+      ...style,
       height,
       overflow,
       WebkitTransition: `height ${duration}ms ${easing} `,
       MozTransition: `height ${duration}ms ${easing} `,
       OTransition: `height ${duration}ms ${easing} `,
       msTransition: `height ${duration}ms ${easing} `,
-      transition: `height ${duration}ms ${easing} `
-    });
+      transition: `height ${duration}ms ${easing} `,
+    };
+
     delete rest.height;
     delete rest.transitionOverflow;
-    return /*#__PURE__*/_react.default.createElement("div", _extends({
-      style: componentStyle,
-      onTransitionEnd: this.onTransitionEnd
-    }, rest), /*#__PURE__*/_react.default.createElement("div", {
-      ref: el => {
-        this.contentElement = el;
-      }
-    }, children));
+
+    return (
+      <div
+        style={componentStyle}
+        onTransitionEnd={this.onTransitionEnd}
+        {...rest}
+      >
+        <div
+          ref={(el) => {
+            this.contentElement = el;
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    );
   }
 }
+
 AnimateHeight.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  duration: _propTypes.default.number.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  easing: _propTypes.default.string,
-  transitionOverflow: _propTypes.default.string,
-  onAnimationComplete: _propTypes.default.func,
-  style: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
+  children: PropTypes.node.isRequired,
+  duration: PropTypes.number.isRequired,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  easing: PropTypes.string,
+  transitionOverflow: PropTypes.string,
+  onAnimationComplete: PropTypes.func,
+  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 AnimateHeight.defaultProps = {
   easing: 'ease',
   transitionOverflow: 'hidden',
   onAnimationComplete: null,
-  style: {}
+  style: {},
 };
-var _default = AnimateHeight;
-exports.default = _default;
+
+export default AnimateHeight;

package/bpk-component-accordion/README.md

@@ -0,0 +1,122 @@
+# bpk-component-accordion
+
+> Backpack accordion component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+### withSingleItemAccordionState(BpkAccordion)
+
+The `withSingleItemAccordionState` higher-order component is used to limit one section to be expanded at any time.
+
+```js
+import React from 'react';
+import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from '@skyscanner/backpack-web/bpk-component-accordion';
+
+const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
+
+export default () => (
+  <SingleItemAccordion>
+    <BpkAccordionItem id="stops" title="Stops">
+      My stops content.
+    </BpkAccordionItem>
+    <BpkAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
+      My departure times content.
+    </BpkAccordionItem>
+    <BpkAccordionItem id="journey-duration" title="Journey duration">
+      My journey duration content.
+    </BpkAccordionItem>
+  </SingleItemAccordion>
+)
+```
+
+### withAccordionItemState(BpkAccordionItem)
+
+The `withAccordionItemState` higher-order component is used to allow multiple items to be expanded simultaneously.
+
+```js
+import React from 'react';
+import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from '@skyscanner/backpack-web/bpk-component-accordion';
+
+const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
+
+export default () => (
+  <BpkAccordion>
+    <StatefulAccordionItem id="stops" title="Stops">
+      My stops content.
+    </StatefulAccordionItem>
+    <StatefulAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
+      My departure times content.
+    </StatefulAccordionItem>
+    <StatefulAccordionItem id="journey-duration" title="Journey duration" initiallyExpanded>
+      My journey duration content.
+    </StatefulAccordionItem>
+  </BpkAccordion>
+)
+```
+
+### Displaying icons
+
+`BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://backpack.github.io/components/alignment?platform=web)
+
+```js
+import React from 'react';
+import { BpkAccordion, BpkAccordionItem } from '@skyscanner/backpack-web/bpk-component-accordion';
+import { withAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
+import StopsIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/stops';
+import { lineHeightBase, iconSizeSm, colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
+
+<BpkAccordion>
+  <BpkAccordionItem id="stops" title="Stops" icon={<AlignedStopsIcon fill={colorPanjin}/>}>
+    My stops content.
+  </BpkAccordionItem>
+</BpkAccordion>
+
+```
+
+## Props
+
+### BpkAccordion
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| className | string   | false    | null          |
+
+### BpkAccordionItem
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| id        | string   | true     | -             |
+| title     | string   | true     | -             |
+| expanded  | bool     | false    | false         |
+| icon      | node     | false    | null          |
+| onClick   | func     | false    | () => null    |
+| tagName   | string   | false    | span          |
+| textStyle | string   | false    | "base"        |
+
+### withSingleItemAccordionState(BpkAccordion)
+
+| Property                       | PropType | Required | Default Value |
+| ------------------------------ | -------- | -------- | ------------- |
+| ~~expanded~~ initiallyExpanded | bool     | false    | false         |
+
+### withState(BpkAccordionItem)
+
+| Property                       | PropType | Required | Default Value |
+| ------------------------------ | -------- | -------- | ------------- |
+| ~~expanded~~ initiallyExpanded | bool     | false    | false         |
+
+## Prop Details
+
+## Theme Props
+
+* `accordionColor`,
+* `accordionHoverColor`,
+* `accordionActiveColor`,

package/bpk-component-accordion/index.js

@@ -1,34 +1,31 @@
-"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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkAccordion", {
-  enumerable: true,
-  get: function () {
-    return _BpkAccordion.default;
-  }
-});
-Object.defineProperty(exports, "BpkAccordionItem", {
-  enumerable: true,
-  get: function () {
-    return _BpkAccordionItem.default;
-  }
-});
-Object.defineProperty(exports, "withAccordionItemState", {
-  enumerable: true,
-  get: function () {
-    return _withAccordionItemState.default;
-  }
-});
-Object.defineProperty(exports, "withSingleItemAccordionState", {
-  enumerable: true,
-  get: function () {
-    return _withSingleItemAccordionState.default;
-  }
-});
-var _BpkAccordion = _interopRequireDefault(require("./src/BpkAccordion"));
-var _BpkAccordionItem = _interopRequireDefault(require("./src/BpkAccordionItem"));
-var _withSingleItemAccordionState = _interopRequireDefault(require("./src/withSingleItemAccordionState"));
-var _withAccordionItemState = _interopRequireDefault(require("./src/withAccordionItemState"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* @flow strict */
+
+import BpkAccordion from './src/BpkAccordion';
+import BpkAccordionItem from './src/BpkAccordionItem';
+import withSingleItemAccordionState from './src/withSingleItemAccordionState';
+import withAccordionItemState from './src/withAccordionItemState';
+
+export {
+  BpkAccordion,
+  BpkAccordionItem,
+  withSingleItemAccordionState,
+  withAccordionItemState,
+};

package/bpk-component-accordion/src/BpkAccordion.js

@@ -1,40 +1,54 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkAccordionModule = _interopRequireDefault(require("./BpkAccordion.module.css"));
-const _excluded = ["children", "className"];
-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)(_BpkAccordionModule.default);
-const BpkAccordion = props => {
-  const {
-      children,
-      className
-    } = 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 { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkAccordion.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = { children: Node, className: ?string };
+
+const BpkAccordion = (props: Props) => {
+  const { children, className, ...rest } = props;
+
   const classNames = getClassName('bpk-accordion', className);
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _react.default.createElement("dl", _extends({
-      className: classNames
-    }, rest), children)
+    <dl className={classNames} {...rest}>
+      {children}
+    </dl>
   );
 };
+
 BpkAccordion.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
+
 BpkAccordion.defaultProps = {
-  className: null
+  className: null,
 };
-var _default = BpkAccordion;
-exports.default = _default;
+
+export default BpkAccordion;

package/{bpk-component-boilerplate/src/BpkBoilerplate.module.css → bpk-component-accordion/src/BpkAccordion.module.scss}

@@ -1,18 +1,23 @@
 /*
  * 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-boilerplate{display:flex}
+ */
+
+@import '~bpk-mixins/index.scss';
+
+.bpk-accordion {
+  margin: 0;
+}