npm - @skyscanner/backpack-web - Versions diffs - 18.2.1 → 20.0.0 - Mend

@skyscanner/backpack-web 18.2.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

package/bpk-component-button/src/BpkButtonLink.js CHANGED Viewed

@@ -18,13 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import {
-  type Props as CommonProps,
-  defaultProps,
-  propTypes,
-} from './common-types';
+import { Props as CommonProps, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonLink.module.scss';

package/bpk-component-button/src/BpkButtonLinkOnDark.js CHANGED Viewed

@@ -18,13 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import {
-  type Props as CommonProps,
-  defaultProps,
-  propTypes,
-} from './common-types';
+import { Props as CommonProps, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonLinkOnDark.module.scss';

package/bpk-component-button/src/BpkButtonPrimary.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase from './BpkButtonBase';
 // TODO: BpkButtonBase has the primary button style as it wasn't removed to

package/bpk-component-button/src/BpkButtonPrimaryOnDark.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonPrimaryOnDark.module.scss';

package/bpk-component-button/src/BpkButtonPrimaryOnLight.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonPrimaryOnLight.module.scss';

package/bpk-component-button/src/BpkButtonSecondary.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonSecondary.module.scss';

package/bpk-component-button/src/BpkButtonSecondaryOnDark.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonSecondaryOnDark.module.scss';

package/bpk-component-button/src/commonButtonTests.js CHANGED Viewed

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 import { render } from '@testing-library/react';
 const commonButtonTests = (ButtonToTest) => {

package/bpk-component-calendar/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkCalendar from '@skyscanner/backpack-web/bpk-component-calendar';
 import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';
 import format from 'date-fns/format';
@@ -373,7 +373,7 @@ const onMonthChange = (event, {
 #### initiallyFocusedDate
-Sets the date that is focused initially, this prop has no effect if `selectedDate` or the deprecated `date` prop are specified in which case the date specified in those props is focused. If no selected date is set and `initiallyFocusedDate` is not set the focused date is the `minDate`(defaults to today if it has not been explicitly set).
+Sets the date that is focused initially, this prop has no effect if `selectionConfiguration` is specified in which case the date specified in this prop is focused. If no selected date is set and `initiallyFocusedDate` is not set the focused date is the `minDate`(defaults to today if it has not been explicitly set).
 #### navProps, headerProps, gridProps, dateProps

package/bpk-component-calendar/src/BpkCalendarContainer.js CHANGED Viewed

@@ -17,9 +17,9 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
-import { deprecated, isRTL } from '../../bpk-react-utils';
+import { isRTL } from '../../bpk-react-utils';
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import BpkCalendarNav from './BpkCalendarNav';
@@ -287,13 +287,8 @@ const withCalendarState = (Calendar) => {
     };
     render() {
-      const {
-        date,
-        maxDate,
-        minDate,
-        selectionConfiguration,
-        ...calendarProps
-      } = this.props;
+      const { maxDate, minDate, selectionConfiguration, ...calendarProps } =
+        this.props;
       delete calendarProps.onDateSelect;
       delete calendarProps.onMonthChange;
@@ -326,25 +321,16 @@ const withCalendarState = (Calendar) => {
   }
   BpkCalendarContainer.propTypes = {
-    date: deprecated(
-      PropTypes.instanceOf(Date),
-      'Use selectionConfiguration to set selectedDate',
-    ),
     fixedWidth: PropTypes.bool,
     maxDate: PropTypes.instanceOf(Date),
     minDate: PropTypes.instanceOf(Date),
     onDateSelect: PropTypes.func,
     onMonthChange: PropTypes.func,
     selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-    selectedDate: deprecated(
-      PropTypes.instanceOf(Date),
-      'Use selectionConfiguration to set selectedDate',
-    ),
     initiallyFocusedDate: PropTypes.instanceOf(Date),
   };
   BpkCalendarContainer.defaultProps = {
-    date: null,
     fixedWidth: true,
     maxDate: addMonths(new Date(), 12),
     minDate: new Date(),
@@ -354,7 +340,6 @@ const withCalendarState = (Calendar) => {
       type: CALENDAR_SELECTION_TYPE.single,
       date: null,
     },
-    selectedDate: null,
     initiallyFocusedDate: null,
   };

package/bpk-component-calendar/src/BpkCalendarDate.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-calendar/src/BpkCalendarGrid.js CHANGED Viewed

@@ -17,9 +17,9 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
-import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';
+import { cssModules, isDeviceIos } from '../../bpk-react-utils';
 import BpkCalendarGridHeader from './BpkCalendarGridHeader';
 import Week from './Week';
@@ -103,8 +103,6 @@ class BpkCalendarGrid extends Component {
       onDateKeyDown,
       preventKeyboardFocus,
       selectionConfiguration,
-      selectionEnd,
-      selectionStart,
       weekStartsOn,
     } = this.props;
@@ -139,8 +137,6 @@ class BpkCalendarGrid extends Component {
               markToday={markToday}
               markOutsideDays={markOutsideDays}
               selectionConfiguration={selectionConfiguration}
-              selectionEnd={selectionEnd}
-              selectionStart={selectionStart}
               focusedDate={focusedDate}
               minDate={minDate}
               maxDate={maxDate}
@@ -177,16 +173,6 @@ export const propTypes = {
   onDateKeyDown: PropTypes.func,
   preventKeyboardFocus: PropTypes.bool,
   selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-  selectedDate: deprecated(
-    PropTypes.instanceOf(Date),
-    'Use selectionConfiguration to set selectedDate',
-  ),
-  selectionEnd: PropTypes.instanceOf(Date),
-  selectionStart: PropTypes.instanceOf(Date),
-  showWeekendSeparator: deprecated(
-    PropTypes.bool,
-    'The showWeekendSeparator prop in BpkCalendarGrid is now deprecated as no longer part of the calendar, so is no longer required',
-  ),
   ignoreOutsideDate: PropTypes.bool,
   dateProps: PropTypes.object,
 };
@@ -205,10 +191,7 @@ BpkCalendarGrid.defaultProps = {
   onDateClick: null,
   onDateKeyDown: null,
   preventKeyboardFocus: false,
-  selectedDate: null,
   selectionConfiguration: { type: CALENDAR_SELECTION_TYPE.single, date: null },
-  selectionEnd: null,
-  selectionStart: null,
   ignoreOutsideDate: false,
   dateProps: null,
   cellClassName: null,

package/bpk-component-calendar/src/BpkCalendarGridHeader.js CHANGED Viewed

@@ -17,9 +17,9 @@
  */
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import CustomPropTypes from './custom-proptypes';
 import { orderDaysOfWeek } from './date-utils';
@@ -94,11 +94,6 @@ BpkCalendarGridHeader.propTypes = {
   isTableHead: PropTypes.bool,
   className: PropTypes.string,
   weekDayKey: CustomPropTypes.WeekDayKey,
-  // eslint-disable-next-line react/require-default-props,react/no-unused-prop-types
-  showWeekendSeparator: deprecated(
-    PropTypes.bool,
-    'The showWeekendSeparator prop in BpkCalendarGridHeader is now deprecated as no longer part of the calendar, so is no longer required',
-  ),
 };
 BpkCalendarGridHeader.defaultProps = {

package/bpk-component-calendar/src/BpkCalendarGridTransition.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { cssModules, isRTL } from '../../bpk-react-utils';

package/bpk-component-calendar/src/BpkCalendarNav.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
 import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';

package/bpk-component-calendar/src/Week.js CHANGED Viewed

@@ -17,9 +17,9 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import {
   isSameDay,
@@ -379,10 +379,6 @@ Week.propTypes = {
   isKeyboardFocusable: PropTypes.bool.isRequired,
   month: PropTypes.instanceOf(Date).isRequired,
   weekStartsOn: PropTypes.number.isRequired,
-  daysOfWeek: deprecated(
-    CustomPropTypes.DaysOfWeek,
-    'daysOfWeek property in Week is now deprecated as no longer part of the calendar, so is no longer required',
-  ),
   focusedDate: PropTypes.instanceOf(Date),
   maxDate: PropTypes.instanceOf(Date),
   minDate: PropTypes.instanceOf(Date),
@@ -390,33 +386,18 @@ Week.propTypes = {
   onDateClick: PropTypes.func,
   onDateKeyDown: PropTypes.func,
   selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-  selectedDate: deprecated(
-    PropTypes.instanceOf(Date),
-    'Use selectionConfiguration to set selectedDate',
-  ),
-  selectionEnd: PropTypes.instanceOf(Date),
-  selectionStart: PropTypes.instanceOf(Date),
-  // eslint-disable-next-line react/require-default-props
-  showWeekendSeparator: deprecated(
-    PropTypes.bool,
-    'The showWeekendSeparator prop in Week is now deprecated as no longer part of the calendar, so is no longer required',
-  ),
   ignoreOutsideDate: PropTypes.bool,
   dateProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 Week.defaultProps = {
   cellClassName: null,
-  daysOfWeek: null,
   focusedDate: null,
   maxDate: null,
   minDate: null,
   onDateClick: null,
   onDateKeyDown: null,
   selectionConfiguration: { type: CALENDAR_SELECTION_TYPE.single, date: null },
-  selectedDate: null,
-  selectionEnd: null,
-  selectionStart: null,
   ignoreOutsideDate: false,
   dateProps: null,
 };

package/bpk-component-calendar/src/composeCalendar.js CHANGED Viewed

@@ -17,9 +17,8 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import STYLES from './BpkCalendar.module.scss';
@@ -160,15 +159,6 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
     onDateKeyDown: PropTypes.func,
     preventKeyboardFocus: PropTypes.bool,
     selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-    selectedDate: deprecated(
-      PropTypes.instanceOf(Date),
-      'Use selectionConfiguration to set selectedDate',
-    ),
-    // eslint-disable-next-line react/require-default-props
-    showWeekendSeparator: deprecated(
-      PropTypes.bool,
-      'The showWeekendSeparator prop in composeCalendar is now deprecated as no longer part of the calendar, so is no longer required',
-    ),
     gridClassName: PropTypes.string,
     weekDayKey: PropTypes.string,
     /* eslint-disable react/forbid-prop-types */
@@ -197,7 +187,6 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
       type: CALENDAR_SELECTION_TYPE.single,
       date: null,
     },
-    selectedDate: null,
     gridClassName: null,
     weekDayKey: 'nameAbbr',
     navProps: null,

package/bpk-component-card/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### BpkCard
 ```js
-import React from 'react';
 import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
 export default () => (
@@ -26,7 +25,6 @@ export default () => (
 ### BpkDividedCard
 ```js
-import React from 'react';
 import { BpkDividedCard, ORIENTATION } from '@skyscanner/backpack-web/bpk-component-card';
 export default () => (

package/bpk-component-card/src/BpkCard.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-card/src/BpkDividedCard.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-checkbox/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkCheckbox from '@skyscanner/backpack-web/bpk-component-checkbox';
 export default () => (

package/bpk-component-checkbox/src/BpkCheckbox.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-chip/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkSelectableChip, { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES } from '@skyscanner/backpack-web/bpk-component-chip';
 import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach';

package/bpk-component-chip/src/BpkDismissibleChip.js CHANGED Viewed

@@ -24,8 +24,6 @@ been hard coded to have disabled={false}, selected and a trailing
 accessory view of a close icon.
 */
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';

package/bpk-component-chip/src/BpkDropdownChip.js CHANGED Viewed

@@ -23,8 +23,6 @@ The dropdown chip component is just a selectable chip component
 with a trailing accessory view of a chevron down icon.
 */
-import React from 'react';
 import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down';
 import BpkSelectableChip from './BpkSelectableChip';

package/bpk-component-chip/src/BpkSelectableChip.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';

package/bpk-component-close-button/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkCloseButton from '@skyscanner/backpack-web/bpk-component-close-button';
 export default () => (

package/bpk-component-close-button/src/BpkCloseButton.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type StatelessFunctionalComponent } from 'react';
+import type { StatelessFunctionalComponent } from 'react';
 import CloseIcon from '../../bpk-component-icon/sm/close';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-code/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkCode, BpkCodeBlock } from '@skyscanner/backpack-web/bpk-component-code';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';

package/bpk-component-code/src/BpkCode.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-code/src/BpkCodeBlock.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-content-cards/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```tsx
-import React from 'react';
 import BpkContentCards from '@skyscanner/backpack-web/bpk-component-content-cards';
 <BpkContentCards

package/bpk-component-content-cards/src/BpkContentCard.js CHANGED Viewed

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkText from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-content-cards/src/BpkContentCards.js CHANGED Viewed

@@ -17,8 +17,6 @@
  */
 /* eslint react/no-array-index-key: 0 */
-import React from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkText from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-datatable/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 const rows = [
@@ -39,7 +38,7 @@ export default () => (
 By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection`.
 ```js
-import React from 'react';
+import { Fragment } from 'react';
 import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 const complexRows = [
@@ -97,9 +96,9 @@ export default () => (
       width={100}
       flexGrow={1}
       cellRenderer={({ cellData }) => (
-        <React.Fragment>
+        <Fragment>
           {cellData.office} - {cellData.desk}
-        </React.Fragment>
+        </Fragment>
       )}
     />
   </BpkDataTable>

package/bpk-component-datatable/src/BpkDataTable.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { useMemo, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from '../../bpk-react-utils';
@@ -123,7 +124,7 @@ const BpkDataTable = (props: Props) => {
   };
   const handleKeyboardEvent = (
-    event: React.KeyboardEvent<HTMLElement>,
+    event: KeyboardEvent<HTMLElement>,
     i: number,
   ) => {
     if (

package/bpk-component-datatable/src/BpkDataTableColumn.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { SORT_DIRECTION_TYPES } from './sort-types';

package/bpk-component-datatable/src/BpkDataTableHeader.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React from 'react';
+import type { KeyboardEvent } from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
@@ -72,7 +72,7 @@ const BpkDataTableHeader = ({ column }: { column: ColumnType }) => {
     column.toggleSortBy(isDescending);
   };
-  const handleKeyboardEvent = (event: React.KeyboardEvent<HTMLElement>) => {
+  const handleKeyboardEvent = (event: KeyboardEvent<HTMLElement>) => {
     if (
       event.keyCode === KEYCODES.ENTER ||
       event.keyCode === KEYCODES.SPACEBAR

package/bpk-component-datepicker/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-datepicker';
 import format from 'date-fns/format';
@@ -71,7 +71,7 @@ export default class App extends Component {
 By default `BpkCalendar` is used but the calendar component is fully configurable through the `calendarComponent` prop.
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkDatepicker from '@skyscanner/backpack-web/bpk-component-datepicker';
 import {
   BpkCalendarNav,