@skyscanner/backpack-web 29.1.0 → 29.2.0

package/bpk-component-card-button/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 BpkSaveButton, { SIZE_TYPES, STYLE_TYPES } from "./src/BpkSaveButton";
+export { BpkSaveButton, SIZE_TYPES, STYLE_TYPES };

package/bpk-component-card-button/src/BpkSaveButton.d.ts

@@ -0,0 +1,45 @@
+/*
+ * 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, MouseEvent } from 'react';
+export declare const SIZE_TYPES: {
+  default: 'default';
+  small: 'small';
+};
+export type SizeType = (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+export declare const STYLE_TYPES: {
+  default: 'default';
+  contained: 'contained';
+  onDark: 'onDark';
+};
+export type StyleType = (typeof STYLE_TYPES)[keyof typeof STYLE_TYPES];
+type Props = {
+  checked: boolean;
+  accessibilityLabel: string;
+  onCheckedChange: (e: MouseEvent) => void;
+  size?: SizeType;
+  style?: StyleType;
+};
+declare const BpkSaveButton: ({
+  checked,
+  accessibilityLabel,
+  onCheckedChange,
+  size,
+  style,
+}: Props) => JSX.Element;
+export default BpkSaveButton;

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -0,0 +1,74 @@
+/*
+ * 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 BpkButtonV2 from "../../bpk-component-button/src/BpkButtonV2/BpkButton";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkHeartOutlineIconSm from "../../bpk-component-icon/sm/heart--outline";
+import { withLargeButtonAlignment } from "../../bpk-component-icon";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkSaveButton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SIZE_TYPES = {
+  default: 'default',
+  small: 'small'
+};
+export const STYLE_TYPES = {
+  default: 'default',
+  contained: 'contained',
+  onDark: 'onDark'
+};
+const getClassName = cssModules(STYLES);
+const AlignedHeartIcon = withLargeButtonAlignment(BpkHeartIcon);
+const AlignedHeartOutlineIcon = withLargeButtonAlignment(BpkHeartOutlineIcon);
+const AlignedHeartIconSm = withLargeButtonAlignment(BpkHeartIconSm);
+const AlignedHeartOutlineIconSm = withLargeButtonAlignment(BpkHeartOutlineIconSm);
+const BpkSaveButton = ({
+  accessibilityLabel,
+  checked,
+  onCheckedChange,
+  size = SIZE_TYPES.default,
+  style = STYLE_TYPES.default
+}) => {
+  const [toggle, setToggle] = useState(false);
+  const smallSize = size === SIZE_TYPES.small;
+  const HeartIcon = smallSize ? AlignedHeartIconSm : AlignedHeartIcon;
+  const HeartOutLineIcon = smallSize ? AlignedHeartOutlineIconSm : AlignedHeartOutlineIcon;
+  return /*#__PURE__*/_jsxs(BpkButtonV2, {
+    "aria-label": accessibilityLabel,
+    className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
+    onClick: e => {
+      setToggle(true);
+      onCheckedChange(e);
+    },
+    iconOnly: true,
+    children: [/*#__PURE__*/_jsx(HeartIcon, {
+      className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartIcon', toggle && checked && 'bpk-save-button__heartIcon--toggle', `bpk-save-button__heartIcon--${checked ? 'show' : 'hide'}`, `bpk-save-button__heartIcon--${style}`)
+    }), /*#__PURE__*/_jsx(HeartOutLineIcon, {
+      className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartOutlineIcon', `bpk-save-button__heartOutlineIcon--${checked ? 'hide' : 'show'}`, `bpk-save-button__heartOutlineIcon--${style}`)
+    })]
+  });
+};
+export default BpkSaveButton;

package/bpk-component-card-button/src/BpkSaveButton.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)}}@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)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.1.0",
+  "version": "29.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.0.0",
-    "@skyscanner/bpk-svgs": "^18.1.0",
+    "@skyscanner/bpk-foundations-web": "^17.1.0",
+    "@skyscanner/bpk-svgs": "^18.1.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",