@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0-alpha.1

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

@@ -1,47 +1,53 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TYPE = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactTransitionGroup = require("react-transition-group");
-
-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.css"));
-
-const _excluded = ["animateOnEnter", "animateOnExit", "className", "ctaText", "hideAfter", "icon", "onClick", "text", "type"];
-
-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 TYPE = {
+/*
+ * 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 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);
+
+export const TYPE = {
   light: 'light',
-  dark: 'dark'
+  dark: 'dark',
+};
+
+type Props = {
+  animateOnEnter: ?boolean,
+  animateOnExit: ?boolean,
+  className: ?string,
+  ctaText: ?string,
+  hideAfter: ?number,
+  icon: ?() => ReactElement,
+  onClick: ?() => void,
+  onExit: ?() => void,
+  text: string,
+  type: ?TYPE,
 };
-exports.TYPE = TYPE;
 
-const BpkFloatingNotification = props => {
-  const [showMessage, setShowMessage] = (0, _react.useState)(true);
+const BpkFloatingNotification = (props: Props) => {
+  const [showMessage, setShowMessage] = useState(true);
 
   const {
     animateOnEnter,
@@ -51,62 +57,88 @@ const BpkFloatingNotification = props => {
     hideAfter,
     icon: Icon,
     onClick,
+    onExit,
     text,
-    type
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+    type,
+    ...rest
+  } = props;
 
-  const classNames = getClassName('bpk-floating-notification', type === TYPE.dark && 'bpk-floating-notification--dark', className);
-  const iconClassNames = getClassName('bpk-floating-notification__icon', type === TYPE.dark && 'bpk-floating-notification__icon--dark');
-  const buttonClassNames = getClassName('bpk-floating-notification__button', type === TYPE.dark && 'bpk-floating-notification__button--dark');
-  (0, _react.useEffect)(() => {
-    let timer;
+  const classNames = getClassName(
+    'bpk-floating-notification',
+    type === TYPE.dark && 'bpk-floating-notification--dark',
+    className,
+  );
+
+  const iconClassNames = getClassName(
+    'bpk-floating-notification__icon',
+    type === TYPE.dark && 'bpk-floating-notification__icon--dark',
+  );
 
+  const buttonClassNames = getClassName(
+    'bpk-floating-notification__button',
+    type === TYPE.dark && 'bpk-floating-notification__button--dark',
+  );
+
+  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
-  }, /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: classNames
-  }, rest), Icon && /*#__PURE__*/_react.default.createElement("div", {
-    className: iconClassNames
-  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(_bpkComponentText.default, {
-    tagName: "p",
-    textStyle: _bpkComponentText.TEXT_STYLES.bodyDefault,
-    className: getClassName('bpk-floating-notification__text')
-  }, text), ctaText && /*#__PURE__*/_react.default.createElement(_bpkComponentButton.default, {
-    link: true,
-    onClick: onClick,
-    className: buttonClassNames
-  }, 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={iconClassNames}>
+            <Icon />
+          </div>
+        )}
+        <BpkText
+          tagName="p"
+          textStyle={TEXT_STYLES.bodyDefault}
+          className={getClassName('bpk-floating-notification__text')}
+        >
+          {text}
+        </BpkText>
+        {ctaText && (
+          <BpkButton link onClick={onClick} className={buttonClassNames}>
+            {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,
-  text: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(Object.values(TYPE))
+  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,
+  type: PropTypes.oneOf(Object.values(TYPE)),
 };
+
 BpkFloatingNotification.defaultProps = {
   animateOnEnter: true,
   animateOnExit: true,
@@ -115,7 +147,8 @@ BpkFloatingNotification.defaultProps = {
   hideAfter: 4000,
   icon: null,
   onClick: null,
-  type: TYPE.light
+  onExit: null,
+  type: TYPE.light,
 };
-var _default = BpkFloatingNotification;
-exports.default = _default;
+
+export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.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-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:#02122c;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:#6d9feb}.bpk-floating-notification__button--dark{color:#0770e3}.bpk-floating-notification__icon{margin:0.25rem 0.5rem 0 0.25rem;flex-shrink:0;text-align:bottom;fill:#fff}.bpk-floating-notification__icon--dark{fill:#111236}.bpk-floating-notification__text{margin-right:0.5rem}.bpk-floating-notification--dark{background:#fff;color:#111236}

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss

@@ -0,0 +1,96 @@
+/*
+ * 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';
+
+.bpk-floating-notification {
+  position: absolute;
+  right: 0;
+  bottom: bpk-spacing-xl();
+  left: 0;
+  display: flex;
+  max-width: bpk-spacing-xxl() * 10;
+  margin: auto;
+  padding: bpk-spacing-lg();
+  transition: opacity $bpk-duration-base ease-in-out,
+    transform $bpk-duration-base ease-in-out;
+  border-radius: $bpk-border-radius-md;
+  background: $bpk-color-sky-blue-shade-03;
+  color: $bpk-color-white;
+  box-shadow: $bpk-box-shadow-xl, $bpk-box-shadow-lg;
+
+  @include bpk-breakpoint-mobile {
+    max-width: 100%;
+    padding: bpk-spacing-base();
+  }
+
+  &--leave {
+    transform: translateY(0);
+    opacity: 1;
+
+    &-active {
+      transform: translateY(bpk-spacing-xl());
+      opacity: 0;
+    }
+
+    &-done {
+      opacity: 0;
+    }
+  }
+
+  &--appear {
+    transform: translateY(bpk-spacing-xl());
+    opacity: 0;
+
+    &-active {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  &__button {
+    min-height: 0;
+    margin: 0 0 auto auto;
+    padding: 0;
+    color: $bpk-color-sky-blue-tint-01;
+
+    &--dark {
+      color: $bpk-link-color;
+    }
+  }
+
+  &__icon {
+    margin: bpk-spacing-sm() bpk-spacing-md() 0 bpk-spacing-sm();
+    flex-shrink: 0;
+    text-align: bottom;
+    fill: $bpk-color-white;
+
+    &--dark {
+      fill: $bpk-color-sky-gray;
+    }
+  }
+
+  &__text {
+    margin-right: bpk-spacing-md();
+  }
+
+  &--dark {
+    background: $bpk-color-white;
+    color: $bpk-color-sky-gray;
+  }
+}

package/bpk-component-form-validation/README.md

@@ -0,0 +1,33 @@
+# bpk-component-form-validation
+
+> Backpack form validation component.
+
+## Installation
+
+```sh
+npm install bpk-component-form-validation --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkFormValidation from 'bpk-component-form-validation';
+
+export default () => (
+  <BpkFormValidation id="my-form-validation" expanded>
+    A validation message.
+  </BpkFormValidation>,
+)
+```
+
+## Props
+
+| Property       | PropType | Required | Default Value |
+| -------------- | -------- | -------- | ------------- |
+| children       | node     | true     | -             |
+| id             | string   | true     | -             |
+| expanded       | bool     | true     | -             |
+| isCheckbox     | bool     | false    | false         |
+| className      | string   | false    | null          |
+| containerProps | object   | false    | {}            |

package/bpk-component-form-validation/index.js

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

package/bpk-component-form-validation/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "bpk-component-form-validation",
+  "version": "4.2.16",
+  "description": "Backpack form-validation 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/"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-animate-height": "^4.1.11",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-checkbox": "^4.1.13",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-input": "^6.1.16",
+    "bpk-component-select": "^5.1.11",
+    "bpk-component-textarea": "^4.2.11"
+  }
+}

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -1,76 +1,84 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkAnimateHeight = _interopRequireDefault(require("../../bpk-animate-height"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _exclamationCircle = _interopRequireDefault(require("../../bpk-component-icon/sm/exclamation-circle"));
-
-var _bpkComponentIcon = require("../../bpk-component-icon");
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
-var _BpkFormValidationModule = _interopRequireDefault(require("./BpkFormValidation.css"));
-
-const _excluded = ["children", "className", "containerProps", "expanded", "isCheckbox"];
-
-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)(_BpkFormValidationModule.default);
-const AlignedExclamationIcon = (0, _bpkComponentIcon.withAlignment)(_exclamationCircle.default, _base.lineHeightSm, _base.iconSizeSm);
-
-const BpkFormValidation = props => {
-  const {
-    children,
+/*
+ * 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 from 'react';
+import AnimateHeight from '../../bpk-animate-height';
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
+import { withAlignment } from '../../bpk-component-icon';
+import {
+  lineHeightSm,
+  iconSizeSm,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import STYLES from './BpkFormValidation.module.scss';
+
+const getClassName = cssModules(STYLES);
+const AlignedExclamationIcon = withAlignment(
+  BpkSmallExclamationIcon,
+  lineHeightSm,
+  iconSizeSm,
+);
+
+const BpkFormValidation = (props) => {
+  const { children, className, containerProps, expanded, isCheckbox, ...rest } =
+    props;
+
+  const classNames = getClassName(
+    'bpk-form-validation',
+    expanded && 'bpk-form-validation--appear',
+    isCheckbox && 'bpk-form-validation--is-checkbox',
     className,
-    containerProps,
-    expanded,
-    isCheckbox
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
-
-  const classNames = getClassName('bpk-form-validation', expanded && 'bpk-form-validation--appear', isCheckbox && 'bpk-form-validation--is-checkbox', className);
-  return /*#__PURE__*/_react.default.createElement(_bpkAnimateHeight.default, _extends({
-    duration: 200,
-    height: expanded ? 'auto' : 0,
-    transitionOverflow: "visible"
-  }, containerProps), /*#__PURE__*/_react.default.createElement("div", {
-    className: getClassName('bpk-form-validation__container')
-  }, /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: classNames
-  }, rest), /*#__PURE__*/_react.default.createElement(AlignedExclamationIcon, {
-    className: getClassName('bpk-form-validation__icon')
-  }), children)));
+  );
+
+  return (
+    <AnimateHeight
+      duration={200}
+      height={expanded ? 'auto' : 0}
+      transitionOverflow="visible"
+      {...containerProps}
+    >
+      <div className={getClassName('bpk-form-validation__container')}>
+        <div className={classNames} {...rest}>
+          <AlignedExclamationIcon
+            className={getClassName('bpk-form-validation__icon')}
+          />
+          {children}
+        </div>
+      </div>
+    </AnimateHeight>
+  );
 };
 
 BpkFormValidation.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  id: _propTypes.default.string.isRequired,
-  expanded: _propTypes.default.bool.isRequired,
-  isCheckbox: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  containerProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  isCheckbox: PropTypes.bool,
+  className: PropTypes.string,
+  containerProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
+
 BpkFormValidation.defaultProps = {
   isCheckbox: false,
   className: null,
-  containerProps: {}
+  containerProps: {},
 };
-var _default = BpkFormValidation;
-exports.default = _default;
+
+export default BpkFormValidation;

package/bpk-component-form-validation/src/BpkFormValidation.module.scss

@@ -0,0 +1,44 @@
+/*
+ * 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';
+
+.bpk-form-validation {
+  @include bpk-form-validation;
+
+  &__container {
+    @include bpk-form-validation__container;
+  }
+
+  &__icon {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-form-validation-icon-fill,
+      $bpk-form-validation-color
+    );
+    @include bpk-margin-trailing($bpk-spacing-xs);
+  }
+
+  &--appear {
+    @include bpk-form-validation--appear;
+  }
+
+  &--is-checkbox {
+    @include bpk-form-validation--is-checkbox;
+  }
+}