@telefonica/mistica 10.0.1 → 10.3.1

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

@@ -213,20 +213,29 @@ var useFieldContainerStyles = createUseStyles(function (theme) {
       display: 'flex',
       position: 'relative',
       lineHeight: '16px',
-      backgroundColor: theme.colors.backgroundContainer
+      backgroundColor: function backgroundColor(_ref10) {
+        var disabled = _ref10.disabled;
+        return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
+      },
+      cursor: function cursor(_ref11) {
+        var disabled = _ref11.disabled;
+        return disabled ? 'not-allowed' : 'initial';
+      }
     }
   };
 });
-export var FieldContainer = function FieldContainer(_ref10) {
-  var multiline = _ref10.multiline,
-      children = _ref10.children,
-      helperText = _ref10.helperText,
-      className = _ref10.className,
-      fieldRef = _ref10.fieldRef,
-      fullWidth = _ref10.fullWidth;
+export var FieldContainer = function FieldContainer(_ref12) {
+  var multiline = _ref12.multiline,
+      disabled = _ref12.disabled,
+      children = _ref12.children,
+      helperText = _ref12.helperText,
+      className = _ref12.className,
+      fieldRef = _ref12.fieldRef,
+      fullWidth = _ref12.fullWidth;
   var classes = useFieldContainerStyles({
     multiline: multiline,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    disabled: disabled
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.fieldContainer

package/dist-es/text-link.js

@@ -2,12 +2,12 @@ var _excluded = ["children", "className", "small"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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 _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; }
 
+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; }
+
 import * as React from 'react';
 import { createUseStyles } from './jss';
 import Touchable from './touchable';
@@ -15,20 +15,17 @@ import classnames from 'classnames';
 import { useIsInverseVariant } from './theme-variant-context';
 var useStyles = createUseStyles(function (theme) {
   return {
-    textLink: {
+    textLink: _defineProperty({
       width: 'auto',
       lineHeight: 'inherit',
       display: 'inline-block',
       color: theme.colors.textLink,
-      wordBreak: 'break-word',
+      wordBreak: 'break-word'
+    }, theme.mq.supportsHover, {
       '&:hover': {
-        textDecoration: 'underline',
-        // Revert hover effect in touch devices
-        '@media (pointer: coarse)': {
-          textDecoration: 'initial'
-        }
+        textDecoration: 'underline'
       }
-    },
+    }),
     inverse: {
       color: theme.colors.textLinkInverse
     },

package/dist-es/theme-context-provider.js

@@ -96,7 +96,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
   }, []);
   var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
   var contextTheme = React.useMemo(function () {
-    var _theme$colorScheme, _theme$Link;
+    var _theme$colorScheme, _theme$mediaQueries, _theme$Link;
 
     // TODO: In next major version we could change this to "auto" by default
     var colorScheme = (_theme$colorScheme = theme.colorScheme) !== null && _theme$colorScheme !== void 0 ? _theme$colorScheme : 'light';
@@ -123,7 +123,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
         }
       }, theme.analytics),
       dimensions: _objectSpread(_objectSpread({}, dimensions), theme.dimensions),
-      mq: theme.mediaQueries ? createMediaQueries(theme.mediaQueries) : createMediaQueries(mediaQueriesConfig),
+      mq: createMediaQueries((_theme$mediaQueries = theme.mediaQueries) !== null && _theme$mediaQueries !== void 0 ? _theme$mediaQueries : mediaQueriesConfig),
       colors: colors,
       Link: (_theme$Link = theme.Link) !== null && _theme$Link !== void 0 ? _theme$Link : AnchorLink,
       isDarkMode: isDarkModeEnabled,

package/dist-es/theme.js

@@ -33,7 +33,8 @@ var TEXTS_ES = {
   formSearchClear: 'Borrar búsqueda',
   menuLabelSuffix: 'menú',
   openNavigationMenu: 'Abrir menú de navegación',
-  closeNavigationMenu: 'Cerrar menú de navegación'
+  closeNavigationMenu: 'Cerrar menú de navegación',
+  backNavigationBar: 'Atrás'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -61,7 +62,8 @@ var TEXTS_EN = {
   formSearchClear: 'Clear search',
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Open navigation menu',
-  closeNavigationMenu: 'Close navigation menu'
+  closeNavigationMenu: 'Close navigation menu',
+  backNavigationBar: 'Back'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -89,7 +91,8 @@ var TEXTS_DE = {
   formSearchClear: 'Suche löschen',
   menuLabelSuffix: 'Menü',
   openNavigationMenu: 'Navigationsmenü öffnen',
-  closeNavigationMenu: 'Navigationsmenü schließen'
+  closeNavigationMenu: 'Navigationsmenü schließen',
+  backNavigationBar: 'Zurück'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -117,7 +120,8 @@ var TEXTS_PT = {
   formSearchClear: 'Apagar pesquisa',
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Abrir menu de navegação',
-  closeNavigationMenu: 'Fechar menu de navegação'
+  closeNavigationMenu: 'Fechar menu de navegação',
+  backNavigationBar: 'Voltar'
 };
 export var getTexts = function getTexts(locale) {
   var lang = locale.toLocaleLowerCase().split(/[-_]/)[0];

package/dist-es/utils/media-queries.js

@@ -10,6 +10,11 @@ export var createMediaQueries = function createMediaQueries(_ref) {
     largeDesktop: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(largeDesktopMinWidth, "px)"),
     tabletOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(tabletMinWidth, "px)"),
     tabletOrSmaller: "@media only screen and (max-width: ".concat(desktopMinWidth - 1, "px), ") + "(max-height: ".concat(desktopOrTabletMinHeight - 1, "px)"),
-    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)")
+    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)"),
+    // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
+    // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
+    // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
+    // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
+    supportsHover: '@media (pointer: fine), (pointer: none)'
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.0.1",
+    "version": "10.3.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -80,6 +80,7 @@
         "@storybook/react": "6.3.0-beta.5",
         "@storybook/theming": "6.3.0-beta.5",
         "@telefonica/eslint-plugin-async-await": "^1.1.0",
+        "@telefonica/eslint-plugin-react-element-interface": "^1.0.0",
         "@telefonica/prettier-config": "^1.1.0",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",