@skyscanner/backpack-web 0.0.6 → 0.1.0

package/bpk-component-button/README.md

@@ -24,7 +24,9 @@ export default () => (
     <BpkButton large>Large primary</BpkButton>
     <BpkButton secondary>Secondary</BpkButton>
     <BpkButton link>Link</BpkButton>
-    <BpkButton outline>Outline</BpkButton>
+    <BpkButton outline>Outline (Deprecated, use PrimaryOnDark or PrimaryOnLight instead)</BpkButton>
+    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
+    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
     <BpkButton iconOnly>
       <AlignedArrowIcon />
       <span className="visually-hidden">Search</span>
@@ -35,26 +37,25 @@ export default () => (
 
 ## Props
 
-| Property    | PropType | Required | Default Value |
-| ----------- | -------- | -------- | ------------- |
-| children    | -        | true     | -             |
-| destructive | bool     | false    | false         |
-| featured    | bool     | false    | false         |
-| link        | bool     | false    | false         |
-| outline     | bool     | false    | false         |
-| secondary   | bool     | false    | false         |
-| blank       | bool     | false    | false         |
-| className   | string   | false    | null          |
-| disabled    | bool     | false    | false         |
-| href        | string   | false    | null          |
-| iconOnly    | bool     | false    | false         |
-| large       | bool     | false    | false         |
-| onClick     | func     | false    | null          |
-| padded      | bool     | false    | false         |
-| rel         | string   | false    | null          |
-| submit      | bool     | false    | false         |
-
-> Note: The `padded` boolean only applies to link-style buttons
+| Property       | PropType             | Required | Default Value |
+| -------------  | -------------------- | -------- | ------------- |
+| children       | -                    | true     | -             |
+| destructive    | bool                 | false    | false         |
+| featured       | bool                 | false    | false         |
+| link           | bool                 | false    | false         |
+| outline        | bool (deprecated)    | false    | false         |
+| secondary      | bool                 | false    | false         |
+| primaryOnDark  | bool                 | false    | false         |
+| primaryOnLight | bool                 | false    | false         |
+| blank          | bool                 | false    | false         |
+| className      | string               | false    | null          |
+| disabled       | bool                 | false    | false         |
+| href           | string               | false    | null          |
+| iconOnly       | bool                 | false    | false         |
+| large          | bool                 | false    | false         |
+| onClick        | func                 | false    | null          |
+| rel            | string               | false    | null          |
+| submit         | bool                 | false    | false         |
 
 ## Theme Props
 
@@ -69,6 +70,24 @@ export default () => (
 * `buttonPrimaryHoverBackgroundColor`
 * `buttonPrimaryActiveBackgroundColor`
 
+### Primary on dark:
+
+* `buttonPrimaryOnDarkTextColor`
+* `buttonPrimaryOnDarkHoverTextColor`
+* `buttonPrimaryOnDarkActiveTextColor`
+* `buttonPrimaryOnDarkBackgroundColor`
+* `buttonPrimaryOnDarkHoverBackgroundColor`
+* `buttonPrimaryOnDarkActiveBackgroundColor`
+
+### Primary on light:
+
+* `buttonPrimaryOnLightTextColor`
+* `buttonPrimaryOnLightHoverTextColor`
+* `buttonPrimaryOnLightActiveTextColor`
+* `buttonPrimaryOnLightBackgroundColor`
+* `buttonPrimaryOnLightHoverBackgroundColor`
+* `buttonPrimaryOnLightActiveBackgroundColor`
+
 ### Secondary:
 
 * `buttonSecondaryTextColor`

package/bpk-component-button/index.js

@@ -20,6 +20,8 @@
 
 import BpkButton from './src/BpkButton'; // eslint-disable-line import/no-cycle
 import BpkButtonPrimary from './src/BpkButtonPrimary';
+import BpkButtonPrimaryOnDark from './src/BpkButtonPrimaryOnDark';
+import BpkButtonPrimaryOnLight from './src/BpkButtonPrimaryOnLight';
 import BpkButtonSecondary from './src/BpkButtonSecondary';
 import BpkButtonDestructive from './src/BpkButtonDestructive';
 import BpkButtonLink from './src/BpkButtonLink';
@@ -38,6 +40,8 @@ export default BpkButton;
 
 export {
   BpkButtonPrimary,
+  BpkButtonPrimaryOnDark,
+  BpkButtonPrimaryOnLight,
   BpkButtonSecondary,
   BpkButtonDestructive,
   BpkButtonLink,

package/bpk-component-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-button",
-  "version": "5.1.0",
+  "version": "6.1.0",
   "description": "Backpack button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
+    "bpk-mixins": "^28.1.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-storybook-utils": "^1.1.3"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-button/src/BpkButton.js

@@ -24,6 +24,8 @@ import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-cycle
 import {
   BpkButtonPrimary,
+  BpkButtonPrimaryOnDark,
+  BpkButtonPrimaryOnLight,
   BpkButtonSecondary,
   BpkButtonDestructive,
   BpkButtonLink,
@@ -39,17 +41,34 @@ import {
 
 type Props = {
   ...CommonProps,
+  primaryOnDark: boolean,
+  primaryOnLight: boolean,
   secondary: boolean,
   destructive: boolean,
   featured: boolean,
   outline: boolean,
   link: boolean,
-  padded: boolean,
 };
 
 const BpkButton = (props: Props) => {
-  const { destructive, featured, link, outline, padded, secondary, ...rest } =
-    props;
+  const {
+    destructive,
+    featured,
+    link,
+    outline,
+    primaryOnDark,
+    primaryOnLight,
+    secondary,
+    ...rest
+  } = props;
+
+  if (primaryOnDark) {
+    return <BpkButtonPrimaryOnDark {...rest} />;
+  }
+
+  if (primaryOnLight) {
+    return <BpkButtonPrimaryOnLight {...rest} />;
+  }
 
   if (secondary) {
     return <BpkButtonSecondary {...rest} />;
@@ -64,29 +83,30 @@ const BpkButton = (props: Props) => {
     return <BpkButtonOutline {...rest} />;
   }
   if (link) {
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    return <BpkButtonLink padded={padded} {...rest} />;
+    return <BpkButtonLink {...rest} />;
   }
   return <BpkButtonPrimary {...rest} />;
 };
 
 BpkButton.propTypes = {
   ...propTypes,
+  primaryOnDark: PropTypes.bool,
+  primaryOnLight: PropTypes.bool,
   secondary: PropTypes.bool,
   destructive: PropTypes.bool,
   featured: PropTypes.bool,
   outline: PropTypes.bool,
-  padded: PropTypes.bool,
   link: PropTypes.bool,
 };
 
 BpkButton.defaultProps = {
   ...defaultProps,
+  primaryOnDark: false,
+  primaryOnLight: false,
   secondary: false,
   destructive: false,
   featured: false,
   outline: false,
-  padded: false,
   link: false,
 };
 

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

@@ -19,7 +19,6 @@
 /* @flow strict */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {
   type Props as CommonProps,
@@ -33,15 +32,14 @@ const getClassName = cssModules(STYLES);
 
 type Props = {
   ...CommonProps,
-  padded: boolean,
 };
 const BpkButtonLink = (props: Props) => {
-  const { className, padded, ...rest } = props;
+  const { className, large, ...rest } = props;
 
   const classNames = [getClassName('bpk-button--link')];
 
-  if (padded) {
-    classNames.push(getClassName('bpk-button--padded'));
+  if (large) {
+    classNames.push(getClassName('bpk-button--link-large'));
   }
 
   if (className) {
@@ -51,11 +49,11 @@ const BpkButtonLink = (props: Props) => {
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkButtonBase className={classNamesFinal} {...rest} />
+    <BpkButtonBase className={classNamesFinal} large={large} {...rest} />
   );
 };
 
-BpkButtonLink.propTypes = { ...propTypes, padded: PropTypes.bool };
-BpkButtonLink.defaultProps = { ...defaultProps, padded: false };
+BpkButtonLink.propTypes = { ...propTypes };
+BpkButtonLink.defaultProps = { ...defaultProps };
 
 export default BpkButtonLink;

package/bpk-component-button/src/BpkButtonLink.module.scss

@@ -22,8 +22,4 @@
   &--link {
     @include bpk-button--link;
   }
-
-  &--padded {
-    @include bpk-button--padded;
-  }
 }

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

@@ -0,0 +1,48 @@
+/*
+ * 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 { type Props, defaultProps, propTypes } from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonPrimaryOnDark.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkButtonPrimaryOnDark = (props: Props) => {
+  const { className, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--primary-on-dark')];
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} {...rest} />
+  );
+};
+
+BpkButtonPrimaryOnDark.propTypes = { ...propTypes };
+BpkButtonPrimaryOnDark.defaultProps = { ...defaultProps };
+
+export default BpkButtonPrimaryOnDark;

package/bpk-component-button/{BpkButtonStory.module.scss → src/BpkButtonPrimaryOnDark.module.scss}

@@ -18,6 +18,6 @@
 
 @import '~bpk-mixins/index';
 
-.bpk-button-story-wrapper {
-  padding: $bpk-spacing-xs 0;
+.bpk-button--primary-on-dark {
+  @include bpk-button--primary-on-dark;
 }

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

@@ -0,0 +1,48 @@
+/*
+ * 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 { type Props, defaultProps, propTypes } from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonPrimaryOnLight.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkButtonPrimaryOnLight = (props: Props) => {
+  const { className, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--primary-on-light')];
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} {...rest} />
+  );
+};
+
+BpkButtonPrimaryOnLight.propTypes = { ...propTypes };
+BpkButtonPrimaryOnLight.defaultProps = { ...defaultProps };
+
+export default BpkButtonPrimaryOnLight;

package/{bpk-component-nudger/BpkNudgerStory.module.scss → bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss}

@@ -18,10 +18,6 @@
 
 @import '~bpk-mixins/index';
 
-.bpk-nudger-outline {
-  color: $bpk-color-white;
-}
-
-.bpk-nudger-configurable {
-  width: 7rem;
+.bpk-button--primary-on-light {
+  @include bpk-button--primary-on-light;
 }

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

@@ -29,6 +29,24 @@ export const primaryThemeAttributes = [
   'buttonPrimaryActiveBackgroundColor',
 ];
 
+export const primaryOnDarkThemeAttributes = [
+  'buttonPrimaryOnDarkTextColor',
+  'buttonPrimaryOnDarkHoverTextColor',
+  'buttonPrimaryOnDarkActiveTextColor',
+  'buttonPrimaryOnDarkBackgroundColor',
+  'buttonPrimaryOnDarkHoverBackgroundColor',
+  'buttonPrimaryOnDarkActiveBackgroundColor',
+];
+
+export const primaryOnLightThemeAttributes = [
+  'buttonPrimaryOnLightTextColor',
+  'buttonPrimaryOnLightHoverTextColor',
+  'buttonPrimaryOnLightActiveTextColor',
+  'buttonPrimaryOnLightBackgroundColor',
+  'buttonPrimaryOnLightHoverBackgroundColor',
+  'buttonPrimaryOnLightActiveBackgroundColor',
+];
+
 export const secondaryThemeAttributes = [
   'buttonSecondaryTextColor',
   'buttonSecondaryHoverTextColor',

package/bpk-component-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "11.1.1",
+  "version": "11.1.7",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-aria-live": "^2.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-select": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-aria-live": "^2.1.7",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-select": "^5.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "date-fns": "^2.21.1",
     "prop-types": "^15.7.2"
   },
@@ -27,8 +27,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-text": "^6.1.5",
+    "bpk-storybook-utils": "^1.1.3"
   }
 }

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { deprecated, isRTL } from '../../bpk-react-utils';
+import { deprecated, isRTL } from 'bpk-react-utils';
 
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import BpkCalendarNav from './BpkCalendarNav';

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import CustomPropTypes from './custom-proptypes';
 import STYLES from './BpkCalendarDate.module.scss';

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';
+import { cssModules, deprecated, isDeviceIos } from 'bpk-react-utils';
 
 import BpkCalendarGridHeader from './BpkCalendarGridHeader';
 import Week from './Week';
@@ -111,7 +111,7 @@ class BpkCalendarGrid extends Component {
     const classNames = getClassName('bpk-calendar-grid', className);
 
     return (
-      <table className={classNames} aria-hidden={!isKeyboardFocusable}>
+      <div className={classNames} aria-hidden={!isKeyboardFocusable}>
         <caption className={getClassName('bpk-calendar-grid__caption')} hidden>
           {formatMonth(month)}
         </caption>
@@ -120,7 +120,7 @@ class BpkCalendarGrid extends Component {
           daysOfWeek={daysOfWeek}
           weekStartsOn={weekStartsOn}
         />
-        <tbody>
+        <div>
           {calendarMonthWeeks.map((dates) => (
             <Week
               key={formatIsoDate(dates[0])}
@@ -147,8 +147,8 @@ class BpkCalendarGrid extends Component {
               cellClassName={cellClassName}
             />
           ))}
-        </tbody>
-      </table>
+        </div>
+      </div>
     );
   }
 }

package/bpk-component-calendar/src/BpkCalendarGrid.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{display:table-cell;width:100%;padding:0;text-align:center;vertical-align:middle}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:table;width:100%;padding-top:1.5rem;table-layout:fixed}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;text-align:center}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem}

package/bpk-component-calendar/src/BpkCalendarGrid.module.scss

@@ -34,11 +34,8 @@
   }
 
   &__date {
-    display: table-cell;
     width: 100%;
-    padding: 0;
     text-align: center;
-    vertical-align: middle;
 
     &--start {
       background-image: linear-gradient(
@@ -60,11 +57,8 @@
       );
     }
   }
-
   &__week {
-    display: table;
-    width: 100%;
+    display: flex;
     padding-top: bpk-spacing-lg();
-    table-layout: fixed;
   }
 }

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules, deprecated } from 'bpk-react-utils';
 
 import CustomPropTypes from './custom-proptypes';
 import { orderDaysOfWeek } from './date-utils';

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

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

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

@@ -18,11 +18,11 @@
 
 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';
-import BpkSelect from '../../bpk-component-select';
-import { cssModules } from '../../bpk-react-utils';
-import BpkAriaLive from '../../bpk-component-aria-live';
+import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
+import BpkSelect from 'bpk-component-select';
+import { cssModules } from 'bpk-react-utils';
+import BpkAriaLive from 'bpk-component-aria-live';
 
 import {
   addMonths,

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules, deprecated } from 'bpk-react-utils';
 
 import {
   isSameDay,
@@ -317,7 +317,7 @@ class Week extends Component {
     }
 
     return (
-      <tr className={getClassName('bpk-calendar-grid__week')}>
+      <div className={getClassName('bpk-calendar-grid__week')}>
         {this.props.dates.map((date) => {
           const isBlocked =
             minDate && maxDate
@@ -360,7 +360,7 @@ class Week extends Component {
             </DateContainer>
           );
         })}
-      </tr>
+      </div>
     );
   }
 }
@@ -431,9 +431,9 @@ const DateContainer = (props) => {
   );
 
   return (
-    <td aria-hidden={isEmptyCell || isBlocked} className={classNames}>
+    <div aria-hidden={isEmptyCell || isBlocked} className={classNames}>
       {children}
-    </td>
+    </div>
   );
 };
 

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules, deprecated } from 'bpk-react-utils';
 
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import STYLES from './BpkCalendar.module.scss';

package/bpk-component-calendar/src/custom-proptypes.js

@@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
 
 import { isBefore, isSameDay } from './date-utils';
 
-const DateType = (key) => (props) => {
-  const { endDate, startDate } = props[key];
+const DateType = () => (props) => {
+  const { endDate, startDate } = props;
 
   // No range selected
   if (!startDate && !endDate) {
@@ -30,9 +30,7 @@ const DateType = (key) => (props) => {
 
   // End date without a start date is not allowed
   if (!startDate && endDate) {
-    return new Error(
-      `Cannot specify \`endDate\` without \`startDate\` in ${key}.`,
-    );
+    return new Error(`Cannot specify \`endDate\` without \`startDate\`.`);
   }
 
   // Start date without an end date is always valid
@@ -43,7 +41,7 @@ const DateType = (key) => (props) => {
   // Start date cannot be after end date
   if (isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
     return new Error(
-      `Start date \`${startDate}\` cannot be after end date \`${endDate}\` in \`props.${key}\`.`,
+      `Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`,
     );
   }
 
@@ -62,8 +60,8 @@ const SelectionConfigurationSingle = PropTypes.shape({
 
 const SelectionConfigurationRange = PropTypes.shape({
   type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.range]),
-  startDate: DateType('selectionConfiguration'),
-  endDate: DateType('selectionConfiguration'),
+  startDate: DateType(),
+  endDate: DateType(),
 });
 
 const SelectionConfiguration = PropTypes.oneOfType([