@telefonica/mistica 10.0.1 → 10.3.1

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+## [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)
+
+
+### Bug Fixes
+
+* **NavigationBarActionGroup:** add missing children prop type ([#333](https://github.com/Telefonica/mistica-web/issues/333)) ([a6d1a79](https://github.com/Telefonica/mistica-web/commit/a6d1a79f7a6e9146aaa9fb83634ae8d69f2b50c4))
+* **Select, TextField:** fix label text overflow ([#335](https://github.com/Telefonica/mistica-web/issues/335)) ([2e647b4](https://github.com/Telefonica/mistica-web/commit/2e647b4301f1ace758656c40f9793150bcf19c2e))
+* **types:** review wrong usages of TS React.ReactElement ([#332](https://github.com/Telefonica/mistica-web/issues/332)) ([9ea483f](https://github.com/Telefonica/mistica-web/commit/9ea483f26b0d070fc5237949dba4f2acd68185ff))
+
+
+### Features
+
+* **NavigationBar:** allow custom paddingX when not fixed ([#336](https://github.com/Telefonica/mistica-web/issues/336)) ([b09c6dc](https://github.com/Telefonica/mistica-web/commit/b09c6dc03a8e71c2eb16684c399cc16b55c61513))
+
 ## [10.0.1](https://github.com/Telefonica/mistica-web/compare/v10.0.0...v10.0.1) (2021-09-07)
 
 

package/dist/button-fixed-footer-layout.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { ButtonElement } from './button';
+import type { ButtonElement, ButtonLinkProps } from './button';
 declare type Props = {
     isFooterVisible?: boolean;
     button?: ButtonElement;
     desktopButtonAlign?: 'left' | 'center';
     secondaryButton?: ButtonElement;
-    link?: React.ReactElement<typeof ButtonLink>;
+    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     footerBgColor?: string;
     containerBgColor?: string;
     children: React.ReactNode;

package/dist/button-layout.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { ButtonElement } from './button';
+import type { ButtonElement, ButtonLinkProps } from './button';
 declare type MaybeButtonElement = ButtonElement | void | false;
 declare type ButtonLayoutProps = {
     children?: MaybeButtonElement | [MaybeButtonElement, MaybeButtonElement];
     align?: 'center' | 'left' | 'right' | 'full-width';
-    link?: React.ReactElement<typeof ButtonLink> | null;
+    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink> | null;
     withMargins?: boolean;
 };
 declare const ButtonLayout: React.FC<ButtonLayoutProps>;

package/dist/button.d.ts

@@ -84,5 +84,5 @@ export declare const ButtonLink: React.FC<ButtonLinkProps>;
 export declare const ButtonPrimary: React.FC<ButtonProps>;
 export declare const ButtonSecondary: React.FC<ButtonProps>;
 export declare const ButtonDanger: React.FC<ButtonProps>;
-export declare type ButtonElement = React.ReactElement<typeof ButtonPrimary> | React.ReactElement<typeof ButtonSecondary> | React.ReactElement<typeof ButtonDanger>;
+export declare type ButtonElement = React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary> | React.ReactElement<ButtonProps, typeof ButtonDanger>;
 export {};

package/dist/callout.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type { ButtonProps, ButtonLinkProps } from './button';
 declare type Props = {
     title?: string;
     description: string;
     onClose?: () => void;
-    icon?: React.ReactElement<any>;
-    button?: React.ReactElement<typeof ButtonPrimary> | React.ReactElement<typeof ButtonSecondary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    icon?: React.ReactElement;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;
 };

package/dist/card.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import Tag from './tag';
 import { ButtonLink, ButtonPrimary } from './button';
+import type { ButtonProps, ButtonLinkProps } from './button';
 import type { DataAttributes } from './utils/types';
+import type { TagProps } from './tag';
 declare type CardMedia = {
     src: string;
     aspectRatio: number;
@@ -17,13 +19,13 @@ declare type CardMedia = {
 };
 declare type MediaCardProps = {
     media: CardMedia;
-    headline?: string | React.ReactElement<typeof Tag>;
+    headline?: string | React.ReactElement<TagProps, typeof Tag>;
     pretitle?: string;
     title?: string;
     description: string;
     extra?: React.ReactNode;
-    button?: React.ReactElement<typeof ButtonPrimary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;
 };
@@ -32,14 +34,14 @@ interface DataCardProps {
     /**
      * Typically a mistica-icons component element
      */
-    icon?: React.ReactElement<any>;
-    headline?: string | React.ReactElement<typeof Tag>;
+    icon?: React.ReactElement;
+    headline?: string | React.ReactElement<TagProps, typeof Tag>;
     title: string;
     subtitle?: string;
     description: string;
     extra?: React.ReactNode;
-    button?: React.ReactElement<typeof ButtonPrimary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     children?: void;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;

package/dist/circle.d.ts

@@ -3,7 +3,7 @@ declare type Props = {
     backgroundColor?: string;
     backgroundImage?: string;
     size?: number | string;
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement;
 };
 declare const Circle: React.FC<Props>;
 export default Circle;

package/dist/dialog.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface DialogProps {
     className?: string;
     title?: string;
-    icon?: React.ReactElement<any>;
+    icon?: React.ReactElement;
     message: string;
     cancelText?: string;
     acceptText?: string;

package/dist/double-field.d.ts

@@ -1,4 +1,14 @@
 import * as React from 'react';
+import CreditCardExpirationField from './credit-card-expiration-field';
+import CvvField from './cvv-field';
+import DateField from './date-field';
+import DecimalField from './decimal-field';
+import EmailField from './email-field';
+import IntegerField from './integer-field';
+import PasswordField from './password-field';
+import PhoneNumberField from './phone-number-field';
+import Select from './select';
+import TextField from './text-field';
 import type { TextFieldProps } from './text-field';
 import type { SelectProps } from './select';
 import type { CvvFieldProps } from './cvv-field';
@@ -9,7 +19,7 @@ import type { DateFieldProps } from './date-field';
 import type { PasswordFieldProps } from './password-field';
 import type { PhoneNumberFieldProps } from './phone-number-field';
 import type { EmailFieldProps } from './email-field';
-declare type Field = React.ReactElement<TextFieldProps> | React.ReactElement<SelectProps> | React.ReactElement<CvvFieldProps> | React.ReactElement<CreditCardExpirationFieldProps> | React.ReactElement<DecimalFieldProps> | React.ReactElement<IntegerFieldProps> | React.ReactElement<DateFieldProps> | React.ReactElement<PhoneNumberFieldProps> | React.ReactElement<PasswordFieldProps> | React.ReactElement<EmailFieldProps>;
+declare type Field = React.ReactElement<TextFieldProps, typeof TextField> | React.ReactElement<SelectProps, typeof Select> | React.ReactElement<CvvFieldProps, typeof CvvField> | React.ReactElement<CreditCardExpirationFieldProps, typeof CreditCardExpirationField> | React.ReactElement<DecimalFieldProps, typeof DecimalField> | React.ReactElement<IntegerFieldProps, typeof IntegerField> | React.ReactElement<DateFieldProps, typeof DateField> | React.ReactElement<PhoneNumberFieldProps, typeof PhoneNumberField> | React.ReactElement<PasswordFieldProps, typeof PasswordField> | React.ReactElement<EmailFieldProps, typeof EmailField>;
 declare type Props = {
     fullWidth?: boolean;
     children: Field | [Field, Field];

package/dist/double-field.js.flow

@@ -1,27 +1,27 @@
 // @flow
 
 import * as React from "react";
-import type { TextFieldProps } from "./text-field";
-import type { SelectProps } from "./select";
-import type { CvvFieldProps } from "./cvv-field";
-import type { CreditCardExpirationFieldProps } from "./credit-card-expiration-field";
-import type { DecimalFieldProps } from "./decimal-field";
-import type { IntegerFieldProps } from "./integer-field";
-import type { DateFieldProps } from "./date-field";
-import type { PasswordFieldProps } from "./password-field";
-import type { PhoneNumberFieldProps } from "./phone-number-field";
-import type { EmailFieldProps } from "./email-field";
+import CreditCardExpirationField from "./credit-card-expiration-field";
+import CvvField from "./cvv-field";
+import DateField from "./date-field";
+import DecimalField from "./decimal-field";
+import EmailField from "./email-field";
+import IntegerField from "./integer-field";
+import PasswordField from "./password-field";
+import PhoneNumberField from "./phone-number-field";
+import Select from "./select";
+import TextField from "./text-field";
 declare type Field =
-  | React.Element<TextFieldProps>
-  | React.Element<SelectProps>
-  | React.Element<CvvFieldProps>
-  | React.Element<CreditCardExpirationFieldProps>
-  | React.Element<DecimalFieldProps>
-  | React.Element<IntegerFieldProps>
-  | React.Element<DateFieldProps>
-  | React.Element<PhoneNumberFieldProps>
-  | React.Element<PasswordFieldProps>
-  | React.Element<EmailFieldProps>;
+  | React.Element<typeof TextField>
+  | React.Element<typeof Select>
+  | React.Element<typeof CvvField>
+  | React.Element<typeof CreditCardExpirationField>
+  | React.Element<typeof DecimalField>
+  | React.Element<typeof IntegerField>
+  | React.Element<typeof DateField>
+  | React.Element<typeof PhoneNumberField>
+  | React.Element<typeof PasswordField>
+  | React.Element<typeof EmailField>;
 declare type Props = {
   fullWidth?: boolean,
   children: Field | [Field, Field],

package/dist/empty-state-card.d.ts

@@ -13,7 +13,7 @@ interface CommonProps {
     dataAttributes?: DataAttributes;
 }
 interface IconProps extends CommonProps {
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement;
     imageUrl?: undefined;
 }
 interface ImageProps extends CommonProps {

package/dist/empty-state-card.js.flow

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
-import type { ButtonProps } from "./button";
 import type { DataAttributes } from "./utils/types";
 declare type CommonProps = {|
   title: string,

package/dist/empty-state.d.ts

@@ -22,7 +22,7 @@ interface LargeImageProps extends BaseProps {
     icon?: undefined;
 }
 interface IconProps extends BaseProps {
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement;
     imageUrl?: undefined;
     largeImageUrl?: undefined;
 }

package/dist/empty-state.js.flow

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import { ButtonPrimary, ButtonSecondary, ButtonLink } from "./button";
-import type { ButtonProps } from "./button";
 import type { DataAttributes } from "./utils/types";
 declare type BaseProps = {|
   title: string,

package/dist/feedback-screen.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { ButtonPrimary, ButtonSecondary, ButtonLink } from './button';
+import type { ButtonProps, ButtonLinkProps } from './button';
 declare type HapticFeedback = 'error' | 'success';
 interface FeedbackProps {
     title: string;
-    primaryButton?: React.ReactElement<typeof ButtonPrimary>;
-    secondaryButton?: React.ReactElement<typeof ButtonSecondary>;
-    link?: React.ReactElement<typeof ButtonLink>;
+    primaryButton?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     description?: string | Array<string>;
     children?: React.ReactNode;
     unstable_inlineInDesktop?: boolean;

package/dist/header.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import NavigationBreadcrumbs from './navigation-breadcrumbs';
 import { ButtonPrimary, ButtonSecondary } from './button';
+import type { ButtonProps } from './button';
 import type { TextPresetProps } from './text';
+import type { NavigationBreadcrumbsProps } from './navigation-breadcrumbs';
 declare type OverridableTextProps = {
     color?: TextPresetProps['color'];
     textDecoration?: TextPresetProps['textDecoration'];
@@ -15,8 +17,8 @@ declare type HeaderProps = {
     title?: string;
     preamount?: RichText;
     amount?: string;
-    button?: React.ReactElement<typeof ButtonPrimary>;
-    secondaryButton?: React.ReactElement<typeof ButtonSecondary>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
     subtitle?: RichText;
     isErrorAmount?: boolean;
 };
@@ -24,12 +26,12 @@ export declare const Header: React.FC<HeaderProps>;
 declare type MainSectionHeaderProps = {
     title: string;
     description?: string;
-    button?: React.ReactElement<typeof ButtonPrimary> | React.ReactElement<typeof ButtonSecondary>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
 };
 export declare const MainSectionHeader: React.FC<MainSectionHeaderProps>;
 declare type HeaderLayoutProps = {
     isInverse?: boolean;
-    breadcrumbs?: React.ReactElement<typeof NavigationBreadcrumbs>;
+    breadcrumbs?: React.ReactElement<NavigationBreadcrumbsProps, typeof NavigationBreadcrumbs>;
     header: React.ReactNode;
     extra?: React.ReactNode;
     sideBySideExtraOnDesktop?: boolean;
@@ -38,7 +40,7 @@ declare type HeaderLayoutProps = {
 export declare const HeaderLayout: React.FC<HeaderLayoutProps>;
 declare type MainSectionHeaderLayoutProps = {
     isInverse?: boolean;
-    children: React.ReactElement<typeof MainSectionHeader>;
+    children: React.ReactElement<MainSectionHeaderProps, typeof MainSectionHeader>;
 };
 export declare const MainSectionHeaderLayout: React.FC<MainSectionHeaderLayoutProps>;
 export {};

package/dist/highlighted-card.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
 import type { TrackingEvent } from './utils/types';
-import type { ButtonElement } from './button';
+import type { ButtonElement, ButtonLinkProps } from './button';
 interface CommonProps {
     title: string;
     description: string;
@@ -21,7 +21,7 @@ interface BasicProps extends CommonProps {
     href?: undefined;
 }
 interface ButtonProps extends CommonProps {
-    button?: ButtonElement | React.ReactElement<typeof ButtonLink> | null;
+    button?: ButtonElement | React.ReactElement<ButtonLinkProps, typeof ButtonLink> | null;
     onPress?: undefined;
     to?: undefined;
     href?: undefined;

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

@@ -31,14 +31,23 @@ declare type MainNavigationBarProps = {
     topFixed?: boolean;
 };
 export declare const MainNavigationBar: React.FC<MainNavigationBarProps>;
-declare type NavigationBarProps = {
+interface NavigationBarCommonProps {
     isInverse?: boolean;
     onBack?: () => void;
     title?: string;
     right?: React.ReactElement;
-    topFixed?: boolean;
+    withBorder?: boolean;
     children?: undefined;
-};
+}
+interface NavigationBarTopFixedProps extends NavigationBarCommonProps {
+    topFixed?: true;
+    paddingX?: undefined;
+}
+interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
+    topFixed: false;
+    paddingX?: number;
+}
+declare type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
 export declare const NavigationBar: React.FC<NavigationBarProps>;
 declare type FunnelNavigationBarProps = {
     isInverse?: boolean;
@@ -48,7 +57,10 @@ declare type FunnelNavigationBarProps = {
     children?: undefined;
 };
 export declare const FunnelNavigationBar: React.FC<FunnelNavigationBarProps>;
-export declare const NavigationBarActionGroup: React.FC;
+declare type NavigationBarActionGroupProps = {
+    children: React.ReactNode;
+};
+export declare const NavigationBarActionGroup: React.FC<NavigationBarActionGroupProps>;
 declare type NavigationBarActionProps = TouchableProps;
 export declare const NavigationBarAction: React.FC<NavigationBarActionProps>;
 export {};