@skyscanner/backpack-web 20.0.0 → 20.1.0

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-card/src/BpkCardWrapper.js

@@ -0,0 +1,66 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { type Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkCardWrapper.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  card: Node,
+  className: ?string,
+  backgroundColor: string,
+  header: Node,
+};
+
+const BpkCardWrapper = (props: Props) => {
+  const { backgroundColor, card, className, header } = props;
+
+  const classNames = getClassName('bpk-card-wrapper', className);
+
+  return (
+    <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>
+  );
+};
+
+BpkCardWrapper.propTypes = {
+  backgroundColor: PropTypes.string.isRequired,
+  card: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  header: PropTypes.node.isRequired,
+};
+
+BpkCardWrapper.defaultProps = {
+  className: null,
+};
+
+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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "20.0.0",
+  "version": "20.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",