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

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -1,24 +1,3 @@
-"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 _BpkPaginationPage = _interopRequireDefault(require("./BpkPaginationPage"));
-
-var _BpkPaginationBreak = _interopRequireDefault(require("./BpkPaginationBreak"));
-
-var _BpkPaginationListModule = _interopRequireDefault(require("./BpkPaginationList.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -36,60 +15,86 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPaginationListModule.default);
 
-const BpkPaginationList = props => {
+import PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkPaginationPage from './BpkPaginationPage';
+import BpkPaginationBreak from './BpkPaginationBreak';
+import STYLES from './BpkPaginationList.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkPaginationList = (props) => {
   const {
     onPageChange,
     pageCount,
     pageLabel,
     selectedPageIndex,
-    visibleRange
+    visibleRange,
   } = props;
+
   const shoulderRange = Math.ceil(visibleRange / 2);
   const isFirstPageSelected = selectedPageIndex === 0;
   const isLastPageSelected = selectedPageIndex === pageCount - 1;
-  const displayRange = isFirstPageSelected || isLastPageSelected ? shoulderRange + 1 : shoulderRange;
-  const children = new Array(pageCount).fill(undefined).map((_, i) => {
-    const isFirstPage = i === 0;
-    const isLastPage = i === pageCount - 1;
-    const isFirstPageInRange = i === selectedPageIndex - displayRange && !isFirstPage;
-    const isLastPageInRange = i === selectedPageIndex + displayRange && !isLastPage;
-    const isPageOutOfRange = i < selectedPageIndex - displayRange || i > selectedPageIndex + displayRange;
-    let pageView = null;
+  const displayRange =
+    isFirstPageSelected || isLastPageSelected
+      ? shoulderRange + 1
+      : shoulderRange;
+
+  const children = new Array(pageCount)
+    .fill(undefined)
+    .map((_, i) => {
+      const isFirstPage = i === 0;
+      const isLastPage = i === pageCount - 1;
+      const isFirstPageInRange =
+        i === selectedPageIndex - displayRange && !isFirstPage;
+      const isLastPageInRange =
+        i === selectedPageIndex + displayRange && !isLastPage;
+      const isPageOutOfRange =
+        i < selectedPageIndex - displayRange ||
+        i > selectedPageIndex + displayRange;
 
-    if (isFirstPageInRange || isLastPageInRange) {
-      pageView = /*#__PURE__*/_react.default.createElement(_BpkPaginationBreak.default, null);
-    } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
-      pageView = /*#__PURE__*/_react.default.createElement(_BpkPaginationPage.default, {
-        page: i + 1,
-        onSelect: () => onPageChange(i),
-        isSelected: selectedPageIndex === i,
-        pageLabel: pageLabel
-      });
-    }
+      let pageView = null;
+      if (isFirstPageInRange || isLastPageInRange) {
+        pageView = <BpkPaginationBreak />;
+      } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
+        pageView = (
+          <BpkPaginationPage
+            page={i + 1}
+            onSelect={() => onPageChange(i)}
+            isSelected={selectedPageIndex === i}
+            pageLabel={pageLabel}
+          />
+        );
+      }
 
-    if (pageView !== null) {
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: i // eslint-disable-line react/no-array-index-key
-        ,
-        className: getClassName('bpk-pagination-page-list__item')
-      }, pageView);
-    }
+      if (pageView !== null) {
+        return (
+          <li
+            key={i} // eslint-disable-line react/no-array-index-key
+            className={getClassName('bpk-pagination-page-list__item')}
+          >
+            {pageView}
+          </li>
+        );
+      }
+      return null;
+    })
+    .filter((page) => !!page);
 
-    return null;
-  }).filter(page => !!page);
-  return /*#__PURE__*/_react.default.createElement("ul", {
-    className: getClassName('bpk-pagination-page-list')
-  }, children);
+  return (
+    <ul className={getClassName('bpk-pagination-page-list')}>{children}</ul>
+  );
 };
 
 BpkPaginationList.propTypes = {
-  selectedPageIndex: _propTypes.default.number.isRequired,
-  pageCount: _propTypes.default.number.isRequired,
-  visibleRange: _propTypes.default.number.isRequired,
-  onPageChange: _propTypes.default.func.isRequired,
-  pageLabel: _propTypes.default.func.isRequired
+  selectedPageIndex: PropTypes.number.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  visibleRange: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  pageLabel: PropTypes.func.isRequired,
 };
-var _default = BpkPaginationList;
-exports.default = _default;
+
+export default BpkPaginationList;

package/bpk-component-pagination/src/BpkPaginationList.module.scss

@@ -0,0 +1,45 @@
+/*
+ * 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-pagination-page-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &__item {
+    margin-right: bpk-spacing-md();
+
+    @include bpk-rtl {
+      margin-right: 0;
+      margin-left: bpk-spacing-md();
+
+      &:last-child {
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -1,26 +1,3 @@
-"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 _bpkComponentIcon = require("../../bpk-component-icon");
-
-var _arrowLeft = _interopRequireDefault(require("../../bpk-component-icon/lg/arrow-left"));
-
-var _arrowRight = _interopRequireDefault(require("../../bpk-component-icon/lg/arrow-right"));
-
-var _BpkPaginationNudgerModule = _interopRequireDefault(require("./BpkPaginationNudger.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -38,44 +15,63 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPaginationNudgerModule.default);
-const AlignedArrowLeftIcon = (0, _bpkComponentIcon.withButtonAlignment)((0, _bpkComponentIcon.withRtlSupport)(_arrowLeft.default));
-const AlignedArrowRightIcon = (0, _bpkComponentIcon.withButtonAlignment)((0, _bpkComponentIcon.withRtlSupport)(_arrowRight.default));
 
-const nudgerIcon = forward => forward ? /*#__PURE__*/_react.default.createElement(AlignedArrowRightIcon, {
-  className: getClassName('bpk-pagination-nudger__icon')
-}) : /*#__PURE__*/_react.default.createElement(AlignedArrowLeftIcon, {
-  className: getClassName('bpk-pagination-nudger__icon')
-});
+import PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from '../../bpk-react-utils';
+import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
+import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
+
+import STYLES from './BpkPaginationNudger.module.scss';
+
+const getClassName = cssModules(STYLES);
+const AlignedArrowLeftIcon = withButtonAlignment(withRtlSupport(ArrowLeftIcon));
+const AlignedArrowRightIcon = withButtonAlignment(
+  withRtlSupport(ArrowRightIcon),
+);
 
-const BpkPaginationNudger = props => {
-  const {
-    disabled,
-    forward,
-    label,
-    onNudge
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: getClassName('bpk-pagination-nudger')
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: getClassName('bpk-pagination-nudger__button'),
-    onClick: onNudge,
-    disabled: disabled
-  }, nudgerIcon(forward), /*#__PURE__*/_react.default.createElement("span", {
-    className: getClassName('bpk-pagination-nudger__text--hidden')
-  }, label)));
+const nudgerIcon = (forward) =>
+  forward ? (
+    <AlignedArrowRightIcon
+      className={getClassName('bpk-pagination-nudger__icon')}
+    />
+  ) : (
+    <AlignedArrowLeftIcon
+      className={getClassName('bpk-pagination-nudger__icon')}
+    />
+  );
+
+const BpkPaginationNudger = (props) => {
+  const { disabled, forward, label, onNudge } = props;
+
+  return (
+    <div className={getClassName('bpk-pagination-nudger')}>
+      <button
+        type="button"
+        className={getClassName('bpk-pagination-nudger__button')}
+        onClick={onNudge}
+        disabled={disabled}
+      >
+        {nudgerIcon(forward)}
+        <span className={getClassName('bpk-pagination-nudger__text--hidden')}>
+          {label}
+        </span>
+      </button>
+    </div>
+  );
 };
 
 BpkPaginationNudger.propTypes = {
-  label: _propTypes.default.string.isRequired,
-  onNudge: _propTypes.default.func.isRequired,
-  forward: _propTypes.default.bool,
-  disabled: _propTypes.default.bool
+  label: PropTypes.string.isRequired,
+  onNudge: PropTypes.func.isRequired,
+  forward: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
+
 BpkPaginationNudger.defaultProps = {
   forward: false,
-  disabled: false
+  disabled: false,
 };
-var _default = BpkPaginationNudger;
-exports.default = _default;
+
+export default BpkPaginationNudger;

package/bpk-component-pagination/src/BpkPaginationNudger.module.scss

@@ -0,0 +1,74 @@
+/*
+ * 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-pagination-nudger {
+  text-align: center;
+  vertical-align: middle;
+
+  &__button {
+    height: $bpk-button-height;
+    padding: 0 bpk-spacing-md();
+    border: none;
+    background: none;
+    cursor: pointer;
+    appearance: none;
+
+    @include bpk-themeable-property(
+      color,
+      --bpk-pagination-nudger-color,
+      $bpk-color-sky-blue
+    );
+
+    @include bpk-hover {
+      @include bpk-themeable-property(
+        color,
+        --bpk-pagination-nudger-hover-color,
+        $bpk-color-sky-blue-shade-02
+      );
+    }
+
+    &:active {
+      @include bpk-themeable-property(
+        color,
+        --bpk-pagination-nudger-active-color,
+        $bpk-color-sky-blue
+      );
+    }
+
+    &:disabled {
+      color: $bpk-color-sky-gray-tint-06;
+      cursor: not-allowed;
+    }
+
+    .bpk-pagination-nudger__icon {
+      fill: currentColor;
+
+      @include bpk-icon--rtl-support;
+    }
+  }
+
+  &__text {
+    &--hidden {
+      @include bpk-visually-hidden;
+    }
+  }
+}

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -1,22 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _bpkComponentButton = _interopRequireDefault(require("../../bpk-component-button"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _BpkPaginationPageModule = _interopRequireDefault(require("./BpkPaginationPage.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -34,38 +15,46 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPaginationPageModule.default);
 
-const BpkPaginationPage = props => {
+import BpkButton from '../../bpk-component-button';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkPaginationPage.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkPaginationPage = (props) => {
   const classNames = [getClassName('bpk-pagination-page')];
-  const {
-    isSelected,
-    onSelect,
-    page,
-    pageLabel
-  } = props;
+  const { isSelected, onSelect, page, pageLabel } = props;
 
   if (isSelected) {
     classNames.push(getClassName('bpk-pagination-page--selected'));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_bpkComponentButton.default, {
-    secondary: true,
-    onClick: onSelect,
-    className: classNames.join(' '),
-    "aria-label": pageLabel(page, isSelected),
-    "aria-current": isSelected
-  }, /*#__PURE__*/_react.default.createElement("span", null, page));
+  return (
+    <BpkButton
+      secondary
+      onClick={onSelect}
+      className={classNames.join(' ')}
+      aria-label={pageLabel(page, isSelected)}
+      aria-current={isSelected}
+    >
+      <span>{page}</span>
+    </BpkButton>
+  );
 };
 
 BpkPaginationPage.propTypes = {
-  page: _propTypes.default.number.isRequired,
-  onSelect: _propTypes.default.func.isRequired,
-  pageLabel: _propTypes.default.func.isRequired,
-  isSelected: _propTypes.default.bool
+  page: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  pageLabel: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool,
 };
+
 BpkPaginationPage.defaultProps = {
-  isSelected: false
+  isSelected: false,
 };
-var _default = BpkPaginationPage;
-exports.default = _default;
+
+export default BpkPaginationPage;

package/bpk-component-pagination/src/BpkPaginationPage.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-pagination-page{min-width:2.25rem;height:2.25rem;padding:0;border-radius:50%;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-pagination-page--selected{background-image:none;color:#fff;box-shadow:none;cursor:auto;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:active{background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:disabled{box-shadow:none}

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -0,0 +1,92 @@
+/*
+ * 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-pagination-page {
+  min-width: $bpk-button-height;
+  height: $bpk-button-height;
+  padding: 0;
+  border-radius: 50%;
+
+  @include bpk-label-1;
+}
+
+.bpk-pagination-page--selected {
+  background-image: $bpk-button-secondary-background-image;
+  color: $bpk-button-selected-color;
+  box-shadow: $bpk-button-selected-box-shadow;
+  cursor: auto;
+
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-pagination-selected-background-color,
+    $bpk-color-sky-blue-shade-02
+  );
+  @include bpk-border-lg($bpk-color-sky-blue-shade-02);
+  @include bpk-border-lg(
+    var(
+      --bpk-pagination-selected-background-color,
+      $bpk-color-sky-blue-shade-02
+    )
+  );
+
+  @include bpk-hover {
+    background-image: $bpk-button-selected-hover-background-image;
+    color: $bpk-button-selected-hover-color;
+    box-shadow: $bpk-button-selected-hover-box-shadow;
+
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-pagination-selected-background-color,
+      $bpk-color-sky-blue-shade-02
+    );
+    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
+    @include bpk-border-lg(
+      var(
+        --bpk-pagination-selected-background-color,
+        $bpk-color-sky-blue-shade-02
+      )
+    );
+  }
+
+  &:active {
+    background-image: $bpk-button-selected-active-background-image;
+    color: $bpk-button-selected-active-color;
+    box-shadow: $bpk-button-selected-active-box-shadow;
+
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-pagination-selected-background-color,
+      $bpk-color-sky-blue-shade-02
+    );
+    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
+    @include bpk-border-lg(
+      var(
+        --bpk-pagination-selected-background-color,
+        $bpk-color-sky-blue-shade-02
+      )
+    );
+  }
+
+  &:disabled {
+    box-shadow: $bpk-button-selected-disabled-box-shadow;
+  }
+}

package/bpk-component-pagination/src/themeAttributes.js

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _bpkComponentButton = require("../../bpk-component-button");
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -24,5 +15,12 @@ var _bpkComponentButton = require("../../bpk-component-button");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = [..._bpkComponentButton.secondaryThemeAttributes, 'paginationNudgerActiveColor', 'paginationNudgerColor', 'paginationNudgerHoverColor', 'paginationSelectedBackgroundColor'];
-exports.default = _default;
+import { secondaryThemeAttributes } from '../../bpk-component-button';
+
+export default [
+  ...secondaryThemeAttributes,
+  'paginationNudgerActiveColor',
+  'paginationNudgerColor',
+  'paginationNudgerHoverColor',
+  'paginationSelectedBackgroundColor',
+];

package/bpk-component-panel/README.md

@@ -0,0 +1,33 @@
+# bpk-component-panel
+
+> Backpack panel component.
+
+## Installation
+
+```sh
+npm install bpk-component-panel --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPanel from 'bpk-component-panel';
+
+export default () => (
+  <BpkPanel>
+    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.
+  </BpkPanel>
+);
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| padded    | bool     | false    | true          |
+| fullWidth | bool     | false    | false         |
+| className | string   | false    | null          |