@skyscanner/backpack-web 5.0.0 → 6.0.0-alpha.2

package/bpk-theming/src/BpkThemeProvider.js

@@ -1,30 +1,41 @@
-/*
- * 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, { Component } from 'react';
-import PropTypes from 'prop-types';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+const _excluded = ["children", "component", "style", "theme", "themeAttributes"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 uniq = (arr = []) => {
   const seen = {};
-  return arr.filter((item) => {
+  return arr.filter(item => {
     if (seen.hasOwnProperty[item]) {
       return false;
     }
+
     seen[item] = true;
     return true;
   });
@@ -34,14 +45,13 @@ const createStyle = (theme, themeAttributes) => {
   if (!theme) {
     return {};
   }
+
   const flattenedThemeAttributes = [].concat(...themeAttributes);
   let style = {};
   const missingThemeAttributes = [];
-  flattenedThemeAttributes.forEach((attribute) => {
+  flattenedThemeAttributes.forEach(attribute => {
     if (theme[attribute]) {
-      const cssName = attribute
-        .replace(/([A-Z])/g, (variable) => `-${variable.toLowerCase()}`)
-        .replace(/([0-9])/, (variable) => `-${variable.toLowerCase()}`);
+      const cssName = attribute.replace(/([A-Z])/g, variable => `-${variable.toLowerCase()}`).replace(/([0-9])/, variable => `-${variable.toLowerCase()}`);
       const value = theme[attribute];
       style[`--bpk-${cssName}`] = value;
     } else {
@@ -56,54 +66,65 @@ const createStyle = (theme, themeAttributes) => {
   return style;
 };
 
-class BpkThemeProvider extends Component {
+class BpkThemeProvider extends _react.Component {
   getChildContext() {
-    return { theme: this.props.theme };
+    return {
+      theme: this.props.theme
+    };
   }
 
   render() {
-    const {
+    const _this$props = this.props,
+          {
       children,
       component: WrapperComponent,
       style: userStyle,
       theme,
-      themeAttributes,
-      ...rest
-    } = this.props;
+      themeAttributes
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, _excluded);
 
     const dedupedThemeAttributes = uniq(themeAttributes);
     const style = createStyle(theme, dedupedThemeAttributes);
-
-    return (
-      <WrapperComponent style={{ ...userStyle, ...style }} {...rest}>
-        {children}
-      </WrapperComponent>
-    );
+    return /*#__PURE__*/_react.default.createElement(WrapperComponent, _extends({
+      style: _objectSpread(_objectSpread({}, userStyle), style)
+    }, rest), children);
   }
+
 }
 
 BpkThemeProvider.childContextTypes = {
-  theme: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  theme: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
+
 };
 
 const themeAttributesPropType = (props, propName, componentName) => {
-  const { theme } = props;
-  let { themeAttributes } = props;
+  const {
+    theme
+  } = props;
+  let {
+    themeAttributes
+  } = props;
+
   if (!theme) {
     return null;
-  }
-  // Validate types.
+  } // Validate types.
+
+
   if (!themeAttributes) {
     return new Error(`${componentName}: \`themeAttributes\` is required.`);
   }
+
   if (!Array.isArray(themeAttributes)) {
     return new Error(`${componentName}: \`themeAttributes\` must be an array.`);
   }
 
   themeAttributes = [].concat(...themeAttributes);
-  const extraneousThemeAttributes = { ...theme };
+
+  const extraneousThemeAttributes = _objectSpread({}, theme);
+
   const missingThemeAttributes = [];
-  themeAttributes.forEach((attribute) => {
+  themeAttributes.forEach(attribute => {
     if (theme[attribute]) {
       delete extraneousThemeAttributes[attribute];
     } else {
@@ -111,39 +132,37 @@ const themeAttributesPropType = (props, propName, componentName) => {
     }
   });
   const errors = [];
+
   if (missingThemeAttributes.length > 0) {
-    errors.push(
-      `${componentName}: To apply theming, the theme prop must include \`${themeAttributes.join(
-        ', ',
-      )}\` (missing \`${missingThemeAttributes.join(', ')}\`)`,
-    );
+    errors.push(`${componentName}: To apply theming, the theme prop must include \`${themeAttributes.join(', ')}\` (missing \`${missingThemeAttributes.join(', ')}\`)`);
   }
+
   if (Object.keys(extraneousThemeAttributes).length > 0) {
-    errors.push(
-      `${componentName}: Extraneous theme attributes supplied: \`${Object.keys(
-        extraneousThemeAttributes,
-      ).join(', ')}\`.`,
-    );
+    errors.push(`${componentName}: Extraneous theme attributes supplied: \`${Object.keys(extraneousThemeAttributes).join(', ')}\`.`);
   }
+
   if (errors.length > 0) {
     return new Error(errors.join('\n'));
   }
+
   return false;
 };
 
 BpkThemeProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  theme: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  themeAttributes: themeAttributesPropType, // eslint-disable-line react/require-default-props
+  children: _propTypes.default.node.isRequired,
+  theme: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  themeAttributes: themeAttributesPropType,
+  // eslint-disable-line react/require-default-props
   // (disabled because isRequired is inside the custom validator)
-  component: PropTypes.elementType,
-  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-};
+  component: _propTypes.default.elementType,
+  style: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
 
+};
 BpkThemeProvider.defaultProps = {
   theme: null,
   component: 'div',
-  style: null,
+  style: null
 };
-
-export default BpkThemeProvider;
+var _default = BpkThemeProvider;
+exports.default = _default;

package/bpk-theming/src/accessibility-test.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
+
+var _BpkThemeProvider = _interopRequireDefault(require("./BpkThemeProvider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+describe('BpkThemeProvider accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkThemeProvider.default, {
+      theme: {
+        color: _base.colorWhite
+      },
+      themeAttributes: ['color']
+    }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem Ipsum")));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "5.0.0",
+  "version": "6.0.0-alpha.2",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/{bpk-component-blockquote/src/BpkBlockquote.module.scss → react-version-test.js}

@@ -1,3 +1,9 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,15 +21,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-@import '~bpk-mixins/index';
-
-$bpk-spacing-v2: true;
-
-.bpk-blockquote {
-  @include bpk-blockquote;
-}
-
-.bpk-blockquote--extra-spacing {
-  @include bpk-blockquote--extra-spacing;
-}
+it('packages/* should be ^16.0.0', () => {
+  expect(_react.default.version).toMatch(/^16/);
+});

package/bpk-animate-height/README.md

@@ -1,55 +0,0 @@
-# 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
-
-```sh
-npm install bpk-animate-height --save-dev
-```
-
-## Usage
-
-```js
-import AnimateHeight from '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/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "bpk-animate-height",
-  "version": "4.1.11",
-  "description": "Animate height using CSS transitions.",
-  "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": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "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"
-  }
-}

package/bpk-component-accordion/README.md

@@ -1,124 +0,0 @@
-# bpk-component-accordion
-
-> Backpack accordion component.
-
-## Installation
-
-```sh
-npm install bpk-component-accordion --save-dev
-```
-
-## 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 '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 '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 'bpk-component-accordion';
-import { withAlignment } from 'bpk-component-icon';
-import StopsIcon from '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/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "bpk-component-accordion",
-  "version": "5.0.12",
-  "description": "Backpack accordion 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-component-icon": "^9.2.12",
-    "bpk-component-text": "^7.0.5",
-    "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-checkbox": "^4.1.13"
-  }
-}

package/bpk-component-accordion/src/BpkAccordion.module.scss

@@ -1,23 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '~bpk-mixins';
-
-.bpk-accordion {
-  margin: 0;
-}