@telefonica/mistica 10.14.2 → 10.15.0

package/dist-es/skins/o2.js

@@ -63,40 +63,29 @@ export var getO2Skin = function() {
             borderSelected: palette.o2BluePrimary,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundDisabled: palette.pepperLight30,
             buttonDangerBackgroundSelected: palette.pepperDark,
             buttonDangerBackgroundHover: palette.pepperDark,
             buttonLinkBackgroundSelected: palette.o2BluePrimaryLight10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2BluePrimary,
-            buttonPrimaryBackgroundDisabled: palette.o2BluePrimaryLight10,
-            buttonPrimaryBackgroundDisabledInverse: palette.o2BluePrimaryLight50,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundSelected: palette.o2BluePrimaryDark,
             buttonPrimaryBackgroundHover: palette.o2BluePrimaryDark,
             buttonPrimaryBackgroundSelectedInverse: palette.o2BluePrimaryLight50,
             buttonSecondaryBackground: palette.o2BluePrimary,
-            buttonSecondaryBackgroundDisabled: palette.o2BluePrimaryLight10,
             buttonSecondaryBackgroundSelected: palette.o2BluePrimaryDark,
-            buttonSecondaryBorderDisabledInverse: palette.o2BluePrimaryLight50,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.o2BluePrimaryLight50,
             textButtonPrimary: palette.white,
-            textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.o2BluePrimary,
-            textButtonPrimaryInverseDisabled: palette.o2BluePrimaryLight10,
             textButtonPrimaryInverseSelected: palette.o2BluePrimaryDark,
             textButtonSecondary: palette.o2BluePrimary,
-            textButtonSecondaryDisabled: palette.o2BluePrimaryLight10,
             textButtonSecondarySelected: palette.o2BluePrimaryDark,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.o2BluePrimaryLight50,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.o2BluePrimary,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkDangerDisabled: palette.pepperLight30,
-            textLinkDisabled: palette.o2BluePrimaryLight50,
             textLinkSnackbar: palette.o2BluePrimaryLight50,
             // CONTROLS
             control: palette.grey3,
@@ -130,7 +119,6 @@ export var getO2Skin = function() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textDisabled: palette.grey4,
             textAmount: palette.o2BluePrimary,
             // STATES
             error: palette.pepper,
@@ -160,36 +148,26 @@ export var getO2Skin = function() {
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
             borderSelected: palette.darkModeO2BluePrimary,
-            buttonDangerBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackground: palette.darkModeO2BluePrimary,
-            buttonPrimaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackgroundDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.darkModeO2BluePrimary,
             buttonPrimaryBackgroundSelected: palette.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundHover: palette.darkModeO2BluePrimaryDark,
             buttonPrimaryBackgroundSelectedInverse: palette.darkModeO2BluePrimaryDark,
             buttonSecondaryBackground: palette.darkModeO2BluePrimary,
-            buttonSecondaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonSecondaryBackgroundSelected: palette.darkModeO2BluePrimaryDark,
-            buttonSecondaryBorderDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.darkModeO2BluePrimary,
             buttonSecondaryBorderSelectedInverse: palette.darkModeO2BluePrimaryDark,
             textButtonPrimary: palette.grey2,
-            textButtonPrimaryDisabled: palette.grey5,
             textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryInverseDisabled: palette.grey5,
             textButtonPrimaryInverseSelected: palette.grey2,
             textButtonSecondary: palette.grey2,
-            textButtonSecondaryDisabled: palette.grey5,
             textButtonSecondarySelected: palette.grey4,
             textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryInverseDisabled: palette.grey5,
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.o2BluePrimaryLight50,
             textLinkInverse: palette.o2BluePrimaryLight50,
-            textLinkDisabled: palette.darkModeGrey6,
             control: palette.darkModeGrey6,
             controlActivated: palette.o2BluePrimaryLight50,
             loadingBar: palette.darkModeO2BluePrimary,
@@ -213,7 +191,6 @@ export var getO2Skin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textDisabled: palette.grey5,
             textAmount: palette.o2BluePrimaryLight10,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,

package/dist-es/skins/vivo.js

@@ -54,40 +54,29 @@ export var getVivoSkin = function() {
             borderSelected: palette.vivoPurple,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundDisabled: palette.pepperLight30,
             buttonDangerBackgroundSelected: palette.pepperDark,
             buttonDangerBackgroundHover: palette.pepperDark,
             buttonLinkBackgroundSelected: palette.vivoPurpleLight10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.vivoPurple,
-            buttonPrimaryBackgroundDisabled: palette.vivoPurpleLight20,
-            buttonPrimaryBackgroundDisabledInverse: palette.vivoPurpleLight50,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundSelected: palette.vivoPurpleDark,
             buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundSelectedInverse: palette.vivoPurpleLight50,
             buttonSecondaryBackground: palette.vivoPurple,
-            buttonSecondaryBackgroundDisabled: palette.vivoPurpleLight20,
             buttonSecondaryBackgroundSelected: palette.vivoPurpleDark,
-            buttonSecondaryBorderDisabledInverse: palette.vivoPurpleLight50,
             buttonSecondaryBorderInverse: palette.white,
             buttonSecondaryBorderSelectedInverse: palette.vivoPurpleLight50,
             textButtonPrimary: palette.white,
-            textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.vivoPurple,
-            textButtonPrimaryInverseDisabled: palette.vivoPurpleLight20,
             textButtonPrimaryInverseSelected: palette.vivoPurple,
             textButtonSecondary: palette.vivoPurple,
-            textButtonSecondaryDisabled: palette.vivoPurpleLight20,
             textButtonSecondarySelected: palette.vivoPurpleDark,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.vivoPurpleLight50,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.vivoPurple,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkDangerDisabled: palette.pepperLight30,
-            textLinkDisabled: palette.vivoPurpleLight50,
             textLinkSnackbar: palette.vivoPurpleLight50,
             // CONTROLS
             control: palette.grey3,
@@ -121,7 +110,6 @@ export var getVivoSkin = function() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textDisabled: palette.grey4,
             textAmount: palette.vivoPurple,
             // STATES
             error: palette.pepper,
@@ -151,36 +139,26 @@ export var getVivoSkin = function() {
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
             borderSelected: palette.vivoPurpleLight80,
-            buttonDangerBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelected: applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackground: palette.vivoPurpleLight80,
-            buttonPrimaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
-            buttonPrimaryBackgroundDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.vivoPurpleLight80,
             buttonPrimaryBackgroundSelected: palette.vivoPurpleDark,
             buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundSelectedInverse: palette.vivoPurpleDark,
             buttonSecondaryBackground: palette.vivoPurpleLight80,
-            buttonSecondaryBackgroundDisabled: applyAlpha(palette.white, 0.05),
             buttonSecondaryBackgroundSelected: palette.vivoPurpleDark,
-            buttonSecondaryBorderDisabledInverse: applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.vivoPurpleLight80,
             buttonSecondaryBorderSelectedInverse: palette.vivoPurpleDark,
             textButtonPrimary: palette.grey2,
-            textButtonPrimaryDisabled: palette.grey5,
             textButtonPrimaryInverse: palette.grey2,
-            textButtonPrimaryInverseDisabled: palette.grey5,
             textButtonPrimaryInverseSelected: palette.grey2,
             textButtonSecondary: palette.grey2,
-            textButtonSecondaryDisabled: palette.grey5,
             textButtonSecondarySelected: palette.grey4,
             textButtonSecondaryInverse: palette.grey2,
-            textButtonSecondaryInverseDisabled: palette.grey5,
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.vivoPurpleLight50,
             textLinkInverse: palette.vivoPurpleLight50,
-            textLinkDisabled: palette.darkModeGrey6,
             control: palette.darkModeGrey6,
             controlActivated: palette.vivoPurpleLight80,
             loadingBar: palette.vivoPurpleLight80,
@@ -205,7 +183,6 @@ export var getVivoSkin = function() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textDisabled: palette.grey5,
             textAmount: palette.vivoPurpleLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,

package/dist-es/switch-component.js

@@ -79,7 +79,8 @@ var useStyles = createUseStyles(function(param) {
     return {
         checkbox: {
             display: 'inline-block',
-            padding: isIos ? 0 : 4
+            padding: isIos ? 0 : 4,
+            cursor: 'pointer'
         },
         switchCheckboxContainer: {
             position: 'relative',
@@ -89,7 +90,6 @@ var useStyles = createUseStyles(function(param) {
         switchCheckboxLabel: {
             display: 'block',
             overflow: 'hidden',
-            cursor: 'pointer',
             borderRadius: 40,
             '& > *': {
                 pointerEvents: 'none'
@@ -135,8 +135,8 @@ var useStyles = createUseStyles(function(param) {
             cursor: 'default'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            cursor: 'default',
+            opacity: 0.5
         }
     };
 });
@@ -182,7 +182,8 @@ var Switch = function(props) {
         }
     };
     var switchEl = /*#__PURE__*/ _jsx("div", {
-        className: classes.checkbox,
+        className: classNames(classes.checkbox, _defineProperty({
+        }, classes.disabled, disabled)),
         children: /*#__PURE__*/ _jsx("div", {
             className: classes.switchCheckboxContainer,
             children: /*#__PURE__*/ _jsxs("div", {
@@ -207,8 +208,7 @@ var Switch = function(props) {
         onKeyDown: disabled ? undefined : handleKeyDown,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: classNames(classes.container, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.container,
         "aria-disabled": disabled,
         "aria-labelledby": labelId
     }, getPrefixedDataAttributes(props.dataAttributes), {
@@ -219,11 +219,14 @@ var Switch = function(props) {
             alignItems: "center",
             children: [
                 switchEl,
-                /*#__PURE__*/ _jsx(Text3, {
+                props.children && /*#__PURE__*/ _jsx(Text3, {
                     regular: true,
                     as: "div",
                     id: labelId,
-                    children: props.children
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: disabled ? classes.disabled : '',
+                        children: props.children
+                    })
                 })
             ]
         })

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

@@ -137,10 +137,6 @@ var commonInputStyles = function(theme) {
                 opacity: 0.5
             }
         },
-        '&:disabled': {
-            color: theme.colors.textDisabled,
-            cursor: 'not-allowed'
-        },
         boxShadow: 'none'
     };
 };
@@ -254,11 +250,7 @@ var useStyles = createUseStyles(function(theme) {
             paddingRight: 16,
             display: 'flex',
             alignItems: 'center',
-            alignSelf: 'center',
-            opacity: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            alignSelf: 'center'
         },
         startIcon: {
             pointerEvents: 'none',
@@ -267,11 +259,7 @@ var useStyles = createUseStyles(function(theme) {
             display: 'flex',
             alignItems: 'center',
             height: '100%',
-            position: 'absolute',
-            opacity: function(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            position: 'absolute'
         },
         prefix: (_obj2 = {
             alignSelf: 'baseline',
@@ -370,7 +358,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         width: "calc(((100% - ".concat(LABEL_LEFT_POSITION + (startIcon ? 48 : LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
         paddingRight: endIcon && !isShrinked ? 36 : 0
     };
-    var prefixColor = rest.disabled ? colors.textDisabled : colors.textSecondary;
     return(/*#__PURE__*/ _jsxs(FieldContainer, {
         disabled: rest.disabled,
         helperText: /*#__PURE__*/ _jsx(HelperText, {
@@ -389,7 +376,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
             prefix && /*#__PURE__*/ _jsx("div", {
                 className: classes.prefix,
                 children: /*#__PURE__*/ _jsx(Text3, {
-                    color: prefixColor,
+                    color: colors.textSecondary,
                     regular: true,
                     children: prefix
                 })
@@ -439,7 +426,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
                 forId: id,
                 inputState: inputState,
                 shrinkLabel: shrinkLabel,
-                disabled: rest.disabled,
                 optional: !rest.required,
                 children: label
             }),

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

@@ -86,10 +86,7 @@ var useLabelStyles = createUseStyles(function(theme) {
             fontSize: 18,
             lineHeight: '24px',
             color: function(param) {
-                var inputState = param.inputState, error = param.error, disabled = param.disabled;
-                if (inputState === 'default' && disabled) {
-                    return theme.colors.textDisabled;
-                }
+                var inputState = param.inputState, error = param.error;
                 if (error && inputState !== 'default') {
                     return theme.colors.error;
                 }
@@ -125,13 +122,11 @@ var useLabelStyles = createUseStyles(function(theme) {
     };
 });
 export var Label = function(param) {
-    var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, disabled = param.disabled, style = param.style, optional = param.optional;
+    var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, style = param.style, optional = param.optional;
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var classes = useLabelStyles({
-        isShrinked: isShrinked,
         inputState: inputState,
-        error: error,
-        disabled: disabled
+        error: error
     });
     var ref = _slicedToArray(React.useState(''), 2), transitionStyle = ref[0], setTransitionStyle = ref[1];
     var ref1 = useTheme(), texts = ref1.texts;
@@ -225,6 +220,10 @@ var _obj1, _obj2;
 var useFieldContainerStyles = createUseStyles(function(theme) {
     return {
         fieldContainer: (_obj1 = {
+            opacity: function(param) {
+                var disabled = param.disabled;
+                return disabled ? 0.5 : 1;
+            },
             display: 'flex',
             flexDirection: 'column',
             minWidth: 96
@@ -249,13 +248,7 @@ var useFieldContainerStyles = createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", function(param) {
-            var disabled = param.disabled;
-            return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
-        }), _defineProperty(_obj2, "cursor", function(param) {
-            var disabled = param.disabled;
-            return disabled ? 'not-allowed' : 'initial';
-        }), _obj2)
+        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", theme.colors.backgroundContainer), _obj2)
     };
 });
 export var FieldContainer = function(param) {

package/dist-es/text-link.js

@@ -3,6 +3,7 @@ import { createUseStyles } from './jss';
 import Touchable from './touchable';
 import classnames from 'classnames';
 import { useIsInverseVariant } from './theme-variant-context';
+import { useForm } from './form-context';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -62,19 +63,22 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+var _obj;
 var useStyles = createUseStyles(function(theme) {
     return {
-        textLink: _defineProperty({
+        textLink: (_obj = {
             width: 'auto',
             lineHeight: 'inherit',
             display: 'inline-block',
             color: theme.colors.textLink,
             wordBreak: 'break-word'
-        }, theme.mq.supportsHover, {
-            '&:hover': {
+        }, _defineProperty(_obj, theme.mq.supportsHover, {
+            '&:hover:not([disabled])': {
                 textDecoration: 'underline'
             }
-        }),
+        }), _defineProperty(_obj, '&[disabled]', {
+            opacity: 0.5
+        }), _obj),
         inverse: {
             color: theme.colors.textLinkInverse
         },
@@ -83,15 +87,17 @@ var useStyles = createUseStyles(function(theme) {
         }
     };
 });
-var _obj;
+var _obj1;
 var TextLink = function(_param) {
-    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, props = _objectWithoutProperties(_param, ["children", "className", "small"]);
+    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, disabled = _param.disabled, props = _objectWithoutProperties(_param, ["children", "className", "small", "disabled"]);
     var classes = useStyles();
     var isInverse = useIsInverseVariant();
+    var ref = useForm(), formStatus = ref.formStatus;
     return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
     }, props, {
-        className: classnames(classes.textLink, className, (_obj = {
-        }, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
+        disabled: disabled || formStatus === 'sending',
+        className: classnames(classes.textLink, className, (_obj1 = {
+        }, _defineProperty(_obj1, classes.small, small), _defineProperty(_obj1, classes.inverse, isInverse), _obj1)),
         children: children
     })));
 };

package/dist-es/touchable.js

@@ -68,8 +68,7 @@ var useStyles = createUseStyles(function() {
                 border: 'none'
             },
             '&[disabled]': {
-                cursor: 'auto',
-                pointerEvents: 'none'
+                cursor: 'default'
             },
             '&:active, &:hover': {
                 textDecoration: 'none'
@@ -173,7 +172,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             "aria-labelledby": props['aria-labelledby'],
             onClick: handleHrefClick,
             onKeyDown: handleKeyDown,
-            href: props.disabled ? '' : getHref(),
+            href: props.disabled ? undefined : getHref(),
             target: openNewTab ? '_blank' : undefined,
             rel: openNewTab ? 'noopener noreferrer' : undefined,
             ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.14.2",
+    "version": "10.15.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -76,7 +76,7 @@
         "@swc/core": "^1.2.93",
         "@swc/jest": "^0.2.4",
         "@telefonica/acceptance-testing": "^2.5.0",
-        "@telefonica/eslint-config": "^1.0.1",
+        "@telefonica/eslint-config": "^1.0.2",
         "@telefonica/prettier-config": "^1.1.0",
         "@telefonica/ts-to-flow": "1.1.5",
         "@testing-library/jest-dom": "^5.12.0",