@telefonica/mistica 12.2.0 → 12.4.0

package/dist/card.js

@@ -138,7 +138,6 @@ var CardContent = function CardContent(param) {
                                     space: 4,
                                     children: [
                                         pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                                            wordBreak: true,
                                             truncate: pretitleLinesMax,
                                             as: "div",
                                             regular: true,
@@ -146,14 +145,12 @@ var CardContent = function CardContent(param) {
                                             children: pretitle
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
-                                            wordBreak: true,
                                             truncate: titleLinesMax,
                                             as: "h1",
                                             regular: true,
                                             children: title
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                            wordBreak: true,
                                             truncate: subtitleLinesMax,
                                             as: "div",
                                             regular: true,
@@ -165,7 +162,6 @@ var CardContent = function CardContent(param) {
                         })
                     }),
                     description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                        wordBreak: true,
                         truncate: descriptionLinesMax,
                         as: "p",
                         regular: true,
@@ -396,14 +392,12 @@ var SnapCard = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                                 space: 4,
                                 children: [
                                     title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                        wordBreak: true,
                                         truncate: titleLinesMax,
                                         as: "h1",
                                         regular: true,
                                         children: title
                                     }),
                                     subtitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                        wordBreak: true,
                                         truncate: subtitleLinesMax,
                                         regular: true,
                                         color: colors.textSecondary,

package/dist/carousel.js

@@ -20,6 +20,7 @@ var _image = require("./image");
 var _dom = require("./utils/dom");
 var _platform = require("./utils/platform");
 var _documentVisibility = require("./utils/document-visibility");
+var _containerTypeContext = require("./container-type-context");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -218,8 +219,19 @@ var arrowButtonStyle = function arrowButtonStyle(theme) {
         display: "none"
     });
 };
+var arrowButtonSeparation = function arrowButtonSeparation(containerType, isLargeDesktop, sideMargin) {
+    switch(containerType){
+        case "mobile-column":
+        case "tablet-column":
+            return -sideMargin;
+        case "desktop-wide-column":
+            return isLargeDesktop ? -(24 + arrowButtonSize) : -arrowButtonSize / 2;
+        default:
+            return -arrowButtonSize / 2;
+    }
+};
 var useStyles = (0, _jss).createUseStyles(function(theme) {
-    var _obj, _obj1, _obj2;
+    var _obj;
     return {
         carouselContainer: {
             // This value is a workaround to solve an issue when the page is rendered in a hidden webview
@@ -231,26 +243,18 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             position: "absolute",
             zIndex: 1,
             top: "calc(50% - ".concat(arrowButtonSize / 2, "px)"),
-            "&.prev": (_obj = {
-                left: -arrowButtonSize / 2
-            }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+            "&.prev": {
                 left: function left(param) {
-                    var sideMargin = param.sideMargin;
-                    return -sideMargin;
+                    var containerType = param.containerType, isLargeDesktop = param.isLargeDesktop, sideMargin = param.sideMargin;
+                    return arrowButtonSeparation(containerType, isLargeDesktop, sideMargin);
                 }
-            }), _defineProperty(_obj, theme.mq.largeDesktop, {
-                left: -(24 + arrowButtonSize)
-            }), _obj),
-            "&.next": (_obj1 = {
-                right: -arrowButtonSize / 2
-            }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+            },
+            "&.next": {
                 right: function right(param) {
-                    var sideMargin = param.sideMargin;
-                    return -sideMargin;
+                    var containerType = param.containerType, isLargeDesktop = param.isLargeDesktop, sideMargin = param.sideMargin;
+                    return arrowButtonSeparation(containerType, isLargeDesktop, sideMargin);
                 }
-            }), _defineProperty(_obj1, theme.mq.largeDesktop, {
-                right: -(24 + arrowButtonSize)
-            }), _obj1)
+            }
         }),
         hasScroll: {},
         centered: {},
@@ -276,7 +280,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 width: "25%"
             }
         })),
-        item: (_obj2 = {
+        item: (_obj = {
             scrollSnapStop: (0, _platform).isAndroid(theme.platformOverrides) ? "always" : "normal",
             scrollSnapAlign: "start",
             flexShrink: 0,
@@ -295,7 +299,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 },
                 scrollMargin: 0
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             width: function width(param) {
                 var itemsPerPageConfig = param.itemsPerPageConfig, gap = param.gap;
                 return "calc(".concat(100 / itemsPerPageConfig.mobile, "% + ").concat(gap / itemsPerPageConfig.mobile, "px)");
@@ -346,14 +350,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                     return 0;
                 }
             }
-        }), _defineProperty(_obj2, "&:not(:empty) ~ &:not(:empty)", {
+        }), _defineProperty(_obj, "&:not(:empty) ~ &:not(:empty)", {
             paddingLeft: function paddingLeft(param) {
                 var gap = param.gap;
                 return gap;
             }
-        }), _defineProperty(_obj2, "&:empty", {
+        }), _defineProperty(_obj, "&:empty", {
             display: "none"
-        }), _obj2),
+        }), _obj),
         bullets: {
             display: "flex",
             justifyContent: "center"
@@ -417,9 +421,10 @@ var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function BaseCarousel(param) {
     var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     var texts = (0, _hooks).useTheme().texts;
+    var containerType = (0, _containerTypeContext).useContainerType();
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
-    var isDesktopOrBigger = (0, _hooks).useScreenSize().isDesktopOrBigger;
+    var ref4 = (0, _hooks).useScreenSize(), isDesktopOrBigger = ref4.isDesktopOrBigger, isLargeDesktop = ref4.isLargeDesktop;
     var gap = gapProp !== null && gapProp !== void 0 ? gapProp : isDesktopOrBigger ? 16 : 8;
     var sideMargin = (0, _responsiveLayout).useResonsiveLayoutMargin();
     var classes = useStyles({
@@ -427,16 +432,18 @@ var BaseCarousel = function BaseCarousel(param) {
         mobilePageOffsetConfig: mobilePageOffsetConfig,
         free: free,
         gap: gap,
-        sideMargin: sideMargin
+        sideMargin: sideMargin,
+        containerType: containerType,
+        isLargeDesktop: isLargeDesktop
     });
     var carouselRef = React.useRef(null);
     var itemsPerPageFloor = isDesktopOrBigger ? Math.floor(itemsPerPageConfig.desktop) : Math.floor(itemsPerPageConfig.mobile);
     var pagesCount = Math.ceil(items.length / itemsPerPageFloor);
-    var ref3 = _slicedToArray(React.useState({
+    var ref1 = _slicedToArray(React.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref1 = ref3[0], scrollLeft1 = ref1.scrollLeft, scrollRight1 = ref1.scrollRight, setScroll = ref3[1];
-    var ref2 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref2[0], setItemScrollPositions = ref2[1];
+    }), 2), ref2 = ref1[0], scrollLeft1 = ref2.scrollLeft, scrollRight1 = ref2.scrollRight, setScroll = ref1[1];
+    var ref3 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref3[0], setItemScrollPositions = ref3[1];
     var pagesScrollPositions = calcPagesScrollPositions(itemScrollPositions, pagesCount);
     var scrollPositions = itemsToScroll ? calcPagesScrollPositions(itemScrollPositions, Math.ceil(items.length / itemsToScroll)) : pagesScrollPositions;
     var showNextArrow = scrollRight1 !== 0;
@@ -735,10 +742,10 @@ var Slideshow = function Slideshow(param) {
         sideMargin: sideMargin
     });
     var carouselRef = React.useRef(null);
-    var ref5 = _slicedToArray(React.useState({
+    var ref6 = _slicedToArray(React.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref4 = ref5[0], scrollLeft2 = ref4.scrollLeft, scrollRight2 = ref4.scrollRight, setScroll = ref5[1];
+    }), 2), ref5 = ref6[0], scrollLeft2 = ref5.scrollLeft, scrollRight2 = ref5.scrollRight, setScroll = ref6[1];
     var goPrev = React.useCallback(function() {
         var carouselEl = carouselRef.current;
         if (carouselEl) {

package/dist/container-type-context.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ContainerType } from './utils/types';
+declare const ContainerTypeContext: React.Context<ContainerType | null>;
+export declare const useContainerType: () => ContainerType;
+export default ContainerTypeContext;

package/dist/container-type-context.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.useContainerType = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("./hooks");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+var ContainerTypeContext = /*#__PURE__*/ React.createContext(null);
+var useContainerType = function useContainerType() {
+    var containerType = React.useContext(ContainerTypeContext);
+    var ref = (0, _hooks).useScreenSize(), isTablet = ref.isTablet, isDesktopOrBigger = ref.isDesktopOrBigger, isLargeDesktop = ref.isLargeDesktop;
+    if (containerType) {
+        return containerType;
+    }
+    if (isLargeDesktop) {
+        return "desktop-wide-column";
+    }
+    if (isDesktopOrBigger) {
+        return "desktop-medium-column";
+    }
+    if (isTablet) {
+        return "tablet-column";
+    }
+    return "mobile-column";
+};
+exports.useContainerType = useContainerType;
+var _default = ContainerTypeContext;
+exports.default = _default;

package/dist/container-type-context.js.flow

@@ -0,0 +1,7 @@
+// @flow
+
+import * as React from "react";
+import type { ContainerType } from "./utils/types";
+declare var ContainerTypeContext: React.Context<ContainerType | null>;
+declare export var useContainerType: () => ContainerType;
+declare export default typeof ContainerTypeContext;

package/dist/grid-layout.js

@@ -5,8 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
+var _hooks = require("./hooks");
+var _containerTypeContext = _interopRequireDefault(require("./container-type-context"));
 var _jss = require("./jss");
 var _dom = require("./utils/dom");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -154,18 +161,28 @@ var GridLayout = function GridLayout(props) {
         verticalSpace: (_verticalSpace = props.verticalSpace) !== null && _verticalSpace !== void 0 ? _verticalSpace : 0
     });
     var dataAttributes = (0, _dom).getPrefixedDataAttributes(props.dataAttributes);
+    var ref = (0, _hooks).useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
+    var getContainerType = function getContainerType(containerType) {
+        return isMobile ? "mobile-column" : isTablet ? "tablet-column" : containerType;
+    };
     if (props.template === "6+6") {
         return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span6,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span6,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 })
             ]
         }));
@@ -175,13 +192,19 @@ var GridLayout = function GridLayout(props) {
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span8,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span8,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 })
             ]
         }));
@@ -191,16 +214,22 @@ var GridLayout = function GridLayout(props) {
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span4,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span4,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
@@ -216,16 +245,22 @@ var GridLayout = function GridLayout(props) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span5,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span5,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
@@ -238,13 +273,19 @@ var GridLayout = function GridLayout(props) {
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span3,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span3,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span9,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span9,
+                        children: props.right
+                    })
                 })
             ]
         }));
@@ -257,9 +298,12 @@ var GridLayout = function GridLayout(props) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span10,
-                    children: props.children
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-wide-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span10,
+                        children: props.children
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1

package/dist/highlighted-card.js

@@ -169,7 +169,6 @@ var Content = function Content(props) {
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
                         as: "h1",
                         regular: true,
-                        wordBreak: true,
                         truncate: props.titleLinesMax,
                         children: title
                     }),
@@ -178,7 +177,6 @@ var Content = function Content(props) {
                         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
                             regular: true,
                             color: theme.colors.textSecondary,
-                            wordBreak: true,
                             truncate: props.descriptionLinesMax,
                             as: "p",
                             children: description

package/dist/hooks.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ScreenSizeContextType } from './screen-size-context';
 import type { Theme } from './theme';
+import type { ScreenSizeContextType } from './screen-size-context';
 export declare const useTheme: () => Theme;
 export declare const useDisableBodyScroll: (disable: boolean) => void;
 export declare const useScreenSize: () => ScreenSizeContextType;

package/dist/hooks.js.flow

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from "react";
-import type { ScreenSizeContextType } from "./screen-size-context";
 import type { Theme } from "./theme";
+import type { ScreenSizeContextType } from "./screen-size-context";
 declare export var useTheme: () => Theme;
 declare export var useDisableBodyScroll: (disable: boolean) => void;
 declare export var useScreenSize: () => ScreenSizeContextType;

package/dist/list.js

@@ -278,7 +278,6 @@ var Content = function Content(param) {
                     space: 4,
                     children: [
                         headline && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                            wordBreak: true,
                             regular: true,
                             color: colors.textPrimary,
                             children: headline
@@ -287,7 +286,6 @@ var Content = function Content(param) {
                             space: 2,
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textPrimary,
                                     truncate: titleLinesMax,
@@ -295,14 +293,12 @@ var Content = function Content(param) {
                                     children: title
                                 }),
                                 subtitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textSecondary,
                                     truncate: subtitleLinesMax,
                                     children: subtitle
                                 }),
                                 description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textSecondary,
                                     truncate: descriptionLinesMax,

package/dist/navigation-breadcrumbs.d.ts

@@ -1,4 +1,9 @@
+/**
+ * Figma: https://www.figma.com/file/BctaFHf0PVPX2uwRSl8taf/Breadcrumbs?node-id=2%3A61
+ * Accessibility: https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html
+ */
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 export declare type NavigationBreadcrumbsProps = {
     title: string;
     breadcrumbs: ReadonlyArray<{
@@ -6,6 +11,8 @@ export declare type NavigationBreadcrumbsProps = {
         readonly url: string;
     }>;
     children?: void;
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
 };
 declare const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps>;
 export default NavigationBreadcrumbs;