@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

package/bpk-component-textarea/src/BpkTextarea.js

@@ -1,67 +1,75 @@
-"use strict";
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+/* @flow strict */
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+import PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
 
-var _react = _interopRequireDefault(require("react"));
+import STYLES from './BpkTextarea.module.scss';
 
-var _bpkReactUtils = require("../../bpk-react-utils");
+const getClassName = cssModules(STYLES);
 
-const _excluded = ["className", "large", "valid"];
-
-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; }
-
-var STYLES = {
-  "bpk-textarea": "BpkTextarea-module__bpk-textarea___2kRs1",
-  "bpk-textarea--invalid": "BpkTextarea-module__bpk-textarea--invalid___UFoYH",
-  "bpk-textarea--large": "BpkTextarea-module__bpk-textarea--large___3EkKm",
-  "bpk-keyframe-spin": "BpkTextarea-module__bpk-keyframe-spin___2w6Pp"
+type Props = {
+  id: string,
+  name: string,
+  value: string,
+  className: ?string,
+  valid: ?boolean,
+  large: ?boolean,
 };
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-
-const BpkTextarea = props => {
-  const {
-    className,
-    large,
-    valid
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded); // Explicit check for false primitive value as undefined is
-  // treated as neither valid nor invalid
 
+const BpkTextarea = (props: Props) => {
+  const { className, large, valid, ...rest } = props;
 
+  // Explicit check for false primitive value as undefined is
+  // treated as neither valid nor invalid
   const isInvalid = valid === false;
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _react.default.createElement("textarea", _extends({
-      className: getClassName('bpk-textarea', isInvalid && 'bpk-textarea--invalid', large && 'bpk-textarea--large', className),
-      "aria-invalid": isInvalid
-    }, rest))
+    <textarea
+      className={getClassName(
+        'bpk-textarea',
+        isInvalid && 'bpk-textarea--invalid',
+        large && 'bpk-textarea--large',
+        className,
+      )}
+      aria-invalid={isInvalid}
+      {...rest}
+    />
   );
 };
 
 BpkTextarea.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  valid: _propTypes.default.bool,
-  large: _propTypes.default.bool
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  valid: PropTypes.bool,
+  large: PropTypes.bool,
 };
+
 BpkTextarea.defaultProps = {
   className: null,
   valid: null,
-  large: false
+  large: false,
 };
-var _default = BpkTextarea;
-exports.default = _default;
+
+export default BpkTextarea;

package/bpk-component-textarea/src/BpkTextarea.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-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-textarea::placeholder{color:#68697f}.bpk-textarea:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;border-color:#d1435b;border-color:var(--bpk-textarea-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-textarea--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}html[dir='rtl'] .bpk-textarea--invalid.bpk-textarea--large{padding-right:1rem;padding-left:2.5rem;background-position:right 1rem center}.bpk-textarea--large{min-height:6rem;padding-right:1rem;padding-left:1rem}.bpk-textarea--large.bpk-textarea--invalid{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-textarea--large.bpk-textarea--invalid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}

package/bpk-component-textarea/src/BpkTextarea.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-spacing-v2: true;
+
+.bpk-textarea {
+  @include bpk-textarea;
+
+  &--invalid {
+    @include bpk-textarea--invalid;
+  }
+
+  &--large {
+    @include bpk-textarea--large;
+  }
+}

package/bpk-component-textarea/src/themeAttributes.js

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

package/bpk-component-theme-toggle/README.md

@@ -0,0 +1,30 @@
+# bpk-component-theme-toggle
+
+> Backpack Theme Switcher component.
+
+## Installation
+
+```sh
+npm install bpk-component-theme-toggle --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkThemeToggle from 'bpk-component-theme-toggle';
+
+export default () => (
+  <BpkThemeToggle />
+);
+```
+
+## HOC usage
+
+```js
+import React from 'react';
+import { updateOnThemeChange } from 'bpk-component-theme-toggle';
+import BpkThemeProvider from 'bpk-theming';
+
+const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
+```

package/bpk-component-theme-toggle/index.js

@@ -1,22 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "updateOnThemeChange", {
-  enumerable: true,
-  get: function () {
-    return _updateOnThemeChange.default;
-  }
-});
-
-var _BpkThemeToggle = _interopRequireDefault(require("./src/BpkThemeToggle"));
-
-var _updateOnThemeChange = _interopRequireDefault(require("./src/updateOnThemeChange"));
-
-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 = _BpkThemeToggle.default;
-exports.default = _default;
+
+import BpkThemeToggle from './src/BpkThemeToggle';
+import updateOnThemeChange from './src/updateOnThemeChange';
+
+export default BpkThemeToggle;
+export { updateOnThemeChange };

package/bpk-component-theme-toggle/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "bpk-component-theme-toggle",
+  "version": "4.0.1",
+  "description": "Backpack theme toggle 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "bpk-component-label": "^6.0.1",
+    "bpk-component-select": "^6.0.1",
+    "bpk-mixins": "^31.4.0",
+    "bpk-react-utils": "^7.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -1,83 +1,46 @@
-"use strict";
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import BpkLabel from 'bpk-component-label';
+import BpkSelect from 'bpk-component-select';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkThemeToggle.module.scss';
+import bpkCustomThemes from './theming';
+import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkComponentLabel = _interopRequireDefault(require("../../bpk-component-label"));
-
-var _bpkComponentSelect = _interopRequireDefault(require("../../bpk-component-select"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _theming = _interopRequireDefault(require("./theming"));
-
-var _utils = require("./utils");
-
-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 _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; }
-
-var STYLES = {
-  "bpk-theme-toggle__label": "BpkThemeToggle-module__bpk-theme-toggle__label___Szcj1",
-  "bpk-keyframe-spin": "BpkThemeToggle-module__bpk-keyframe-spin___yCGRy"
-};
 const inputId = 'theme-select';
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-const availableThemes = Object.keys(_theming.default);
-
-const setTheme = theme => {
-  const htmlElement = (0, _utils.getHtmlElement)();
-  htmlElement.dispatchEvent(new CustomEvent(_utils.THEME_CHANGE_EVENT, {
-    detail: {
-      theme
-    }
-  }));
+const getClassName = cssModules(STYLES);
+const availableThemes = Object.keys(bpkCustomThemes);
+
+const setTheme = (theme) => {
+  const htmlElement = getHtmlElement();
+  htmlElement.dispatchEvent(
+    new CustomEvent(THEME_CHANGE_EVENT, { detail: { theme } }),
+  );
 };
 
-class BpkThemeToggle extends _react.default.Component {
+class BpkThemeToggle extends React.Component {
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "handleKeyDown", e => {
-      if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 't') {
-        this.cycleTheme();
-      }
-    });
-
-    _defineProperty(this, "handleChange", e => {
-      const selectedTheme = e.target.value;
-      this.setState({
-        selectedTheme
-      });
-      setTheme(_theming.default[selectedTheme]);
-    });
-
-    _defineProperty(this, "cycleTheme", () => {
-      let {
-        selectedTheme
-      } = this.state;
-      const selectedIndex = selectedTheme ? availableThemes.indexOf(selectedTheme) + 1 : 0;
-
-      if (selectedIndex >= availableThemes.length) {
-        selectedTheme = '';
-      } else {
-        selectedTheme = availableThemes[selectedIndex];
-      }
-
-      this.setState({
-        selectedTheme
-      });
-      setTheme(_theming.default[selectedTheme]);
-    });
-
     this.state = {
-      selectedTheme: ''
+      selectedTheme: '',
     };
   }
 
@@ -89,30 +52,61 @@ class BpkThemeToggle extends _react.default.Component {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  render() {
-    const _this$props = this.props,
-          rest = _extends({}, _this$props);
+  handleKeyDown = (e) => {
+    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 't') {
+      this.cycleTheme();
+    }
+  };
+
+  handleChange = (e) => {
+    const selectedTheme = e.target.value;
+    this.setState({ selectedTheme });
+    setTheme(bpkCustomThemes[selectedTheme]);
+  };
+
+  cycleTheme = () => {
+    let { selectedTheme } = this.state;
+    const selectedIndex = selectedTheme
+      ? availableThemes.indexOf(selectedTheme) + 1
+      : 0;
+    if (selectedIndex >= availableThemes.length) {
+      selectedTheme = '';
+    } else {
+      selectedTheme = availableThemes[selectedIndex];
+    }
+    this.setState({ selectedTheme });
+    setTheme(bpkCustomThemes[selectedTheme]);
+  };
 
-    return /*#__PURE__*/_react.default.createElement("div", rest, /*#__PURE__*/_react.default.createElement(_bpkComponentLabel.default, {
-      className: getClassName('bpk-theme-toggle__label'),
-      htmlFor: inputId
-    }, "Change theme"), /*#__PURE__*/_react.default.createElement(_bpkComponentSelect.default, {
-      id: inputId,
-      name: inputId,
-      value: this.state.selectedTheme,
-      onChange: this.handleChange
-    }, /*#__PURE__*/_react.default.createElement("option", {
-      value: "",
-      hidden: true
-    }, "Change theme"), /*#__PURE__*/_react.default.createElement("option", {
-      value: "skyscanner"
-    }, "None"), availableThemes.map(themeName => /*#__PURE__*/_react.default.createElement("option", {
-      key: themeName,
-      value: themeName
-    }, themeName))));
+  render() {
+    const { ...rest } = this.props;
+    return (
+      <div {...rest}>
+        <BpkLabel
+          className={getClassName('bpk-theme-toggle__label')}
+          htmlFor={inputId}
+        >
+          Change theme
+        </BpkLabel>
+        <BpkSelect
+          id={inputId}
+          name={inputId}
+          value={this.state.selectedTheme}
+          onChange={this.handleChange}
+        >
+          <option value="" hidden>
+            Change theme
+          </option>
+          <option value="skyscanner">None</option>
+          {availableThemes.map((themeName) => (
+            <option key={themeName} value={themeName}>
+              {themeName}
+            </option>
+          ))}
+        </BpkSelect>
+      </div>
+    );
   }
-
 }
 
-var _default = BpkThemeToggle;
-exports.default = _default;
+export default BpkThemeToggle;

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

package/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss

@@ -0,0 +1,25 @@
+/*
+ * 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-theme-toggle {
+  &__label {
+    @include bpk-visually-hidden;
+  }
+}