@telefonica/mistica 17.8.0 → 17.10.0

package/src/skins/types/colors.tsx

@@ -49,6 +49,16 @@ export type Colors = {
     backgroundDropZoneNegativeDragover: string;
     backgroundDropZoneMediaHover: string;
     backgroundDropZoneMediaDragover: string;
+    messageBubbleBackgroundOutgoing: string;
+    messageBubbleBackgroundOutgoingBrand: string;
+    messageBubbleBackgroundOutgoingAlternative: string;
+    messageBubbleBackgroundOutgoingNegative: string;
+    messageBubbleBackgroundOutgoingMedia: string;
+    messageBubbleBackgroundIncoming: string;
+    messageBubbleBackgroundIncomingBrand: string;
+    messageBubbleBackgroundIncomingAlternative: string;
+    messageBubbleBackgroundIncomingNegative: string;
+    messageBubbleBackgroundIncomingMedia: string;
     skeletonWave: string;
     borderLow: string;
     border: string;

package/src/skins/types/index.tsx

@@ -66,6 +66,8 @@ export type TextPresetsConfig = {
     cardTitleDefault: TextSizeTokenConfig;
     cardTitleSnap: TextSizeTokenConfig;
     drawerTitle: TextTokenConfig;
+    feedbackScreenDescription: TextTokenConfig;
+    feedbackScreenTitle: TextTokenConfig;
     chipLabel: TextTokenConfig;
     chipLabelSmall: TextTokenConfig;
     link: TextWeightTokenConfig<'regular' | 'medium'>;
@@ -121,6 +123,7 @@ export type SpacingConfig = {
     headerPadding: PaddingYValues;
     drawerPadding: PaddingValues;
     boxedDefaultPadding: PaddingXValues;
+    boxedSmallPadding: PaddingYValues;
     responsiveLayoutMargin: ResponsiveValue<number>;
 };
 

package/src/skins/vivo-evolution.tsx

@@ -140,6 +140,16 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.vivoNeutral0, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurple900, 0.3),
             backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurple900, 0.5),
+            messageBubbleBackgroundOutgoing: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingBrand: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingAlternative: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingNegative: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingMedia: palette.vivoNeutral25,
+            messageBubbleBackgroundIncoming: palette.vivoNeutral25,
+            messageBubbleBackgroundIncomingBrand: palette.vivoNeutral0,
+            messageBubbleBackgroundIncomingAlternative: palette.vivoNeutral0,
+            messageBubbleBackgroundIncomingNegative: palette.vivoNeutral0,
+            messageBubbleBackgroundIncomingMedia: palette.vivoNeutral0,
             skeletonWave: palette.vivoNeutral100,
             borderLow: palette.vivoNeutral25,
             border: palette.vivoNeutral200,
@@ -449,6 +459,16 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.vivoNeutral0, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.vivoNeutral0, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.vivoNeutral0, 0.05),
+            messageBubbleBackgroundOutgoing: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingBrand: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingAlternative: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingNegative: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingMedia: palette.vivoNeutral900,
+            messageBubbleBackgroundIncoming: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingBrand: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingAlternative: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingNegative: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingMedia: palette.vivoNeutral900,
             skeletonWave: palette.vivoNeutral600,
             borderLow: palette.vivoNeutral950,
             border: palette.vivoNeutral900,
@@ -737,8 +757,8 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 14, mobile: 12}},
             cardTitle: {weight: 'medium'},
-            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
-            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 18, mobile: 16}},
+            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 16}},
+            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 18, mobile: 14}},
             chipLabel: {
                 lineHeight: {desktop: 24, mobile: 20},
                 size: {desktop: 16, mobile: 14},
@@ -754,6 +774,16 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'medium',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
+                weight: 'medium',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 20},
                 size: {desktop: 16, mobile: 14},
@@ -854,6 +884,7 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 40},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 24}, right: {mobile: 16, desktop: 24}},
+            boxedSmallPadding: {top: {mobile: 16, desktop: 16}, bottom: {mobile: 16, desktop: 16}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };

package/src/skins/vivo.tsx

@@ -96,6 +96,16 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.3),
             backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
+            messageBubbleBackgroundOutgoing: palette.grey1,
+            messageBubbleBackgroundOutgoingBrand: palette.grey1,
+            messageBubbleBackgroundOutgoingAlternative: palette.grey1,
+            messageBubbleBackgroundOutgoingNegative: palette.grey1,
+            messageBubbleBackgroundOutgoingMedia: palette.grey1,
+            messageBubbleBackgroundIncoming: palette.grey1,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -405,6 +415,16 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey5,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
@@ -710,6 +730,16 @@ export const getVivoSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'medium',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'medium',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -810,6 +840,7 @@ export const getVivoSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 40},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 16, desktop: 16}, bottom: {mobile: 16, desktop: 16}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };

package/src/stepper.tsx

@@ -5,11 +5,13 @@ import {Text, Text1, getTextSizes} from './text';
 import {useElementDimensions, useTheme} from './hooks';
 import * as tokens from './text-tokens';
 import IconSuccess from './icons/icon-success';
+import IconStepperSuccessVivo from './icons/icon-stepper-success-vivo';
 import * as styles from './stepper.css';
 import {pxToRem, applyCssVars} from './utils/css';
 import {vars} from './skins/skin-contract.css';
 import {getPrefixedDataAttributes} from './utils/dom';
 import ScreenReaderOnly from './screen-reader-only';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 
 import type {DataAttributes} from './utils/types';
 
@@ -32,7 +34,7 @@ const Stepper = ({
     'aria-describedby': ariaDescribedby,
     dataAttributes,
 }: StepperProps): JSX.Element => {
-    const {texts, t, textPresets} = useTheme();
+    const {texts, t, textPresets, skinName} = useTheme();
     const {height, ref} = useElementDimensions();
     const textContainerHeight = height;
 
@@ -87,11 +89,19 @@ const Stepper = ({
                                     })}
                                     aria-hidden="true"
                                 >
-                                    <IconSuccess
-                                        color={vars.colors.controlActivated}
-                                        size="100%"
-                                        skipAnimation={!hasAnimation || isBack}
-                                    />
+                                    {skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? (
+                                        <IconStepperSuccessVivo
+                                            color={vars.colors.controlActivated}
+                                            size="100%"
+                                            skipAnimation={!hasAnimation || isBack}
+                                        />
+                                    ) : (
+                                        <IconSuccess
+                                            color={vars.colors.controlActivated}
+                                            size="100%"
+                                            skipAnimation={!hasAnimation || isBack}
+                                        />
+                                    )}
                                 </div>
                             ) : (
                                 <div

package/src/text-tokens.tsx

@@ -786,3 +786,17 @@ export const fileUploadListLabel: TextToken = {
     de: 'Hochgeladene Dateien',
     pt: 'Arquivos enviados',
 };
+
+export const messageIncoming: TextToken = {
+    es: 'Mensaje',
+    en: 'Message',
+    pt: 'Mensagem',
+    de: 'Nachricht',
+};
+
+export const messageOutgoing: TextToken = {
+    es: 'Tú',
+    en: 'You',
+    pt: 'Você',
+    de: 'Du',
+};

package/src/tooltip.tsx

@@ -70,8 +70,11 @@ const getElementDimensionsWithoutPadding = (element: HTMLElement) => {
         parseFloat(getComputedStyle(element, null).paddingTop) +
         parseFloat(getComputedStyle(element, null).paddingBottom);
 
-    const width = element.offsetWidth - horizontalPadding;
-    const height = element.offsetHeight - verticalPadding;
+    // Chromium can return different offsetWidth/offsetHeight values at different subpixel positions.
+    // Use position-independent dimensions to avoid a measurement/positioning feedback loop.
+    const rect = element.getBoundingClientRect();
+    const width = rect.width - horizontalPadding;
+    const height = rect.height - verticalPadding;
     return {width, height};
 };