@telefonica/mistica 10.1.0 → 10.4.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [10.4.0](https://github.com/Telefonica/mistica-web/compare/v10.3.1...v10.4.0) (2021-09-30)
+
+
+### Features
+
+* **MediaCard:** make description optional ([#346](https://github.com/Telefonica/mistica-web/issues/346)) ([ce5a653](https://github.com/Telefonica/mistica-web/commit/ce5a653c099e830e7cb60fb1b8ce8db62d8ffa3a))
+
+## [10.3.1](https://github.com/Telefonica/mistica-web/compare/v10.3.0...v10.3.1) (2021-09-23)
+
+
+### Bug Fixes
+
+* **NavigationBar:** remove wrong border transition in desktop ([b58d46c](https://github.com/Telefonica/mistica-web/commit/b58d46ccf14c5cebbfe95b5c62d7644525fddb86))
+
+# [10.3.0](https://github.com/Telefonica/mistica-web/compare/v10.2.0...v10.3.0) (2021-09-23)
+
+
+### Features
+
+* **Form fields:** change style of disabled fields ([#340](https://github.com/Telefonica/mistica-web/issues/340)) ([bdced15](https://github.com/Telefonica/mistica-web/commit/bdced15cc48fe3baf417f72fc6d453f91d172a62))
+* **NavigationBar:** make border optional ([#342](https://github.com/Telefonica/mistica-web/issues/342)) ([2b63b96](https://github.com/Telefonica/mistica-web/commit/2b63b962b87600f972485eea268721e074047533))
+
+# [10.2.0](https://github.com/Telefonica/mistica-web/compare/v10.1.0...v10.2.0) (2021-09-21)
+
+
+### Bug Fixes
+
+* **form fields:** change disabled color ([#334](https://github.com/Telefonica/mistica-web/issues/334)) ([fdb9f89](https://github.com/Telefonica/mistica-web/commit/fdb9f890677d4fb5e5d6d1a6980efe6287e4d533))
+* **PasswordField:** keep caret position when switching visibility ([#339](https://github.com/Telefonica/mistica-web/issues/339)) ([6d4b67b](https://github.com/Telefonica/mistica-web/commit/6d4b67b3bbfa935936fb456fa97d760af4522b0c))
+* **snippets:** wrong icon prop in Callout ([#337](https://github.com/Telefonica/mistica-web/issues/337)) ([a974a12](https://github.com/Telefonica/mistica-web/commit/a974a128107f7ce46ab9379ebe7155da160f0efc))
+
+
+### Features
+
+* **mq.suportsHover:** include mq for devices that support hover ([#341](https://github.com/Telefonica/mistica-web/issues/341)) ([b6b6389](https://github.com/Telefonica/mistica-web/commit/b6b638965b2253bd813ff42af4ef596949c59120))
+
 # [10.1.0](https://github.com/Telefonica/mistica-web/compare/v10.0.1...v10.1.0) (2021-09-15)
 
 

package/README.md

@@ -77,10 +77,10 @@ the library. There are multiple settings but the only two mandatory fields are `
 
 ## Components
 
-Explore the components in [Mistica storybook](https://mistica-web.now.sh)
+Explore the components in [Mistica storybook](https://mistica-web.vercel.app)
 
 Start prototyping interfaces with Mistica components in the
-[Mistica playroom](https://mistica-web.now.sh/playroom)
+[Mistica playroom](https://mistica-web.vercel.app/playroom)
 
 ## More docs
 

package/dist/card.d.ts

@@ -22,7 +22,7 @@ declare type MediaCardProps = {
     headline?: string | React.ReactElement<TagProps, typeof Tag>;
     pretitle?: string;
     title?: string;
-    description: string;
+    description?: string;
     extra?: React.ReactNode;
     button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
     buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;

package/dist/card.js

@@ -91,7 +91,7 @@ var CardContent = function CardContent(_ref2) {
     regular: true
   }, title), /*#__PURE__*/React.createElement(_text.Text2, {
     regular: true
-  }, subtitle))), /*#__PURE__*/React.createElement(_text.Text2, {
+  }, subtitle))), description && /*#__PURE__*/React.createElement(_text.Text2, {
     as: "p",
     regular: true,
     color: theme.colors.textSecondary

package/dist/card.js.flow

@@ -19,7 +19,7 @@ declare type MediaCardProps = {
   headline?: string | React.Element<typeof Tag>,
   pretitle?: string,
   title?: string,
-  description: string,
+  description?: string,
   extra?: React.Node,
   button?: React.Element<typeof ButtonPrimary>,
   buttonLink?: React.Element<typeof ButtonLink>,

package/dist/icon-button.js

@@ -11,8 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _touchable = _interopRequireDefault(require("./touchable"));
 
-var _dom = require("./utils/dom");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -133,14 +131,14 @@ var IconButton = function IconButton(props) {
       iconSize = props.iconSize,
       _props$size = props.size,
       size = _props$size === void 0 ? ICON_SIZE_1 : _props$size;
-
-  var commonProps = _objectSpread({
+  var commonProps = {
     className: props.className || '',
     disabled: props.disabled,
     style: _objectSpread(_objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled)), props.style),
     trackingEvent: props.trackingEvent,
-    'aria-live': props['aria-live']
-  }, (0, _dom.getPrefixedDataAttributes)(props.dataAttributes));
+    'aria-live': props['aria-live'],
+    dataAttributes: props.dataAttributes
+  };
 
   if (props.href) {
     return /*#__PURE__*/React.createElement(_touchable.default, _extends({}, commonProps, {

package/dist/list.js

@@ -149,22 +149,17 @@ function _defineProperty(obj, key, value) {
 
 
 var useStyles = (0, _jss.createUseStyles)(function (_ref) {
-  var colors = _ref.colors;
+  var colors = _ref.colors,
+      mq = _ref.mq;
   return {
-    hover: {
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          background: function background(_ref2) {
-            var isInverse = _ref2.isInverse;
-            return isInverse ? 'initial' : colors.backgroundAlternative;
-          }
+    hover: _defineProperty({}, mq.supportsHover, {
+      '&:hover': {
+        background: function background(_ref2) {
+          var isInverse = _ref2.isInverse;
+          return isInverse ? 'initial' : colors.backgroundAlternative;
         }
       }
-    },
+    }),
     rowContent: {
       width: '100%',
       cursor: 'pointer'
@@ -526,7 +521,7 @@ var RowContent = function RowContent(props) {
 
   return /*#__PURE__*/React.createElement(_box.default, {
     paddingX: 16,
-    className: (0, _classnames.default)((0, _classnames.default)(classes.rowContent, classes.hover), classes.hoverDisabled),
+    className: (0, _classnames.default)(classes.rowContent, classes.hover, classes.hoverDisabled),
     role: role
   }, props.right ? renderContent({
     type: 'custom',

package/dist/navigation-bar.d.ts

@@ -36,6 +36,7 @@ interface NavigationBarCommonProps {
     onBack?: () => void;
     title?: string;
     right?: React.ReactElement;
+    withBorder?: boolean;
     children?: undefined;
 }
 interface NavigationBarTopFixedProps extends NavigationBarCommonProps {

package/dist/navigation-bar.js

@@ -417,44 +417,43 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       },
       height: DESKTOP_NAVBAR_HEIGHT,
       padding: '16px 0',
-      transition: 'border 300ms',
-      borderBottom: "1px solid ".concat(theme.colors.divider),
-      borderColor: function borderColor(_ref9) {
-        var isInverse = _ref9.isInverse;
+      borderBottomStyle: 'solid',
+      borderBottomWidth: function borderBottomWidth(_ref9) {
+        var withBorder = _ref9.withBorder;
+        return withBorder ? 1 : 0;
+      },
+      borderColor: function borderColor(_ref10) {
+        var isInverse = _ref10.isInverse;
         return isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       }
     }, theme.mq.tabletOrSmaller, {
-      borderColor: function borderColor(_ref10) {
-        var isMenuOpen = _ref10.isMenuOpen,
-            isInverse = _ref10.isInverse;
+      transition: 'border-color 300ms',
+      borderColor: function borderColor(_ref11) {
+        var isMenuOpen = _ref11.isMenuOpen,
+            isInverse = _ref11.isInverse;
         return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       },
       height: MOBILE_NAVBAR_HEIGHT,
       padding: '8px 0'
     }),
-    section: {
+    section: _defineProperty({
       height: DESKTOP_NAVBAR_HEIGHT,
       display: 'flex',
       alignItems: 'center',
       padding: '0 8px',
       borderBottom: "2px solid transparent",
-      transition: 'border-color 300ms ease-in-out',
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref11) {
-            var isInverse = _ref11.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
+      transition: 'border-color 300ms ease-in-out'
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref12) {
+          var isInverse = _ref12.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       }
-    },
+    }),
     selectedSection: {
-      borderColor: function borderColor(_ref12) {
-        var isInverse = _ref12.isInverse;
+      borderColor: function borderColor(_ref13) {
+        var isInverse = _ref13.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
       }
     },
@@ -472,8 +471,8 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
       overflowY: 'auto',
       background: theme.colors.background,
-      boxShadow: function boxShadow(_ref13) {
-        var menuTransitionState = _ref13.menuTransitionState;
+      boxShadow: function boxShadow(_ref14) {
+        var menuTransitionState = _ref14.menuTransitionState;
         return menuTransitionState !== 'closed' ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(shadowAlpha, ")") : 'none';
       },
       transition: "transform ".concat(BURGER_MENU_ANIMATION_DURATION_MS, "ms ease-out")
@@ -490,38 +489,33 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     burgerMenuExitActive: {
       transform: 'translate(-100vw)'
     },
-    iconButton: {
-      color: function color(_ref14) {
-        var isInverse = _ref14.isInverse;
+    iconButton: _defineProperty({
+      color: function color(_ref15) {
+        var isInverse = _ref15.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
-      },
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          color: function color(_ref15) {
-            var isInverse = _ref15.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover': {
+        color: function color(_ref16) {
+          var isInverse = _ref16.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
 
-var MainNavigationBar = function MainNavigationBar(_ref16) {
+var MainNavigationBar = function MainNavigationBar(_ref17) {
   var _logo;
 
-  var sections = _ref16.sections,
-      selectedIndex = _ref16.selectedIndex,
-      right = _ref16.right,
-      logo = _ref16.logo,
-      _ref16$isInverse = _ref16.isInverse,
-      isInverse = _ref16$isInverse === void 0 ? false : _ref16$isInverse,
-      _ref16$topFixed = _ref16.topFixed,
-      topFixed = _ref16$topFixed === void 0 ? true : _ref16$topFixed;
+  var sections = _ref17.sections,
+      selectedIndex = _ref17.selectedIndex,
+      right = _ref17.right,
+      logo = _ref17.logo,
+      _ref17$isInverse = _ref17.isInverse,
+      isInverse = _ref17$isInverse === void 0 ? false : _ref17$isInverse,
+      _ref17$topFixed = _ref17.topFixed,
+      topFixed = _ref17$topFixed === void 0 ? true : _ref17$topFixed;
 
   var _useTheme6 = (0, _hooks.useTheme)(),
       texts = _useTheme6.texts;
@@ -540,7 +534,8 @@ var MainNavigationBar = function MainNavigationBar(_ref16) {
   var classes = useStyles({
     isMenuOpen: isMenuOpen,
     isInverse: isInverse,
-    menuTransitionState: menuTransitionState
+    menuTransitionState: menuTransitionState,
+    withBorder: true
   });
 
   var _useScreenSize2 = (0, _hooks.useScreenSize)(),
@@ -639,9 +634,9 @@ var MainNavigationBar = function MainNavigationBar(_ref16) {
     alignItems: "center"
   }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(_inline.default, {
     space: 32
-  }, sections.map(function (_ref17, idx) {
-    var title = _ref17.title,
-        touchableProps = _objectWithoutProperties(_ref17, _excluded);
+  }, sections.map(function (_ref18, idx) {
+    var title = _ref18.title,
+        touchableProps = _objectWithoutProperties(_ref18, _excluded);
 
     return /*#__PURE__*/React.createElement(_touchable.default, _extends({}, touchableProps, {
       key: idx,
@@ -656,22 +651,25 @@ var MainNavigationBar = function MainNavigationBar(_ref16) {
 
 exports.MainNavigationBar = MainNavigationBar;
 
-var NavigationBar = function NavigationBar(_ref18) {
-  var onBack = _ref18.onBack,
-      title = _ref18.title,
-      right = _ref18.right,
-      _ref18$isInverse = _ref18.isInverse,
-      isInverse = _ref18$isInverse === void 0 ? false : _ref18$isInverse,
-      _ref18$topFixed = _ref18.topFixed,
-      topFixed = _ref18$topFixed === void 0 ? true : _ref18$topFixed,
-      paddingX = _ref18.paddingX;
+var NavigationBar = function NavigationBar(_ref19) {
+  var onBack = _ref19.onBack,
+      title = _ref19.title,
+      right = _ref19.right,
+      _ref19$isInverse = _ref19.isInverse,
+      isInverse = _ref19$isInverse === void 0 ? false : _ref19$isInverse,
+      _ref19$topFixed = _ref19.topFixed,
+      topFixed = _ref19$topFixed === void 0 ? true : _ref19$topFixed,
+      paddingX = _ref19.paddingX,
+      _ref19$withBorder = _ref19.withBorder,
+      withBorder = _ref19$withBorder === void 0 ? true : _ref19$withBorder;
 
   var _useTheme7 = (0, _hooks.useTheme)(),
       texts = _useTheme7.texts;
 
   var classes = useStyles({
     isInverse: isInverse,
-    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0,
+    withBorder: withBorder
   });
   var content = /*#__PURE__*/React.createElement(_inline.default, {
     space: "between",
@@ -704,15 +702,16 @@ var NavigationBar = function NavigationBar(_ref18) {
 
 exports.NavigationBar = NavigationBar;
 
-var FunnelNavigationBar = function FunnelNavigationBar(_ref19) {
-  var logo = _ref19.logo,
-      right = _ref19.right,
-      _ref19$isInverse = _ref19.isInverse,
-      isInverse = _ref19$isInverse === void 0 ? false : _ref19$isInverse,
-      _ref19$topFixed = _ref19.topFixed,
-      topFixed = _ref19$topFixed === void 0 ? true : _ref19$topFixed;
+var FunnelNavigationBar = function FunnelNavigationBar(_ref20) {
+  var logo = _ref20.logo,
+      right = _ref20.right,
+      _ref20$isInverse = _ref20.isInverse,
+      isInverse = _ref20$isInverse === void 0 ? false : _ref20$isInverse,
+      _ref20$topFixed = _ref20.topFixed,
+      topFixed = _ref20$topFixed === void 0 ? true : _ref20$topFixed;
   var classes = useStyles({
-    isInverse: isInverse
+    isInverse: isInverse,
+    withBorder: true
   });
   return /*#__PURE__*/React.createElement(_themeVariantContext.ThemeVariant, {
     isInverse: isInverse
@@ -739,8 +738,8 @@ var useNavigationBarActionGroupStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var NavigationBarActionGroup = function NavigationBarActionGroup(_ref20) {
-  var children = _ref20.children;
+var NavigationBarActionGroup = function NavigationBarActionGroup(_ref21) {
+  var children = _ref21.children;
   var classes = useNavigationBarActionGroupStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.lineHeightFix
@@ -753,39 +752,34 @@ var NavigationBarActionGroup = function NavigationBarActionGroup(_ref20) {
 exports.NavigationBarActionGroup = NavigationBarActionGroup;
 var useNavigationBarActionStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    touchable: {
+    touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
-        color: function color(_ref21) {
-          var isInverse = _ref21.isInverse;
+        color: function color(_ref22) {
+          var isInverse = _ref22.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
         }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref23) {
+          var isInverse = _ref23.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+        }
       },
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref22) {
-            var isInverse = _ref22.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
-        },
-        '&:hover svg': {
-          color: function color(_ref23) {
-            var isInverse = _ref23.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      '&:hover svg': {
+        color: function color(_ref24) {
+          var isInverse = _ref24.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
 
-var NavigationBarAction = function NavigationBarAction(_ref24) {
-  var children = _ref24.children,
-      touchableProps = _objectWithoutProperties(_ref24, _excluded2);
+var NavigationBarAction = function NavigationBarAction(_ref25) {
+  var children = _ref25.children,
+      touchableProps = _objectWithoutProperties(_ref25, _excluded2);
 
   var isInverse = (0, _themeVariantContext.useIsInverseVariant)();
   var classes = useNavigationBarActionStyles({

package/dist/navigation-bar.js.flow

@@ -31,6 +31,7 @@ declare type NavigationBarCommonProps = {|
   onBack?: () => void,
   title?: string,
   right?: React.Element<any>,
+  withBorder?: boolean,
 |};
 declare type NavigationBarTopFixedProps = {|
   ...$Exact<NavigationBarCommonProps>,

package/dist/password-field.js

@@ -161,9 +161,9 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function () {
+var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -220,6 +220,8 @@ var PasswordField = function PasswordField(_ref2) {
       isVisible = _React$useState2[0],
       setIsVisible = _React$useState2[1];
 
+  var caretPositionRef = React.useRef(0);
+
   var _inputRef = React.useRef(null);
 
   var processValue = function processValue(value) {
@@ -230,16 +232,22 @@ var PasswordField = function PasswordField(_ref2) {
     var input = _inputRef.current;
 
     if (input) {
-      input.focus(); // neeeded to place the caret at the end
+      if (input.selectionStart !== null) {
+        caretPositionRef.current = input.selectionStart;
+      }
 
-      setTimeout(function () {
-        var v = input.value;
-        input.value = '';
-        input.value = v;
-      }, 0);
+      input.focus();
     }
   };
 
+  React.useEffect(function () {
+    var input = _inputRef.current;
+
+    if (input) {
+      input.selectionStart = caretPositionRef.current;
+      input.selectionEnd = caretPositionRef.current;
+    }
+  }, [isVisible, caretPositionRef, _inputRef]);
   var fieldProps = (0, _formContext.useFieldProps)({
     name: name,
     value: value,