@telefonica/mistica 11.6.0 → 11.9.0

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

@@ -173,7 +173,8 @@ var ThemeContextProvider = function(param) {
             analytics: _objectSpread({
                 logEvent: function() {
                     return Promise.resolve();
-                }
+                },
+                eventFormat: "universal-analytics"
             }, theme.analytics),
             dimensions: _objectSpread({}, dimensions, theme.dimensions),
             mq: createMediaQueries((_mediaQueries = theme.mediaQueries) !== null && _mediaQueries !== void 0 ? _mediaQueries : mediaQueriesConfig),

package/dist-es/title.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Text1, Text2, Text5 } from "./text";
+import { useTheme } from "./hooks";
+import Inline from "./inline";
+import Box from "./box";
+var TitleLayout = function(param) {
+    var title = param.title, right = param.right;
+    if (!right) {
+        return title;
+    }
+    return /*#__PURE__*/ _jsxs(Inline, {
+        space: "between",
+        alignItems: "baseline",
+        children: [
+            title,
+            /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 16,
+                children: /*#__PURE__*/ _jsx(Text2, {
+                    regular: true,
+                    children: right
+                })
+            })
+        ]
+    });
+};
+export var Title1 = function(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    var theme = useTheme();
+    return /*#__PURE__*/ _jsx(TitleLayout, {
+        title: /*#__PURE__*/ _jsx(Text1, {
+            color: theme.colors.textSecondary,
+            transform: "uppercase",
+            medium: true,
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};
+export var Title2 = function(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ _jsx(TitleLayout, {
+        title: /*#__PURE__*/ _jsx(Text5, {
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};

package/dist-es/utils/analytics.js

@@ -1,6 +1,11 @@
+// Universal Analytics (legacy)
 export var eventCategories = {
     userInteraction: "user_interaction"
 };
 export var eventActions = {
     linkTapped: "link_tapped"
 };
+// Google analytics 4
+export var eventNames = {
+    userInteraction: "user_interaction"
+};

package/dist-es/video.js

@@ -73,17 +73,18 @@ var useStyles = createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function(param) {
                     var aspectRatio = param.aspectRatio;
                     return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -127,9 +128,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadius = useDisableBorderRadius();
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css
+    // if aspect ratio is 0, we use the original video proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.6.0",
+    "version": "11.9.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -77,7 +77,7 @@
         "@swc/core": "^1.2.160",
         "@swc/jest": "^0.2.20",
         "@telefonica/acceptance-testing": "^2.7.0",
-        "@telefonica/eslint-config": "^1.0.3",
+        "@telefonica/eslint-config": "^1.0.7",
         "@telefonica/prettier-config": "^1.1.0",
         "@telefonica/ts-to-flow": "1.2.0",
         "@testing-library/jest-dom": "^5.16.3",
@@ -123,7 +123,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.4.0",
+        "@tef-novum/webview-bridge": "^3.5.0",
         "@telefonica/libphonenumber": "^2.8.1",
         "classnames": "^2.3.1",
         "jss": "^10.9.0",

package/dist/icons/icon-visibility-off.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-declare type Props = {
-    role?: string;
-    size?: number;
-};
-declare const IconVisibilityOff: React.FC<Props>;
-export default IconVisibilityOff;

package/dist/icons/icon-visibility-off.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
-var IconVisibilityOff = function IconVisibilityOff(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                fill: "#757575",
-                d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
-            })
-        ]
-    });
-};
-var _default = IconVisibilityOff;
-exports.default = _default;

package/dist/icons/icon-visibility-off.js.flow

@@ -1,9 +0,0 @@
-// @flow
-
-import * as React from "react";
-declare type Props = {
-  role?: string,
-  size?: number,
-};
-declare var IconVisibilityOff: React.ComponentType<Props>;
-declare export default typeof IconVisibilityOff;

package/dist/icons/icon-visibility.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-declare type Props = {
-    role?: string;
-    size?: number;
-};
-declare const IconVisibility: React.FC<Props>;
-export default IconVisibility;

package/dist/icons/icon-visibility.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
-var IconVisibility = function IconVisibility(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                fill: "#757575",
-                d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-            })
-        ]
-    });
-};
-var _default = IconVisibility;
-exports.default = _default;

package/dist/icons/icon-visibility.js.flow

@@ -1,9 +0,0 @@
-// @flow
-
-import * as React from "react";
-declare type Props = {
-  role?: string,
-  size?: number,
-};
-declare var IconVisibility: React.ComponentType<Props>;
-declare export default typeof IconVisibility;

package/dist-es/icons/icon-visibility-off.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-var IconVisibilityOff = function(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ _jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                d: "M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                fill: "#757575",
-                d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
-            })
-        ]
-    });
-};
-export default IconVisibilityOff;

package/dist-es/icons/icon-visibility.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-var IconVisibility = function(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ _jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                fill: "#757575",
-                d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-            })
-        ]
-    });
-};
-export default IconVisibility;