@telefonica/mistica 12.1.0 → 12.3.0

package/dist-es/skeleton-base.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsInverseVariant } from "./theme-variant-context";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import classnames from "classnames";
+var useSkeletonBaseStyles = createUseStyles(function(param1) {
+    var colors = param1.colors;
+    return {
+        skeletonBase: {
+            borderRadius: function(param) {
+                var radius = param.radius;
+                return radius;
+            },
+            height: function(param) {
+                var height = param.height;
+                return height;
+            },
+            width: function(param) {
+                var width = param.width;
+                return width;
+            },
+            background: function(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? colors.backgroundSkeletonInverse : colors.backgroundSkeleton;
+            }
+        }
+    };
+});
+var SkeletonBase = function(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? 8 : _height, _radius = param.radius, radius = _radius === void 0 ? 8 : _radius, className = param.className;
+    var isInverse = useIsInverseVariant();
+    var classes = useSkeletonBaseStyles({
+        isInverse: isInverse,
+        width: width,
+        height: height,
+        radius: radius
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: classnames(classes.skeletonBase, className),
+        "aria-hidden": true
+    });
+};
+export default SkeletonBase;

package/dist-es/skeletons.js

@@ -0,0 +1,196 @@
+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";
+// https://www.figma.com/file/w7E0mmB92eio0zHw7h9iS2/%5BREADY%5D-Skeletons-Specs?node-id=986%3A1161
+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: {
+            animation: "$pulse ".concat(transition, " infinite")
+        },
+        "@keyframes pulse": {
+            "0%": {
+                opacity: 1
+            },
+            "50%": {
+                opacity: 0.5
+            },
+            "100%": {
+                opacity: 1
+            }
+        }
+    };
+});
+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 animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width
+    });
+    return /*#__PURE__*/ _jsx("div", _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {})
+    }));
+};
+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
+    }, getPrefixedDataAttributes(dataAttributes), {
+        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
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {
+            height: size,
+            width: size,
+            radius: "50%"
+        })
+    }));
+};
+var useSkeletonRowStyles = createUseStyles(function() {
+    return {
+        row: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        circle: {
+            flexShrink: 0,
+            flexGrow: 0
+        },
+        line: {
+            flexShrink: 1,
+            marginLeft: 16
+        }
+    };
+});
+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
+    }, getPrefixedDataAttributes(dataAttributes), {
+        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
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {
+            height: height,
+            width: width
+        })
+    }));
+};

package/dist-es/skins/blau.js

@@ -174,7 +174,7 @@ export var getBlauSkin = function() {
             textLink: palette.blauPurple30,
             textLinkInverse: palette.blauPurple30,
             // CONTROLS
-            control: palette.darkModeGrey,
+            control: palette.darkModeGrey6,
             loadingBar: palette.blauBluePrimary,
             loadingBarBackground: palette.darkModeGrey,
             toggleAndroidInactive: palette.grey5,

package/dist-es/skins/movistar.js

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

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

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

package/dist-es/skins/o2.js

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

package/dist-es/skins/telefonica.js

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

package/dist-es/skins/utils.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { BLAU_SKIN, TELEFONICA_SKIN, VIVO_SKIN, O2_SKIN, O2_CLASSIC_SKIN, MOVISTAR_SKIN } from "./constants";
 import { getBlauSkin } from "./blau";
 import { getTelefonicaSkin } from "./telefonica";
@@ -26,3 +27,14 @@ export var getSkinByName = function(name, variant) {
             }
     }
 };
+// copied/adapted from https://github.com/gregberge/react-flatten-children/blob/master/src/index.tsx
+export 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;
+    }, []);
+};

package/dist-es/skins/vivo.js

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

package/dist-es/snackbar.js

@@ -63,7 +63,8 @@ import { createUseStyles } from "./jss";
 import Touchable from "./touchable";
 import classNames from "classnames";
 import { isWebViewBridgeAvailable, nativeMessage } from "@tef-novum/webview-bridge";
-import { useElementDimensions, useScreenSize } from "./hooks";
+import { useElementDimensions, useScreenSize, useTheme } from "./hooks";
+import { Text2 } from "./text";
 var PADDING_Y = 14;
 var PADDING_X = 16;
 var TRANSITION_TIME_IN_MS = 300;
@@ -115,9 +116,6 @@ var useStyles = createUseStyles(function(theme) {
             transition: "transform ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out, opacity ").concat(TRANSITION_TIME_IN_MS, "ms ease-in-out")
         },
         snackbarContent: {
-            fontSize: 14,
-            lineHeight: "20px",
-            color: theme.colors.textPrimaryInverse,
             display: "flex",
             flexDirection: function(param) {
                 var isLongButton = param.isLongButton;
@@ -170,6 +168,7 @@ var SnackbarComponent = function(param) {
     var ref1 = useElementDimensions(), buttonWidth = ref1.width, buttonRef = ref1.ref;
     var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
     var longButtonWidth = isDesktopOrBigger ? 160 : 128;
+    var colors = useTheme().colors;
     var classes = useStyles({
         type: type,
         isOpen: isOpen,
@@ -205,7 +204,9 @@ var SnackbarComponent = function(param) {
             children: /*#__PURE__*/ _jsxs("div", {
                 className: classes.snackbarContent,
                 children: [
-                    /*#__PURE__*/ _jsx("span", {
+                    /*#__PURE__*/ _jsx(Text2, {
+                        regular: true,
+                        color: colors.textPrimaryInverse,
                         children: message
                     }),
                     buttonText && /*#__PURE__*/ _jsx(Touchable, {

package/dist-es/tabs.js

@@ -46,6 +46,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();
 }
@@ -67,6 +82,7 @@ import { useAriaId, useElementDimensions } from "./hooks";
 import { Text3 } from "./text";
 import { pxToRem } from "./utils/css";
 import { isRunningAcceptanceTest } from "./utils/platform";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var TAB_MAX_WIDTH = 284;
 var TAB_HEIGHT = 56;
 var LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;
@@ -158,7 +174,7 @@ var useStyles = createUseStyles(function(param1) {
     };
 });
 var Tabs = function(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 = useAriaId();
     var ref = useElementDimensions(), width = ref.width, ref1 = ref.ref;
     var animatedLineRef = React.useRef(null);
@@ -194,11 +210,12 @@ var Tabs = function(param2) {
             }, LINE_ANIMATION_DURATION_MS);
         }
     };
-    return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", _objectSpread({
         id: id,
         role: "tablist",
         ref: ref1,
-        className: classes.outerBorder,
+        className: classes.outerBorder
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ _jsx(ResponsiveLayout, {
             fullWidth: true,
             children: /*#__PURE__*/ _jsxs("div", {
@@ -250,6 +267,6 @@ var Tabs = function(param2) {
                 ]
             })
         })
-    });
+    }));
 };
 export default Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "12.1.0",
+    "version": "12.3.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -79,7 +79,7 @@
         "@telefonica/acceptance-testing": "^2.7.0",
         "@telefonica/eslint-config": "^1.0.7",
         "@telefonica/prettier-config": "^1.1.0",
-        "@telefonica/ts-to-flow": "1.2.0",
+        "@telefonica/ts-to-flow": "1.2.2",
         "@testing-library/jest-dom": "^5.16.3",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",