fix conflicts

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [15.20.1](https://github.com/Telefonica/mistica-web/compare/v15.20.0...v15.20.1) (2024-09-12)
+
+
+### Bug Fixes
+
+* **confirm:** make destructive mode work with webview bridge ([#1237](https://github.com/Telefonica/mistica-web/issues/1237)) ([0dc1787](https://github.com/Telefonica/mistica-web/commit/0dc1787d627fd3cf370769366719d87cdf03d3e9))
+
 # [15.20.0](https://github.com/Telefonica/mistica-web/compare/v15.19.0...v15.20.0) (2024-09-06)
 
 

css/blau.css

@@ -228,9 +228,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 300;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 300;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -683,7 +684,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

css/mistica-common.css

@@ -85,6 +85,11 @@
     line-height: var(--mistica-line-height-title2);
     font-weight: var(--mistica-font-weight-title2);
 }
+.mistica-text-title3 {
+    font-size: var(--mistica-font-size-title3);
+    line-height: var(--mistica-line-height-title3);
+    font-weight: var(--mistica-font-weight-title3);
+}
 .mistica-text-indicator {
     font-size: var(--mistica-font-size-indicator);
     line-height: var(--mistica-line-height-indicator);

css/movistar.css

@@ -242,9 +242,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 700;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 700;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -700,7 +701,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

css/o2-new.css

@@ -242,9 +242,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 700;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 700;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -704,7 +705,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

css/o2.css

@@ -228,9 +228,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 300;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 300;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -680,7 +681,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

css/telefonica.css

@@ -229,9 +229,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 400;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 400;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -696,7 +697,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

css/tu.css

@@ -231,9 +231,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 500;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 500;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -683,7 +684,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

css/vivo-new.css

@@ -223,9 +223,10 @@
     --mistica-font-weight-tabsLabel: 400;
     --mistica-font-weight-link: 400;
     --mistica-font-weight-title1: 400;
-    --mistica-font-size-title2: 1.125rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 400;
+    --mistica-font-size-title3: 1.125rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 400;
     --mistica-font-weight-indicator: 400;
     --mistica-font-weight-navigationBar: 400;
 }
@@ -684,7 +685,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.25rem;
-        --mistica-line-height-title2: 1.75rem;
+        --mistica-font-size-title3: 1.25rem;
+        --mistica-line-height-title3: 1.75rem;
     }
 }

css/vivo.css

@@ -224,9 +224,10 @@
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1.25rem;
-    --mistica-line-height-title2: 1.5rem;
     --mistica-font-weight-title2: 300;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 300;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 500;
 }
@@ -676,7 +677,7 @@
         --mistica-font-size-tabsLabel: 1.125rem;
         --mistica-line-height-tabsLabel: 1.5rem;
 
-        --mistica-font-size-title2: 1.75rem;
-        --mistica-line-height-title2: 2rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.20.0",
+    "version": "15.20.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -145,7 +145,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.27.0",
+        "@tef-novum/webview-bridge": "^3.39.0",
         "@telefonica/libphonenumber": "^2.9.0",
         "@vanilla-extract/css": "^1.15.2",
         "@vanilla-extract/dynamic": "^2.1.1",

playroom/snippets.tsx

@@ -1350,6 +1350,14 @@ const titlesSnippets: Array<Snippet> = [
         name: 'Title3 (with link)',
         code: '<Title3 right={<ButtonLink onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title3>',
     },
+    {
+        name: 'Title4',
+        code: '<Title4>Some title</Title4>',
+    },
+    {
+        name: 'Title4 (with link)',
+        code: '<Title4 right={<ButtonLink onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title4>',
+    },
 ].map((snippet) => ({...snippet, group: 'Titles'}));
 
 const tagSnippets: Array<Snippet> = ['promo', 'active', 'inactive', 'success', 'warning', 'error'].map(
@@ -1907,7 +1915,7 @@ const exampleScreens: Array<Snippet> = [
         ))}
       />
       <Stack space={24}>
-        <Title2>Save money in technology</Title2>
+        <Title3>Save money in technology</Title3>
         <Carousel
           itemsPerPage={1}
           mobilePageOffset="large"
@@ -1964,7 +1972,7 @@ const exampleScreens: Array<Snippet> = [
       />
 
       <Stack space={24}>
-        <Title2>Save money in technology</Title2>
+        <Title3>Save money in technology</Title3>
         <Carousel
           itemsPerPage={1}
           mobilePageOffset="large"

src/__private_stories__/example-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ResponsiveLayout, Stack, Title2, Text2, Box} from '..';
+import {ResponsiveLayout, Stack, Text2, Box, Title3} from '..';
 
 export default {
     title: 'Private/Example',
@@ -13,7 +13,7 @@ export const Default: StoryComponent = () => {
         <Box paddingY={24}>
             <ResponsiveLayout>
                 <Stack space={16}>
-                    <Title2 as="h1">This is an example of private story</Title2>
+                    <Title3 as="h1">This is an example of private story</Title3>
                     <Stack space={8}>
                         <Text2 regular as="p">
                             Private stories are only available in dev and CI builds, not in production.

src/__private_stories__/skin-components-story.tsx

@@ -41,6 +41,7 @@ import {
     Title1,
     Title2,
     Title3,
+    Title4,
     IconButton,
     Hero,
     Table,
@@ -328,6 +329,7 @@ export const Default: StoryComponent<Args> = ({variant}) => {
                             <Title1>Title 1</Title1>
                             <Title2>Title 2</Title2>
                             <Title3>Title 3</Title3>
+                            <Title4>Title 4</Title4>
                         </Inline>
 
                         {/** Tag */}

src/__private_stories__/text-preset-vars-story.tsx

@@ -31,12 +31,13 @@ export const Default: StoryComponent = () => {
             <TextWrapper weight={vars.textPresets.button.weight}>button</TextWrapper>
             <TextWrapper weight={vars.textPresets.link.weight}>link</TextWrapper>
             <TextWrapper weight={vars.textPresets.title1.weight}>title1</TextWrapper>
+            <TextWrapper weight={vars.textPresets.title2.weight}>title2</TextWrapper>
             <TextWrapper
-                weight={vars.textPresets.title2.weight}
-                size={vars.textPresets.title2.size}
-                lineHeight={vars.textPresets.title2.lineHeight}
+                weight={vars.textPresets.title3.weight}
+                size={vars.textPresets.title3.size}
+                lineHeight={vars.textPresets.title3.lineHeight}
             >
-                title2
+                title3
             </TextWrapper>
             <TextWrapper weight={vars.textPresets.indicator.weight}>indicator</TextWrapper>
             <TextWrapper

src/__private_stories__/tooltip-scenarios-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Stack, Title2, Text3, Tooltip, Placeholder, IconShopRegular} from '..';
+import {Stack, Text3, Tooltip, Placeholder, IconShopRegular, Title3} from '..';
 
 export default {
     title: 'Private/Tooltip',
@@ -9,7 +9,7 @@ export const InsideFixedContainer: StoryComponent = () => {
     return (
         <Stack space={16}>
             <Stack space={8}>
-                <Title2>Tooltip inside a fixed container with overflow hidden</Title2>
+                <Title3>Tooltip inside a fixed container with overflow hidden</Title3>
                 <Text3 regular as="p">
                     If the container has fixed position and overflow hidden, the tooltip should be visible and
                     appear next to the target.
@@ -66,7 +66,7 @@ export const MovingTarget: StoryComponent = () => {
     return (
         <Stack space={16}>
             <Stack space={8}>
-                <Title2>Tooltip with moving target</Title2>
+                <Title3>Tooltip with moving target</Title3>
                 <Text3 regular as="p">
                     The tooltip should follow the target position while it's open. Try focusing the target
                     with the keyboard to keep it open.
@@ -110,7 +110,7 @@ export const MultipleTooltips: StoryComponent = () => {
     return (
         <Stack space={16}>
             <Stack space={8}>
-                <Title2>Interaction between multiple tooltips</Title2>
+                <Title3>Interaction between multiple tooltips</Title3>
                 <Text3 regular as="p">
                     There will always be at most one active tooltip. Try opening different tooltips with mouse
                     hover and keyboard focus.

src/__private_stories__/video-intersection-observer-story.tsx

@@ -4,7 +4,7 @@ import beachImg from '../__stories__/images/beach.jpg';
 import Video from '../video';
 import {useIsInViewport} from '../hooks';
 import Stack from '../stack';
-import {Title2} from '../title';
+import {Title3} from '../title';
 import {Text3} from '../text';
 import {vars} from '../skins/skin-contract.css';
 
@@ -29,7 +29,7 @@ export const Default: StoryComponent = () => {
     return (
         <Stack space={16}>
             <Stack space={8}>
-                <Title2>Video component with intersection observer</Title2>
+                <Title3>Video component with intersection observer</Title3>
                 <Text3 regular as="p">
                     As you scroll down, the video should start playing automatically as soon as 50% of its
                     height becomes visible in the viewport. When 50% of the video leaves the viewport, the

src/__screenshot_tests__/title-screenshot-test.tsx

@@ -6,6 +6,7 @@ const COMPONENT_TYPES = [
     {component: 'Title1', storyName: 'title-1'},
     {component: 'Title2', storyName: 'title-2'},
     {component: 'Title3', storyName: 'title-3'},
+    {component: 'Title4', storyName: 'title-4'},
 ];
 const CASE_NAMES = ['without-link', 'with-link', 'with-link-and-long-text', 'with-icon'] as const;
 const DEVICES = ['DESKTOP', 'MOBILE_IOS'] as const;

src/__stories__/accordion-story.tsx

@@ -7,7 +7,7 @@ import {
     BoxedAccordion,
     BoxedAccordionItem,
     Circle,
-    IconLikeFilled,
+    IconThumbUpFilled,
     IconMobileDeviceRegular,
     Image,
     Placeholder,
@@ -48,7 +48,7 @@ const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, sin
                         title={title}
                         subtitle={subtitle}
                         content={content}
-                        asset={<IconLikeFilled size={24} />}
+                        asset={<IconThumbUpFilled size={24} />}
                         {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-2'}}
                     />