@skyscanner/backpack-web 25.6.0 → 25.7.0-beta

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

@@ -1,19 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = 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"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["animateOnEnter", "animateOnExit", "className", "ctaText", "hideAfter", "icon", "onClick", "onExit", "text"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -31,89 +15,115 @@ const _excluded = ["animateOnEnter", "animateOnExit", "className", "ctaText", "h
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { 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); }
-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);
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import { 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);
+
   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__*/(0, _jsxRuntime.jsx)(_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,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
-      className: classNames
-    }, rest), {}, {
-      children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getClassName('bpk-floating-notification__icon'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          "aria-hidden": true
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
-        tagName: "p",
-        textStyle: _bpkComponentText.TEXT_STYLES.bodyDefault,
-        className: getClassName('bpk-floating-notification__text'),
-        children: text
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentAriaLive.default, {
-        "aria-hidden": true,
-        children: text
-      }), ctaText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentButton.default, {
-        link: true,
-        onClick: onClick,
-        className: getClassName('bpk-floating-notification__button'),
-        children: 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,
@@ -122,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.scss

@@ -0,0 +1,85 @@
+/*
+ * 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-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-core-primary-day;
+  color: $bpk-text-on-dark-day;
+  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-text-on-dark-day;
+  }
+
+  &__icon {
+    margin-right: bpk-spacing-md();
+    margin-left: bpk-spacing-sm();
+    flex-shrink: 0;
+    transform: translateY((bpk-spacing-sm()));
+    text-align: bottom;
+    fill: $bpk-text-on-dark-day;
+  }
+
+  &__text {
+    margin-right: bpk-spacing-md();
+  }
+}

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

@@ -0,0 +1,30 @@
+# bpk-component-form-validation
+
+> Backpack form validation component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import BpkFormValidation from '@skyscanner/backpack-web/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,18 +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
  *
@@ -30,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/src/BpkFormValidation.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-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 _BpkFormValidationModule = _interopRequireDefault(require("./BpkFormValidation.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "containerProps", "expanded", "isCheckbox"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,56 +15,70 @@ const _excluded = ["children", "className", "containerProps", "expanded", "isChe
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { 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); }
-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,
-      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__*/(0, _jsxRuntime.jsx)(_bpkAnimateHeight.default, _objectSpread(_objectSpread({
-    duration: 200,
-    height: expanded ? 'auto' : 0,
-    transitionOverflow: "visible"
-  }, containerProps), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: getClassName('bpk-form-validation__container'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
-        className: classNames
-      }, rest), {}, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AlignedExclamationIcon, {
-          className: getClassName('bpk-form-validation__icon')
-        }), children]
-      }))
-    })
-  }));
+
+import PropTypes from 'prop-types';
+import {
+  lineHeightSm,
+  iconSizeSm,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+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 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,
+  );
+
+  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.scss';
+
+.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-sm());
+  }
+
+  &--appear {
+    @include bpk-form-validation--appear;
+  }
+
+  &--is-checkbox {
+    @include bpk-form-validation--is-checkbox;
+  }
+}

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

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

package/bpk-component-graphic-promotion/README.md

@@ -0,0 +1,67 @@
+# bpk-component-graphic-promotion
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```tsx
+import BpkGraphicPromo from '@skyscanner/backpack-web/bpk-component-graphic-promotion';
+
+export default () => (
+  <BpkGraphicPromo
+    buttonText="Learn more"
+    contentId="graphic-promo-1"
+    headline="Ride your wave"
+    invertVertically
+    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
+    sponsor={{
+      label: 'Sponsored',
+      logo: './path/to/sponsor/logo.png',
+      altText: 'Sponsor Name',
+    }}
+    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
+    tagline="Tagline"
+    textAlign={TEXT_ALIGN.start}
+  />
+);
+```
+
+## Props
+
+| Property         | PropType          | Required | Default Value |
+| ---------------- | ----------------- | -------- | ------------- |
+| buttonText       | string            | true     | -             |
+| headline         | string            | true     | -             |
+| onClick          | func              | true     | -             |
+| textAlign        | oneOf(TEXT_ALIGN) | true     | -             |
+| className        | string            | false    | null          |
+| contentId        | string            | false    | null          |
+| invertVertically | bool              | false    | false         |
+| sponsor          | object            | false    | null          |
+| style            | object            | false    | {}            |
+| subheading       | string            | false    | null          |
+| tagline          | string            | false    | null          |
+
+### Prop Details
+
+#### sponsor
+
+An object that groups together all the sponsor related properties. This should only be provided if the graphic promo is sponsored, in which case all of the object's properties are required.
+
+The object consists of the following fields:
+
+- `altText`: string
+- `label`: string
+- `logo`: string
+
+##### Example
+
+```ts
+const sponsor = {
+  label: 'Sponsored',
+  altText: 'Skyscanner',
+  logo: './path/to/skyscanner/logo.png',
+};
+```

package/{bpk-component-boilerplate/index.d.ts → bpk-component-graphic-promotion/index.ts}

@@ -16,9 +16,11 @@
  * limitations under the License.
  */
 
-import BpkBoilerplate, {
-  type Props as BpkBoilerplateProps,
-} from './src/BpkBoilerplate';
+import BpkGraphicPromo, {
+  type Props as BpkGraphicPromoProps,
+  TEXT_ALIGN,
+} from './src/BpkGraphicPromo';
 
-export type { BpkBoilerplateProps };
-export default BpkBoilerplate;
+export type { BpkGraphicPromoProps };
+export { TEXT_ALIGN };
+export default BpkGraphicPromo;