@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -1,145 +1,67 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _bpkComponentInput = _interopRequireWildcard(require("../../bpk-component-input"));
-
-var _bpkComponentModal = _interopRequireDefault(require("../../bpk-component-modal"));
-
-var _bpkComponentPopover = _interopRequireDefault(require("../../bpk-component-popover"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _bpkComponentBreakpoint = _interopRequireWildcard(require("../../bpk-component-breakpoint"));
-
-var _bpkComponentCalendar = require("../../bpk-component-calendar");
-
-var _BpkDatepickerModule = _interopRequireDefault(require("./BpkDatepicker.css"));
-
-const _excluded = ["calendarComponent", "changeMonthLabel", "closeButtonText", "dateModifiers", "daysOfWeek", "fixedWidth", "formatDate", "formatDateFull", "formatMonth", "getApplicationElement", "id", "initiallyFocusedDate", "inputComponent", "inputProps", "markOutsideDays", "markToday", "maxDate", "minDate", "nextMonthLabel", "onMonthChange", "previousMonthLabel", "renderTarget", "selectionConfiguration", "title", "valid", "weekStartsOn"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDatepickerModule.default);
-const Input = (0, _bpkComponentInput.withOpenEvents)(_bpkComponentInput.default);
-const DefaultCalendar = (0, _bpkComponentCalendar.withCalendarState)((0, _bpkComponentCalendar.composeCalendar)(_bpkComponentCalendar.BpkCalendarNav, _bpkComponentCalendar.BpkCalendarGridHeader, _bpkComponentCalendar.BpkCalendarGrid, _bpkComponentCalendar.BpkCalendarDate));
-
-class BpkDatepicker extends _react.Component {
+/*
+ * 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 BpkInput, { withOpenEvents } from '../../bpk-component-input';
+import BpkModal from '../../bpk-component-modal';
+import BpkPopover from '../../bpk-component-popover';
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
+import {
+  composeCalendar,
+  BpkCalendarGridHeader,
+  BpkCalendarGrid,
+  BpkCalendarDate,
+  withCalendarState,
+  CustomPropTypes,
+  CALENDAR_SELECTION_TYPE,
+  DateUtils,
+  BpkCalendarNav,
+} from '../../bpk-component-calendar';
+
+import STYLES from './BpkDatepicker.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const Input = withOpenEvents(BpkInput);
+
+const DefaultCalendar = withCalendarState(
+  composeCalendar(
+    BpkCalendarNav,
+    BpkCalendarGridHeader,
+    BpkCalendarGrid,
+    BpkCalendarDate,
+  ),
+);
+
+class BpkDatepicker extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "onOpen", () => {
-      this.setState({
-        isOpen: true
-      });
-
-      if (this.props.onOpenChange) {
-        this.props.onOpenChange(true);
-      }
-    });
-
-    _defineProperty(this, "onClose", () => {
-      this.setState({
-        isOpen: false
-      });
-
-      if (this.props.onOpenChange) {
-        this.props.onOpenChange(false);
-      }
-    });
-
-    _defineProperty(this, "getLabel", (selectionConfiguration, formatDateFull) => {
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
-        return formatDateFull(selectionConfiguration.date);
-      }
-
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range) {
-        if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
-          return formatDateFull(selectionConfiguration.startDate);
-        }
-
-        if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
-          return `${formatDateFull(selectionConfiguration.startDate)} - ${formatDateFull(selectionConfiguration.endDate)}`;
-        }
-      }
-
-      return '';
-    });
-
-    _defineProperty(this, "getValue", (selectionConfiguration, formatDate) => {
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
-        return formatDate(selectionConfiguration.date);
-      }
-
-      if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range) {
-        if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
-          return formatDate(selectionConfiguration.startDate);
-        }
-
-        if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
-          return `${formatDate(selectionConfiguration.startDate)} - ${formatDate(selectionConfiguration.endDate)}`;
-        }
-      }
-
-      return '';
-    });
-
-    _defineProperty(this, "handleDateSelect", (startDate, endDate = null) => {
-      const {
-        maxDate,
-        minDate,
-        onClose,
-        onDateSelect,
-        selectionConfiguration
-      } = this.props; // When the calendar is a single date we always want to close it when a date is selected
-      // or if its a range calendar we only want to close the calendar when a range is selected.
-      // If a custom onClose function is provided then we don't want to run the internal version.
-
-      if ((selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
-        this.onClose();
-      }
-
-      if (onDateSelect) {
-        const newStartDate = _bpkComponentCalendar.DateUtils.dateToBoundaries(startDate, _bpkComponentCalendar.DateUtils.startOfDay(minDate), _bpkComponentCalendar.DateUtils.startOfDay(maxDate));
-
-        const newEndDate = _bpkComponentCalendar.DateUtils.dateToBoundaries(endDate, _bpkComponentCalendar.DateUtils.startOfDay(minDate), _bpkComponentCalendar.DateUtils.startOfDay(maxDate));
-
-        if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (_bpkComponentCalendar.DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || _bpkComponentCalendar.DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
-          onDateSelect(selectionConfiguration.startDate, newEndDate);
-        } else {
-          onDateSelect(newStartDate);
-        }
-      }
-    });
-
     this.state = {
-      isOpen: props.isOpen
+      isOpen: props.isOpen,
     };
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const {
-      isOpen
-    } = this.props;
+    const { isOpen } = this.props;
 
     if (prevProps.isOpen !== isOpen && prevState.isOpen !== isOpen) {
       if (isOpen) {
@@ -150,9 +72,120 @@ class BpkDatepicker extends _react.Component {
     }
   }
 
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(true);
+    }
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(false);
+    }
+  };
+
+  /**
+   * Gets the correct label for the input field to be supplied to the aria-label
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDateFull function supplied to format date
+   * @returns {String} date string
+   */
+  getLabel = (selectionConfiguration, formatDateFull) => {
+    if (
+      selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single &&
+      selectionConfiguration.date
+    ) {
+      return formatDateFull(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDateFull(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDateFull(
+          selectionConfiguration.startDate,
+        )} - ${formatDateFull(selectionConfiguration.endDate)}`;
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Gets the correct value for the input field
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDate function supplied to format date
+   * @returns {String} date value
+   */
+  getValue = (selectionConfiguration, formatDate) => {
+    if (
+      selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single &&
+      selectionConfiguration.date
+    ) {
+      return formatDate(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDate(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDate(selectionConfiguration.startDate)} - ${formatDate(
+          selectionConfiguration.endDate,
+        )}`;
+      }
+    }
+    return '';
+  };
+
+  handleDateSelect = (startDate, endDate = null) => {
+    const { maxDate, minDate, onClose, onDateSelect, selectionConfiguration } =
+      this.props;
+
+    // When the calendar is a single date we always want to close it when a date is selected
+    // or if its a range calendar we only want to close the calendar when a range is selected.
+    // If a custom onClose function is provided then we don't want to run the internal version.
+    if (
+      (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single ||
+        (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range &&
+          endDate)) &&
+      !onClose
+    ) {
+      this.onClose();
+    }
+
+    if (onDateSelect) {
+      const newStartDate = DateUtils.dateToBoundaries(
+        startDate,
+        DateUtils.startOfDay(minDate),
+        DateUtils.startOfDay(maxDate),
+      );
+      const newEndDate = DateUtils.dateToBoundaries(
+        endDate,
+        DateUtils.startOfDay(minDate),
+        DateUtils.startOfDay(maxDate),
+      );
+
+      if (
+        selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range &&
+        selectionConfiguration.startDate &&
+        !selectionConfiguration.endDate &&
+        (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) ||
+          DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))
+      ) {
+        onDateSelect(selectionConfiguration.startDate, newEndDate);
+      } else {
+        onDateSelect(newStartDate);
+      }
+    }
+  };
+
   render() {
-    const _this$props = this.props,
-          {
+    const {
       calendarComponent: Calendar,
       changeMonthLabel,
       closeButtonText,
@@ -178,28 +211,31 @@ class BpkDatepicker extends _react.Component {
       selectionConfiguration,
       title,
       valid,
-      weekStartsOn
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded); // The following props are not used in render
-
+      weekStartsOn,
+      ...rest
+    } = this.props;
 
+    // The following props are not used in render
     delete rest.onDateSelect;
     delete rest.onOpenChange;
     delete rest.isOpen;
 
-    const input = inputComponent || /*#__PURE__*/_react.default.createElement(Input, _extends({
-      id: id,
-      name: `${id}_input`,
-      value: this.getValue(selectionConfiguration, formatDate),
-      className: getClassName('bpk-datepicker__input'),
-      "aria-live": "assertive",
-      "aria-atomic": "true",
-      "aria-label": this.getLabel(selectionConfiguration, formatDateFull),
-      onChange: () => null,
-      onOpen: this.onOpen,
-      isOpen: this.state.isOpen,
-      valid: valid
-    }, inputProps));
+    const input = inputComponent || (
+      <Input
+        id={id}
+        name={`${id}_input`}
+        value={this.getValue(selectionConfiguration, formatDate)}
+        className={getClassName('bpk-datepicker__input')}
+        aria-live="assertive"
+        aria-atomic="true"
+        aria-label={this.getLabel(selectionConfiguration, formatDateFull)}
+        onChange={() => null}
+        onOpen={this.onOpen}
+        isOpen={this.state.isOpen}
+        valid={valid}
+        {...inputProps}
+      />
+    );
 
     const calendarProps = {
       id: `${id}-calendar`,
@@ -219,76 +255,94 @@ class BpkDatepicker extends _react.Component {
       previousMonthLabel,
       weekStartsOn,
       initiallyFocusedDate,
-      selectionConfiguration
+      selectionConfiguration,
     };
-    return /*#__PURE__*/_react.default.createElement(_bpkComponentBreakpoint.default, {
-      query: _bpkComponentBreakpoint.BREAKPOINTS.MOBILE
-    }, isMobile => isMobile ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement(_bpkComponentModal.default, {
-      id: `${id}-modal`,
-      renderTarget: renderTarget,
-      onClose: this.props.onClose || this.onClose,
-      isOpen: this.state.isOpen,
-      title: title,
-      closeLabel: closeButtonText,
-      getApplicationElement: getApplicationElement
-    }, /*#__PURE__*/_react.default.createElement(Calendar, _extends({}, calendarProps, {
-      fixedWidth: false
-    })))) : /*#__PURE__*/_react.default.createElement(_bpkComponentPopover.default, _extends({
-      id: `${id}-popover`,
-      target: input,
-      renderTarget: renderTarget,
-      onClose: this.props.onClose || this.onClose,
-      isOpen: this.state.isOpen,
-      label: title,
-      closeButtonText: closeButtonText,
-      tabIndex: 0
-    }, rest), /*#__PURE__*/_react.default.createElement(Calendar, _extends({}, calendarProps, {
-      fixedWidth: fixedWidth
-    }))));
-  }
 
+    return (
+      <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
+        {(isMobile) =>
+          isMobile ? (
+            <>
+              {input}
+              <BpkModal
+                id={`${id}-modal`}
+                renderTarget={renderTarget}
+                onClose={this.props.onClose || this.onClose}
+                isOpen={this.state.isOpen}
+                title={title}
+                closeLabel={closeButtonText}
+                getApplicationElement={getApplicationElement}
+              >
+                <Calendar {...calendarProps} fixedWidth={false} />
+              </BpkModal>
+            </>
+          ) : (
+            <BpkPopover
+              id={`${id}-popover`}
+              target={input}
+              renderTarget={renderTarget}
+              onClose={this.props.onClose || this.onClose}
+              isOpen={this.state.isOpen}
+              label={title}
+              closeButtonText={closeButtonText}
+              tabIndex={0}
+              {...rest}
+            >
+              <Calendar {...calendarProps} fixedWidth={fixedWidth} />
+            </BpkPopover>
+          )
+        }
+      </BpkBreakpoint>
+    );
+  }
 }
 
 BpkDatepicker.propTypes = {
   // Required
-  changeMonthLabel: _propTypes.default.string.isRequired,
-  closeButtonText: _propTypes.default.string.isRequired,
-  daysOfWeek: _bpkComponentCalendar.CustomPropTypes.DaysOfWeek.isRequired,
-  formatDate: _propTypes.default.func.isRequired,
-  formatDateFull: _propTypes.default.func.isRequired,
-  formatMonth: _propTypes.default.func.isRequired,
-  id: _propTypes.default.string.isRequired,
-  title: _propTypes.default.string.isRequired,
-  getApplicationElement: _propTypes.default.func.isRequired,
-  nextMonthLabel: _propTypes.default.string.isRequired,
-  previousMonthLabel: _propTypes.default.string.isRequired,
-  weekStartsOn: _propTypes.default.number.isRequired,
+  changeMonthLabel: PropTypes.string.isRequired,
+  closeButtonText: PropTypes.string.isRequired,
+  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
+  formatDate: PropTypes.func.isRequired,
+  formatDateFull: PropTypes.func.isRequired,
+  formatMonth: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  getApplicationElement: PropTypes.func.isRequired,
+  nextMonthLabel: PropTypes.string.isRequired,
+  previousMonthLabel: PropTypes.string.isRequired,
+  weekStartsOn: PropTypes.number.isRequired,
   // Optional
-  calendarComponent: _propTypes.default.elementType,
-  inputComponent: _propTypes.default.elementType,
-  date: (0, _bpkReactUtils.deprecated)(_propTypes.default.instanceOf(Date), 'Use selectionConfiguration to set date'),
-  dateModifiers: _bpkComponentCalendar.CustomPropTypes.DateModifiers,
-  fixedWidth: _propTypes.default.bool,
-  inputProps: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  markOutsideDays: _propTypes.default.bool,
-  markToday: _propTypes.default.bool,
-  maxDate: _propTypes.default.instanceOf(Date),
-  minDate: _propTypes.default.instanceOf(Date),
-  onDateSelect: _propTypes.default.func,
-  onOpenChange: _propTypes.default.func,
-  onMonthChange: _propTypes.default.func,
-  selectionConfiguration: _bpkComponentCalendar.CustomPropTypes.SelectionConfiguration,
+  calendarComponent: PropTypes.elementType,
+  inputComponent: PropTypes.elementType,
+  date: deprecated(
+    PropTypes.instanceOf(Date),
+    'Use selectionConfiguration to set date',
+  ),
+  dateModifiers: CustomPropTypes.DateModifiers,
+  fixedWidth: PropTypes.bool,
+  inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  markOutsideDays: PropTypes.bool,
+  markToday: PropTypes.bool,
+  maxDate: PropTypes.instanceOf(Date),
+  minDate: PropTypes.instanceOf(Date),
+  onDateSelect: PropTypes.func,
+  onOpenChange: PropTypes.func,
+  onMonthChange: PropTypes.func,
+  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
   // eslint-disable-next-line react/require-default-props
-  showWeekendSeparator: (0, _bpkReactUtils.deprecated)(_propTypes.default.bool, 'The showWeekendSeparator prop in Week is now deprecated as no longer part of the calendar, so is no longer required'),
-  initiallyFocusedDate: _propTypes.default.instanceOf(Date),
-  renderTarget: _propTypes.default.func,
-  isOpen: _propTypes.default.bool,
-  valid: _propTypes.default.bool,
+  showWeekendSeparator: deprecated(
+    PropTypes.bool,
+    'The showWeekendSeparator prop in Week is now deprecated as no longer part of the calendar, so is no longer required',
+  ),
+  initiallyFocusedDate: PropTypes.instanceOf(Date),
+  renderTarget: PropTypes.func,
+  isOpen: PropTypes.bool,
+  valid: PropTypes.bool,
   // Disabling this as if we set a default property for this value it causes the internal onClose function to stop working for default setup
   // eslint-disable-next-line react/require-default-props
-  onClose: _propTypes.default.func
+  onClose: PropTypes.func,
 };
+
 BpkDatepicker.defaultProps = {
   calendarComponent: DefaultCalendar,
   inputComponent: null,
@@ -305,14 +359,11 @@ BpkDatepicker.defaultProps = {
   onOpenChange: null,
   onMonthChange: null,
   previousMonthLabel: null,
-  selectionConfiguration: {
-    type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-    date: null
-  },
+  selectionConfiguration: { type: CALENDAR_SELECTION_TYPE.single, date: null },
   initiallyFocusedDate: null,
   renderTarget: null,
   isOpen: false,
-  valid: null
+  valid: null,
 };
-var _default = BpkDatepicker;
-exports.default = _default;
+
+export default BpkDatepicker;

package/bpk-component-datepicker/src/BpkDatepicker.module.scss

@@ -0,0 +1,25 @@
+/*
+ * 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';
+
+.bpk-datepicker {
+  &__calendar {
+    margin: 0 auto;
+  }
+}

package/bpk-component-datepicker/src/themeAttributes.js

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _bpkComponentCalendar = require("../../bpk-component-calendar");
-
-var _bpkComponentModal = require("../../bpk-component-modal");
-
-var _bpkComponentPopover = require("../../bpk-component-popover");
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,6 +15,15 @@ var _bpkComponentPopover = require("../../bpk-component-popover");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = [..._bpkComponentCalendar.themeAttributes, ..._bpkComponentPopover.themeAttributes, ..._bpkComponentModal.themeAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);
 
-exports.default = _default;
+import { themeAttributes as calendarAttributes } from '../../bpk-component-calendar';
+import { themeAttributes as modalAttributes } from '../../bpk-component-modal';
+import { themeAttributes as popoverAttributes } from '../../bpk-component-popover';
+
+export default [
+  ...calendarAttributes,
+  ...popoverAttributes,
+  ...modalAttributes,
+].filter(
+  (attribute, index, attributes) => attributes.indexOf(attribute) === index,
+);

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

@@ -0,0 +1,46 @@
+# bpk-component-description-list
+
+> Backpack description list component.
+
+## Installation
+
+```sh
+npm install bpk-component-description-list --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from 'bpk-component-description-list';
+
+export default () => (
+  <BpkDescriptionList>
+    <BpkDescriptionTerm>Apple</BpkDescriptionTerm>
+    <BpkDescriptionDetails>A fruit</BpkDescriptionDetails>
+  </BpkDescriptionList>
+);
+```
+
+## Props
+
+### BpkDescriptionList
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| className | string   | false    | null          |
+
+### BpkDescriptionTerm
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| className | string   | false    | null          |
+
+### BpkDescriptionDetails
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| className | string   | false    | null          |