@skyscanner/backpack-web 31.4.0 → 31.5.0

package/README.md

@@ -31,6 +31,7 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-banner-alert`](/packages/bpk-component-banner-alert)
 [`bpk-component-barchart`](/packages/bpk-component-barchart)
 [`bpk-component-blockquote`](/packages/bpk-component-blockquote)
+[`bpk-component-bottom-sheet`](/packages/bpk-component-bottom-sheet)
 [`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb)
 [`bpk-component-breakpoint`](/packages/bpk-component-breakpoint)
 [`bpk-component-button`](/packages/bpk-component-button)

package/bpk-component-bottom-sheet/index.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 BpkBottomSheet from './src/BpkBottomSheet';
+import type { Props } from './src/BpkBottomSheet';
+export type BpkBottomSheetProps = Props;
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkBottomSheet from "./src/BpkBottomSheet";
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 } from 'react';
+import type { Props as BottomSheetProps } from './BpkBottomSheet';
+export type Props = Partial<BottomSheetProps> & {
+  children: ReactNode;
+  closeLabel?: string;
+  closeOnEscPressed?: boolean;
+  closeOnScrimClick?: boolean;
+  id: string;
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  /**
+   * Because this component uses a modal on mobile viewports, you need to let it know what
+   * the root element of your application is by returning its DOM node via this prop
+   * This is to "hide" your application from screen readers whilst the modal is open.
+   * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+  */
+  getApplicationElement: () => HTMLElement | null;
+  renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+};
+declare const BpkBottomSheet: ({ closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onClose, title, renderTarget, ...rest }: Props) => JSX.Element;
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -0,0 +1,68 @@
+/*
+ * 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 { useState } from "react";
+import { Portal, cssModules } from "../../bpk-react-utils";
+import { withScrim } from "../../bpk-scrim-utils";
+import STYLES from "./BpkBottomSheet.module.css";
+import BpkBottomSheetInner from "./BpkBottomSheetInner";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const ScrimBpkBottomSheetInner = withScrim(BpkBottomSheetInner);
+const BpkBottomSheet = ({
+  actionText = '',
+  closeLabel = '',
+  closeOnEscPressed = false,
+  closeOnScrimClick = false,
+  id,
+  isOpen,
+  onAction = () => null,
+  onClose,
+  renderTarget,
+  title = '',
+  wide = false,
+  ...rest
+}) => {
+  const [exiting, setExitting] = useState(false);
+  const handleClose = () => {
+    setExitting(true);
+    setTimeout(() => {
+      onClose();
+      setExitting(false);
+    }, 240);
+  };
+  return /*#__PURE__*/_jsx(Portal, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    closeOnEscPressed: closeOnEscPressed,
+    renderTarget: renderTarget,
+    children: /*#__PURE__*/_jsx(ScrimBpkBottomSheetInner, {
+      id: id,
+      onClose: handleClose,
+      closeOnScrimClick: closeOnScrimClick,
+      containerClassName: getClassName('bpk-bottom-sheet--container'),
+      title: title,
+      closeLabel: closeLabel,
+      actionText: actionText,
+      onAction: onAction,
+      wide: wide,
+      exiting: exiting,
+      ...rest
+    })
+  });
+};
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.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-bottom-sheet--container{display:flex;padding:1.5rem}@media (max-width: 32rem){.bpk-bottom-sheet--container{padding:0;overflow:hidden}}

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 } from 'react';
+export type Props = {
+  children: ReactNode;
+  closeLabel?: string;
+  id: string;
+  onClose: () => void;
+  title?: string;
+};
+declare const BpkBottomSheetInner: ({ children, closeLabel, id, onClose, title, }: Props) => JSX.Element;
+export default BpkBottomSheetInner;

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.js

@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import CSSTransition from 'react-transition-group/CSSTransition';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkNavigationBar from "../../bpk-component-navigation-bar";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkBottomSheetInner.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkBottomSheetInner = ({
+  actionText = '',
+  children,
+  closeLabel = '',
+  exiting,
+  id,
+  onAction = () => null,
+  onClose,
+  title = '',
+  wide = false
+}) => {
+  const classNames = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
+  const headingId = `bpk-bottom-sheet-heading-${id}`;
+  return /*#__PURE__*/_jsx(CSSTransition, {
+    classNames: {
+      appear: getClassName('bpk-bottom-sheet--appear'),
+      appearActive: getClassName('bpk-bottom-sheet--appear-active'),
+      exit: getClassName('bpk-bottom-sheet--exit')
+    },
+    in: !exiting,
+    appear: !exiting,
+    out: exiting,
+    exit: exiting,
+    timeout: {
+      appear: 240,
+      exit: 240
+    },
+    children: /*#__PURE__*/_jsxs("section", {
+      id: id,
+      tabIndex: -1,
+      role: "dialog",
+      "aria-labelledby": headingId,
+      className: classNames,
+      children: [/*#__PURE__*/_jsx("header", {
+        className: getClassName('bpk-bottom-sheet--header'),
+        children: /*#__PURE__*/_jsx(BpkNavigationBar, {
+          id: headingId,
+          className: getClassName('bpk-bottom-sheet--navigation'),
+          title: /*#__PURE__*/_jsx("h2", {
+            id: headingId,
+            className: getClassName('bpk-bottom-sheet--heading'),
+            children: title
+          }),
+          leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
+            className: getClassName('bpk-bottom-sheet--close-button'),
+            label: closeLabel,
+            onClick: onClose
+          }),
+          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
+            className: getClassName('bpk-bottom-sheet--action-button'),
+            onClick: onAction,
+            children: actionText
+          }) : /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-bottom-sheet--action-button')
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-bottom-sheet--content'),
+        children: children
+      })]
+    })
+  });
+};
+export default BpkBottomSheetInner;

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.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-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.5rem}@media (max-width: 32rem){.bpk-bottom-sheet{height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media (min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:0.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media (min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media (min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:0.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media (min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc( 100% - ((3rem) * 2 + 0.25rem / 2));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir='rtl'] .bpk-bottom-sheet--close-button{right:auto;margin-right:calc(-0.25rem / 2);margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:calc(0.25rem / 2);margin-left:calc(0.25rem);word-break:break-all}html[dir='rtl'] .bpk-bottom-sheet--action-button{left:auto;margin-right:calc(0.25rem);margin-left:calc(0.25rem / 2)}

package/package.json

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