@skyscanner/backpack-web 0.0.1

package/bpk-component-tooltip/src/BpkTooltip.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-tooltip-portal{z-index:900}.bpk-tooltip-portal[x-placement='top']{margin-bottom:.25rem}.bpk-tooltip-portal[x-placement='right']{margin-left:.25rem}.bpk-tooltip-portal[x-placement='bottom']{margin-top:.25rem}.bpk-tooltip-portal[x-placement='left']{margin-right:.25rem}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:absolute;pointer-events:none}.bpk-tooltip__arrow::before,.bpk-tooltip__arrow::after{position:absolute;content:' ';display:block}.bpk-tooltip__arrow::before{border:.3125rem solid transparent}.bpk-tooltip__arrow::after{border:.25rem solid transparent}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow{top:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::before{bottom:-.3125rem;margin-left:-.0625rem;border-top-color:#dddde5}html[dir='rtl'] .bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::after{bottom:-.1875rem;border-top-color:#fff}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow{right:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow::before{left:-.3125rem;margin-top:-.0625rem;border-right-color:#dddde5}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow::after{left:-.1875rem;border-right-color:#fff}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow{bottom:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::before{top:-.3125rem;margin-left:-.0625rem;border-bottom-color:#dddde5}html[dir='rtl'] .bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::after{top:-.1875rem;border-bottom-color:#fff}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow{left:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow::before{right:-.3125rem;margin-top:-.0625rem;border-left-color:#dddde5}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow::after{right:-.1875rem;border-left-color:#fff}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark{top:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::before{bottom:-.3125rem;margin-left:-.0625rem;border-top-color:#111236}html[dir='rtl'] .bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::after{bottom:-.1875rem;border-top-color:#111236}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark{right:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark::before{left:-.3125rem;margin-top:-.0625rem;border-right-color:#111236}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark::after{left:-.1875rem;border-right-color:#111236}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark{bottom:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::before{top:-.3125rem;margin-left:-.0625rem;border-bottom-color:#111236}html[dir='rtl'] .bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::after{top:-.1875rem;border-bottom-color:#111236}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark{left:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark::before{right:-.3125rem;margin-top:-.0625rem;border-left-color:#111236}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark::after{right:-.1875rem;border-left-color:#111236}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #dddde5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}.bpk-tooltip__inner--padded{padding:.25rem 0.5rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #111236;background-color:#111236;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -0,0 +1,153 @@
+/*
+ * 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;
+
+$arrow-size: bpk-spacing-sm();
+$dark-background-color: $bpk-color-sky-gray;
+
+.bpk-tooltip-portal {
+  z-index: $bpk-zindex-tooltip;
+
+  &[x-placement='top'] {
+    margin-bottom: $arrow-size;
+  }
+
+  &[x-placement='right'] {
+    margin-left: $arrow-size;
+  }
+
+  &[x-placement='bottom'] {
+    margin-top: $arrow-size;
+  }
+
+  &[x-placement='left'] {
+    margin-right: $arrow-size;
+  }
+}
+
+.bpk-tooltip {
+  transition: opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  outline: 0;
+  opacity: 1;
+
+  &--appear {
+    opacity: 0;
+
+    .bpk-tooltip-portal[x-placement='top'] &:not(.bpk-tooltip--appear-active) {
+      transform: translate(0, -1rem);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[x-placement='right']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(1rem, 0);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[x-placement='bottom']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(0, 1rem);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[x-placement='left'] &:not(.bpk-tooltip--appear-active) {
+      transform: translate(-1rem, 0);
+      transition: none;
+    }
+  }
+
+  &--appear-active {
+    transform: translate(0, 0);
+    transition: opacity $bpk-duration-sm ease-in-out,
+      transform $bpk-duration-sm ease-in-out;
+    opacity: 1;
+  }
+
+  &__arrow {
+    @include bpk-layer-arrow($arrow-size);
+
+    .bpk-tooltip-portal[x-placement='top'] & {
+      @include bpk-layer-arrow-bottom($arrow-size);
+    }
+
+    .bpk-tooltip-portal[x-placement='right'] & {
+      @include bpk-layer-arrow-left($arrow-size);
+    }
+
+    .bpk-tooltip-portal[x-placement='bottom'] & {
+      @include bpk-layer-arrow-top($arrow-size);
+    }
+
+    .bpk-tooltip-portal[x-placement='left'] & {
+      @include bpk-layer-arrow-right($arrow-size);
+    }
+
+    &--dark {
+      .bpk-tooltip-portal[x-placement='top'] & {
+        @include bpk-layer-arrow-bottom(
+          $arrow-size,
+          $dark-background-color,
+          $dark-background-color
+        );
+      }
+
+      .bpk-tooltip-portal[x-placement='right'] & {
+        @include bpk-layer-arrow-left(
+          $arrow-size,
+          $dark-background-color,
+          $dark-background-color
+        );
+      }
+
+      .bpk-tooltip-portal[x-placement='bottom'] & {
+        @include bpk-layer-arrow-top(
+          $arrow-size,
+          $dark-background-color,
+          $dark-background-color
+        );
+      }
+
+      .bpk-tooltip-portal[x-placement='left'] & {
+        @include bpk-layer-arrow-right(
+          $arrow-size,
+          $dark-background-color,
+          $dark-background-color
+        );
+      }
+    }
+  }
+
+  &__inner {
+    overflow: hidden;
+
+    @include bpk-layer;
+
+    &--padded {
+      padding: bpk-spacing-sm() bpk-spacing-md();
+    }
+
+    &--dark {
+      color: $bpk-color-white;
+
+      @include bpk-layer($dark-background-color, $dark-background-color);
+    }
+  }
+}

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

@@ -0,0 +1,212 @@
+/*
+ * 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 Popper from '@skyscanner/popper.js';
+import PropTypes from 'prop-types';
+import React, { Component, type Node, type Element } from 'react';
+import { Portal, cssModules } from 'bpk-react-utils';
+
+import BpkTooltip, {
+  propTypes as tooltipPropTypes,
+  defaultProps as tooltipDefaultProps,
+  type TooltipProps,
+} from './BpkTooltip';
+import { ARROW_ID } from './constants';
+import STYLES from './BpkTooltip.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const hasTouchSupport = () =>
+  !!(
+    typeof window !== 'undefined' &&
+    ('ontouchstart' in window ||
+      (window.DocumentTouch && document instanceof window.DocumentTouch))
+  );
+
+export type Props = {
+  ...$Exact<TooltipProps>,
+  ariaLabel: string,
+  target: Element<any>,
+  children: Node,
+  placement: 'top' | 'right' | 'bottom' | 'left' | 'auto',
+  hideOnTouchDevices: boolean,
+  portalStyle: ?Object,
+  portalClassName: ?string,
+  renderTarget: ?() => HTMLElement,
+  popperModifiers: ?Object,
+};
+
+type State = {
+  isOpen: boolean,
+};
+
+class BpkTooltipPortal extends Component<Props, State> {
+  popper: ?typeof Popper;
+
+  targetRef: ?HTMLElement;
+
+  static propTypes = {
+    ...tooltipPropTypes,
+    ariaLabel: PropTypes.string.isRequired,
+    target: PropTypes.node.isRequired,
+    children: PropTypes.node.isRequired,
+    placement: PropTypes.oneOf(Popper.placements),
+    hideOnTouchDevices: PropTypes.bool,
+    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
+  };
+
+  static defaultProps = {
+    ...tooltipDefaultProps,
+    placement: 'bottom',
+    hideOnTouchDevices: true,
+    portalStyle: null,
+    portalClassName: null,
+    renderTarget: null,
+    popperModifiers: null,
+  };
+
+  constructor() {
+    super();
+
+    this.state = {
+      isOpen: false,
+    };
+
+    this.popper = null;
+    this.targetRef = null;
+  }
+
+  componentDidMount() {
+    if (this.targetRef) {
+      const ref = this.targetRef;
+
+      ref.addEventListener('focusin', this.openTooltip);
+      ref.addEventListener('focusout', this.closeTooltip);
+      ref.addEventListener('mouseenter', this.openTooltip);
+      ref.addEventListener('mouseleave', this.closeTooltip);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.targetRef) {
+      const ref = this.targetRef;
+
+      ref.addEventListener('focusin', this.openTooltip);
+      ref.addEventListener('focusout', this.closeTooltip);
+      ref.removeEventListener('mouseenter', this.openTooltip);
+      ref.removeEventListener('mouseleave', this.closeTooltip);
+    }
+  }
+
+  onOpen = (tooltipElement: HTMLElement, targetElement: HTMLElement) => {
+    // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
+    // which can cause blurriness in Safari and Chrome.
+    this.popper = new Popper(targetElement, tooltipElement, {
+      placement: this.props.placement,
+      modifiers: {
+        ...this.props.popperModifiers,
+        computeStyle: {
+          gpuAcceleration: false,
+        },
+        arrow: {
+          element: `#${ARROW_ID}`,
+        },
+      },
+    });
+
+    this.popper.scheduleUpdate();
+  };
+
+  beforeClose = (done: () => mixed) => {
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+    }
+
+    done();
+  };
+
+  openTooltip = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  closeTooltip = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    const {
+      ariaLabel,
+      children,
+      hideOnTouchDevices,
+      padded,
+      placement,
+      popperModifiers,
+      portalClassName,
+      portalStyle,
+      renderTarget,
+      target,
+      ...rest
+    } = this.props;
+
+    const classNames = [getClassName('bpk-tooltip-portal')];
+    const renderPortal = !hasTouchSupport() || !hideOnTouchDevices;
+
+    const targetWithAccessibilityProps = React.cloneElement(target, {
+      tabIndex: '0',
+      'aria-label': ariaLabel,
+    });
+
+    if (portalClassName) {
+      classNames.push(portalClassName);
+    }
+
+    return renderPortal ? (
+      <Portal
+        target={targetWithAccessibilityProps}
+        targetRef={(targetRef) => {
+          this.targetRef = targetRef;
+        }}
+        isOpen={this.state.isOpen}
+        onOpen={this.onOpen}
+        onClose={this.closeTooltip}
+        style={portalStyle}
+        renderTarget={renderTarget}
+        className={classNames.join(' ')}
+      >
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+        <BpkTooltip padded={padded} {...rest}>
+          {children}
+        </BpkTooltip>
+      </Portal>
+    ) : (
+      targetWithAccessibilityProps
+    );
+  }
+}
+
+export default BpkTooltipPortal;

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

@@ -0,0 +1,27 @@
+/*
+ * 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 */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
+export const TOOLTIP_TYPES = {
+  light: 'light',
+  dark: 'dark',
+};
+
+export default { ARROW_ID, TOOLTIP_TYPES };

package/bpk-react-utils/README.md

@@ -0,0 +1,251 @@
+# bpk-react-utils
+
+> Miscellaneous React based utilities for use in Backpack components.
+
+## Installation
+
+```sh
+npm install bpk-react-utils --save-dev
+```
+
+## Portal.js
+
+Render's children into a new component tree and appends it to `document.body`. Useful for Modals, Popovers, Tooltips etc where
+it's necessary in overcoming z-index issues when absolutely positioning elements.
+
+### Usage
+
+```js
+import { Portal } from 'bpk-react-utils';
+import BpkButton from 'bpk-component-button';
+import { BpkCode } from 'bpk-component-code';
+import React, { Component } from 'react';
+
+class MyComponent extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpen: false,
+    };
+
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+  }
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <BpkButton onClick={this.onOpen}>Open portal</BpkButton>
+        <Portal
+          isOpen={this.state.isOpen}
+          onClose={this.onClose}
+        >
+          <div>I'm now appended to <BpkCode>document.body</BpkCode></div>
+        </Portal>
+      </div>
+    );
+  }
+}
+```
+
+### Props
+
+| Property              | PropType                | Required | Default Value |
+| --------------------- | ----------------------- | -------- | ------------- |
+| children              | node                    | true     | -             |
+| isOpen                | bool                    | true     | -             |
+| beforeClose           | func                    | false    | null          |
+| onClose               | func                    | false    | noop          |
+| onOpen                | func                    | false    | noop          |
+| onRender              | func                    | false    | noop          |
+| renderTarget          | func                    | false    | null          |
+| target                | oneOf([function, node]) | false    | null          |
+| closeOnEscPressed     | bool                    | false    | true          |
+
+## `cssModules.js`
+
+A helpful utility which permits backwards compatibility with hard coded classes and [CSS modules](https://github.com/css-modules/css-modules).
+
+### Usage
+
+```js
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './MyComponent.scss';
+
+const getClassName = cssModules(STYLES);
+
+const MyComponent = (props) => (
+  <div className={getClassName('MyComponent')}>
+    <div className={getClassName('MyComponent__inner')}>
+      {props.children}
+    </div>
+  </div>
+);
+```
+
+With CSS modules:
+
+```html
+<div class="_35WloynrPDta8fhSfoHEgE">
+  <div class="_1ghNYY7jOYzUneVCT4piQ9">
+    Some text.
+  </div>
+</div>
+```
+
+Without CSS modules:
+
+```html
+<div class="MyComponent">
+  <div class="MyComponent__inner">
+    Some text.
+  </div>
+</div>
+```
+
+The returned function accepts multiple class names and ignores values other than strings. e.g:
+
+```js
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './MyComponent.scss';
+
+const getClassNames = cssModules(STYLES);
+
+const MyComponent = (props) => (
+  <div className={getClassName('MyComponent', props.disabled && 'MyComponent--disabled')}>
+   {props.children}
+  </div>
+);
+```
+
+Will result in `MyComponent MyComponent--disabled` if `props.disabled` is true or `MyComponent` otherwise.
+
+## `TransitionInitialMount.js`
+
+A wrapper around `react-transition-group` which makes it easy to transition a
+components initial mount. All you need to provide is two class names and a timeout.
+
+### Usage
+
+```js
+import React from 'react';
+import { TransitionInitialMount } from 'bpk-react-utils';
+
+const MyComponent = (props) => (
+  <TransitionInitialMount
+    appearClassName="my-transition-class--appear"
+    appearActiveClassName="my-transition-class--appear-active"
+    transitionTimeout={300}
+  >
+    <div>Some text.</div>
+  </TransitionInitialMount>
+);
+```
+
+```scss
+@import '~bpk-mixins/index';
+
+.my-transition-class {
+  transition: opacity $bpk-duration-sm ease-in-out;
+  opacity: 1;
+
+  &--appear {
+    opacity: 0;
+  }
+
+  &--appear-active {
+    opacity: 1;
+  }
+}
+```
+
+### Props
+
+| Property              | PropType | Required | Default Value |
+| --------------------- | -------- | -------- | ------------- |
+| children              | node     | true     | -             |
+| appearClassName       | string   | true     | -             |
+| appearActiveClassName | string   | true     | -             |
+| transitionTimeout     | number   | true     | -             |
+
+## `isRTL`
+
+Returns true if the browser is showing content right-to-left.
+
+### Usage
+
+```js
+import React from 'react';
+import { isRTL } from 'bpk-react-utils';
+
+if (isRTL()) {
+  // do RTL stuff
+} else {
+  // do LTR stuff
+}
+```
+
+## `isDeviceIphone`
+
+Returns true if the device is an iPhone.
+
+### Usage
+
+```js
+import React from 'react';
+import { isDeviceIphone } from 'bpk-react-utils';
+
+if (isDeviceIphone()) {
+  // do iPhone specific stuff
+} else {
+  // do other browser/device stuff
+}
+```
+
+## `isDeviceIpad`
+
+Returns true if the device is an iPad.
+
+### Usage
+
+```js
+import React from 'react';
+import { isDeviceIpad } from 'bpk-react-utils';
+
+if (isDeviceIpad()) {
+  // do iPad specific stuff
+} else {
+  // do other browser/device stuff
+}
+```
+
+## `isDeviceIos`
+
+Returns true if the platform is iOS (iPhone/iPad).
+
+### Usage
+
+```js
+import React from 'react';
+import { isDeviceIos } from 'bpk-react-utils';
+
+if (isDeviceIos()) {
+  // do iOS specific stuff
+} else {
+  // do other browser/device stuff
+}
+```