@telefonica/mistica 10.26.0 → 10.27.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [10.27.0](https://github.com/Telefonica/mistica-web/compare/v10.26.0...v10.27.0) (2022-02-25)
+
+
+### Bug Fixes
+
+* **playroom:** dark mode in Blau & Telefonica ios ([#423](https://github.com/Telefonica/mistica-web/issues/423)) ([a630625](https://github.com/Telefonica/mistica-web/commit/a630625379cdb486abd916ad05c0d3fd4974e5cd))
+* **skins:** remove deprecated constants ([#418](https://github.com/Telefonica/mistica-web/issues/418)) ([822960f](https://github.com/Telefonica/mistica-web/commit/822960f2ecf629b4e5de0ac3224e2026332c0f14))
+* **Telefonica skin:** change badge color ([#424](https://github.com/Telefonica/mistica-web/issues/424)) ([0976c24](https://github.com/Telefonica/mistica-web/commit/0976c246f295d4be61426d33ff93b65c9bae0598))
+
+
+### Features
+
+* **Button:** default tracking events ([#425](https://github.com/Telefonica/mistica-web/issues/425)) ([5fc2576](https://github.com/Telefonica/mistica-web/commit/5fc25768f71cd8a0318b47266511694e6024e49e))
+* **Image, Text, Video, Tag:** add dataAttributes prop ([#429](https://github.com/Telefonica/mistica-web/issues/429)) ([730a0db](https://github.com/Telefonica/mistica-web/commit/730a0dbb80abe9a47260b21e29fe1cbf2c9cc206))
+
 # [10.26.0](https://github.com/Telefonica/mistica-web/compare/v10.25.0...v10.26.0) (2022-02-23)
 
 

package/dist/button.d.ts

@@ -11,6 +11,7 @@ interface CommonProps {
     loadingText?: string;
     disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-controls'?: string;
@@ -58,6 +59,7 @@ export declare type ButtonProps = FakeButtonProps | SubmitButtonProps | ToButton
 interface ButtonLinkCommonProps {
     children: React.ReactNode;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     aligned?: boolean;

package/dist/button.js

@@ -14,6 +14,8 @@ var _formContext = require("./form-context");
 var _css = require("./utils/css");
 var _text = require("./text");
 var _box = _interopRequireDefault(require("./box"));
+var _common = require("./utils/common");
+var _analytics = require("./utils/analytics");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -341,13 +343,18 @@ var Button = function Button(props) {
             children: text
         });
     };
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
             cursor: props.fake ? 'pointer' : undefined
         }, props.style),
-        trackingEvent: props.trackingEvent,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: _analytics.eventCategories.userInteraction,
+            action: "".concat(props.type, "_button_tapped"),
+            label: (0, _common).getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         'aria-controls': props['aria-controls'],
         'aria-expanded': props['aria-expanded'],
@@ -486,10 +493,15 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
 var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
-        trackingEvent: props.trackingEvent,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: _analytics.eventCategories.userInteraction,
+            action: _analytics.eventActions.linkTapped,
+            label: (0, _common).getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
             medium: true,
@@ -536,21 +548,24 @@ exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {
     var classes = usePrimaryButtonStyles();
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "primary"
     })));
 };
 exports.ButtonPrimary = ButtonPrimary;
 var ButtonSecondary = function ButtonSecondary(props) {
     var classes = useSecondaryButtonStyles();
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "secondary"
     })));
 };
 exports.ButtonSecondary = ButtonSecondary;
 var ButtonDanger = function ButtonDanger(props) {
     var classes = useDangerButtonStyles();
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "danger"
     })));
 };
 exports.ButtonDanger = ButtonDanger;

package/dist/button.js.flow

@@ -18,6 +18,7 @@ declare type CommonProps = {
   loadingText?: string,
   disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
+  trackEvent?: boolean,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
@@ -58,6 +59,7 @@ export type ButtonProps =
 declare type ButtonLinkCommonProps = {
   children: React.Node,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
+  trackEvent?: boolean,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"

package/dist/image.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 export declare const useDisableBorderRadius: () => boolean;
 export declare const DisableBorderRadiusProvider: React.FC;
 export declare type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
@@ -19,6 +20,7 @@ export declare type ImageProps = {
     /** defaults to empty string */
     alt?: string;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 /** @deprecated */
 declare type DeprecatedImageProps = {
@@ -31,6 +33,7 @@ declare type DeprecatedImageProps = {
     /** defaults to empty string */
     alt?: string;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 declare const Image: React.ForwardRefExoticComponent<(ImageProps | DeprecatedImageProps) & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/image.js

@@ -6,6 +6,7 @@ exports.default = exports.RATIO = exports.DisableBorderRadiusProvider = exports.
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+var _dom = require("./utils/dom");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -27,6 +28,35 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -96,9 +126,10 @@ var RATIO = {
 };
 exports.RATIO = RATIO;
 var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "aspectRatio",
-        "alt"
+        "alt",
+        "dataAttributes"
     ]);
     var noBorderRadius = useDisableBorderRadius();
     var classes = useStyles({
@@ -118,14 +149,14 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
-    }));
+    })));
 });
 var _default = Image;
 exports.default = _default;

package/dist/image.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare export var useDisableBorderRadius: () => boolean;
 declare export var DisableBorderRadiusProvider: React.ComponentType<{}>;
 export type AspectRatio = "1:1" | "16:9" | "7:10" | "4:3";
@@ -25,6 +26,7 @@ export type ImageProps = {
   * defaults to empty string
   */
  alt?: string,
+ dataAttributes?: DataAttributes,
 };
 /**
  * @deprecated
@@ -41,6 +43,7 @@ declare type DeprecatedImageProps = {
   * defaults to empty string
   */
  alt?: string,
+ dataAttributes?: DataAttributes,
 };
 declare var Image: React.ComponentType<{
   ...ImageProps | DeprecatedImageProps,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.26.0';
+var PACKAGE_VERSION = '10.27.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/skins/blau.js

@@ -98,8 +98,6 @@ var getBlauSkin = function getBlauSkin() {
             controlError: palette.blauRed,
             loadingBar: palette.blauBlueSecondary,
             loadingBarBackground: palette.blauBlueSecondary10,
-            loadingBarInverse: palette.blauBlueSecondary,
-            loadingBarBackgroundInverse: palette.blauBlueSecondary10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
             iosControlKnob: palette.white,

package/dist/skins/o2-classic.js

@@ -111,8 +111,6 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             controlError: palette.pepper,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.o2GemLight30,
-            loadingBarBackgroundInverse: palette.o2GemLight30,
-            loadingBarInverse: palette.o2Gem,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.white,
@@ -199,8 +197,6 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             controlActivated: palette.o2Gem,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.darkModeGrey,
-            loadingBarInverse: palette.o2SkyBlue,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.grey2,

package/dist/skins/o2.js

@@ -101,8 +101,6 @@ var getO2Skin = function getO2Skin() {
             controlError: palette.pepper,
             loadingBar: palette.o2BluePrimary,
             loadingBarBackground: palette.grey1,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.o2BluePrimary,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
@@ -193,8 +191,6 @@ var getO2Skin = function getO2Skin() {
             controlActivated: palette.o2BluePrimary30,
             loadingBar: palette.darkModeO2BluePrimary,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.darkModeO2BluePrimary,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2BlueLight30,
             iosControlKnob: palette.grey2,

package/dist/skins/telefonica.js

@@ -96,8 +96,6 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             controlError: palette.coral,
             loadingBar: palette.telefonicaBlue30,
             loadingBarBackground: palette.telefonicaBlue70,
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
@@ -106,7 +104,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
             // FEEDBACKS
-            badge: palette.coral80,
+            badge: palette.coral70,
             feedbackErrorBackground: palette.coral,
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
@@ -186,8 +184,6 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.grey1,
             iosControlKnob: palette.grey2,

package/dist/skins/vivo.js

@@ -95,8 +95,6 @@ var getVivoSkin = function getVivoSkin() {
             controlError: palette.pepper,
             loadingBar: palette.pink,
             loadingBarBackground: palette.pepperLight30,
-            loadingBarBackgroundInverse: palette.vivoPurpleLight50,
-            loadingBarInverse: palette.vivoPurple,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             iosControlKnob: palette.white,
@@ -187,8 +185,6 @@ var getVivoSkin = function getVivoSkin() {
             controlActivated: palette.vivoPurpleLight80,
             loadingBar: palette.vivoPurpleLight80,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.vivoPurpleLight80,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight50,
             iosControlKnob: palette.grey2,

package/dist/tag.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import type { IconProps } from './utils/types';
+import type { DataAttributes, IconProps } from './utils/types';
 export declare type TagType = 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
 export declare type TagProps = {
     type?: 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
     children: string;
     Icon?: React.FC<IconProps>;
+    dataAttributes?: DataAttributes;
     /** @deprecated use type prop */
     color?: string;
 };

package/dist/tag.js

@@ -11,6 +11,7 @@ var _jss = require("./jss");
 var _text = require("./text");
 var _themeVariantContext = require("./theme-variant-context");
 var _css = require("./utils/css");
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -45,6 +46,19 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -72,6 +86,22 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -105,7 +135,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var Tag = function Tag(param) {
-    var Icon = param.Icon, children = param.children, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
+    var Icon = param.Icon, children = param.children, dataAttributes = param.dataAttributes, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
     var classes = useStyles({
         hasIcon: !!Icon
     });
@@ -168,7 +198,7 @@ var Tag = function Tag(param) {
     };
     var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor1 = _type1[0], backgroundColor = _type1[1];
     var shouldUseInverseBackground = isInverse && !isDarkMode;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("span", {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("span", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         className: classes.tag,
         style: {
             background: shouldUseInverseBackground ? colors.inverse : backgroundColor
@@ -193,7 +223,7 @@ var Tag = function Tag(param) {
                 })
             })
         ]
-    }));
+    })));
 };
 var _default = Tag;
 exports.default = _default;

package/dist/tag.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import type { IconProps } from "./utils/types";
+import type { DataAttributes, IconProps } from "./utils/types";
 export type TagType =
   | "promo"
   | "active"
@@ -13,6 +13,7 @@ export type TagProps = {
   type?: "promo" | "active" | "inactive" | "success" | "warning" | "error",
   children: string,
   Icon?: React.ComponentType<IconProps>,
+  dataAttributes?: DataAttributes,
 
   /**
    * @deprecated use type prop

package/dist/text-link.d.ts

@@ -10,6 +10,7 @@ interface CommonProps {
     small?: boolean;
     disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
 }

package/dist/text-link.js

@@ -10,6 +10,8 @@ var _touchable = _interopRequireDefault(require("./touchable"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _themeVariantContext = require("./theme-variant-context");
 var _formContext = require("./form-context");
+var _common = require("./utils/common");
+var _analytics = require("./utils/analytics");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -126,8 +128,14 @@ var TextLink = function TextLink(_param) {
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var formStatus = (0, _formContext).useForm().formStatus;
+    var _trackingEvent;
     var _obj;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: _analytics.eventCategories.userInteraction,
+            action: _analytics.eventActions.linkTapped,
+            label: (0, _common).getTextFromChildren(children)
+        } : undefined,
         disabled: disabled || formStatus === 'sending',
         className: (0, _classnames).default(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children

package/dist/text-link.js.flow

@@ -12,6 +12,7 @@ declare type CommonProps = {
   small?: boolean,
   disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
+  trackEvent?: boolean,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"

package/dist/text.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 declare type FontWeight = 'light' | 'regular' | 'medium';
 export interface TextPresetProps {
     color?: string;
@@ -15,6 +16,7 @@ export interface TextPresetProps {
     as?: React.ComponentType<any> | string;
     role?: string;
     'aria-level'?: number;
+    dataAttributes?: DataAttributes;
 }
 interface TextProps extends TextPresetProps {
     weight?: FontWeight | boolean;

package/dist/text.js

@@ -9,6 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _css = require("./utils/css");
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -148,7 +149,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Text = function Text(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'];
+    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'], dataAttributes = param.dataAttributes;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -169,12 +170,12 @@ var Text = function Text(param) {
         return null;
     }
     var className = (0, _classnames).default(classes.text, _defineProperty({}, classes.truncate, !!truncate));
-    return(/*#__PURE__*/ React.createElement(as, {
+    return(/*#__PURE__*/ React.createElement(as, _objectSpread({
         className: className,
         id: id,
         role: role,
         'aria-level': ariaLevel
-    }, children));
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes)), children));
 };
 exports.Text = Text;
 var getRegularOrMediumWeight = function getRegularOrMediumWeight(props) {

package/dist/text.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare type FontWeight = "light" | "regular" | "medium";
 export type TextPresetProps = {
   color?: string,
@@ -23,6 +24,7 @@ export type TextPresetProps = {
   as?: React.ComponentType<any> | string,
   role?: string,
   "aria-level"?: number,
+  dataAttributes?: DataAttributes,
 };
 declare type TextProps = {
   ...$Exact<TextPresetProps>,

package/dist/utils/analytics.d.ts

@@ -0,0 +1,6 @@
+export declare const eventCategories: {
+    readonly userInteraction: "user_interaction";
+};
+export declare const eventActions: {
+    readonly linkTapped: "link_tapped";
+};

package/dist/utils/analytics.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.eventActions = exports.eventCategories = void 0;
+var eventCategories = {
+    userInteraction: 'user_interaction'
+};
+exports.eventCategories = eventCategories;
+var eventActions = {
+    linkTapped: 'link_tapped'
+};
+exports.eventActions = eventActions;

package/dist/utils/analytics.js.flow

@@ -0,0 +1,8 @@
+// @flow
+
+declare export var eventCategories: {
+  +userInteraction: "user_interaction",
+};
+declare export var eventActions: {
+  +linkTapped: "link_tapped",
+};

package/dist/utils/common.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
 export declare const combineRefs: <T>(...refs: (React.Ref<T> | undefined)[]) => (refValue: T | null) => void;
+export declare const getTextFromChildren: (children: React.ReactNode) => string;

package/dist/utils/common.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.combineRefs = void 0;
+exports.getTextFromChildren = exports.combineRefs = void 0;
 var React = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
@@ -43,3 +43,13 @@ var combineRefs = function combineRefs() {
     };
 };
 exports.combineRefs = combineRefs;
+var getTextFromChildren = function getTextFromChildren(children) {
+    var text = '';
+    React.Children.forEach(children, function(child) {
+        if (typeof child === 'string') {
+            text += child;
+        }
+    });
+    return text;
+};
+exports.getTextFromChildren = getTextFromChildren;

package/dist/utils/common.js.flow

@@ -4,3 +4,4 @@ import * as React from "react";
 declare export var combineRefs: <T>(
   ...refs: Array<React.Ref<T> | void>
 ) => (refValue: T | null) => void;
+declare export var getTextFromChildren: (children: React.Node) => string;

package/dist/video.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 export declare type AspectRatio = '1:1' | '16:9' | '12:5' | '4:3';
 export declare const RATIO: {
     '1:1': number;
@@ -28,6 +29,7 @@ export declare type VideoProps = {
     children?: void;
     /** defaults to none */
     preload?: 'none' | 'metadata' | 'auto';
+    dataAttributes?: DataAttributes;
 };
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 export default Video;

package/dist/video.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _image = require("./image");
 var _jss = require("./jss");
 var _common = require("./utils/common");
+var _dom = require("./utils/dom");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -29,6 +30,35 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -83,14 +113,15 @@ 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, props = _objectWithoutProperties(_param, [
+    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, [
         "src",
         "poster",
         "autoPlay",
         "muted",
         "loop",
         "preload",
-        "aspectRatio"
+        "aspectRatio",
+        "dataAttributes"
     ]);
     var noBorderRadius = (0, _image).useDisableBorderRadius();
     var classes = useStyles({
@@ -130,7 +161,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("video", {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("video", _objectSpread({
         ref: (0, _common).combineRefs(ref, videoRef),
         playsInline: true,
         disablePictureInPicture: true,
@@ -143,7 +174,8 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL,
+        poster: poster || TRANSPARENT_PIXEL
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
             /*#__PURE__*/ return (0, _jsxRuntime).jsx("source", {
@@ -151,7 +183,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 type: type
             }, index);
         })
-    }));
+    })));
 });
 var _default = Video;
 exports.default = _default;

package/dist/video.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 export type AspectRatio = "1:1" | "16:9" | "12:5" | "4:3";
 declare export var RATIO: {
   "1:1": number,
@@ -43,6 +44,7 @@ export type VideoProps = {
   * defaults to none
   */
  preload?: "none" | "metadata" | "auto",
+ dataAttributes?: DataAttributes,
 };
 declare var Video: React.ComponentType<{
   ...VideoProps,

package/dist-es/button.js

@@ -9,6 +9,8 @@ import { useForm } from './form-context';
 import { pxToRem } from './utils/css';
 import { Text, Text2, Text3 } from './text';
 import Box from './box';
+import { getTextFromChildren } from './utils/common';
+import { eventActions, eventCategories } from './utils/analytics';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -308,13 +310,18 @@ var Button = function(props) {
             children: text
         });
     };
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: classnames(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
             cursor: props.fake ? 'pointer' : undefined
         }, props.style),
-        trackingEvent: props.trackingEvent,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: eventCategories.userInteraction,
+            action: "".concat(props.type, "_button_tapped"),
+            label: getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         'aria-controls': props['aria-controls'],
         'aria-expanded': props['aria-expanded'],
@@ -453,10 +460,15 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
 export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = useIsInverseVariant();
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: classnames(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
-        trackingEvent: props.trackingEvent,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: eventCategories.userInteraction,
+            action: eventActions.linkTapped,
+            label: getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         children: /*#__PURE__*/ _jsx(Text2, {
             medium: true,
@@ -502,18 +514,21 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();
     return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "primary"
     })));
 };
 export var ButtonSecondary = function(props) {
     var classes = useSecondaryButtonStyles();
     return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "secondary"
     })));
 };
 export var ButtonDanger = function(props) {
     var classes = useDangerButtonStyles();
     return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "danger"
     })));
 };

package/dist-es/image.js

@@ -1,6 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { createUseStyles } from './jss';
+import { getPrefixedDataAttributes } from './utils/dom';
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -67,9 +96,10 @@ export var RATIO = {
     '4:3': 4 / 3
 };
 var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "aspectRatio",
-        "alt"
+        "alt",
+        "dataAttributes"
     ]);
     var noBorderRadius = useDisableBorderRadius();
     var classes = useStyles({
@@ -89,13 +119,13 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ _jsx("img", {
+    return(/*#__PURE__*/ _jsx("img", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
         ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
-    }));
+    })));
 });
 export default Image;

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.26.0';
+export var PACKAGE_VERSION = '10.27.0';

package/dist-es/skins/blau.js

@@ -94,8 +94,6 @@ export var getBlauSkin = function() {
             controlError: palette.blauRed,
             loadingBar: palette.blauBlueSecondary,
             loadingBarBackground: palette.blauBlueSecondary10,
-            loadingBarInverse: palette.blauBlueSecondary,
-            loadingBarBackgroundInverse: palette.blauBlueSecondary10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
             iosControlKnob: palette.white,

package/dist-es/skins/o2-classic.js

@@ -107,8 +107,6 @@ export var getO2ClassicSkin = function() {
             controlError: palette.pepper,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.o2GemLight30,
-            loadingBarBackgroundInverse: palette.o2GemLight30,
-            loadingBarInverse: palette.o2Gem,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.white,
@@ -195,8 +193,6 @@ export var getO2ClassicSkin = function() {
             controlActivated: palette.o2Gem,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.darkModeGrey,
-            loadingBarInverse: palette.o2SkyBlue,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.grey2,

package/dist-es/skins/o2.js

@@ -97,8 +97,6 @@ export var getO2Skin = function() {
             controlError: palette.pepper,
             loadingBar: palette.o2BluePrimary,
             loadingBarBackground: palette.grey1,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.o2BluePrimary,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
@@ -189,8 +187,6 @@ export var getO2Skin = function() {
             controlActivated: palette.o2BluePrimary30,
             loadingBar: palette.darkModeO2BluePrimary,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.darkModeO2BluePrimary,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2BlueLight30,
             iosControlKnob: palette.grey2,

package/dist-es/skins/telefonica.js

@@ -92,8 +92,6 @@ export var getTelefonicaSkin = function() {
             controlError: palette.coral,
             loadingBar: palette.telefonicaBlue30,
             loadingBarBackground: palette.telefonicaBlue70,
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
@@ -102,7 +100,7 @@ export var getTelefonicaSkin = function() {
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
             // FEEDBACKS
-            badge: palette.coral80,
+            badge: palette.coral70,
             feedbackErrorBackground: palette.coral,
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
@@ -182,8 +180,6 @@ export var getTelefonicaSkin = function() {
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: applyAlpha(palette.white, 0.05),
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.grey1,
             iosControlKnob: palette.grey2,

package/dist-es/skins/vivo.js

@@ -91,8 +91,6 @@ export var getVivoSkin = function() {
             controlError: palette.pepper,
             loadingBar: palette.pink,
             loadingBarBackground: palette.pepperLight30,
-            loadingBarBackgroundInverse: palette.vivoPurpleLight50,
-            loadingBarInverse: palette.vivoPurple,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             iosControlKnob: palette.white,
@@ -183,8 +181,6 @@ export var getVivoSkin = function() {
             controlActivated: palette.vivoPurpleLight80,
             loadingBar: palette.vivoPurpleLight80,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.vivoPurpleLight80,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight50,
             iosControlKnob: palette.grey2,

package/dist-es/tag.js

@@ -6,6 +6,7 @@ import { createUseStyles } from './jss';
 import { Text } from './text';
 import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 import { pxToRem } from './utils/css';
+import { getPrefixedDataAttributes } from './utils/dom';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -14,6 +15,19 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -41,6 +55,21 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -74,7 +103,7 @@ var useStyles = createUseStyles(function() {
     };
 });
 var Tag = function(param) {
-    var Icon = param.Icon, children = param.children, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
+    var Icon = param.Icon, children = param.children, dataAttributes = param.dataAttributes, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
     var classes = useStyles({
         hasIcon: !!Icon
     });
@@ -137,7 +166,7 @@ var Tag = function(param) {
     };
     var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor1 = _type1[0], backgroundColor = _type1[1];
     var shouldUseInverseBackground = isInverse && !isDarkMode;
-    return(/*#__PURE__*/ _jsxs("span", {
+    return(/*#__PURE__*/ _jsxs("span", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
         className: classes.tag,
         style: {
             background: shouldUseInverseBackground ? colors.inverse : backgroundColor
@@ -162,6 +191,6 @@ var Tag = function(param) {
                 })
             })
         ]
-    }));
+    })));
 };
 export default Tag;

package/dist-es/text-link.js

@@ -5,6 +5,8 @@ import Touchable from './touchable';
 import classnames from 'classnames';
 import { useIsInverseVariant } from './theme-variant-context';
 import { useForm } from './form-context';
+import { getTextFromChildren } from './utils/common';
+import { eventActions, eventCategories } from './utils/analytics';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -94,8 +96,14 @@ var TextLink = function(_param) {
     var classes = useStyles();
     var isInverse = useIsInverseVariant();
     var formStatus = useForm().formStatus;
+    var _trackingEvent;
     var _obj;
     return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: eventCategories.userInteraction,
+            action: eventActions.linkTapped,
+            label: getTextFromChildren(children)
+        } : undefined,
         disabled: disabled || formStatus === 'sending',
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children

package/dist-es/text.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { createUseStyles } from './jss';
 import { useIsInverseVariant } from './theme-variant-context';
 import { pxToRem } from './utils/css';
+import { getPrefixedDataAttributes } from './utils/dom';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -116,7 +117,7 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 export var Text = function(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'];
+    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'], dataAttributes = param.dataAttributes;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -137,12 +138,12 @@ export var Text = function(param) {
         return null;
     }
     var className = classnames(classes.text, _defineProperty({}, classes.truncate, !!truncate));
-    return(/*#__PURE__*/ React.createElement(as, {
+    return(/*#__PURE__*/ React.createElement(as, _objectSpread({
         className: className,
         id: id,
         role: role,
         'aria-level': ariaLevel
-    }, children));
+    }, getPrefixedDataAttributes(dataAttributes)), children));
 };
 var getRegularOrMediumWeight = function(props) {
     return props.regular && 'regular' || props.medium && 'medium';

package/dist-es/utils/analytics.js

@@ -0,0 +1,6 @@
+export var eventCategories = {
+    userInteraction: 'user_interaction'
+};
+export var eventActions = {
+    linkTapped: 'link_tapped'
+};

package/dist-es/utils/common.js

@@ -16,3 +16,12 @@ export var combineRefs = function() {
         });
     };
 };
+export var getTextFromChildren = function(children) {
+    var text = '';
+    React.Children.forEach(children, function(child) {
+        if (typeof child === 'string') {
+            text += child;
+        }
+    });
+    return text;
+};

package/dist-es/video.js

@@ -3,6 +3,35 @@ import * as React from 'react';
 import { useDisableBorderRadius } from './image';
 import { createUseStyles } from './jss';
 import { combineRefs } from './utils/common';
+import { getPrefixedDataAttributes } from './utils/dom';
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -56,14 +85,15 @@ 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, props = _objectWithoutProperties(_param, [
+    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, [
         "src",
         "poster",
         "autoPlay",
         "muted",
         "loop",
         "preload",
-        "aspectRatio"
+        "aspectRatio",
+        "dataAttributes"
     ]);
     var noBorderRadius = useDisableBorderRadius();
     var classes = useStyles({
@@ -103,7 +133,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ _jsx("video", {
+    return(/*#__PURE__*/ _jsx("video", _objectSpread({
         ref: combineRefs(ref, videoRef),
         playsInline: true,
         disablePictureInPicture: true,
@@ -116,7 +146,8 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL,
+        poster: poster || TRANSPARENT_PIXEL
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
             /*#__PURE__*/ return _jsx("source", {
@@ -124,6 +155,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 type: type
             }, index);
         })
-    }));
+    })));
 });
 export default Video;

package/package.json

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