@telefonica/mistica 11.10.0 → 11.11.0

package/dist/card.d.ts

@@ -3,18 +3,23 @@ import Tag from './tag';
 import { ButtonLink, ButtonPrimary } from './button';
 import Video from './video';
 import Image from './image';
-import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
 declare type MediaCardProps = {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleLinesMax?: number;
     title?: string;
+    titleLinesMax?: number;
     description?: string;
+    descriptionLinesMax?: number;
     extra?: React.ReactNode;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
     children?: void;
+    dataAttributes?: DataAttributes;
     'aria-label'?: string;
+    onClose?: () => void;
 };
 export declare const MediaCard: React.ForwardRefExoticComponent<MediaCardProps & React.RefAttributes<HTMLDivElement>>;
 interface DataCardProps {
@@ -24,8 +29,11 @@ interface DataCardProps {
     icon?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     title?: string;
+    titleLinesMax?: number;
     subtitle?: string;
+    subtitleLinesMax?: number;
     description?: string;
+    descriptionLinesMax?: number;
     extra?: React.ReactNode;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
@@ -33,6 +41,40 @@ interface DataCardProps {
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
+    onClose?: () => void;
 }
 export declare const DataCard: React.ForwardRefExoticComponent<DataCardProps & React.RefAttributes<HTMLDivElement>>;
+interface SnapCardBaseProps {
+    icon?: React.ReactElement;
+    title?: string;
+    titleLinesMax?: number;
+    subtitle?: string;
+    subtitleLinesMax?: number;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    extra?: React.ReactNode;
+    isInverse?: boolean;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    children?: void;
+}
+interface SnapCardToProps extends SnapCardBaseProps {
+    to?: string;
+    fullPageOnWebView?: boolean;
+    href?: undefined;
+    onPress?: undefined;
+}
+interface SnapCardHrefProps extends SnapCardBaseProps {
+    href?: string;
+    newTab?: boolean;
+    onPress?: undefined;
+    to?: undefined;
+}
+interface SnapCardOnPressProps extends SnapCardBaseProps {
+    onPress?: () => void;
+    href?: undefined;
+    to?: undefined;
+}
+declare type SnapCardProps = SnapCardToProps | SnapCardHrefProps | SnapCardOnPressProps;
+export declare const SnapCard: React.ForwardRefExoticComponent<SnapCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/card.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.DataCard = exports.MediaCard = void 0;
+exports.SnapCard = exports.DataCard = exports.MediaCard = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _tag = _interopRequireDefault(require("./tag"));
@@ -14,6 +14,8 @@ var _jss = require("./jss");
 var _boxed = require("./boxed");
 var _buttonGroup = _interopRequireDefault(require("./button-group"));
 var _image = require("./image");
+var _maybeDismissable = _interopRequireWildcard(require("./maybe-dismissable"));
+var _touchable = _interopRequireDefault(require("./touchable"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -40,6 +42,62 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+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 _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
+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;
+}
 var useCardContentStyles = (0, _jss).createUseStyles(function() {
     return {
         actions: {
@@ -50,7 +108,7 @@ var useCardContentStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var CardContent = function CardContent(param) {
-    var headline = param.headline, pretitle = param.pretitle, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink;
+    var headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink;
     var theme = (0, _hooks).useTheme();
     var classes = useCardContentStyles();
     var renderHeadline = function renderHeadline() {
@@ -80,16 +138,24 @@ var CardContent = function CardContent(param) {
                                     space: 4,
                                     children: [
                                         pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                            wordBreak: true,
+                                            truncate: pretitleLinesMax,
+                                            as: "div",
                                             regular: true,
                                             transform: "uppercase",
                                             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,
                                             children: subtitle
                                         })
@@ -99,6 +165,8 @@ var CardContent = function CardContent(param) {
                         })
                     }),
                     description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                        wordBreak: true,
+                        truncate: descriptionLinesMax,
                         as: "p",
                         regular: true,
                         color: theme.colors.textSecondary,
@@ -119,10 +187,27 @@ var CardContent = function CardContent(param) {
         ]
     });
 };
+var MaybeSection = function MaybeSection(param) {
+    var ariaLabel = param["aria-label"], className = param.className, children = param.children;
+    var isDismissable = (0, _maybeDismissable).useIsDismissable();
+    if (isDismissable) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            className: className,
+            children: children
+        });
+    } else {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx("section", {
+            className: className,
+            "aria-label": ariaLabel,
+            children: children
+        });
+    }
+};
 var useMediaCardStyles = (0, _jss).createUseStyles(function() {
     return {
         boxed: {
-            height: "100%"
+            height: "100%",
+            width: "100%"
         },
         mediaCard: {
             display: "flex",
@@ -139,14 +224,15 @@ var useMediaCardStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var media = param.media, headline = param.headline, pretitle = param.pretitle, title = param.title, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, ariaLabel = param["aria-label"];
+    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useMediaCardStyles({
         media: media
     });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    var content = /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
+        dataAttributes: dataAttributes,
         ref: ref,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(MaybeSection, {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
@@ -158,8 +244,11 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
                         headline: headline,
                         pretitle: pretitle,
+                        pretitleLinesMax: pretitleLinesMax,
                         title: title,
+                        titleLinesMax: titleLinesMax,
                         description: description,
+                        descriptionLinesMax: descriptionLinesMax,
                         extra: extra,
                         button: button,
                         buttonLink: buttonLink
@@ -168,12 +257,18 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             ]
         })
     });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_maybeDismissable.default, {
+        onClose: onClose,
+        "aria-label": ariaLabel,
+        children: content
+    });
 });
 exports.MediaCard = MediaCard;
 var useDataCardStyles = (0, _jss).createUseStyles(function() {
     return {
         boxed: {
-            height: "100%"
+            height: "100%",
+            width: "100%"
         },
         dataCard: {
             display: "flex",
@@ -184,13 +279,13 @@ var useDataCardStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var icon = param.icon, headline = param.headline, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"];
+    var icon = param.icon, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useDataCardStyles();
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    var content = /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
         dataAttributes: dataAttributes,
         ref: ref,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(MaybeSection, {
             className: classes.dataCard,
             "aria-label": ariaLabel,
             children: [
@@ -201,8 +296,11 @@ var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
                     headline: headline,
                     title: title,
+                    titleLinesMax: titleLinesMax,
                     subtitle: subtitle,
+                    subtitleLinesMax: subtitleLinesMax,
                     description: description,
+                    descriptionLinesMax: descriptionLinesMax,
                     extra: extra,
                     button: button,
                     buttonLink: buttonLink
@@ -210,5 +308,109 @@ var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             ]
         })
     });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_maybeDismissable.default, {
+        "aria-label": ariaLabel,
+        onClose: onClose,
+        children: content
+    });
 });
 exports.DataCard = DataCard;
+var useSnapCardStyles = (0, _jss).createUseStyles(function(theme) {
+    return {
+        boxed: {
+            height: "100%"
+        },
+        touchable: _defineProperty({
+            display: "flex",
+            height: "100%"
+        }, theme.mq.supportsHover, {
+            "&:hover": {
+                backgroundColor: function backgroundColor(param) {
+                    var isTouchable = param.isTouchable, isInverse = param.isInverse;
+                    return isTouchable && !isInverse && !theme.isDarkMode ? theme.colors.backgroundAlternative : "transparent";
+                }
+            }
+        }),
+        snapCard: _defineProperty({
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            padding: 16,
+            minHeight: 80,
+            minWidth: 104
+        }, theme.mq.desktopOrBigger, {
+            padding: 24
+        })
+    };
+});
+var SnapCard = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var icon = _param.icon, title = _param.title, titleLinesMax = _param.titleLinesMax, subtitle = _param.subtitle, subtitleLinesMax = _param.subtitleLinesMax, dataAttributes = _param.dataAttributes, ariaLabel = _param["aria-label"], extra = _param.extra, _isInverse = _param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, touchableProps = _objectWithoutProperties(_param, [
+        "icon",
+        "title",
+        "titleLinesMax",
+        "subtitle",
+        "subtitleLinesMax",
+        "dataAttributes",
+        "aria-label",
+        "extra",
+        "isInverse"
+    ]);
+    var isTouchable = Boolean(touchableProps.to || touchableProps.href || touchableProps.onPress);
+    var classes = useSnapCardStyles({
+        isTouchable: isTouchable,
+        isInverse: isInverse,
+        hasIcon: !!icon
+    });
+    var colors = (0, _hooks).useTheme().colors;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+        className: classes.boxed,
+        dataAttributes: dataAttributes,
+        ref: ref,
+        isInverse: isInverse,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+            maybe: true
+        }, touchableProps, {
+            className: classes.touchable,
+            "aria-label": ariaLabel,
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+                className: classes.snapCard,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+                        children: [
+                            icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                                paddingBottom: 16,
+                                children: icon
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                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,
+                                        as: "p",
+                                        children: subtitle
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    extra && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                        paddingTop: 16,
+                        children: extra
+                    })
+                ]
+            })
+        }))
+    });
+});
+exports.SnapCard = SnapCard;

package/dist/card.js.flow

@@ -9,17 +9,23 @@ import type {
   DataAttributes,
   RendersElement,
   RendersNullableElement,
+  TrackingEvent,
 } from "./utils/types";
 declare type MediaCardProps = {
   media: RendersElement<typeof Image> | RendersElement<typeof Video>,
   headline?: string | RendersNullableElement<typeof Tag>,
   pretitle?: string,
+  pretitleLinesMax?: number,
   title?: string,
+  titleLinesMax?: number,
   description?: string,
+  descriptionLinesMax?: number,
   extra?: React.Node,
   button?: RendersNullableElement<typeof ButtonPrimary>,
   buttonLink?: RendersNullableElement<typeof ButtonLink>,
+  dataAttributes?: DataAttributes,
   "aria-label"?: string,
+  onClose?: () => void,
 };
 declare export var MediaCard: React.AbstractComponent<MediaCardProps, HTMLDivElement>;
 declare type DataCardProps = {
@@ -29,8 +35,11 @@ declare type DataCardProps = {
   icon?: React.Element<any>,
   headline?: string | RendersNullableElement<typeof Tag>,
   title?: string,
+  titleLinesMax?: number,
   subtitle?: string,
+  subtitleLinesMax?: number,
   description?: string,
+  descriptionLinesMax?: number,
   extra?: React.Node,
   button?: RendersNullableElement<typeof ButtonPrimary>,
   buttonLink?: RendersNullableElement<typeof ButtonLink>,
@@ -39,6 +48,41 @@ declare type DataCardProps = {
    */
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
+  onClose?: () => void,
 };
 declare export var DataCard: React.AbstractComponent<DataCardProps, HTMLDivElement>;
+declare type SnapCardBaseProps = {
+  icon?: React.Element<any>,
+  title?: string,
+  titleLinesMax?: number,
+  subtitle?: string,
+  subtitleLinesMax?: number,
+  /**
+   * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
+   */
+  dataAttributes?: DataAttributes,
+  "aria-label"?: string,
+  extra?: React.Node,
+  isInverse?: boolean,
+  trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
+};
+declare type SnapCardToProps = {
+  ...$Exact<SnapCardBaseProps>,
+  to?: string,
+  fullPageOnWebView?: boolean,
+};
+declare type SnapCardHrefProps = {
+  ...$Exact<SnapCardBaseProps>,
+  href?: string,
+  newTab?: boolean,
+};
+declare type SnapCardOnPressProps = {
+  ...$Exact<SnapCardBaseProps>,
+  onPress?: () => void,
+};
+declare type SnapCardProps =
+  | SnapCardToProps
+  | SnapCardHrefProps
+  | SnapCardOnPressProps;
+declare export var SnapCard: React.AbstractComponent<SnapCardProps, HTMLDivElement>;
 declare export {};

package/dist/highlighted-card.d.ts

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { RendersNullableElement, TrackingEvent } from './utils/types';
+import type { DataAttributes, RendersNullableElement, TrackingEvent } from './utils/types';
 import type { NullableButtonElement } from './button';
 interface CommonProps {
     title: string;
+    titleLinesMax?: number;
     description: string;
+    descriptionLinesMax?: number;
     imageUrl?: string;
     imageFit?: 'fit' | 'fill';
-    backgroundImageUrl?: string;
     onClose?: () => void;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     isInverse?: boolean;
     children?: void;
     'aria-label'?: string;
     width?: string | number;
+    dataAttributes?: DataAttributes;
 }
 interface BasicProps extends CommonProps {
     button?: undefined;

package/dist/highlighted-card.js

@@ -9,12 +9,10 @@ var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _box = _interopRequireDefault(require("./box"));
 var _touchable = _interopRequireDefault(require("./touchable"));
-var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
-var _color = require("./utils/color");
 var _hooks = require("./hooks");
 var _text = require("./text");
-var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _boxed = require("./boxed");
+var _maybeDismissable = _interopRequireWildcard(require("./maybe-dismissable"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,35 +115,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             minWidth: 100,
             height: "inherit"
         },
-        dismissableContainer: {
-            position: "relative",
-            display: "flex",
-            flexShrink: 0,
-            width: function width(param) {
-                var width2 = param.width;
-                return width2 || "100%";
-            }
-        },
-        dismissableButton: {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 48,
-            height: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-        },
-        dismissableCircleContainer: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 24,
-            height: 24,
-            margin: "0 0 8px 8px",
-            borderRadius: "50%",
-            backgroundColor: (0, _color).applyAlpha(theme.colors.background, 0.7)
-        },
         textContainer: (_obj = {
             paddingLeft: 16,
             paddingTop: 24,
@@ -165,43 +134,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             display: "flex",
             flexShrink: 0,
             width: function width(param) {
-                var width3 = param.width;
-                return width3 || "100%";
+                var width2 = param.width;
+                return width2 || "100%";
             }
         }
     };
 });
-var Dismissable = function Dismissable(param) {
-    var children = param.children, width = param.width, _onClose = param.onClose, onClose = _onClose === void 0 ? function onClose() {} : _onClose;
-    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var classes = useStyles({
-        isInverse: isInverse,
-        width: width
-    });
-    var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
-        className: classes.dismissableContainer,
-        children: [
-            children,
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-                className: classes.dismissableButton,
-                onPress: onClose,
-                "aria-label": texts.closeButtonLabel,
-                style: {
-                    display: "flex",
-                    width: 48,
-                    height: 48
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.dismissableCircleContainer,
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
-                        color: colors.neutralHigh
-                    })
-                })
-            })
-        ]
-    });
-};
 var Content = function Content(props) {
     var title = props.title, description = props.description, imageUrl = props.imageUrl, imageFit = props.imageFit;
     var isInverseOutside = (0, _themeVariantContext).useIsInverseVariant();
@@ -213,18 +151,24 @@ var Content = function Content(props) {
         width: props.width
     });
     var theme = (0, _hooks).useTheme();
+    var isDismissable = (0, _maybeDismissable).useIsDismissable();
     var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs(_boxed.Boxed, {
         isInverse: isInverse,
         className: classes.container,
+        dataAttributes: props.dataAttributes,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 // don't create another region when the Content is inside a Dismissable wrapper
-                role: props["aria-label"] ? "region" : undefined,
+                role: !isDismissable ? "region" : undefined,
                 className: classes.textContainer,
-                "aria-label": props["aria-label"],
+                // aria-label is already in Dismisable wrapper
+                "aria-label": !isDismissable ? props["aria-label"] : undefined,
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                        as: "h1",
                         regular: true,
+                        wordBreak: true,
+                        truncate: props.titleLinesMax,
                         children: title
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
@@ -232,6 +176,9 @@ 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
                         })
                     }),
@@ -294,14 +241,14 @@ var HighlightedCard = function HighlightedCard(_param) {
         "aria-label"
     ]);
     var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : props.title;
-    return props.onClose ? /*#__PURE__*/ (0, _jsxRuntime).jsx(Dismissable, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_maybeDismissable.default, {
         onClose: props.onClose,
         "aria-label": label,
         width: props.width,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props))
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props, {
-        "aria-label": label
-    }));
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props, {
+            "aria-label": label
+        }))
+    });
 };
 var _default = HighlightedCard;
 exports.default = _default;