@telefonica/mistica 11.7.0 → 11.10.0

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

@@ -91,6 +91,7 @@ import TabFocus from "./tab-focus";
 import ModalContextProvider from "./modal-context-provider";
 import { DocumentVisibilityProvider } from "./utils/document-visibility";
 import { AspectRatioSupportProvider } from "./utils/aspect-ratio-support";
+import { TrackingConfig } from "./utils/analytics";
 var darkModeMedia = "(prefers-color-scheme: dark)";
 export var useIsOsDarkModeEnabled = function() {
     var ref = _slicedToArray(React.useState(false), 2), isDarkMode = ref[0], setIsDarkMode = ref[1];
@@ -173,7 +174,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),
@@ -196,13 +198,16 @@ var ThemeContextProvider = function(param) {
             children: /*#__PURE__*/ _jsx(ModalContextProvider, {
                 children: /*#__PURE__*/ _jsx(ThemeContext.Provider, {
                     value: contextTheme,
-                    children: /*#__PURE__*/ _jsx(AspectRatioSupportProvider, {
-                        children: /*#__PURE__*/ _jsx(DocumentVisibilityProvider, {
-                            children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
-                                value: getAriaId,
-                                children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
-                                    children: /*#__PURE__*/ _jsx(DialogRoot, {
-                                        children: children
+                    children: /*#__PURE__*/ _jsx(TrackingConfig, {
+                        eventFormat: contextTheme.analytics.eventFormat,
+                        children: /*#__PURE__*/ _jsx(AspectRatioSupportProvider, {
+                            children: /*#__PURE__*/ _jsx(DocumentVisibilityProvider, {
+                                children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
+                                    value: getAriaId,
+                                    children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
+                                        children: /*#__PURE__*/ _jsx(DialogRoot, {
+                                            children: children
+                                        })
                                     })
                                 })
                             })

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/__tests__/analytics-test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import ThemeContextProvider from "../../theme-context-provider";
+import { render, screen } from "@testing-library/react";
+import { makeTheme } from "../../__tests__/test-utils";
+import { TrackingConfig, useTrackingConfig } from "../analytics";
+var PrintEventFormat = function(param) {
+    var prefix = param.prefix;
+    var eventFormat = useTrackingConfig().eventFormat;
+    return /*#__PURE__*/ _jsx("div", {
+        children: "".concat(prefix, ": ").concat(eventFormat)
+    });
+};
+test("TrackingConfig context providers", function() {
+    render(/*#__PURE__*/ _jsxs(ThemeContextProvider, {
+        theme: makeTheme({
+            analytics: {
+                logEvent: function() {
+                    return Promise.resolve();
+                },
+                eventFormat: "google-analytics-4"
+            }
+        }),
+        children: [
+            /*#__PURE__*/ _jsx(PrintEventFormat, {
+                prefix: "test1"
+            }),
+            /*#__PURE__*/ _jsxs(TrackingConfig, {
+                eventFormat: "universal-analytics",
+                children: [
+                    /*#__PURE__*/ _jsx(PrintEventFormat, {
+                        prefix: "test2"
+                    }),
+                    /*#__PURE__*/ _jsx(TrackingConfig, {
+                        eventFormat: "google-analytics-4",
+                        children: /*#__PURE__*/ _jsx(PrintEventFormat, {
+                            prefix: "test3"
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
+    expect(screen.getByText("test1: google-analytics-4")).toBeInTheDocument();
+    expect(screen.getByText("test2: universal-analytics")).toBeInTheDocument();
+    expect(screen.getByText("test3: google-analytics-4")).toBeInTheDocument();
+});

package/dist-es/utils/analytics.js

@@ -1,6 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+// Universal Analytics (legacy)
 export var eventCategories = {
     userInteraction: "user_interaction"
 };
 export var eventActions = {
     linkTapped: "link_tapped"
 };
+// Google analytics 4
+export var eventNames = {
+    userInteraction: "user_interaction"
+};
+var TrackingContext = /*#__PURE__*/ React.createContext({
+    eventFormat: "universal-analytics"
+});
+export var TrackingConfig = function(param) {
+    var children = param.children, eventFormat = param.eventFormat;
+    var value = React.useMemo(function() {
+        return {
+            eventFormat: eventFormat
+        };
+    }, [
+        eventFormat
+    ]);
+    return /*#__PURE__*/ _jsx(TrackingContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+export var useTrackingConfig = function() {
+    return React.useContext(TrackingContext);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.7.0",
+    "version": "11.10.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.7.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;