@skyscanner/backpack-web 36.13.0 → 36.14.0

package/bpk-component-calendar/src/BpkCalendarGrid.d.ts

@@ -13,6 +13,11 @@ type DefaultProps = {
     minDate: Date;
     onDateClick: () => void;
     onDateKeyDown: () => void;
+    /**
+     * A function to format a human-readable month, for example: "January 2018":
+     * If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage)
+     */
+    formatMonth: (month: Date) => string;
     preventKeyboardFocus: boolean;
     /**
      * An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.

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

@@ -21,7 +21,7 @@ import { cssModules, isDeviceIos } from "../../bpk-react-utils";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth } from "./date-utils";
+import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth, format } from "./date-utils";
 import STYLES from "./BpkCalendarGrid.module.css";
 
 // This should be imported after `./BpkCalendarGrid.module.css`.
@@ -47,6 +47,7 @@ class BpkCalendarGrid extends Component {
     minDate: new Date(),
     onDateClick: () => {},
     onDateKeyDown: () => {},
+    formatMonth: month => format(month, 'MMMM yyyy'),
     preventKeyboardFocus: false,
     selectionConfiguration: {
       type: CALENDAR_SELECTION_TYPE.single,
@@ -84,6 +85,7 @@ class BpkCalendarGrid extends Component {
       dateModifiers,
       dateProps,
       focusedDate,
+      formatMonth,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -105,6 +107,7 @@ class BpkCalendarGrid extends Component {
       className: classNames,
       "aria-hidden": !isKeyboardFocusable,
       role: "grid",
+      "aria-label": formatMonth(month),
       children: /*#__PURE__*/_jsx("div", {
         role: "rowgroup",
         children: calendarMonthWeeks.map(dates => /*#__PURE__*/_jsx(BpkCalendarWeek, {

package/bpk-component-info-banner/src/BpkInfoBanner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none}.bpk-info-banner__expand-icon{fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}
+.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -67,20 +67,13 @@ const getIconForType = (type, CustomIcon) => {
     children: /*#__PURE__*/_jsx(AlignedIcon, {})
   });
 };
-const ToggleButton = props => {
-  const classNames = getClassName('bpk-info-banner__expand-icon');
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    className: getClassName('bpk-info-banner__toggle-button'),
-    "aria-label": props.label,
-    "aria-expanded": props.expanded,
-    title: props.label,
-    children: /*#__PURE__*/_jsx("div", {
-      className: classNames,
-      children: props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {})
-    })
-  });
-};
+const ToggleButton = props => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-info-banner__toggle-button'),
+  children: [props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {}), /*#__PURE__*/_jsx("span", {
+    className: "visually-hidden",
+    children: props.label
+  })]
+});
 const BpkInfoBannerInner = ({
   action = null,
   animateOnEnter = false,
@@ -113,26 +106,23 @@ const BpkInfoBannerInner = ({
   const isExpandable = configuration === CONFIGURATION.EXPANDABLE;
   const dismissable = configuration === CONFIGURATION.DISMISSABLE;
   const showChildren = isExpandable && expanded;
-  const sectionClassNames = getClassName('bpk-info-banner', `bpk-info-banner--${type}`, `bpk-info-banner--style-${style}`, bannerClassName && bannerClassName);
+  const classNames = getClassName('bpk-info-banner', `bpk-info-banner--${type}`, `bpk-info-banner--style-${style}`, bannerClassName && bannerClassName);
   const headerClassNames = getClassName('bpk-info-banner__header', isExpandable && 'bpk-info-banner__header--expandable');
   const childrenContainerClassName = action && isExpandable ? getClassName('bpk-info-banner__children-container--with-action') : getClassName('bpk-info-banner__children-container--no-action');
-
-  /* eslint-disable
-    jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events,
-    */
-  // Disabling 'click-events-have-key-events and interactive-supports-focus' because header element is not focusable.
-  // ToggleButton is focusable and works for this.
+  const BannerHeader = isExpandable ? 'button' : 'div';
   return /*#__PURE__*/_jsx(AnimateAndFade, {
     animateOnEnter: animateOnEnter,
     animateOnLeave: dismissable || animateOnLeave,
     show: show,
     ...rest,
-    children: /*#__PURE__*/_jsxs("section", {
-      className: sectionClassNames,
-      role: "presentation",
-      children: [/*#__PURE__*/_jsxs("div", {
-        role: isExpandable ? 'button' : undefined,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames,
+      children: [/*#__PURE__*/_jsxs(BannerHeader, {
+        "aria-expanded": isExpandable ? expanded : undefined,
+        type: isExpandable ? 'button' : undefined
+        // BannerHeader is just <button> or <div>, so className should be allowed.
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: headerClassNames,
         onClick: onBannerExpandToggle,
         children: [/*#__PURE__*/_jsx("span", {
@@ -168,6 +158,5 @@ const BpkInfoBannerInner = ({
       })]
     })
   });
-  /* eslint-enable */
 };
 export default BpkInfoBannerInner;

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, ElementType, CSSProperties } from 'react';
 import { Component } from 'react';
+import type { DebouncedFunc } from 'lodash';
 declare const computeScrollBarAwareHeight: (scrollerEl: HTMLElement | null, innerEl: HTMLElement | null) => string | null;
 declare const computeScrollIndicatorClassName: (scrollerEl: HTMLElement | null, leadingIndicatorClassName?: string, trailingIndicatorClassName?: string) => string[] | null;
 type Props = {
@@ -18,11 +19,12 @@ type State = {
     scrollIndicatorClassName: string | null;
 };
 declare class BpkMobileScrollContainer extends Component<Props, State> {
+    debouncedResize: DebouncedFunc<() => void>;
     static defaultProps: Partial<Props>;
     constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onWindowResize: import("lodash").DebouncedFunc<() => void>;
+    onWindowResize: () => void;
     setScrollIndicatorClassName: () => void;
     setScrollBarAwareHeight: () => void;
     innerEl: HTMLElement | null;

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -62,21 +62,22 @@ class BpkMobileScrollContainer extends Component {
       computedHeight: 'auto',
       scrollIndicatorClassName: null
     };
+    this.debouncedResize = debounce(this.onWindowResize, 100);
   }
   componentDidMount() {
     requestAnimationFrame(() => {
       this.setScrollBarAwareHeight();
       this.setScrollIndicatorClassName();
     });
-    window.addEventListener('resize', this.onWindowResize);
+    window.addEventListener('resize', this.debouncedResize);
   }
   componentWillUnmount() {
-    window.removeEventListener('resize', this.onWindowResize);
+    window.removeEventListener('resize', this.debouncedResize);
   }
-  onWindowResize = debounce(() => {
+  onWindowResize = () => {
     this.setScrollBarAwareHeight();
     this.setScrollIndicatorClassName();
-  }, 100);
+  };
   setScrollIndicatorClassName = () => {
     const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
     if (!classNames) {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -42,6 +42,7 @@ const BpkScrollableCalendarGrid = ({
     }), /*#__PURE__*/_jsx(BpkCalendarGrid, {
       month: month,
       ignoreOutsideDate: true,
+      formatMonth: formatMonth,
       ...rest
     })]
   });

package/package.json

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