fix conflicts

Telefonica · Sep 12, 2024 · 6490451 · 6490451
2 parents 9ce37b8 + 672b873
commit 6490451
Show file tree

Hide file tree

Showing 250 changed files with 1,467 additions and 984 deletions.
diff --git a/.yarn/cache/@tef-novum-webview-bridge-npm-3.27.0-c4c0055150-acbbb406bc.zip b/.yarn/cache/@tef-novum-webview-bridge-npm-3.27.0-c4c0055150-acbbb406bc.zip
diff --git a/.yarn/cache/@tef-novum-webview-bridge-npm-3.39.0-84e5fb1c44-a4edadce1f.zip b/.yarn/cache/@tef-novum-webview-bridge-npm-3.39.0-84e5fb1c44-a4edadce1f.zip
diff --git a/CHANGELOG.md b/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)
 
 

diff --git a/css/blau.css b/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;
     }
 }
diff --git a/css/mistica-common.css b/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);

diff --git a/css/movistar.css b/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;
 }
@@ -703,7 +704,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;
     }
 }
diff --git a/css/o2-new.css b/css/o2-new.css
@@ -131,7 +131,7 @@
     --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
     --mistica-color-divider: var(--mistica-o2-new-grey30);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
-    --mistica-color-navigationBarDivider: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
     --mistica-color-badge: var(--mistica-o2-new-o2Red65);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);
@@ -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;
 }
@@ -617,7 +618,7 @@
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);
         --mistica-color-divider: var(--mistica-o2-new-grey30);
         --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
-        --mistica-color-navigationBarDivider: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
         --mistica-color-brand: var(--mistica-o2-new-beyondBlue);
         --mistica-color-brandHigh: var(--mistica-o2-new-beyondBlue70);
         --mistica-color-inverse: var(--mistica-o2-new-white);
@@ -707,7 +708,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;
     }
 }
diff --git a/css/o2.css b/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;
     }
 }
diff --git a/css/telefonica.css b/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;
 }
@@ -699,7 +700,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;
     }
 }
diff --git a/css/tu.css b/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;
     }
 }
diff --git a/css/vivo-new.css b/css/vivo-new.css
@@ -52,7 +52,7 @@
     --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-new-grey1);
     --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.6);
-    --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-grey4);
+    --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-grey3);
     --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-backgroundBrandTop: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-vivoPurple);
@@ -152,7 +152,7 @@
     --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-new-vivoPurpleLight50);
     --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-new-vivoPurpleLight50);
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-white);
-    --mistica-color-textAppBar: var(--mistica-vivo-new-grey4);
+    --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-customTabsBackground: var(--mistica-vivo-new-white);
     --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurple);
@@ -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;
 }
@@ -528,7 +529,7 @@
         --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-new-grey1);
         --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.6);
-        --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-grey4);
+        --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-grey3);
         --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-backgroundBrandTop: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-vivoPurple);
@@ -631,7 +632,7 @@
         --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-new-vivoPurpleLight50);
         --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-new-vivoPurpleLight50);
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-white);
-        --mistica-color-textAppBar: var(--mistica-vivo-new-grey4);
+        --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-customTabsBackground: var(--mistica-vivo-new-white);
         --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurple);
@@ -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;
     }
 }
diff --git a/css/vivo.css b/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;
     }
 }
diff --git a/package.json b/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",
@@ -162,8 +162,8 @@
         "semver-compare": "^1.0.0"
     },
     "peerDependencies": {
-        "react": "17.x || 18.x",
-        "react-dom": "17.x || 18.x"
+        "react": "18.x",
+        "react-dom": "18.x"
     },
     "publishConfig": {
         "registry": "https://registry.npmjs.org",

diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
@@ -220,7 +220,7 @@ const buttonSnippets: Array<Snippet> = [
         code: '<ButtonPrimary onPress={() => {}}><IconLockClosedRegular color="currentColor" />Action</ButtonPrimary>',
     },
     {
-        name: 'ButtonGroup (internal use)',
+        name: 'ButtonGroup',
         code: `
         <ButtonGroup
           primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
@@ -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"

diff --git a/src/__acceptance_tests__/__ssr_pages__/header.tsx b/src/__acceptance_tests__/__ssr_pages__/header.tsx
@@ -6,20 +6,14 @@ import {
     MainSectionHeader,
     ButtonPrimary,
     Stack,
+    Placeholder,
 } from '../../..';
 
 const HeaderTest = (): JSX.Element => (
     <Stack space={8}>
         <HeaderLayout
-            header={
-                <Header
-                    title="La última factura de diciembre ya esta disponible"
-                    preamount="Cuota mensual (IVA incluido)"
-                    amount="60,44 €"
-                    button={<ButtonPrimary href="asdf">Descargar factura</ButtonPrimary>}
-                    subtitle="Y esto es un subtitulo"
-                />
-            }
+            header={<Header title="La última factura de diciembre ya esta disponible" />}
+            extra={<Placeholder />}
         />
         <MainSectionHeaderLayout>
             <MainSectionHeader

diff --git a/src/__private_stories__/example-story.tsx b/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.

diff --git a/src/__private_stories__/skin-components-story.tsx b/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 */}

diff --git a/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx b/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx
@@ -39,7 +39,7 @@ export const Default: StoryComponent<Args> = ({largeContent, input}) => {
             {() => (
                 <>
                     <MainNavigationBar
-                        isInverse
+                        variant="inverse"
                         sections={['Start', 'Account', 'Explore', 'Support'].map((title, index) => ({
                             title,
                             onPress: () => {