feat(ButtonLink): add default variant

.storybook/welcome-story.js

@@ -47,13 +47,18 @@ export const Welcome = () => {
                     </Stack>
                     <nav style={{margin: '0 -8px'}}>
                         <Inline space={8}>
-                            <ButtonLink href="https://github.com/Telefonica/mistica">
+                            <ButtonLink small href="https://github.com/Telefonica/mistica">
                                 About Mistica
                             </ButtonLink>
-                            <ButtonLink href="https://github.com/Telefonica/mistica-web#getting-started">
+                            <ButtonLink
+                                small
+                                href="https://github.com/Telefonica/mistica-web#getting-started"
+                            >
                                 Getting started
                             </ButtonLink>
-                            <ButtonLink href="/playroom">Go to playroom</ButtonLink>
+                            <ButtonLink small href="/playroom">
+                                Go to playroom
+                            </ButtonLink>
                         </Inline>
                     </nav>
                 </Stack>

playroom/snippets.tsx

@@ -989,7 +989,7 @@ const cardSnippets: Array<Snippet> = [
                     Action
                 </ButtonPrimary>
             }
-            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+            buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
         />`,
     },
     {
@@ -1010,7 +1010,7 @@ const cardSnippets: Array<Snippet> = [
                     Action
                 </ButtonPrimary>
             }
-            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+            buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
         />`,
     },
     {
@@ -1033,7 +1033,7 @@ const cardSnippets: Array<Snippet> = [
                     Action
                 </ButtonPrimary>
             }
-            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+            buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
         />`,
     },
     {
@@ -1288,7 +1288,7 @@ const cardSnippets: Array<Snippet> = [
                     Action
                 </ButtonPrimary>
             }
-            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+            buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
         />`,
     },
     {
@@ -1308,7 +1308,7 @@ const cardSnippets: Array<Snippet> = [
                     Action
                 </ButtonPrimary>
             }
-            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+            buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
         />`,
     },
 
@@ -1332,23 +1332,23 @@ const titlesSnippets: Array<Snippet> = [
     },
     {
         name: 'Title1 (with link)',
-        code: '<Title1 right={<ButtonLink onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title1>',
+        code: '<Title1 right={<ButtonLink small onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title1>',
     },
     {
         name: 'Title2',
         code: '<Title2>Some title</Title2>',
     },
     {
         name: 'Title2 (with link)',
-        code: '<Title2 right={<ButtonLink onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title2>',
+        code: '<Title2 right={<ButtonLink small onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title2>',
     },
     {
         name: 'Title3',
         code: '<Title3>Some title</Title3>',
     },
     {
         name: 'Title3 (with link)',
-        code: '<Title3 right={<ButtonLink onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title3>',
+        code: '<Title3 right={<ButtonLink small onPress={() => {}} withChevron bleedRight bleedY>Link</ButtonLink>}>Some title</Title3>',
     },
 ].map((snippet) => ({...snippet, group: 'Titles'}));
 
@@ -1548,7 +1548,7 @@ const emptyStatesGroup: Array<Snippet> = [
             title="Your cart is empty"
             description="Check our marketplaces and find something for you"
             button={<ButtonPrimary small onPress={() => {}}>Explore marketplace</ButtonPrimary>}
-            buttonLink={<ButtonLink onPress={() => {}}>More info</ButtonLink>}
+            buttonLink={<ButtonLink small onPress={() => {}}>More info</ButtonLink>}
         />`,
     },
 ].map((snippet) => ({...snippet, group: 'Empty states'}));
@@ -1744,7 +1744,7 @@ const exampleScreens: Array<Snippet> = [
                     label="Password"
                     helperText="Helper text"
                   />
-                  <ButtonLink bleedLeft onPress>
+                  <ButtonLink small bleedLeft onPress>
                     I’m having problems with my password
                   </ButtonLink>
                 </Stack>
@@ -1757,7 +1757,7 @@ const exampleScreens: Array<Snippet> = [
                   </Text3>
                   <TextField name="phone" label="Phone number" prefix="+34" />
 
-                  <ButtonLink bleedLeft onPress>
+                  <ButtonLink small bleedLeft onPress>
                     I’m having access problems
                   </ButtonLink>
                 </Stack>
@@ -1946,7 +1946,7 @@ const exampleScreens: Array<Snippet> = [
             />
           ))}
         />
-        <ButtonLink bleedLeft onPress={() => {}}>
+        <ButtonLink small bleedLeft onPress={() => {}}>
           See all products
         </ButtonLink>
       </Stack>
@@ -1989,7 +1989,7 @@ const exampleScreens: Array<Snippet> = [
             />
           ))}
         />
-        <ButtonLink bleedLeft onPress={() => {}}>
+        <ButtonLink small bleedLeft onPress={() => {}}>
           View more
         </ButtonLink>
       </Stack>
@@ -2498,7 +2498,7 @@ const carouselSnippets = [
           Action
         </ButtonPrimary>
       }
-      buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+      buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
     />
   ))}
 />`,
@@ -3708,7 +3708,7 @@ export default [
                     Action
                 </ButtonPrimary>
                 }
-                buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+                buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
             />`,
     },
     ...navigationBarSnippets,

src/__private_stories__/button-ellipsis-story.tsx

@@ -9,34 +9,67 @@ const handleOnPress = () => window.alert('pressed!');
 
 type Args = {
     text: string;
+    loadingText: string;
+    small: boolean;
+    showSpinner: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({text}) => {
+export const Default: StoryComponent<Args> = ({text, loadingText, small, showSpinner}) => {
     const href = 'https://example.com';
 
     return (
         <div data-testid="content" style={{width: 160, border: `1px solid ${skinVars.colors.border}`}}>
             <Stack space={8}>
                 <Title1>ButtonPrimary</Title1>
-                <ButtonPrimary onPress={handleOnPress}>{text}</ButtonPrimary>
+                <ButtonPrimary
+                    onPress={handleOnPress}
+                    small={small}
+                    loadingText={loadingText}
+                    showSpinner={showSpinner}
+                >
+                    {text}
+                </ButtonPrimary>
 
                 <Title1>ButtonSecondary</Title1>
 
-                <ButtonSecondary onPress={handleOnPress}>{text}</ButtonSecondary>
+                <ButtonSecondary
+                    onPress={handleOnPress}
+                    small={small}
+                    loadingText={loadingText}
+                    showSpinner={showSpinner}
+                >
+                    {text}
+                </ButtonSecondary>
 
                 <Title1>ButtonDanger</Title1>
 
-                <ButtonDanger onPress={handleOnPress}>{text}</ButtonDanger>
+                <ButtonDanger
+                    onPress={handleOnPress}
+                    small={small}
+                    loadingText={loadingText}
+                    showSpinner={showSpinner}
+                >
+                    {text}
+                </ButtonDanger>
 
                 <Title1>ButtonLink</Title1>
                 <Text2 as="p" regular>
                     Button (onPress):
                 </Text2>
-                <ButtonLink onPress={handleOnPress}>{text}</ButtonLink>
+                <ButtonLink
+                    onPress={handleOnPress}
+                    small={small}
+                    loadingText={loadingText}
+                    showSpinner={showSpinner}
+                >
+                    {text}
+                </ButtonLink>
                 <Text2 as="p" regular>
                     Link (href):
                 </Text2>
-                <ButtonLink href={href}>{text}</ButtonLink>
+                <ButtonLink href={href} small={small} loadingText={loadingText} showSpinner={showSpinner}>
+                    {text}
+                </ButtonLink>
             </Stack>
         </div>
     );
@@ -45,4 +78,7 @@ export const Default: StoryComponent<Args> = ({text}) => {
 Default.storyName = 'Ellipsis in buttons';
 Default.args = {
     text: 'Ellipsis text example example',
+    loadingText: 'Loading ellipsis text example',
+    small: false,
+    showSpinner: false,
 };

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

@@ -50,7 +50,11 @@ const ExampleCarousel = ({
                 title={`Title ${idx} carousel ${cardsTitlePrefix}`}
                 description="Some description"
                 media={<Image src={tennisUrl} aspectRatio="16:9" />}
-                buttonLink={<ButtonLink href="https://google.com">Link {idx}</ButtonLink>}
+                buttonLink={
+                    <ButtonLink small href="https://google.com">
+                        Link {idx}
+                    </ButtonLink>
+                }
             />
         ))}
     />

src/__private_stories__/private-responsive-layout-scenarios-story.tsx

@@ -48,7 +48,9 @@ export const Default: StoryComponent = () => {
                                         description="Some description"
                                         media={<Image src={tennisUrl} aspectRatio="16:9" />}
                                         buttonLink={
-                                            <ButtonLink href="https://google.com">Link {idx}</ButtonLink>
+                                            <ButtonLink small href="https://google.com">
+                                                Link {idx}
+                                            </ButtonLink>
                                         }
                                     />
                                 ))}
@@ -73,7 +75,11 @@ export const Default: StoryComponent = () => {
                                             Action
                                         </ButtonPrimary>
                                     }
-                                    buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+                                    buttonLink={
+                                        <ButtonLink small onPress={() => {}}>
+                                            Link
+                                        </ButtonLink>
+                                    }
                                 />
                             </ResponsiveLayout>
                         </ResponsiveLayout>
@@ -100,7 +106,11 @@ export const Default: StoryComponent = () => {
                                             Action
                                         </ButtonPrimary>
                                     }
-                                    buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+                                    buttonLink={
+                                        <ButtonLink small onPress={() => {}}>
+                                            Link
+                                        </ButtonLink>
+                                    }
                                 />
                             ))}
                         />

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

@@ -14,6 +14,17 @@ test.each(DEVICES)('ButtonGroup (%s)', async (device) => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(DEVICES)('ButtonGroup (%s) - small', async (device) => {
+    const page = await openStoryPage({
+        id: 'components-buttons-buttongroup--default',
+        device,
+        args: {small: true},
+    });
+
+    const image = await page.screenshot({fullPage: true});
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(DEVICES)('ButtonGroup - Long text (%s)', async (device) => {
     const page = await openStoryPage({
         id: 'components-buttons-buttongroup--default',

src/__screenshot_tests__/button-screenshot-test.tsx

@@ -4,7 +4,6 @@ import type {Device} from '../test-utils';
 
 const DEVICES: Array<Device> = ['MOBILE_IOS', 'MOBILE_ANDROID'];
 const BUTTONS = ['Primary button', 'Secondary button', 'Danger button', 'Link button', 'Link button danger'];
-const SMALL_BUTTONS = ['Primary button', 'Secondary button', 'Danger button'];
 
 const getCases = () => {
     const cases = [];
@@ -54,7 +53,7 @@ test.each(BUTTONS)('Buttons - %s - disabled', async (button) => {
     expect(image).toMatchImageSnapshot();
 });
 
-test.each(SMALL_BUTTONS)('Buttons - %s - small', async (button) => {
+test.each(BUTTONS)('Buttons - %s - small', async (button) => {
     await openStoryPage({
         id: `components-buttons--${button.toLowerCase().replaceAll(' ', '-')}`,
         device: 'MOBILE_IOS',
@@ -80,17 +79,31 @@ test.each(getCases())('Buttons - %s - spinner (%s)', async (button, device) => {
     expect(image).toMatchImageSnapshot();
 });
 
-test.each(DEVICES)('Buttons - ellipsis (%s)', async (device) => {
-    await openStoryPage({
-        id: 'private-ellipsis-in-buttons--default',
-        device,
-    });
-
-    const story = await screen.findByTestId('content');
-
-    const image = await story.screenshot();
-    expect(image).toMatchImageSnapshot();
-});
+test.each`
+    device              | small    | showSpinner
+    ${'MOBILE_IOS'}     | ${true}  | ${true}
+    ${'MOBILE_IOS'}     | ${true}  | ${false}
+    ${'MOBILE_IOS'}     | ${false} | ${true}
+    ${'MOBILE_IOS'}     | ${false} | ${false}
+    ${'MOBILE_ANDROID'} | ${true}  | ${true}
+    ${'MOBILE_ANDROID'} | ${true}  | ${false}
+    ${'MOBILE_ANDROID'} | ${false} | ${true}
+    ${'MOBILE_ANDROID'} | ${false} | ${false}
+`(
+    'Buttons - ellipsis with small = $small and showSpinner = $showSpinner ($device)',
+    async ({device, small, showSpinner}) => {
+        await openStoryPage({
+            id: 'private-ellipsis-in-buttons--default',
+            device,
+            args: {small, showSpinner},
+        });
+
+        const story = await screen.findByTestId('content');
+
+        const image = await story.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);
 
 const BUTTON_LINK_ACTIONS = ['href', 'to', 'onPress'];
 const BUTTON_LINK_CHEVRON_OPTIONS = ['default', 'true', 'false'];

src/__stories__/button-group-story.tsx

@@ -41,7 +41,9 @@ export const Default: StoryComponent<Args> = ({
     ) : undefined;
 
     const linkButton = buttonLink ? (
-        <ButtonLink onPress={handleOnPress}>{buttonLinkText}</ButtonLink>
+        <ButtonLink small={small} onPress={handleOnPress}>
+            {buttonLinkText}
+        </ButtonLink>
     ) : undefined;
 
     return <ButtonGroup primaryButton={primaryButton} secondaryButton={secondaryButton} link={linkButton} />;