@telefonica/mistica 10.24.1 → 10.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,24 @@
1
+ # [10.26.0](https://github.com/Telefonica/mistica-web/compare/v10.25.0...v10.26.0) (2022-02-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * **Callout:** Changed element distribution so link has more space ([#414](https://github.com/Telefonica/mistica-web/issues/414)) ([bf3c1cf](https://github.com/Telefonica/mistica-web/commit/bf3c1cfc30db7f5df498743b414599635582910e))
7
+
8
+ # [10.25.0](https://github.com/Telefonica/mistica-web/compare/v10.24.2...v10.25.0) (2022-02-23)
9
+
10
+
11
+ ### Features
12
+
13
+ * **webview-bridge:** upgrade webview-bridge dependency ([#420](https://github.com/Telefonica/mistica-web/issues/420)) ([0b01b6e](https://github.com/Telefonica/mistica-web/commit/0b01b6ed67bb0bcb10927ffb44812095abacc233))
14
+
15
+ ## [10.24.2](https://github.com/Telefonica/mistica-web/compare/v10.24.1...v10.24.2) (2022-02-22)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **Popover:** bug with close event propagation ([#421](https://github.com/Telefonica/mistica-web/issues/421)) ([0b439b6](https://github.com/Telefonica/mistica-web/commit/0b439b6cdb9ea6404d0ec2c6b50b61d99937cbc6))
21
+
1
22
  ## [10.24.1](https://github.com/Telefonica/mistica-web/compare/v10.24.0...v10.24.1) (2022-02-16)
2
23
 
3
24
 
package/dist/callout.js CHANGED
@@ -6,6 +6,8 @@ exports.default = void 0;
6
6
  var _jsxRuntime = require("react/jsx-runtime");
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  var _stack = _interopRequireDefault(require("./stack"));
9
+ var _inline = _interopRequireDefault(require("./inline"));
10
+ var _box = _interopRequireDefault(require("./box"));
9
11
  var _hooks = require("./hooks");
10
12
  var _themeVariantContext = require("./theme-variant-context");
11
13
  var _jss = require("./jss");
@@ -94,8 +96,8 @@ var Callout = function Callout(param) {
94
96
  children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeVariantContext.ThemeVariant, {
95
97
  isInverse: false,
96
98
  children: [
97
- icon && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
98
- className: classes.icon,
99
+ icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
100
+ paddingRight: 16,
99
101
  children: icon
100
102
  }),
101
103
  /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
@@ -103,18 +105,41 @@ var Callout = function Callout(param) {
103
105
  children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
104
106
  space: 16,
105
107
  children: [
106
- /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
108
+ /*#__PURE__*/ (0, _jsxRuntime).jsxs(_inline.default, {
109
+ fullWidth: true,
110
+ alignItems: "flex-start",
111
+ space: "between",
107
112
  children: [
108
- /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
109
- as: "h2",
110
- regular: true,
111
- children: title
113
+ /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
114
+ space: 4,
115
+ children: [
116
+ /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
117
+ as: "h2",
118
+ regular: true,
119
+ children: title
120
+ }),
121
+ /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
122
+ as: "p",
123
+ regular: true,
124
+ color: colors.textSecondary,
125
+ children: description
126
+ })
127
+ ]
112
128
  }),
113
- /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
114
- as: "p",
115
- regular: true,
116
- color: colors.textSecondary,
117
- children: description
129
+ onClose && /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
130
+ size: 40,
131
+ style: {
132
+ display: 'flex',
133
+ margin: '-8px -12px',
134
+ alignItems: 'center',
135
+ justifyContent: 'center'
136
+ },
137
+ onPress: onClose,
138
+ "aria-label": texts.closeButtonLabel,
139
+ children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
140
+ size: 24,
141
+ color: colors.neutralHigh
142
+ })
118
143
  })
119
144
  ]
120
145
  }),
@@ -125,20 +150,6 @@ var Callout = function Callout(param) {
125
150
  })
126
151
  ]
127
152
  })
128
- }),
129
- onClose && /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
130
- size: 40,
131
- style: {
132
- display: 'flex',
133
- margin: '-8px -12px -8px 0',
134
- alignItems: 'center',
135
- justifyContent: 'center'
136
- },
137
- onPress: onClose,
138
- "aria-label": texts.closeButtonLabel,
139
- children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
140
- color: colors.neutralHigh
141
- })
142
153
  })
143
154
  ]
144
155
  })
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
5
  exports.PACKAGE_VERSION = void 0;
6
- var PACKAGE_VERSION = '10.24.1';
6
+ var PACKAGE_VERSION = '10.26.0';
7
7
  exports.PACKAGE_VERSION = PACKAGE_VERSION;
package/dist/popover.js CHANGED
@@ -302,11 +302,6 @@ var Popover = function Popover(param) {
302
302
  }, [
303
303
  isVisible
304
304
  ]);
305
- var handleClose = function handleClose() {
306
- if (onClose) {
307
- onClose();
308
- }
309
- };
310
305
  var popoverContainer = null;
311
306
  if (isVisible && targetPosition) {
312
307
  var ref2 = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref2.containerStyles, arrowStyles = ref2.arrowStyles;
@@ -346,7 +341,10 @@ var Popover = function Popover(param) {
346
341
  /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
347
342
  className: classes.closeButtonIcon,
348
343
  children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
349
- onPress: handleClose,
344
+ onPress: function onPress(e) {
345
+ onClose === null || onClose === void 0 ? void 0 : onClose();
346
+ e.stopPropagation();
347
+ },
350
348
  trackingEvent: trackingEvent,
351
349
  "aria-label": texts.modalClose,
352
350
  children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
@@ -1,12 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export type { RendersElement, RendersNullableElement } from './renders-element';
3
- export declare type TrackingEvent = {
4
- readonly [key: string]: unknown;
5
- readonly category: string;
6
- readonly action: string;
7
- readonly label?: string;
8
- readonly value?: number;
9
- };
3
+ export type { TrackingEvent } from '@tef-novum/webview-bridge';
10
4
  export declare type DataAttributes = {
11
5
  [name: string]: string | number | boolean | undefined;
12
6
  };
@@ -1,13 +1,7 @@
1
1
  // @flow
2
2
 
3
3
  export type { RendersElement, RendersNullableElement } from "./renders-element";
4
- export type TrackingEvent = {
5
- [key: string]: mixed,
6
- +category: string,
7
- +action: string,
8
- +label?: string,
9
- +value?: number,
10
- };
4
+ export type { TrackingEvent } from "@tef-novum/webview-bridge";
11
5
  export type DataAttributes = {
12
6
  [name: string]: string | number | boolean | void,
13
7
  };
@@ -1,6 +1,8 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
3
  import Stack from './stack';
4
+ import Inline from './inline';
5
+ import Box from './box';
4
6
  import { useTheme } from './hooks';
5
7
  import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
6
8
  import { createUseStyles } from './jss';
@@ -63,8 +65,8 @@ var Callout = function(param) {
63
65
  children: /*#__PURE__*/ _jsxs(ThemeVariant, {
64
66
  isInverse: false,
65
67
  children: [
66
- icon && /*#__PURE__*/ _jsx("div", {
67
- className: classes.icon,
68
+ icon && /*#__PURE__*/ _jsx(Box, {
69
+ paddingRight: 16,
68
70
  children: icon
69
71
  }),
70
72
  /*#__PURE__*/ _jsx("div", {
@@ -72,18 +74,41 @@ var Callout = function(param) {
72
74
  children: /*#__PURE__*/ _jsxs(Stack, {
73
75
  space: 16,
74
76
  children: [
75
- /*#__PURE__*/ _jsxs(_Fragment, {
77
+ /*#__PURE__*/ _jsxs(Inline, {
78
+ fullWidth: true,
79
+ alignItems: "flex-start",
80
+ space: "between",
76
81
  children: [
77
- /*#__PURE__*/ _jsx(Text3, {
78
- as: "h2",
79
- regular: true,
80
- children: title
82
+ /*#__PURE__*/ _jsxs(Stack, {
83
+ space: 4,
84
+ children: [
85
+ /*#__PURE__*/ _jsx(Text3, {
86
+ as: "h2",
87
+ regular: true,
88
+ children: title
89
+ }),
90
+ /*#__PURE__*/ _jsx(Text2, {
91
+ as: "p",
92
+ regular: true,
93
+ color: colors.textSecondary,
94
+ children: description
95
+ })
96
+ ]
81
97
  }),
82
- /*#__PURE__*/ _jsx(Text2, {
83
- as: "p",
84
- regular: true,
85
- color: colors.textSecondary,
86
- children: description
98
+ onClose && /*#__PURE__*/ _jsx(IconButton, {
99
+ size: 40,
100
+ style: {
101
+ display: 'flex',
102
+ margin: '-8px -12px',
103
+ alignItems: 'center',
104
+ justifyContent: 'center'
105
+ },
106
+ onPress: onClose,
107
+ "aria-label": texts.closeButtonLabel,
108
+ children: /*#__PURE__*/ _jsx(IconCloseRegular, {
109
+ size: 24,
110
+ color: colors.neutralHigh
111
+ })
87
112
  })
88
113
  ]
89
114
  }),
@@ -94,20 +119,6 @@ var Callout = function(param) {
94
119
  })
95
120
  ]
96
121
  })
97
- }),
98
- onClose && /*#__PURE__*/ _jsx(IconButton, {
99
- size: 40,
100
- style: {
101
- display: 'flex',
102
- margin: '-8px -12px -8px 0',
103
- alignItems: 'center',
104
- justifyContent: 'center'
105
- },
106
- onPress: onClose,
107
- "aria-label": texts.closeButtonLabel,
108
- children: /*#__PURE__*/ _jsx(IconCloseRegular, {
109
- color: colors.neutralHigh
110
- })
111
122
  })
112
123
  ]
113
124
  })
@@ -1,2 +1,2 @@
1
1
  // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
2
- export var PACKAGE_VERSION = '10.24.1';
2
+ export var PACKAGE_VERSION = '10.26.0';
@@ -270,11 +270,6 @@ var Popover = function(param) {
270
270
  }, [
271
271
  isVisible
272
272
  ]);
273
- var handleClose = function() {
274
- if (onClose) {
275
- onClose();
276
- }
277
- };
278
273
  var popoverContainer = null;
279
274
  if (isVisible && targetPosition) {
280
275
  var ref2 = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref2.containerStyles, arrowStyles = ref2.arrowStyles;
@@ -314,7 +309,10 @@ var Popover = function(param) {
314
309
  /*#__PURE__*/ _jsx("div", {
315
310
  className: classes.closeButtonIcon,
316
311
  children: /*#__PURE__*/ _jsx(IconButton, {
317
- onPress: handleClose,
312
+ onPress: function(e) {
313
+ onClose === null || onClose === void 0 ? void 0 : onClose();
314
+ e.stopPropagation();
315
+ },
318
316
  trackingEvent: trackingEvent,
319
317
  "aria-label": texts.modalClose,
320
318
  children: /*#__PURE__*/ _jsx(IcnCloseRegular, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telefonica/mistica",
3
- "version": "10.24.1",
3
+ "version": "10.26.0",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -122,7 +122,7 @@
122
122
  },
123
123
  "dependencies": {
124
124
  "@juggle/resize-observer": "^3.3.1",
125
- "@tef-novum/webview-bridge": "^3.0.0",
125
+ "@tef-novum/webview-bridge": "^3.2.1",
126
126
  "@telefonica/libphonenumber": "^2.8.0",
127
127
  "classnames": "^2.3.1",
128
128
  "jss": "^10.6.0",