@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-autosuggest/examples.js

@@ -1,201 +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 { withRtlSupport } from '../bpk-component-icon';
-import FlightIcon from '../bpk-component-icon/lg/flight';
-
-import BpkAutosuggest, { BpkAutosuggestSuggestion } from './index';
-
-const BpkFlightIcon = withRtlSupport(FlightIcon);
-
-const offices = [
-  {
-    name: 'Barcelona',
-    code: 'BCN',
-    country: 'Spain',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Beijing',
-    code: 'Any',
-    country: 'China',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Budapest',
-    code: 'BUD',
-    country: 'Hungary',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Edinburgh',
-    code: 'EDI',
-    country: 'United Kingdom',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Glasgow',
-    code: 'Any',
-    country: 'United Kingdom',
-    indent: true,
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'London',
-    code: 'Any',
-    country: 'United Kingdom',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Miami, FL',
-    code: 'Any',
-    country: 'United States',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: "Shenzhen Bao'an International",
-    code: 'SZX',
-    country: 'China',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Singapore Changi',
-    code: 'SIN',
-    country: 'Singapore',
-    tertiaryLabel: 'Tertiary label',
-  },
-  {
-    name: 'Sofia',
-    code: 'SOF',
-    country: 'Bulgaria',
-    tertiaryLabel: 'Tertiary label',
-  },
-];
-
-const dataHanzi = [
-  {
-    name: '深圳寶安國際 (Shenzhen)',
-    code: 'SZX',
-    country: '中國',
-    tertiaryLabel: '三級標籤',
-  },
-];
-
-const getSuggestions = (value, hanzi) => {
-  const inputValue = value.trim().toLowerCase();
-  const inputLength = inputValue.length;
-
-  const data = hanzi ? dataHanzi : offices;
-
-  return inputLength === 0
-    ? []
-    : data.filter(
-      (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
-    );
-};
-
-const getSuggestionValue = (suggestion) =>
-  `${suggestion.name} (${suggestion.code})`;
-
-type State = {
-  value: string,
-  suggestions: Array<any>,
-};
-
-type Props = {
-  hanzi: boolean,
-  includeIcon: boolean,
-  includeSubheading: boolean,
-  includeTertiaryLabel: boolean,
-};
-
-class AutosuggestExample extends React.Component<Props, State> {
-  static defaultProps = {
-    hanzi: false,
-    includeIcon: false,
-    includeSubheading: false,
-    includeTertiaryLabel: false,
-  };
-
-  constructor() {
-    super();
-
-    this.state = {
-      value: '',
-      suggestions: [],
-    };
-  }
-
-  onChange = (e: SyntheticEvent<any>, { newValue }: { newValue: string }) => {
-    this.setState({
-      value: newValue,
-    });
-  };
-
-  onSuggestionsFetchRequested = ({ value }: { value: string }) => {
-    this.setState({
-      suggestions: getSuggestions(value, this.props.hanzi),
-    });
-  };
-
-  onSuggestionsClearRequested = () => {
-    this.setState({
-      suggestions: [],
-    });
-  };
-
-  render() {
-    const { suggestions, value } = this.state;
-
-    const { includeIcon, includeSubheading, includeTertiaryLabel } = this.props;
-
-    const inputProps = {
-      id: 'my-autosuggest',
-      name: 'my_autosuggest',
-      value,
-      placeholder: 'Enter an office name',
-      onChange: this.onChange,
-    };
-
-    return (
-      <BpkAutosuggest
-        suggestions={suggestions}
-        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-        getSuggestionValue={getSuggestionValue}
-        renderSuggestion={(suggestion) => (
-          <BpkAutosuggestSuggestion
-            value={getSuggestionValue(suggestion)}
-            indent={suggestion.indent}
-            icon={includeIcon ? BpkFlightIcon : null}
-            subHeading={includeSubheading ? suggestion.country : null}
-            tertiaryLabel={
-              includeTertiaryLabel ? suggestion.tertiaryLabel : null
-            }
-          />
-        )}
-        inputProps={inputProps}
-      />
-    );
-  }
-}
-
-export default AutosuggestExample;

package/bpk-component-badge/BadgeLayout.js

@@ -1,54 +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, { type Node } from 'react';
-import { cssModules } from '../bpk-react-utils';
-
-import STYLES from './BpkBadgeLayout.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-export type Props = {
-  docked: ?string,
-  children: Node,
-};
-
-const BadgeLayout = (props: Props) => {
-  const { children, docked } = props;
-  const classNames = [getClassName('bpk-badge-layout__container')];
-
-  if (docked) {
-    classNames.push(getClassName('bpk-badge-layout__container--light'));
-  }
-
-  return <div className={classNames.join(' ')}>{children}</div>;
-};
-
-BadgeLayout.propTypes = {
-  docked: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-BadgeLayout.defaultProps = {
-  docked: null,
-};
-
-export default BadgeLayout;

package/bpk-component-badge/BpkBadgeLayout.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-badge-layout__container{position:relative;display:flex;min-height:2.5rem;padding:1.5rem}.bpk-badge-layout__container--light{background-color:#f1f2f8;border-radius:.25rem}

package/bpk-component-badge/BpkBadgeLayout.module.scss

@@ -1,36 +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-spacing-v2: true;
-
-.bpk-badge-layout {
-  &__container {
-    position: relative;
-    display: flex;
-    min-height: bpk-spacing-xxl();
-    padding: bpk-spacing-lg();
-
-    &--light {
-      background-color: $bpk-color-sky-gray-tint-07;
-
-      @include bpk-border-radius-xs;
-    }
-  }
-}

package/bpk-component-badge/examples.js

@@ -1,207 +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 BpkSmallBeerIcon from '../bpk-component-icon/sm/beer';
-import BpkSmallFlightIcon from '../bpk-component-icon/sm/flight';
-import BpkSmallWeatherIcon from '../bpk-component-icon/sm/weather';
-import BpkSmallTickIcon from '../bpk-component-icon/sm/tick-circle';
-import BpkSmallCloseIcon from '../bpk-component-icon/sm/close-circle';
-import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
-
-import BadgeLayout from './BadgeLayout';
-
-import BpkBadge, { BADGE_TYPES } from './index';
-
-const DefaultExample = () => (
-  <BadgeLayout>
-    <div>
-      <BpkBadge>Apples</BpkBadge>&nbsp;
-      <BpkBadge>Bananas</BpkBadge>&nbsp;
-      <BpkBadge>Cherries</BpkBadge>&nbsp;
-      <BpkBadge>Dragonfruit</BpkBadge>
-    </div>
-  </BadgeLayout>
-);
-
-const WithIconsExample = () => (
-  <BadgeLayout>
-    <BpkBadge>
-      <BpkSmallFlightIcon />
-      &nbsp;Flights
-    </BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.success}>
-      <BpkSmallWeatherIcon /> + <BpkSmallBeerIcon />
-      &nbsp;Drinks in the sun
-    </BpkBadge>
-    &nbsp;
-    <BpkBadge>
-      <BpkSmallWeatherIcon /> + <BpkSmallBeerIcon />
-    </BpkBadge>
-  </BadgeLayout>
-);
-
-const CenteredExample = () => (
-  <BadgeLayout>
-    <div>
-      The badge is aligned to the centre of this text.{' '}
-      <BpkBadge centered>Centered</BpkBadge>
-    </div>
-  </BadgeLayout>
-);
-
-const DockedLeadingExample = () => (
-  <BadgeLayout docked="left">
-    <BpkBadge docked="left">Advert</BpkBadge>
-  </BadgeLayout>
-);
-
-const DockedTrailingExample = () => (
-  <BadgeLayout docked="right">
-    <BpkBadge docked="right">Advert</BpkBadge>
-  </BadgeLayout>
-);
-
-const WarningExample = () => (
-  <BadgeLayout>
-    <BpkBadge type={BADGE_TYPES.warning}>Warning</BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.warning}>
-      <BpkSmallTickIcon /> &nbsp;Warning
-    </BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.warning}>
-      Warning&nbsp; <BpkSmallTickIcon />
-    </BpkBadge>
-  </BadgeLayout>
-);
-
-const SuccessExample = () => (
-  <BadgeLayout>
-    <BpkBadge type={BADGE_TYPES.success}>Success</BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.success}>
-      <BpkSmallTickIcon />
-      &nbsp;Success
-    </BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.success}>
-      Success&nbsp;
-      <BpkSmallTickIcon />
-    </BpkBadge>
-  </BadgeLayout>
-);
-
-const DestructiveExample = () => (
-  <BadgeLayout>
-    <BpkBadge type={BADGE_TYPES.destructive}>Destructive</BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.destructive}>
-      <BpkSmallCloseIcon />
-      &nbsp;Destructive
-    </BpkBadge>
-    &nbsp;
-    <BpkBadge type={BADGE_TYPES.destructive}>
-      Destructive&nbsp;
-      <BpkSmallCloseIcon />
-    </BpkBadge>
-  </BadgeLayout>
-);
-
-const LightExample = () => (
-  <BpkDarkExampleWrapper>
-    <BadgeLayout>
-      <BpkBadge type={BADGE_TYPES.light}>Light</BpkBadge>
-      &nbsp;
-      <BpkBadge type={BADGE_TYPES.light}>
-        <BpkSmallTickIcon />
-        &nbsp;Light
-      </BpkBadge>
-      &nbsp;
-      <BpkBadge type={BADGE_TYPES.light}>
-        Light&nbsp;
-        <BpkSmallTickIcon />
-      </BpkBadge>
-    </BadgeLayout>
-  </BpkDarkExampleWrapper>
-);
-
-const InverseExample = () => (
-  <BpkDarkExampleWrapper>
-    <BadgeLayout>
-      <BpkBadge type={BADGE_TYPES.inverse}>Inverse</BpkBadge>
-      &nbsp;
-      <BpkBadge type={BADGE_TYPES.inverse}>
-        <BpkSmallTickIcon />
-        &nbsp;Inverse
-      </BpkBadge>
-      &nbsp;
-      <BpkBadge type={BADGE_TYPES.inverse}>
-        Inverse&nbsp;
-        <BpkSmallTickIcon />
-      </BpkBadge>
-    </BadgeLayout>
-  </BpkDarkExampleWrapper>
-);
-
-const OutlineExample = () => (
-  <BpkDarkExampleWrapper>
-    <BadgeLayout>
-      <BpkBadge type={BADGE_TYPES.outline}>Outline</BpkBadge>
-      &nbsp;
-      <BpkBadge type={BADGE_TYPES.outline}>
-        <BpkSmallTickIcon />
-        &nbsp;Outline
-      </BpkBadge>
-      &nbsp;
-      <BpkBadge type={BADGE_TYPES.outline}>
-        Outline&nbsp; <BpkSmallTickIcon />
-      </BpkBadge>
-    </BadgeLayout>
-  </BpkDarkExampleWrapper>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <WarningExample />
-    <SuccessExample />
-    <DestructiveExample />
-    <LightExample />
-    <InverseExample />
-    <OutlineExample />
-  </div>
-);
-
-export {
-  DefaultExample,
-  WithIconsExample,
-  CenteredExample,
-  DockedLeadingExample,
-  DockedTrailingExample,
-  WarningExample,
-  SuccessExample,
-  DestructiveExample,
-  LightExample,
-  InverseExample,
-  OutlineExample,
-  MixedExample,
-};