@skyscanner/backpack-web 31.1.0 → 31.1.2

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 (5) hide show
  1. package/bpk-component-card-button/src/BpkSaveButton.js +4 -2
  2. package/bpk-component-card-button/src/BpkSaveButton.module.css +1 -1
  3. package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css +1 -1
  4. package/bpk-scrim-utils/src/withScrimmedPortal.js +7 -16
  5. package/package.json +1 -1
package/bpk-component-card-button/src/BpkSaveButton.js CHANGED
@@ -17,7 +17,7 @@
17
17
  */
18
18
 
19
19
  import { useState } from 'react';
20
- import { BpkButtonV2 } from "../../bpk-component-button/src/BpkButtonV2/BpkButton";
20
+ import { BpkButtonV2 } from "../../bpk-component-button";
21
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
22
22
  import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
23
23
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -60,8 +60,10 @@ const BpkSaveButton = ({
60
60
  "aria-label": accessibilityLabel,
61
61
  className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
62
62
  onClick: e => {
63
- setToggle(true);
64
63
  onCheckedChange(e);
64
+ if (!checked) {
65
+ setToggle(true);
66
+ }
65
67
  },
66
68
  iconOnly: true,
67
69
  children: [/*#__PURE__*/_jsx(HeartIcon, {
package/bpk-component-card-button/src/BpkSaveButton.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-save-button__icon:hover{color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-save-button__heartOutlineIcon--show:hover{transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-save-button__heartIcon--show:hover{color:#0062e3}.bpk-save-button__heartIcon--hide:hover{transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-save-button__heartIcon--onDark:hover{color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-no-touch-support .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)}
package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-width:fit-content;min-height:0;padding:0;color:#fff;margin-inline-start:auto}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:0.5rem}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto;word-break:keep-all}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:0.5rem}
package/bpk-scrim-utils/src/withScrimmedPortal.js CHANGED
@@ -16,7 +16,7 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { useEffect, useRef } from 'react';
19
+ import { useState, useEffect } from 'react';
20
20
  import { createPortal } from 'react-dom';
21
21
  import withScrim from "./withScrim";
22
22
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,24 +36,15 @@ const withScrimmedPortal = WrappedComponent => {
36
36
  renderTarget,
37
37
  ...rest
38
38
  }) => {
39
- const node = useRef(null);
40
- if (!node.current) {
41
- node.current = document.createElement('div');
42
- }
39
+ const portalElement = getPortalElement(renderTarget);
40
+ const [isPortalReady, setIsPortalReady] = useState(false);
43
41
  useEffect(() => {
44
- const portalElement = getPortalElement(renderTarget);
45
- if (node.current) {
46
- portalElement.appendChild(node.current);
47
- }
48
- return () => {
49
- if (node.current) {
50
- portalElement.removeChild(node.current);
51
- }
52
- };
42
+ setIsPortalReady(true);
53
43
  }, []);
54
44
  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(Scrimmed, {
55
- ...rest
56
- }), node.current);
45
+ ...rest,
46
+ isPortalReady: isPortalReady
47
+ }), portalElement);
57
48
  };
58
49
  return ScrimmedComponent;
59
50
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "31.1.0",
3
+ "version": "31.1.2",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",