@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-flare/examples.js

@@ -1,158 +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 BpkText, { TEXT_STYLES } from '../bpk-component-text';
-import { cssModules } from '../bpk-react-utils';
-
-import { BpkFlareBar, BpkContentBubble } from './index';
-
-// eslint-disable-next-line import/order
-import STYLES from './examples.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const contentShort = (
-  <div className={getClassName('bpk-flare-stories__content')}>
-    <BpkText tagName="h1" textStyle="xxl">
-      Love planet. Will travel.
-      <BpkText tagName="p" textStyle={TEXT_STYLES.bodyDefault}>
-        Go discover a new adventure.
-      </BpkText>
-    </BpkText>
-  </div>
-);
-const content = (
-  <div className={getClassName('bpk-flare-stories__content')}>
-    <BpkText tagName="h1" textStyle="xxl">
-      Love planet. Will travel.
-      <BpkText tagName="p" textStyle={TEXT_STYLES.bodyDefault}>
-        Lorem ipsum dolor sit amet consectetur adipiscing elit, volutpat tellus
-        massa taciti platea auctor, accumsan egestas cubilia ultricies lacus
-        consequat. Vulputate quisque dignissim habitant urna accumsan tempor
-        praesent, quam torquent sem nascetur cubilia odio, convallis dapibus
-        senectus natoque sociis ante. Cras interdum feugiat quisque per dis
-        lacus cubilia sem, orci sodales mauris a quis mollis duis nam curabitur,
-        laoreet ad eros class aliquet sagittis rutrum. Rhoncus integer mi platea
-        suscipit dictum facilisis, sociis nam enim tincidunt conubia. Himenaeos
-        eros ornare vestibulum laoreet in accumsan, eleifend interdum tellus
-        ligula suspendisse nisl, hac magna conubia habitasse nunc. Ligula mattis
-        euismod libero volutpat ut taciti tincidunt parturient class elementum
-        pellentesque porta, proin magnis fringilla sociosqu rutrum placerat nec
-        lacus tempor fusce netus etiam, cubilia tellus facilisi duis leo morbi
-        mauris at augue varius nunc. Lorem ipsum dolor sit amet consectetur
-        adipiscing elit, volutpat tellus massa taciti platea auctor, accumsan
-        egestas cubilia ultricies lacus consequat. Vulputate quisque dignissim
-        habitant urna accumsan.
-      </BpkText>
-    </BpkText>
-  </div>
-);
-
-const FlareBarExample = () => (
-  <BpkFlareBar
-    className={getClassName('bpk-flare-stories__flare-bar')}
-    svgClassName={getClassName('bpk-flare-stories__flare-bar--svg')}
-  />
-);
-
-const FlareBarRoundedExample = () => (
-  <BpkFlareBar
-    className={getClassName('bpk-flare-stories__flare-bar')}
-    rounded
-    svgClassName={getClassName('bpk-flare-stories__flare-bar--svg')}
-  />
-);
-
-const ContentBubbleFullWithImageExample = () => (
-  <BpkContentBubble
-    className={getClassName(
-      'bpk-flare-stories__content-bubble',
-      'bpk-flare-stories__content-bubble--image',
-      'bpk-flare-stories__content-bubble--full-width',
-      'bpk-flare-stories__content-bubble--fixed-height--large',
-    )}
-    rounded={false}
-  />
-);
-
-const ContentBubbleFullWithContentExample = () => (
-  <BpkContentBubble
-    className={getClassName(
-      'bpk-flare-stories__content-bubble',
-      'bpk-flare-stories__content-bubble--full-width',
-    )}
-    rounded={false}
-    content={content}
-  />
-);
-
-const ContentBubbleStandaloneExample = () => (
-  <BpkContentBubble
-    className={getClassName('bpk-flare-stories__content-bubble')}
-    showPointer
-    rounded={false}
-    content={content}
-  />
-);
-
-const ContentBubbleFixedHeightExample = () => (
-  <BpkContentBubble
-    className={getClassName(
-      'bpk-flare-stories__content-bubble',
-      'bpk-flare-stories__content-bubble--fixed-height',
-    )}
-    rounded={false}
-    content={contentShort}
-  />
-);
-
-const ContentBubblePointerHiddenExample = () => (
-  <BpkContentBubble
-    className={getClassName(
-      'bpk-flare-stories__content-bubble',
-      'bpk-flare-stories__content-bubble--image',
-      'bpk-flare-stories__content-bubble--full-width',
-      'bpk-flare-stories__content-bubble--fixed-height',
-    )}
-    style={{ height: '45rem' }}
-    rounded={false}
-    showPointer={false}
-  />
-);
-
-const MixedExample = () => (
-  <div>
-    <ContentBubbleStandaloneExample />
-    <ContentBubbleFixedHeightExample />
-    <ContentBubbleFullWithContentExample />
-  </div>
-);
-
-export {
-  FlareBarExample,
-  FlareBarRoundedExample,
-  ContentBubbleFullWithImageExample,
-  ContentBubbleFullWithContentExample,
-  ContentBubbleStandaloneExample,
-  ContentBubbleFixedHeightExample,
-  ContentBubblePointerHiddenExample,
-  MixedExample,
-};

package/bpk-component-flare/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-flare-stories{padding:2rem}.bpk-flare-stories__flare-bar{width:100%;margin-bottom:2rem}.bpk-flare-stories__flare-bar--svg{fill:#111236}.bpk-flare-stories__content-bubble{width:100%;max-width:45rem;margin-bottom:2rem;background-color:#5a489b;color:#fff}.bpk-flare-stories__content-bubble--image{background-image:url("https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w")}.bpk-flare-stories__content-bubble--full-width{width:100vw;max-width:none;margin-left:calc(-50vw + 50%)}.bpk-flare-stories__content-bubble--fixed-height{height:12.5rem}.bpk-flare-stories__content-bubble--fixed-height--large{height:45rem}.bpk-flare-stories__content{max-width:45rem;margin:2rem;color:#fff}

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

@@ -1,66 +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;
-
-.bpk-flare-stories {
-  padding: bpk-spacing-xl();
-
-  &__flare-bar {
-    width: 100%;
-    margin-bottom: 2rem;
-
-    &--svg {
-      fill: $bpk-color-sky-gray;
-    }
-  }
-
-  &__content-bubble {
-    width: 100%;
-    max-width: 45rem;
-    margin-bottom: 2rem;
-    background-color: $bpk-color-abisko;
-    color: $bpk-color-white;
-
-    &--image {
-      background-image: url('https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w');
-    }
-
-    &--full-width {
-      width: 100vw;
-      max-width: none;
-      margin-left: calc(-50vw + 50%);
-    }
-
-    &--fixed-height {
-      height: bpk-spacing-xxl() * 5;
-
-      &--large {
-        height: 45rem;
-      }
-    }
-  }
-
-  &__content {
-    max-width: 45rem;
-    margin: bpk-spacing-xl();
-    color: $bpk-color-white;
-  }
-}

package/bpk-component-form-validation/examples.js

@@ -1,171 +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 BpkButton from '../bpk-component-button';
-import BpkSelect from '../bpk-component-select';
-import BpkCheckbox from '../bpk-component-checkbox';
-import BpkTextarea from '../bpk-component-textarea';
-import BpkInput from '../bpk-component-input';
-import { cssModules } from '../bpk-react-utils';
-
-import STYLES from './examples.module.scss';
-
-import BpkFormValidation from './index';
-
-const getClassName = cssModules(STYLES);
-
-const formClassName = getClassName('bpkdocs-forms-page__form');
-
-class FormValidationContainer extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      expanded: true,
-    };
-  }
-
-  toggleExpanded = () => {
-    this.setState((prevState) => ({
-      expanded: !prevState.expanded,
-    }));
-  };
-
-  render() {
-    return (
-      <div>
-        <div style={{ textAlign: 'center' }}>
-          <BpkButton onClick={this.toggleExpanded}>Toggle</BpkButton>
-        </div>
-        <BpkFormValidation expanded={this.state.expanded} {...this.props} />
-      </div>
-    );
-  }
-}
-
-class InputContainer extends Component {
-  constructor(props) {
-    super(props);
-
-    const valueProp = props.FormComponent === BpkCheckbox ? 'checked' : 'value';
-
-    this.state = {
-      value: props[valueProp],
-    };
-  }
-
-  render() {
-    const { FormComponent, ...rest } = this.props;
-
-    let overrideProps = {};
-
-    if (FormComponent === BpkCheckbox) {
-      overrideProps = {
-        checked: this.state.value,
-        onChange: (e) => this.setState({ value: e.target.checked }),
-      };
-    } else {
-      overrideProps = {
-        value: this.state.value,
-        onChange: (e) => this.setState({ value: e.target.value }),
-      };
-      if (FormComponent === BpkInput) {
-        overrideProps.onClear = () => this.setState({ value: '' });
-      }
-    }
-    return <FormComponent {...rest} {...overrideProps} />;
-  }
-}
-
-InputContainer.propTypes = {
-  FormComponent: PropTypes.elementType.isRequired,
-};
-
-const DefaultExample = () => (
-  <FormValidationContainer id="my-validation-message">
-    A validation message
-  </FormValidationContainer>
-);
-
-const FormsExample = () => (
-  <div>
-    <form className={formClassName}>
-      <InputContainer
-        FormComponent={BpkInput}
-        id="input_invalid"
-        name="input_invalid"
-        value="Edinbrvgh"
-        placeholder="Country, city or airport"
-        onChange={() => null}
-        valid={false}
-      />
-      <BpkFormValidation id="form_validation" expanded>
-        Please enter a valid name
-      </BpkFormValidation>
-    </form>
-    <form className={formClassName}>
-      <InputContainer
-        FormComponent={BpkSelect}
-        id="select_invalid"
-        name="select_invalid"
-        value=""
-        onChange={() => null}
-        valid={false}
-      >
-        <option value="" hidden>
-          Please select...
-        </option>
-        <option value="economy">Economy</option>
-        <option value="premium_economy">Premium Economy</option>
-        <option value="business">Business class</option>
-        <option value="first">First class</option>
-      </InputContainer>
-      <BpkFormValidation id="form_validation" expanded isCheckbox>
-        This option is required
-      </BpkFormValidation>
-    </form>
-    <form className={formClassName}>
-      <InputContainer
-        FormComponent={BpkCheckbox}
-        name="checkbox"
-        label="Apples"
-      />
-      <BpkFormValidation id="form_validation" expanded isCheckbox>
-        This checkbox is required
-      </BpkFormValidation>
-    </form>
-    <form className={formClassName}>
-      <InputContainer
-        FormComponent={BpkTextarea}
-        id="textarea"
-        name="textarea"
-        value="@text 123 /}"
-        placeholder="@text 123 /}"
-        onChange={() => null}
-        valid={false}
-      />
-      <BpkFormValidation id="form_validation" expanded>
-        Please enter valid input
-      </BpkFormValidation>
-    </form>
-  </div>
-);
-
-export { DefaultExample, FormsExample };

package/bpk-component-form-validation/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)}}.bpkdocs-forms-page__viewport-alert{display:none}@media (max-width: 50.25rem){.bpkdocs-forms-page__viewport-alert{display:block}}.bpkdocs-forms-page__form{margin-bottom:.75rem}@media (max-width: 50.25rem){.bpkdocs-forms-page__form--desktop-only{display:none}}

package/bpk-component-form-validation/examples.module.scss

@@ -1,39 +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';
-
-.bpkdocs-forms-page {
-  &__viewport-alert {
-    display: none;
-
-    @include bpk-breakpoint-tablet {
-      display: block;
-    }
-  }
-
-  &__form {
-    margin-bottom: $bpk-spacing-sm;
-
-    &--desktop-only {
-      @include bpk-breakpoint-tablet {
-        display: none;
-      }
-    }
-  }
-}