chore(Storybook): fix story control naming inconsistencies (#1201)

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__/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`);

src/__screenshot_tests__/cover-hero-screenshot-test.tsx

@@ -40,21 +40,21 @@ const cases = [
         'desktop with extra and sideExtra',
         {
             device: 'DESKTOP',
-            args: {withExtra: true, withSideExtra: true},
+            args: {extra: true, sideExtra: true},
         },
     ],
     [
         'mobile with extra and sideExtra',
         {
             device: 'MOBILE_IOS',
-            args: {withExtra: true, withSideExtra: true},
+            args: {extra: true, sideExtra: true},
         },
     ],
     [
         'tablet with extra and sideExtra',
         {
             device: 'TABLET',
-            args: {withExtra: true, withSideExtra: true},
+            args: {extra: true, sideExtra: true},
         },
     ],
     [
@@ -77,8 +77,8 @@ const cases = [
             device: 'DESKTOP',
             args: {
                 centered: true,
-                withExtra: true,
-                withSideExtra: true,
+                extra: true,
+                sideExtra: true,
                 actions: 'button secondaryButton and link',
             },
         },
@@ -89,8 +89,8 @@ const cases = [
             device: 'MOBILE_IOS',
             args: {
                 centered: true,
-                withExtra: true,
-                withSideExtra: true,
+                extra: true,
+                sideExtra: true,
                 actions: 'button secondaryButton and link',
             },
         },
@@ -140,7 +140,7 @@ const cases = [
             args: {
                 title: 'Long title '.repeat(10),
                 description: 'This is a long description with a long text to see how this works'.repeat(10),
-                withSideExtra: true,
+                sideExtra: true,
             },
         },
     ],

src/__screenshot_tests__/data-card-screenshot-test.tsx

@@ -47,7 +47,7 @@ test('DataCard with extra content', async () => {
     const page = await openStoryPage({
         id: 'components-cards-datacard--default',
         device: 'MOBILE_IOS',
-        args: {withExtra: true},
+        args: {extra: true},
     });
 
     const image = await page.screenshot({fullPage: true});
@@ -71,7 +71,7 @@ test('DataCard with top actions', async () => {
     const page = await openStoryPage({
         id: 'components-cards-datacard--default',
         device: 'MOBILE_IOS',
-        args: {withTopAction: true},
+        args: {topAction: true},
     });
 
     const image = await page.screenshot({fullPage: true});
@@ -84,7 +84,7 @@ test('DataCard without icon, with top actions and too long title', async () => {
         id: 'components-cards-datacard--default',
         device: 'MOBILE_IOS',
         args: {
-            withTopAction: true,
+            topAction: true,
             asset: 'none',
             title: 'Too long title too long title too long titltoo long title too long title',
         },

src/__screenshot_tests__/dialog-screenshot-test.tsx

@@ -52,7 +52,7 @@ test('Dialog optional elements are not displayed if not provided', async () => {
             onAccept: false,
             onCancel: false,
             link: false,
-            icon: false,
+            asset: false,
             extra: false,
         },
     });