@skyscanner/backpack-web 0.0.4 → 0.1.0

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

@@ -1,299 +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.
- */
-
-/* eslint-disable react/prop-types */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import BpkButton from '../../bpk-component-button';
-import addMonths from 'date-fns/addMonths';
-import {
-  colorWhite,
-  colorPanjin,
-  colorSkyGrayTint06,
-  colorSkyGrayTint04,
-  colorMonteverde,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { action } from 'bpk-storybook-utils';
-
-import { withButtonAlignment, withRtlSupport } from '../bpk-component-icon';
-import SmallLongArrowRightIcon from '../bpk-component-icon/sm/long-arrow-right';
-import SmallLongArrowLeftIcon from '../bpk-component-icon/sm/long-arrow-left';
-
-import { dateToBoundaries, startOfDay, addDays } from './src/date-utils';
-import { formatMonth, formatDateFull, weekDays } from './test-utils';
-
-import BpkCalendar, {
-  BpkCalendarGrid,
-  BpkCalendarGridHeader,
-  withCalendarState,
-  composeCalendar,
-  CustomPropTypes,
-  CALENDAR_SELECTION_TYPE,
-} from './index';
-
-const LeftIcon = withButtonAlignment(withRtlSupport(SmallLongArrowLeftIcon));
-const RightIcon = withButtonAlignment(withRtlSupport(SmallLongArrowRightIcon));
-const withDirection = (Nav, direction) => (props) =>
-  <Nav {...props} direction={direction} />;
-const withPrices = (DateComponent, prices) => (props) =>
-  <DateComponent {...props} prices={prices} />;
-
-const prices = [
-  125, 56, 75, 57, 78, 92, 133, 90, 148, 80, 122, 67, 70, 123, 77, 66, 64, 56,
-  105, 138, 52, 70, 106, 139, 88, 97, 73, 114, 119, 141, 118,
-];
-
-const MyCalendarNav = ({ direction, month, onMonthChange }) => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    }}
-  >
-    <strong>{direction}</strong>
-    <div>
-      <BpkButton
-        iconOnly
-        onClick={(event) =>
-          onMonthChange(event, { month: addMonths(month, -1), source: 'PREV' })
-        }
-      >
-        <LeftIcon fill={colorWhite} />
-      </BpkButton>
-      &nbsp;
-      <BpkButton
-        iconOnly
-        onClick={(event) =>
-          onMonthChange(event, { month: addMonths(month, 1), source: 'NEXT' })
-        }
-      >
-        <RightIcon fill={colorWhite} />
-      </BpkButton>
-    </div>
-  </div>
-);
-
-const MyCalendarDate = (props) => {
-  const cx = {
-    textAlign: 'center',
-    fontSize: '0.8em',
-    color: props.isOutside || props.isBlocked ? colorSkyGrayTint06 : 'inherit',
-    backgroundColor: props.isSelected ? colorSkyGrayTint04 : 'inherit',
-  };
-  const priceCx = {
-    color: colorPanjin,
-  };
-  const day = props.date.getDate();
-  const price = props.prices[day - 1];
-  if (price < 100) {
-    priceCx.color = colorMonteverde;
-  }
-  return (
-    <div style={cx}>
-      <div>{day}</div>
-      {props.isOutside || props.isBlocked ? null : (
-        <div style={priceCx}>£{price}</div>
-      )}
-    </div>
-  );
-};
-
-const MyDepartCalendar = withCalendarState(
-  composeCalendar(
-    withDirection(MyCalendarNav, 'Depart'),
-    BpkCalendarGridHeader,
-    BpkCalendarGrid,
-    withPrices(MyCalendarDate, prices),
-  ),
-);
-
-const MyReturnCalendar = withCalendarState(
-  composeCalendar(
-    withDirection(MyCalendarNav, 'Return'),
-    BpkCalendarGridHeader,
-    BpkCalendarGrid,
-    withPrices(MyCalendarDate, prices),
-  ),
-);
-
-class MonthViewCalendar extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      departDate: props.departureDate,
-      returnDate: props.returnDate,
-    };
-  }
-
-  render() {
-    const { maxDate, minDate, ...rest } = this.props;
-    return (
-      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-        <MyDepartCalendar
-          id="myCalendar"
-          formatMonth={formatMonth}
-          formatDateFull={formatDateFull}
-          daysOfWeek={weekDays}
-          changeMonthLabel="Change month"
-          previousMonthLabel="Go to previous month"
-          nextMonthLabel="Go to next month"
-          date={this.state.departDate}
-          fixedWidth={false}
-          onDateSelect={(departDate) => {
-            this.setState((prevState) => ({
-              departDate,
-              returnDate: dateToBoundaries(
-                prevState.returnDate,
-                departDate,
-                maxDate,
-              ),
-            }));
-          }}
-          {...rest}
-        />
-        <div
-          style={{
-            flexShrink: 1,
-            margin: '0 2rem',
-            borderRight: `1px solid ${colorSkyGrayTint06}`,
-          }}
-        />
-        <MyReturnCalendar
-          id="myCalendar"
-          formatMonth={formatMonth}
-          formatDateFull={formatDateFull}
-          daysOfWeek={weekDays}
-          changeMonthLabel="Change month"
-          previousMonthLabel="Go to previous month"
-          nextMonthLabel="Go to next month"
-          date={this.state.returnDate}
-          fixedWidth={false}
-          onDateSelect={(returnDate) => {
-            this.setState((prevState) => ({
-              returnDate,
-              departDate: dateToBoundaries(
-                prevState.departDate,
-                minDate,
-                returnDate,
-              ),
-            }));
-          }}
-          {...rest}
-        />
-      </div>
-    );
-  }
-}
-
-MonthViewCalendar.propTypes = {
-  minDate: PropTypes.instanceOf(Date),
-  maxDate: PropTypes.instanceOf(Date),
-  departureDate: PropTypes.instanceOf(Date),
-  returnDate: PropTypes.instanceOf(Date),
-  weekStartsOn: PropTypes.number.isRequired,
-};
-
-MonthViewCalendar.defaultProps = {
-  minDate: startOfDay(new Date()),
-  maxDate: startOfDay(addMonths(new Date(), 12)),
-  departureDate: startOfDay(addDays(new Date(), 1)),
-  returnDate: startOfDay(addDays(new Date(), 4)),
-};
-
-class CalendarContainer 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 (
-      <BpkCalendar
-        {...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}
-        onMonthChange={action('Changed month')}
-      />
-    );
-  }
-}
-
-CalendarContainer.propTypes = {
-  selectTodaysDate: PropTypes.bool,
-  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-};
-
-CalendarContainer.defaultProps = {
-  selectTodaysDate: true,
-  selectionConfiguration: {
-    type: CALENDAR_SELECTION_TYPE.single,
-    date: null,
-  },
-};
-
-export default CalendarContainer;
-export { MonthViewCalendar };

package/bpk-component-calendar/examples.js

@@ -1,369 +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 { action } from 'bpk-storybook-utils';
-import addMonths from 'date-fns/addMonths';
-import BpkText from '../../bpk-component-text';
-import startOfDay from 'date-fns/startOfDay';
-import parseDate from 'date-fns/parse';
-
-import {
-  formatMonth,
-  formatDateFull,
-  formatMonthArabic,
-  formatDateFullArabic,
-  formatMonthJapanese,
-  formatDateFullJapanese,
-  weekDaysMoreWeekend,
-  weekDaysArabic,
-  weekDaysJapanese,
-  weekDays,
-} from './test-utils';
-import CalendarContainer, { MonthViewCalendar } from './examples-components';
-import ColoredCalendar from './coloured-calendar-example';
-import Week from './src/Week';
-import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes';
-
-import {
-  BpkCalendarGrid,
-  BpkCalendarGridHeader,
-  BpkCalendarNav,
-  BpkCalendarDate,
-} from './index';
-
-const CalendarNavExample = () => (
-  <BpkCalendarNav
-    month={new Date()}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    onMonthChange={action('Changed month')}
-    minDate={new Date()}
-    maxDate={addMonths(new Date(), 12)}
-    formatMonth={formatMonth}
-    id="myCalendarNav"
-  />
-);
-
-const CalendarGridHeaderExample = () => (
-  <BpkCalendarGridHeader weekStartsOn={1} daysOfWeek={weekDays} />
-);
-
-const CalendarGridExample = () => (
-  <BpkCalendarGrid
-    month={new Date()}
-    weekStartsOn={1}
-    daysOfWeek={weekDays}
-    onDateClick={action('Clicked day')}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    DateComponent={BpkCalendarDate}
-    preventKeyboardFocus
-  />
-);
-
-const CalendarGridAndHeaderExample = () => (
-  <div>
-    <CalendarGridHeaderExample />
-    <CalendarGridExample />
-  </div>
-);
-
-const DefaultExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    selectionConfiguration={{
-      type: CALENDAR_SELECTION_TYPE.single,
-      date: new Date(),
-    }}
-  />
-);
-
-const MinDateInThePastExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    minDate={new Date(2011, 1, 1)}
-    selectTodaysDate={false}
-    initiallyFocusedDate={new Date()}
-  />
-);
-
-const WeekStartsOnSundayExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={0}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-  />
-);
-
-const HonestWeekendExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDaysMoreWeekend}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-  />
-);
-
-const WeekdayKeyIsNameNarrow = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={0}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    weekDayKey="nameNarrow"
-  />
-);
-
-const ArabicExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonthArabic}
-    formatDateFull={formatDateFullArabic}
-    daysOfWeek={weekDaysArabic}
-    weekStartsOn={6}
-    changeMonthLabel="Change month"
-  />
-);
-
-const JapaneseExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonthJapanese}
-    formatDateFull={formatDateFullJapanese}
-    daysOfWeek={weekDaysJapanese}
-    weekStartsOn={0}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-  />
-);
-
-const MinAndMaxDate = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    minDate={new Date(2020, 4, 15)}
-    maxDate={new Date(2020, 5, 15)}
-  />
-);
-
-const MarkTodayFalseExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    markToday={false}
-  />
-);
-
-const MarkOutsideDaysFalseExample = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    markOutsideDays={false}
-  />
-);
-
-const CustomComposedCalendarSafariBug = () => (
-  <div>
-    <p>
-      <BpkText>Set your timezone to BRT (Brasilia)</BpkText>
-    </p>
-    <p>
-      <BpkText>Departure date should be Nov 3 and return Nov 4</BpkText>
-    </p>
-    <MonthViewCalendar
-      minDate={new Date(2018, 10, 1)}
-      maxDate={new Date(2018, 10, 20)}
-      departureDate={new Date(2018, 10, 3)}
-      returnDate={new Date(2018, 10, 4, 1, 0, 0, 0)}
-      weekStartsOn={0}
-    />
-  </div>
-);
-
-const CustomComposedCalendar = () => <MonthViewCalendar weekStartsOn={1} />;
-
-const CustomColors = () => (
-  <ColoredCalendar
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    month={new Date()}
-    weekStartsOn={1}
-    onDateSelect={(date) => {
-      // TODO we shouldn't do this but as it's only for demo purposes and works I guess it's fine
-      // eslint-disable-next-line react/no-this-in-sfc
-      this.setState({ date });
-      action('Selected day')(date);
-    }}
-  />
-);
-
-const WeekExample = () => {
-  // eslint-disable-next-line react/prop-types
-  const DummyDateComponent = ({ date }) => <div>{date.toString()}</div>;
-
-  const weekProps = {
-    ...Week.defaultProps,
-    DateComponent: DummyDateComponent,
-    dateModifiers: {},
-    dates: [
-      new Date(1980, 5, 10),
-      new Date(1980, 5, 11),
-      new Date(1980, 5, 12),
-      new Date(1980, 5, 13),
-      new Date(1980, 5, 14),
-      new Date(1980, 5, 15),
-      new Date(1980, 5, 16),
-    ].map(startOfDay),
-    daysOfWeek: weekDays,
-    formatDateFull: (d) => d.toString(),
-    preventKeyboardFocus: false,
-    markToday: true,
-    markOutsideDays: true,
-    isKeyboardFocusable: true,
-    month: new Date(1980, 5, 1),
-    weekStartsOn: 0,
-  };
-
-  return (
-    <div>
-      <p>
-        This is an internal-only component, it&apos;s not exported to consumers.
-      </p>
-      <table>
-        <tbody>
-          <Week
-            {...weekProps}
-            selectionStart={parseDate(`19800611`, 'yyyyMMdd', new Date())}
-            selectionEnd={parseDate(`19800616`, 'yyyyMMdd', new Date())}
-          />
-          <Week
-            {...weekProps}
-            selectionStart={parseDate(`19800601`, 'yyyyMMdd', new Date())}
-            selectionEnd={parseDate(`19800607`, 'yyyyMMdd', new Date())}
-          />
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-const FocusedDateInThePastExample = () => (
-  <CalendarContainer
-    minDate={new Date(2020, 3, 1)}
-    selectTodaysDate={false}
-    initiallyFocusedDate={new Date(2020, 3, 19)}
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-  />
-);
-
-const RangeDateCalendar = () => (
-  <CalendarContainer
-    id="myCalendar"
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    daysOfWeek={weekDays}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    previousMonthLabel="Go to previous month"
-    nextMonthLabel="Go to next month"
-    selectionConfiguration={{
-      type: 'range',
-      startDate: new Date(2022, 9, 6),
-      endDate: new Date(2022, 9, 15),
-    }}
-  />
-);
-
-export {
-  DefaultExample,
-  CalendarNavExample,
-  CalendarGridHeaderExample,
-  CalendarGridExample,
-  CalendarGridAndHeaderExample,
-  MinDateInThePastExample,
-  WeekStartsOnSundayExample,
-  HonestWeekendExample,
-  WeekdayKeyIsNameNarrow,
-  ArabicExample,
-  JapaneseExample,
-  MinAndMaxDate,
-  MarkTodayFalseExample,
-  MarkOutsideDaysFalseExample,
-  CustomComposedCalendar,
-  CustomComposedCalendarSafariBug,
-  CustomColors,
-  WeekExample,
-  FocusedDateInThePastExample,
-  RangeDateCalendar,
-};