@skyscanner/backpack-web 0.0.4 → 0.1.0

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;
-      }
-    }
-  }
-}