@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-text/examples.js

@@ -1,135 +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 { withDefaultProps } from '../bpk-react-utils';
-
-import STYLE from './examples.module.scss';
-
-import BpkText, { TEXT_STYLES } from './index';
-
-const Paragraph = withDefaultProps(BpkText, {
-  textStyle: TEXT_STYLES.bodyLongform,
-  tagName: 'p',
-  className: STYLE['bpk-my-paragraph'],
-});
-
-const DefaultExample = () => (
-  <BpkText>
-    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.
-  </BpkText>
-);
-
-const WithHeadingTagsExample = () => (
-  <div>
-    <BpkText textStyle={TEXT_STYLES.subheading} tagName="h1">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.bodyLongform} tagName="h2">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.label1} tagName="h3">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.bodyDefault} tagName="h3">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.label2} tagName="h4">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.footnote} tagName="h5">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.caption} tagName="h6">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-  </div>
-);
-
-const ParagraphExample = () => (
-  <BpkText textStyle={TEXT_STYLES.bodyDefault} tagName="p">
-    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.
-  </BpkText>
-);
-
-const WithDefaultProps = () => (
-  <div>
-    <Paragraph>
-      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.
-    </Paragraph>
-    <Paragraph>
-      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.
-    </Paragraph>
-  </div>
-);
-
-const HeadingStylesExample = () => (
-  <div>
-    <BpkText textStyle={TEXT_STYLES.hero4} tagName="h5">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.hero5} tagName="h6">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.heading1} tagName="h1">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.heading2} tagName="h4">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h2">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.heading4} tagName="h6">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-    <BpkText textStyle={TEXT_STYLES.heading5} tagName="h4">
-      The quick brown fox jumps over the lazy dog
-    </BpkText>
-  </div>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <WithHeadingTagsExample />
-    <ParagraphExample />
-    <WithDefaultProps />
-  </div>
-);
-
-export {
-  DefaultExample,
-  WithHeadingTagsExample,
-  ParagraphExample,
-  WithDefaultProps,
-  HeadingStylesExample,
-  MixedExample,
-};

package/bpk-component-text/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-my-paragraph{margin-top:.75rem;margin-bottom:.75rem;color:#0770e3}

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

@@ -1,25 +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-my-paragraph {
-  margin-top: $bpk-spacing-sm;
-  margin-bottom: $bpk-spacing-sm;
-  color: $bpk-color-sky-blue;
-}

package/bpk-component-textarea/examples.js

@@ -1,116 +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 { action } from 'bpk-storybook-utils';
-import BpkLabel from '../bpk-component-label';
-
-import BpkTextarea from './index';
-
-const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate repellat assumenda
-necessitatibus reiciendis, porro temporibus expedita excepturi! Nostrum pariatur odit porro, dolorem dignissimos
-laudantium quis, tempore iste non, nam magnam.`;
-
-const DefaultExample = () => (
-  <form>
-    <BpkLabel htmlFor="default">Textarea</BpkLabel>
-    <BpkTextarea
-      id="default"
-      name="default"
-      value={loremIpsum}
-      onChange={action('input changed')}
-      placeholder="Please enter some text"
-    />
-  </form>
-);
-
-const PlaceholderExample = () => (
-  <form>
-    <BpkLabel htmlFor="placeholder">Textarea</BpkLabel>
-    <BpkTextarea
-      id="placeholder"
-      name="placeholder"
-      value=""
-      onChange={action('input changed')}
-      placeholder="Please enter some text"
-    />
-  </form>
-);
-
-const DisabledExample = () => (
-  <form>
-    <BpkLabel htmlFor="disabled">Textarea</BpkLabel>
-    <BpkTextarea
-      id="disabled"
-      name="disabled"
-      value=""
-      onChange={action('input changed')}
-      placeholder="Please enter some text"
-      disabled
-    />
-  </form>
-);
-
-const InvalidExample = () => (
-  <form>
-    <BpkLabel htmlFor="invalid">Textarea</BpkLabel>
-    <BpkTextarea
-      id="invalid"
-      name="invalid"
-      value=""
-      onChange={action('input changed')}
-      placeholder="Please enter some text"
-      valid={false}
-    />
-  </form>
-);
-
-const LargeExample = () => (
-  <form>
-    <BpkLabel htmlFor="large">Textarea</BpkLabel>
-    <BpkTextarea
-      id="large"
-      name="large"
-      large
-      value={loremIpsum}
-      onChange={action('input changed')}
-      placeholder="Please enter some text"
-    />
-  </form>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <PlaceholderExample />
-    <DisabledExample />
-    <InvalidExample />
-    <LargeExample />
-  </div>
-);
-
-export {
-  DefaultExample,
-  PlaceholderExample,
-  DisabledExample,
-  InvalidExample,
-  LargeExample,
-  MixedExample,
-};

package/bpk-component-ticket/examples.js

@@ -1,203 +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 PropTypes from 'prop-types';
-import React from 'react';
-import { cssModules } from '../bpk-react-utils';
-import BpkButton from '../bpk-component-button';
-import ArrowRightIcon from '../bpk-component-icon/sm/long-arrow-right';
-import { withButtonAlignment, withRtlSupport } from '../bpk-component-icon';
-
-import STYLES from './examples.module.scss';
-
-import BpkTicket from './index';
-
-const getClassName = cssModules(STYLES);
-
-const AlignedArrowRightIcon = withButtonAlignment(
-  withRtlSupport(ArrowRightIcon),
-);
-
-const flights = Array(100).fill({
-  price: '143',
-  from: 'LCY',
-  to: 'EDI',
-  departure: '20:50',
-  arrival: '22:10',
-  duration: '1h 20',
-  logo: '//logos.skyscnr.com/images/airlines/BA.png',
-});
-
-const Flight = ({ flight }) => (
-  <BpkTicket
-    className={getClassName('bpk-stories-flight')}
-    stubClassName={getClassName('bpk-stories-flight__stub')}
-    stub={
-      <div className={getClassName('bpk-stories-flight__stub')}>
-        <div className={getClassName('bpk-stories-flight__small')}>
-          8 deals from
-        </div>
-        <div className={getClassName('bpk-stories-flight__price')}>
-          £{flight.price}
-        </div>
-        <BpkButton>
-          Select <AlignedArrowRightIcon fill="white" />
-        </BpkButton>
-      </div>
-    }
-  >
-    <div className={getClassName('bpk-stories-flight__main')}>
-      <div className={getClassName('bpk-stories-flight__flight-overview')}>
-        <img
-          className={getClassName('bpk-stories-flight__logo')}
-          src={flight.logo}
-          alt="BA Logo"
-        />
-        <div className={getClassName('bpk-stories-flight__from')}>
-          <div className={getClassName('bpk-stories-flight__time')}>
-            {flight.departure}
-          </div>
-          <div>{flight.from}</div>
-        </div>
-        <div>{flight.duration}</div>
-        <div className={getClassName('bpk-stories-flight__to')}>
-          <div className={getClassName('bpk-stories-flight__time')}>
-            {flight.arrival}
-          </div>
-          <div>{flight.to}</div>
-        </div>
-      </div>
-      <div className={getClassName('bpk-stories-flight__small')}>
-        Operated by BA Cityflyer
-      </div>
-    </div>
-  </BpkTicket>
-);
-
-Flight.propTypes = {
-  flight: PropTypes.objectOf(PropTypes.string).isRequired,
-};
-
-const DefaultExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet.">
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet,
-    consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-    massa. Cum sociis natoque penatibus et magnis dis parturient montes,
-    nascetur ridiculus mus.
-  </BpkTicket>
-);
-
-const VerticalExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet." vertical>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet,
-    consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-    massa. Cum sociis natoque penatibus et magnis dis parturient montes,
-    nascetur ridiculus mus.
-  </BpkTicket>
-);
-
-const WithoutPaddingExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet." padded={false}>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet,
-    consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-    massa. Cum sociis natoque penatibus et magnis dis parturient montes,
-    nascetur ridiculus mus.
-  </BpkTicket>
-);
-
-const WithoutPaddingImageExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet." padded={false}>
-    <img
-      src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=22b674fb2c751f77f7d80d22c77da67a&auto=format&fit=crop&w=1650&q=80"
-      alt="Thoughtful bear"
-      width={300}
-    />
-  </BpkTicket>
-);
-
-const WithoutNotchesExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet." withNotches={false}>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet,
-    consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-    massa. Cum sociis natoque penatibus et magnis dis parturient montes,
-    nascetur ridiculus mus.
-  </BpkTicket>
-);
-
-const WithoutNotchesVerticalExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet." vertical withNotches={false}>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet,
-    consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-    massa. Cum sociis natoque penatibus et magnis dis parturient montes,
-    nascetur ridiculus mus.
-  </BpkTicket>
-);
-
-const WithHrefExample = () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet." href="#">
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet,
-    consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-    massa. Cum sociis natoque penatibus et magnis dis parturient montes,
-    nascetur ridiculus mus.
-  </BpkTicket>
-);
-
-const DayViewExample = () => (
-  <div style={{ margin: '0 auto', maxWidth: '800px' }}>
-    {flights.map((f, i) => (
-      <Flight flight={f} key={`f-${i.toString()}`} />
-    ))}
-  </div>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <VerticalExample />
-    <WithoutPaddingExample />
-    <WithoutNotchesExample />
-    <WithoutNotchesVerticalExample />
-    <WithHrefExample />
-  </div>
-);
-
-export {
-  DefaultExample,
-  VerticalExample,
-  WithoutPaddingExample,
-  WithoutPaddingImageExample,
-  WithoutNotchesExample,
-  WithoutNotchesVerticalExample,
-  WithHrefExample,
-  DayViewExample,
-  MixedExample,
-};

package/bpk-component-ticket/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-stories-flight{margin-bottom:2rem}.bpk-stories-flight__stub{display:flex;padding:1rem;flex-direction:column;justify-content:center;align-items:center}.bpk-stories-flight__small{color:#68697f;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-stories-flight__logo{width:4rem;height:2rem}.bpk-stories-flight__price{margin:0;font-size:1.5rem;line-height:1.75rem;font-weight:700}@media (max-width: 32.25rem){.bpk-stories-flight__price{font-size:1.25rem;line-height:1.5rem;font-weight:700}}.bpk-stories-flight__flight-overview{display:flex;margin-bottom:1rem;align-items:center;flex:1}.bpk-stories-flight__main{display:flex;height:100%;flex-direction:column}.bpk-stories-flight__from{padding:0 1.5rem;text-align:right}.bpk-stories-flight__to{padding:0 1.5rem}.bpk-stories-flight__duration{padding:0 .75rem}.bpk-stories-flight__time{margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}

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

@@ -1,79 +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-stories-flight {
-  margin-bottom: 2rem;
-
-  &__stub {
-    display: flex;
-    padding: 1rem;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &__small {
-    color: $bpk-color-sky-gray-tint-02;
-
-    @include bpk-text;
-    @include bpk-caption;
-  }
-
-  &__logo {
-    width: 4rem;
-    height: 2rem;
-  }
-
-  &__price {
-    @include bpk-text;
-    @include bpk-heading-3;
-  }
-
-  &__flight-overview {
-    display: flex;
-    margin-bottom: 1rem;
-    align-items: center;
-    flex: 1;
-  }
-
-  &__main {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-  }
-
-  &__from {
-    padding: 0 $bpk-spacing-base;
-    text-align: right;
-  }
-
-  &__to {
-    padding: 0 $bpk-spacing-base;
-  }
-
-  &__duration {
-    padding: 0 $bpk-spacing-sm;
-  }
-
-  &__time {
-    @include bpk-text;
-    @include bpk-subheading;
-  }
-}