@skyscanner/backpack-web 0.0.6 → 0.1.0

package/bpk-component-input/examples.js

@@ -1,490 +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 PropTypes from 'prop-types';
-import { cssModules } from '../bpk-react-utils';
-import { action } from '../bpk-storybook-utils';
-import BpkLabel from '../bpk-component-label';
-import BpkBannerAlert, { ALERT_TYPES } from '../bpk-component-banner-alert';
-
-import STYLES from './examples.module.scss';
-
-import BpkInput, {
-  propTypes as inputPropTypes,
-  defaultProps as inputDefaultProps,
-  type BpkInputProps,
-  INPUT_TYPES,
-  CLEAR_BUTTON_MODES,
-} from './index';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  ...$Exact<$Diff<BpkInputProps, { value: string }>>,
-  initialValue: string,
-};
-
-type State = {
-  value: string,
-};
-
-const { value: valueProp, ...propTypes } = inputPropTypes;
-
-class ClearableInput extends Component<Props, State> {
-  static propTypes = {
-    ...propTypes,
-    initialValue: PropTypes.string.isRequired,
-  };
-
-  static defaultProps = {
-    ...inputDefaultProps,
-  };
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      value: props.initialValue,
-    };
-  }
-
-  onChange = (e) => {
-    this.setState({ value: e.target.value });
-  };
-
-  onClear = () => {
-    this.setState({ value: '' });
-  };
-
-  render() {
-    const { value } = this.state;
-    const { initialValue, ...rest } = this.props;
-
-    return (
-      <BpkInput
-        {...rest}
-        onChange={this.onChange}
-        onClear={this.onClear}
-        value={value}
-      />
-    );
-  }
-}
-
-const TextExample = () => (
-  <form>
-    <BpkLabel htmlFor="text_value">Search country, city or airport</BpkLabel>
-    <BpkInput
-      id="text_value"
-      name="text_value"
-      value="Edinburgh"
-      onChange={action('input changed')}
-      placeholder="Enter a country, city or airport"
-    />
-  </form>
-);
-
-const PlaceholderExample = () => (
-  <form>
-    <BpkLabel htmlFor="placeholder">Search country, city or airport</BpkLabel>
-    <BpkInput
-      id="placeholder"
-      name="placeholder"
-      value=""
-      onChange={action('input changed')}
-      placeholder="Enter a country, city or airport"
-    />
-  </form>
-);
-
-const ValidExample = () => (
-  <form>
-    <BpkLabel htmlFor="valid">Search country, city or airport</BpkLabel>
-    <BpkInput
-      id="valid"
-      name="valid"
-      value="Edinburgh"
-      onChange={action('input changed')}
-      placeholder="Enter a country, city or airport"
-      valid
-    />
-  </form>
-);
-
-const InvalidExample = () => (
-  <form>
-    <BpkLabel htmlFor="invalid">Search country, city or airport</BpkLabel>
-    <BpkInput
-      id="invalid"
-      name="invalid"
-      value="Edinbrvgh"
-      onChange={action('input changed')}
-      placeholder="Enter a country, city or airport"
-      valid={false}
-    />
-  </form>
-);
-
-const DisabledExample = () => (
-  <form>
-    <BpkLabel htmlFor="disabled">Search country, city or airport</BpkLabel>
-    <BpkInput
-      id="disabled"
-      name="disabled"
-      value="Edinburgh"
-      onChange={action('input changed')}
-      placeholder="Enter a country, city or airport"
-      disabled
-    />
-  </form>
-);
-
-const ClearableExample = () => (
-  <div>
-    <BpkLabel htmlFor="input_clearable">Clearable while editing</BpkLabel>
-    <ClearableInput
-      id="clearable_clearable"
-      name="clearable_clearable"
-      initialValue="Edinburgh"
-      placeholder="Enter a country, city or airport"
-      clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
-      clearButtonLabel="Clear field"
-    />
-
-    <BpkLabel htmlFor="input_clearable_always">Always Clearable</BpkLabel>
-    <ClearableInput
-      id="input_clearable_always"
-      name="input_clearable_always"
-      initialValue="Edinburgh"
-      placeholder="Enter a country, city or airport"
-      valid
-      clearButtonMode={CLEAR_BUTTON_MODES.always}
-      clearButtonLabel="Clear field"
-    />
-
-    <BpkLabel htmlFor="input_large_valid_clearable">
-      Large, valid clearable while editing
-    </BpkLabel>
-    <ClearableInput
-      id="input_large_valid_clearable"
-      name="input_large_valid_clearable"
-      initialValue="Edinburgh"
-      placeholder="Enter a country, city or airport"
-      large
-      valid
-      clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
-      clearButtonLabel="Clear field"
-    />
-  </div>
-);
-
-const EmailInputExample = () => (
-  <form>
-    <BpkLabel htmlFor="email">Enter booking email</BpkLabel>
-    <BpkInput
-      type={INPUT_TYPES.email}
-      id="email"
-      name="email"
-      value="example@example.com"
-      onChange={action('input changed')}
-      placeholder="example@example.com"
-    />
-  </form>
-);
-
-const NumberInputExample = () => (
-  <form>
-    <BpkLabel htmlFor="number">Enter number of travellers</BpkLabel>
-    <BpkInput
-      type={INPUT_TYPES.number}
-      id="number"
-      name="number"
-      value="0"
-      onChange={action('input changed')}
-      placeholder=""
-    />
-  </form>
-);
-
-const PasswordInputExample = () => (
-  <form>
-    <BpkLabel htmlFor="password">Enter a password</BpkLabel>
-    <BpkInput
-      type={INPUT_TYPES.password}
-      id="password"
-      name="password"
-      value="letmein"
-      onChange={action('input changed')}
-      placeholder="Please enter a password"
-    />
-  </form>
-);
-
-const TelephoneInputExample = () => (
-  <form>
-    <BpkLabel htmlFor="telephone">Enter contact telephone number</BpkLabel>
-    <BpkInput
-      type={INPUT_TYPES.tel}
-      id="telephone"
-      name="telephone"
-      value="+441234567890"
-      onChange={action('input changed')}
-      placeholder="Enter your telephone number"
-    />
-  </form>
-);
-
-const LargeInputExample = () => (
-  <form>
-    <BpkLabel htmlFor="large">Search country, city or airport</BpkLabel>
-    <BpkInput
-      id="large"
-      name="large"
-      value="Edinburgh"
-      onChange={action('input changed')}
-      placeholder="Enter a country, city or airport"
-      large
-    />
-  </form>
-);
-
-const DockedExample = () => (
-  <div>
-    <div className={getClassName('bpk-forms__viewport-alert')}>
-      <BpkBannerAlert
-        type={ALERT_TYPES.WARN}
-        message="These are only suitable for larger viewports - try viewing on a desktop device."
-      />
-    </div>
-    <form
-      className={getClassName(
-        'bpk-forms__form',
-        'bpk-forms__form--desktop-only',
-      )}
-    >
-      <div>
-        <BpkLabel
-          htmlFor="input_origin"
-          className={getClassName('bpk-forms__place')}
-        >
-          From
-        </BpkLabel>
-        <BpkLabel
-          htmlFor="input_destination"
-          className={getClassName('bpk-forms__place')}
-        >
-          To
-        </BpkLabel>
-        <BpkLabel
-          htmlFor="input_outbound"
-          className={getClassName('bpk-forms__date')}
-        >
-          Departure date
-        </BpkLabel>
-        <BpkLabel
-          htmlFor="input_inbound"
-          className={getClassName('bpk-forms__date')}
-        >
-          Return date
-        </BpkLabel>
-      </div>
-      <div>
-        <BpkInput
-          id="input_origin"
-          name="input_origin"
-          value="Edinburgh"
-          onChange={action('orign input changed')}
-          className={getClassName('bpk-forms__place')}
-          dockedFirst
-          large
-        />
-        <BpkInput
-          id="input_destination"
-          name="input_destination"
-          value=""
-          onChange={action('destination input changed')}
-          className={getClassName('bpk-forms__place')}
-          dockedMiddle
-          large
-        />
-        <BpkInput
-          id="input_outbound"
-          name="input_outbound"
-          value={new Date().toLocaleDateString()}
-          onChange={action('outbound date input changed')}
-          className={getClassName('bpk-forms__date')}
-          dockedMiddle
-          large
-        />
-        <BpkInput
-          id="input_inbound"
-          name="input_inbound"
-          value={new Date(
-            new Date().getTime() + 24 * 60 * 60 * 1000,
-          ).toLocaleDateString()}
-          onChange={action('inbound date input changed')}
-          className={getClassName('bpk-forms__date')}
-          dockedLast
-          large
-        />
-      </div>
-    </form>
-    <form
-      className={getClassName(
-        'bpk-forms__form',
-        'bpk-forms__form--desktop-only',
-      )}
-    >
-      <div>
-        <BpkLabel
-          htmlFor="input_hotels_destination"
-          className={getClassName('bpk-forms__hotels-destination')}
-        >
-          Destination or hotel name
-        </BpkLabel>
-        <BpkLabel
-          htmlFor="input_checkin"
-          className={getClassName('bpk-forms__date')}
-        >
-          Check-in
-        </BpkLabel>
-        <BpkLabel
-          htmlFor="input_checkout"
-          className={getClassName('bpk-forms__date')}
-        >
-          Check-out
-        </BpkLabel>
-      </div>
-      <div>
-        <BpkInput
-          id="input_hotels_destination"
-          name="input_hotels_destination"
-          value=""
-          onChange={action('hotels destination input changed')}
-          className={getClassName('bpk-forms__hotels-destination')}
-          dockedFirst
-          large
-        />
-        <BpkInput
-          id="input_checkin"
-          name="input_checkin"
-          value={new Date().toLocaleDateString()}
-          onChange={action('checkin date input changed')}
-          className={getClassName('bpk-forms__date')}
-          dockedMiddle
-          large
-        />
-        <BpkInput
-          id="input_checkout"
-          name="input_checkout"
-          value={new Date(
-            new Date().getTime() + 24 * 60 * 60 * 1000,
-          ).toLocaleDateString()}
-          onChange={action('checkout date input changed')}
-          className={getClassName('bpk-forms__date')}
-          dockedLast
-          large
-        />
-      </div>
-    </form>
-  </div>
-);
-
-const ManuallyDockedExample = () => (
-  <div style={{ display: 'flex' }}>
-    <div style={{ width: '100%' }}>
-      <BpkInput
-        id="large"
-        name="large"
-        value="Edinburgh"
-        onChange={action('input changed')}
-        placeholder="Enter a country, city or airport"
-        large
-        valid
-        dockedFirst
-      />
-    </div>
-    <div style={{ width: '100%' }}>
-      <BpkInput
-        id="large"
-        name="large"
-        value="Edinburgh"
-        onChange={action('input changed')}
-        placeholder="Enter a country, city or airport"
-        large
-        valid={false}
-        dockedMiddle
-      />
-    </div>
-    <div style={{ width: '100%' }}>
-      <BpkInput
-        id="large"
-        name="large"
-        value="Edinburgh"
-        onChange={action('input changed')}
-        placeholder="Enter a country, city or airport"
-        large
-        dockedMiddle
-      />
-    </div>
-    <div style={{ width: '100%' }}>
-      <BpkInput
-        id="large"
-        name="large"
-        value="Edinburgh"
-        onChange={action('input changed')}
-        placeholder="Enter a country, city or airport"
-        large
-        dockedLast
-      />
-    </div>
-  </div>
-);
-
-const MixedExample = () => (
-  <div>
-    <TextExample />
-    <PlaceholderExample />
-    <ValidExample />
-    <InvalidExample />
-    <InvalidExample />
-    <DisabledExample />
-    <ClearableExample />
-    <LargeInputExample />
-    <DockedExample />
-  </div>
-);
-
-export {
-  TextExample,
-  PlaceholderExample,
-  ValidExample,
-  InvalidExample,
-  DisabledExample,
-  ClearableExample,
-  EmailInputExample,
-  NumberInputExample,
-  PasswordInputExample,
-  TelephoneInputExample,
-  LargeInputExample,
-  DockedExample,
-  ManuallyDockedExample,
-  MixedExample,
-};

package/bpk-component-input/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-forms__viewport-alert{display:none}@media (max-width: 50.25rem){.bpk-forms__viewport-alert{display:block}}.bpk-forms__form{margin-bottom:0.5rem}@media (max-width: 50.25rem){.bpk-forms__form--desktop-only{display:none}}.bpk-forms__place{display:inline-block;width:32%;vertical-align:bottom}.bpk-forms__date{display:inline-block;width:18%;vertical-align:bottom}.bpk-forms__hotels-destination{display:inline-block;width:48%;vertical-align:bottom}

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

@@ -1,57 +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-forms {
-  &__viewport-alert {
-    display: none;
-
-    @include bpk-breakpoint-tablet {
-      display: block;
-    }
-  }
-
-  &__form {
-    margin-bottom: bpk-spacing-md();
-
-    &--desktop-only {
-      @include bpk-breakpoint-tablet {
-        display: none;
-      }
-    }
-  }
-
-  &__place {
-    display: inline-block;
-    width: 32%;
-    vertical-align: bottom;
-  }
-
-  &__date {
-    display: inline-block;
-    width: 18%;
-    vertical-align: bottom;
-  }
-
-  &__hotels-destination {
-    display: inline-block;
-    width: 48%;
-    vertical-align: bottom;
-  }
-}

package/bpk-component-label/examples.js

@@ -1,67 +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 BpkLabel from './index';
-
-const DefaultExample = () => <BpkLabel htmlFor="origin">Origin</BpkLabel>;
-
-const RequiredExample = () => (
-  <BpkLabel htmlFor="origin" required>
-    Origin
-  </BpkLabel>
-);
-
-const InvalidExample = () => (
-  <BpkLabel htmlFor="origin" valid={false}>
-    Origin
-  </BpkLabel>
-);
-
-const DisabledExample = () => (
-  <BpkLabel htmlFor="origin" disabled>
-    Origin
-  </BpkLabel>
-);
-
-const InvalidRequiredExample = () => (
-  <BpkLabel htmlFor="origin" required valid={false}>
-    Origin
-  </BpkLabel>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <RequiredExample />
-    <InvalidExample />
-    <DisabledExample />
-    <InvalidRequiredExample />
-  </div>
-);
-
-export {
-  DefaultExample,
-  RequiredExample,
-  InvalidExample,
-  DisabledExample,
-  InvalidRequiredExample,
-  MixedExample,
-};