@skyscanner/backpack-web 0.0.1

package/bpk-component-overlay/examples.js

@@ -0,0 +1,163 @@
+/*
+ * 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 React from 'react';
+import { cssModules } from 'bpk-react-utils';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkImage, {
+  withLazyLoading,
+  withLoadingBehavior,
+  BORDER_RADIUS_STYLES as IMAGE_BORDER_RADIUS_STYLES,
+} from 'bpk-component-image';
+
+import STYLES from './examples.module.scss';
+
+import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from './index';
+
+const documentIfExists = typeof window !== 'undefined' ? document : null;
+const FadingLazyLoadedImage = withLoadingBehavior(
+  withLazyLoading(BpkImage, documentIfExists),
+);
+
+const OTTAWA_IMG_SRC =
+  'https://images.unsplash.com/photo-1535046460986-c0084bba76f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80';
+
+const getClassName = cssModules(STYLES);
+
+const DefaultExample = () => (
+  <BpkOverlay
+    borderRadiusStyle={BORDER_RADIUS_STYLES.sm}
+    className={getClassName('bpk-overlay-stories__text-story')}
+  >
+    <BpkText>Hotels in Canada</BpkText>
+  </BpkOverlay>
+);
+
+const OverlayTypeNoneExample = () => (
+  <BpkOverlay
+    overlayType={OVERLAY_TYPES.none}
+    className={getClassName('bpk-overlay-stories__text-story')}
+  >
+    <BpkText>Hotels in Canada</BpkText>
+  </BpkOverlay>
+);
+
+const WithForegroundContentExample = () => (
+  <BpkOverlay
+    borderRadiusStyle={BORDER_RADIUS_STYLES.sm}
+    className={getClassName('bpk-overlay-stories__text-story')}
+    foregroundContent={
+      <BpkText
+        textStyle={TEXT_STYLES.xxl}
+        className={getClassName('bpk-overlay-stories__foreground')}
+      >
+        Visit Ottawa, Canada&apos;s illustrious capital
+      </BpkText>
+    }
+  >
+    <BpkText>Hotels in Canada</BpkText>
+  </BpkOverlay>
+);
+
+const WithBpkImageExample = () => (
+  <BpkOverlay>
+    <BpkImage
+      src={OTTAWA_IMG_SRC}
+      altText="Canadian Parliament Building in Ottawa"
+      width={300}
+      height={200}
+    />
+  </BpkOverlay>
+);
+
+const WithBpkImageNoTintExample = () => (
+  <BpkOverlay overlayType={OVERLAY_TYPES.none}>
+    <BpkImage
+      src={OTTAWA_IMG_SRC}
+      altText="Canadian Parliament Building in Ottawa"
+      width={300}
+      height={200}
+    />
+  </BpkOverlay>
+);
+
+const WithBpkImageRoundedExample = () => (
+  <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
+    <BpkImage
+      borderRadiusStyle={BORDER_RADIUS_STYLES.sm}
+      src={OTTAWA_IMG_SRC}
+      altText="Canadian Parliament Building in Ottawa"
+      width={300}
+      height={200}
+    />
+  </BpkOverlay>
+);
+
+const WithBpkImageLazyLoadedExample = () => (
+  <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
+    <FadingLazyLoadedImage
+      borderRadiusStyle={IMAGE_BORDER_RADIUS_STYLES.sm}
+      src={OTTAWA_IMG_SRC}
+      altText="Canadian Parliament Building in Ottawa"
+      width={300}
+      height={200}
+    />
+  </BpkOverlay>
+);
+
+const TextOverlaidOnImageExample = () => (
+  <div>
+    <BpkOverlay
+      foregroundContent={
+        <div className={getClassName('bpk-overlay-stories__foreground')}>
+          <BpkText textStyle={TEXT_STYLES.xxl}>
+            Visit Ottawa, Canada&apos;s illustrious capital
+          </BpkText>
+        </div>
+      }
+    >
+      <BpkImage
+        src={OTTAWA_IMG_SRC}
+        altText="Canadian Parliament Building in Ottawa"
+        width={300}
+        height={200}
+      />
+    </BpkOverlay>
+  </div>
+);
+
+const MixedExample = () => (
+  <div>
+    <DefaultExample />
+    <OverlayTypeNoneExample />
+    <WithForegroundContentExample />
+  </div>
+);
+
+export {
+  DefaultExample,
+  OverlayTypeNoneExample,
+  WithForegroundContentExample,
+  WithBpkImageExample,
+  WithBpkImageNoTintExample,
+  WithBpkImageRoundedExample,
+  WithBpkImageLazyLoadedExample,
+  TextOverlaidOnImageExample,
+  MixedExample,
+};

package/bpk-component-overlay/examples.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-overlay-stories__text-story{height:9rem;padding:1.125rem;background-color:#e1ddec;border-radius:.375rem}.bpk-overlay-stories__foreground{display:flex;height:100%;padding-bottom:2.25rem;justify-content:center;align-items:flex-end;color:#fff}

package/bpk-component-overlay/examples.module.scss

@@ -0,0 +1,38 @@
+/*
+ * 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-overlay-stories {
+  &__text-story {
+    height: $bpk-spacing-xl * 4;
+    padding: $bpk-spacing-md;
+    background-color: $bpk-color-tochigi;
+
+    @include bpk-border-radius-sm;
+  }
+
+  &__foreground {
+    display: flex;
+    height: 100%;
+    padding-bottom: $bpk-spacing-xl;
+    justify-content: center;
+    align-items: flex-end;
+    color: $bpk-color-white;
+  }
+}

package/bpk-component-overlay/index.js

@@ -0,0 +1,28 @@
+/*
+ * 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 BpkOverlay, {
+  OVERLAY_TYPES,
+  BORDER_RADIUS_STYLES,
+  type Props as BpkOverlayProps,
+} from './src/BpkOverlay';
+
+export type { BpkOverlayProps };
+export default BpkOverlay;
+export { OVERLAY_TYPES, BORDER_RADIUS_STYLES };

package/bpk-component-overlay/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-overlay",
+  "version": "2.1.0",
+  "description": "Backpack overlay 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-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-image": "^5.1.0",
+    "bpk-component-text": "^6.1.0"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
+}

package/bpk-component-overlay/src/BpkOverlay.js

@@ -0,0 +1,88 @@
+/*
+ * 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 './BpkOverlay.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const OVERLAY_TYPES = {
+  none: 'none',
+  tint: 'tint',
+};
+
+export const BORDER_RADIUS_STYLES = {
+  none: 'none',
+  sm: 'sm',
+};
+
+export type Props = {
+  borderRadiusStyle: $Keys<typeof BORDER_RADIUS_STYLES>,
+  children: Node,
+  overlayType: $Keys<typeof OVERLAY_TYPES>,
+  className: ?string,
+  foregroundContent: ?Node,
+};
+
+const BpkOverlay = (props: Props) => {
+  const {
+    borderRadiusStyle,
+    children,
+    className,
+    foregroundContent,
+    overlayType,
+    ...rest
+  } = props;
+
+  const wrapperClassNames = getClassName('bpk-overlay__wrapper', className);
+  const overlayClassNames = getClassName(
+    'bpk-overlay__overlay',
+    borderRadiusStyle === BORDER_RADIUS_STYLES.sm &&
+      'bpk-overlay__overlay--border-radius-sm',
+    overlayType === OVERLAY_TYPES.tint && 'bpk-overlay__overlay--tint',
+  );
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <div className={wrapperClassNames} {...rest}>
+      {children}
+      <div className={overlayClassNames}>{foregroundContent}</div>
+    </div>
+  );
+};
+
+BpkOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  borderRadiusStyle: PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
+  className: PropTypes.string,
+  foregroundContent: PropTypes.node,
+  overlayType: PropTypes.oneOf(Object.keys(OVERLAY_TYPES)),
+};
+
+BpkOverlay.defaultProps = {
+  borderRadiusStyle: BORDER_RADIUS_STYLES.none,
+  className: null,
+  foregroundContent: null,
+  overlayType: OVERLAY_TYPES.tint,
+};
+
+export default BpkOverlay;

package/bpk-component-overlay/src/BpkOverlay.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-overlay__wrapper{position:relative}.bpk-overlay__overlay{position:absolute;top:0;left:0;width:100%;height:100%}.bpk-overlay__overlay--tint{background:rgba(2,18,44,0.56)}.bpk-overlay__overlay--border-radius-sm{border-radius:.375rem}

package/bpk-component-overlay/src/BpkOverlay.module.scss

@@ -0,0 +1,41 @@
+/*
+ * 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-overlay {
+  &__wrapper {
+    position: relative;
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &--tint {
+      background: rgba($bpk-color-sky-blue-shade-03, 0.56);
+    }
+
+    &--border-radius-sm {
+      @include bpk-border-radius-sm;
+    }
+  }
+}

package/bpk-component-pagination/README.md

@@ -0,0 +1,59 @@
+# bpk-component-pagination
+
+> Backpack pagination component.
+
+## Installation
+
+```sh
+npm install bpk-component-pagination --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPagination from 'bpk-component-pagination';
+
+const Pagination = () => (
+  <BpkPagination
+    pageCount={20}
+    selectedPageIndex={0}
+    onPageChange={pageIndex => alert(`page ${pageIndex + 1}`)}
+    previousLabel="previous"
+    nextLabel="next"
+    visibleRange={3}
+    pageLabel={(page, isSelected) => `page ${page}`}
+  />
+);
+
+```
+
+## Props
+
+| Property          | PropType             | Required | Default Value |
+| ----------------- | -------------------- | -------- | ------------- |
+| pageCount         | number               | true     | -             |
+| selectedPageIndex | number               | true     | -             |
+| previousLabel     | string               | true     | -             |
+| nextLabel         | string               | true     | -             |
+| paginationLabel   | string               | true     | -             |
+| pageLabel         | func                 | true     | -             |
+| onPageChange      | func                 | false    | null          |
+| visibleRange      | number               | false    | 3             |
+| className         | string               | false    | null          |
+
+## Theme Props
+
+* `buttonSecondaryTextColor`
+* `buttonSecondaryHoverTextColor`
+* `buttonSecondaryActiveTextColor`
+* `buttonSecondaryBorderColor`
+* `buttonSecondaryHoverBorderColor`
+* `buttonSecondaryActiveBorderColor`
+* `buttonSecondaryBackgroundColor`
+* `buttonSecondaryHoverBackgroundColor`
+* `buttonSecondaryActiveBackgroundColor`
+* `paginationNudgerActiveColor`
+* `paginationNudgerColor`
+* `paginationNudgerHoverColor`
+* `paginationSelectedBackgroundColor`

package/bpk-component-pagination/examples.js

@@ -0,0 +1,93 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import BpkPagination from './index';
+
+class PaginationContainer extends Component {
+  constructor(props) {
+    super();
+
+    this.state = {
+      pageIndex: props.selectedPageIndex,
+    };
+  }
+
+  handleChange(pageIndex) {
+    this.setState({ pageIndex });
+  }
+
+  render() {
+    const { pageCount, visibleRange } = this.props;
+    return (
+      <div>
+        Page {this.state.pageIndex + 1}
+        <BpkPagination
+          pageCount={pageCount}
+          selectedPageIndex={this.state.pageIndex}
+          onPageChange={(pageIndex) => {
+            this.handleChange(pageIndex);
+          }}
+          previousLabel="previous"
+          nextLabel="next"
+          visibleRange={visibleRange}
+          paginationLabel="Pagination Navigation"
+          pageLabel={(page, isSelected) =>
+            `Go to page ${page}${
+              isSelected ? ', this is the current page' : ''
+            }.`
+          }
+        />
+      </div>
+    );
+  }
+}
+PaginationContainer.propTypes = {
+  selectedPageIndex: PropTypes.number,
+  pageCount: PropTypes.number.isRequired,
+  visibleRange: PropTypes.number,
+};
+
+PaginationContainer.defaultProps = {
+  visibleRange: 3,
+  selectedPageIndex: 0,
+};
+
+const DefaultPaginationExample = () => <PaginationContainer pageCount={20} />;
+
+const FivePagesPaginationExample = () => (
+  <PaginationContainer pageCount={20} visibleRange={5} />
+);
+
+const TwoPagesPaginationExample = () => <PaginationContainer pageCount={2} />;
+
+const SinglePaginationExample = () => <PaginationContainer pageCount={1} />;
+
+const VisibleRangeExample = () => (
+  <PaginationContainer pageCount={20} visibleRange={5} selectedPageIndex={6} />
+);
+
+export {
+  DefaultPaginationExample,
+  FivePagesPaginationExample,
+  TwoPagesPaginationExample,
+  SinglePaginationExample,
+  VisibleRangeExample,
+};

package/bpk-component-pagination/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.
+ */
+
+import BpkPagination from './src/BpkPagination';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkPagination;
+export { themeAttributes };

package/bpk-component-pagination/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-pagination",
+  "version": "3.1.0",
+  "description": "Backpack pagination 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-component-button": "^5.1.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-icon": "^9.2.0"
+  }
+}