@skyscanner/backpack-web 18.1.0 → 18.2.1

package/README.md

@@ -7,7 +7,7 @@
 
 ## Quick links
 
-- [Documentation](skyscanner.design/)
+- [Documentation](https://www.skyscanner.design/)
 - [Changelog](./CHANGELOG.md)
 
 ## Usage

package/bpk-component-card/README.md

@@ -30,11 +30,21 @@ import React from 'react';
 import { BpkDividedCard, ORIENTATION } from '@skyscanner/backpack-web/bpk-component-card';
 
 export default () => (
-  <BpkDividedCard
-    primaryContent={'foo'}
-    secondaryContent={'bar'}
-    orientation={ORIENTATION.vertical}
-  />
+  <>
+    <BpkDividedCard
+      primaryContent={'foo'}
+      secondaryContent={'bar'}
+      orientation={ORIENTATION.vertical}
+    />
+
+    // Toggle shadow shadow with isElevated
+    <BpkDividedCard
+      primaryContent={'foo'}
+      secondaryContent={'bar'}
+      orientation={ORIENTATION.horizontal}
+      isElevated={false}
+    />
+  </>
 );
 ```
 
@@ -59,3 +69,4 @@ export default () => (
 | orientation | oneOf(ORIENTATION.horizontal, ORIENTATION.vertical)    | false    | ORIENTATION.horizontal          |
 | href | string   | false    | null          |
 | className | string   | false    | null          |
+| isElevated | bool   | false    | true          |

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

@@ -39,15 +39,12 @@ type Props = {
 const BpkCard = (props: Props) => {
   const { atomic, blank, children, className, href, padded, ...rest } = props;
 
-  const classNames = [getClassName('bpk-card')];
-  if (padded) {
-    classNames.push(getClassName('bpk-card--padded'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-
-  const classNameFinal = classNames.join(' ');
+  const classNames = getClassName(
+    'bpk-card',
+    atomic && !href && 'bpk-card--atomic-button',
+    padded && 'bpk-card--padded',
+    className,
+  );
 
   const atomicProps: { tabIndex: ?number, role: ?string } = {};
 
@@ -68,7 +65,7 @@ const BpkCard = (props: Props) => {
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       <a
         href={href}
-        className={classNameFinal}
+        className={classNames}
         {...atomicProps}
         {...blankProps}
         {...rest}
@@ -78,15 +75,17 @@ const BpkCard = (props: Props) => {
     );
   }
 
-  // If the card is atomic, we need to enable keyboard focus and provide an appropriate role.
   if (atomic) {
-    atomicProps.tabIndex = 0;
-    atomicProps.role = 'button';
+    return (
+      <button type="button" className={classNames} {...rest}>
+        {children}
+      </button>
+    );
   }
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div {...atomicProps} className={classNameFinal} {...rest}>
+    <div className={classNames} {...rest}>
       {children}
     </div>
   );

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

@@ -21,6 +21,17 @@
 .bpk-card {
   @include bpk-card;
 
+  &--atomic-button {
+    width: 100%;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    appearance: none;
+  }
+
   &--padded {
     @include bpk-card--padded;
   }

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

@@ -38,11 +38,13 @@ export type Props = {
   orientation: $Values<typeof ORIENTATION>,
   href: ?string,
   className: ?string,
+  isElevated: boolean,
 };
 const BpkDividedCard = (props: Props) => {
   const {
     className,
     href,
+    isElevated,
     orientation,
     primaryContent,
     secondaryContent,
@@ -52,6 +54,7 @@ const BpkDividedCard = (props: Props) => {
   const classNames = getClassName(
     'bpk-divided-card',
     isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal',
+    !isElevated && 'bpk-divided-card--no-elevation',
     className,
   );
 
@@ -84,12 +87,14 @@ BpkDividedCard.propTypes = {
   orientation: PropTypes.oneOf(Object.keys(ORIENTATION)),
   href: PropTypes.string,
   className: PropTypes.string,
+  isElevated: PropTypes.bool,
 };
 
 BpkDividedCard.defaultProps = {
   orientation: ORIENTATION.horizontal,
   href: null,
   className: null,
+  isElevated: true,
 };
 
 export default BpkDividedCard;

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

@@ -26,6 +26,7 @@ $fixed-secondary-width: 216;
 
 .bpk-divided-card {
   display: flex;
+  align-items: stretch;
 
   &--vertical {
     min-width: $bpk-one-pixel-rem * $min-vertical-width;
@@ -59,4 +60,12 @@ $fixed-secondary-width: 216;
       }
     }
   }
+
+  &--no-elevation {
+    box-shadow: none;
+
+    &::after {
+      box-shadow: none;
+    }
+  }
 }

package/bpk-component-datatable/README.md

@@ -117,6 +117,7 @@ export default () => (
 | height                 | number                      | true     | -                    |
 | width                  | number                      | false    | full width of parent |
 | headerHeight           | number                      | false    | 60                   |
+| rowClassName           | string                      | false    | null                 |
 | rowHeight              | number                      | false    | 60                   |
 | rowStyle               | object                      | false    | {}                   |
 | onRowClick             | func                        | false    | null                 |

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

@@ -41,7 +41,13 @@ const BpkDataTable = (props: Props) => {
     children,
     className,
     defaultColumnSortIndex,
+    headerClassName,
+    headerHeight,
     height,
+    onRowClick,
+    rowClassName,
+    rowHeight,
+    rowStyle,
     rows: data,
     sort,
     sortBy,
@@ -61,7 +67,7 @@ const BpkDataTable = (props: Props) => {
     const rowClassNames = getClassName(
       'bpk-data-table__row',
       rowSelected === index && 'bpk-data-table__row--selected',
-      props.onRowClick !== undefined && 'bpk-data-table__row--clickable',
+      onRowClick !== undefined && 'bpk-data-table__row--clickable',
       index === -1 && 'bpk-data-table__header-row',
       consumerClassName &&
         (typeof consumerClassName === 'function'
@@ -74,7 +80,7 @@ const BpkDataTable = (props: Props) => {
   const headerClassNames = getClassName(
     'bpk-data-table__row',
     'bpk-data-table__header-row',
-    props.headerClassName,
+    headerClassName,
   );
 
   const columns = useMemo(() => getColumns(children), [children]);
@@ -111,8 +117,8 @@ const BpkDataTable = (props: Props) => {
     } else {
       updateRowSelected(index);
     }
-    if (props.onRowClick !== undefined) {
-      props.onRowClick(rows[index].original);
+    if (onRowClick !== undefined) {
+      onRowClick(rows[index].original);
     }
   };
 
@@ -141,7 +147,7 @@ const BpkDataTable = (props: Props) => {
         {headerGroups.map((headerGroup) => (
           <div
             {...headerGroup.getHeaderGroupProps({
-              style: { height: props.headerHeight },
+              style: { height: headerHeight },
               className: headerClassNames,
             })}
           >
@@ -169,10 +175,10 @@ const BpkDataTable = (props: Props) => {
               tabIndex={0}
               {...row.getRowProps({
                 style: {
-                  ...props.rowStyle,
-                  height: props.rowHeight,
+                  ...rowStyle,
+                  height: rowHeight,
                 },
-                className: getRowClassNames(props.rowClassName, i),
+                className: getRowClassNames(rowClassName, i),
               })}
             >
               {row.cells.map((cell) => {

package/bpk-component-image/src/BpkImage.module.scss

@@ -53,7 +53,7 @@
 }
 
 @mixin bpk-image--no-background {
-  background-color: $bpk-surface-contrast-day;
+  background-color: transparent;
 }
 
 @mixin bpk-image {

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -43,7 +43,7 @@ export type Props = {
   portalStyle: ?Object,
   portalClassName: ?string,
   renderTarget: ?() => ?HTMLElement,
-  popperModifiers: ?Object,
+  popperModifiers: ?Array<Object>,
 };
 
 export const propTypes = {
@@ -55,7 +55,7 @@ export const propTypes = {
   portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   portalClassName: PropTypes.string,
   renderTarget: PropTypes.func,
-  popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  popperModifiers: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
 };
 
 export const defaultProps = {

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -50,7 +50,7 @@ export type Props = {
   portalStyle: ?Object,
   portalClassName: ?string,
   renderTarget: ?() => HTMLElement,
-  popperModifiers: ?Object,
+  popperModifiers: ?Array<Object>,
 };
 
 type State = {
@@ -72,7 +72,7 @@ class BpkTooltipPortal extends Component<Props, State> {
     portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     portalClassName: PropTypes.string,
     renderTarget: PropTypes.func,
-    popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    popperModifiers: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   };
 
   static defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "18.1.0",
+  "version": "18.2.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@skyscanner/bpk-svgs": "^16.2.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^39.0.1",
+    "bpk-mixins": "^39.1.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",