added stories RawLink, SocialLink, and ContactLink and deleted story … (#1957)

* 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>

front/src/modules/ui/link/components/PrimaryLink.tsx

@@ -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>
-);

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,
+  },
+};

front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx

@@ -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);
-  },
-};

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);
+  },
+};

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);
+  },
+};

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);
+  },
+};