@skyscanner/backpack-web 0.0.1

package/bpk-component-icon/sm/weather--wind.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M10.5 3a3 3 0 0 0-3 3 1.5 1.5 0 0 1-3 0 6 6 0 1 1 6 6h-9a1.5 1.5 0 0 1 0-3h9a3 3 0 0 0 0-6z" /><path d="M13.5 21a1.5 1.5 0 0 1-1.397-.95 1.5 1.5 0 0 0-2.79 1.099A4.501 4.501 0 0 0 17.743 18H19.5a4.5 4.5 0 1 0-4.188-6.148 1.5 1.5 0 0 0 2.791 1.099A1.5 1.5 0 1 1 19.5 15h-18a1.5 1.5 0 1 0 0 3h12a1.5 1.5 0 0 1 0 3z" /></svg>);

package/bpk-component-icon/sm/weather.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M12 0a1.5 1.5 0 0 0-1.5 1.5V3a1.5 1.5 0 0 0 3 0V1.5A1.5 1.5 0 0 0 12 0zm0 19.5a1.5 1.5 0 0 0-1.5 1.5v1.5a1.5 1.5 0 0 0 3 0V21a1.5 1.5 0 0 0-1.5-1.5zM0 12a1.5 1.5 0 0 0 1.5 1.5H3a1.5 1.5 0 0 0 0-3H1.5A1.5 1.5 0 0 0 0 12zm19.5 0a1.5 1.5 0 0 0 1.5 1.5h1.5a1.5 1.5 0 0 0 0-3H21a1.5 1.5 0 0 0-1.5 1.5zM3.515 5.636a1.5 1.5 0 1 1 2.084-2.158l.037.037 1.06 1.06a1.5 1.5 0 1 1-2.083 2.159l-.037-.037-1.062-1.061zm13.788 13.789a1.5 1.5 0 1 1 2.121-2.122l1.061 1.061a1.5 1.5 0 1 1-2.084 2.158l-.037-.037-1.06-1.06zm-13.788 1.06a1.5 1.5 0 0 0 2.12 0l1.062-1.06a1.5 1.5 0 0 0-2.122-2.122l-1.06 1.061a1.5 1.5 0 0 0 0 2.121zM17.303 6.697a1.5 1.5 0 0 0 2.121 0l1.061-1.06a1.5 1.5 0 1 0-2.121-2.122l-1.06 1.06a1.5 1.5 0 0 0 0 2.121v.001zM12 18a6 6 0 1 0-6-6 6 6 0 0 0 6 6z" /></svg>);

package/bpk-component-icon/sm/wifi.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M12 6.688A17.987 17.987 0 0 0 2.465 9.38a.658.658 0 0 1-.845-.12L.556 8.044a.727.727 0 0 1 .152-1.098l.019-.012A21.283 21.283 0 0 1 12 3.75a21.291 21.291 0 0 1 11.274 3.183l.02.012a.727.727 0 0 1 .15 1.098l-1.062 1.218a.658.658 0 0 1-.844.12A18.002 18.002 0 0 0 12 6.687zm-6.444 7.083a.787.787 0 0 0 .968.161 11.637 11.637 0 0 1 10.954.001.787.787 0 0 0 .968-.162l1.007-1.153a.717.717 0 0 0-.171-1.1 14.949 14.949 0 0 0-14.562 0 .716.716 0 0 0-.171 1.1l1.006 1.153zm3.82 4.386l1.52 1.62a1.526 1.526 0 0 0 2.209 0l1.52-1.62a1.139 1.139 0 0 0-.183-1.835 5.497 5.497 0 0 0-4.883 0 1.139 1.139 0 0 0-.183 1.835z" /></svg>);

package/bpk-component-icon/sm/window--reduce.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M4.5 7.5a3 3 0 0 1 3-3H12a1.5 1.5 0 0 0 0-3H7.5a6 6 0 0 0-6 6v9a6 6 0 0 0 6 6h9a6 6 0 0 0 6-6V12a1.5 1.5 0 0 0-3 0v4.5a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3z" /><path d="M17.56 8.56l-4.939 4.94H15a1.5 1.5 0 0 1 0 3H8.996a1.495 1.495 0 0 1-1.053-.436l-.007-.006A1.496 1.496 0 0 1 7.5 15V9a1.5 1.5 0 0 1 3 0v2.379l4.94-4.94a1.5 1.5 0 0 1 2.12 2.122z" /></svg>);

package/bpk-component-icon/sm/window.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M19.5 1.5h-15a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-15a3 3 0 0 0-3-3zm0 16.5a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V9A1.5 1.5 0 0 1 6 7.5h12A1.5 1.5 0 0 1 19.5 9z" /></svg>);

package/bpk-component-icon/sm/world--amer.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M12 1.5c5.799 0 10.5 4.702 10.5 10.5 0 5.8-4.701 10.5-10.5 10.5S1.5 17.8 1.5 12C1.5 6.203 6.201 1.5 12 1.5zM5.232 8.764a7.5 7.5 0 0 0 7.225 10.723c.082-.359.098-.712-.086-1.018a1.44 1.44 0 0 0-.42-.417l-.168-.114c-.198-.134-.397-.268-.538-.456a1.872 1.872 0 0 1-.142-1.496l.082-.208a3.559 3.559 0 0 0 .343-1.721 5.358 5.358 0 0 1-1.85-.496 4.327 4.327 0 0 1-.76-.56l-.236-.211c-.4-.362-.798-.722-1.298-.906a2.203 2.203 0 0 1-.794-.35 1.438 1.438 0 0 1-.215-.299l-1.04-2.26-.103-.21zm8.36-4.094l.163.173c.341.382.64.804.886 1.258a5.28 5.28 0 0 0-2.954 2.472 1.223 1.223 0 0 1-.208.416l-.069.065c-.051.046-.103.092-.129.155a.446.446 0 0 0-.01.192l.025.093c.099.354.208.704.328 1.051-.425.248-1.051.46-1.334.057a.885.885 0 0 1-.12-.29l-.037-.161c-.052-.244-.102-.475-.325-.533a.62.62 0 0 0-.202 0l-1.248.307a4.169 4.169 0 0 0-.072 1.944c.765-.115 1.698-.164 2.15.464.063.089.118.19.17.296l.074.16c.16.343.315.679.665.707.19-.006.375-.06.54-.156a3.46 3.46 0 0 1 3.285.283c.277.258.627.424 1.002.478l.077-.004c.113-.007.23-.014.308.063a.5.5 0 0 1 .085.3c.07.521.646.814 1.166.893l.228.028.435.04.135.02.002-.005.056.008A7.503 7.503 0 0 0 13.591 4.67z" /></svg>);

package/bpk-component-icon/sm/world--apac.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5zm1.83 17.489l-1.902.51.072.001c.908 0 1.777-.161 2.583-.457l-.038-.037a.871.871 0 0 0-.714-.017zm.446-14.137l.02.098.059.125.07.12c.043.074.087.147.12.226a.925.925 0 0 1-.412 1.135l-1.149-1.343a1.57 1.57 0 0 0-.429.878c.003.112.018.222.045.33l.597 1.954c-.904.388-1.757.888-2.537 1.488a.151.151 0 0 0-.044.25l.66 1.023c.062.078.1.171.11.27a.414.414 0 0 1-.099.25c-.349.381-.9.503-1.376.303a3.165 3.165 0 0 1-.984-.683l-.2-.226a17.683 17.683 0 0 1-1.391-1.722 1.06 1.06 0 0 0-.86.536c-.17.309-.287.645-.345.993l-.672 2.96c-.172-.076-.315-.246-.45-.435l-.102-.143a2.662 2.662 0 0 0-.363-.452 7.498 7.498 0 0 0 6.488 6.651l.003-.368a5.285 5.285 0 0 0-.06-.674c-.068-.452.05-.912.325-1.276.35-.28.757-.478 1.194-.578a3.245 3.245 0 0 0 1.645-1.425l.889.049a22.8 22.8 0 0 1 1.599-.044l.8.02c.08-.005.16.015.229.055a.441.441 0 0 1 .133.279c.069.31.17.614.3.903a7.503 7.503 0 0 0-3.812-11.527z" /></svg>);

package/bpk-component-icon/sm/world--emea.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5zm-.55 3.02l-.097.008-.327.035a7.501 7.501 0 0 0 .649 14.93L12 19.5l.184-.002-.034-.476-.015-.475c0-.172-.074-.233-.175-.262l-.064-.015-.145-.024c-.104-.02-.206-.055-.275-.16l-.044-.093-.096-.285c-.098-.285-.203-.471-.56-.502a1.17 1.17 0 0 1-.345-.075l-.072-.032-.113-.06c-.102-.052-.202-.067-.493.046a2.09 2.09 0 0 1-2.269-.742 4.497 4.497 0 0 1-.844-2.37c.006-.275.09-.542.242-.77.044-.088.143-.17.26-.248l.121-.075.24-.14.104-.065.084-.063.305-.258c.377-.326.663-.613.803-1.097l.051-.22 2.1-.087.32.113c.86.26 1.81.201 2.75.062l.352-.055 1.358-.24.083-.081c.277-.352-.055-.982-.52-1.128a4.627 4.627 0 0 0-1.57.033c-.479.02-1.049-.177-1.2-.606l-.032-.136-.007-.08-.008-.176c-.007-.124-.03-.24-.126-.31a.444.444 0 0 0-.41-.002c-.54.263-1.057.57-1.547.916a1.78 1.78 0 0 1-1.521.242l-.19-.068.056-1.017.08-.079a.786.786 0 0 1 .325-.13l.125-.022.287-.036c.254-.034.473-.092.522-.325a1.742 1.742 0 0 0-.022-.378c-.003-.273.175-.458.413-.614l.124-.075.529-.287.123-.075c.239-.156.418-.34.417-.613a2.06 2.06 0 0 0-.199-.612 1.6 1.6 0 0 1-.038-.291v-.145l.026-.214zm6.338 7.207l-1.327.54a.451.451 0 0 0-.28.217.428.428 0 0 0 .023.28 5.174 5.174 0 0 0 2.513 2.574 7.17 7.17 0 0 0 .4-.968.643.643 0 0 1-.175-.043.72.72 0 0 1-.26-.31 9.735 9.735 0 0 1-.894-2.29zM9.658 5.05c.175-.026.331.207.46.482l.053.12.108.273.113.304.026.062.028.045c.004.004.008.005.01.004-.334.104-.664.22-.99.35l-.484.204-.316-.367-.02-.042-.008-.047.027-.058.11-.118.07-.096.072-.114.321-.555.086-.135c.114-.17.227-.297.334-.312z" /></svg>);

package/bpk-component-icon/src/BpkIcon.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-icon--align-to-button{vertical-align:text-bottom}.bpk-icon--align-to-large-button{margin-top:.1875rem;vertical-align:top}html[dir='rtl'] .bpk-icon--rtl-support{transform:scaleX(-1)}

package/bpk-component-icon/src/BpkIcon.module.scss

@@ -0,0 +1,33 @@
+/*
+ * 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-icon {
+  &--align-to-button {
+    @include bpk-icon-sm--align-to-button;
+  }
+
+  &--align-to-large-button {
+    @include bpk-icon-lg--align-to-large-button;
+  }
+
+  &--rtl-support {
+    @include bpk-icon--rtl-support;
+  }
+}

package/bpk-component-icon/src/classNameModifierHOCFactory.js

@@ -0,0 +1,53 @@
+/*
+ * 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 { wrapDisplayName } from 'bpk-react-utils';
+
+export default (displayName, classNamesToAdd = []) =>
+  (ComposedComponent) => {
+    const ClassNameModifierHOC = (props) => {
+      let classNames = [];
+      const { className, ...rest } = props;
+
+      if (className) {
+        classNames.push(className);
+      }
+      classNames = classNamesToAdd.length
+        ? classNames.concat(classNamesToAdd)
+        : classNames;
+
+      return <ComposedComponent className={classNames.join(' ')} {...rest} />;
+    };
+
+    ClassNameModifierHOC.propTypes = {
+      className: PropTypes.string,
+    };
+
+    ClassNameModifierHOC.defaultProps = {
+      className: null,
+    };
+
+    ClassNameModifierHOC.displayName = wrapDisplayName(
+      ComposedComponent,
+      displayName,
+    );
+
+    return ClassNameModifierHOC;
+  };

package/bpk-component-icon/src/withAlignment.js

@@ -0,0 +1,47 @@
+/*
+ * 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 { wrapDisplayName } from 'bpk-react-utils';
+
+export default function withAlignment(Component, objectHeight, subjectHeight) {
+  const WithAlignment = (props) => {
+    const objectHeightDecimal = `${objectHeight}`.replace('rem', '');
+    const subjectHeightDecimal = `${subjectHeight}`.replace('rem', '');
+    const marginTopCalculated = `${
+      Math.max(0, objectHeightDecimal - subjectHeightDecimal) / 2
+    }rem`;
+
+    return (
+      <span
+        style={{
+          lineHeight: subjectHeight,
+          display: 'inline-block',
+          marginTop: marginTopCalculated,
+          verticalAlign: 'top',
+        }}
+      >
+        <Component {...props} />
+      </span>
+    );
+  };
+
+  WithAlignment.displayName = wrapDisplayName(Component, 'withAlignment');
+
+  return WithAlignment;
+}

package/bpk-component-icon/src/withDescription.js

@@ -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.
+ */
+/* @flow strict */
+
+import React, { type AbstractComponent } from 'react';
+import { cssModules, wrapDisplayName } from 'bpk-react-utils';
+
+import STYLES from './withDescription.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+// TODO: Fix flow config. This should receive the component config as a parametized type
+export default function withDescription(
+  Component: AbstractComponent<any>,
+  description: string,
+): AbstractComponent<any> {
+  const WithDescription = (props) => (
+    <span>
+      <Component {...props} />
+      <span className={getClassName('bpk-icon-description')}>
+        {description}
+      </span>
+    </span>
+  );
+
+  WithDescription.displayName = wrapDisplayName(Component, 'withDescription');
+
+  return WithDescription;
+}

package/bpk-component-icon/src/withDescription.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-icon-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-icon/src/withDescription.module.scss

@@ -0,0 +1,22 @@
+/*
+ * 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-icon-description {
+  @include bpk-visually-hidden;
+}

package/bpk-component-icon/src/withRtlSupport.js

@@ -0,0 +1,28 @@
+/*
+ * 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 { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkIcon.module.scss';
+import classNameModifierHOCFactory from './classNameModifierHOCFactory';
+
+const getClassName = cssModules(STYLES);
+
+export default classNameModifierHOCFactory('withRtlSupport', [
+  getClassName('bpk-icon--rtl-support'),
+]);

package/bpk-component-image/README.md

@@ -0,0 +1,142 @@
+# bpk-component-image
+
+> Backpack image component.
+
+## Installation
+
+```sh
+npm install bpk-component-image --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkImage from 'bpk-component-image';
+import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+export default () => (
+  <BpkImage
+    altText="image description"
+    aspectRatio={816 / 544}
+    src="./path/to/image_1640.jpg"
+  />
+);
+```
+
+## Accompanying HOCS
+
+### withLazyLoading
+
+`withLazyLoading` is a HOC which adds an `inView` prop to components.
+This boolean prop can be used to determine if the component has been brought into view within a user's browser window.
+The `BpkImage` component will only load images if `inView` is true.
+Using this HOC can make pages load faster and prevent data being used to display images which are never seen by the user.
+
+```js
+import BpkImage, { withLazyLoading, withLoadingBehavior } from 'bpk-component-image';
+import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// Support for SSR
+const documentIfExists = typeof window !== 'undefined' ? document : null;
+// withLazyLoading will not use document when rendered server side so it's safe
+// pass null.
+const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
+
+export default () => (
+  <LazyLoadedImage
+    altText="image description"
+    aspectRatio={816 / 544}
+    src="./path/to/image_1640.jpg"
+  />
+);
+```
+
+### withLoadingBehavior
+
+`withLoadingBehavior` is a HOC which provides `loading` state for `BpkImage`. This allows the component to have different behaviour before and after loading completes.
+When the `loading` prop is set true, a spinner will be displayed. When this changes to false, the spinner will fade away and the loaded image and content will fade into view.
+
+```js
+import BpkImage, { BpkBackgroundImage, withLazyLoading, withLoadingBehavior } from 'bpk-component-image';
+import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+const FadingImage = withLoadingBehavior(BpkImage);
+const FadingBackgroundImage = withLoadingBehavior(BpkBackgroundImage);
+
+export default () => (
+  <div>
+    <FadingImage
+      altText="image description"
+      aspectRatio={816 / 544}
+      src="./path/to/image_1640.jpg"
+    />
+    <FadingBackgroundImage
+      altText="image description"
+      aspectRatio={816 / 544}
+      src="./path/to/image_1640.jpg"
+      imageStyle={{
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        backgroundPosition: '50% 50%',
+      }}
+    />
+  </div>
+);
+```
+
+### All together now
+
+Combining `withLazyLoading` and `withLoadingBehavior` gives us a lazily loaded image that will show a spinner while the image loads.
+
+```js
+import BpkImage, { withLazyLoading, withLoadingBehavior } from 'bpk-component-image';
+import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+const documentIfExists = typeof window !== 'undefined' ? document : null;
+const FadingLazyLoadedImage = withLoadingBehavior(withLazyLoading(BpkImage, documentIfExists));
+
+export default () => (
+  <FadingLazyLoadedImage
+    altText="image description"
+    aspectRatio={816 / 544}
+    src="./path/to/image_1640.jpg"
+  />
+);
+```
+
+## Props
+
+| Property                  | PropType                    | Required | Default Value             |
+| ------------------------- | --------------------------- | -------- | ------------------------- |
+| altText                   | string                      | true     | -                         |
+| src                       | string                      | true     | -                         |
+| aspectRatio               | number                      | true     | -                         |
+| borderRadiusStyle         | oneOf(BORDER_RADIUS_STYLES) | false    | BORDER_RADIUS_STYLES.none |
+| className                 | string                      | false    | null                      |
+| inView                    | bool                        | false    | true                      |
+| loading                   | bool                        | false    | false                     |
+| onLoad                    | func                        | false    | null                      |
+| style                     | object                      | false    | {}                        |
+| suppressHydrationWarnings | bool                        | false    | false                     |
+
+Note: The `aspectRatio` prop should be calculated as `width/height` of the original src image. It is used by the component to preserve space on screen while the image loads.
+
+Note: All [standard `img` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes) including `srcSet` are also supported.
+
+## BpkBackgroundImage
+
+The background image component is useful for setting background images in CSS that can then contain other elements. It supports the same HOCs as `BpkImage`.
+
+### BpkBackgroundImage props
+
+| Property    | PropType | Required | Default Value |
+| ----------- | -------- | -------- | ------------- |
+| src         | string   | true     | -             |
+| aspectRatio | number   | true     | -             |
+| className   | string   | false    | null          |
+| inView      | bool     | false    | true          |
+| loading     | bool     | false    | false         |
+| onLoad      | func     | false    | null          |
+| style       | object   | false    | {}            |
+| imageStyle  | object   | false    | {}            |