@skyscanner/backpack-web 18.0.0 → 18.2.0

package/README.md

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

package/bpk-component-accordion/README.md

@@ -60,7 +60,7 @@ export default () => (
 
 ### Displaying icons
 
-`BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://backpack.github.io/components/alignment?platform=web)
+`BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://skyscanner.design/latest/components/alignment/web.html)
 
 ```js
 import React from 'react';

package/bpk-component-autosuggest/README.md

@@ -110,7 +110,7 @@ class MyComponent extends Component {
 
 [Please refer to `react-autosuggest`'s documentation for a full list of props](https://github.com/moroshko/react-autosuggest#props).
 
-**Note:** The `inputProps` object is passed directly to a [`BpkInput`](https://backpack.github.io/components/text-input?platform=web) component, so its prop types apply also.
+**Note:** The `inputProps` object is passed directly to a [`BpkInput`](../bpk-component-input/README.md#props) component, so its prop types apply also.
 
 *BpkAutosuggestSuggestion:*
 

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-icon/lg/origin.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M12 18a6 6 0 110-12 6 6 0 010 12zm0 4c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /></svg>);

package/bpk-component-icon/sm/origin.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
+}} {...props}><path d="M12 17.25a5.25 5.25 0 110-10.5 5.25 5.25 0 010 10.5zM12 21a9 9 0 100-18 9 9 0 000 18z" /></svg>);

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-scrollable-calendar/README.md

@@ -73,7 +73,7 @@ It is composed of `BpkScrollableCalendarGrid` elements. It uses all the same pro
 as `BpkCalendarGrid`, but in addition `minDate` and `maxDate` are required to build
 the actual list.
 
-[Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
+[Please refer to the props of BpkCalendarGrid here](../bpk-component-calendar/README.md#bpkcalendargrid).
 
 | Property | PropType | Required | Default Value |
 | -------- | -------- | -------- | ------------- |
@@ -88,7 +88,7 @@ used with `BpkScrollableCalendarDate`, it only displays days from
 that specific month. It is built on top of BpkCalendarGrid and
 uses the same props.
 
-[Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
+[Please refer to the props of BpkCalendarGrid here](../bpk-component-calendar/README.md#bpkcalendargrid).
 
 ### BpkScrollableCalendarDate
 
@@ -97,4 +97,4 @@ The BpkScrollableCalendarDate component is used to render the content of a cell
 and uses the same props. The only difference is that when isOutside is true,
 null is returned in order to only display of specific month in the calendar grid.
 
-[Please refer to the props of BpkCalendarDate here](https://backpack.github.io/components/calendar?platform=web#bpkcalendardate).
+[Please refer to the props of BpkCalendarDate here](../bpk-component-calendar/README.md#bpkcalendardate).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "18.0.0",
+  "version": "18.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^13.6.0",
-    "@skyscanner/bpk-svgs": "^16.1.0",
+    "@skyscanner/bpk-foundations-web": "^14.0.0",
+    "@skyscanner/bpk-svgs": "^16.2.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^38.0.0",
+    "bpk-mixins": "^39.1.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",