@skyscanner/backpack-web 0.0.4 → 0.1.0

package/bpk-component-overlay/examples.js

@@ -1,163 +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.
- */
-/* @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

@@ -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-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

@@ -1,38 +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/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-pagination/examples.js

@@ -1,93 +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 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-panel/examples.js

@@ -1,63 +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 BpkPanel from './index';
-
-const DefaultExample = () => (
-  <BpkPanel>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
-    imperdiet lobortis tellus, non rhoncus erat tincidunt id. Pellentesque
-    consectetur, dolor nec vulputate vehicula, ex metus mattis ante, non dictum
-    mi ante eu arcu.
-  </BpkPanel>
-);
-
-const WithoutPaddingExample = () => (
-  <BpkPanel padded={false}>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
-    imperdiet lobortis tellus, non rhoncus erat tincidunt id. Pellentesque
-    consectetur, dolor nec vulputate vehicula, ex metus mattis ante, non dictum
-    mi ante eu arcu.
-  </BpkPanel>
-);
-
-const FullWidthExample = () => (
-  <BpkPanel fullWidth>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
-    imperdiet lobortis tellus, non rhoncus erat tincidunt id. Pellentesque
-    consectetur, dolor nec vulputate vehicula, ex metus mattis ante, non dictum
-    mi ante eu arcu.
-  </BpkPanel>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <WithoutPaddingExample />
-    <FullWidthExample />
-  </div>
-);
-
-export {
-  DefaultExample,
-  WithoutPaddingExample,
-  FullWidthExample,
-  MixedExample,
-};

package/bpk-component-phone-input/examples.js

@@ -1,181 +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.
- */
-
-/* @flow strict */
-
-import React, { Component } from 'react';
-import BpkFieldSet from '../../bpk-component-fieldset';
-import BpkImage from '../../bpk-component-image';
-
-import BpkPhoneInput from './index';
-
-const DIALING_CODE_TO_ID_MAP = {
-  '1_us': 'us',
-  '1_ca': 'ca',
-  '44_uk': 'uk',
-  '55_br': 'br',
-  '998_uz': 'uz',
-};
-
-const getFlag = (dialingCode) => {
-  const countryCode = DIALING_CODE_TO_ID_MAP[dialingCode];
-  const url = `https://images.skyscnr.com/images/country/flag/header/${countryCode}.png`;
-  return <BpkImage altText="Flag" height={38} width={50} src={url} />;
-};
-
-type Props = {
-  large: boolean,
-  validationMessage: ?string,
-  validNumber: ?string,
-  description: ?string,
-  disabled: boolean,
-  dialingCodeMask: boolean,
-  required: ?boolean,
-  useLongLabels: boolean,
-};
-
-class StoryContainer extends Component<
-  Props,
-  { dialingCode: string, value: string },
-> {
-  static defaultProps = {
-    description: null,
-    dialingCodeMask: false,
-    disabled: false,
-    large: false,
-    required: false,
-    useLongLabels: false,
-    validNumber: null,
-    validationMessage: null,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = { dialingCode: '44_uk', value: '' };
-  }
-
-  onChange = (e: SyntheticInputEvent<HTMLElement>) => {
-    this.setState({ value: e.target.value });
-  };
-
-  onDialingCodeChange = (e: SyntheticInputEvent<HTMLElement>) => {
-    this.setState({ dialingCode: e.target.value });
-  };
-
-  render() {
-    const {
-      description,
-      dialingCodeMask,
-      disabled,
-      large,
-      required,
-      useLongLabels,
-      validNumber,
-      validationMessage,
-    } = this.props;
-    const { dialingCode, value } = this.state;
-
-    let dialingCodeLabel = 'Dialing code';
-    let phoneNumberLabel = 'Telephone number';
-
-    if (useLongLabels) {
-      dialingCodeLabel = dialingCodeLabel.repeat(2);
-      phoneNumberLabel = phoneNumberLabel.repeat(2);
-    }
-
-    return (
-      <BpkFieldSet
-        validationMessage={validationMessage}
-        description={description}
-        disabled={!!disabled}
-        required={!!required}
-      >
-        <BpkPhoneInput
-          id="phone-input-id"
-          name="Telephone input"
-          label={phoneNumberLabel}
-          disabled={disabled}
-          valid={value && validNumber ? validNumber === value : null}
-          large={large}
-          dialingCodeMask={dialingCodeMask}
-          onChange={this.onChange}
-          onDialingCodeChange={this.onDialingCodeChange}
-          value={value}
-          dialingCode={dialingCode}
-          dialingCodes={[
-            { code: '1_us', description: '+1 (US)', numberPrefix: '+1' },
-            { code: '1_ca', description: '+1 (CA)', numberPrefix: '+1' },
-            { code: '44_uk', description: '+44 (UK)', numberPrefix: '+44' },
-            { code: '55_br', description: '+55 (BR)', numberPrefix: '+55' },
-            { code: '998_uz', description: '+998 (UZ)', numberPrefix: '+998' },
-          ]}
-          dialingCodeProps={{
-            id: 'dialing-code',
-            name: 'Dialing code',
-            label: `${dialingCodeLabel}`,
-            'aria-label': 'Dialing code',
-            image: getFlag(dialingCode),
-          }}
-        />
-      </BpkFieldSet>
-    );
-  }
-}
-
-const DefaultExample = () => <StoryContainer />;
-
-const LargeExample = () => <StoryContainer large />;
-
-const WithValidationExample = () => (
-  <StoryContainer
-    validationMessage="Please enter a valid phone number"
-    validNumber="0123456789"
-    description="Enter 0123456789"
-  />
-);
-
-const WithDialingCodeMaskExample = () => <StoryContainer dialingCodeMask />;
-
-const DisabledExample = () => <StoryContainer disabled />;
-
-const RequiredExample = () => <StoryContainer required />;
-
-const DoubleLengthLabelExamples = () => <StoryContainer useLongLabels />;
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <LargeExample />
-    <WithValidationExample />
-    <WithDialingCodeMaskExample />
-    <DisabledExample />
-    <RequiredExample />
-    <DoubleLengthLabelExamples />
-  </div>
-);
-
-export {
-  DefaultExample,
-  LargeExample,
-  WithValidationExample,
-  WithDialingCodeMaskExample,
-  DisabledExample,
-  RequiredExample,
-  DoubleLengthLabelExamples,
-  MixedExample,
-};