@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-component-dialog/src/BpkDialogInner.d.ts

@@ -19,248 +19,227 @@
 /// <reference types="react" />
 import { type DialogInnerProps as Props } from './common-types';
 declare const _default: {
-    new (props: (Props & {
-        getApplicationElement: () => HTMLElement | null;
-        containerClassName?: string | undefined;
-        closeOnScrimClick?: boolean | undefined;
-    } & {
+    new (props: ({
         [rest: string]: any;
+        getApplicationElement: () => HTMLElement | null;
         onClose?: (() => void | null) | undefined;
         isIphone?: boolean | undefined;
         isIpad?: boolean | undefined;
-    }) | Readonly<Props & {
-        getApplicationElement: () => HTMLElement | null;
         containerClassName?: string | undefined;
         closeOnScrimClick?: boolean | undefined;
-    } & {
+    } & Omit<Props, "dialogRef">) | Readonly<{
         [rest: string]: any;
+        getApplicationElement: () => HTMLElement | null;
         onClose?: (() => void | null) | undefined;
         isIphone?: boolean | undefined;
         isIpad?: boolean | undefined;
-    }>): {
-        dialogElement?: import("react").RefObject<HTMLElement> | undefined;
+        containerClassName?: string | undefined;
+        closeOnScrimClick?: boolean | undefined;
+    } & Omit<Props, "dialogRef">>): {
+        dialogElement?: HTMLElement | null | undefined;
         componentDidMount(): void;
         componentWillUnmount(): void;
-        dialogRef: (ref: import("react").RefObject<HTMLElement>) => void;
+        dialogRef: (ref: HTMLElement | null | undefined) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }> & Readonly<{
+            containerClassName?: string | undefined;
+            closeOnScrimClick?: boolean | undefined;
+        } & Omit<Props, "dialogRef">> & Readonly<{
             children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & {
+        shouldComponentUpdate?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextState: Readonly<{}>, nextContext: any): void;
+            containerClassName?: string | undefined;
+            closeOnScrimClick?: boolean | undefined;
+        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: Props & {
-        getApplicationElement: () => HTMLElement | null;
-        containerClassName?: string | undefined;
-        closeOnScrimClick?: boolean | undefined;
-    } & {
+    new (props: {
         [rest: string]: any;
+        getApplicationElement: () => HTMLElement | null;
         onClose?: (() => void | null) | undefined;
         isIphone?: boolean | undefined;
         isIpad?: boolean | undefined;
-    }, context: any): {
-        dialogElement?: import("react").RefObject<HTMLElement> | undefined;
+        containerClassName?: string | undefined;
+        closeOnScrimClick?: boolean | undefined;
+    } & Omit<Props, "dialogRef">, context: any): {
+        dialogElement?: HTMLElement | null | undefined;
         componentDidMount(): void;
         componentWillUnmount(): void;
-        dialogRef: (ref: import("react").RefObject<HTMLElement>) => void;
+        dialogRef: (ref: HTMLElement | null | undefined) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }> & Readonly<{
+            containerClassName?: string | undefined;
+            closeOnScrimClick?: boolean | undefined;
+        } & Omit<Props, "dialogRef">> & Readonly<{
             children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & {
+        shouldComponentUpdate?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & {
-            getApplicationElement: () => HTMLElement | null;
             containerClassName?: string | undefined;
             closeOnScrimClick?: boolean | undefined;
-        } & {
+        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
             [rest: string]: any;
+            getApplicationElement: () => HTMLElement | null;
             onClose?: (() => void | null) | undefined;
             isIphone?: boolean | undefined;
             isIpad?: boolean | undefined;
-        }>, nextState: Readonly<{}>, nextContext: any): void;
+            containerClassName?: string | undefined;
+            closeOnScrimClick?: boolean | undefined;
+        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: {

package/bpk-component-dialog/src/BpkDialogInner.module.scss

@@ -0,0 +1,64 @@
+/*
+* 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-spacing-v2: true;
+
+.bpk-dialog-inner {
+  z-index: $bpk-zindex-modal;
+  width: 100%;
+  max-width: $bpk-modal-max-width;
+  margin: auto;
+  transform: scale(1);
+  transition: opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  outline: 0;
+  background-color: $bpk-modal-background-color;
+  opacity: $bpk-modal-opacity;
+
+  // FIX: Prevents ugly flickering when tapping inside the dialog in Mobile Safari
+  -webkit-tap-highlight-color: transparent;
+
+  @include bpk-box-shadow-xl;
+  @include bpk-border-radius-sm;
+
+  &--appear {
+    transform: scale(0.9);
+    opacity: $bpk-modal-initial-opacity;
+  }
+
+  &--appear-active {
+    transform: scale(1);
+    opacity: $bpk-modal-opacity;
+  }
+
+  &__content {
+    padding: $bpk-modal-content-padding;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__flare {
+    height: bpk-spacing-lg() * 10;
+
+    // We inherit radius from the outer modal so they match and align correctly to the container.
+    border-radius: inherit;
+    background-color: $bpk-surface-contrast-day;
+  }
+}

package/bpk-component-dialog/src/BpkDialogInner.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkContentBubble } from '../../bpk-component-flare';
+
+import { type DialogInnerProps as Props } from './common-types';
+import STYLES from './BpkDialogInner.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkDialogInner = (props: Props) => {
+  const {
+    ariaLabel,
+    children,
+    className = null,
+    contentClassName,
+    dialogRef,
+    flare = false,
+    flareClassName = null,
+    id,
+  } = props;
+
+  const classNames = getClassName('bpk-dialog-inner', className);
+  const contentClassNames = getClassName(
+    'bpk-dialog-inner__content',
+    contentClassName,
+  );
+  const flareClassNames = getClassName(
+    'bpk-dialog-inner__flare',
+    flareClassName,
+  );
+
+  return (
+    <TransitionInitialMount
+      appearClassName={getClassName('bpk-dialog-inner--appear')}
+      appearActiveClassName={getClassName('bpk-dialog-inner--appear-active')}
+      transitionTimeout={300}
+    >
+      <section
+        id={id}
+        tabIndex={-1}
+        role="dialog"
+        aria-label={ariaLabel}
+        className={classNames}
+        ref={dialogRef}
+      >
+        {flare && <BpkContentBubble className={flareClassNames} />}
+        <div className={contentClassNames}>{children}</div>
+      </section>
+    </TransitionInitialMount>
+  );
+};
+
+export default withScrim(BpkDialogInner);

package/bpk-component-dialog/src/accessibility-test.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import BpkDialog from './BpkDialog';
+
+describe('BpkDialog accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const customRenderTarget = document.createElement('div');
+
+    const { container } = render(
+      <BpkDialog
+        id="my-modal"
+        ariaLabel="example dialog to showcase component"
+        onClose={jest.fn()}
+        closeLabel="Close"
+        dialogRef={jest.fn()}
+        getApplicationElement={jest.fn()}
+        isOpen
+        renderTarget={() => customRenderTarget}
+      >
+        Dialog content inside a custom target
+      </BpkDialog>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-dialog/src/common-types.d.ts

@@ -34,11 +34,12 @@ export type DialogInnerProps = {
     flareClassName?: string;
 };
 export type Props = DialogInnerProps & {
+    dialogRef?: (ref: HTMLElement | null | undefined) => void;
     isOpen: boolean;
     renderTarget?: () => HTMLElement | null;
     onClose: (event?: TouchEvent | MouseEvent | KeyboardEvent) => void | null;
     closeLabel?: string;
     dismissible?: boolean;
     headerIcon?: ReactNode;
-    headerIconType?: typeof HEADER_ICON_TYPES[keyof typeof HEADER_ICON_TYPES];
+    headerIconType?: (typeof HEADER_ICON_TYPES)[keyof typeof HEADER_ICON_TYPES];
 };

package/bpk-component-dialog/src/common-types.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 type { ReactNode, SyntheticEvent } from 'react';
+
+export const HEADER_ICON_TYPES = {
+  primary: 'primary',
+  warning: 'warning',
+  destructive: 'destructive',
+} as const;
+
+export type DialogInnerProps = {
+  ariaLabel: string;
+  id: string;
+  children: ReactNode;
+  dialogRef: (ref: HTMLElement | null | undefined) => void;
+  getApplicationElement: () => HTMLElement | null;
+  className?: string;
+  contentClassName?: string;
+  flare?: boolean;
+  flareClassName?: string;
+};
+
+export type Props = DialogInnerProps & {
+  dialogRef?: (ref: HTMLElement | null | undefined) => void;
+  isOpen: boolean;
+  renderTarget?: () => HTMLElement | null;
+  onClose: (event?: TouchEvent | MouseEvent | KeyboardEvent) => void | null;
+  closeLabel?: string;
+  dismissible?: boolean;
+  headerIcon?: ReactNode;
+  headerIconType?: (typeof HEADER_ICON_TYPES)[keyof typeof HEADER_ICON_TYPES];
+};

package/bpk-component-drawer/README.md

@@ -0,0 +1,88 @@
+# bpk-component-drawer
+
+> Backpack drawer component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import { Component } from 'react';
+import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+
+class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <div id="pagewrap">
+          <BpkButton onClick={this.onOpen}>Open drawer</BpkButton>
+        </div>
+        <BpkDrawer
+          id="my-drawer"
+          isOpen={this.state.isOpen}
+          onClose={this.onClose}
+          title="Drawer title"
+          closeLabel="Close drawer"
+          getApplicationElement={() => document.getElementById('pagewrap')}
+        >
+          This is a drawer. You can put anything you want in here.
+        </BpkDrawer>
+      </div>
+    );
+  }
+}
+```
+
+> **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
+> the root element for your application is by returning it's DOM node via the function passed to the
+> `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+
+> **Theming:** In order to theme the drawer, a `renderTarget` needs to be supplied as a function which returns a DOM node
+> in the scope of a `BpkThemeProvider`.
+
+## Props
+
+| Property              | PropType | Required | Default Value |
+| --------------------- | -------- | -------- | ------------- |
+| id                    | string   | true     | -             |
+| className             | string   | true     | -             |
+| contentClassName      | string   | true     | -             |
+| children              | node     | true     | -             |
+| isOpen                | bool     | true     | -             |
+| onClose               | func     | true     | -             |
+| title                 | string   | true     | -             |
+| getApplicationElement | func     | true     | -             |
+| closeLabel            | string   | false    | null          |
+| closeText             | string   | false    | null          |
+| hideTitle             | bool     | false    | false         |
+| renderTarget          | func     | false    | null          |
+
+## Theme Props
+
+- `linkColor`
+- `linkHoverColor`
+- `linkActiveColor`
+- `linkVisitedColor`