@skyscanner/backpack-web 19.0.0 → 20.1.0

package/README.md

@@ -48,7 +48,6 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-fieldset`](/packages/bpk-component-fieldset)
 [`bpk-component-form-validation`](/packages/bpk-component-form-validation)
 [`bpk-component-graphic-promotion`](/packages/bpk-component-graphic-promotion)
-[`bpk-component-grid`](/packages/bpk-component-grid)
 [`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle)
 [`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav)
 [`bpk-component-icon`](/packages/bpk-component-icon)

package/bpk-component-banner-alert/src/BpkBannerAlert.module.scss

@@ -58,10 +58,6 @@ $bpk-spacing-v2: true;
     @include bpk-border-sm($bpk-banner-alert-neutral-color, '');
   }
 
-  &--event {
-    @include bpk-border-sm($bpk-banner-alert-event-color, '');
-  }
-
   &__header {
     display: flex;
     padding: bpk-spacing-md();
@@ -129,10 +125,6 @@ $bpk-spacing-v2: true;
     fill: $bpk-text-secondary-day;
   }
 
-  &__event-icon {
-    fill: $bpk-banner-alert-event-color;
-  }
-
   &__toggle-button {
     padding: 0;
     border: 0;

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -65,7 +65,6 @@ const getIconForType = (
     [ALERT_TYPES.WARN]: getClassName('bpk-banner-alert__warn-icon'),
     [ALERT_TYPES.ERROR]: getClassName('bpk-banner-alert__error-icon'),
     [ALERT_TYPES.NEUTRAL]: getClassName('bpk-banner-alert__neutral-icon'),
-    [ALERT_TYPES.EVENT]: getClassName('bpk-banner-alert__event-icon'),
   };
   const className = classMap[type];
   const componentMap: { [AlertTypeValue]: Node } = {
@@ -74,7 +73,6 @@ const getIconForType = (
     [ALERT_TYPES.WARN]: InfoCircleIcon,
     [ALERT_TYPES.ERROR]: InfoCircleIcon,
     [ALERT_TYPES.NEUTRAL]: InfoCircleIcon,
-    [ALERT_TYPES.EVENT]: InfoCircleIcon,
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);

package/bpk-component-banner-alert/src/common-types.js

@@ -25,7 +25,6 @@ export const ALERT_TYPES = {
   WARN: 'warn',
   ERROR: 'error',
   NEUTRAL: 'neutral',
-  EVENT: 'event', // DEPRECATED
 };
 
 export type AlertTypeValue = $Values<typeof ALERT_TYPES>;
@@ -45,14 +44,7 @@ export type OnDismissHandler = ?() => void;
 export type OnHideHandler = ?() => void;
 
 export const COMMON_PROP_TYPES = {
-  type: PropTypes.oneOf([
-    ALERT_TYPES.PRIMARY,
-    ALERT_TYPES.SUCCESS,
-    ALERT_TYPES.WARN,
-    ALERT_TYPES.ERROR,
-    ALERT_TYPES.NEUTRAL,
-    ALERT_TYPES.EVENT,
-  ]).isRequired,
+  type: PropTypes.oneOf(Object.values(ALERT_TYPES)).isRequired,
   message: PropTypes.node.isRequired,
   animateOnEnter: PropTypes.bool,
   animateOnLeave: PropTypes.bool,

package/bpk-component-button/README.md

@@ -23,7 +23,6 @@ export default () => (
     <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
     <BpkButton link>Link</BpkButton>
     <BpkButton linkOnDark>LinkOnDark</BpkButton>
-    <BpkButton outline>Outline (Deprecated, use PrimaryOnDark or PrimaryOnLight instead)</BpkButton>
     <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
     <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
     <BpkButton iconOnly>
@@ -43,7 +42,6 @@ export default () => (
 | featured        | bool                 | false    | false         |
 | link            | bool                 | false    | false         |
 | linkOnDark      | bool                 | false    | false         |
-| outline         | bool (deprecated)    | false    | false         |
 | secondary       | bool                 | false    | false         |
 | secondaryOnDark | bool                 | false    | false         |
 | primaryOnDark   | bool                 | false    | false         |

package/bpk-component-button/index.js

@@ -28,7 +28,6 @@ import BpkButtonDestructive from './src/BpkButtonDestructive';
 import BpkButtonLink from './src/BpkButtonLink';
 import BpkButtonLinkOnDark from './src/BpkButtonLinkOnDark';
 import BpkButtonFeatured from './src/BpkButtonFeatured';
-import BpkButtonOutline from './src/BpkButtonOutline';
 
 export {
   buttonThemeAttributes,
@@ -53,5 +52,4 @@ export {
   BpkButtonLink,
   BpkButtonLinkOnDark,
   BpkButtonFeatured,
-  BpkButtonOutline,
 };

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

@@ -31,7 +31,6 @@ import {
   BpkButtonLink,
   BpkButtonLinkOnDark,
   BpkButtonFeatured,
-  BpkButtonOutline,
 } from '../index';
 
 import {
@@ -48,7 +47,6 @@ type Props = {
   secondaryOnDark: boolean,
   destructive: boolean,
   featured: boolean,
-  outline: boolean,
   link: boolean,
   linkOnDark: boolean,
 };
@@ -59,7 +57,6 @@ const BpkButton = (props: Props) => {
     featured,
     link,
     linkOnDark,
-    outline,
     primaryOnDark,
     primaryOnLight,
     secondary,
@@ -87,9 +84,6 @@ const BpkButton = (props: Props) => {
   if (featured) {
     return <BpkButtonFeatured {...rest} />;
   }
-  if (outline) {
-    return <BpkButtonOutline {...rest} />;
-  }
   if (link) {
     return <BpkButtonLink {...rest} />;
   }
@@ -107,7 +101,6 @@ BpkButton.propTypes = {
   secondaryOnDark: PropTypes.bool,
   destructive: PropTypes.bool,
   featured: PropTypes.bool,
-  outline: PropTypes.bool,
   link: PropTypes.bool,
   linkOnDark: PropTypes.bool,
 };
@@ -120,7 +113,6 @@ BpkButton.defaultProps = {
   secondaryOnDark: false,
   destructive: false,
   featured: false,
-  outline: false,
   link: false,
   linkOnDark: false,
 };

package/bpk-component-calendar/README.md

@@ -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

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 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/BpkCalendarGrid.js

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 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

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 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/Week.js

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 
-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';
@@ -159,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 */
@@ -196,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

@@ -15,9 +15,9 @@ import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
 
 export default () => (
   <BpkCard>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
+    parturient montes, nascetur ridiculus mus.
   </BpkCard>
 );
 ```
@@ -25,20 +25,22 @@ export default () => (
 ### BpkDividedCard
 
 ```js
-import { BpkDividedCard, ORIENTATION } from '@skyscanner/backpack-web/bpk-component-card';
+import {
+  BpkDividedCard,
+  ORIENTATION,
+} from '@skyscanner/backpack-web/bpk-component-card';
 
 export default () => (
   <>
     <BpkDividedCard
-      primaryContent={'foo'}
-      secondaryContent={'bar'}
+      primaryContent={<span>foo</span>}
+      secondaryContent={<span>bar</span>}
       orientation={ORIENTATION.vertical}
     />
-
     // Toggle shadow shadow with isElevated
     <BpkDividedCard
-      primaryContent={'foo'}
-      secondaryContent={'bar'}
+      primaryContent={<span>foo</span>}
+      secondaryContent={<span>bar</span>}
       orientation={ORIENTATION.horizontal}
       isElevated={false}
     />
@@ -46,6 +48,28 @@ export default () => (
 );
 ```
 
+### BpkCardWrapper
+
+```js
+import { BpkCardWrapper } from '@skyscanner/backpack-web/bpk-component-card';
+import { coreAccentDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
+
+export default () => (
+  <BpkCardWrapper
+    header={<span>Hoc header</span>}
+    card={
+      <BpkCard>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
+        dis parturient montes, nascetur ridiculus mus.
+      </BpkCard>
+    }
+    backgroundColor={coreAccentDay}
+  />
+);
+```
+
 ## Props
 
 ### BpkCard
@@ -60,11 +84,20 @@ export default () => (
 
 ### BpkDividedCard
 
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| primaryContent | node   | true    | -          |
-| secondaryContent | node   | true    | -          |
-| orientation | oneOf(ORIENTATION.horizontal, ORIENTATION.vertical)    | false    | ORIENTATION.horizontal          |
-| href | string   | false    | null          |
-| className | string   | false    | null          |
-| isElevated | bool   | false    | true          |
+| Property         | PropType                                            | Required | Default Value          |
+| ---------------- | --------------------------------------------------- | -------- | ---------------------- |
+| primaryContent   | node                                                | true     | -                      |
+| secondaryContent | node                                                | true     | -                      |
+| orientation      | oneOf(ORIENTATION.horizontal, ORIENTATION.vertical) | false    | ORIENTATION.horizontal |
+| href             | string                                              | false    | null                   |
+| className        | string                                              | false    | null                   |
+| isElevated       | bool                                                | false    | true                   |
+
+### BpkCardWrapper
+
+| Property        | PropType | Required | Default Value |
+| --------------- | -------- | -------- | ------------- |
+| backgroundColor | string   | true     | null          |
+| card            | node     | true     | -             |
+| header          | node     | true     | -             |
+| className       | string   | false    | null          |

package/bpk-component-card/index.js

@@ -18,8 +18,9 @@
 /* @flow strict */
 
 import BpkCard from './src/BpkCard';
+import BpkCardWrapper from './src/BpkCardWrapper';
 import BpkDividedCard, { ORIENTATION } from './src/BpkDividedCard';
 
-export { ORIENTATION, BpkDividedCard };
+export { ORIENTATION, BpkDividedCard, BpkCardWrapper };
 
 export default BpkCard;

package/{bpk-component-grid/src/BpkGridContainer.js → bpk-component-card/src/BpkCardWrapper.js}

@@ -16,46 +16,51 @@
  * limitations under the License.
  */
 
+/* @flow strict */
+
 import PropTypes from 'prop-types';
+import { type Node } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
-import STYLES from './BpkGridContainer.module.scss';
+import STYLES from './BpkCardWrapper.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-const BpkGridContainer = (props) => {
-  const { children, className, debug, fullWidth, ...rest } = props;
-  const classNames = [getClassName('bpk-grid__container')];
+type Props = {
+  card: Node,
+  className: ?string,
+  backgroundColor: string,
+  header: Node,
+};
+
+const BpkCardWrapper = (props: Props) => {
+  const { backgroundColor, card, className, header } = props;
 
-  if (debug) {
-    classNames.push(getClassName('bpk-grid__container--debug'));
-  }
-  if (fullWidth) {
-    classNames.push(getClassName('bpk-grid__container--full-width'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
+  const classNames = getClassName('bpk-card-wrapper', className);
 
   return (
-    <div className={classNames.join(' ')} {...rest}>
-      {children}
+    <div
+      className={classNames}
+      style={{
+        '--background-color': backgroundColor,
+      }}
+    >
+      <div className={getClassName('bpk-card-wrapper--header')}>{header}</div>
+      <div className={getClassName('bpk-card-wrapper--content')}>{card}</div>
     </div>
   );
 };
 
-BpkGridContainer.propTypes = {
-  children: PropTypes.node.isRequired,
-  debug: PropTypes.bool,
-  fullWidth: PropTypes.bool,
+BpkCardWrapper.propTypes = {
+  backgroundColor: PropTypes.string.isRequired,
+  card: PropTypes.node.isRequired,
   className: PropTypes.string,
+  header: PropTypes.node.isRequired,
 };
 
-BpkGridContainer.defaultProps = {
-  debug: false,
-  fullWidth: false,
+BpkCardWrapper.defaultProps = {
   className: null,
 };
 
-export default BpkGridContainer;
+export default BpkCardWrapper;

package/bpk-component-card/src/BpkCardWrapper.module.scss

@@ -0,0 +1,61 @@
+/*
+ * 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.scss';
+
+.bpk-card-wrapper {
+  @include bpk-card;
+  @include bpk-border-lg(var(--background-color), '');
+
+  &--header {
+    border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0;
+    background-color: var(--background-color);
+    overflow: hidden;
+  }
+
+  &--content {
+    position: relative;
+    border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
+    overflow: hidden;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      content: ' ';
+      z-index: 2;
+      width: bpk-spacing-lg();
+      height: bpk-spacing-lg();
+      background-color: transparent;
+      box-shadow: bpk-spacing-base() 0 0 0 var(--background-color);
+      overflow: hidden;
+
+      @include bpk-border-radius-md;
+    }
+
+    &::before {
+      left: 0;
+      transform: rotate(225deg);
+    }
+
+    &::after {
+      right: 0;
+      transform: rotate(-45deg);
+    }
+  }
+}

package/bpk-component-datatable/README.md

@@ -113,11 +113,11 @@ export default () => (
 | ---------------------- | --------------------------- | -------- | -------------------- |
 | rows                   | arrayOf(Object)             | true     | -                    |
 | children               | arrayOf(BpkDataTableColumn) | true     | -                    |
-| height                 | number                      | true     | -                    |
-| width                  | number                      | false    | full width of parent |
-| headerHeight           | number                      | false    | 60                   |
+| height                 | oneOfType(number, string)   | true     | -                    |
+| width                  | oneOfType(number, string)   | false    | full width of parent |
+| headerHeight           | oneOfType(number, string)   | false    | 60                   |
 | rowClassName           | string                      | false    | null                 |
-| rowHeight              | number                      | false    | 60                   |
+| rowHeight              | oneOfType(number, string)   | false    | 60                   |
 | rowStyle               | object                      | false    | {}                   |
 | onRowClick             | func                        | false    | null                 |
 | className              | string                      | false    | null                 |
@@ -193,4 +193,4 @@ function ({
   rowData: any,
   rowIndex: any,
 }): node
-```
+```

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

@@ -212,10 +212,10 @@ const BpkDataTable = (props: Props) => {
 BpkDataTable.propTypes = {
   rows: PropTypes.arrayOf(Object).isRequired,
   children: PropTypes.node.isRequired,
-  height: PropTypes.number.isRequired,
-  width: PropTypes.number,
-  headerHeight: PropTypes.number,
-  rowHeight: PropTypes.number,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  headerHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   className: PropTypes.string,
   defaultColumnSortIndex: PropTypes.number,
   sort: PropTypes.func,