@skyscanner/backpack-web 0.0.1

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

@@ -0,0 +1,299 @@
+/*
+ * 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

@@ -0,0 +1,369 @@
+/*
+ * 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,
+};