@telefonica/mistica 12.5.0 → 12.7.0

package/dist-es/skeletons.js

@@ -32,12 +32,13 @@ import * as React from "react";
 import SkeletonBase from "./skeleton-base";
 import { createUseStyles } from "./jss";
 import Stack from "./stack";
-import classNames from "classnames";
 import { getPrefixedDataAttributes } from "./utils/dom";
 var transition = "1.5s linear";
 var useAnimation = createUseStyles(function() {
     return {
         animation: {
+            width: "100%",
+            height: "100%",
             animation: "$pulse ".concat(transition, " infinite")
         },
         "@keyframes pulse": {
@@ -53,73 +54,50 @@ var useAnimation = createUseStyles(function() {
         }
     };
 });
-var useSkeletonStyles = createUseStyles(function() {
-    return {
-        wrap: {
-            borderRadius: 8,
-            height: function(param) {
-                var _height = param.height, height = _height === void 0 ? 8 : _height;
-                return height;
-            },
-            width: function(param) {
-                var _width = param.width, width = _width === void 0 ? "100%" : _width;
-                return width;
-            }
-        }
-    };
-});
-export var SkeletonLine = function(param) {
-    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+var SkeletonAnimation = function(param) {
+    var children = param.children, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
     var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width
-    });
     return /*#__PURE__*/ _jsx("div", _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        className: animationClasses.animation,
         role: "status",
+        "aria-busy": true,
         "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
         "aria-label": ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
-        children: /*#__PURE__*/ _jsx(SkeletonBase, {})
+        children: children
+    }));
+};
+export var SkeletonLine = function(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {
+            width: width
+        })
     }));
 };
 export var SkeletonText = function(param) {
     var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        height: "fit-content"
-    });
-    return /*#__PURE__*/ _jsxs(Stack, _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
-        space: 16,
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ _jsx(SkeletonBase, {}),
-            /*#__PURE__*/ _jsx(SkeletonBase, {}),
-            /*#__PURE__*/ _jsx(SkeletonBase, {
-                width: "75%"
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            space: 16,
+            children: [
+                /*#__PURE__*/ _jsx(SkeletonBase, {}),
+                /*#__PURE__*/ _jsx(SkeletonBase, {}),
+                /*#__PURE__*/ _jsx(SkeletonBase, {
+                    width: "75%"
+                })
+            ]
+        })
     }));
 };
 export var SkeletonCircle = function(param) {
     var ariaLabel = param.ariaLabel, _size = param.size, size = _size === void 0 ? 40 : _size, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: size,
-        height: size
-    });
-    return /*#__PURE__*/ _jsx("div", _objectSpread({
-        className: classNames(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ _jsx(SkeletonBase, {
             height: size,
@@ -147,46 +125,31 @@ var useSkeletonRowStyles = createUseStyles(function() {
 });
 export var SkeletonRow = function(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
     var rowClass = useSkeletonRowStyles();
-    return /*#__PURE__*/ _jsxs("div", _objectSpread({
-        className: classNames(animationClasses.animation, styleClass.wrap, rowClass.row),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ _jsx(SkeletonBase, {
-                height: 40,
-                width: 40,
-                radius: "50%",
-                className: rowClass.circle
-            }),
-            /*#__PURE__*/ _jsx(SkeletonBase, {
-                width: width,
-                className: rowClass.line
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: rowClass.row,
+            children: [
+                /*#__PURE__*/ _jsx(SkeletonBase, {
+                    height: 40,
+                    width: 40,
+                    radius: "50%",
+                    className: rowClass.circle
+                }),
+                /*#__PURE__*/ _jsx(SkeletonBase, {
+                    width: width,
+                    className: rowClass.line
+                })
+            ]
+        })
     }));
 };
 export var SkeletonRectangle = function(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
-    return /*#__PURE__*/ _jsx("div", _objectSpread({
-        className: classNames(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": true,
-        "aria-busy": true,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ _jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ _jsx(SkeletonBase, {
             height: height,

package/dist-es/skins/o2.js

@@ -69,7 +69,7 @@ export var getO2Skin = function() {
             buttonDangerBackground: palette.pepper,
             buttonDangerBackgroundSelected: palette.pepper60,
             buttonDangerBackgroundHover: palette.pepper60,
-            buttonLinkBackgroundSelected: palette.o2BluePrimary15,
+            buttonLinkBackgroundSelected: palette.o2BluePrimary10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2BluePrimary,
             buttonPrimaryBackgroundInverse: palette.white,

package/dist-es/text-field-base.js

@@ -104,8 +104,8 @@ import * as React from "react";
 import { createUseStyles } from "./jss";
 import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from "./text-field-components";
 import { Text3 } from "./text";
-import { isIos, isRunningAcceptanceTest, isFirefox } from "./utils/platform";
-import { useAriaId, useTheme, useScreenSize } from "./hooks";
+import { isIos, isRunningAcceptanceTest, isFirefox, isSafari } from "./utils/platform";
+import { useAriaId, useTheme, useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
 import classNames from "classnames";
 import { combineRefs } from "./utils/common";
 var commonInputStyles = function(theme) {
@@ -173,6 +173,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         textArea: _objectSpread((_obj = {
             resize: "none",
+            padding: 0,
             marginTop: function(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -270,7 +271,10 @@ var useStyles = createUseStyles(function(theme) {
             position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: "baseline",
+            alignSelf: function(param) {
+                var prefixAlignSelf = param.prefixAlignSelf;
+                return prefixAlignSelf;
+            },
             paddingTop: function(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -315,7 +319,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "fullWidth"
     ]);
     var id = useAriaId(idProp);
-    var _$ref3 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref3[0], setInputState = _$ref3[1];
+    var _$ref4 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref4[0], setInputState = _$ref4[1];
     var colors = useTheme().colors;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var _$ref1;
@@ -324,6 +328,18 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // this shrinkLabel override is a workaround because I was unable to find a way to hide date
     // and date-time native placeholders when the input is not required
     var shrinkLabel = shrinkLabelProp || (rest.type === "date" || rest.type === "datetime-local" || rest.type === "month") && !rest.required;
+    var _$ref3 = _slicedToArray(React.useState("baseline"), 2), prefixAlignSelf = _$ref3[0], setPrefixAlignSelf = _$ref3[1];
+    useIsomorphicLayoutEffect(function() {
+        /**
+             * Safari check to workaround https://jira.tid.es/browse/WEB-648
+             * For some reason it is super hard to align the prefix text with the input text
+             * and get the same result in chrome and safari
+             *
+             * Using an effect to set the style to avoid problems with SSR
+             */ if (isSafari()) {
+            setPrefixAlignSelf("initial");
+        }
+    }, []);
     var classes = useStyles({
         inputState: inputState,
         error: error,
@@ -334,7 +350,8 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         prefix: prefix,
         multiline: multiline,
         type: rest.type,
-        disabled: rest.disabled
+        disabled: rest.disabled,
+        prefixAlignSelf: prefixAlignSelf
     });
     React.useEffect(function() {
         if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
@@ -393,6 +410,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         multiline: multiline,
         fullWidth: fullWidth,
         fieldRef: fieldRef,
+        readOnly: rest.readOnly,
         children: [
             startIcon && /*#__PURE__*/ _jsx("div", {
                 className: classes.startIcon,
@@ -500,10 +518,10 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
         "getSuggestions",
         "id"
     ]);
-    var _$ref5 = _slicedToArray(React.useState([]), 2), suggestions = _$ref5[0], setSuggestions = _$ref5[1];
+    var _$ref6 = _slicedToArray(React.useState([]), 2), suggestions = _$ref6[0], setSuggestions = _$ref6[1];
     var inputRef = React.useRef(null);
     var classes = useSuggestionsStyles();
-    var _$ref4 = useTheme(), platformOverrides = _$ref4.platformOverrides, texts = _$ref4.texts;
+    var _$ref5 = useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
     var id = useAriaId(idProp);
     var autoSuggestId = useAriaId();
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {

package/dist-es/text-field-components.js

@@ -260,15 +260,19 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
+        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", function(param) {
+            var readOnly = param.readOnly;
+            return readOnly ? theme.colors.neutralLow : theme.colors.backgroundContainer;
+        }), _obj1)
     };
 });
 export var FieldContainer = function(param) {
-    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth;
+    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth, readOnly = param.readOnly;
     var classes = useFieldContainerStyles({
         multiline: multiline,
         fullWidth: fullWidth,
-        disabled: disabled
+        disabled: disabled,
+        readOnly: readOnly
     });
     return /*#__PURE__*/ _jsxs("div", {
         className: classes.fieldContainer,

package/dist-es/text-link.js

@@ -54,6 +54,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 import { jsx as _jsx } from "react/jsx-runtime";
+// Specs: https://www.figma.com/file/koROdh3HpEPG2O8jG52Emh/Buttons-Component-Specs?node-id=0%3A1
 import * as React from "react";
 import { createUseStyles } from "./jss";
 import Touchable from "./touchable";
@@ -69,7 +70,7 @@ var useStyles = createUseStyles(function(param) {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
-            display: "inline-block",
+            display: "inline",
             color: colors.textLink,
             wordBreak: "break-word",
             cursor: "pointer"
@@ -123,6 +124,7 @@ var TextLink = function(_param) {
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
+        as: props.onPress ? "a" : undefined,
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         disabled: disabled || formStatus === "sending",
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),

package/dist-es/theme.js

@@ -204,7 +204,8 @@ export var getTexts = function(locale) {
     }
 };
 export var dimensions = {
-    headerMobileHeight: 56
+    headerMobileHeight: 56,
+    headerDesktopHeight: 80
 };
 export var mediaQueriesConfig = {
     tabletMinWidth: 768,