@telefonica/mistica 10.16.0 → 10.20.0

package/dist-es/skins/vivo.js

@@ -1,5 +1,7 @@
 import { applyAlpha } from '../utils/color';
 import { VIVO_SKIN } from './constants';
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/vivo-constants.json
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/vivo-skin-schema.json
 export var palette = {
     vivoPurple: '#660099',
     vivoPurpleDark: '#461E5F',
@@ -9,16 +11,21 @@ export var palette = {
     vivoPurpleLight20: '#E0CCEB',
     vivoPurpleLight10: '#EFE5F4',
     vivoGreen: '#99CC33',
-    vivoGreenDark: '#33A14A',
-    vivoGreenLight40: '#D6EAAD',
+    vivoGreenDark: '#225C3D',
+    vivoGreenLight30: '#91AE9E',
+    vivoGreenLight10: '#EDF8E8',
     vivoBlue: '#00ABDB',
     orange: '#FF9900',
-    orangeDark: '#FA6324',
-    orangeLight: '#FFD699',
+    orangeDark: '#972A1D',
+    orangeLight10: '#FFEFE1',
+    orangeLight40: '#FFB84C',
     pink: '#EB3D7D',
     pepper: '#CC1F59',
     pepperDark: '#B71D63',
+    pepperDark80: '#8F2052',
+    pepperLight40: '#DB628B',
     pepperLight30: '#F7B1CB',
+    pepperLight10: '#FCE4EF',
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
@@ -121,7 +128,20 @@ export var getVivoSkin = function() {
             textNavigationSearchBarHint: palette.vivoPurpleLight50,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.vivoPurple
+            textAppBarSelected: palette.vivoPurple,
+            // TAGS
+            tagBackgroundSuccess: palette.vivoGreenLight10,
+            tagBackgroundWarning: palette.orangeLight10,
+            tagBackgroundError: palette.pepperLight10,
+            tagBackgroundPromo: palette.vivoPurpleLight10,
+            tagBackgroundActive: palette.vivoPurpleLight10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.vivoGreenDark,
+            textTagWarning: palette.orangeDark,
+            textTagError: palette.pepperDark80,
+            textTagPromo: palette.vivoPurple,
+            textTagActive: palette.vivoPurple,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -189,7 +209,20 @@ export var getVivoSkin = function() {
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: applyAlpha(palette.white, 0.05),
+            tagBackgroundError: applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.vivoGreenLight30,
+            textTagWarning: palette.orangeLight40,
+            textTagError: palette.pepperLight40,
+            textTagPromo: palette.vivoPurpleLight50,
+            textTagActive: palette.vivoPurpleLight50,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist-es/tag.js

@@ -1,46 +1,150 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from './box';
 import { useTheme } from './hooks';
 import { createUseStyles } from './jss';
 import { Text } from './text';
-import { ThemeVariant } from './theme-variant-context';
+import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
+import { pxToRem } from './utils/css';
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
 var useStyles = createUseStyles(function() {
     return {
         tag: {
-            backgroundColor: function(param) {
-                var color = param.color;
-                return color;
-            },
-            padding: '2px 8px',
-            borderRadius: 2,
-            minWidth: 48,
             display: 'inline-flex',
+            flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'center'
+            borderRadius: 50,
+            justifyContent: 'center',
+            minWidth: 56,
+            padding: function(param) {
+                var hasIcon = param.hasIcon;
+                return "4px 12px 4px ".concat(hasIcon ? 8 : 12, "px");
+            },
+            // FIXME: remove this style and use an inline style for the icon once WEB-338 gets merged
+            '& svg': {
+                display: 'block'
+            }
         }
     };
 });
 var Tag = function(param) {
-    var children = param.children, color = param.color;
+    var Icon = param.Icon, children = param.children, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
     var classes = useStyles({
-        color: color
+        hasIcon: !!Icon
     });
     var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
-    // Hardcode black text in darkmode because there isn't a black text color constant that we can use in dark mode
-    var blackText = isDarkMode ? '#313235' : colors.textPrimary;
-    var textColor = color === colors.inverse ? blackText : colors.textPrimaryInverse;
-    return(/*#__PURE__*/ _jsx("span", {
-        className: classes.tag,
-        children: /*#__PURE__*/ _jsx(ThemeVariant, {
+    var isInverse = useIsInverseVariant();
+    if (!children) {
+        return null;
+    }
+    /**
+     * Legacy implementation
+     *
+     * @deprecated to be removed in the next major version
+     */ if (color) {
+        // Hardcode black text in darkmode because there isn't a black text color constant that we can use in dark mode
+        var blackText = isDarkMode ? '#313235' : colors.textPrimary;
+        var textColor = color === colors.inverse ? blackText : colors.textPrimaryInverse;
+        return(/*#__PURE__*/ _jsx(ThemeVariant, {
             isInverse: false,
-            children: /*#__PURE__*/ _jsx(Text, {
-                color: textColor,
-                size: 12,
-                lineHeight: 16,
-                weight: "regular",
-                uppercase: true,
-                children: children
+            children: /*#__PURE__*/ _jsx("span", {
+                className: classes.tag,
+                style: {
+                    background: color
+                },
+                children: /*#__PURE__*/ _jsx(Text, {
+                    color: textColor,
+                    size: 14,
+                    lineHeight: 20,
+                    weight: "medium",
+                    truncate: true,
+                    children: children
+                })
+            })
+        }));
+    }
+    var tagTypeToColors = {
+        promo: [
+            colors.textTagPromo,
+            colors.tagBackgroundPromo
+        ],
+        active: [
+            colors.textTagActive,
+            colors.tagBackgroundActive
+        ],
+        inactive: [
+            colors.textTagInactive,
+            colors.tagBackgroundInactive
+        ],
+        success: [
+            colors.textTagSuccess,
+            colors.tagBackgroundSuccess
+        ],
+        warning: [
+            colors.textTagWarning,
+            colors.tagBackgroundWarning
+        ],
+        error: [
+            colors.textTagError,
+            colors.tagBackgroundError
+        ]
+    };
+    var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];
+    var shouldUseInverseBackground = isInverse && !isDarkMode;
+    return(/*#__PURE__*/ _jsxs("span", {
+        className: classes.tag,
+        style: {
+            background: shouldUseInverseBackground ? colors.inverse : backgroundColor
+        },
+        children: [
+            Icon && /*#__PURE__*/ _jsx(Box, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    color: textColor,
+                    size: pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ _jsx(ThemeVariant, {
+                isInverse: false,
+                children: /*#__PURE__*/ _jsx(Text, {
+                    color: textColor,
+                    size: 14,
+                    lineHeight: 20,
+                    weight: "medium",
+                    truncate: true,
+                    children: children
+                })
             })
-        })
+        ]
     }));
 };
 export default Tag;

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

@@ -281,7 +281,7 @@ var useStyles = createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, ["error", "helperText", "label", "inputProps", "inputRef", "defaultValue", "value", "onFocus", "onBlur", "inputComponent", "prefix", "startIcon", "endIcon", "endIconOverlay", "shrinkLabel", "multiline", "focus", "fieldRef", "maxLength", "id",
         "autoComplete", "fullWidth"]);
     var id = useAriaId(idProp);
@@ -433,6 +433,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         ]
     }));
 });
+export { TextFieldBase };
 var useSuggestionsStyles = createUseStyles(function() {
     return {
         menuItem: {
@@ -465,7 +466,7 @@ var useSuggestionsStyles = createUseStyles(function() {
 var Autosuggest = /*#__PURE__*/ React.lazy(function() {
     return import(/* webpackChunkName: "react-autosuggest" */ 'react-autosuggest');
 });
-var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _objectWithoutProperties(_param, ["getSuggestions", "id"
     ]);
     var ref1 = _slicedToArray(React.useState([]), 2), suggestions = ref1[0], setSuggestions = ref1[1];
@@ -478,7 +479,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         throw Error('Fields with suggestions must be used in controlled mode');
     }
     return getSuggestions ? /*#__PURE__*/ _jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
+        fallback: /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
         }, props, {
             // This label override while loading is needed in acceptance tests because
             // while the test is typing, the component could be remounted.
@@ -511,7 +512,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }
             }),
             renderInputComponent: function(inputProps) {
-                /*#__PURE__*/ return _jsx(TextFieldBaseComponent, _objectSpread({
+                /*#__PURE__*/ return _jsx(TextFieldBase, _objectSpread({
                 }, inputProps, {
                     inputRef: combineRefs(inputRef, props.inputRef, ref)
                 }));
@@ -551,10 +552,10 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }));
             }
         })
-    }) : /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
+    }) : /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
     }, props, {
         id: id,
         ref: ref
     }));
 });
-export default TextFieldBase;
+export { TextFieldBaseAutosuggest };

package/dist-es/text-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { combineRefs } from './utils/common';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
@@ -105,7 +105,7 @@ var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onClick: onPress,
         inputRef: combineRefs(inputRef, fieldProps.inputRef, ref),

package/dist-es/text.js

@@ -52,7 +52,7 @@ var useStyles = createUseStyles(function(theme) {
         }
         return 'initial';
     };
-    var _color, _textDecoration;
+    var _color, _decoration;
     return {
         text: _defineProperty({
             lineHeight: function(param) {
@@ -60,8 +60,14 @@ var useStyles = createUseStyles(function(theme) {
                 return pxToRem(desktopLineHeight);
             },
             textTransform: function(param) {
-                var uppercase = param.uppercase;
-                return uppercase ? 'uppercase' : 'inherit';
+                var uppercase = param.uppercase, transform = param.transform;
+                if (uppercase) {
+                    return 'uppercase';
+                }
+                if (transform) {
+                    return transform;
+                }
+                return 'inherit';
             },
             fontSize: function(param) {
                 var desktopSize = param.desktopSize;
@@ -76,7 +82,7 @@ var useStyles = createUseStyles(function(theme) {
                 return isInverse ? (_color = inverseColorsMap[color]) !== null && _color !== void 0 ? _color : color : color;
             },
             textDecoration: function(p) {
-                return (_textDecoration = p.textDecoration) !== null && _textDecoration !== void 0 ? _textDecoration : 'inherit';
+                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : 'inherit';
             },
             letterSpacing: function(param) {
                 var letterSpacing = param.letterSpacing;
@@ -112,7 +118,7 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 export var Text = function(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, truncate = param.truncate, uppercase = param.uppercase, 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'];
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -122,8 +128,9 @@ export var Text = function(param) {
         desktopLineHeight: desktopLineHeight,
         weight: weight,
         color: color,
-        textDecoration: textDecoration,
+        decoration: decoration,
         uppercase: uppercase,
+        transform: transform,
         wordBreak: wordBreak,
         letterSpacing: letterSpacing,
         truncate: truncate

package/dist-es/video.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useDisableBorderRadius } from './image';
+import { createUseStyles } from './jss';
+import { combineRefs } from './utils/common';
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {
+    };
+    var target = {
+    };
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+export var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+var useStyles = createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function(param) {
+                var aspectRatio = param.aspectRatio;
+                return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : 'unset';
+            }
+        }
+    };
+});
+/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
+var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var src = _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, ["src", "poster", "autoPlay", "muted", "loop", "preload", "aspectRatio"]);
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var videoRef = React.useRef(null);
+    React.useEffect(function() {
+        var video = videoRef.current;
+        if (video && autoPlay && video.paused) {
+            video.play();
+        }
+    }, [
+        autoPlay
+    ]);
+    // normalize sources
+    var sources = (Array.isArray(src) ? src : [
+        src
+    ]).map(function(source) {
+        if (typeof source === 'string') {
+            return {
+                src: source
+            };
+        } else {
+            return source;
+        }
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
+        height = props.width / RATIO[aspectRatio];
+    } else if (props.height !== undefined) {
+        width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
+    }
+    return(/*#__PURE__*/ _jsx("video", {
+        ref: combineRefs(ref, videoRef),
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        autoPlay: autoPlay,
+        muted: muted,
+        loop: loop,
+        width: width,
+        height: height,
+        className: classes.video,
+        preload: preload,
+        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
+        poster: poster || TRANSPARENT_PIXEL,
+        children: sources.map(function(param, index) {
+            var src = param.src, type = param.type;
+            /*#__PURE__*/ return _jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+export default Video;

package/package.json

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