feat(ButtonLink): add default variant (#1211)

BREAKING CHANGE: ButtonLink won't be small as default anymore

.storybook/welcome-story.js

@@ -47,13 +47,18 @@ export const Welcome = () => {
  </Stack>
  <nav style={{margin: '0 -8px'}}>
  <Inline space={8}>
- <ButtonLink href="https:/Telefonica/mistica">
+ <ButtonLink small href="https:/Telefonica/mistica">
  About Mistica
  </ButtonLink>
- <ButtonLink href="https:/Telefonica/mistica-web#getting-started">
+ <ButtonLink
+ small
+ href="https:/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>',
  },
  {
  name: 'Title4',
@@ -1556,7 +1556,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'}));
@@ -1752,7 +1752,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>
@@ -1765,7 +1765,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>
@@ -1954,7 +1954,7 @@ const exampleScreens: Array<Snippet> = [
  />
  ))}
  />
- <ButtonLink bleedLeft onPress={() => {}}>
+ <ButtonLink small bleedLeft onPress={() => {}}>
  See all products
  </ButtonLink>
  </Stack>
@@ -1997,7 +1997,7 @@ const exampleScreens: Array<Snippet> = [
  />
  ))}
  />
- <ButtonLink bleedLeft onPress={() => {}}>
+ <ButtonLink small bleedLeft onPress={() => {}}>
  View more
  </ButtonLink>
  </Stack>
@@ -2506,7 +2506,7 @@ const carouselSnippets = [
  Action
  </ButtonPrimary>
  }
- buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+ buttonLink={<ButtonLink small onPress={() => {}}>Link</ButtonLink>}
  />
  ))}
 />`,
@@ -3716,7 +3716,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} />;