@skyscanner/backpack-web 3.0.1 → 3.1.0

package/bpk-component-price/README.md

@@ -0,0 +1,35 @@
+# bpk-component-price
+
+> Backpack example component.
+
+## Installation
+
+```sh
+npm install bpk-component-price --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPrice, { SIZES } from 'bpk-component-price';
+
+export default () => (
+  <BpkPrice
+    size={SIZES.large}
+    subtitle="£209"
+    title="£1,830"
+    description="/ night"
+  />
+);
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| title     | string   | true     | -             |
+| size | oneOf(SIZES)   | false    | SIZES.small         |
+| subtitle  | string   | false    | null          |
+| description | string   | false    | null          |
+| className | string   | false    | null          |

package/bpk-component-price/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.
+ */
+/* @flow strict */
+
+import BpkPrice, { SIZES } from './src/BpkPrice';
+
+export default BpkPrice;
+export { SIZES };

package/bpk-component-price/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-price",
+  "version": "1.0.0",
+  "description": "Backpack price 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/"
+  },
+  "dependencies": {
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-price/src/BpkPrice.js

@@ -0,0 +1,106 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+
+import STYLES from './BpkPrice.module.scss';
+
+export const SIZES = {
+  small: 'small',
+  large: 'large',
+};
+
+type Props = {
+  title: string,
+  size: $Values<typeof SIZES>,
+  className: ?string,
+  subtitle: ?string,
+  description: ?string,
+};
+
+const getClassName = cssModules(STYLES);
+
+const BpkPrice = (props: Props) => {
+  const { className, description, size, subtitle, title, ...rest } = props;
+
+  const isSmall = size === SIZES.small;
+
+  return (
+    <div
+      className={getClassName(
+        'bpk-price',
+        isSmall && 'bpk-price--small',
+        className,
+      )}
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      {...rest}
+    >
+      {subtitle && (
+        <BpkText
+          className={getClassName('bpk-price__subtitle')}
+          textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+          tagName="span"
+        >
+          {subtitle}
+        </BpkText>
+      )}
+      <div className={isSmall && getClassName('bpk-price__titleColumn')}>
+        <BpkText
+          textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
+          tagName="span"
+        >
+          {title}
+        </BpkText>
+        {description && (
+          <BpkText
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+            className={getClassName(
+              'bpk-price__description',
+              !isSmall && 'bpk-price__descriptionSpacing',
+            )}
+          >
+            {description}
+          </BpkText>
+        )}
+      </div>
+    </div>
+  );
+};
+
+BpkPrice.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  className: PropTypes.string,
+  subtitle: PropTypes.string,
+  description: PropTypes.string,
+};
+
+BpkPrice.defaultProps = {
+  size: SIZES.small,
+  className: null,
+  subtitle: null,
+  description: null,
+};
+
+export default BpkPrice;

package/bpk-component-price/src/BpkPrice.module.scss

@@ -0,0 +1,55 @@
+/*
+ * 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-price {
+  display: flex;
+  flex-direction: column;
+
+  &--small {
+    text-align: right;
+
+    @include bpk-rtl {
+      text-align: left;
+    }
+  }
+
+  &__subtitle {
+    color: $bpk-color-sky-gray-tint-02;
+    text-decoration-line: line-through;
+  }
+
+  &__titleColumn {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    color: $bpk-color-sky-gray-tint-02;
+
+    &Spacing {
+      margin-left: bpk-spacing-sm();
+
+      @include bpk-rtl {
+        margin-right: bpk-spacing-sm();
+        margin-left: unset;
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -19,7 +19,6 @@
     "bpk-component-select": "^5.1.10",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",
-    "konami": "^1.6.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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

@@ -17,7 +17,6 @@
  */
 
 import React from 'react';
-import Konami from 'konami';
 
 import BpkLabel from '../../bpk-component-label';
 import BpkSelect from '../../bpk-component-select';
@@ -48,17 +47,10 @@ class BpkThemeToggle extends React.Component {
 
   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) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,13 +22,16 @@
     "access": "public"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "@skyscanner/bpk-svgs": "^14.1.9",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "date-fns": "^2.21.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
+    "date-fns": "^2.21.1",
     "intersection-observer": "^0.7.0",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",