@telefonica/mistica 12.0.0 → 12.2.0

package/dist/skins/blau.js

@@ -57,7 +57,7 @@ var getBlauSkin = function getBlauSkin() {
             backgroundBrand: palette.blauBluePrimary,
             backgroundOverlay: (0, _color).applyAlpha(palette.blauBlueSecondary, 0.75),
             backgroundSkeleton: palette.grey2,
-            backgroundSkeletonInverse: palette.white,
+            backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.blauBluePrimary,
             backgroundAlternative: palette.blauBluePrimary20,
             backgroundFeedbackBottom: palette.blauBluePrimary,
@@ -178,7 +178,7 @@ var getBlauSkin = function getBlauSkin() {
             textLink: palette.blauPurple30,
             textLinkInverse: palette.blauPurple30,
             // CONTROLS
-            control: palette.darkModeGrey,
+            control: palette.darkModeGrey6,
             loadingBar: palette.blauBluePrimary,
             loadingBarBackground: palette.darkModeGrey,
             toggleAndroidInactive: palette.grey5,

package/dist/skins/movistar.js

@@ -60,7 +60,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             backgroundContainer: palette.white,
             backgroundBrand: palette.movistarBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: palette.movistarBlue55,
             navigationBarBackground: palette.movistarBlue,
             backgroundAlternative: palette.grey1,

package/dist/skins/o2-classic.js

@@ -68,7 +68,7 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             backgroundContainer: palette.white,
             backgroundBrand: "linear-gradient(to bottom, ".concat(palette.o2Blue, ", ").concat(palette.o2GradientSecond, " 51%, ").concat(palette.o2GradientThird, " 72%, ").concat(palette.o2GradientFourth, ")"),
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.o2Blue,
             backgroundAlternative: palette.grey1,

package/dist/skins/o2.js

@@ -58,7 +58,7 @@ var getO2Skin = function getO2Skin() {
             backgroundContainer: palette.white,
             backgroundBrand: palette.o2BluePrimary,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.o2BluePrimary,
             backgroundAlternative: palette.grey1,

package/dist/skins/telefonica.js

@@ -54,7 +54,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             backgroundContainer: palette.white,
             backgroundBrand: palette.telefonicaBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: palette.telefonicaBlue70,
             navigationBarBackground: palette.telefonicaBlue,
             backgroundAlternative: palette.grey1,
@@ -177,7 +177,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.telefonicaBlue,
             textLinkInverse: palette.telefonicaBlue,
-            control: palette.darkModeGrey,
+            control: palette.darkModeGrey6,
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),

package/dist/skins/utils.d.ts

@@ -1,2 +1,4 @@
+import * as React from 'react';
 import type { KnownSkin, KnownSkinName } from './types';
 export declare const getSkinByName: (name: KnownSkinName, variant?: "prominent" | undefined) => KnownSkin;
+export declare const flattenChildren: (children: React.ReactNode) => Array<React.ReactNode>;

package/dist/skins/utils.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.getSkinByName = void 0;
+exports.flattenChildren = exports.getSkinByName = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _constants = require("./constants");
 var _blau = require("./blau");
 var _telefonica = require("./telefonica");
@@ -10,6 +11,27 @@ var _vivo = require("./vivo");
 var _o2 = require("./o2");
 var _o2Classic = require("./o2-classic");
 var _movistar = require("./movistar");
+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 getSkinByName = function getSkinByName(name, variant) {
     switch(name){
         case _constants.BLAU_SKIN:
@@ -32,3 +54,14 @@ var getSkinByName = function getSkinByName(name, variant) {
     }
 };
 exports.getSkinByName = getSkinByName;
+var flattenChildren = function(children) {
+    var childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce(function(flatChildren, child) {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props.children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};
+exports.flattenChildren = flattenChildren;

package/dist/skins/utils.js.flow

@@ -1,7 +1,9 @@
 // @flow
 
+import * as React from "react";
 import type { KnownSkin, KnownSkinName } from "./types";
 declare export var getSkinByName: (
   name: KnownSkinName,
   variant?: "prominent" | void
 ) => KnownSkin;
+declare export var flattenChildren: (children: React.Node) => Array<React.Node>;

package/dist/skins/vivo.js

@@ -52,7 +52,7 @@ var getVivoSkin = function getVivoSkin() {
             backgroundContainer: palette.white,
             backgroundBrand: palette.vivoPurple,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             backgroundFeedbackBottom: palette.vivoPurple,
             navigationBarBackground: palette.vivoPurple,

package/dist/spinner.js

@@ -243,7 +243,6 @@ var Spinner = function Spinner(param) {
                 r: "30",
                 role: "presentation",
                 stroke: color,
-                strokeLinecap: "square",
                 strokeWidth: "6"
             })
         ]

package/dist/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TrackingEvent } from './utils/types';
+import type { DataAttributes, TrackingEvent } from './utils/types';
 export declare type TabsProps = {
     selectedIndex: number;
     onChange: (selectedIndex: number) => void;
@@ -10,6 +10,7 @@ export declare type TabsProps = {
         readonly 'aria-controls'?: string;
     }>;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 declare const Tabs: React.FC<TabsProps>;
 export default Tabs;

package/dist/tabs.js

@@ -13,6 +13,7 @@ var _hooks = require("./hooks");
 var _text = require("./text");
 var _css = require("./utils/css");
 var _platform = require("./utils/platform");
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -87,6 +88,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();
 }
@@ -189,7 +206,7 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
     };
 });
 var Tabs = function Tabs(param2) {
-    var selectedIndex = param2.selectedIndex, onChange = param2.onChange, tabs = param2.tabs;
+    var selectedIndex = param2.selectedIndex, onChange = param2.onChange, tabs = param2.tabs, dataAttributes = param2.dataAttributes;
     var id = (0, _hooks).useAriaId();
     var ref = (0, _hooks).useElementDimensions(), width = ref.width, ref1 = ref.ref;
     var animatedLineRef = React.useRef(null);
@@ -225,11 +242,12 @@ var Tabs = function Tabs(param2) {
             }, LINE_ANIMATION_DURATION_MS);
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
         id: id,
         role: "tablist",
         ref: ref1,
-        className: classes.outerBorder,
+        className: classes.outerBorder
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_responsiveLayout.default, {
             fullWidth: true,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
@@ -281,7 +299,7 @@ var Tabs = function Tabs(param2) {
                 ]
             })
         })
-    });
+    }));
 };
 var _default = Tabs;
 exports.default = _default;

package/dist/tabs.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import type { TrackingEvent } from "./utils/types";
+import type { DataAttributes, TrackingEvent } from "./utils/types";
 export type TabsProps = {
   selectedIndex: number,
   onChange: (selectedIndex: number) => void,
@@ -11,6 +11,7 @@ export type TabsProps = {
     +icon?: React.Node,
     +"aria-controls"?: string,
   }>,
+  dataAttributes?: DataAttributes,
 };
 declare var Tabs: React.ComponentType<TabsProps>;
 declare export default typeof Tabs;

package/dist/text-link.js

@@ -94,25 +94,33 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var useStyles = (0, _jss).createUseStyles(function(theme) {
+var useStyles = (0, _jss).createUseStyles(function(param) {
+    var colors = param.colors, isDarkMode = param.isDarkMode, mq = param.mq;
     var _obj;
     return {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
             display: "inline-block",
-            color: theme.colors.textLink,
-            wordBreak: "break-word"
-        }, _defineProperty(_obj, theme.mq.supportsHover, {
+            color: colors.textLink,
+            wordBreak: "break-word",
+            cursor: "pointer"
+        }, _defineProperty(_obj, mq.supportsHover, {
             "&:hover:not([disabled])": {
                 textDecoration: "underline"
             }
         }), _defineProperty(_obj, "&[disabled]", {
-            opacity: 0.5
+            opacity: 0.5,
+            textDecoration: "none"
         }), _obj),
-        inverse: {
-            color: theme.colors.textLinkInverse
-        },
+        inverse: _defineProperty({
+            color: colors.textLinkInverse,
+            textDecoration: isDarkMode ? "none" : "underline"
+        }, mq.supportsHover, {
+            "&:hover:not([disabled])": {
+                textDecorationThickness: isDarkMode ? 1 : 2
+            }
+        }),
         small: {
             fontSize: 14
         }

package/dist-es/button-group.js

@@ -1,9 +1,38 @@
+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;
+}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
 import classNames from "classnames";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var buttonLayoutSpacing = 16;
-var buttonLinkPadding = 6;
+var buttonLinkPadding = 12;
 var useStyles = createUseStyles(function() {
     return {
         inline: {
@@ -34,14 +63,15 @@ var useStyles = createUseStyles(function() {
     };
 });
 var ButtonGroup = function(param) {
-    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link;
+    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, dataAttributes = param.dataAttributes;
     var anyAction = !!primaryButton || !!secondaryButton || !!link;
     var bothButtons = !!primaryButton && !!secondaryButton;
     var classes = useStyles({
         bothButtons: bothButtons
     });
-    return anyAction ? /*#__PURE__*/ _jsxs("div", {
-        className: classNames(classes.inline, classes.container),
+    return anyAction ? /*#__PURE__*/ _jsxs("div", _objectSpread({
+        className: classNames(classes.inline, classes.container)
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: [
             (primaryButton || secondaryButton) && /*#__PURE__*/ _jsxs("div", {
                 className: classNames(classes.inline, classes.buttons),
@@ -59,6 +89,6 @@ var ButtonGroup = function(param) {
                 children: link
             })
         ]
-    }) : null;
+    })) : null;
 };
 export default ButtonGroup;

package/dist-es/button-layout.js

@@ -55,6 +55,21 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
     throw new TypeError("Invalid attempt to spread 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();
 }
@@ -76,6 +91,7 @@ import { useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from "./button";
 import classNames from "classnames";
 import debounce from "lodash/debounce";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var buttonLayoutSpacing = 16;
 var useStyles = createUseStyles(function(theme) {
     var _obj;
@@ -181,7 +197,7 @@ var buttonsRange = [
     ButtonPrimary
 ];
 var ButtonLayout = function(param1) {
-    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins, dataAttributes = param1.dataAttributes;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -273,9 +289,10 @@ var ButtonLayout = function(param1) {
         return range1 - range2;
     });
     var needsLinkAlignment = !isTabletOrSmaller && align === "left";
-    var content = /*#__PURE__*/ _jsxs("div", {
+    var content = /*#__PURE__*/ _jsxs("div", _objectSpread({
         ref: wrapperElRef,
-        className: classes.container,
+        className: classes.container
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: [
             link ? /*#__PURE__*/ _jsx("div", {
                 className: classNames(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
@@ -283,7 +300,7 @@ var ButtonLayout = function(param1) {
             }) : null,
             sortedButtons
         ]
-    });
+    }));
     return withMargins ? /*#__PURE__*/ _jsx("div", {
         className: classes.margins,
         children: content