Merge remote-tracking branch 'origin' into pladaria/WEB-1570_configur…

…e-sonarqube

.storybook/preview.tsx

@@ -71,14 +71,16 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => {
     }, []);
 
     return (
-        <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
-            <OverscrollColorProvider>
-                {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
-                {skin === TELEFONICA_SKIN && <style>{`body {font-family: "Telefonica Sans"}`}</style>}
-                {skin === O2_SKIN && <style>{`body {font-family: "On Air"}`}</style>}
-                <Story {...context} />
-            </OverscrollColorProvider>
-        </ThemeContextProvider>
+        <React.StrictMode>
+            <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
+                <OverscrollColorProvider>
+                    {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
+                    {skin === TELEFONICA_SKIN && <style>{`body {font-family: "Telefonica Sans"}`}</style>}
+                    {skin === O2_SKIN && <style>{`body {font-family: "On Air"}`}</style>}
+                    <Story {...context} />
+                </OverscrollColorProvider>
+            </ThemeContextProvider>
+        </React.StrictMode>
     );
 };
 

CHANGELOG.md

@@ -1,3 +1,46 @@
+# [14.24.0](https://github.com/Telefonica/mistica-web/compare/v14.23.1...v14.24.0) (2023-09-28)
+
+
+### Features
+
+* **Sheet:** multiline support for description ([#896](https://github.com/Telefonica/mistica-web/issues/896)) ([0c328bf](https://github.com/Telefonica/mistica-web/commit/0c328bf4c2c19cc4f57438416e479326988a2999))
+
+## [14.23.1](https://github.com/Telefonica/mistica-web/compare/v14.23.0...v14.23.1) (2023-09-25)
+
+
+### Bug Fixes
+
+* **Header:** don't render title when not provided ([#898](https://github.com/Telefonica/mistica-web/issues/898)) ([b760243](https://github.com/Telefonica/mistica-web/commit/b760243d6c905befb8e5c97e80e5e59b9075e916))
+* **Snackbar:** z-index conflict with FixedFooterLayout ([#897](https://github.com/Telefonica/mistica-web/issues/897)) ([0d86e02](https://github.com/Telefonica/mistica-web/commit/0d86e027ba73937b091f1c04bf1099fdb21aa72d))
+* **SuccessFeedback:** Vivo-new icon size change ([#895](https://github.com/Telefonica/mistica-web/issues/895)) ([71c5297](https://github.com/Telefonica/mistica-web/commit/71c5297fcef8be8c9ec7b0c1aee8b3972a4b76df))
+
+# [14.23.0](https://github.com/Telefonica/mistica-web/compare/v14.22.2...v14.23.0) (2023-09-22)
+
+
+### Bug Fixes
+
+* **Cards:** use polyfill for aspectRatio to prevent Safari from behaving different than other browsers ([#890](https://github.com/Telefonica/mistica-web/issues/890)) ([f81490f](https://github.com/Telefonica/mistica-web/commit/f81490f0861d5671f7364d87694a8205d0a317c8))
+* **FixedFooterLayout:** prevent content from being rendered on top of the footer ([#891](https://github.com/Telefonica/mistica-web/issues/891)) ([dc861d5](https://github.com/Telefonica/mistica-web/commit/dc861d5bfa4c36e55e3db7ee80e73b6d4ba86452))
+
+
+### Features
+
+* **Carousel:** large mobilePageOffset support ([#887](https://github.com/Telefonica/mistica-web/issues/887)) ([803506a](https://github.com/Telefonica/mistica-web/commit/803506af37d3c4e3dd5315ea0baad0d04177e95e))
+
+## [14.22.2](https://github.com/Telefonica/mistica-web/compare/v14.22.1...v14.22.2) (2023-09-18)
+
+
+### Bug Fixes
+
+* **Touchable:** add margin 0 as default to prevent Safari issues ([#885](https://github.com/Telefonica/mistica-web/issues/885)) ([9c1b470](https://github.com/Telefonica/mistica-web/commit/9c1b47073c5a543e17c351cb2863610c5ce7e31f))
+
+## [14.22.1](https://github.com/Telefonica/mistica-web/compare/v14.22.0...v14.22.1) (2023-09-14)
+
+
+### Bug Fixes
+
+* **AdvancedDataCard:** add isolation to container ([#884](https://github.com/Telefonica/mistica-web/issues/884)) ([53a1dbe](https://github.com/Telefonica/mistica-web/commit/53a1dbe4121deabd96c1504a66d584958a42f17d))
+
 # [14.22.0](https://github.com/Telefonica/mistica-web/compare/v14.21.0...v14.22.0) (2023-09-11)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.22.0",
+    "version": "14.24.0",
     "license": "MIT",
     "repository": {
         "type": "git",

playroom/frame-component.tsx

@@ -62,16 +62,18 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
 type Props = {children: React.ReactNode; theme: ThemeConfig};
 
 const FrameComponent = ({children, theme}: Props): React.ReactNode => (
-    <ThemeOverriderContextProvider>
-        {(overridenTheme) => (
-            <ThemeContextProvider theme={overridenTheme ?? theme}>
-                <SheetRoot />
-                <OverscrollColorProvider>
-                    <App skinName={(overridenTheme ?? theme).skin.name}>{children}</App>
-                </OverscrollColorProvider>
-            </ThemeContextProvider>
-        )}
-    </ThemeOverriderContextProvider>
+    <React.StrictMode>
+        <ThemeOverriderContextProvider>
+            {(overridenTheme) => (
+                <ThemeContextProvider theme={overridenTheme ?? theme}>
+                    <SheetRoot />
+                    <OverscrollColorProvider>
+                        <App skinName={(overridenTheme ?? theme).skin.name}>{children}</App>
+                    </OverscrollColorProvider>
+                </ThemeContextProvider>
+            )}
+        </ThemeOverriderContextProvider>
+    </React.StrictMode>
 );
 
 export default FrameComponent;

playroom/themes.tsx

@@ -5,7 +5,6 @@ import type {ThemeConfig} from '../src/theme';
 const common: Partial<ThemeConfig> = {
     enableTabFocus: true,
     colorScheme: 'auto',
-    i18n: {locale: 'en-US', phoneNumberFormattingRegionCode: 'ES'},
     dimensions: {
         headerMobileHeight: 0,
     },

src/__screenshot_tests__/carousel-screenshot-test.tsx

@@ -1,4 +1,5 @@
 import {openStoryPage, screen} from '../test-utils';
+import {VIVO_NEW_SKIN} from '../skins/constants';
 
 import type {ElementHandle} from 'puppeteer';
 
@@ -17,6 +18,34 @@ test('Carousel mobile', async () => {
     expect(await page.screenshot()).toMatchImageSnapshot();
 });
 
+test('Carousel mobile in Vivo new', async () => {
+    const page = await openStoryPage({
+        id: 'components-carousels-carousel--default',
+        device: 'MOBILE_IOS',
+        skin: VIVO_NEW_SKIN,
+    });
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    await (await screen.findByLabelText('Carousel item 2')).evaluate((el) => el.scrollIntoView());
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test('Carousel mobile with large mobilePageOffset', async () => {
+    const page = await openStoryPage({
+        id: 'components-carousels-carousel--default',
+        device: 'MOBILE_IOS',
+        args: {mobilePageOffset: 'large'},
+    });
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    await (await screen.findByLabelText('Carousel item 2')).evaluate((el) => el.scrollIntoView());
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
 test('Carousel mobile with initialActiveItem=1', async () => {
     const page = await openStoryPage({
         id: 'components-carousels-carousel--default',

src/__screenshot_tests__/progress-bar-screenshot-test.tsx

@@ -1,7 +1,9 @@
 import {openStoryPage, screen} from '../test-utils';
 
-test('ProgressBar', async () => {
-    await openStoryPage({id: 'components-progress-bar--default'});
+const COLORS = ['default', 'red'];
+
+test.each(COLORS)('ProgressBar - color={%s}', async (color) => {
+    await openStoryPage({id: 'components-progressbar--default', args: {color}});
 
     const stepper = await screen.findByTestId('progress-bar');
 

src/__screenshot_tests__/sheet-screenshot-test.tsx

@@ -66,6 +66,26 @@ test.each(TESTABLE_DEVICES)('InfoSheet in %s', async (device) => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('InfoSheet with multiple description paragraphs', async () => {
+    const page = await openStoryPage({
+        id: 'components-modals-sheet--info',
+        device: 'MOBILE_IOS',
+        args: {
+            description: 'Description paragraph',
+            multiparagraphDescription: true,
+        },
+    });
+
+    const button = await screen.findByRole('button', {name: 'Open'});
+    await button.click();
+
+    await screen.findByRole('dialog');
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(TESTABLE_DEVICES)('ActionsSheet in %s', async (device) => {
     const page = await openStoryPage({
         id: 'components-modals-sheet--actions',

src/__screenshot_tests__/skeletons-screenshot-test.tsx

@@ -12,7 +12,7 @@ test.each`
     `Skeleton circle given inverse $givenStoryPageArgs.inverse and size of $givenStoryPageArgs.size`,
     async ({givenStoryPageArgs}) => {
         await openStoryPage({
-            id: 'components-skeletons-skeleton-circle',
+            id: 'components-skeletons-skeletoncircle',
             device: 'MOBILE_IOS',
             args: givenStoryPageArgs,
         });
@@ -28,7 +28,7 @@ test.each`
     ${{inverse: true}}
 `(`Skeleton row given inverse $givenStoryPageArgs.inverse`, async ({givenStoryPageArgs}) => {
     await openStoryPage({
-        id: 'components-skeletons-skeleton-row',
+        id: 'components-skeletons-skeletonrow',
         device: 'MOBILE_IOS',
         args: givenStoryPageArgs,
     });
@@ -48,7 +48,7 @@ test.each`
     `Skeleton rectangle given inverse $givenStoryPageArgs.inverse and height $givenStoryPageArgs.height and width $givenStoryPageArgs.width`,
     async ({givenStoryPageArgs}) => {
         await openStoryPage({
-            id: 'components-skeletons-skeleton-rectangle',
+            id: 'components-skeletons-skeletonrectangle',
             device: 'MOBILE_IOS',
             args: givenStoryPageArgs,
         });
@@ -64,7 +64,7 @@ test.each`
     ${{inverse: true}}
 `(`Skeleton text given inverse $givenStoryPageArgs.inverse`, async ({givenStoryPageArgs}) => {
     await openStoryPage({
-        id: 'components-skeletons-skeleton-text',
+        id: 'components-skeletons-skeletontext',
         device: 'MOBILE_IOS',
         args: givenStoryPageArgs,
     });
@@ -79,7 +79,7 @@ test.each`
     ${{inverse: true}}
 `(`Skeleton line given inverse $givenStoryPageArgs.inverse`, async ({givenStoryPageArgs}) => {
     await openStoryPage({
-        id: 'components-skeletons-skeleton-line',
+        id: 'components-skeletons-skeletonline',
         device: 'MOBILE_IOS',
         args: givenStoryPageArgs,
     });

src/__screenshot_tests__/stacking-group-screenshot-test.tsx

@@ -1,4 +1,4 @@
-import {openStoryPage, screen} from '../test-utils';
+import {openStoryPage, screen, ssimScreenshotConfig} from '../test-utils';
 
 test.each`
     type        | stacked  | inverse
@@ -10,7 +10,7 @@ test.each`
     ${'circle'} | ${true}  | ${true}
     ${'square'} | ${false} | ${true}
     ${'circle'} | ${false} | ${true}
-`('Stacking Group', async ({type, stacked, inverse}) => {
+`('Stacking Group. type={$type} stacked={$stacked} inverse={$inverse}', async ({type, stacked, inverse}) => {
     await openStoryPage({
         id: 'components-stackinggroup--default',
         device: 'DESKTOP',
@@ -20,5 +20,5 @@ test.each`
     const element = await screen.findByTestId('stacking-group');
     const image = await element.screenshot();
 
-    expect(image).toMatchImageSnapshot();
+    expect(image).toMatchImageSnapshot(ssimScreenshotConfig);
 });

src/__screenshot_tests__/title-screenshot-test.tsx

@@ -1,37 +1,48 @@
-import {openStoryPage} from '../test-utils';
+import {openStoryPage, screen} from '../test-utils';
 
-test('Title', async () => {
-    const argsCases = [
-        {
-            caseName: 'without-link',
-            title: 'This is a title',
-            linkText: '',
-        },
-        {
-            caseName: 'with-link',
-            title: 'This is a title with link',
-            linkText: 'Link',
-        },
-        {
-            caseName: 'with-link-and-long-text',
-            title: 'This is a title with link and with a very long text that may wrap to multiple lines in small screens',
-            linkText: 'Link',
-        },
-    ];
+import type {Device} from '../test-utils';
 
-    const devices = ['DESKTOP', 'MOBILE_ANDROID'] as const;
+const COMPONENT_TYPES = [
+    {component: 'Title1', storyName: 'title-1'},
+    {component: 'Title2', storyName: 'title-2'},
+    {component: 'Title3', storyName: 'title-3'},
+];
+const CASE_NAMES = ['without-link', 'with-link', 'with-link-and-long-text', 'with-icon'] as const;
+const DEVICES = ['DESKTOP', 'MOBILE_IOS'] as const;
 
-    for (const {caseName, title, linkText} of argsCases) {
-        for (const device of devices) {
-            await openStoryPage({
-                id: 'components-title--default',
-                device,
-                args: {title, linkText},
-            });
-            const image = await page.screenshot();
-            expect(image).toMatchImageSnapshot({
-                customSnapshotIdentifier: `title-screenshot-test-${device.toLowerCase()}-${caseName}`,
-            });
+const caseArgs = {
+    'without-link': {title: 'This is a title', right: 'undefined', linkText: undefined},
+    'with-link': {title: 'This is a title with link', right: 'link', linkText: 'Link'},
+    'with-link-and-long-text': {
+        title: 'This is a title with link and with a very long text that may wrap to multiple lines in small screens',
+        right: 'link',
+        linkText: 'Link',
+    },
+    'with-icon': {title: 'This is a title', right: 'icon', linkText: undefined},
+};
+
+const getCases = () => {
+    const cases = [];
+    for (const componentType of COMPONENT_TYPES) {
+        for (const caseName of CASE_NAMES) {
+            for (const device of DEVICES) {
+                cases.push([componentType.component, caseName, device, componentType.storyName]);
+            }
         }
     }
+    return cases;
+};
+
+test.each(getCases())('%s (%s) - %s', async (component, caseName, device, storyName) => {
+    const args = caseArgs[caseName as (typeof CASE_NAMES)[number]];
+
+    await openStoryPage({
+        id: `components-titles--${storyName}-story`,
+        device: device as Device,
+        args: {title: args.title, right: args.right, ...(args.linkText ? {linkText: args.linkText} : {})},
+    });
+
+    const element = await screen.findByTestId(component);
+    const image = await element.screenshot();
+    expect(image).toMatchImageSnapshot();
 });

src/__stories__/carousel-story.tsx

@@ -18,6 +18,8 @@ export default {
     title: 'Components/Carousels/Carousel',
 };
 
+const mobilePageOffsetOptions = ['regular', 'large'] as const;
+
 type Args = {
     numItems: number;
     itemsPerPageMobile: number;
@@ -26,6 +28,7 @@ type Args = {
     withBullets: boolean;
     free: boolean;
     itemsToScroll: number;
+    mobilePageOffset: (typeof mobilePageOffsetOptions)[number];
     autoplay: boolean;
     loop: boolean;
     initialActiveItem: number;
@@ -39,6 +42,7 @@ export const Default: StoryComponent<Args> = ({
     itemsPerPageDesktop,
     free,
     itemsToScroll,
+    mobilePageOffset,
     autoplay,
     loop,
     initialActiveItem,
@@ -65,6 +69,7 @@ export const Default: StoryComponent<Args> = ({
                             desktop: itemsPerPageDesktop,
                         }}
                         itemsToScroll={itemsToScroll}
+                        mobilePageOffset={mobilePageOffset}
                         autoplay={autoplay ? {time: 5000, loop} : false}
                         onPageChange={setPageInfo}
                         items={Array.from({length: numItems}, (_, idx) => (
@@ -106,4 +111,11 @@ Default.args = {
     loop: false,
     itemsToScroll: 0,
     initialActiveItem: 0,
+    mobilePageOffset: 'regular',
+};
+Default.argTypes = {
+    mobilePageOffset: {
+        options: mobilePageOffsetOptions,
+        control: {type: 'select'},
+    },
 };