@telefonica/mistica 17.7.0 → 17.9.0

package/src/skins/esimflag.tsx

@@ -703,8 +703,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {
@@ -712,6 +717,16 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            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: 'bold',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -789,6 +804,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             },
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
             boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            boxedSmallPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
         },
     };
     return skin;

package/src/skins/movistar.tsx

@@ -714,11 +714,26 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 size: {desktop: 18, mobile: 14},
                 weight: 'medium',
             },
+            chipLabelSmall: {
+                lineHeight: {desktop: 22, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
             drawerTitle: {
                 lineHeight: {desktop: 26, mobile: 26},
                 size: {desktop: 20, mobile: 20},
                 weight: 'bold',
             },
+            feedbackScreenDescription: {
+                lineHeight: {desktop: 24, mobile: 22},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
+            feedbackScreenTitle: {
+                lineHeight: {desktop: 32, mobile: 28},
+                size: {desktop: 28, mobile: 24},
+                weight: 'bold',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 22},
                 size: {desktop: 18, mobile: 16},
@@ -795,6 +810,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 right: {mobile: 16, desktop: 24},
             },
             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/o2.tsx

@@ -706,8 +706,13 @@ export const getO2Skin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {
@@ -715,6 +720,16 @@ export const getO2Skin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            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: 'bold',
+            },
             headerPretitle: {
                 lineHeight: {desktop: 24, mobile: 24},
                 size: {desktop: 18, mobile: 16},
@@ -791,6 +806,7 @@ export const getO2Skin: 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/skin-contract.css.ts

@@ -357,6 +357,7 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
     text9: {weight: '', size: '', lineHeight: ''},
     text10: {weight: '', size: '', lineHeight: ''},
     chipLabel: {weight: '', size: '', lineHeight: ''},
+    chipLabelSmall: {weight: '', size: '', lineHeight: ''},
     inputHelperText: {size: '', lineHeight: ''},
     inputLabel: {size: '', lineHeight: ''},
     inputValue: {size: '', lineHeight: ''},
@@ -375,6 +376,8 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
         size: '',
         weight: '',
     },
+    feedbackScreenDescription: {lineHeight: '', size: '', weight: ''},
+    feedbackScreenTitle: {lineHeight: '', size: '', weight: ''},
     headerPretitle: {lineHeight: '', size: '', weight: ''},
 };
 
@@ -389,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'},
@@ -707,8 +707,13 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {
@@ -716,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},
@@ -828,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,7 +66,10 @@ export type TextPresetsConfig = {
     cardTitleDefault: TextSizeTokenConfig;
     cardTitleSnap: TextSizeTokenConfig;
     drawerTitle: TextTokenConfig;
+    feedbackScreenDescription: TextTokenConfig;
+    feedbackScreenTitle: TextTokenConfig;
     chipLabel: TextTokenConfig;
+    chipLabelSmall: TextTokenConfig;
     link: TextWeightTokenConfig<'regular' | 'medium'>;
     loadingScreenTitle: TextSizeTokenConfig;
     title1: TextTokenConfig<'regular' | 'medium'>;
@@ -120,6 +123,7 @@ export type SpacingConfig = {
     headerPadding: PaddingYValues;
     drawerPadding: PaddingValues;
     boxedDefaultPadding: PaddingXValues;
+    boxedSmallPadding: PaddingYValues;
     responsiveLayoutMargin: ResponsiveValue<number>;
 };
 

package/src/skins/vivo-evolution.tsx

@@ -737,18 +737,33 @@ 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},
                 weight: 'medium',
             },
+            chipLabelSmall: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 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},
@@ -849,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

@@ -700,11 +700,26 @@ export const getVivoSkin: GetKnownSkin = () => {
                 size: {desktop: 16, mobile: 14},
                 weight: 'medium',
             },
+            chipLabelSmall: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 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},
@@ -805,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