@telefonica/mistica 11.10.2 → 11.12.0

package/dist-es/text.js

@@ -33,6 +33,7 @@ import { createUseStyles } from "./jss";
 import { useIsInverseVariant } from "./theme-variant-context";
 import { pxToRem } from "./utils/css";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import { useTheme } from "./hooks";
 var useStyles = createUseStyles(function(theme) {
     var mapToWeight = {
         light: 300,
@@ -116,7 +117,7 @@ var useStyles = createUseStyles(function(theme) {
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
                 }
             },
-            display: "box",
+            display: "-webkit-box",
             boxOrient: "vertical",
             overflow: "hidden"
         }
@@ -157,67 +158,73 @@ var getWeight = function(props) {
     return props.light && "light" || props.regular && "regular" || props.medium && "medium";
 };
 export var Text10 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
         desktopLineHeight: "72px",
-        weight: "light"
+        weight: textPresets.text10.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text9 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
         desktopLineHeight: "64px",
-        weight: "light"
+        weight: textPresets.text9.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text8 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text8.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text7 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text7.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text6 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
         desktopLineHeight: "40px",
-        weight: "light"
+        weight: textPresets.text6.weight
     }, props, {
         children: props.children
     }));
 };
 export var Text5 = function(props) {
+    var textPresets = useTheme().textPresets;
     return /*#__PURE__*/ _jsx(Text, _objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
         desktopLineHeight: "32px",
-        weight: "light"
+        weight: textPresets.text5.weight
     }, props, {
         children: props.children
     }));

package/dist-es/theme-context-provider.js

@@ -134,15 +134,35 @@ var useDefaultHrefDecorator = function() {
         return href;
     };
 };
+var defaultTextPresetsConfig = {
+    text5: {
+        weight: "light"
+    },
+    text6: {
+        weight: "light"
+    },
+    text7: {
+        weight: "light"
+    },
+    text8: {
+        weight: "light"
+    },
+    text9: {
+        weight: "light"
+    },
+    text10: {
+        weight: "light"
+    }
+};
 var ThemeContextProvider = function(param) {
     var theme = param.theme, children = param.children, providerId = param.providerId;
-    var ref = _slicedToArray(React.useState(function() {
+    var ref6 = _slicedToArray(React.useState(function() {
         if (providerId) {
             return providerId;
         } else {
             return isServerSide() ? 0 : nextJssInstanceId++;
         }
-    }), 1), instanceId = ref[0];
+    }), 1), instanceId = ref6[0];
     var classNamePrefix = React.useMemo(function() {
         return process.env.NODE_ENV === "test" ? "" : "mistica-".concat(PACKAGE_VERSION.replace(/\./g, "-"), "_").concat(instanceId, "_");
     }, [
@@ -154,6 +174,7 @@ var ThemeContextProvider = function(param) {
     }, []);
     var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
     var contextTheme = React.useMemo(function() {
+        var ref, ref1, ref2, ref3, ref4, ref5;
         var _colorScheme;
         // TODO: In next major version we could change this to "auto" by default
         var colorScheme = (_colorScheme = theme.colorScheme) !== null && _colorScheme !== void 0 ? _colorScheme : "light";
@@ -180,6 +201,14 @@ var ThemeContextProvider = function(param) {
             dimensions: _objectSpread({}, dimensions, theme.dimensions),
             mq: createMediaQueries((_mediaQueries = theme.mediaQueries) !== null && _mediaQueries !== void 0 ? _mediaQueries : mediaQueriesConfig),
             colors: colors,
+            textPresets: {
+                text5: _objectSpread({}, defaultTextPresetsConfig.text5, (ref = theme.skin.textPresets) === null || ref === void 0 ? void 0 : ref.text5),
+                text6: _objectSpread({}, defaultTextPresetsConfig.text6, (ref1 = theme.skin.textPresets) === null || ref1 === void 0 ? void 0 : ref1.text6),
+                text7: _objectSpread({}, defaultTextPresetsConfig.text7, (ref2 = theme.skin.textPresets) === null || ref2 === void 0 ? void 0 : ref2.text7),
+                text8: _objectSpread({}, defaultTextPresetsConfig.text8, (ref3 = theme.skin.textPresets) === null || ref3 === void 0 ? void 0 : ref3.text8),
+                text9: _objectSpread({}, defaultTextPresetsConfig.text9, (ref4 = theme.skin.textPresets) === null || ref4 === void 0 ? void 0 : ref4.text9),
+                text10: _objectSpread({}, defaultTextPresetsConfig.text10, (ref5 = theme.skin.textPresets) === null || ref5 === void 0 ? void 0 : ref5.text10)
+            },
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : AnchorLink,
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === "ios",

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

@@ -12,6 +12,10 @@ export var createMediaQueries = function(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)"
     };
 };

package/dist-es/utils/platform.js

@@ -82,6 +82,14 @@ export var isIos = function(platformOverrides) {
     }
     return false;
 };
+/**
+ * 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 var isSafari = function() {
+    return navigator.vendor.includes("Apple");
+};
 export var isFirefox = function(platformOverrides) {
     return !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
 };

package/dist-es/video.js

@@ -60,6 +60,7 @@ import { createUseStyles } from "./jss";
 import { useSupportsAspectRatio } from "./utils/aspect-ratio-support";
 import { combineRefs } from "./utils/common";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import { isRunningAcceptanceTest, isSafari } from "./utils/platform";
 export var RATIO = {
     "1:1": 1,
     "16:9": 16 / 9,
@@ -69,6 +70,7 @@ export var RATIO = {
 var useStyles = createUseStyles(function() {
     return {
         video: {
+            background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
@@ -85,7 +87,11 @@ var useStyles = createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return(// when aspectRatio is 0, we want the video to use the original aspect ratio
+                    aspectRatio ? "absolute" : "static");
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -104,7 +110,7 @@ var useStyles = createUseStyles(function() {
             paddingTop: function(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, "%");
@@ -116,7 +122,7 @@ var useStyles = 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 ? !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",
@@ -170,7 +176,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 = isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ _jsx("video", _objectSpread({
         ref: combineRefs(ref, videoRef),
         playsInline: true,
@@ -179,14 +189,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
     }, getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
@@ -200,7 +212,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         return /*#__PURE__*/ _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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.10.2",
+    "version": "11.12.0",
     "license": "MIT",
     "repository": {
         "type": "git",