@skyscanner/backpack-web 31.8.0 → 31.9.0

package/bpk-component-boilerplate/src/BpkBoilerplate.d.ts

@@ -17,13 +17,9 @@
  */
 
 export type Props = {
-  className?: string | null;
   [rest: string]: any;
 };
 declare const BpkBoilerplate: {
-  ({ className, ...rest }: Props): JSX.Element;
-  defaultProps: {
-    className: null;
-  };
+  ({ ...rest }: Props): JSX.Element;
 };
 export default BpkBoilerplate;

package/bpk-component-boilerplate/src/BpkBoilerplate.js

@@ -21,12 +21,12 @@ import STYLES from "./BpkBoilerplate.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkBoilerplate = ({
-  className = null,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-boilerplate', className);
+  // eslint-disable-next-line no-param-reassign
+  delete rest.className;
   return /*#__PURE__*/_jsx("div", {
-    className: classNames,
+    className: getClassName('bpk-boilerplate'),
     ...rest,
     children: "I am an example component."
   });

package/bpk-component-swap-button/index.d.ts

@@ -0,0 +1,24 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 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 BpkSwapButton, {
+  type Props as BpkSwapButtonProps,
+} from './src/BpkSwapButton.tsx';
+
+export type { BpkSwapButtonProps };
+export default BpkSwapButton;

package/bpk-component-swap-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 BpkSwapButton from "./src/BpkSwapButton";
+export default BpkSwapButton;

package/bpk-component-swap-button/src/BpkSwapButton.d.ts

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 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.
+ */
+
+export type Props = {
+  ariaLabel: string;
+  ariaLiveTextProps: string;
+  onClick: () => void;
+};
+declare const BpkSwapButton: ({
+  ariaLabel,
+  ariaLiveTextProps,
+  onClick,
+} : Props) => JSX.Element;
+export default BpkSwapButton;

package/bpk-component-swap-button/src/BpkSwapButton.js

@@ -0,0 +1,69 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import BpkAriaLive from "../../bpk-component-aria-live";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
+import STYLES from "./BpkSwapButton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkSwapButton = props => {
+  const {
+    ariaLabel,
+    ariaLiveTextProp,
+    onClick
+  } = props;
+  const [rotationDegree, setRotationDegree] = useState(0);
+  const [ariaLiveText, setAriaLiveText] = useState('');
+  const handleRotation = () => {
+    if (rotationDegree === 0) {
+      setRotationDegree(-180);
+    } else {
+      setRotationDegree(0);
+    }
+    setAriaLiveText(ariaLiveTextProp);
+    // without set timeout, the aria-live text would not change and screenreader would read out 'swapped' for the first time only.
+    setTimeout(() => {
+      setAriaLiveText('');
+    }, 250);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-swap-button'),
+    children: [/*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: getClassName('bpk-swap-button__button'),
+      style: {
+        transform: `rotate(${rotationDegree}deg)`
+      },
+      "aria-label": ariaLabel,
+      onClick: () => {
+        onClick();
+        handleRotation();
+      },
+      children: /*#__PURE__*/_jsx(SwapVertical, {
+        className: getClassName('bpk-swap-button__icon')
+      })
+    }), /*#__PURE__*/_jsx(BpkAriaLive, {
+      children: ariaLiveText
+    })]
+  });
+};
+export default BpkSwapButton;

package/bpk-component-swap-button/src/BpkSwapButton.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)}}@layer bpk-component{.bpk-swap-button{width:2.5rem;height:2.5rem;transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:100%;height:100%;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__icon{max-width:1rem;max-height:1rem}}

package/package.json

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