Merge pull request #1018 from glints-dev/feature/link-conditional-center

Link: conditionally center if external true

src/@next/Link/Link.stories.tsx

@@ -21,3 +21,19 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
   url: '#',
 };
+
+const WithinParagraphTemplate: Story<LinkProps> = args => {
+  return (
+    <>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <Link external {...args}>
+        {' '}
+        Default Link
+      </Link>{' '}
+      Sed volutpat eget mi in consequat. Aliquam cursus nunc pulvinar rutrum
+      pharetra.
+    </>
+  );
+};
+
+export const WithinParagraph = WithinParagraphTemplate.bind({});

src/@next/Link/Link.tsx

@@ -27,6 +27,7 @@ export const Link = ({
       data-underline={!removeUnderline}
       data-monochrome={monochrome}
       {...(external && { target: '_blank' })}
+      external={external}
       {...props}
     >
       <Typography variant="body1" as="span">

src/@next/Link/LinkStyle.ts

@@ -3,9 +3,16 @@ import { Blue, Neutral } from '../utilities/colors';
 import { space2 } from '../utilities/spacing';
 import { LinkProps } from './Link';
 
+const centerAlign = `
+  vertical-align: middle;
+
+  svg {
+    vertical-align: middle;
+  }
+`;
+
 export const StyledLink = styled.a<LinkProps>`
-  display: flex;
-  align-items: center;
+  ${({ external }) => external && centerAlign}
   color: ${Blue.S99};
 
   &[data-underline='false'] {

test/e2e/link/link.spec.ts

@@ -58,3 +58,11 @@ test('Link - monochrome with external link', async ({ page }) => {
     'link-monochrome-with-external-pressed.png'
   );
 });
+
+test('Link - within paragraph', async ({ page }) => {
+  const linkPage = new LinkPage(page);
+  await linkPage.gotoWithinParagraphPage();
+  await expect(linkPage.container).toHaveScreenshot(
+    'link-within-paragraph.png'
+  );
+});

test/e2e/link/linkPage.ts

@@ -1,5 +1,5 @@
 import { Locator, Page } from '@playwright/test';
-import { StoryBookPage } from '../storybookPage';
+import { Args, StoryBookPage } from '../storybookPage';
 
 export class LinkPage extends StoryBookPage {
   readonly link: Locator;
@@ -10,4 +10,9 @@ export class LinkPage extends StoryBookPage {
       .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
       .getByText('Default Link');
   }
+
+  async gotoWithinParagraphPage(args?: Args) {
+    this.setPath('?path=/story/next-link--within-paragraph');
+    await this.goto(args);
+  }
 }