@skyscanner/backpack-web 17.1.0-beta.1 → 17.2.0

package/bpk-component-card/src/BpkCard.js

@@ -1,29 +1,44 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkCardModule = _interopRequireDefault(require("./BpkCard.module.css"));
-const _excluded = ["atomic", "blank", "children", "className", "href", "padded"];
-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)(_BpkCardModule.default);
-const BpkCard = props => {
-  const {
-      atomic,
-      blank,
-      children,
-      className,
-      href,
-      padded
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+/*
+ * 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 } from '../../bpk-react-utils';
+
+import STYLES from './BpkCard.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  children: Node,
+  className: ?string,
+  href: ?string,
+  padded: boolean,
+  blank: boolean,
+  atomic: boolean,
+};
+
+const BpkCard = (props: Props) => {
+  const { atomic, blank, children, className, href, padded, ...rest } = props;
+
   const classNames = [getClassName('bpk-card')];
   if (padded) {
     classNames.push(getClassName('bpk-card--padded'));
@@ -31,15 +46,16 @@ const BpkCard = props => {
   if (className) {
     classNames.push(className);
   }
+
   const classNameFinal = classNames.join(' ');
-  const atomicProps = {};
+
+  const atomicProps: { tabIndex: ?number, role: ?string } = {};
+
   if (href) {
     let blankProps = {};
+
     if (blank) {
-      blankProps = {
-        target: '_blank',
-        rel: 'noopener noreferrer'
-      };
+      blankProps = { target: '_blank', rel: 'noopener noreferrer' };
     }
 
     // If the link is non-atomic, disable keyboard focus and make the screen-reader ignore the outer element.
@@ -47,13 +63,18 @@ const BpkCard = props => {
       atomicProps.tabIndex = -1;
       atomicProps.role = 'group';
     }
+
     return (
-      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _react.default.createElement("a", _extends({
-        href: href,
-        className: classNameFinal
-      }, atomicProps, blankProps, rest), children)
+      <a
+        href={href}
+        className={classNameFinal}
+        {...atomicProps}
+        {...blankProps}
+        {...rest}
+      >
+        {children}
+      </a>
     );
   }
 
@@ -62,28 +83,30 @@ const BpkCard = props => {
     atomicProps.tabIndex = 0;
     atomicProps.role = 'button';
   }
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("div", _extends({}, atomicProps, {
-      className: classNameFinal
-    }, rest), children)
+    <div {...atomicProps} className={classNameFinal} {...rest}>
+      {children}
+    </div>
   );
 };
+
 BpkCard.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string,
-  href: _propTypes.default.string,
-  padded: _propTypes.default.bool,
-  blank: _propTypes.default.bool,
-  atomic: _propTypes.default.bool
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  padded: PropTypes.bool,
+  blank: PropTypes.bool,
+  atomic: PropTypes.bool,
 };
+
 BpkCard.defaultProps = {
   className: null,
   href: null,
   padded: true,
   blank: false,
-  atomic: true
+  atomic: true,
 };
-var _default = BpkCard;
-exports.default = _default;
+
+export default BpkCard;

package/bpk-component-card/src/BpkCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--padded{padding:1rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card{position:relative;display:block;background-color:#fff;color:#111236;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--padded{padding:1rem}

package/bpk-component-card/src/BpkCard.module.scss

@@ -0,0 +1,27 @@
+/*
+ * 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.scss';
+
+.bpk-card {
+  @include bpk-card;
+
+  &--padded {
+    @include bpk-card--padded;
+  }
+}

package/bpk-component-card/src/BpkDividedCard.js

@@ -1,61 +1,95 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ORIENTATION = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkCard = _interopRequireDefault(require("./BpkCard"));
-var _BpkDividedCardModule = _interopRequireDefault(require("./BpkDividedCard.module.css"));
-const _excluded = ["className", "href", "orientation", "primaryContent", "secondaryContent"];
-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)(_BpkDividedCardModule.default);
-const ORIENTATION = {
+/*
+ * 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 BpkCard from './BpkCard';
+import STYLES from './BpkDividedCard.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const ORIENTATION = {
   horizontal: 'horizontal',
-  vertical: 'vertical'
+  vertical: 'vertical',
+};
+
+export type Props = {
+  primaryContent: Node,
+  secondaryContent: Node,
+  orientation: $Values<typeof ORIENTATION>,
+  href: ?string,
+  className: ?string,
 };
-exports.ORIENTATION = ORIENTATION;
-const BpkDividedCard = props => {
+const BpkDividedCard = (props: Props) => {
   const {
-      className,
-      href,
-      orientation,
-      primaryContent,
-      secondaryContent
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    className,
+    href,
+    orientation,
+    primaryContent,
+    secondaryContent,
+    ...rest
+  } = props;
   const isVertical = orientation === ORIENTATION.vertical;
-  const classNames = getClassName('bpk-divided-card', isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal', className);
+  const classNames = getClassName(
+    'bpk-divided-card',
+    isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal',
+    className,
+  );
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_BpkCard.default, _extends({
-      className: classNames,
-      href: href,
-      padded: false
-    }, rest), /*#__PURE__*/_react.default.createElement("div", {
-      className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal')
-    }, primaryContent), /*#__PURE__*/_react.default.createElement("div", {
-      className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal')
-    }, secondaryContent))
+    <BpkCard className={classNames} href={href} padded={false} {...rest}>
+      <div
+        className={getClassName(
+          !isVertical && 'bpk-divided-card__primary--horizontal',
+        )}
+      >
+        {primaryContent}
+      </div>
+      <div
+        className={getClassName(
+          isVertical
+            ? 'bpk-divided-card__secondary--vertical'
+            : 'bpk-divided-card__secondary--horizontal',
+        )}
+      >
+        {secondaryContent}
+      </div>
+    </BpkCard>
   );
 };
+
 BpkDividedCard.propTypes = {
-  primaryContent: _propTypes.default.node.isRequired,
-  secondaryContent: _propTypes.default.node.isRequired,
-  orientation: _propTypes.default.oneOf(Object.keys(ORIENTATION)),
-  href: _propTypes.default.string,
-  className: _propTypes.default.string
+  primaryContent: PropTypes.node.isRequired,
+  secondaryContent: PropTypes.node.isRequired,
+  orientation: PropTypes.oneOf(Object.keys(ORIENTATION)),
+  href: PropTypes.string,
+  className: PropTypes.string,
 };
+
 BpkDividedCard.defaultProps = {
   orientation: ORIENTATION.horizontal,
   href: null,
-  className: null
+  className: null,
 };
-var _default = BpkDividedCard;
-exports.default = _default;
+
+export default BpkDividedCard;

package/bpk-component-card/src/BpkDividedCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-divided-card{display:flex}.bpk-divided-card--vertical{min-width:15rem;max-width:45rem;flex-direction:column}.bpk-divided-card--horizontal{min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid 0.0625rem #C2C9CD}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid 0.0625rem #C2C9CD}html[dir='rtl'] .bpk-divided-card__secondary--horizontal{border-right:solid 0.0625rem #C2C9CD;border-left:unset}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-divided-card{display:flex}

package/bpk-component-card/src/BpkDividedCard.module.scss

@@ -0,0 +1,62 @@
+/*
+ * 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.scss';
+
+$min-vertical-width: 240;
+$max-vertical-width: 720;
+$min-horizontal-width: $max-vertical-width + 1;
+$min-horizontal-height: 292;
+$fixed-secondary-width: 216;
+
+.bpk-divided-card {
+  display: flex;
+
+  &--vertical {
+    min-width: $bpk-one-pixel-rem * $min-vertical-width;
+    max-width: $bpk-one-pixel-rem * $max-vertical-width;
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    min-width: $bpk-one-pixel-rem * $min-horizontal-width;
+    min-height: $bpk-one-pixel-rem * $min-horizontal-height;
+  }
+
+  &__primary {
+    &--horizontal {
+      flex: 1;
+    }
+  }
+
+  &__secondary {
+    &--vertical {
+      border-top: $bpk-input-border;
+    }
+
+    &--horizontal {
+      width: $bpk-one-pixel-rem * $fixed-secondary-width;
+      border-left: $bpk-input-border;
+
+      @include bpk-rtl {
+        border-right: $bpk-input-border;
+        border-left: unset;
+      }
+    }
+  }
+}

package/bpk-component-checkbox/README.md

@@ -0,0 +1,45 @@
+# bpk-component-checkbox
+
+> Backpack checkbox component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkCheckbox from '@skyscanner/backpack-web/bpk-component-checkbox';
+
+export default () => (
+  <BpkCheckbox
+    name="prefer-directs"
+    onChange={() => console.log('prefer directs changed!')}
+    label="Prefer directs"
+    checked
+  />
+);
+```
+
+## Props
+
+| Property      | PropType | Required | Default Value |
+| ------------- | -------- | -------- | ------------- |
+| name          | string   | true     | -             |
+| label         | node     | true     | -             |
+| checked       | bool     | false    | false         |
+| disabled      | bool     | false    | false         |
+| indeterminate | bool     | false    | false         |
+| required      | bool     | false    | false         |
+| smallLabel    | bool     | false    | false         |
+| valid         | bool     | false    | null          |
+| white         | bool     | false    | false         |
+
+## `indeterminate` prop
+
+The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. If `indeterminate` is flagged then the checkbox will be displayed with a minus sign in the box.  This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected.
+
+## Theme Props
+
++ `checkboxCheckedColor`

package/bpk-component-checkbox/index.js

@@ -1,18 +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 _BpkCheckbox = _interopRequireDefault(require("./src/BpkCheckbox"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,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 = _BpkCheckbox.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkCheckbox from './src/BpkCheckbox';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkCheckbox;
+export { themeAttributes };