npm - @skyscanner/backpack-web - Versions diffs - 35.5.1 → 35.6.0 - Mend

@skyscanner/backpack-web 35.5.1 → 35.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/bpk-component-card/src/BpkDividedCard.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-divided-card--content{display:flex;height:100%;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex;min-width:15rem;max-width:45rem}.bpk-divided-card--horizontal-container{display:flex;min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}
+.bpk-divided-card--content{display:flex;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex}.bpk-divided-card--horizontal-container{display:flex}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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