@skyscanner/backpack-web 0.0.5 → 0.2.0

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

@@ -1,189 +0,0 @@
-/*
- * 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

@@ -1,18 +0,0 @@
-/*
- * 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

@@ -1,48 +0,0 @@
-/*
- * 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-icon/examples.js

@@ -1,152 +0,0 @@
-/*
- * 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 from 'react';
-import {
-  colors,
-  lineHeightBase,
-  iconSizeSm,
-  iconSizeLg,
-  lineHeightSm,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import BpkButton from '../bpk-component-button';
-import { BpkList, BpkListItem } from '../bpk-component-list';
-import BpkText, { TEXT_STYLES } from '../bpk-component-text';
-
-import { sm, lg } from './all';
-import SearchIcon from './lg/search';
-import SmallLongArrowRightIcon from './sm/long-arrow-right';
-import LargeLongArrowRightIcon from './lg/long-arrow-right';
-
-import {
-  withAlignment,
-  withButtonAlignment,
-  withLargeButtonAlignment,
-  withRtlSupport,
-} from './index';
-
-const AlignedBaseArrow = withAlignment(
-  SmallLongArrowRightIcon,
-  lineHeightBase,
-  iconSizeSm,
-);
-
-const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
-const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);
-
-const AlignedSmallLongArrowRightIcon = withButtonAlignment(
-  SmallLongArrowRightIcon,
-);
-const AlignedLargeLongArrowRightIcon = withLargeButtonAlignment(
-  LargeLongArrowRightIcon,
-);
-const RtlAlignedLargeLongArrowRightIcon = withRtlSupport(
-  withLargeButtonAlignment(LargeLongArrowRightIcon),
-);
-
-const SmallIconsExample = () => (
-  <BpkList>
-    {Object.keys(sm).map((icon) => {
-      const Icon = sm[icon];
-      return (
-        <BpkListItem key={icon}>
-          <Icon fill={colors.colorSkyGrayTint01} /> <span>{icon}</span>
-        </BpkListItem>
-      );
-    })}
-  </BpkList>
-);
-
-const LargeIconsExample = () => (
-  <BpkList>
-    {Object.keys(lg).map((icon) => {
-      const Icon = lg[icon];
-      return (
-        <BpkListItem key={icon}>
-          <Icon fill={colors.colorSkyGrayTint01} /> <span>{icon}</span>
-        </BpkListItem>
-      );
-    })}
-  </BpkList>
-);
-
-const AlignToBaseTextExample = () => (
-  <BpkText textStyle={TEXT_STYLES.bodyDefault}>
-    Search &nbsp;
-    <AlignedBaseArrow fill={colors.colorSkyGrayTint01} />
-  </BpkText>
-);
-
-const AlignToLargeTextExample = () => (
-  <BpkText textStyle={TEXT_STYLES.bodyLongform}>
-    Search &nbsp;
-    <AlignedLargeLongArrowRightIcon fill={colors.colorSkyGrayTint01} />
-  </BpkText>
-);
-
-const AlignSmallTextToIconExample = () => (
-  <BpkText textStyle={TEXT_STYLES.footnote}>
-    <SearchIcon fill={colors.colorSkyGrayTint01} />
-    <AlignedSpanSmall>&nbsp; Search</AlignedSpanSmall>
-  </BpkText>
-);
-
-const AlignTextToIconExample = () => (
-  <BpkText textStyle={TEXT_STYLES.bodyDefault}>
-    <SearchIcon fill={colors.colorSkyGrayTint01} />
-    <AlignedSpan>&nbsp; Search</AlignedSpan>
-  </BpkText>
-);
-
-const AlignToButtonExample = () => (
-  <BpkButton>
-    Next step <AlignedSmallLongArrowRightIcon fill={colors.colorWhite} />
-  </BpkButton>
-);
-
-const AlignToLargeButtonExample = () => (
-  <BpkButton large>
-    Next step <AlignedLargeLongArrowRightIcon fill={colors.colorWhite} />
-  </BpkButton>
-);
-
-const AlignToLargeButtonRTLExample = () => (
-  <BpkButton large>
-    Search <RtlAlignedLargeLongArrowRightIcon fill={colors.colorWhite} />
-  </BpkButton>
-);
-
-const MixedExample = () => (
-  <div>
-    <SmallIconsExample />
-    <LargeIconsExample />
-  </div>
-);
-
-export {
-  SmallIconsExample,
-  LargeIconsExample,
-  AlignToBaseTextExample,
-  AlignToLargeTextExample,
-  AlignSmallTextToIconExample,
-  AlignTextToIconExample,
-  AlignToButtonExample,
-  AlignToLargeButtonExample,
-  AlignToLargeButtonRTLExample,
-  MixedExample,
-};

package/bpk-component-image/examples.js

@@ -1,216 +0,0 @@
-/*
- * 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 from 'react';
-import BpkMobileScrollContainer from '../bpk-component-mobile-scroll-container';
-import BpkText, { TEXT_STYLES } from '../bpk-component-text';
-import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-import BpkImage, {
-  BpkBackgroundImage,
-  withLazyLoading,
-  withLoadingBehavior,
-  BORDER_RADIUS_STYLES,
-} from './index';
-
-const image =
-  'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
-const documentIfExists = typeof window !== 'undefined' ? document : null;
-const FadingImage = withLoadingBehavior(BpkImage);
-const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
-const FadingLazyLoadedImage = withLoadingBehavior(
-  withLazyLoading(BpkImage, documentIfExists),
-);
-const FadingLazyLoadedBackgroundImage = withLoadingBehavior(
-  withLazyLoading(BpkBackgroundImage, documentIfExists),
-);
-
-const imageWidth = 612;
-const imageHeight = 408;
-
-const DefaultExample = () => (
-  <BpkImage
-    altText="image"
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    src={image}
-  />
-);
-
-const LegacyWidthAndHeightExample = () => (
-  <BpkImage
-    altText="image"
-    width={612}
-    height={408}
-    style={{ width: imageWidth, height: imageHeight }}
-    src={image}
-  />
-);
-
-const RoundedCornersExample = () => (
-  <BpkImage
-    altText="image"
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    src={image}
-    borderRadiusStyle={BORDER_RADIUS_STYLES.sm}
-  />
-);
-
-const FullWidthExample = () => (
-  <BpkImage altText="image" width={612} height={408} src={image} />
-);
-
-const UsingSrcSetExample = () => (
-  <BpkImage
-    altText="image"
-    aspectRatio={612 / 408}
-    src={image}
-    srcSet={`${image}?resize=320px:213px&quality=100 320w,
-      ${image}?resize=640px:226px&quality=100 640w,
-      ${image}?resize=1640px:1427px&quality=100 1640w,
-      ${image}?resize=3200px:2133px&quality=100 3200w`}
-    // The image will take up all but 318px of the viewport.
-    sizes="calc(100vw - 318px)"
-  />
-);
-
-const WithAnimationExample = () => (
-  <FadingImage
-    altText="image"
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    src={image}
-  />
-);
-
-const WithLazyLoadingExample = () => (
-  <LazyLoadedImage
-    altText="image"
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    src={image}
-  />
-);
-
-const WithLazyLoadingAndAnimationExample = () => (
-  <FadingLazyLoadedImage
-    altText="image"
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    src={image}
-  />
-);
-
-const WithinScrollDivExample = () => (
-  <BpkMobileScrollContainer>
-    <div style={{ display: 'flex' }}>
-      <FadingLazyLoadedImage
-        altText="image"
-        aspectRatio={612 / 408}
-        style={{ width: imageWidth, height: imageHeight }}
-        src={image}
-      />
-      <FadingLazyLoadedImage
-        altText="image"
-        aspectRatio={612 / 408}
-        style={{ width: imageWidth, height: imageHeight }}
-        src={image}
-      />
-      <FadingLazyLoadedImage
-        altText="image"
-        aspectRatio={612 / 408}
-        style={{ width: imageWidth, height: imageHeight }}
-        src={image}
-      />
-    </div>
-  </BpkMobileScrollContainer>
-);
-
-const BackgroundImageExample = () => (
-  <BpkBackgroundImage
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    imageStyle={{
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: '50% 50%',
-    }}
-    src={image}
-  >
-    <div style={{ marginLeft: spacingSm, paddingTop: spacingSm }}>
-      <BpkText tagName="h2" textStyle={TEXT_STYLES.subheading}>
-        Lorem ipsum dolor sit amet
-      </BpkText>
-    </div>
-  </BpkBackgroundImage>
-);
-
-const BackgroundImageLegacyPropsExample = () => (
-  <BpkBackgroundImage
-    width={612}
-    height={408}
-    style={{ width: imageWidth, height: imageHeight }}
-    imageStyle={{
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: '50% 50%',
-    }}
-    src={image}
-  >
-    <div style={{ marginLeft: spacingSm, paddingTop: spacingSm }}>
-      <BpkText tagName="h2" textStyle={TEXT_STYLES.subheading}>
-        Lorem ipsum dolor sit amet
-      </BpkText>
-    </div>
-  </BpkBackgroundImage>
-);
-
-const BackgroundImageWithLazyLoadingAndAnimationExample = () => (
-  <FadingLazyLoadedBackgroundImage
-    aspectRatio={612 / 408}
-    style={{ width: imageWidth, height: imageHeight }}
-    imageStyle={{
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: '50% 50%',
-    }}
-    src={image}
-  >
-    <div style={{ marginLeft: spacingSm, paddingTop: spacingSm }}>
-      <BpkText tagName="h2" textStyle={TEXT_STYLES.subheading}>
-        Lorem ipsum dolor sit amet
-      </BpkText>
-    </div>
-  </FadingLazyLoadedBackgroundImage>
-);
-
-export {
-  DefaultExample,
-  LegacyWidthAndHeightExample,
-  RoundedCornersExample,
-  FullWidthExample,
-  UsingSrcSetExample,
-  WithAnimationExample,
-  WithLazyLoadingExample,
-  WithLazyLoadingAndAnimationExample,
-  WithinScrollDivExample,
-  BackgroundImageExample,
-  BackgroundImageLegacyPropsExample,
-  BackgroundImageWithLazyLoadingAndAnimationExample,
-};