@telefonica/mistica 10.18.0 → 10.22.0

package/dist-es/button-layout.js

@@ -4,6 +4,7 @@ import { createUseStyles } from './jss';
 import { useScreenSize, useIsomorphicLayoutEffect } from './hooks';
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from './button';
 import classNames from 'classnames';
+import debounce from 'lodash/debounce';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -174,28 +175,29 @@ var buttonsRange = [
 var ButtonLayout = function(param) {
     var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(true), 2), isMeasuring = ref1[0], setIsMeasuring = ref1[1];
     var childrenCount = React.Children.count(children);
-    var ref2 = _slicedToArray(React.useState(0), 2), buttonWidth = ref2[0], setButtonWidth = ref2[1];
-    var updateButtonWidth = function(buttonWidth) {
+    var ref1 = _slicedToArray(React.useState({
+        isMeasuring: true,
+        buttonWidth: 0
+    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    var updateButtonStatus = function(param) {
+        var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
-            setButtonWidth(buttonWidth);
-        }
-    };
-    var updateIsMeasuring = function(isMeasuring) {
-        if (process.env.NODE_ENV !== 'test') {
-            setIsMeasuring(isMeasuring);
+            setButtonStatus({
+                isMeasuring: isMeasuring,
+                buttonWidth: buttonWidth
+            });
         }
     };
     var classes = useStyles({
-        buttonWidth: buttonWidth,
+        buttonWidth: buttonStatus.buttonWidth,
         isTabletOrSmaller: isTabletOrSmaller,
         align: align,
         childrenCount: childrenCount
     });
     var wrapperElRef = React.useRef(null);
     useIsomorphicLayoutEffect(function() {
-        if (isMeasuring) {
+        if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
@@ -210,8 +212,10 @@ var ButtonLayout = function(param) {
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         BUTTON_MIN_WIDTH
                     ])));
-                    updateButtonWidth(maxChildWidth);
-                    updateIsMeasuring(false);
+                    updateButtonStatus({
+                        isMeasuring: false,
+                        buttonWidth: maxChildWidth
+                    });
                 }
             });
             return function() {
@@ -222,11 +226,20 @@ var ButtonLayout = function(param) {
         };
     }, [
         classes.link,
-        isMeasuring
+        buttonStatus
     ]);
-    var calcLayout = React.useCallback(function() {
-        updateButtonWidth(0);
-        updateIsMeasuring(true);
+    /**
+     * Multiple calls to calcLayout are debounced to workaround an issue that can be reproduced in chrome when pressing
+     * the button during a focus/visibility change. For example, pressing the button having the focus on the devTools.
+     */ var calcLayout = React.useMemo(function() {
+        return debounce(function() {
+            updateButtonStatus({
+                isMeasuring: true,
+                buttonWidth: 0
+            });
+        }, 5, {
+            maxWait: 50
+        });
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist-es/button.js

@@ -361,6 +361,11 @@ var Button = function(props) {
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.fake) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             maybe: true
@@ -384,22 +389,25 @@ var Button = function(props) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 };
 var useButtonLinkStyles = createUseStyles(function(theme) {
     var padding = 6;
@@ -456,6 +464,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.onPress) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
@@ -463,7 +476,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -471,7 +484,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -479,8 +492,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 });
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();

package/dist-es/card.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Tag from './tag';
 import Stack from './stack';
@@ -14,8 +14,7 @@ var useCardContentStyles = createUseStyles(function() {
         actions: {
             flex: 1,
             display: 'flex',
-            alignItems: 'flex-end',
-            marginTop: 16
+            alignItems: 'flex-end'
         }
     };
 });
@@ -29,32 +28,30 @@ var CardContent = function(param) {
         }
         if (typeof headline === 'string') {
             return(/*#__PURE__*/ _jsx(Tag, {
-                color: theme.colors.promo,
+                type: "promo",
                 children: headline
             }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return(/*#__PURE__*/ _jsxs(Stack, {
+        space: 16,
         children: [
             /*#__PURE__*/ _jsxs(Stack, {
-                space: 16,
+                space: 8,
                 children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        space: 8,
-                        children: [
-                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ _jsx("header", {
-                                children: /*#__PURE__*/ _jsxs(Stack, {
+                    (headline || pretitle || title || subtitle) && /*#__PURE__*/ _jsx("header", {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            space: 16,
+                            children: [
+                                renderHeadline(),
+                                /*#__PURE__*/ _jsxs(Stack, {
                                     space: 4,
                                     children: [
-                                        renderHeadline(),
-                                        pretitle && /*#__PURE__*/ _jsx(Box, {
-                                            paddingTop: 4,
-                                            children: /*#__PURE__*/ _jsx(Text1, {
-                                                regular: true,
-                                                uppercase: true,
-                                                children: pretitle
-                                            })
+                                        pretitle && /*#__PURE__*/ _jsx(Text1, {
+                                            regular: true,
+                                            uppercase: true,
+                                            children: pretitle
                                         }),
                                         /*#__PURE__*/ _jsx(Text4, {
                                             as: "h1",
@@ -67,20 +64,20 @@ var CardContent = function(param) {
                                         })
                                     ]
                                 })
-                            }),
-                            description && /*#__PURE__*/ _jsx(Text2, {
-                                as: "p",
-                                regular: true,
-                                color: theme.colors.textSecondary,
-                                children: description
-                            })
-                        ]
+                            ]
+                        })
                     }),
-                    extra && /*#__PURE__*/ _jsx("div", {
-                        children: extra
+                    description && /*#__PURE__*/ _jsx(Text2, {
+                        as: "p",
+                        regular: true,
+                        color: theme.colors.textSecondary,
+                        children: description
                     })
                 ]
             }),
+            extra && /*#__PURE__*/ _jsx("div", {
+                children: extra
+            }),
             (button || buttonLink) && /*#__PURE__*/ _jsx("div", {
                 className: classes.actions,
                 children: /*#__PURE__*/ _jsx(ButtonGroup, {

package/dist-es/chip.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createUseStyles } from './jss';
+import { useTheme } from './hooks';
+import Box from './box';
+import { Text2 } from './text';
+import IconButton from './icon-button';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import { pxToRem } from './utils/css';
+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;
+}
+var useStyles = createUseStyles(function(param) {
+    var colors = param.colors, mq = param.mq;
+    return {
+        container: _defineProperty({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: "1px solid ".concat(colors.border),
+            borderRadius: 20,
+            backgroundColor: colors.backgroundContainer,
+            minHeight: 32,
+            minWidth: 56,
+            cursor: 'default',
+            color: colors.neutralMedium,
+            '& > span': {
+                color: colors.textPrimary
+            }
+        }, mq.supportsHover, {
+            '&:hover': {
+                borderColor: function(param) {
+                    var isDarkMode = param.isDarkMode;
+                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                },
+                color: colors.controlActivated,
+                backgroundColor: colors.tagBackgroundActive
+            },
+            '&:hover > span': {
+                color: colors.textLink
+            }
+        })
+    };
+});
+var Chip = function(param) {
+    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+    var ref = useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
+    var classes = useStyles({
+        isDarkMode: isDarkMode
+    });
+    return(/*#__PURE__*/ _jsxs(Box, {
+        className: classes.container,
+        paddingLeft: Icon ? 8 : 12,
+        paddingRight: onClose ? 0 : 12,
+        children: [
+            Icon && /*#__PURE__*/ _jsx(Box, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    color: "currentColor",
+                    size: pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ _jsx(Text2, {
+                medium: true,
+                truncate: 1,
+                color: "currentColor",
+                children: children
+            }),
+            onClose ? /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 4,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    size: 24,
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    },
+                    "aria-label": texts.closeButtonLabel,
+                    onPress: function() {
+                        return onClose();
+                    },
+                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                        size: 16,
+                        color: "currentColor"
+                    })
+                })
+            }) : null
+        ]
+    }));
+};
+export default Chip;

package/dist-es/icons/icon-success.js

@@ -59,21 +59,29 @@ var IconSuccessO2 = function(param) {
         children: /*#__PURE__*/ _jsxs("g", {
             className: classnames(_defineProperty({
             }, classes.iconContainer, !color)),
-            strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
                 /*#__PURE__*/ _jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    strokeMiterlimit: "10",
-                    d: "M21.7,35.6l2.8,2.8c1.1,1.1,2.9,1.1,4.1,0l17.3-17.3"
-                }, !skipAnimation && mergeProperties(getAnimateDrawLineProps('33', '0.9s', platformOverrides), getAnimateHopInProps('0.9s', platformOverrides)))),
+                    d: "M45.64 53.84A25.599 25.599 0 0 1 32 57.75C17.78 57.75 6.25 46.22 6.25 32S17.78 6.25 32 6.25 57.75 17.78 57.75 32c0 5.13-1.5 9.92-4.09 13.93"
+                }, !skipAnimation && getAnimateDrawLineProps('202', '0.3s', platformOverrides))),
                 /*#__PURE__*/ _jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
+                    stroke: color ? color : undefined,
+                    d: "m19.33 30.39 9.88 10.95 18.13-19.23"
+                }, !skipAnimation && mergeProperties(getAnimateDrawLineProps('44', '0.6s', platformOverrides), getAnimateHopInProps('0.6', platformOverrides)))),
+                /*#__PURE__*/ _jsx("circle", _objectSpread({
+                    fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    d: "M49.1,57.9C44.2,61.1,38.3,63,32,63C14.9,63,1,49.1,1,32C1,14.9,14.9,1,32,1c17.1,0,31,13.9,31,31c0,7.5-2.6,14.3-7.1,19.7"
-                }, !skipAnimation && getAnimateDrawLineProps('186', '0.5s', platformOverrides)))
+                    cx: "50.18",
+                    cy: "50.1",
+                    r: ".89"
+                }, !skipAnimation && getAnimateDrawLineProps('180', '0.2s', platformOverrides)))
             ]
         })
     }));

package/dist-es/image.js

@@ -68,7 +68,7 @@ export var RATIO = {
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
-var Image = function(_param) {
+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, ["aspectRatio", "alt"]);
     var noBorderRadius = useDisableBorderRadius();
     var classes = useStyles({
@@ -89,11 +89,12 @@ var Image = function(_param) {
         width = '100%';
     }
     return(/*#__PURE__*/ _jsx("img", {
+        ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
     }));
-};
+});
 export default Image;

package/dist-es/index.js

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Chip } from './chip';
 export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';

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.18.0';
+export var PACKAGE_VERSION = '10.22.0';

package/dist-es/skins/blau.js

@@ -1,5 +1,7 @@
 import { applyAlpha } from '../utils/color';
 import { BLAU_SKIN } from './constants';
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/blau-constants.json
+// https://github.com/Telefonica/mistica-design/blob/production/tokens/blau-skin-schema.json
 export var palette = {
     blauBluePrimary: '#00B6F1',
     blauBluePrimary10: '#F7FDFF',
@@ -15,16 +17,19 @@ export var palette = {
     blauPurple30: '#BB89D9',
     blauYellow: '#FFA922',
     blauYellow10: '#FFF6E9',
+    blauYellow40: '#FFC364',
     blauYellow60: '#F09500',
     blauYellow70: '#996614',
+    blauGreen: '#30D300',
+    blauGreen10: '#EAFBE5',
+    blauGreen30: '#97E980',
+    blauGreen70: '#1D7F00',
     blauRed: '#F64417',
     blauRed10: '#FEECE8',
     blauRed20: '#FCC7B9',
     blauRed30: '#FA9E87',
+    blauRed40: '#F97C5D',
     blauRed70: '#C93712',
-    blauGreen: '#30D300',
-    blauGreen10: '#EAFBE5',
-    blauGreen70: '#1D7F00',
     grey1: '#F5F9FA',
     grey2: '#E7E7E7',
     grey3: '#B8B8B8',
@@ -126,7 +131,20 @@ export var getBlauSkin = function() {
             textNavigationSearchBarHint: palette.blauBlueSecondary20,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.blauBlueSecondary60
+            textAppBarSelected: palette.blauBlueSecondary60,
+            // TAGS
+            tagBackgroundSuccess: palette.blauGreen10,
+            tagBackgroundWarning: palette.blauYellow10,
+            tagBackgroundError: palette.blauRed10,
+            tagBackgroundPromo: palette.blauPurple10,
+            tagBackgroundActive: palette.blauBlueSecondary10,
+            tagBackgroundInactive: palette.grey2,
+            textTagSuccess: palette.blauGreen70,
+            textTagWarning: palette.blauYellow70,
+            textTagError: palette.blauRed70,
+            textTagPromo: palette.blauPurple,
+            textTagActive: palette.blauBlueSecondary,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             // BACKGROUNDS
@@ -188,7 +206,20 @@ export var getBlauSkin = 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.blauGreen30,
+            textTagWarning: palette.blauYellow40,
+            textTagError: palette.blauRed40,
+            textTagPromo: palette.blauPurple30,
+            textTagActive: palette.blauBluePrimary30,
+            textTagInactive: palette.grey4
         }
     };
 };