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

package/bpk-component-badge/src/BpkBadge.js

@@ -1,94 +1,91 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BADGE_TYPES = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _BpkBadgeModule = _interopRequireDefault(require("./BpkBadge.css"));
-
-const _excluded = ["centered", "className", "docked", "type"];
-
-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 BADGE_TYPES = {
+/*
+ * 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 STYLES from './BpkBadge.module.scss';
+
+export const BADGE_TYPES = {
   warning: 'warning',
   success: 'success',
   destructive: 'destructive',
   light: 'light',
   inverse: 'inverse',
-  outline: 'outline'
+  outline: 'outline',
 };
-exports.BADGE_TYPES = BADGE_TYPES;
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBadgeModule.default);
+
+const getClassName = cssModules(STYLES);
+
 const badgeTypeClassNames = {
   [BADGE_TYPES.warning]: null,
   [BADGE_TYPES.success]: getClassName('bpk-badge--success'),
   [BADGE_TYPES.destructive]: getClassName('bpk-badge--destructive'),
   [BADGE_TYPES.light]: getClassName('bpk-badge--light'),
   [BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'),
-  [BADGE_TYPES.outline]: getClassName('bpk-badge--outline')
+  [BADGE_TYPES.outline]: getClassName('bpk-badge--outline'),
 };
 
-const BpkBadge = props => {
-  const {
-    centered,
-    className,
-    docked,
-    type
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+export type Props = {
+  type: $Keys<typeof BADGE_TYPES>,
+  docked: ?string,
+  centered: boolean,
+  className: ?string,
+};
 
+const BpkBadge = (props: Props) => {
+  const { centered, className, docked, type, ...rest } = props;
   const classNames = [getClassName('bpk-badge'), badgeTypeClassNames[type]];
 
   if (docked === 'right') {
     classNames.push(getClassName('bpk-badge--docked-right'));
   }
-
   if (docked === 'left') {
     classNames.push(getClassName('bpk-badge--docked-left'));
   }
-
   if (centered) {
     classNames.push(getClassName('bpk-badge--centered'));
   }
-
   if (className) {
     classNames.push(className);
   }
 
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("span", _extends({
-      className: classNames.join(' ')
-    }, rest))
+    <span className={classNames.join(' ')} {...rest} />
   );
 };
 
 BpkBadge.propTypes = {
-  type: _propTypes.default.oneOf(Object.keys(BADGE_TYPES)),
-  docked: _propTypes.default.oneOf(['right', 'left', null]),
-  centered: _propTypes.default.bool,
-  className: _propTypes.default.string
+  type: PropTypes.oneOf(Object.keys(BADGE_TYPES)),
+  docked: PropTypes.oneOf(['right', 'left', null]),
+  centered: PropTypes.bool,
+  className: PropTypes.string,
 };
+
 BpkBadge.defaultProps = {
   type: BADGE_TYPES.warning,
   docked: null,
   centered: false,
-  className: null
+  className: null,
 };
-var _default = BpkBadge;
-exports.default = _default;
+
+export default BpkBadge;

package/bpk-component-badge/src/BpkBadge.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-badge {
+  @include bpk-badge;
+
+  &--centered {
+    @include bpk-badge--centered;
+  }
+
+  &--docked-right {
+    @include bpk-badge--docked-right;
+  }
+
+  &--docked-left {
+    @include bpk-badge--docked-left;
+  }
+
+  &--success {
+    @include bpk-badge--success;
+  }
+
+  &--destructive {
+    @include bpk-badge--destructive;
+  }
+
+  &--light {
+    @include bpk-badge--light;
+  }
+
+  &--inverse {
+    @include bpk-badge--inverse;
+  }
+
+  &--outline {
+    @include bpk-badge--outline;
+  }
+}

package/bpk-component-badge/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,9 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['badgeBackgroundColor', 'badgeSuccessBackgroundColor', 'badgeDestructiveBackgroundColor'];
-exports.default = _default;
+
+export default [
+  'badgeBackgroundColor',
+  'badgeSuccessBackgroundColor',
+  'badgeDestructiveBackgroundColor',
+];

package/bpk-component-banner-alert/README.md

@@ -0,0 +1,153 @@
+# bpk-component-banner-alert
+
+> Backpack banner alert component.
+
+## Installation
+
+```sh
+npm install bpk-component-banner-alert --save-dev
+```
+
+## Usage
+
+### Default
+
+```js
+import React from 'react';
+import BpkBannerAlert, { ALERT_TYPES } from 'bpk-component-banner-alert';
+
+export default () => (
+  <BpkBannerAlert
+    message="Successful alert with more information."
+    type={ALERT_TYPES.SUCCESS}
+  />
+);
+```
+
+### Dismissable
+
+```js
+import React, { Component } from 'react';
+import { ALERT_TYPES, BpkBannerAlertDismissable } from 'bpk-component-banner-alert';
+
+class DismissableBpkBannerAlert extends Component {
+  constructor() {
+    super();
+
+
+    this.state = {
+      show: true,
+    };
+  }
+
+  setDismissed = () => {
+    this.setState({
+      show: false,
+    });
+  }
+
+  render() {
+    return (
+      <BpkBannerAlertDismissable
+        message="Successful alert with dismiss option."
+        type={ALERT_TYPES.SUCCESS}
+        onDismiss={this.setDismissed}
+        show={this.state.show}
+        dismissButtonLabel="Dismiss"
+      />
+    );
+  }
+}
+
+export default () => (
+  <DismissableBpkBannerAlert />
+);
+```
+
+### withBannerAlertState(BpkBannerAlert)
+
+```js
+import React, { Component } from 'react';
+import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from 'bpk-component-banner-alert';
+
+const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);
+const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable);
+
+<BannerAlertDismissableState
+  dismissButtonLabel="Dismiss"
+  message="Successful alert with dismiss option."
+  type={ALERT_TYPES.SUCCESS}
+/>
+
+<BannerAlertDismissableState
+  message="Successful alert that will disappear after 5 seconds."
+  hideAfter={5}
+  type={ALERT_TYPES.SUCCESS}
+/>
+
+<BannerAlertExpandableState
+  message="Successful alert with expandable option."
+  type={ALERT_TYPES.SUCCESS}
+  toggleButtonLabel="View more"
+>
+  Lorem ipsum dolor sit amet.
+</BannerAlertExpandableState>
+```
+
+
+## Props
+
+### BpkBannerAlert
+
+| Property           | PropType               | Required | Default Value |
+| ------------------ | ---------------------- | -------- | ------------- |
+| type               | ALERT_TYPES (one of)   | true     | -             |
+| message            | node                   | true     | -             |
+| animateOnEnter     | bool                   | false    | false         |
+| animateOnLeave     | bool                   | false    | false         |
+| bannerClassName    | string                 | false    | null          |
+| icon               | BpkIcon                | false    | null          |
+| show               | bool                   | false    | true          |
+
+### BpkBannerAlertDismissable
+
+| Property           | PropType               | Required | Default Value |
+| ------------------ | ---------------------- | -------- | ------------- |
+| type               | ALERT_TYPES (one of)   | true     | -             |
+| message            | node                   | true     | -             |
+| animateOnEnter     | bool                   | false    | false         |
+| animateOnLeave     | bool                   | false    | false         |
+| bannerClassName    | string                 | false    | null          |
+| dismissButtonLabel | string                 | false    | null          |
+| icon               | BpkIcon                | false    | null          |
+| onDismiss          | func                   | false    | null          |
+| show               | bool                   | false    | true          |
+
+### BpkBannerAlertExpandable
+
+| Property           | PropType               | Required | Default Value |
+| ------------------ | ---------------------- | -------- | ------------- |
+| type               | ALERT_TYPES (one of)   | true     | -             |
+| message            | node                   | true     | -             |
+| animateOnEnter     | bool                   | false    | false         |
+| animateOnLeave     | bool                   | false    | false         |
+| bannerClassName    | string                 | false    | null          |
+| expanded           | bool                   | false    | false         |
+| icon               | BpkIcon                | false    | null          |
+| onExpandToggle     | func                   | false    | null          |
+| show               | bool                   | false    | true          |
+| toggleButtonLabel  | string                 | false    | null          |
+
+### withBannerAlertState(BpkBannerAlert)
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| hideAfter | number   | false    | null          |
+| onHide    | func     | false    | null          |
+
+## Theme Props
+
+* `bannerAlertPrimaryColor`
+* `bannerAlertSuccessColor`
+* `bannerAlertWarnColor`
+* `bannerAlertErrorColor`

package/bpk-component-banner-alert/index.js

@@ -1,54 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ALERT_TYPES", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.ALERT_TYPES;
-  }
-});
-Object.defineProperty(exports, "BpkBannerAlertDismissable", {
-  enumerable: true,
-  get: function () {
-    return _BpkBannerAlertDismissable.default;
-  }
-});
-Object.defineProperty(exports, "BpkBannerAlertExpandable", {
-  enumerable: true,
-  get: function () {
-    return _BpkBannerAlertExpandable.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-Object.defineProperty(exports, "withBannerAlertState", {
-  enumerable: true,
-  get: function () {
-    return _withBannerAlertState.default;
-  }
-});
-
-var _BpkBannerAlert = _interopRequireDefault(require("./src/BpkBannerAlert"));
-
-var _BpkBannerAlertDismissable = _interopRequireDefault(require("./src/BpkBannerAlertDismissable"));
-
-var _BpkBannerAlertExpandable = _interopRequireDefault(require("./src/BpkBannerAlertExpandable"));
-
-var _commonTypes = require("./src/common-types");
-
-var _withBannerAlertState = _interopRequireDefault(require("./src/withBannerAlertState"));
-
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -66,5 +15,20 @@ 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 = _BpkBannerAlert.default;
-exports.default = _default;
+/* @flow strict */
+
+import BpkBannerAlert from './src/BpkBannerAlert';
+import BpkBannerAlertDismissable from './src/BpkBannerAlertDismissable';
+import BpkBannerAlertExpandable from './src/BpkBannerAlertExpandable';
+import { ALERT_TYPES } from './src/common-types';
+import withBannerAlertState from './src/withBannerAlertState';
+import themeAttributes from './src/themeAttributes';
+
+export {
+  ALERT_TYPES,
+  BpkBannerAlertDismissable,
+  BpkBannerAlertExpandable,
+  withBannerAlertState,
+  themeAttributes,
+};
+export default BpkBannerAlert;

package/bpk-component-banner-alert/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "bpk-component-banner-alert",
+  "version": "6.1.16",
+  "description": "Backpack banner alert 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": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
+  "dependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-animate-height": "^4.1.11",
+    "bpk-component-close-button": "^3.1.12",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^2.5.3"
+  },
+  "devDependencies": {
+    "bpk-component-aria-live": "^2.1.18",
+    "bpk-component-button": "^6.2.6",
+    "bpk-storybook-utils": "^1.1.10"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}