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

package/bpk-component-text/index.js

@@ -1,28 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TEXT_STYLES", {
-  enumerable: true,
-  get: function () {
-    return _BpkText.TEXT_STYLES;
-  }
-});
-Object.defineProperty(exports, "WEIGHT_STYLES", {
-  enumerable: true,
-  get: function () {
-    return _BpkText.WEIGHT_STYLES;
-  }
-});
-exports.default = void 0;
-
-var _BpkText = _interopRequireWildcard(require("./src/BpkText"));
-
-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; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -40,5 +15,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkText.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import component, { TEXT_STYLES, WEIGHT_STYLES } from './src/BpkText';
+
+export default component;
+export { TEXT_STYLES, WEIGHT_STYLES };

package/bpk-component-text/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-text",
+  "version": "7.0.6",
+  "description": "Backpack text 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-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-text/src/BpkText.js

@@ -1,30 +1,33 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WEIGHT_STYLES = exports.TEXT_STYLES = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _BpkTextModule = _interopRequireDefault(require("./BpkText.css"));
-
-const _excluded = ["bold", "children", "className", "tagName", "textStyle", "weight"];
-
-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; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTextModule.default);
-const TEXT_STYLES = {
+/*
+ * 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, { type Node } from 'react';
+
+import { cssModules, deprecated } from '../../bpk-react-utils';
+
+import STYLES from './BpkText.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const TEXT_STYLES = {
   xs: 'xs',
   sm: 'sm',
   base: 'base',
@@ -51,22 +54,24 @@ const TEXT_STYLES = {
   hero2: 'hero-2',
   hero3: 'hero-3',
   hero4: 'hero-4',
-  hero5: 'hero-5'
+  hero5: 'hero-5',
 };
-exports.TEXT_STYLES = TEXT_STYLES;
-const WEIGHT_STYLES = {
+
+export const WEIGHT_STYLES = {
   regular: 'regular',
   bold: 'bold',
-  black: 'black'
+  black: 'black',
 };
-exports.WEIGHT_STYLES = WEIGHT_STYLES;
+
+export type Weight = $Keys<typeof WEIGHT_STYLES>;
+export type TextStyle = $Values<typeof TEXT_STYLES>;
 
 const getWeight = (bold, weight, textStyle) => {
   if (bold || weight === WEIGHT_STYLES.bold) {
     return WEIGHT_STYLES.bold;
-  } // Weight can only be black if textStyle is `xl`, `xxl` or `xxxl`.
-
+  }
 
+  // Weight can only be black if textStyle is `xl`, `xxl` or `xxxl`.
   if (weight === WEIGHT_STYLES.black && textStyle.match(/^x+l$/)) {
     return WEIGHT_STYLES.black;
   }
@@ -74,42 +79,74 @@ const getWeight = (bold, weight, textStyle) => {
   return null;
 };
 
-const BpkText = props => {
+type Props = {
+  children: Node,
+  textStyle: TextStyle,
+  tagName: 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
+  className: ?string,
+  bold: ?boolean,
+  weight: ?Weight,
+};
+
+const BpkText = (props: Props) => {
   const {
     bold,
     children,
     className,
     tagName: TagName,
     textStyle,
-    weight
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+    weight,
+    ...rest
+  } = props;
 
   const validWeight = getWeight(bold, weight, textStyle);
-  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, validWeight && `bpk-text--${validWeight}`, className);
+
+  const classNames = getClassName(
+    'bpk-text',
+    `bpk-text--${textStyle}`,
+    validWeight && `bpk-text--${validWeight}`,
+    className,
+  );
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(TagName, _extends({
-      className: classNames
-    }, rest), children)
+    <TagName className={classNames} {...rest}>
+      {children}
+    </TagName>
   );
 };
 
 BpkText.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  textStyle: _propTypes.default.oneOf(Object.values(TEXT_STYLES)),
-  tagName: _propTypes.default.oneOf(['span', 'p', 'text', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
-  className: _propTypes.default.string,
-  bold: (0, _bpkReactUtils.deprecated)(_propTypes.default.bool, 'Use a different "textStyle" to achieve the desired weight.'),
-  weight: (0, _bpkReactUtils.deprecated)(_propTypes.default.oneOf(Object.keys(WEIGHT_STYLES)), 'Use a different "textStyle" to achieve the desired weight.')
+  children: PropTypes.node.isRequired,
+  textStyle: PropTypes.oneOf(Object.values(TEXT_STYLES)),
+  tagName: PropTypes.oneOf([
+    'span',
+    'p',
+    'text',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+  ]),
+  className: PropTypes.string,
+  bold: deprecated(
+    PropTypes.bool,
+    'Use a different "textStyle" to achieve the desired weight.',
+  ),
+  weight: deprecated(
+    PropTypes.oneOf(Object.keys(WEIGHT_STYLES)),
+    'Use a different "textStyle" to achieve the desired weight.',
+  ),
 };
+
 BpkText.defaultProps = {
   textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'span',
   className: null,
   bold: null,
-  weight: null
+  weight: null,
 };
-var _default = BpkText;
-exports.default = _default;
+
+export default BpkText;

package/bpk-component-text/src/BpkText.module.scss

@@ -0,0 +1,139 @@
+/*
+ * 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-text {
+  @include bpk-text;
+
+  &--xs {
+    @include bpk-text--xs;
+  }
+
+  &--sm {
+    @include bpk-text--sm;
+  }
+
+  &--base {
+    @include bpk-text--base;
+  }
+
+  &--lg {
+    @include bpk-text--lg;
+  }
+
+  &--xl {
+    @include bpk-text--xl;
+  }
+
+  &--xxl {
+    @include bpk-text--xxl;
+  }
+
+  &--xxxl {
+    @include bpk-text--xxxl;
+  }
+
+  &--xxxxl {
+    @include bpk-text--xxxxl;
+  }
+
+  &--xxxxxl {
+    @include bpk-text--xxxxxl;
+  }
+
+  &--caption {
+    @include bpk-caption;
+  }
+
+  &--footnote {
+    @include bpk-footnote;
+  }
+
+  &--label-1 {
+    @include bpk-label-1;
+  }
+
+  &--label-2 {
+    @include bpk-label-2;
+  }
+
+  &--label-3 {
+    @include bpk-label-3;
+  }
+
+  &--body-default {
+    @include bpk-body-default;
+  }
+
+  &--body-longform {
+    @include bpk-body-longform;
+  }
+
+  &--subheading {
+    @include bpk-subheading;
+  }
+
+  &--heading-1 {
+    @include bpk-heading-1;
+  }
+
+  &--heading-2 {
+    @include bpk-heading-2;
+  }
+
+  &--heading-3 {
+    @include bpk-heading-3;
+  }
+
+  &--heading-4 {
+    @include bpk-heading-4;
+  }
+
+  &--heading-5 {
+    @include bpk-heading-5;
+  }
+
+  &--hero-1 {
+    @include bpk-hero-1;
+  }
+
+  &--hero-2 {
+    @include bpk-hero-2;
+  }
+
+  &--hero-3 {
+    @include bpk-hero-3;
+  }
+
+  &--hero-4 {
+    @include bpk-hero-4;
+  }
+
+  &--hero-5 {
+    @include bpk-hero-5;
+  }
+
+  &--bold {
+    @include bpk-text--bold;
+  }
+
+  &--black {
+    @include bpk-text--black;
+  }
+}

package/bpk-component-textarea/README.md

@@ -0,0 +1,34 @@
+# bpk-component-textarea
+
+> Backpack textarea component.
+
+## Installation
+
+```sh
+npm install bpk-component-textarea --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkTextarea from 'bpk-component-textarea';
+
+export default () => (
+  <BpkTextarea
+    id="textarea"
+    name="textarea"
+    value="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+  />
+);
+```
+
+## Props
+
+| Property     | PropType             | Required  | Default Value    |
+| ------------ | -------------------- | --------- | ---------------- |
+| id           | string               | true      | -                |
+| name         | string               | true      | -                |
+| value        | string               | true      | -                |
+| valid        | bool                 | false     | null             |
+| large        | bool                 | false     | false            |

package/bpk-component-textarea/index.js

@@ -1,22 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-
-var _BpkTextarea = _interopRequireDefault(require("./src/BpkTextarea"));
-
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -34,5 +15,11 @@ 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 = _BpkTextarea.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkTextarea from './src/BpkTextarea';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkTextarea;
+export { themeAttributes };

package/bpk-component-textarea/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-textarea",
+  "version": "4.2.12",
+  "description": "Backpack textarea 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": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^6.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "bpk-component-label": "^5.1.12",
+    "bpk-storybook-utils": "^1.1.11"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -1,63 +1,76 @@
-"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';
 
-var _react = _interopRequireDefault(require("react"));
+import { cssModules } from '../../bpk-react-utils';
 
-var _bpkReactUtils = require("../../bpk-react-utils");
+import STYLES from './BpkTextarea.module.scss';
 
-var _BpkTextareaModule = _interopRequireDefault(require("./BpkTextarea.css"));
+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; }
+type Props = {
+  id: string,
+  name: string,
+  value: string,
+  className: ?string,
+  valid: ?boolean,
+  large: ?boolean,
+};
 
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTextareaModule.default);
+const BpkTextarea = (props: Props) => {
+  const { className, large, valid, ...rest } = props;
 
-const BpkTextarea = props => {
-  const {
-    className,
-    large,
-    valid
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded); // Explicit check for false primitive value as undefined is
+  // 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.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'];