@skyscanner/backpack-web 35.5.1 → 35.7.0

package/bpk-component-drawer/src/BpkDrawer.js

@@ -92,6 +92,7 @@ BpkDrawer.defaultProps = {
   contentClassName: null,
   closeLabel: null,
   closeText: null,
-  hideTitle: false
+  hideTitle: false,
+  padded: true
 };
 export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    dialogRef: () => React.RefObject<HTMLElement>;
+    onCloseAnimationComplete: () => void;
+    onClose: () => void;
+    id: string;
+    title: string;
+    className?: string;
+    contentClassName?: string;
+    closeLabel?: string;
+    closeText?: string;
+    isDrawerShown?: boolean;
+    hideTitle?: boolean;
+    closeOnScrimClick?: boolean;
+    isIphone?: boolean;
+    isIpad?: boolean;
+    padded?: boolean;
+};
+declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, onClose, onCloseAnimationComplete, padded, title, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkDrawerContent;

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -14,37 +14,42 @@
  * 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 PropTypes from 'prop-types';
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// @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 { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDrawerContent.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkDrawerContent = props => {
-  const {
-    children,
-    className,
-    closeLabel,
-    closeOnScrimClick,
-    // Unused from withScrim scrim HOC
-    closeText,
-    contentClassName,
-    dialogRef,
-    hideTitle,
-    id,
-    isDrawerShown,
-    isIpad,
-    // Unused from withScrim scrim HOC
-    isIphone,
-    // Unused from withScrim scrim HOC
-    onClose,
-    onCloseAnimationComplete,
-    title,
-    ...rest
-  } = props;
+const BpkDrawerContent = ({
+  children,
+  className,
+  closeLabel,
+  closeOnScrimClick = true,
+  // Unused from withScrim scrim HOC
+  closeText,
+  contentClassName,
+  dialogRef,
+  hideTitle = false,
+  id,
+  isDrawerShown = true,
+  isIpad = false,
+  // Unused from withScrim scrim HOC
+  isIphone = false,
+  // Unused from withScrim scrim HOC
+  onClose,
+  onCloseAnimationComplete,
+  padded,
+  title,
+  ...rest
+}) => {
   const drawerClassNames = [getClassName('bpk-drawer')];
   const headerClassNames = [getClassName('bpk-drawer__heading')];
   const contentClassNames = [getClassName('bpk-drawer__content')];
@@ -54,6 +59,9 @@ const BpkDrawerContent = props => {
   if (hideTitle) {
     headerClassNames.push(getClassName('bpk-drawer__heading--visually-hidden'));
   }
+  if (padded) {
+    contentClassNames.push(getClassName('bpk-drawer__content--padded'));
+  }
   if (contentClassName) {
     contentClassNames.push(contentClassName);
   }
@@ -68,12 +76,9 @@ const BpkDrawerContent = props => {
     exit: true,
     in: isDrawerShown,
     onExited: onCloseAnimationComplete,
-    children: status =>
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsxs("section", {
+    children: status => /*#__PURE__*/_jsxs("section", {
       id: id,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "dialog",
       "aria-labelledby": headingId,
       className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`)].join(' '),
@@ -102,32 +107,4 @@ const BpkDrawerContent = props => {
     }, "dialog")
   });
 };
-BpkDrawerContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  dialogRef: PropTypes.func.isRequired,
-  onCloseAnimationComplete: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  isDrawerShown: PropTypes.bool,
-  hideTitle: PropTypes.bool,
-  closeOnScrimClick: PropTypes.bool,
-  isIphone: PropTypes.bool,
-  isIpad: PropTypes.bool
-};
-BpkDrawerContent.defaultProps = {
-  className: null,
-  contentClassName: null,
-  closeLabel: null,
-  closeText: null,
-  isDrawerShown: true,
-  hideTitle: false,
-  closeOnScrimClick: true,
-  isIphone: false,
-  isIpad: false
-};
 export default BpkDrawerContent;

package/bpk-component-drawer/src/BpkDrawerContent.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;padding:1rem;flex:1 1 100%;overflow-y:auto}
+.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;flex:1 1 100%;overflow-y:auto}.bpk-drawer__content--padded{padding:1rem}

package/package.json

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