@skyscanner/backpack-web 0.0.1

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss

@@ -0,0 +1,31 @@
+/*
+ * 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-scrollable-calendar-grid {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  &__title {
+    margin-top: bpk-spacing-lg();
+  }
+}

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -0,0 +1,156 @@
+/*
+ * 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 from 'react';
+import { cssModules, deprecated } from 'bpk-react-utils';
+import { DateUtils, BpkCalendarGridPropTypes } from 'bpk-component-calendar';
+import { startOfDay, startOfMonth } from 'date-fns';
+import {
+  AutoSizer,
+  List,
+  CellMeasurer,
+  CellMeasurerCache,
+} from 'react-virtualized';
+
+import STYLES from './BpkScrollableCalendarGridList.module.scss';
+import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid';
+import getMonthsArray from './utils';
+
+const getClassName = cssModules(STYLES);
+
+class BpkScrollableCalendarGridList extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.rowRenderer = this.rowRenderer.bind(this);
+    this.renderList = this.renderList.bind(this);
+
+    const startDate = startOfDay(startOfMonth(this.props.minDate));
+    const endDate = startOfDay(startOfMonth(this.props.maxDate));
+    const monthsCount = DateUtils.differenceInCalendarMonths(
+      endDate,
+      startDate,
+    );
+    const months = getMonthsArray(startDate, monthsCount);
+
+    const cache = new CellMeasurerCache({
+      fixedWidth: true,
+      defaultHeight: 276, // most common height (in px) of BpkScrollableCalendarGrid
+    });
+    this.state = {
+      months,
+      cache,
+    };
+  }
+
+  getHtmlElement = () =>
+    typeof document !== 'undefined' ? document.querySelector('html') : {};
+
+  rowRenderer({ index, key, parent, style }) {
+    return (
+      <CellMeasurer
+        key={key}
+        cache={this.state.cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
+      >
+        <div style={style}>
+          <BpkScrollableCalendarGrid
+            onDateClick={this.props.onDateClick}
+            {...this.props}
+            key={key}
+            month={this.state.months[index]}
+            focusedDate={this.props.focusedDate}
+            preventKeyboardFocus={this.props.preventKeyboardFocus}
+            aria-hidden={index !== 1}
+            className={getClassName('bpk-scrollable-calendar-grid-list__item')}
+          />
+        </div>
+      </CellMeasurer>
+    );
+  }
+
+  renderList(width, height, minDate, focusedDate, selectionConfiguration) {
+    const { date, startDate } = selectionConfiguration || {};
+    const selectedDate = focusedDate || date || startDate;
+    return (
+      <List
+        extraData={this.props}
+        style={this.getHtmlElement().dir === 'rtl' ? { direction: 'rtl' } : {}}
+        width={width}
+        height={height}
+        deferredMeasurementCache={this.state.cache}
+        rowHeight={this.state.cache.rowHeight}
+        rowRenderer={this.rowRenderer}
+        rowCount={this.state.months.length}
+        overscanRowCount={0}
+        scrollToIndex={
+          selectedDate
+            ? DateUtils.differenceInCalendarMonths(selectedDate, minDate)
+            : 0
+        }
+      />
+    );
+  }
+
+  render() {
+    const { focusedDate, minDate, selectionConfiguration } = this.props;
+    return (
+      <div
+        className={getClassName(
+          'bpk-scrollable-calendar-grid-list',
+          this.props.className,
+        )}
+      >
+        <AutoSizer>
+          {({ height, width }) =>
+            this.renderList(
+              width,
+              height,
+              minDate,
+              focusedDate,
+              selectionConfiguration,
+            )
+          }
+        </AutoSizer>
+      </div>
+    );
+  }
+}
+
+BpkScrollableCalendarGridList.propTypes = {
+  className: PropTypes.string,
+  minDate: PropTypes.instanceOf(Date).isRequired,
+  maxDate: PropTypes.instanceOf(Date).isRequired,
+  selectedDate: deprecated(
+    PropTypes.instanceOf(Date),
+    'Use selectionConfiguration to set selectedDate',
+  ),
+  focusedDate: PropTypes.instanceOf(Date),
+  ...BpkCalendarGridPropTypes,
+};
+
+BpkScrollableCalendarGridList.defaultProps = {
+  className: null,
+  focusedDate: null,
+  selectedDate: null,
+};
+
+export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__item{display:inline-table}

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss

@@ -0,0 +1,37 @@
+/*
+ * 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;
+
+$calendar-height: 7 * ($bpk-calendar-day-size + bpk-spacing-lg());
+
+.bpk-scrollable-calendar-grid-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: $calendar-height;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &__item {
+    display: inline-table;
+  }
+}

package/bpk-component-scrollable-calendar/src/utils.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { DateUtils } from 'bpk-component-calendar';
+
+const getMonthsArray = (startDate, count) => {
+  const months = [];
+
+  for (let i = 0; i < count + 1; i += 1) {
+    months.push(DateUtils.addMonths(startDate, i));
+  }
+
+  return months;
+};
+export default getMonthsArray;

package/bpk-component-scrollable-calendar/test-utils.js

@@ -0,0 +1,274 @@
+/*
+ * 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 format from 'date-fns/format';
+
+export const formatDateFull = (date) => format(date, 'EEEE, do MMMM yyyy');
+export const formatDateFullArabic = (date) => {
+  const dateString = 'EEEE, dd، MMMM، yyyy';
+  const newString = dateString.replace('yyyy', date.getUTCFullYear());
+  return format(date, newString);
+};
+export const formatDateFullJapanese = (date) => {
+  const dateString = 'Y年M月d日EEEE';
+  const newString = dateString.replace('Y', date.getUTCFullYear());
+  return format(date, newString);
+};
+export const formatMonth = (date) => format(date, 'MMMM yyyy');
+export const formatMonthArabic = (date) => {
+  const months = [
+    'يناير',
+    'فبراير',
+    'مارس',
+    'أبريل',
+    'مايو',
+    'يونيو',
+    'يوليو',
+    'أغسطس',
+    'سبتمبر',
+    'أكتوبر',
+    'نوفمبر',
+    'ديسمبر',
+  ];
+  return `${months[date.getMonth()]} ${date.getFullYear()}`;
+};
+export const formatMonthJapanese = (date) => {
+  const months = [
+    '1月',
+    '2月',
+    '3月',
+    '4月',
+    '5月',
+    '6月',
+    '7月',
+    '8月',
+    '9月',
+    '10月',
+    '11月',
+    '12月',
+  ];
+  return `${date.getFullYear()}年${months[date.getMonth()]}`;
+};
+
+export const weekDays = [
+  {
+    name: 'Sunday',
+    nameAbbr: 'Sun',
+    index: 0,
+    isWeekend: true,
+  },
+  {
+    name: 'Monday',
+    nameAbbr: 'Mon',
+    index: 1,
+    isWeekend: false,
+  },
+  {
+    name: 'Tuesday',
+    nameAbbr: 'Tue',
+    index: 2,
+    isWeekend: false,
+  },
+  {
+    name: 'Wednesday',
+    nameAbbr: 'Wed',
+    index: 3,
+    isWeekend: false,
+  },
+  {
+    name: 'Thursday',
+    nameAbbr: 'Thu',
+    index: 4,
+    isWeekend: false,
+  },
+  {
+    name: 'Friday',
+    nameAbbr: 'Fri',
+    index: 5,
+    isWeekend: false,
+  },
+  {
+    name: 'Saturday',
+    nameAbbr: 'Sat',
+    index: 6,
+    isWeekend: true,
+  },
+];
+
+export const weekDaysMoreWeekend = [
+  {
+    name: 'Sunday',
+    nameAbbr: 'Sun',
+    index: 0,
+    isWeekend: true,
+  },
+  {
+    name: 'Monday',
+    nameAbbr: 'Mon',
+    index: 1,
+    isWeekend: false,
+  },
+  {
+    name: 'Tuesday',
+    nameAbbr: 'Tue',
+    index: 2,
+    isWeekend: false,
+  },
+  {
+    name: 'Wednesday',
+    nameAbbr: 'Wed',
+    index: 3,
+    isWeekend: false,
+  },
+  {
+    name: 'Thursday',
+    nameAbbr: 'Thu',
+    index: 4,
+    isWeekend: false,
+  },
+  {
+    name: 'Friday',
+    nameAbbr: 'Fri',
+    index: 5,
+    isWeekend: true,
+  },
+  {
+    name: 'Saturday',
+    nameAbbr: 'Sat',
+    index: 6,
+    isWeekend: true,
+  },
+];
+
+export const weekDaysArabic = [
+  {
+    name: 'الأحد',
+    nameAbbr: 'الأحد',
+    nameShort: 'الأحد',
+    index: 0,
+    cldrKey: 'sun',
+    isWeekend: false,
+  },
+  {
+    name: 'الاثنين',
+    nameAbbr: 'الاثنين',
+    nameShort: 'الاثنين',
+    index: 1,
+    cldrKey: 'mon',
+    isWeekend: false,
+  },
+  {
+    name: 'الثلاثاء',
+    nameAbbr: 'الثلاثاء',
+    nameShort: 'الثلاثاء',
+    index: 2,
+    cldrKey: 'tue',
+    isWeekend: false,
+  },
+  {
+    name: 'الأربعاء',
+    nameAbbr: 'الأربعاء',
+    nameShort: 'الأربعاء',
+    index: 3,
+    cldrKey: 'wed',
+    isWeekend: false,
+  },
+  {
+    name: 'الخميس',
+    nameAbbr: 'الخميس',
+    nameShort: 'الخميس',
+    index: 4,
+    cldrKey: 'thu',
+    isWeekend: false,
+  },
+  {
+    name: 'الجمعة',
+    nameAbbr: 'الجمعة',
+    nameShort: 'الجمعة',
+    index: 5,
+    cldrKey: 'fri',
+    isWeekend: true,
+  },
+  {
+    name: 'السبت',
+    nameAbbr: 'السبت',
+    nameShort: 'السبت',
+    index: 6,
+    cldrKey: 'sat',
+    isWeekend: true,
+  },
+];
+
+export const weekDaysJapanese = [
+  {
+    name: '日曜日',
+    nameAbbr: '日',
+    nameShort: '日',
+    index: 0,
+    cldrKey: 'sun',
+    isWeekend: true,
+  },
+  {
+    name: '月曜日',
+    nameAbbr: '月',
+    nameShort: '月',
+    index: 1,
+    cldrKey: 'mon',
+    isWeekend: false,
+  },
+  {
+    name: '火曜日',
+    nameAbbr: '火',
+    nameShort: '火',
+    index: 2,
+    cldrKey: 'tue',
+    isWeekend: false,
+  },
+  {
+    name: '水曜日',
+    nameAbbr: '水',
+    nameShort: '水',
+    index: 3,
+    cldrKey: 'wed',
+    isWeekend: false,
+  },
+  {
+    name: '木曜日',
+    nameAbbr: '木',
+    nameShort: '木',
+    index: 4,
+    cldrKey: 'thu',
+    isWeekend: false,
+  },
+  {
+    name: '金曜日',
+    nameAbbr: '金',
+    nameShort: '金',
+    index: 5,
+    cldrKey: 'fri',
+    isWeekend: false,
+  },
+  {
+    name: '土曜日',
+    nameAbbr: '土',
+    nameShort: '土',
+    index: 6,
+    cldrKey: 'sat',
+    isWeekend: true,
+  },
+];

package/bpk-component-section-list/README.md

@@ -0,0 +1,52 @@
+# bpk-component-section-list
+
+> Backpack section list component.
+
+## Installation
+
+```sh
+npm install bpk-component-section-list --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkSectionList, { BpkSectionListSection, BpkSectionListItem } from 'bpk-component-section-list';
+
+export default () => (
+  <BpkSectionList>
+    <BpkSectionListSection headerText="Cities">
+      <BpkSectionListItem>Tokyo</BpkSectionListItem>
+      <BpkSectionListItem onClick={() => {}}>Rio de Janeiro</BpkSectionListItem>
+      <BpkSectionListItem href="#">London</BpkSectionListItem>
+    </BpkSectionListSection>
+  </BpkSectionList>
+);
+```
+
+## Props
+
+### BpkSectionList
+
+| Property              | PropType                      | Required | Default Value |
+| --------------------- | ----------------------------- | -------- | ------------- |
+| children              | node                          | true     | -             |
+
+### BpkSectionListSection
+
+| Property              | PropType                      | Required | Default Value |
+| --------------------- | ----------------------------- | -------- | ------------- |
+| children              | node                          | true     | -             |
+| headerText            | string                        | false    | null          |
+
+
+### BpkSectionListItem
+
+| Property              | PropType                      | Required | Default Value |
+| --------------------- | ----------------------------- | -------- | ------------- |
+| children              | node                          | true     | -             |
+| blank                 | bool                          | false    | false         |
+| className             | string                        | false    | null          |
+| href                  | string                        | false    | null          |
+| onClick               | func                          | false    | null          |

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

@@ -0,0 +1,55 @@
+/*
+ * 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-section-list/index.js

@@ -0,0 +1,26 @@
+/*
+ * 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 BpkSectionList from './src/BpkSectionList';
+import BpkSectionListSection from './src/BpkSectionListSection';
+import BpkSectionListItem from './src/BpkSectionListItem';
+
+export default BpkSectionList;
+export { BpkSectionListSection, BpkSectionListItem };