@skyscanner/backpack-web 0.0.4 → 0.1.0

package/bpk-component-skip-link/examples.js

@@ -1,40 +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 BpkSkipLink from './index';
-
-const DefaultExample = () => (
-  <BpkSkipLink
-    style={{ position: 'absolute' }}
-    href="#main"
-    label="Skip to main content"
-  />
-);
-
-const DocsSiteExample = () => (
-  <BpkSkipLink
-    style={{ position: 'absolute' }}
-    href="#implementation"
-    label="Skip to implementation"
-  />
-);
-
-export { DefaultExample, DocsSiteExample };

package/bpk-component-slider/examples.js

@@ -1,122 +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 { updateOnDirectionChange } from '../../bpk-component-rtl-toggle';
-
-import BpkSlider from './index';
-
-class SliderContainer extends Component {
-  constructor(props) {
-    super();
-
-    this.state = {
-      value: props.value || 50,
-    };
-  }
-
-  handleChange = (value) => {
-    this.setState({ value });
-  };
-
-  valueTimeFormatter = (value) => `12:${value.toString().padStart(2, '0')}pm`;
-
-  valueComponent = (min, max, formatter) => (
-    <p>
-      {formatter ? formatter(min) : min} - {formatter ? formatter(max) : max}
-    </p>
-  );
-
-  render() {
-    const min = this.props.min || 0;
-    const time = !!this.props.time;
-
-    return (
-      <div>
-        {this.state.value.length
-          ? this.valueComponent(
-            this.state.value[0],
-            this.state.value[1],
-            time && this.valueTimeFormatter,
-          )
-          : this.valueComponent(
-            min,
-            this.state.value,
-            time && this.valueTimeFormatter,
-          )}
-        <BpkSlider
-          min={min}
-          max={time ? 59 : 100}
-          step={1}
-          className="bpk-slider"
-          onChange={this.handleChange}
-          {...this.props}
-          value={this.state.value}
-          ariaLabel={['minimum', 'maximum']}
-          ariaValuetext={time ? (s) => this.valueTimeFormatter(s.value) : null}
-        />
-        <br />
-      </div>
-    );
-  }
-}
-
-SliderContainer.propTypes = {
-  time: PropTypes.bool,
-  min: PropTypes.number.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.number),
-    PropTypes.number,
-  ]).isRequired,
-};
-
-SliderContainer.defaultProps = {
-  time: false,
-};
-
-const EnhancedSlider = updateOnDirectionChange(SliderContainer);
-
-const SimpleSlider = () => <EnhancedSlider min={0} value={50} />;
-const SimpleLargeSlider = () => <EnhancedSlider min={0} value={50} large />;
-const TimeSlider = () => <EnhancedSlider time min={0} value={50} large />;
-const SimpleSliderWithSteps = () => (
-  <EnhancedSlider min={0} value={50} step={10} />
-);
-const RangeSlider = () => <EnhancedSlider min={0} value={[20, 80]} />;
-const RangeSliderWithMinimumDistance = () => (
-  <EnhancedSlider min={0} value={[20, 80]} minDistance={10} />
-);
-
-const MixedExample = () => (
-  <div>
-    <SimpleSlider />
-    <SimpleLargeSlider />
-    <RangeSlider />
-  </div>
-);
-
-export {
-  SimpleSlider,
-  SimpleLargeSlider,
-  TimeSlider,
-  SimpleSliderWithSteps,
-  RangeSlider,
-  RangeSliderWithMinimumDistance,
-  MixedExample,
-};

package/bpk-component-spinner/SpinnerLayout.js

@@ -1,56 +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, { Children, type Node } from 'react';
-import { cssModules } from '../bpk-react-utils';
-
-import STYLES from './SpinnerLayout.module.scss';
-
-import { SPINNER_TYPES } from './index';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-};
-
-const SpinnerLayout = (props: Props) => {
-  const { children } = props;
-  return (
-    <div className={getClassName('bpk-spinner-layout')}>
-      {Children.map(children, (child) => {
-        const classNames = [getClassName('bpk-spinner-layout__spinner')];
-
-        if (child.props.type === SPINNER_TYPES.light) {
-          classNames.push(getClassName('bpk-spinner-layout__spinner--light'));
-        }
-
-        return <div className={classNames.join(' ')}>{child}</div>;
-      })}
-    </div>
-  );
-};
-
-SpinnerLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default SpinnerLayout;

package/bpk-component-spinner/SpinnerLayout.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-spinner-layout{display:flex;flex-direction:column}.bpk-spinner-layout__spinner{display:flex;padding:1.5rem;justify-content:center}.bpk-spinner-layout__spinner--light{background-color:#444560;border-radius:.25rem}

package/bpk-component-spinner/SpinnerLayout.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-spinner-layout {
-  display: flex;
-  flex-direction: column;
-
-  &__spinner {
-    display: flex;
-    padding: $bpk-spacing-base;
-    justify-content: center;
-
-    &--light {
-      background-color: $bpk-color-sky-gray-tint-01;
-
-      @include bpk-border-radius-xs;
-    }
-  }
-}

package/bpk-component-spinner/examples.js

@@ -1,56 +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 SpinnerLayout from './SpinnerLayout';
-
-import {
-  BpkSpinner,
-  BpkLargeSpinner,
-  BpkExtraLargeSpinner,
-  SPINNER_TYPES,
-} from './index';
-
-const Small = () => (
-  <SpinnerLayout>
-    <BpkSpinner type={SPINNER_TYPES.primary} />
-    <BpkSpinner type={SPINNER_TYPES.dark} />
-    <BpkSpinner type={SPINNER_TYPES.light} />
-  </SpinnerLayout>
-);
-
-const Large = () => (
-  <SpinnerLayout>
-    <BpkLargeSpinner type={SPINNER_TYPES.primary} />
-    <BpkLargeSpinner type={SPINNER_TYPES.dark} />
-    <BpkLargeSpinner type={SPINNER_TYPES.light} />
-  </SpinnerLayout>
-);
-
-const ExtraLarge = () => (
-  <SpinnerLayout>
-    <BpkExtraLargeSpinner type={SPINNER_TYPES.primary} />
-    <BpkExtraLargeSpinner type={SPINNER_TYPES.dark} />
-    <BpkExtraLargeSpinner type={SPINNER_TYPES.light} />
-  </SpinnerLayout>
-);
-
-export { Small, Large, ExtraLarge };

package/bpk-component-star-rating/examples.js

@@ -1,195 +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 {
-  BpkTable,
-  BpkTableBody,
-  BpkTableRow,
-  BpkTableCell,
-  BpkTableHead,
-  BpkTableHeadCell,
-} from '../../bpk-component-table';
-
-import BpkInteractiveStarRating from './src/BpkInteractiveStarRating';
-import withInteractiveStarRatingState from './src/withInteractiveStarRatingState';
-
-import BpkStarRating, { BpkStar, STAR_TYPES, ROUNDING_TYPES } from './index';
-
-const InteractiveStarRating = withInteractiveStarRatingState(
-  BpkInteractiveStarRating,
-);
-const StarRating = (props) => (
-  <BpkStarRating ratingLabel={(r, m) => `${r} out of ${m} stars`} {...props} />
-);
-
-const FullExample = () => (
-  <BpkTable>
-    <BpkTableHead>
-      <BpkTableRow>
-        <BpkTableHeadCell>State</BpkTableHeadCell>
-        <BpkTableHeadCell>Small</BpkTableHeadCell>
-        <BpkTableHeadCell>Large</BpkTableHeadCell>
-      </BpkTableRow>
-    </BpkTableHead>
-    <BpkTableBody>
-      <BpkTableRow>
-        <BpkTableCell>Empty</BpkTableCell>
-        <BpkTableCell>
-          <BpkStar type={STAR_TYPES.EMPTY} />
-        </BpkTableCell>
-        <BpkTableCell>
-          <BpkStar type={STAR_TYPES.EMPTY} large />
-        </BpkTableCell>
-      </BpkTableRow>
-      <BpkTableRow>
-        <BpkTableCell>Half</BpkTableCell>
-        <BpkTableCell>
-          <BpkStar type={STAR_TYPES.HALF} />
-        </BpkTableCell>
-        <BpkTableCell>
-          <BpkStar type={STAR_TYPES.HALF} large />
-        </BpkTableCell>
-      </BpkTableRow>
-      <BpkTableRow>
-        <BpkTableCell>Full</BpkTableCell>
-        <BpkTableCell>
-          <BpkStar type={STAR_TYPES.FULL} />
-        </BpkTableCell>
-        <BpkTableCell>
-          <BpkStar type={STAR_TYPES.FULL} large />
-        </BpkTableCell>
-      </BpkTableRow>
-    </BpkTableBody>
-  </BpkTable>
-);
-
-const FullStars = () => (
-  <div>
-    <StarRating rating={5} />
-    <br />
-    <StarRating rating={5} large />
-  </div>
-);
-
-const EmptyStars = () => (
-  <div>
-    <StarRating rating={0} />
-    <br />
-    <StarRating rating={0} large />
-  </div>
-);
-
-const ThreeStars = () => (
-  <div>
-    <StarRating rating={3} />
-    <br />
-    <StarRating rating={3} large />
-  </div>
-);
-
-const ThreeAndAHalfStars = () => (
-  <div>
-    <StarRating rating={3.5} />
-    <br />
-    <StarRating rating={3.5} large />
-  </div>
-);
-
-const ThreePointThreeStars = () => (
-  <div>
-    <StarRating rating={3.3} />
-    <br />
-    <StarRating rating={3.3} large />
-  </div>
-);
-
-const ThreePointEightStars = () => (
-  <div>
-    <StarRating rating={3.8} />
-    <br />
-    <StarRating rating={3.8} large />
-  </div>
-);
-
-const ThreePointThreeStarsRounded = () => (
-  <div>
-    <StarRating rating={3.3} rounding={ROUNDING_TYPES.nearest} />
-    <br />
-    <StarRating rating={3.3} large rounding={ROUNDING_TYPES.nearest} />
-  </div>
-);
-
-const ThreePointEightStarsRounded = () => (
-  <div>
-    <StarRating rating={3.8} rounding={ROUNDING_TYPES.nearest} />
-    <br />
-    <StarRating rating={3.8} large rounding={ROUNDING_TYPES.nearest} />
-  </div>
-);
-
-const Interactive = () => (
-  <div>
-    <InteractiveStarRating
-      id="small-star-rating"
-      getStarLabel={(rating, maxRating) =>
-        `${rating} out of ${maxRating} stars`
-      }
-      onRatingSelect={action('rating selected')}
-    />
-    <br />
-    <InteractiveStarRating
-      id="large-star-rating"
-      getStarLabel={(rating, maxRating) =>
-        `${rating} out of ${maxRating} stars`
-      }
-      onRatingSelect={action('large rating selected')}
-      large
-    />
-  </div>
-);
-
-const MixedExample = () => (
-  <div>
-    <FullStars />
-    <EmptyStars />
-    <ThreeStars />
-    <ThreeAndAHalfStars />
-    <ThreePointThreeStars />
-    <ThreePointEightStars />
-    <ThreePointThreeStarsRounded />
-    <ThreePointEightStarsRounded />
-  </div>
-);
-
-export {
-  FullExample,
-  FullStars,
-  EmptyStars,
-  ThreeStars,
-  ThreeAndAHalfStars,
-  ThreePointThreeStars,
-  ThreePointEightStars,
-  ThreePointThreeStarsRounded,
-  ThreePointEightStarsRounded,
-  Interactive,
-  MixedExample,
-};

package/bpk-component-switch/examples.js

@@ -1,40 +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 BpkSwitch, { SWITCH_TYPES } from './index';
-
-const DefaultExample = ({ ...rest }: {}) => (
-  <BpkSwitch {...rest} label="Backpack" />
-);
-const EventExample = ({ ...rest }: {}) => (
-  <BpkSwitch {...rest} label="Backpack" type={SWITCH_TYPES.event} />
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <EventExample />
-    <DefaultExample checked />
-    <EventExample checked />
-  </div>
-);
-
-export { DefaultExample, EventExample, MixedExample };

package/bpk-component-table/examples.js

@@ -1,97 +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 {
-  BpkTable,
-  BpkTableHead,
-  BpkTableBody,
-  BpkTableRow,
-  BpkTableCell,
-  BpkTableHeadCell,
-} from './index';
-
-const DefaultExample = () => (
-  <BpkTable>
-    <BpkTableHead>
-      <BpkTableRow>
-        <BpkTableHeadCell>Column 1</BpkTableHeadCell>
-        <BpkTableHeadCell>Column 2</BpkTableHeadCell>
-        <BpkTableHeadCell>Column 3</BpkTableHeadCell>
-      </BpkTableRow>
-    </BpkTableHead>
-    <BpkTableBody>
-      <BpkTableRow>
-        <BpkTableCell>Entry 1</BpkTableCell>
-        <BpkTableCell>Entry 2</BpkTableCell>
-        <BpkTableCell>Entry 3</BpkTableCell>
-      </BpkTableRow>
-      <BpkTableRow>
-        <BpkTableCell>Entry 4</BpkTableCell>
-        <BpkTableCell>Entry 5</BpkTableCell>
-        <BpkTableCell>Entry 6</BpkTableCell>
-      </BpkTableRow>
-      <BpkTableRow>
-        <BpkTableCell>Entry 7</BpkTableCell>
-        <BpkTableCell>Entry 8</BpkTableCell>
-        <BpkTableCell>Entry 9</BpkTableCell>
-      </BpkTableRow>
-    </BpkTableBody>
-  </BpkTable>
-);
-
-const AlternateExample = () => (
-  <BpkTable>
-    <BpkTableHead>
-      <BpkTableRow>
-        <BpkTableHeadCell alternate>Column 1</BpkTableHeadCell>
-        <BpkTableHeadCell alternate>Column 2</BpkTableHeadCell>
-        <BpkTableHeadCell alternate>Column 3</BpkTableHeadCell>
-      </BpkTableRow>
-    </BpkTableHead>
-    <BpkTableBody>
-      <BpkTableRow>
-        <BpkTableCell>Entry 1</BpkTableCell>
-        <BpkTableCell>Entry 2</BpkTableCell>
-        <BpkTableCell>Entry 3</BpkTableCell>
-      </BpkTableRow>
-      <BpkTableRow>
-        <BpkTableCell>Entry 4</BpkTableCell>
-        <BpkTableCell>Entry 5</BpkTableCell>
-        <BpkTableCell>Entry 6</BpkTableCell>
-      </BpkTableRow>
-      <BpkTableRow>
-        <BpkTableCell>Entry 7</BpkTableCell>
-        <BpkTableCell>Entry 8</BpkTableCell>
-        <BpkTableCell>Entry 9</BpkTableCell>
-      </BpkTableRow>
-    </BpkTableBody>
-  </BpkTable>
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <AlternateExample />
-  </div>
-);
-
-export { DefaultExample, AlternateExample, MixedExample };