@skyscanner/backpack-web 38.1.1 → 38.2.0

package/bpk-component-popover/src/BpkPopover.js

@@ -131,25 +131,9 @@ const BpkPopover = ({
     children: target
   });
   const classNames = getClassName('bpk-popover', className);
-  const bodyClassNames = getClassName('bpk-popover__body', padded && 'bpk-popover__body--padded');
+  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
   const labelId = `bpk-popover-label-${id}`;
   const renderElement = typeof renderTarget === 'function' ? renderTarget() : renderTarget;
-  const closeButtonIconElement = /*#__PURE__*/_jsx(BpkCloseButton, {
-    label: closeButtonText || closeButtonLabel,
-    onClick: event => {
-      bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
-      setIsOpenState(false);
-    },
-    ...closeButtonProps
-  });
-  const closeButtonTextElement = /*#__PURE__*/_jsx(BpkButtonLink, {
-    onClick: event => {
-      bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
-      setIsOpenState(false);
-    },
-    ...closeButtonProps,
-    children: closeButtonText
-  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingPortal, {
       root: renderElement,
@@ -189,16 +173,28 @@ const BpkPopover = ({
                   id: labelId,
                   textStyle: TEXT_STYLES.label1,
                   children: label
-                }), "\xA0", closeButtonIcon ? closeButtonIconElement : !!closeButtonText && closeButtonTextElement]
+                }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
+                  label: closeButtonText || closeButtonLabel,
+                  onClick: event => {
+                    bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
+                    setIsOpenState(false);
+                  },
+                  ...closeButtonProps
+                }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
+                  onClick: event => {
+                    bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+                    setIsOpenState(false);
+                  },
+                  ...closeButtonProps,
+                  children: closeButtonText
+                })]
               }) : /*#__PURE__*/_jsx("span", {
                 id: labelId,
                 className: getClassName('bpk-popover__label'),
                 children: label
-              }), /*#__PURE__*/_jsxs("div", {
+              }), /*#__PURE__*/_jsx("div", {
                 className: bodyClassNames,
-                children: [/*#__PURE__*/_jsx("div", {
-                  children: children
-                }), !labelAsTitle && closeButtonIcon && closeButtonIconElement]
+                children: children
               }), actionText && onAction && /*#__PURE__*/_jsx("div", {
                 className: getClassName('bpk-popover__action'),
                 children: /*#__PURE__*/_jsx(BpkButtonLink, {
@@ -207,7 +203,14 @@ const BpkPopover = ({
                 })
               }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
                 className: getClassName('bpk-popover__footer'),
-                children: closeButtonTextElement
+                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                  onClick: event => {
+                    bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+                    setIsOpenState(false);
+                  },
+                  ...closeButtonProps,
+                  children: closeButtonText
+                })
               })]
             })
           })

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body{display:flex;column-gap:1rem;justify-content:space-between;align-items:flex-start}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}
+.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}

package/package.json

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