@telefonica/mistica 17.8.0 → 17.9.0

package/src/skins/skin-contract.css.ts

@@ -376,6 +376,8 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
         size: '',
         weight: '',
     },
+    feedbackScreenDescription: {lineHeight: '', size: '', weight: ''},
+    feedbackScreenTitle: {lineHeight: '', size: '', weight: ''},
     headerPretitle: {lineHeight: '', size: '', weight: ''},
 };
 
@@ -390,6 +392,7 @@ const spacing: ToThemeTokens<SpacingConfig> = {
     headerPadding: {top: '', bottom: ''},
     drawerPadding: {top: '', bottom: '', left: '', right: ''},
     boxedDefaultPadding: {left: '', right: ''},
+    boxedSmallPadding: {top: '', bottom: ''},
     responsiveLayoutMargin: '',
 };
 

package/src/skins/telefonica.tsx

@@ -682,18 +682,18 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
         },
         borderRadii: {
             avatar: '50%',
-            bar: '0px',
+            bar: '999px',
             button: '32px',
-            checkbox: '2px',
-            container: '4px',
+            checkbox: '4px',
+            container: '20px',
             indicator: '24px',
             chip: '24px',
             tag: '24px',
-            input: '8px',
-            popup: '4px',
-            sheet: '0px',
-            mediaSmall: '2px',
-            snackbar: '4px',
+            input: '12px',
+            popup: '12px',
+            sheet: '20px',
+            mediaSmall: '12px',
+            snackbar: '12px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -721,6 +721,16 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'regular',
             },
+            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: 'regular',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -833,6 +843,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 40},
             },
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };

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

@@ -737,8 +737,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 +754,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 +864,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

@@ -710,6 +710,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 +820,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