Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1981

-rating-component

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [15.18.0](https://github.com/Telefonica/mistica-web/compare/v15.17.0...v15.18.0) (2024-08-20)
+
+
+### Bug Fixes
+
+* **FeedbackScreen:** avoid double responsive margins in buttons when they are not fixed ([#1195](https://github.com/Telefonica/mistica-web/issues/1195)) ([41c10ad](https://github.com/Telefonica/mistica-web/commit/41c10ad0a60fe3bfd7e191eca4583da37f2cf84e))
+* **Inline:** wrap content if required when space equals between/around/evenly ([#1199](https://github.com/Telefonica/mistica-web/issues/1199)) ([b121227](https://github.com/Telefonica/mistica-web/commit/b121227d6de61f2dbc2e6e60a4f0b2b9ecc8a646))
+* **Snackbar:** allow dataAttributes passed to openSnackbar ([#1192](https://github.com/Telefonica/mistica-web/issues/1192)) ([c5c65bd](https://github.com/Telefonica/mistica-web/commit/c5c65bdf486554e466fa325b3dbcef06eaccfecb))
+
+
+### Features
+
+* **Popover, Snackbar, Callout, Chip, Dialog, Cards:** allow customizable close button label ([#1193](https://github.com/Telefonica/mistica-web/issues/1193)) ([63de33a](https://github.com/Telefonica/mistica-web/commit/63de33a8fc9960f32c121db8e81f45e0ba32bdb6))
+
 # [15.17.0](https://github.com/Telefonica/mistica-web/compare/v15.16.4...v15.17.0) (2024-08-01)
 
 

package.json

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

playroom/components/index.tsx

@@ -38,7 +38,7 @@ export * from '../../src/community';
 export {default as Loader} from './loader';
 export {default as ButtonGroup} from '../../src/button-group';
 
-type ValidSkinName = Exclude<KnownSkinName, 'O2-new' | 'Vivo-new'>;
+type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo'>;
 
 const themesMap: {
     [skinName in ValidSkinName]: {themeConfig: ThemeConfig; text: string; icon: React.ReactNode};
@@ -48,12 +48,12 @@ const themesMap: {
         themeConfig: Movistar,
         icon: <MovistarLogo size={24} />,
     },
-    Vivo: {
+    'Vivo-new': {
         text: 'Vivo',
         themeConfig: Vivo_New,
         icon: <VivoLogo size={24} />,
     },
-    O2: {
+    'O2-new': {
         text: 'O2',
         themeConfig: O2_New,
         icon: <O2NewLogo size={24} />,

playroom/themes.tsx

@@ -11,18 +11,14 @@ const common: Partial<ThemeConfig> = {
 } as const;
 
 export const Movistar: ThemeConfig = {...themes.Movistar, ...common};
-export const Vivo: ThemeConfig = {...themes.Vivo, ...common};
 export const Vivo_New: ThemeConfig = {...themes.Vivo_New, ...common};
-export const O2: ThemeConfig = {...themes.O2, ...common};
 export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Tu: ThemeConfig = {...themes.Tu, ...common};
 
 export const Movistar_iOS: ThemeConfig = {...Movistar, platformOverrides: {platform: 'ios'}};
-export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
-export const O2_iOS: ThemeConfig = {...O2, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};

src/__private_stories__/carousel-on-different-container-sizes-story.tsx

@@ -25,23 +25,23 @@ type Args = {
     itemsPerPageDesktopSmall: number;
     itemsPerPageDesktopMedium: number;
     itemsPerPageDesktopLarge: number;
-    withBullets: boolean;
+    bullets: boolean;
 };
 
 const ExampleCarousel = ({
     numItems,
-    withBullets,
+    bullets,
     cardsTitlePrefix,
     itemsPerPage,
 }: {
     numItems: number;
-    withBullets: boolean;
+    bullets: boolean;
     cardsTitlePrefix: number;
     itemsPerPage: {mobile: number; tablet: number; desktop: {small: number; medium: number; large: number}};
 }) => (
     <Carousel
         dataAttributes={{testid: 'carousel-story'}}
-        withBullets={withBullets}
+        withBullets={bullets}
         itemsPerPage={itemsPerPage}
         items={Array.from({length: numItems}, (_, idx) => (
             <MediaCard
@@ -63,7 +63,7 @@ export const Default: StoryComponent<Args> = ({
     itemsPerPageDesktopSmall,
     itemsPerPageDesktopMedium,
     itemsPerPageDesktopLarge,
-    withBullets,
+    bullets,
 }) => {
     const itemsPerPage = {
         mobile: itemsPerPageMobile,
@@ -87,7 +87,7 @@ export const Default: StoryComponent<Args> = ({
                         left={
                             <ExampleCarousel
                                 numItems={numItems}
-                                withBullets={withBullets}
+                                bullets={bullets}
                                 itemsPerPage={itemsPerPage}
                                 cardsTitlePrefix={1}
                             />
@@ -100,15 +100,15 @@ export const Default: StoryComponent<Args> = ({
                         right={
                             <ExampleCarousel
                                 numItems={numItems}
-                                withBullets={withBullets}
+                                bullets={bullets}
                                 itemsPerPage={itemsPerPage}
                                 cardsTitlePrefix={2}
                             />
                         }
                     ></GridLayout>
                     <ExampleCarousel
                         numItems={numItems}
-                        withBullets={withBullets}
+                        bullets={bullets}
                         itemsPerPage={itemsPerPage}
                         cardsTitlePrefix={3}
                     />
@@ -127,5 +127,5 @@ Default.args = {
     itemsPerPageDesktopSmall: 1,
     itemsPerPageDesktopMedium: 2,
     itemsPerPageDesktopLarge: 3,
-    withBullets: true,
+    bullets: true,
 };

src/__private_stories__/inline-cases-story.tsx

@@ -31,6 +31,16 @@ export const Default: StoryComponent = () => {
                     </Inline>
                 </Stack>
 
+                <Stack space={16}>
+                    <Title1>
+                        In this case (space between + wrap), the short button should drop to a new line
+                    </Title1>
+                    <Inline space="between" wrap>
+                        <ButtonPrimary fake>{longText}</ButtonPrimary>
+                        <ButtonPrimary fake>{shortText}</ButtonPrimary>
+                    </Inline>
+                </Stack>
+
                 <Stack space={16}>
                     <Title1>space-between should be full width</Title1>
                     <Inline space="between">

src/__private_stories__/success-feedback-screen-with-navbar-story.tsx

@@ -23,11 +23,11 @@ export default {
 };
 
 type Args = {
-    showLargeContent: boolean;
-    showInput: boolean;
+    largeContent: boolean;
+    input: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) => {
+export const Default: StoryComponent<Args> = ({largeContent, input}) => {
     const {isDesktopOrBigger} = useScreenSize();
     const [index, setIndex] = React.useState(0);
     const {dimensions} = useTheme();
@@ -71,8 +71,8 @@ export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) =>
                         primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
                         extra={
                             <>
-                                {showInput ? <TextField name="text" label="Text" /> : undefined}
-                                {showLargeContent ? <Placeholder height={1000} /> : undefined}
+                                {input ? <TextField name="text" label="Text" /> : undefined}
+                                {largeContent ? <Placeholder height={1000} /> : undefined}
                             </>
                         }
                     />
@@ -83,8 +83,8 @@ export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) =>
 };
 
 Default.args = {
-    showLargeContent: false,
-    showInput: false,
+    largeContent: false,
+    input: false,
 };
 
 Default.storyName = 'SuccessFeedbackScreen with Navigation Bar';

src/__screenshot_tests__/boxed-screenshot-test.tsx

@@ -1,24 +1,21 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    inverseOutside | inverseInside
-    ${false}       | ${false}
-    ${false}       | ${true}
-    ${true}        | ${false}
-    ${true}        | ${true}
-`(
-    'Boxed inverseOutside($inverseOutside) inverseInside($inverseInside)',
-    async ({inverseOutside, inverseInside}) => {
-        await openStoryPage({
-            id: 'components-primitives-boxed--default',
-            device: 'MOBILE_IOS',
-            args: {
-                inverseInside,
-                inverseOutside,
-            },
-        });
+    overInverse | inverse
+    ${false}    | ${false}
+    ${false}    | ${true}
+    ${true}     | ${false}
+    ${true}     | ${true}
+`('Boxed inverseOutside($overInverse) inverseInside($inverse)', async ({overInverse, inverse}) => {
+    await openStoryPage({
+        id: 'components-primitives-boxed--default',
+        device: 'MOBILE_IOS',
+        args: {
+            overInverse,
+            inverse,
+        },
+    });
 
-        const image = await (await screen.findByTestId('boxed')).screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+    const image = await (await screen.findByTestId('boxed')).screenshot();
+    expect(image).toMatchImageSnapshot();
+});

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

@@ -18,7 +18,7 @@ test.each(DEVICES)('ButtonGroup - Long text (%s)', async (device) => {
     const page = await openStoryPage({
         id: 'components-buttons-buttongroup--default',
         device,
-        args: {buttonPrimaryText: 'A very long action text in this button', showButtonLink: false},
+        args: {buttonPrimaryText: 'A very long action text in this button', buttonLink: false},
     });
 
     const image = await page.screenshot({fullPage: true});

src/__screenshot_tests__/button-screenshot-test.tsx

@@ -98,39 +98,36 @@ const BUTTON_LINK_CHEVRON_OPTIONS = ['default', 'true', 'false'];
 const getLinkWithChevronCases = () => {
     const cases = [];
     for (const action of BUTTON_LINK_ACTIONS) {
-        for (const withChevron of BUTTON_LINK_CHEVRON_OPTIONS) {
-            cases.push([action, withChevron]);
+        for (const chevron of BUTTON_LINK_CHEVRON_OPTIONS) {
+            cases.push([action, chevron]);
         }
     }
     return cases;
 };
 
-test.each(getLinkWithChevronCases())(
-    'Buttons - Link button - %s (chevron = %s)',
-    async (action, withChevron) => {
-        await openStoryPage({
-            id: 'components-buttons--link-button',
-            device: 'MOBILE_IOS',
-            args: {
-                action,
-                withChevron,
-            },
-        });
-
-        const story = await screen.findByTestId('content');
-
-        const image = await story.screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+test.each(getLinkWithChevronCases())('Buttons - Link button - %s (chevron = %s)', async (action, chevron) => {
+    await openStoryPage({
+        id: 'components-buttons--link-button',
+        device: 'MOBILE_IOS',
+        args: {
+            action,
+            chevron,
+        },
+    });
+
+    const story = await screen.findByTestId('content');
+
+    const image = await story.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
 
 test('Buttons - Link button - with chevron in Vivo', async () => {
     await openStoryPage({
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
         skin: 'Vivo-new',
         args: {
-            withChevron: true,
+            chevron: true,
         },
     });
 
@@ -145,7 +142,7 @@ test('Buttons - Link button with chevron and big font size', async () => {
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
         args: {
-            withChevron: true,
+            chevron: true,
         },
     });
 
@@ -163,7 +160,7 @@ test('Buttons - Link button with chevron and big font size in Vivo', async () =>
         device: 'MOBILE_IOS',
         skin: 'Vivo-new',
         args: {
-            withChevron: true,
+            chevron: true,
         },
     });
 

src/__screenshot_tests__/callout-screenshot-test.tsx

@@ -1,18 +1,18 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    actions              | title           | inverse  | isClosable | withIcon | case
-    ${'button and link'} | ${'Some title'} | ${false} | ${true}    | ${true}  | ${''}
-    ${'button and link'} | ${'Some title'} | ${true}  | ${true}    | ${true}  | ${'over inverse'}
-    ${'button and link'} | ${'Some title'} | ${false} | ${false}   | ${true}  | ${'not closable'}
-    ${'link'}            | ${'Some title'} | ${false} | ${true}    | ${true}  | ${'with button link'}
-    ${'none'}            | ${'Some title'} | ${false} | ${true}    | ${true}  | ${'without actions'}
-    ${'none'}            | ${''}           | ${false} | ${false}   | ${false} | ${'only description'}
-    ${'none'}            | ${''}           | ${false} | ${true}    | ${false} | ${'only description and closable'}
-`('Callout $case', async ({actions, title, inverse, isClosable, withIcon}) => {
+    actions              | title           | inverse  | closable | asset    | case
+    ${'button and link'} | ${'Some title'} | ${false} | ${true}  | ${true}  | ${''}
+    ${'button and link'} | ${'Some title'} | ${true}  | ${true}  | ${true}  | ${'over inverse'}
+    ${'button and link'} | ${'Some title'} | ${false} | ${false} | ${true}  | ${'not closable'}
+    ${'link'}            | ${'Some title'} | ${false} | ${true}  | ${true}  | ${'with button link'}
+    ${'none'}            | ${'Some title'} | ${false} | ${true}  | ${true}  | ${'without actions'}
+    ${'none'}            | ${''}           | ${false} | ${false} | ${false} | ${'only description'}
+    ${'none'}            | ${''}           | ${false} | ${true}  | ${false} | ${'only description and closable'}
+`('Callout $case', async ({actions, title, inverse, closable, asset}) => {
     await openStoryPage({
         id: 'components-callout--default',
-        args: {actions, title, inverse, isClosable, withIcon},
+        args: {actions, title, inverse, closable, asset},
     });
 
     const callout = await screen.findByRole('region');

src/__screenshot_tests__/carousel-screenshot-test.tsx

@@ -22,7 +22,7 @@ test('Carousel mobile without bullets', async () => {
     const page = await openStoryPage({
         id: 'components-carousels-carousel--default',
         device: 'MOBILE_IOS',
-        args: {withBullets: false},
+        args: {bullets: false},
     });
 
     expect(await page.screenshot()).toMatchImageSnapshot();

src/__screenshot_tests__/chip-screenshot-test.tsx

@@ -15,7 +15,7 @@ test.each(CHIP_OPTIONS)('Chip - %s', async (option) => {
         device: 'DESKTOP',
         args: {
             badge: option.includes('badge') ? '2' : 'undefined',
-            withIcon: option.includes('icon'),
+            icon: option.includes('icon'),
             closable: option.includes('closable'),
         },
     });
@@ -39,7 +39,7 @@ test.each`
     const page = await openStoryPage({
         id: `components-chip--${selection}-selection`,
         device: 'DESKTOP',
-        args: {inverse, withIcon: true, badge},
+        args: {inverse, icon: true, badge},
     });
 
     const story = await screen.findByTestId(`chip-${selection}-selection`);