@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-scrollable-calendar/examples.js

@@ -1,383 +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 startOfMonth from 'date-fns/startOfMonth';
-import endOfMonth from 'date-fns/endOfMonth';
-import { action } from 'bpk-storybook-utils';
-import {
-  DateUtils,
-  CustomPropTypes,
-  CALENDAR_SELECTION_TYPE,
-} from '../bpk-component-calendar';
-
-import {
-  formatDateFull,
-  formatDateFullArabic,
-  formatDateFullJapanese,
-  formatMonth,
-  formatMonthArabic,
-  formatMonthJapanese,
-  weekDays,
-  weekDaysMoreWeekend,
-  weekDaysArabic,
-  weekDaysJapanese,
-} from './test-utils';
-
-import BpkScrollableCalendar, {
-  BpkScrollableCalendarDate,
-  BpkScrollableCalendarGrid,
-  BpkScrollableCalendarGridList,
-} from './index';
-
-export default class ScrollableCal extends Component {
-  constructor(props) {
-    super(props);
-
-    if (this.props.selectionConfiguration.type === 'range') {
-      this.state = {
-        selectionConfiguration: {
-          type: this.props.selectionConfiguration.type,
-          startDate: this.props.selectionConfiguration.startDate,
-          endDate: this.props.selectionConfiguration.endDate,
-        },
-      };
-    } else {
-      this.state = {
-        selectionConfiguration: {
-          type: this.props.selectionConfiguration.type,
-          date: this.props.selectionConfiguration.date,
-        },
-      };
-    }
-  }
-
-  render() {
-    return (
-      <BpkScrollableCalendar
-        id="calendar"
-        {...this.props}
-        onDateSelect={(startDate, endDate = null) => {
-          if (this.props.selectionConfiguration.type === 'range') {
-            if (startDate && !endDate) {
-              this.setState({
-                selectionConfiguration: {
-                  type: this.props.selectionConfiguration.type,
-                  startDate,
-                  endDate: null,
-                },
-              });
-              action('Selected day')(startDate);
-            }
-            if (startDate && endDate) {
-              this.setState({
-                selectionConfiguration: {
-                  type: this.props.selectionConfiguration.type,
-                  startDate,
-                  endDate,
-                },
-              });
-              action('Selected end day')(endDate);
-            }
-          } else {
-            this.setState({
-              selectionConfiguration: {
-                type: this.props.selectionConfiguration.type,
-                date: startDate,
-              },
-            });
-            action('Selected day')(startDate);
-          }
-        }}
-        selectionConfiguration={this.state.selectionConfiguration}
-      />
-    );
-  }
-}
-ScrollableCal.propTypes = {
-  selectTodaysDate: PropTypes.bool,
-  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-};
-
-ScrollableCal.defaultProps = {
-  selectTodaysDate: true,
-  selectionConfiguration: {
-    type: CALENDAR_SELECTION_TYPE.single,
-    date: new Date(),
-  },
-};
-
-const DefaultExample = () => (
-  <ScrollableCal
-    weekStartsOn={1}
-    daysOfWeek={weekDays}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkScrollableCalendarDate}
-    selectTodaysDate
-    // Subtract one day from today's date to make today selectable by default
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const RangeExample = () => (
-  <ScrollableCal
-    weekStartsOn={1}
-    daysOfWeek={weekDays}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkScrollableCalendarDate}
-    markToday={false}
-    selectTodaysDate={false}
-    minDate={new Date(2020, 3, 1)}
-    maxDate={new Date(2020, 6, 1)}
-    selectionConfiguration={{
-      type: 'range',
-      startDate: new Date(2020, 5, 7),
-      endDate: new Date(2020, 5, 15),
-    }}
-  />
-);
-
-const SplitWeekRangeExample = () => (
-  <ScrollableCal
-    DateComponent={BpkScrollableCalendarDate}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={0}
-    selectTodaysDate={false}
-    minDate={new Date(2020, 3, 1)}
-    maxDate={new Date(2020, 6, 1)}
-    selectionConfiguration={{
-      type: 'range',
-      startDate: new Date(2020, 3, 29),
-      endDate: new Date(2020, 4, 4),
-    }}
-  />
-);
-
-const WeekStartsOnSix = () => (
-  <ScrollableCal
-    weekStartsOn={6}
-    daysOfWeek={weekDays}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkScrollableCalendarDate}
-    selectTodaysDate
-    // Subtract one day from today's date to make today selectable by default
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const WithFocusedDate = () => (
-  <ScrollableCal
-    weekStartsOn={1}
-    daysOfWeek={weekDays}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkScrollableCalendarDate}
-    selectTodaysDate
-    // Subtract one day from today's date to make today selectable by default
-    minDate={DateUtils.addDays(new Date(), -1)}
-    focusedDate={DateUtils.addMonths(new Date(), 11)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const TallContainer = () => (
-  <div style={{ height: '500px', display: 'flex' }}>
-    <ScrollableCal
-      weekStartsOn={1}
-      daysOfWeek={weekDays}
-      formatMonth={formatMonth}
-      formatDateFull={formatDateFull}
-      DateComponent={BpkScrollableCalendarDate}
-      selectTodaysDate
-      // Subtract one day from today's date to make today selectable by default
-      minDate={DateUtils.addDays(new Date(), -1)}
-      maxDate={DateUtils.addMonths(new Date(), 12)}
-    />
-  </div>
-);
-
-const SingleMonth = () => (
-  <div style={{ height: '500px', display: 'flex' }}>
-    <ScrollableCal
-      weekStartsOn={1}
-      daysOfWeek={weekDays}
-      formatMonth={formatMonth}
-      formatDateFull={formatDateFull}
-      DateComponent={BpkScrollableCalendarDate}
-      selectTodaysDate
-      // Subtract one day from today's date to make today selectable by default
-      minDate={startOfMonth(new Date())}
-      maxDate={endOfMonth(new Date())}
-    />
-  </div>
-);
-
-const ScrollableCalendarDate = () => (
-  <BpkScrollableCalendarDate
-    date={new Date()}
-    onDateClick={action('Clicked day')}
-  />
-);
-
-const ScrollableCalendarGrid = () => (
-  <BpkScrollableCalendarGrid
-    month={new Date(2019, 1, 0)}
-    weekStartsOn={1}
-    daysOfWeek={weekDays}
-    onDateClick={action('Clicked day')}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkScrollableCalendarDate}
-  />
-);
-
-const ScrollableCalendarGridList = () => (
-  <BpkScrollableCalendarGridList
-    month={new Date()}
-    weekStartsOn={1}
-    daysOfWeek={weekDays}
-    onDateClick={action('Clicked day')}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkScrollableCalendarDate}
-    selectTodaysDate
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const WeekStartsOnSunday = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={0}
-    selectTodaysDate
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const HonestWeekend = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDaysMoreWeekend}
-    weekStartsOn={1}
-    selectTodaysDate
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const ArabicLocale = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonthArabic}
-    formatDateFull={formatDateFullArabic}
-    daysOfWeek={weekDaysArabic}
-    weekStartsOn={6}
-    selectTodaysDate
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const JapaneseLocale = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonthJapanese}
-    formatDateFull={formatDateFullJapanese}
-    daysOfWeek={weekDaysJapanese}
-    weekStartsOn={0}
-    selectTodaysDate
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const DifferentMinMaxDates = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    selectTodaysDate
-    minDate={new Date(2020, 4, 15)}
-    maxDate={new Date(2020, 5, 15)}
-  />
-);
-
-const DontMarkToday = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    markToday={false}
-    selectTodaysDate
-    minDate={DateUtils.addDays(new Date(), -1)}
-    maxDate={DateUtils.addMonths(new Date(), 12)}
-  />
-);
-
-const PastCalendar = () => (
-  <ScrollableCal
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    markToday={false}
-    selectTodaysDate={false}
-    minDate={new Date(2020, 3, 1)}
-    maxDate={new Date(2020, 6, 1)}
-  />
-);
-
-export {
-  DefaultExample,
-  RangeExample,
-  SplitWeekRangeExample,
-  WeekStartsOnSix,
-  WithFocusedDate,
-  TallContainer,
-  SingleMonth,
-  WeekStartsOnSunday,
-  HonestWeekend,
-  ArabicLocale,
-  JapaneseLocale,
-  DifferentMinMaxDates,
-  DontMarkToday,
-  ScrollableCalendarDate,
-  ScrollableCalendarGrid,
-  ScrollableCalendarGridList,
-  PastCalendar,
-};

package/bpk-component-section-list/examples.js

@@ -1,55 +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 BpkSectionList, {
-  BpkSectionListSection,
-  BpkSectionListItem,
-} from './index';
-
-const DefaultExample = () => (
-  <BpkSectionList>
-    <BpkSectionListSection>
-      <BpkSectionListItem>Section list item</BpkSectionListItem>
-      <BpkSectionListItem
-        onClick={action('Clickable BpkSectionListItem clicked')}
-      >
-        With onClick prop
-      </BpkSectionListItem>
-      <BpkSectionListItem
-        href="https://skyscanner.net"
-        blank
-        onClick={action('BpkSectionListItem with href clicked')}
-      >
-        With href
-      </BpkSectionListItem>
-    </BpkSectionListSection>
-    <BpkSectionListSection headerText="Cities">
-      <BpkSectionListItem>Tokyo</BpkSectionListItem>
-      <BpkSectionListItem>Rio de Janeiro</BpkSectionListItem>
-      <BpkSectionListItem>London</BpkSectionListItem>
-      <BpkSectionListItem>Beijing</BpkSectionListItem>
-    </BpkSectionListSection>
-  </BpkSectionList>
-);
-
-export default DefaultExample;

package/bpk-component-select/examples.js

@@ -1,274 +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 PropTypes from 'prop-types';
-import { action } from 'bpk-storybook-utils';
-
-import BpkSelect from './index';
-
-class StatefulBpkSelect extends React.Component {
-  constructor() {
-    super();
-    this.state = { value: 'oranges' };
-  }
-
-  onChange = (value) => {
-    action(`BpkSelect changed. New value: ${value}`);
-    this.setState({ value });
-  };
-
-  render() {
-    return (
-      <BpkSelect
-        id="destination"
-        name="destination"
-        value={this.state.value}
-        onChange={(event) => {
-          this.onChange(event.target.value);
-        }}
-        {...this.props}
-      >
-        <option value="Karachi">Karachi</option>
-        <option value="Lahore">Lahore</option>
-        <option value="Faisalabad">Faisalabad</option>
-        <option value="Islamabad" disabled>
-          Islamabad
-        </option>
-      </BpkSelect>
-    );
-  }
-}
-
-const getFlagUriFromCountryCode = (countryCode) =>
-  `https://images.skyscnr.com/images/country/flag/header/${countryCode.toLowerCase()}.png`;
-
-const countries = [
-  { key: 0, id: 'AT', name: 'Austria', disabled: false },
-  { key: 1, id: 'BR', name: 'Brazil', disabled: false },
-  { key: 2, id: 'CN', name: 'China', disabled: false },
-  { key: 3, id: 'DJ', name: 'Djibouti', disabled: false },
-  { key: 4, id: 'EC', name: 'Ecuador', disabled: false },
-  { key: 5, id: 'GD', name: 'Grenada', disabled: false },
-  { key: 6, id: 'HT', name: 'Haiti', disabled: false },
-  { key: 7, id: 'IT', name: 'Italy', disabled: false },
-  { key: 8, id: 'US', name: 'USA', disabled: true },
-];
-class SelectWithImage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: 'IT',
-    };
-  }
-
-  getItemByValue = () => {
-    const { options } = this.props;
-    return (val) => {
-      const items = options.filter((o) => o.id === val);
-      if (!items.length) throw new Error('Item does not exists');
-      return items[0];
-    };
-  };
-
-  getItem = this.getItemByValue();
-
-  handleChange = (e) => {
-    const item = this.getItem(e.target.value);
-
-    this.setState({
-      selected: item.id,
-    });
-  };
-
-  image = (id) => <img alt="Flag" src={getFlagUriFromCountryCode(id)} />;
-
-  render() {
-    const { options, ...rest } = this.props;
-    return (
-      <BpkSelect
-        value={this.getItem(this.state.selected).id}
-        {...rest}
-        image={this.image(this.getItem(this.state.selected).id)}
-        onChange={this.handleChange}
-      >
-        {options.map((o) => (
-          <option key={o.id} disabled={o.disabled && 'disabled'} value={o.id}>
-            {o.name}
-          </option>
-        ))}
-      </BpkSelect>
-    );
-  }
-}
-
-SelectWithImage.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-const Example = () => <StatefulBpkSelect />;
-
-const Invalid = () => <StatefulBpkSelect valid={false} />;
-
-const InvalidWithImage = () => (
-  <SelectWithImage
-    valid={false}
-    id="countries"
-    name="countries"
-    options={countries}
-  />
-);
-
-const Disabled = () => <StatefulBpkSelect disabled />;
-
-const Large = () => <StatefulBpkSelect large />;
-
-const Docked = () => (
-  <div style={{ display: 'flex' }}>
-    <StatefulBpkSelect large docked />
-    <StatefulBpkSelect large docked />
-    <StatefulBpkSelect large docked />
-    <StatefulBpkSelect large docked />
-  </div>
-);
-
-const DockedWithImages = () => (
-  <div style={{ display: 'flex' }}>
-    <SelectWithImage
-      large
-      dockedFirst
-      id="countries"
-      name="countries"
-      options={countries}
-    />
-    <SelectWithImage
-      large
-      dockedMiddle
-      id="countries"
-      name="countries"
-      options={countries}
-    />
-    <SelectWithImage
-      large
-      dockedMiddle
-      id="countries"
-      name="countries"
-      options={countries}
-    />
-    <SelectWithImage
-      large
-      dockedLast
-      id="countries"
-      name="countries"
-      options={countries}
-    />
-  </div>
-);
-
-const ManuallyDocked = () => (
-  <div style={{ display: 'flex' }}>
-    <div style={{ width: '100%' }}>
-      <StatefulBpkSelect large dockedFirst />
-    </div>
-    <div style={{ width: '100%' }}>
-      <StatefulBpkSelect large dockedMiddle />
-    </div>
-    <div style={{ width: '100%' }}>
-      <StatefulBpkSelect large dockedMiddle />
-    </div>
-    <div style={{ width: '100%' }}>
-      <StatefulBpkSelect large dockedLast />
-    </div>
-  </div>
-);
-
-const ManuallyDockedWithImages = () => (
-  <div style={{ display: 'flex' }}>
-    <div style={{ width: '100%' }}>
-      <SelectWithImage
-        large
-        dockedFirst
-        id="countries"
-        name="countries"
-        options={countries}
-      />
-    </div>
-    <div style={{ width: '100%' }}>
-      <SelectWithImage
-        large
-        dockedMiddle
-        id="countries"
-        name="countries"
-        options={countries}
-      />
-    </div>
-    <div style={{ width: '100%' }}>
-      <SelectWithImage
-        large
-        dockedMiddle
-        id="countries"
-        name="countries"
-        options={countries}
-      />
-    </div>
-    <div style={{ width: '100%' }}>
-      <SelectWithImage
-        large
-        dockedLast
-        id="countries"
-        name="countries"
-        options={countries}
-      />
-    </div>
-  </div>
-);
-
-const WithImage = () => (
-  <SelectWithImage id="countries" name="countries" options={countries} />
-);
-
-const WithImageLarge = () => (
-  <SelectWithImage large id="countries" name="countries" options={countries} />
-);
-
-const MixedExample = () => (
-  <div>
-    <Example />
-    <Invalid />
-    <InvalidWithImage />
-    <Disabled />
-    <Large />
-    <Docked />
-    <ManuallyDocked />
-  </div>
-);
-
-export {
-  Example,
-  Invalid,
-  InvalidWithImage,
-  Disabled,
-  Large,
-  Docked,
-  DockedWithImages,
-  ManuallyDocked,
-  ManuallyDockedWithImages,
-  WithImage,
-  WithImageLarge,
-  MixedExample,
-};