@skyscanner/backpack-web 0.0.1

package/bpk-component-horizontal-nav/examples.js

@@ -0,0 +1,189 @@
+/*
+ * 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 React, { Fragment } from 'react';
+import { cssModules } from 'bpk-react-utils';
+import {
+  spacingXs,
+  spacingSm,
+  onePixelRem,
+  colorSkyGrayTint06,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkText from 'bpk-component-text';
+import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+
+import STYLES from './examples.module.scss';
+
+import BpkHorizontalNav, {
+  BpkHorizontalNavItem,
+  HORIZONTAL_NAV_TYPES,
+} from './index';
+
+const getClassName = cssModules(STYLES);
+
+const Separator = () => (
+  <span
+    style={{
+      padding: `${spacingXs} ${spacingSm}`,
+    }}
+  >
+    <span
+      style={{
+        display: 'flex',
+        height: '100%',
+        paddingRight: onePixelRem,
+        backgroundColor: colorSkyGrayTint06,
+      }}
+    />
+  </span>
+);
+
+const DefaultExample = () => (
+  <BpkHorizontalNav>
+    <BpkHorizontalNavItem>Flights</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem selected>Hotels</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem>Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const ScrollToSelectedExample = () => (
+  <Fragment>
+    <BpkText>
+      Note - this story works best when viewing the storybook frame alone
+    </BpkText>
+    <div
+      className={getClassName('bpk-horizontal-nav-stories__narrow-container')}
+    >
+      <BpkHorizontalNav autoScrollToSelected>
+        <BpkHorizontalNavItem>Flights</BpkHorizontalNavItem>
+        <BpkHorizontalNavItem>Hotels</BpkHorizontalNavItem>
+        <BpkHorizontalNavItem selected>Car hire</BpkHorizontalNavItem>
+      </BpkHorizontalNav>
+    </div>
+  </Fragment>
+);
+
+const NotUnderlinedExample = () => (
+  <BpkHorizontalNav showUnderline={false}>
+    <BpkHorizontalNavItem>Flights</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem selected>Hotels</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem>Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const LightAppearanceExample = () => (
+  <BpkDarkExampleWrapper>
+    <BpkHorizontalNav type={HORIZONTAL_NAV_TYPES.light}>
+      <BpkHorizontalNavItem>Flights</BpkHorizontalNavItem>
+      <BpkHorizontalNavItem selected>Hotels</BpkHorizontalNavItem>
+      <BpkHorizontalNavItem>Car hire</BpkHorizontalNavItem>
+    </BpkHorizontalNav>
+  </BpkDarkExampleWrapper>
+);
+
+const UsingCustomScrollColors = () => (
+  <BpkHorizontalNav
+    className={getClassName('bpk-horizontal-nav-custom-scrollers')}
+    leadingScrollIndicatorClassName={getClassName(
+      'bpk-horizontal-nav-custom-scrollers--leading',
+    )}
+    trailingScrollIndicatorClassName={getClassName(
+      'bpk-horizontal-nav-custom-scrollers--trailing',
+    )}
+  >
+    <BpkHorizontalNavItem>Flights</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem selected>Hotels</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem>Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const AnchorTagsExample = () => (
+  <BpkHorizontalNav>
+    <BpkHorizontalNavItem href="#">Flights</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem selected href="#">
+      Hotels
+    </BpkHorizontalNavItem>
+    <BpkHorizontalNavItem href="#">Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const ExtremeExample = () => (
+  <BpkHorizontalNav>
+    <BpkHorizontalNavItem selected>
+      Flights Flights Flights Flights Flights Flights Flights Flights Flights
+      Flights Flights Flights Flights Flights Flights Flights
+    </BpkHorizontalNavItem>
+    <BpkHorizontalNavItem>
+      HotelsHotelsHotelsHotelsHotelsHotels
+    </BpkHorizontalNavItem>
+    <BpkHorizontalNavItem>Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const SpacedAroundExample = () => (
+  <BpkHorizontalNav>
+    <BpkHorizontalNavItem spaceAround>Flights</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem spaceAround>Hotels</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem spaceAround selected>
+      Car hire
+    </BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const DisabledItemExample = () => (
+  <BpkHorizontalNav>
+    <BpkHorizontalNavItem>Flights</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem>Hotels</BpkHorizontalNavItem>
+    <BpkHorizontalNavItem disabled>Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const SeparatorsExample = () => (
+  <BpkHorizontalNav>
+    <BpkHorizontalNavItem selected>Flights</BpkHorizontalNavItem>
+    <Separator />
+    <BpkHorizontalNavItem>Hotels</BpkHorizontalNavItem>
+    <Separator />
+    <BpkHorizontalNavItem>Car hire</BpkHorizontalNavItem>
+  </BpkHorizontalNav>
+);
+
+const MixedExample = () => (
+  <div>
+    <DefaultExample />
+    <LightAppearanceExample />
+    <UsingCustomScrollColors />
+    <DisabledItemExample />
+    <SpacedAroundExample />
+    <SeparatorsExample />
+  </div>
+);
+
+export {
+  DefaultExample,
+  ScrollToSelectedExample,
+  NotUnderlinedExample,
+  LightAppearanceExample,
+  UsingCustomScrollColors,
+  AnchorTagsExample,
+  ExtremeExample,
+  SpacedAroundExample,
+  DisabledItemExample,
+  SeparatorsExample,
+  MixedExample,
+};

package/bpk-component-horizontal-nav/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-horizontal-nav-custom-scrollers{background:#d0eeec}.bpk-horizontal-nav-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #d0eeec, rgba(208,238,236,0));pointer-events:none;left:0}.bpk-horizontal-nav-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #d0eeec, rgba(208,238,236,0));pointer-events:none;right:0}.bpk-horizontal-nav-stories__narrow-container{width:10rem;height:10rem;border-right:0.1rem lightgray solid}.bpk-horizontal-nav-stories__light-appearance-wrapper{padding-top:1rem;padding-bottom:1rem;background-color:#5a489b}

package/bpk-component-horizontal-nav/examples.module.scss

@@ -0,0 +1,48 @@
+/*
+ * 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-spacing-v2: true;
+$custom-color: $bpk-color-sagano;
+
+.bpk-horizontal-nav-custom-scrollers {
+  background: $custom-color;
+
+  &--leading {
+    @include bpk-scroll-indicator-left($custom-color);
+  }
+
+  &--trailing {
+    @include bpk-scroll-indicator-right($custom-color);
+  }
+}
+
+.bpk-horizontal-nav-stories {
+  &__narrow-container {
+    width: 10rem;
+    height: 10rem;
+    border-right: 0.1rem lightgray solid;
+  }
+
+  &__light-appearance-wrapper {
+    padding-top: bpk-spacing-base();
+    padding-bottom: bpk-spacing-base();
+    background-color: $bpk-color-abisko;
+  }
+}

package/bpk-component-horizontal-nav/index.js

@@ -0,0 +1,32 @@
+/*
+ * 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 BpkHorizontalNav, {
+  HORIZONTAL_NAV_TYPES,
+  type Props as NavProps,
+} from './src/BpkHorizontalNav';
+import BpkHorizontalNavItem, {
+  type Props as ItemProps,
+  themeAttributes,
+} from './src/BpkHorizontalNavItem';
+
+export type BpkHorizontalNavProps = NavProps;
+export type BpkHorizontalNavItemProps = ItemProps;
+export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
+export default BpkHorizontalNav;

package/bpk-component-horizontal-nav/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bpk-component-horizontal-nav",
+  "version": "5.1.0",
+  "description": "Backpack horizontal nav 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-mobile-scroll-container": "^3.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": {
+    "@skyscanner/bpk-foundations-web": "^5.0.0",
+    "bpk-component-text": "^6.1.0",
+    "bpk-storybook-utils": "^1.1.0"
+  }
+}

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -0,0 +1,211 @@
+/*
+ * 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 ReactDOM from 'react-dom';
+import { cssModules } from 'bpk-react-utils';
+import React, { Component, type Node } from 'react';
+import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+
+import STYLES from './BpkHorizontalNav.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const HORIZONTAL_NAV_TYPES = {
+  default: 'default',
+  light: 'light',
+};
+
+export type Props = {
+  autoScrollToSelected: boolean,
+  children: Node,
+  showUnderline: boolean,
+  type: $Keys<typeof HORIZONTAL_NAV_TYPES>,
+  className: ?string,
+  leadingScrollIndicatorClassName: ?string,
+  trailingScrollIndicatorClassName: ?string,
+};
+
+const getPos = (ref: ?Element): ?{ left: number, right: number } => {
+  if (!ref) {
+    return null;
+  }
+  const pos = ref.getBoundingClientRect();
+  return pos;
+};
+
+class BpkHorizontalNav extends Component<Props> {
+  selectedItemRef: ?Element;
+
+  scrollRef: ?Element;
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    autoScrollToSelected: PropTypes.bool,
+    className: PropTypes.string,
+    leadingScrollIndicatorClassName: PropTypes.string,
+    showUnderline: PropTypes.bool,
+    trailingScrollIndicatorClassName: PropTypes.string,
+    type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES)),
+  };
+
+  static defaultProps = {
+    autoScrollToSelected: false,
+    className: null,
+    leadingScrollIndicatorClassName: null,
+    showUnderline: true,
+    trailingScrollIndicatorClassName: null,
+    type: HORIZONTAL_NAV_TYPES.default,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.scrollRef = null;
+    this.selectedItemRef = null;
+  }
+
+  componentDidMount = () => {
+    this.scrollSelectedIntoView(false);
+  };
+
+  componentDidUpdate() {
+    this.scrollSelectedIntoView(true);
+  }
+
+  scrollSelectedIntoView = (useSmoothScroll: boolean) => {
+    if (
+      !this.props.autoScrollToSelected ||
+      !this.scrollRef ||
+      !this.selectedItemRef
+    ) {
+      return;
+    }
+
+    // Using find dom node is preferable here over changing the underlying mechanism of BpkHorizontalNavItem to accomodate dom-node refs
+    // eslint-disable-next-line react/no-find-dom-node
+    const selectedItemRef = ((ReactDOM.findDOMNode(
+      this.selectedItemRef,
+    ): any): Element);
+
+    if (!this.scrollRef) {
+      return;
+    }
+
+    const selectedItemPos = getPos(selectedItemRef);
+    if (!selectedItemPos) {
+      return;
+    }
+
+    const scrollPos = getPos(this.scrollRef);
+    if (!scrollPos) {
+      return;
+    }
+
+    // We only need to carry out a scroll if the element is not already fully within the scroll view
+    const needsScroll =
+      selectedItemPos.left < scrollPos.left ||
+      selectedItemPos.right > scrollPos.right;
+
+    if (!needsScroll) {
+      return;
+    }
+
+    const scrollAdjustment = selectedItemPos.left - scrollPos.left;
+    // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
+    if (
+      this.scrollRef &&
+      this.scrollRef.scroll &&
+      typeof this.scrollRef.scroll === 'function' &&
+      useSmoothScroll
+    ) {
+      this.scrollRef.scroll({
+        left: scrollAdjustment,
+        behavior: 'smooth',
+      });
+    } else if (this.scrollRef) {
+      this.scrollRef.scrollLeft = scrollAdjustment;
+    }
+  };
+
+  render() {
+    const {
+      autoScrollToSelected,
+      children: rawChildren,
+      className,
+      leadingScrollIndicatorClassName,
+      showUnderline,
+      trailingScrollIndicatorClassName,
+      type,
+      ...rest
+    } = this.props;
+
+    const classNames = getClassName(
+      'bpk-horizontal-nav',
+      showUnderline && `bpk-horizontal-nav--show-${type}-underline`,
+      className,
+    );
+
+    let children = rawChildren;
+
+    if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
+      children = React.Children.map(rawChildren, (child) => {
+        const childProps = {};
+
+        if (autoScrollToSelected) {
+          if (child && child.props && child.props.selected) {
+            childProps.ref = (ref) => {
+              this.selectedItemRef = ref;
+            };
+          }
+        }
+
+        if (type === HORIZONTAL_NAV_TYPES.light) {
+          childProps.type = HORIZONTAL_NAV_TYPES.light;
+        }
+
+        return child ? React.cloneElement(child, childProps) : null;
+      });
+    }
+
+    return (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <BpkMobileScrollContainer
+        innerContainerTagName="nav"
+        className={classNames}
+        leadingIndicatorClassName={leadingScrollIndicatorClassName}
+        trailingIndicatorClassName={trailingScrollIndicatorClassName}
+        scrollerRef={(ref) => {
+          this.scrollRef = ref;
+        }}
+        {...rest}
+      >
+        <div
+          className={getClassName('bpk-horizontal-nav__list')}
+          role="tablist"
+        >
+          {children}
+        </div>
+      </BpkMobileScrollContainer>
+    );
+  }
+}
+
+export default BpkHorizontalNav;
+export { HORIZONTAL_NAV_TYPES };

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.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-horizontal-nav--show-default-underline{box-shadow:0 1px 0 0 #dddde5 }.bpk-horizontal-nav--show-light-underline{box-shadow:0 1px 0 0 #fff }.bpk-horizontal-nav__list{display:flex;margin:0;padding:0;align-items:stretch;list-style-type:none}

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss

@@ -0,0 +1,37 @@
+/*
+ * 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-horizontal-nav {
+  &--show-default-underline {
+    @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06, '');
+  }
+
+  &--show-light-underline {
+    @include bpk-border-bottom-sm($bpk-color-white, '');
+  }
+
+  &__list {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    align-items: stretch;
+    list-style-type: none;
+  }
+}