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

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": "3.1.13",
+  "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.0.0",
+    "bpk-component-label": "^5.1.12",
+    "bpk-component-select": "^5.1.12",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^6.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -1,81 +1,47 @@
-"use strict";
-
-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 _BpkThemeToggleModule = _interopRequireDefault(require("./BpkThemeToggle.css"));
-
-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; }
+/*
+ * 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';
 
 const inputId = 'theme-select';
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkThemeToggleModule.default);
-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: '',
     };
   }
 
@@ -87,30 +53,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.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;
+  }
+}

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

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -24,6 +15,18 @@ var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {
+  horizontalNavLinkColor,
+  horizontalNavLinkHoverColor,
+  horizontalNavLinkActiveColor,
+  calendarDayHoverColor,
+  calendarDayActiveColor,
+  colorSkyGrayTint02,
+  colorSkyGrayTint06,
+  colorWhite,
+  colorMonteverde,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
 const generateTheme = ({
   docsSidebarBackground,
   docsSidebarLink,
@@ -37,142 +40,178 @@ const generateTheme = ({
   secondaryColor500,
   secondaryColor600,
   secondaryColor700,
-  themeName
+  themeName,
 }) => ({
   themeName,
+
   primaryColor: primaryColor500,
   logoFillColor: primaryColor500,
+
   accordionActiveColor: primaryColor700,
   accordionColor: primaryColor500,
   accordionHoverColor: primaryColor600,
+
   badgeBackgroundColor: primaryColor500,
   badgeSuccessBackgroundColor: secondaryColor500,
-  badgeDestructiveBackgroundColor: _base.colorSkyGrayTint02,
-  bannerAlertPrimaryColor: _base.colorMonteverde,
+  badgeDestructiveBackgroundColor: colorSkyGrayTint02,
+
+  bannerAlertPrimaryColor: colorMonteverde,
   bannerAlertSuccessColor: secondaryColor500,
   bannerAlertWarnColor: 'orange',
   bannerAlertErrorColor: primaryColor500,
+
   barchartBarBackgroundColor: primaryColor300,
   barchartBarHoverBackgroundColor: primaryColor500,
   barchartBarActiveBackgroundColor: primaryColor600,
   barchartBarSelectedBackgroundColor: primaryColor700,
+
   blockquoteBarColor: primaryColor500,
+
   buttonFontSize: fontSize,
-  buttonPrimaryTextColor: _base.colorWhite,
-  buttonPrimaryHoverTextColor: _base.colorWhite,
-  buttonPrimaryActiveTextColor: _base.colorWhite,
+
+  buttonPrimaryTextColor: colorWhite,
+  buttonPrimaryHoverTextColor: colorWhite,
+  buttonPrimaryActiveTextColor: colorWhite,
   buttonPrimaryGradientStartColor: secondaryColor500,
   buttonPrimaryGradientEndColor: secondaryColor600,
   buttonPrimaryBackgroundColor: secondaryColor600,
   buttonPrimaryHoverBackgroundColor: secondaryColor600,
   buttonPrimaryActiveBackgroundColor: secondaryColor700,
+
   buttonSecondaryTextColor: primaryColor500,
   buttonSecondaryHoverTextColor: primaryColor600,
   buttonSecondaryActiveTextColor: primaryColor700,
-  buttonSecondaryBorderColor: _base.colorSkyGrayTint06,
+  buttonSecondaryBorderColor: colorSkyGrayTint06,
   buttonSecondaryHoverBorderColor: primaryColor600,
   buttonSecondaryActiveBorderColor: primaryColor700,
-  buttonSecondaryBackgroundColor: _base.colorWhite,
-  buttonSecondaryHoverBackgroundColor: _base.colorWhite,
-  buttonSecondaryActiveBackgroundColor: _base.colorWhite,
-  buttonFeaturedTextColor: _base.colorWhite,
-  buttonFeaturedHoverTextColor: _base.colorWhite,
-  buttonFeaturedActiveTextColor: _base.colorWhite,
+  buttonSecondaryBackgroundColor: colorWhite,
+  buttonSecondaryHoverBackgroundColor: colorWhite,
+  buttonSecondaryActiveBackgroundColor: colorWhite,
+
+  buttonFeaturedTextColor: colorWhite,
+  buttonFeaturedHoverTextColor: colorWhite,
+  buttonFeaturedActiveTextColor: colorWhite,
   buttonFeaturedGradientStartColor: primaryColor500,
   buttonFeaturedGradientEndColor: primaryColor600,
   buttonFeaturedBackgroundColor: primaryColor600,
   buttonFeaturedHoverBackgroundColor: primaryColor600,
   buttonFeaturedActiveBackgroundColor: primaryColor700,
+
   buttonDestructiveTextColor: secondaryColor500,
   buttonDestructiveHoverTextColor: secondaryColor600,
   buttonDestructiveActiveTextColor: secondaryColor700,
-  buttonDestructiveBorderColor: _base.colorSkyGrayTint06,
+  buttonDestructiveBorderColor: colorSkyGrayTint06,
   buttonDestructiveHoverBorderColor: secondaryColor500,
   buttonDestructiveActiveBorderColor: secondaryColor500,
-  buttonDestructiveBackgroundColor: _base.colorWhite,
-  buttonDestructiveHoverBackgroundColor: _base.colorWhite,
-  buttonDestructiveActiveBackgroundColor: _base.colorWhite,
+  buttonDestructiveBackgroundColor: colorWhite,
+  buttonDestructiveHoverBackgroundColor: colorWhite,
+  buttonDestructiveActiveBackgroundColor: colorWhite,
+
   chipPrimarySelectedBackgroundColor: primaryColor500,
   chipPrimarySelectedHoverBackgroundColor: primaryColor600,
   chipPrimarySelectedActiveBackgroundColor: primaryColor700,
-  chipPrimarySelectedTextColor: _base.colorWhite,
+  chipPrimarySelectedTextColor: colorWhite,
+
   chipSuccessSelectedBackgroundColor: secondaryColor500,
   chipSuccessSelectedHoverBackgroundColor: secondaryColor600,
   chipSuccessSelectedActiveBackgroundColor: secondaryColor700,
-  chipSuccessSelectedTextColor: _base.colorWhite,
+  chipSuccessSelectedTextColor: colorWhite,
+
   chipLightSelectedBackgroundColor: primaryColor500,
   chipLightSelectedHoverBackgroundColor: primaryColor600,
   chipLightSelectedActiveBackgroundColor: primaryColor700,
-  chipLightSelectedTextColor: _base.colorWhite,
+  chipLightSelectedTextColor: colorWhite,
+
   fieldsetLabelTextColor: secondaryColor500,
+
   formValidationIconFill: secondaryColor500,
   formValidationTextColor: secondaryColor500,
+
   inputInvalidBorderColor: secondaryColor500,
+
   linkColor: primaryColor300,
   linkHoverColor: primaryColor500,
   linkActiveColor: primaryColor600,
   linkVisitedColor: primaryColor700,
-  linkAlternateColor: _base.colorWhite,
-  linkAlternateHoverColor: _base.colorWhite,
-  linkAlternateActiveColor: _base.colorSkyGrayTint06,
-  linkAlternateVisitedColor: _base.colorWhite,
+
+  linkAlternateColor: colorWhite,
+  linkAlternateHoverColor: colorWhite,
+  linkAlternateActiveColor: colorSkyGrayTint06,
+  linkAlternateVisitedColor: colorWhite,
+
   horizontalNavBarSelectedColor: primaryColor500,
   horizontalNavLinkSelectedColor: primaryColor500,
-  horizontalNavLinkColor: _base.horizontalNavLinkColor,
-  horizontalNavLinkHoverColor: _base.horizontalNavLinkHoverColor,
-  horizontalNavLinkActiveColor: _base.horizontalNavLinkActiveColor,
+  horizontalNavLinkColor,
+  horizontalNavLinkHoverColor,
+  horizontalNavLinkActiveColor,
+
   selectInvalidBorderColor: secondaryColor500,
+
   spinnerPrimaryColor: primaryColor500,
+
   starRatingFilledColor: primaryColor500,
+
   sliderBarColor: primaryColor500,
+
   textareaInvalidBorderColor: secondaryColor500,
+
   paginationNudgerActiveColor: primaryColor500,
   paginationNudgerColor: primaryColor500,
   paginationNudgerHoverColor: primaryColor700,
   paginationSelectedBackgroundColor: primaryColor700,
+
   progressBarFillColor: primaryColor500,
+
   calendarDateTextColor: primaryColor500,
-  calendarDateTextHoverColor: _base.calendarDayHoverColor,
-  calendarDateTextActiveColor: _base.calendarDayActiveColor,
+  calendarDateTextHoverColor: calendarDayHoverColor,
+  calendarDateTextActiveColor: calendarDayActiveColor,
   calendarDateTextFocusColor: primaryColor500,
-  calendarDateTextSelectedColor: _base.colorWhite,
+  calendarDateTextSelectedColor: colorWhite,
   calendarDateSelectedBackgroundColor: primaryColor700,
   calendarDateFocusedBorderColor: primaryColor500,
   calendarNudgerIconColor: primaryColor500,
   calendarNudgerIconHoverColor: primaryColor600,
   calendarNudgerIconActiveColor: primaryColor700,
+
   checkboxCheckedColor: primaryColor700,
   radioCheckedColor: primaryColor700,
   switchCheckedColor: primaryColor700,
+
   ratingHighTextColor: 'black',
   ratingHighColor: primaryColor500,
-  ratingMediumTextColor: _base.colorWhite,
+  ratingMediumTextColor: colorWhite,
   ratingMediumColor: secondaryColor500,
-  ratingLowColor: _base.colorSkyGrayTint02,
+  ratingLowColor: colorSkyGrayTint02,
+
   iconMarkerDefaultBackgroundColor: primaryColor500,
   iconMarkerDefaultSelectedColor: primaryColor500,
   iconMarkerDefaultDisabledColor: primaryColor700,
   iconMarkerDefaultDisabledBackgroundColor: primaryColor300,
+
   priceMarkerBackgroundColor: primaryColor700,
+
   priceMarkerSelectedBorderColor: primaryColor700,
   priceMarkerSelectedColor: primaryColor700,
+
   priceMarkerViewedBackgroundColor: primaryColor300,
   priceMarkerViewedBorderColor: primaryColor300,
-  priceMarkerViewedColor: _base.colorWhite,
+  priceMarkerViewedColor: colorWhite,
+
   skipLinkBackgroundColor: secondaryColor500,
-  navigationBarIconButtonColor: _base.colorWhite,
-  navigationBarIconButtonHoverColor: _base.colorWhite,
-  navigationBarIconButtonActiveColor: _base.colorWhite,
-  navigationBarButtonLinkColor: _base.colorWhite,
-  navigationBarButtonLinkHoverColor: _base.colorWhite,
-  navigationBarButtonLinkActiveColor: _base.colorWhite,
-  navigationBarButtonLinkVisitedColor: _base.colorWhite,
-  navigationBarTitleColor: _base.colorWhite,
+
+  navigationBarIconButtonColor: colorWhite,
+  navigationBarIconButtonHoverColor: colorWhite,
+  navigationBarIconButtonActiveColor: colorWhite,
+  navigationBarButtonLinkColor: colorWhite,
+  navigationBarButtonLinkHoverColor: colorWhite,
+  navigationBarButtonLinkActiveColor: colorWhite,
+  navigationBarButtonLinkVisitedColor: colorWhite,
+  navigationBarTitleColor: colorWhite,
   navigationBarBackgroundColor: primaryColor500,
   docsSidebarBackground,
   docsSidebarLink,
   docsSidebarLinkBorder,
-  docsSidebarSelectedArrowColor
+  docsSidebarSelectedArrowColor,
 });
 
 const londonTheme = {
@@ -189,8 +228,9 @@ const londonTheme = {
   docsSidebarLink: '#6889AB',
   docsSidebarLinkBorder: '#6889AB',
   docsSidebarSelectedArrowColor: '#ED1B28',
-  themeName: 'London'
+  themeName: 'London',
 };
+
 const hongKongTheme = {
   primaryColor300: '#108685',
   primaryColor500: '#006463',
@@ -205,8 +245,9 @@ const hongKongTheme = {
   docsSidebarLink: '#686868',
   docsSidebarLinkBorder: '#686868',
   docsSidebarSelectedArrowColor: '#108685',
-  themeName: 'HongKong'
+  themeName: 'HongKong',
 };
+
 const dohaTheme = {
   primaryColor300: '#BF3671',
   primaryColor500: '#9B104C',
@@ -221,12 +262,13 @@ const dohaTheme = {
   docsSidebarLink: '#BF3671',
   docsSidebarLinkBorder: '#BF3671',
   docsSidebarSelectedArrowColor: '#BF3671',
-  themeName: 'Doha'
+  themeName: 'Doha',
 };
+
 const bpkCustomThemes = {
   London: generateTheme(londonTheme),
   'Hong Kong': generateTheme(hongKongTheme),
-  Doha: generateTheme(dohaTheme)
+  Doha: generateTheme(dohaTheme),
 };
-var _default = bpkCustomThemes;
-exports.default = _default;
+
+export default bpkCustomThemes;