@telefonica/mistica 11.10.2 → 11.12.0

package/dist/theme.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import type { RegionCode } from './utils/region-code';
 import type { Locale } from './utils/locale';
-import type { Skin, Colors, SkinName } from './skins/types';
+import type { Skin, Colors, SkinName, TextPresetsConfig } from './skins/types';
 import type { TrackingEvent } from './utils/types';
+import type { MediaQueries } from './utils/media-queries';
 export declare type ThemeTexts = typeof TEXTS_ES;
 declare const TEXTS_ES: {
     expirationDatePlaceholder: string;
@@ -124,17 +125,9 @@ export declare type Theme = {
     dimensions: {
         headerMobileHeight: number;
     };
-    mq: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-        largeDesktop: string;
-        tabletOrBigger: string;
-        tabletOrSmaller: string;
-        desktopOrBigger: string;
-        supportsHover: string;
-    };
+    mq: MediaQueries;
     colors: Colors;
+    textPresets: TextPresetsConfig;
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;

package/dist/theme.js.flow

@@ -3,8 +3,9 @@
 import * as React from "react";
 import type { RegionCode } from "./utils/region-code";
 import type { Locale } from "./utils/locale";
-import type { Skin, Colors, SkinName } from "./skins/types";
+import type { Skin, Colors, SkinName, TextPresetsConfig } from "./skins/types";
 import type { TrackingEvent } from "./utils/types";
+import type { MediaQueries } from "./utils/media-queries";
 export type ThemeTexts = typeof TEXTS_ES;
 declare var TEXTS_ES: {
   expirationDatePlaceholder: string,
@@ -128,17 +129,9 @@ export type Theme = {
   dimensions: {
     headerMobileHeight: number,
   },
-  mq: {
-    mobile: string,
-    tablet: string,
-    desktop: string,
-    largeDesktop: string,
-    tabletOrBigger: string,
-    tabletOrSmaller: string,
-    desktopOrBigger: string,
-    supportsHover: string,
-  },
+  mq: MediaQueries,
   colors: Colors,
+  textPresets: TextPresetsConfig,
   Link: LinkComponent,
   isDarkMode: boolean,
   isIos: boolean,

package/dist/utils/media-queries.d.ts

@@ -1,9 +1,4 @@
-export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
-    tabletMinWidth: number;
-    desktopMinWidth: number;
-    largeDesktopMinWidth: number;
-    desktopOrTabletMinHeight: number;
-}) => {
+export declare type MediaQueries = Readonly<{
     mobile: string;
     tablet: string;
     desktop: string;
@@ -12,4 +7,11 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrSmaller: string;
     desktopOrBigger: string;
     supportsHover: string;
-};
+    touchableOnly: string;
+}>;
+export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
+    tabletMinWidth: number;
+    desktopMinWidth: number;
+    largeDesktopMinWidth: number;
+    desktopOrTabletMinHeight: number;
+}) => MediaQueries;

package/dist/utils/media-queries.js

@@ -17,7 +17,11 @@ var createMediaQueries = function createMediaQueries(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };
 exports.createMediaQueries = createMediaQueries;

package/dist/utils/media-queries.js.flow

@@ -1,11 +1,6 @@
 // @flow
 
-declare export var createMediaQueries: (x: {
-  tabletMinWidth: number,
-  desktopMinWidth: number,
-  largeDesktopMinWidth: number,
-  desktopOrTabletMinHeight: number,
-}) => {
+export type MediaQueries = $ReadOnly<{
   mobile: string,
   tablet: string,
   desktop: string,
@@ -14,4 +9,11 @@ declare export var createMediaQueries: (x: {
   tabletOrSmaller: string,
   desktopOrBigger: string,
   supportsHover: string,
-};
+  touchableOnly: string,
+}>;
+declare export var createMediaQueries: (x: {
+  tabletMinWidth: number,
+  desktopMinWidth: number,
+  largeDesktopMinWidth: number,
+  desktopOrTabletMinHeight: number,
+}) => MediaQueries;

package/dist/utils/platform.d.ts

@@ -3,8 +3,15 @@ export declare const isInsideNovumNativeApp: (platformOverrides?: Theme['platfor
 export declare const isRunningAcceptanceTest: (platformOverrides?: Theme['platformOverrides']) => boolean;
 export declare const isAndroid: (platformOverrides: Theme['platformOverrides']) => boolean;
 export declare const isIos: (platformOverrides: Theme['platformOverrides']) => boolean;
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */
+export declare const isSafari: () => boolean;
 export declare const isFirefox: (platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | undefined;
+    platform?: "desktop" | "ios" | "android" | undefined;
     insideNovumNativeApp?: boolean | undefined;
     userAgent?: string | undefined;
 } | undefined) => boolean;

package/dist/utils/platform.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.getPlatform = exports.getIosVersion = exports.isOldChrome = exports.isChrome = exports.isFirefox = exports.isIos = exports.isAndroid = exports.isRunningAcceptanceTest = exports.isInsideNovumNativeApp = void 0;
+exports.getPlatform = exports.getIosVersion = exports.isOldChrome = exports.isChrome = exports.isFirefox = exports.isSafari = exports.isIos = exports.isAndroid = exports.isRunningAcceptanceTest = exports.isInsideNovumNativeApp = void 0;
 var _webviewBridge = require("@tef-novum/webview-bridge");
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -91,6 +91,10 @@ var isIos = function isIos(platformOverrides) {
     return false;
 };
 exports.isIos = isIos;
+var isSafari = function isSafari() {
+    return navigator.vendor.includes("Apple");
+};
+exports.isSafari = isSafari;
 var isFirefox = function isFirefox(platformOverrides) {
     return !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
 };

package/dist/utils/platform.js.flow

@@ -13,9 +13,16 @@ declare export var isAndroid: (
 declare export var isIos: (
   platformOverrides: $PropertyType<Theme, "platformOverrides">
 ) => boolean;
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */
+declare export var isSafari: () => boolean;
 declare export var isFirefox: (
   platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | void,
+    platform?: "desktop" | "ios" | "android" | void,
     insideNovumNativeApp?: boolean | void,
     userAgent?: string | void,
   } | void

package/dist/video.js

@@ -10,6 +10,7 @@ var _jss = require("./jss");
 var _aspectRatioSupport = require("./utils/aspect-ratio-support");
 var _common = require("./utils/common");
 var _dom = require("./utils/dom");
+var _platform = require("./utils/platform");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -97,6 +98,7 @@ exports.RATIO = RATIO;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         video: {
+            background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
@@ -113,7 +115,10 @@ var useStyles = (0, _jss).createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function position(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -132,7 +137,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             paddingTop: function paddingTop(param) {
                 var aspectRatio = param.aspectRatio, width = param.width;
                 if (!aspectRatio) {
-                    return "initial";
+                    return 0;
                 }
                 if (width && typeof width === "string" && width.endsWith("%")) {
                     return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
@@ -144,7 +149,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
 });
 /** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC";
 var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
+    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? !(0, _platform).isRunningAcceptanceTest() : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -198,7 +203,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = props.width || "100%";
     }
-    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    /**
+         * In safari, when using a video with poster, the transition from pause to play does a flicker,
+         * To avoid this, in Safari browsers, instead of using the poster attribute, we use a
+         * wrapper with the poster as background image
+         */ var needsWrapper = (0, _platform).isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ (0, _jsxRuntime).jsx("video", _objectSpread({
         ref: (0, _common).combineRefs(ref, videoRef),
         playsInline: true,
@@ -207,14 +216,16 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, !needsWrapper ? {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
-    } : {}, {
+    }, {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL
+        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
@@ -228,7 +239,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             style: {
                 width: width,
-                height: height
+                height: height,
+                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                backgroundSize: "cover",
+                backgroundPosition: "50% 50%"
             },
             className: classes.wrapper,
             children: video1

package/dist-es/button.js

@@ -179,13 +179,12 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                "@media (pointer: coarse)": {
-                    // Revert hover background in touch devices
-                    backgroundColor: theme.colors.buttonPrimaryBackground
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonPrimaryBackgroundHover
+            }, theme.mq.touchableOnly, {
+                // Revert hover background in touch devices
+                backgroundColor: theme.colors.buttonPrimaryBackground
+            })
         },
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
@@ -195,14 +194,13 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 color: theme.colors.textButtonPrimaryInverseSelected,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    color: theme.colors.textButtonPrimaryInverse,
-                    backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
-                }
-            }
+                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                color: theme.colors.textButtonPrimaryInverse,
+                backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
+            })
         }
     });
 });
@@ -224,9 +222,7 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
             "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
-            })
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), _defineProperty({}, theme.mq.touchableOnly, _objectSpread({}, buttonSecondaryLightStyle(theme))))
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
@@ -236,14 +232,13 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
-                color: theme.colors.textButtonSecondaryInverseSelected,
-                "@media (pointer: coarse)": {
-                    borderColor: theme.colors.buttonSecondaryBorderInverse,
-                    color: theme.colors.textButtonSecondaryInverse
-                }
-            }
+                color: theme.colors.textButtonSecondaryInverseSelected
+            }, theme.mq.touchableOnly, {
+                borderColor: theme.colors.buttonSecondaryBorderInverse,
+                color: theme.colors.textButtonSecondaryInverse
+            })
         }
     });
 });
@@ -257,13 +252,12 @@ var dangerButtonStyles = function(theme) {
         "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        "&:hover:not([disabled])": {
-            backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            "@media (pointer: coarse)": {
-                // Revert hover background in touch devices
-                backgroundColor: theme.colors.buttonDangerBackground
-            }
-        }
+        "&:hover:not([disabled])": _defineProperty({
+            backgroundColor: theme.colors.buttonDangerBackgroundHover
+        }, theme.mq.touchableOnly, {
+            // Revert hover background in touch devices
+            backgroundColor: theme.colors.buttonDangerBackground
+        })
     };
 };
 var useDangerButtonStyles = createUseStyles(function(theme) {
@@ -447,12 +441,11 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            },
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelected
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            }),
             "&[disabled]": disabledStyle
         },
         inverse: {
@@ -460,12 +453,11 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            })
         },
         aligned: {
             marginLeft: -padding