@skyscanner/backpack-web 31.9.0 → 31.9.1

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

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import BpkSwapButton, {
-  type Props as BpkSwapButtonProps,
-} from './src/BpkSwapButton.tsx';
-
+import BpkSwapButton, { type Props as BpkSwapButtonProps, SWAPBUTTON_STYLES } from './src/BpkSwapButton';
 export type { BpkSwapButtonProps };
 export default BpkSwapButton;
+export { SWAPBUTTON_STYLES };

package/bpk-component-swap-button/index.js

@@ -16,5 +16,6 @@
  * limitations under the License.
  */
 
-import BpkSwapButton from "./src/BpkSwapButton";
-export default BpkSwapButton;
+import BpkSwapButton, { SWAPBUTTON_STYLES } from "./src/BpkSwapButton";
+export default BpkSwapButton;
+export { SWAPBUTTON_STYLES };

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

@@ -16,14 +16,20 @@
  * limitations under the License.
  */
 
+export declare const SWAPBUTTON_STYLES: {
+    surfaceContrast: string;
+    canvasDefault: string;
+    canvasContrast: string;
+};
+export type SwapButtonStyle = (typeof SWAPBUTTON_STYLES)[keyof typeof SWAPBUTTON_STYLES];
 export type Props = {
-  ariaLabel: string;
-  ariaLiveTextProps: string;
-  onClick: () => void;
+    onClick: () => void;
+    ariaLabel: string;
+    swapButtonStyle?: SwapButtonStyle;
 };
 declare const BpkSwapButton: ({
-  ariaLabel,
-  ariaLiveTextProps,
-  onClick,
+    ariaLabel,
+    onClick,
+    swapButtonStyle,
 } : Props) => JSX.Element;
 export default BpkSwapButton;

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

@@ -18,38 +18,35 @@
 
 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);
+export const SWAPBUTTON_STYLES = {
+  surfaceContrast: 'surface-contrast',
+  canvasDefault: 'canvas-default',
+  canvasContrast: 'canvas-contrast'
+};
 const BpkSwapButton = props => {
   const {
     ariaLabel,
-    ariaLiveTextProp,
-    onClick
+    onClick,
+    swapButtonStyle = SWAPBUTTON_STYLES.surfaceContrast
   } = 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", {
+  return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-swap-button'),
-    children: [/*#__PURE__*/_jsx("button", {
+    children: /*#__PURE__*/_jsx("button", {
       type: "button",
-      className: getClassName('bpk-swap-button__button'),
+      className: getClassName('bpk-swap-button__button', `bpk-swap-button__button--${swapButtonStyle}`),
       style: {
         transform: `rotate(${rotationDegree}deg)`
       },
@@ -61,9 +58,7 @@ const BpkSwapButton = props => {
       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

@@ -15,4 +15,4 @@
  * 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}}
+@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__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}.bpk-swap-button__icon{max-width:1rem;max-height:1rem}}

package/bpk-mixins/src/mixins/_utils.scss

@@ -28,10 +28,8 @@
 ///   }
 
 @mixin bpk-focus-indicator {
-  outline: ($bpk-one-pixel-rem * 2) solid $bpk-text-link-day !important; /* stylelint-disable-line declaration-no-important */
-  outline-offset: (
-    $bpk-one-pixel-rem * 2
-  ) !important; /* stylelint-disable-line declaration-no-important */
+  outline: ($bpk-one-pixel-rem * 2) solid $bpk-text-link-day;
+  outline-offset: ($bpk-one-pixel-rem * 2);
 }
 
 /// Hide visually and from screen readers.

package/bpk-stylesheets/base.css

@@ -16,5 +16,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- */@layer bpk-reset, bpk-base, bpk-component, bpk-utility;@layer bpk-reset{/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}}@layer bpk-base{@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both}}
+ */@layer bpk-reset, bpk-base, bpk-component, bpk-utility;@layer bpk-reset{/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}}@layer bpk-base{@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both}}
 

package/package.json

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