From 5dddd77eb3fa613606bfcaf893038a78cdd278af Mon Sep 17 00:00:00 2001
From: rsato10 <89757445+rsato10@users.noreply.github.com>
Date: Tue, 10 Oct 2023 05:58:07 -0700
Subject: [PATCH] =?UTF-8?q?added=20stories=20RawLink,=20SocialLink,=20and?=
 =?UTF-8?q?=20ContactLink=20and=20deleted=20story=20=E2=80=A6=20(#1957)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added stories RawLink, SocialLink, and ContactLink and deleted story for PrimaryLink

* add play function to link tests

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
---
 .../ui/link/components/PrimaryLink.tsx        | 29 -----------
 .../__stories__/ContactLink.stories.tsx       | 36 +++++++++++++
 .../__stories__/PrimaryLink.stories.tsx       | 39 --------------
 .../__stories__/RawLink.stories.tsx           | 38 ++++++++++++++
 .../__stories__/RoundedLink.stories.tsx       | 19 ++++++-
 .../__stories__/SocialLink.stories.tsx        | 52 +++++++++++++++++++
 6 files changed, 144 insertions(+), 69 deletions(-)
 delete mode 100644 front/src/modules/ui/link/components/PrimaryLink.tsx
 create mode 100644 front/src/modules/ui/link/components/__stories__/ContactLink.stories.tsx
 delete mode 100644 front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
 create mode 100644 front/src/modules/ui/link/components/__stories__/RawLink.stories.tsx
 create mode 100644 front/src/modules/ui/link/components/__stories__/SocialLink.stories.tsx

diff --git a/front/src/modules/ui/link/components/PrimaryLink.tsx b/front/src/modules/ui/link/components/PrimaryLink.tsx
deleted file mode 100644
index 94306d8db..000000000
--- a/front/src/modules/ui/link/components/PrimaryLink.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Link as ReactLink } from 'react-router-dom';
-import styled from '@emotion/styled';
-
-type PrimaryLinkProps = {
-  children: React.ReactNode;
-  href: string;
-  onClick?: () => void;
-  fullWidth?: boolean;
-};
-
-const StyledClickable = styled.div`
-  display: flex;
-  a {
-    color: ${({ theme }) => theme.font.color.tertiary};
-    font-size: ${({ theme }) => theme.font.size.sm};
-    overflow: hidden;
-    text-decoration: underline;
-    text-overflow: ellipsis;
-  }
-`;
-
-export const PrimaryLink = ({ href, children, onClick }: PrimaryLinkProps) => (
-  <StyledClickable>
-    <ReactLink onClick={onClick} to={href}>
-      {children}
-    </ReactLink>
-  </StyledClickable>
-);
diff --git a/front/src/modules/ui/link/components/__stories__/ContactLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/ContactLink.stories.tsx
new file mode 100644
index 000000000..35c367238
--- /dev/null
+++ b/front/src/modules/ui/link/components/__stories__/ContactLink.stories.tsx
@@ -0,0 +1,36 @@
+import { jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { ContactLink } from '../ContactLink';
+
+const meta: Meta<typeof ContactLink> = {
+  title: 'UI/Links/ContactLink',
+  component: ContactLink,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    className: 'ContactLink',
+    href: '/test',
+    children: 'Contact Link',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContactLink>;
+const clickJestFn = jest.fn();
+
+export const Email: Story = {
+  args: {
+    href: `mailto:${'email@example.com'}`,
+    children: 'email@example.com',
+    onClick: clickJestFn,
+  },
+};
+
+export const Phone: Story = {
+  args: {
+    children: '11111111111',
+    onClick: clickJestFn,
+  },
+};
diff --git a/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
deleted file mode 100644
index 482fe8282..000000000
--- a/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { expect, jest } from '@storybook/jest';
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { PrimaryLink } from '../PrimaryLink';
-
-const meta: Meta<typeof PrimaryLink> = {
-  title: 'UI/Links/PrimaryLink',
-  component: PrimaryLink,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-    ComponentDecorator,
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof PrimaryLink>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  args: { href: '/test', onClick: clickJestFn, children: 'A primary link' },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const link = canvas.getByRole('link');
-    await userEvent.click(link);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
diff --git a/front/src/modules/ui/link/components/__stories__/RawLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/RawLink.stories.tsx
new file mode 100644
index 000000000..709e4b79b
--- /dev/null
+++ b/front/src/modules/ui/link/components/__stories__/RawLink.stories.tsx
@@ -0,0 +1,38 @@
+import { expect } from '@storybook/jest';
+import { jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { RawLink } from '../RawLink';
+
+const meta: Meta<typeof RawLink> = {
+  title: 'UI/Links/RawLink',
+  component: RawLink,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    className: 'RawLink',
+    href: '/test',
+    children: 'Raw Link',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RawLink>;
+const clickJestFn = jest.fn();
+
+export const Default: Story = {
+  args: {
+    onClick: clickJestFn,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const link = canvas.getByRole('link');
+    await userEvent.click(link);
+
+    await expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
diff --git a/front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx
index 39b20320e..7491de814 100644
--- a/front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx
+++ b/front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx
@@ -1,4 +1,7 @@
+import { expect } from '@storybook/jest';
+import { jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
@@ -16,5 +19,19 @@ const meta: Meta<typeof RoundedLink> = {
 
 export default meta;
 type Story = StoryObj<typeof RoundedLink>;
+const clickJestFn = jest.fn();
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    onClick: clickJestFn,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const link = canvas.getByRole('link');
+    await userEvent.click(link);
+
+    await expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
diff --git a/front/src/modules/ui/link/components/__stories__/SocialLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/SocialLink.stories.tsx
new file mode 100644
index 000000000..3d83f4e41
--- /dev/null
+++ b/front/src/modules/ui/link/components/__stories__/SocialLink.stories.tsx
@@ -0,0 +1,52 @@
+import { expect } from '@storybook/jest';
+import { jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { LinkType, SocialLink } from '../SocialLink';
+
+const meta: Meta<typeof SocialLink> = {
+  title: 'UI/Links/SocialLink',
+  component: SocialLink,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    href: '/test',
+    children: 'Social Link',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SocialLink>;
+const clickJestFn = jest.fn();
+
+const linkedin: LinkType = LinkType.LinkedIn;
+const twitter: LinkType = LinkType.Twitter;
+
+export const LinkedIn: Story = {
+  args: {
+    href: '/LinkedIn',
+    children: 'LinkedIn',
+    onClick: clickJestFn,
+    type: linkedin,
+  },
+};
+
+export const Twitter: Story = {
+  args: {
+    href: '/Twitter',
+    children: 'Twitter',
+    onClick: clickJestFn,
+    type: twitter,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const link = canvas.getByRole('link');
+    await userEvent.click(link);
+
+    await expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};