@skyscanner/backpack-web 0.0.1

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

@@ -0,0 +1,89 @@
+/*
+ * 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 React from 'react';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+import { withScrim } from 'bpk-scrim-utils';
+import { BpkContentBubble } from 'bpk-component-flare';
+
+import {
+  type DialogInnerProps as Props,
+  dialogInnerPropTypes,
+  dialogInnerDefaultProps,
+} from './common-types';
+import STYLES from './BpkDialogInner.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkDialogInner = (props: Props) => {
+  const {
+    ariaLabel,
+    children,
+    className,
+    contentClassName,
+    dialogRef,
+    flare,
+    flareClassName,
+    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 const propTypes = {
+  ...dialogInnerPropTypes,
+};
+
+export const defaultProps = {
+  ...dialogInnerDefaultProps,
+};
+
+BpkDialogInner.propTypes = { ...propTypes };
+BpkDialogInner.defaultProps = { ...defaultProps };
+
+export default withScrim(BpkDialogInner);

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:32.25rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#0770e3}

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

@@ -0,0 +1,62 @@
+/*
+* 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';
+
+$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-color-sky-blue;
+  }
+}

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

@@ -0,0 +1,99 @@
+/*
+ * 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 { type Node } from 'react';
+import PropTypes from 'prop-types';
+
+export const HEADER_ICON_TYPES = {
+  primary: 'primary',
+  warning: 'warning',
+  destructive: 'destructive',
+};
+
+export type DialogInnerProps = {
+  ariaLabel: string,
+  id: string,
+  children: Node,
+  dialogRef: (ref: ?HTMLElement) => void,
+  className: ?string,
+  contentClassName?: ?string,
+  flare: boolean,
+  flareClassName: ?string,
+};
+
+export const dialogInnerPropTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  dialogRef: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  contentClassName: PropTypes.string,
+  flare: PropTypes.bool,
+  flareClassName: PropTypes.string,
+  withIcon: PropTypes.bool,
+};
+
+export const dialogInnerDefaultProps = {
+  className: null,
+  flare: false,
+  flareClassName: null,
+  withIcon: false,
+};
+
+// Please remove this type when `withScrim` is flow-typed
+type ScrimProps = {
+  dialogRef: () => ?HTMLElement,
+};
+
+export type Props = {
+  // The `withScrim` HOC satisfies some of the ModalDialogs required
+  // props but it's not flow typed yet so this
+  // diff will suffice for now.
+  ...$Exact<$Diff<DialogInnerProps, ScrimProps>>,
+  isOpen: boolean,
+  renderTarget: ?() => ?HTMLElement,
+  onClose: (event: SyntheticEvent<>) => void | null,
+  closeLabel: string,
+  dismissible: boolean,
+  headerIcon: ?Node,
+  headerIconType: $Keys<typeof HEADER_ICON_TYPES>,
+};
+
+const { dialogRef, ...newDialogPropTypes } = dialogInnerPropTypes;
+
+export const propTypes = {
+  ...newDialogPropTypes,
+  isOpen: PropTypes.bool.isRequired,
+  renderTarget: PropTypes.func,
+  closeLabel: PropTypes.string,
+  onClose: PropTypes.func,
+  dismissible: PropTypes.bool,
+  headerIcon: PropTypes.node,
+  headerIconType: PropTypes.oneOf(Object.keys(HEADER_ICON_TYPES)),
+};
+
+export const defaultProps = {
+  ...dialogInnerDefaultProps,
+  renderTarget: null,
+  closeLabel: '',
+  onClose: () => null,
+  dismissible: true,
+  headerIcon: null,
+  headerIconType: HEADER_ICON_TYPES.primary,
+};

package/bpk-component-dialog/stories.css

@@ -0,0 +1 @@
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-paragraph{margin-bottom:.375rem}

package/bpk-component-drawer/README.md

@@ -0,0 +1,90 @@
+# bpk-component-drawer
+
+> Backpack drawer component.
+
+## Installation
+
+```sh
+npm install bpk-component-drawer --save-dev
+```
+
+## Usage
+
+```js
+import React, { Component } from 'react';
+import BpkDrawer from 'bpk-component-drawer';
+import BpkButton from '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`

package/bpk-component-drawer/examples.js

@@ -0,0 +1,271 @@
+/*
+ * 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 React, { Component } from 'react';
+import { cssModules, withDefaultProps } from 'bpk-react-utils';
+import BpkButton from 'bpk-component-button';
+import BpkText from 'bpk-component-text';
+
+import STYLES from './examples.module.scss';
+
+import BpkDrawer from './index';
+
+const getClassName = cssModules(STYLES);
+
+const Paragraph = withDefaultProps(BpkText, {
+  textStyle: 'base',
+  tagName: 'p',
+  className: getClassName('bpk-drawer-paragraph'),
+});
+
+type Props = {
+  buttonText: string,
+};
+
+type State = {
+  isOpen: boolean,
+};
+
+class DrawerContainer extends Component<Props, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    const { buttonText, ...rest } = this.props;
+
+    return (
+      <div id="drawer-container">
+        <div id="pagewrap">
+          <BpkButton onClick={this.onOpen}>{buttonText}</BpkButton>
+        </div>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md  */}
+        <BpkDrawer
+          id="my-drawer"
+          className="my-classname"
+          isOpen={this.state.isOpen}
+          onClose={this.onClose}
+          renderTarget={() => document.getElementById('drawer-container')}
+          {...rest}
+        />
+      </div>
+    );
+  }
+}
+
+DrawerContainer.propTypes = {
+  buttonText: PropTypes.string.isRequired,
+};
+
+const DefaultExample = () => (
+  <DrawerContainer
+    title="Drawer title"
+    closeLabel="Close drawer"
+    buttonText="Open drawer"
+    getApplicationElement={() => document.getElementById('pagewrap')}
+  >
+    This is a default drawer. You can put anything you want in here.
+  </DrawerContainer>
+);
+
+const OverflowingExamples = () => (
+  <DrawerContainer
+    title="Drawer title"
+    closeLabel="Close drawer"
+    buttonText="Open overflowing drawer"
+    getApplicationElement={() => document.getElementById('pagewrap')}
+  >
+    <Paragraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus nunc,
+      tempor eget dapibus eget, ultrices sit amet nunc. Maecenas aliquet quam
+      nec dui hendrerit, dictum fermentum turpis finibus. Proin ante purus,
+      blandit id quam vitae, dignissim venenatis felis. Donec congue sem ac
+      felis semper, at efficitur enim pulvinar. Nunc molestie in orci sit amet
+      vestibulum. Ut mattis ante ac lacus ornare, nec sagittis ex finibus. Fusce
+      condimentum dolor ac dignissim rutrum. Vivamus laoreet in lectus eu
+      congue. Aliquam mollis, mauris in tincidunt gravida, orci urna porta
+      sapien, ac facilisis leo eros et elit. Vivamus fermentum neque metus, et
+      convallis lectus ultricies in. Phasellus eget erat in nibh pretium
+      convallis. Fusce sed semper ante. Phasellus eget elementum lacus.
+    </Paragraph>
+    <Paragraph>
+      Nunc pretium erat nec ante faucibus molestie. Vestibulum ultrices purus
+      quis lorem consectetur sollicitudin. Mauris dapibus ac libero et bibendum.
+      In malesuada eget nisl ac bibendum. Etiam ac nulla egestas, luctus eros
+      quis, ornare libero. Fusce a lacinia dolor. Nullam auctor finibus dui, sit
+      amet luctus nibh blandit in. Maecenas justo tortor, faucibus ut ante ac,
+      eleifend ornare nisl. Quisque tempus, metus sit amet fringilla tristique,
+      urna mi tincidunt nulla, et tristique eros mauris sed ex. Sed lorem odio,
+      elementum congue tellus vitae, suscipit hendrerit ipsum.
+    </Paragraph>
+    <Paragraph>
+      Curabitur a posuere dolor. Maecenas accumsan magna nec risus facilisis
+      tristique. Aliquam mollis lectus ac mi scelerisque condimentum. Sed id est
+      ut felis euismod maximus. Fusce sit amet erat imperdiet, lacinia libero
+      vitae, eleifend erat. Integer cursus, est vitae hendrerit eleifend, justo
+      ipsum mattis neque, vitae consectetur arcu massa vitae orci. Sed rhoncus
+      nisi id est tristique, finibus convallis ligula rutrum. Pellentesque
+      volutpat, neque eget consequat commodo, diam orci aliquam ex, eget ornare
+      nulla ipsum ac eros. Nunc quis tempus diam. Mauris congue fringilla ligula
+      id lacinia. Donec vulputate eleifend pellentesque. Cras ut imperdiet
+      metus, ut imperdiet nulla. Fusce a metus lacinia, ullamcorper ante eu,
+      semper urna. Vestibulum eu velit eu ipsum dictum volutpat nec rutrum
+      augue.
+    </Paragraph>
+    <Paragraph>
+      Vestibulum eu posuere erat. Ut id turpis nibh. Aenean congue mi eu
+      scelerisque bibendum. Curabitur vel metus elementum, laoreet erat in,
+      pellentesque magna. Morbi consectetur lectus eu quam bibendum viverra.
+      Donec sed est ut nunc facilisis dictum. Praesent lacinia neque ante, in
+      pellentesque ante tempus sit amet. Fusce vehicula tincidunt auctor.
+      Quisque ornare, diam et ultricies blandit, augue ipsum congue eros, a
+      volutpat tellus massa in sem. Etiam interdum nibh nec orci molestie
+      pretium.
+    </Paragraph>
+    <Paragraph>
+      Quisque eleifend ullamcorper metus, eget auctor eros varius ut. Proin
+      faucibus non mauris quis pharetra. Curabitur porttitor enim et
+      sollicitudin feugiat. Morbi suscipit molestie risus, eu sodales lacus
+      accumsan eu. Proin eget consequat turpis. Cras auctor magna id quam
+      mattis, ac sollicitudin erat viverra. Aliquam sit amet blandit quam, vel
+      facilisis ipsum. Maecenas at risus semper, venenatis orci vitae, aliquam
+      velit.
+    </Paragraph>
+    <Paragraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus nunc,
+      tempor eget dapibus eget, ultrices sit amet nunc. Maecenas aliquet quam
+      nec dui hendrerit, dictum fermentum turpis finibus. Proin ante purus,
+      blandit id quam vitae, dignissim venenatis felis. Donec congue sem ac
+      felis semper, at efficitur enim pulvinar. Nunc molestie in orci sit amet
+      vestibulum. Ut mattis ante ac lacus ornare, nec sagittis ex finibus. Fusce
+      condimentum dolor ac dignissim rutrum. Vivamus laoreet in lectus eu
+      congue. Aliquam mollis, mauris in tincidunt gravida, orci urna porta
+      sapien, ac facilisis leo eros et elit. Vivamus fermentum neque metus, et
+      convallis lectus ultricies in. Phasellus eget erat in nibh pretium
+      convallis. Fusce sed semper ante. Phasellus eget elementum lacus.
+    </Paragraph>
+    <Paragraph>
+      Nunc pretium erat nec ante faucibus molestie. Vestibulum ultrices purus
+      quis lorem consectetur sollicitudin. Mauris dapibus ac libero et bibendum.
+      In malesuada eget nisl ac bibendum. Etiam ac nulla egestas, luctus eros
+      quis, ornare libero. Fusce a lacinia dolor. Nullam auctor finibus dui, sit
+      amet luctus nibh blandit in. Maecenas justo tortor, faucibus ut ante ac,
+      eleifend ornare nisl. Quisque tempus, metus sit amet fringilla tristique,
+      urna mi tincidunt nulla, et tristique eros mauris sed ex. Sed lorem odio,
+      elementum congue tellus vitae, suscipit hendrerit ipsum.
+    </Paragraph>
+    <Paragraph>
+      Curabitur a posuere dolor. Maecenas accumsan magna nec risus facilisis
+      tristique. Aliquam mollis lectus ac mi scelerisque condimentum. Sed id est
+      ut felis euismod maximus. Fusce sit amet erat imperdiet, lacinia libero
+      vitae, eleifend erat. Integer cursus, est vitae hendrerit eleifend, justo
+      ipsum mattis neque, vitae consectetur arcu massa vitae orci. Sed rhoncus
+      nisi id est tristique, finibus convallis ligula rutrum. Pellentesque
+      volutpat, neque eget consequat commodo, diam orci aliquam ex, eget ornare
+      nulla ipsum ac eros. Nunc quis tempus diam. Mauris congue fringilla ligula
+      id lacinia. Donec vulputate eleifend pellentesque. Cras ut imperdiet
+      metus, ut imperdiet nulla. Fusce a metus lacinia, ullamcorper ante eu,
+      semper urna. Vestibulum eu velit eu ipsum dictum volutpat nec rutrum
+      augue.
+    </Paragraph>
+    <Paragraph>
+      Vestibulum eu posuere erat. Ut id turpis nibh. Aenean congue mi eu
+      scelerisque bibendum. Curabitur vel metus elementum, laoreet erat in,
+      pellentesque magna. Morbi consectetur lectus eu quam bibendum viverra.
+      Donec sed est ut nunc facilisis dictum. Praesent lacinia neque ante, in
+      pellentesque ante tempus sit amet. Fusce vehicula tincidunt auctor.
+      Quisque ornare, diam et ultricies blandit, augue ipsum congue eros, a
+      volutpat tellus massa in sem. Etiam interdum nibh nec orci molestie
+      pretium.
+    </Paragraph>
+    <Paragraph>
+      Quisque eleifend ullamcorper metus, eget auctor eros varius ut. Proin
+      faucibus non mauris quis pharetra. Curabitur porttitor enim et
+      sollicitudin feugiat. Morbi suscipit molestie risus, eu sodales lacus
+      accumsan eu. Proin eget consequat turpis. Cras auctor magna id quam
+      mattis, ac sollicitudin erat viverra. Aliquam sit amet blandit quam, vel
+      facilisis ipsum. Maecenas at risus semper, venenatis orci vitae, aliquam
+      velit.
+    </Paragraph>
+  </DrawerContainer>
+);
+
+const CloseButtonTextExample = () => (
+  <DrawerContainer
+    title="Drawer title"
+    closeText="Done"
+    buttonText="Open drawer"
+    getApplicationElement={() => document.getElementById('pagewrap')}
+  >
+    This is a default drawer. You can put anything you want in here.
+  </DrawerContainer>
+);
+
+const WithVisuallyHiddenTitleExample = () => (
+  <DrawerContainer
+    title="Drawer title"
+    hideTitle
+    closeLabel="Close drawer"
+    buttonText="Open drawer"
+    getApplicationElement={() => document.getElementById('pagewrap')}
+  >
+    This is a default drawer. You can put anything you want in here.
+  </DrawerContainer>
+);
+
+const WithFullHeightContentExample = () => (
+  <DrawerContainer
+    title="Drawer title"
+    closeLabel="Close drawer"
+    buttonText="Open drawer"
+    getApplicationElement={() => document.getElementById('pagewrap')}
+    contentClassName={getClassName('bpk-drawer-content-container')}
+  >
+    This is a flex drawer. You can put anything you want in here.
+    <BpkButton secondary className={getClassName('bpk-drawer-button')}>
+      I don&apos;t do anything.
+    </BpkButton>
+  </DrawerContainer>
+);
+
+export {
+  DefaultExample,
+  OverflowingExamples,
+  CloseButtonTextExample,
+  WithVisuallyHiddenTitleExample,
+  WithFullHeightContentExample,
+};

package/bpk-component-drawer/examples.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-drawer-paragraph{margin-bottom:0.5rem}.bpk-drawer-content-container{display:flex;flex-direction:column}.bpk-drawer-button{margin:auto auto 0}

package/bpk-component-drawer/examples.module.scss

@@ -0,0 +1,34 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-drawer-paragraph {
+  margin-bottom: bpk-spacing-md();
+}
+
+.bpk-drawer-content-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.bpk-drawer-button {
+  margin: auto auto 0;
+}