@skyscanner/backpack-web 0.0.1

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

@@ -0,0 +1,23 @@
+/*
+ * 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 BpkThemeToggle from './src/BpkThemeToggle';
+import updateOnThemeChange from './src/updateOnThemeChange';
+
+export default BpkThemeToggle;
+export { updateOnThemeChange };

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

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-theme-toggle",
+  "version": "3.1.0",
+  "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": "^5.0.0",
+    "bpk-component-label": "^5.1.0",
+    "bpk-component-select": "^5.1.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "konami": "^1.6.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -0,0 +1,120 @@
+/*
+ * 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 Konami from 'konami';
+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 = 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.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedTheme: '',
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+    this.easterEgg = new Konami(() => {
+      this.konamiInterval = setInterval(this.cycleTheme, 200);
+    });
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+
+    if (this.konamiInterval) {
+      clearInterval(this.konamiInterval);
+    }
+  }
+
+  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]);
+  };
+
+  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>
+    );
+  }
+}
+
+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;
+  }
+}

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

@@ -0,0 +1,274 @@
+/*
+ * 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 {
+  horizontalNavLinkColor,
+  horizontalNavLinkHoverColor,
+  horizontalNavLinkActiveColor,
+  calendarDayHoverColor,
+  calendarDayActiveColor,
+  colorSkyGrayTint02,
+  colorSkyGrayTint06,
+  colorWhite,
+  colorMonteverde,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+const generateTheme = ({
+  docsSidebarBackground,
+  docsSidebarLink,
+  docsSidebarLinkBorder,
+  docsSidebarSelectedArrowColor,
+  fontSize,
+  primaryColor300,
+  primaryColor500,
+  primaryColor600,
+  primaryColor700,
+  secondaryColor500,
+  secondaryColor600,
+  secondaryColor700,
+  themeName,
+}) => ({
+  themeName,
+
+  primaryColor: primaryColor500,
+  logoFillColor: primaryColor500,
+
+  accordionActiveColor: primaryColor700,
+  accordionColor: primaryColor500,
+  accordionHoverColor: primaryColor600,
+
+  badgeBackgroundColor: primaryColor500,
+  badgeSuccessBackgroundColor: secondaryColor500,
+  badgeDestructiveBackgroundColor: colorSkyGrayTint02,
+
+  bannerAlertPrimaryColor: colorMonteverde,
+  bannerAlertSuccessColor: secondaryColor500,
+  bannerAlertWarnColor: 'orange',
+  bannerAlertErrorColor: primaryColor500,
+
+  barchartBarBackgroundColor: primaryColor300,
+  barchartBarHoverBackgroundColor: primaryColor500,
+  barchartBarActiveBackgroundColor: primaryColor600,
+  barchartBarSelectedBackgroundColor: primaryColor700,
+
+  blockquoteBarColor: primaryColor500,
+
+  buttonFontSize: fontSize,
+
+  buttonPrimaryTextColor: colorWhite,
+  buttonPrimaryHoverTextColor: colorWhite,
+  buttonPrimaryActiveTextColor: colorWhite,
+  buttonPrimaryGradientStartColor: secondaryColor500,
+  buttonPrimaryGradientEndColor: secondaryColor600,
+  buttonPrimaryBackgroundColor: secondaryColor600,
+  buttonPrimaryHoverBackgroundColor: secondaryColor600,
+  buttonPrimaryActiveBackgroundColor: secondaryColor700,
+
+  buttonSecondaryTextColor: primaryColor500,
+  buttonSecondaryHoverTextColor: primaryColor600,
+  buttonSecondaryActiveTextColor: primaryColor700,
+  buttonSecondaryBorderColor: colorSkyGrayTint06,
+  buttonSecondaryHoverBorderColor: primaryColor600,
+  buttonSecondaryActiveBorderColor: primaryColor700,
+  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: colorSkyGrayTint06,
+  buttonDestructiveHoverBorderColor: secondaryColor500,
+  buttonDestructiveActiveBorderColor: secondaryColor500,
+  buttonDestructiveBackgroundColor: colorWhite,
+  buttonDestructiveHoverBackgroundColor: colorWhite,
+  buttonDestructiveActiveBackgroundColor: colorWhite,
+
+  chipPrimarySelectedBackgroundColor: primaryColor500,
+  chipPrimarySelectedHoverBackgroundColor: primaryColor600,
+  chipPrimarySelectedActiveBackgroundColor: primaryColor700,
+  chipPrimarySelectedTextColor: colorWhite,
+
+  chipSuccessSelectedBackgroundColor: secondaryColor500,
+  chipSuccessSelectedHoverBackgroundColor: secondaryColor600,
+  chipSuccessSelectedActiveBackgroundColor: secondaryColor700,
+  chipSuccessSelectedTextColor: colorWhite,
+
+  chipLightSelectedBackgroundColor: primaryColor500,
+  chipLightSelectedHoverBackgroundColor: primaryColor600,
+  chipLightSelectedActiveBackgroundColor: primaryColor700,
+  chipLightSelectedTextColor: colorWhite,
+
+  fieldsetLabelTextColor: secondaryColor500,
+
+  formValidationIconFill: secondaryColor500,
+  formValidationTextColor: secondaryColor500,
+
+  inputInvalidBorderColor: secondaryColor500,
+
+  linkColor: primaryColor300,
+  linkHoverColor: primaryColor500,
+  linkActiveColor: primaryColor600,
+  linkVisitedColor: primaryColor700,
+
+  linkAlternateColor: colorWhite,
+  linkAlternateHoverColor: colorWhite,
+  linkAlternateActiveColor: colorSkyGrayTint06,
+  linkAlternateVisitedColor: colorWhite,
+
+  horizontalNavBarSelectedColor: primaryColor500,
+  horizontalNavLinkSelectedColor: primaryColor500,
+  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: calendarDayHoverColor,
+  calendarDateTextActiveColor: calendarDayActiveColor,
+  calendarDateTextFocusColor: primaryColor500,
+  calendarDateTextSelectedColor: colorWhite,
+  calendarDateSelectedBackgroundColor: primaryColor700,
+  calendarDateFocusedBorderColor: primaryColor500,
+  calendarNudgerIconColor: primaryColor500,
+  calendarNudgerIconHoverColor: primaryColor600,
+  calendarNudgerIconActiveColor: primaryColor700,
+
+  checkboxCheckedColor: primaryColor700,
+  radioCheckedColor: primaryColor700,
+  switchCheckedColor: primaryColor700,
+
+  ratingHighTextColor: 'black',
+  ratingHighColor: primaryColor500,
+  ratingMediumTextColor: colorWhite,
+  ratingMediumColor: secondaryColor500,
+  ratingLowColor: colorSkyGrayTint02,
+
+  iconMarkerDefaultBackgroundColor: primaryColor500,
+  iconMarkerDefaultSelectedColor: primaryColor500,
+  iconMarkerDefaultDisabledColor: primaryColor700,
+  iconMarkerDefaultDisabledBackgroundColor: primaryColor300,
+
+  priceMarkerBackgroundColor: primaryColor700,
+
+  priceMarkerSelectedBorderColor: primaryColor700,
+  priceMarkerSelectedColor: primaryColor700,
+
+  priceMarkerViewedBackgroundColor: primaryColor300,
+  priceMarkerViewedBorderColor: primaryColor300,
+  priceMarkerViewedColor: colorWhite,
+
+  skipLinkBackgroundColor: secondaryColor500,
+
+  navigationBarIconButtonColor: colorWhite,
+  navigationBarIconButtonHoverColor: colorWhite,
+  navigationBarIconButtonActiveColor: colorWhite,
+  navigationBarButtonLinkColor: colorWhite,
+  navigationBarButtonLinkHoverColor: colorWhite,
+  navigationBarButtonLinkActiveColor: colorWhite,
+  navigationBarButtonLinkVisitedColor: colorWhite,
+  navigationBarTitleColor: colorWhite,
+  navigationBarBackgroundColor: primaryColor500,
+  docsSidebarBackground,
+  docsSidebarLink,
+  docsSidebarLinkBorder,
+  docsSidebarSelectedArrowColor,
+});
+
+const londonTheme = {
+  primaryColor300: '#F28494',
+  primaryColor500: '#ED1B28',
+  primaryColor600: '#D11622',
+  primaryColor700: '#B1121C',
+  secondaryColor300: '#6889AB',
+  secondaryColor500: '#013A76',
+  secondaryColor600: '#002F61',
+  secondaryColor700: '#00254B',
+  fontSize: '1.2rem',
+  docsSidebarBackground: '#013A76',
+  docsSidebarLink: '#6889AB',
+  docsSidebarLinkBorder: '#6889AB',
+  docsSidebarSelectedArrowColor: '#ED1B28',
+  themeName: 'London',
+};
+
+const hongKongTheme = {
+  primaryColor300: '#108685',
+  primaryColor500: '#006463',
+  primaryColor600: '#024D4D',
+  primaryColor700: '#013838',
+  secondaryColor300: '#686868',
+  secondaryColor500: '#4C4C4C',
+  secondaryColor600: '#3C3C3C',
+  secondaryColor700: '#2A2A2A',
+  fontSize: '1.2rem',
+  docsSidebarBackground: '#4C4C4C',
+  docsSidebarLink: '#686868',
+  docsSidebarLinkBorder: '#686868',
+  docsSidebarSelectedArrowColor: '#108685',
+  themeName: 'HongKong',
+};
+
+const dohaTheme = {
+  primaryColor300: '#BF3671',
+  primaryColor500: '#9B104C',
+  primaryColor600: '#7F083B',
+  primaryColor700: '#5E072C',
+  secondaryColor300: '#ffd54f',
+  secondaryColor500: '#ffc107',
+  secondaryColor600: '#ffb300',
+  secondaryColor700: '#ffa000',
+  fontSize: '1.2rem',
+  docsSidebarBackground: '#5E072C',
+  docsSidebarLink: '#BF3671',
+  docsSidebarLinkBorder: '#BF3671',
+  docsSidebarSelectedArrowColor: '#BF3671',
+  themeName: 'Doha',
+};
+
+const bpkCustomThemes = {
+  London: generateTheme(londonTheme),
+  'Hong Kong': generateTheme(hongKongTheme),
+  Doha: generateTheme(dohaTheme),
+};
+
+export default bpkCustomThemes;

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

@@ -0,0 +1,73 @@
+/*
+ * 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';
+import { wrapDisplayName } from 'bpk-react-utils';
+
+import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
+
+const updateOnThemeChange = (EnhancedComponent) => {
+  class UpdateOnThemeChange extends Component {
+    constructor() {
+      super();
+      this.state = {
+        theme: null,
+      };
+    }
+
+    componentDidMount() {
+      getHtmlElement().addEventListener(
+        THEME_CHANGE_EVENT,
+        this.onThemeChange,
+        false,
+      );
+    }
+
+    componentWillUnmount() {
+      getHtmlElement().removeEventListener(
+        THEME_CHANGE_EVENT,
+        this.onThemeChange,
+        false,
+      );
+    }
+
+    onThemeChange = (e) => {
+      const { theme } = e.detail;
+      this.setState({ theme });
+      this.forceUpdate();
+    };
+
+    render() {
+      return <EnhancedComponent theme={this.state.theme} {...this.props} />;
+    }
+  }
+
+  UpdateOnThemeChange.displayName = wrapDisplayName(
+    EnhancedComponent,
+    'updateOnThemeChange',
+  );
+
+  UpdateOnThemeChange.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return UpdateOnThemeChange;
+};
+
+export default updateOnThemeChange;

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

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+const THEME_CHANGE_EVENT = 'bpkchangetheme';
+
+const getHtmlElement = () =>
+  typeof document !== 'undefined' ? document.querySelector('html') : {};
+
+export { THEME_CHANGE_EVENT, getHtmlElement };

package/bpk-component-ticket/README.md

@@ -0,0 +1,38 @@
+# bpk-component-ticket
+
+> Backpack ticket component.
+
+## Installation
+
+```sh
+npm install bpk-component-ticket --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkTicket from 'bpk-component-ticket';
+
+export default () => (
+  <BpkTicket stub="Lorem ipsum dolor sit amet.">
+    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.
+  </BpkTicket>
+);
+```
+
+## Props
+
+| Property      | PropType | Required | Default Value |
+| ------------- | -------- | -------- | ------------- |
+| children      | node     | true     | -             |
+| stub          | node     | true     | -             |
+| href          | string   | false    | null          |
+| padded        | bool     | false    | true          |
+| vertical      | bool     | false    | false         |
+| stubProps     | object   | false    | {}            |
+| stubClassName | string   | false    | null          |
+| withNotches   | bool     | false    | true          |
+