From 0e60743d140aff66eca6df712f653ee20f5d4ef3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 3 Oct 2023 19:36:03 +0200
Subject: refactor(components): rewrite SocialLink component

* replace default label with a label prop
* rename name prop to icon prop
---
 src/components/organisms/widgets/social-media.stories.tsx |  8 ++++----
 src/components/organisms/widgets/social-media.test.tsx    | 12 ++++++------
 src/components/organisms/widgets/social-media.tsx         | 10 ++++++----
 3 files changed, 16 insertions(+), 14 deletions(-)

(limited to 'src/components/organisms/widgets')

diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx
index f012554..6da3f3a 100644
--- a/src/components/organisms/widgets/social-media.stories.tsx
+++ b/src/components/organisms/widgets/social-media.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { SocialMedia as SocialMediaWidget, Media } from './social-media';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { SocialMedia as SocialMediaWidget, type Media } from './social-media';
 
 /**
  * SocialMedia - Storybook Meta
@@ -46,8 +46,8 @@ const Template: ComponentStory<typeof SocialMediaWidget> = (args) => (
 );
 
 const media: Media[] = [
-  { name: 'Github', url: '#' },
-  { name: 'LinkedIn', url: '#' },
+  { icon: 'Github', id: 'github', label: 'Github', url: '#' },
+  { icon: 'LinkedIn', id: 'gitlab', label: 'Gitlab', url: '#' },
 ];
 
 /**
diff --git a/src/components/organisms/widgets/social-media.test.tsx b/src/components/organisms/widgets/social-media.test.tsx
index c0786ad..2cd3afb 100644
--- a/src/components/organisms/widgets/social-media.test.tsx
+++ b/src/components/organisms/widgets/social-media.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { SocialMedia, Media } from './social-media';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { SocialMedia, type Media } from './social-media';
 
 const media: Media[] = [
-  { name: 'Github', url: '#' },
-  { name: 'LinkedIn', url: '#' },
+  { icon: 'Github', id: 'github', label: 'Github', url: '#' },
+  { icon: 'LinkedIn', id: 'gitlab', label: 'Gitlab', url: '#' },
 ];
 const title = 'Dolores ut ut';
 const titleLevel = 2;
@@ -22,7 +22,7 @@ describe('SocialMedia', () => {
   it('renders the widget title', () => {
     render(<SocialMedia media={media} title={title} level={titleLevel} />);
     expect(
-      screen.getByRole('heading', {
+      rtlScreen.getByRole('heading', {
         level: titleLevel,
         name: new RegExp(title, 'i'),
       })
@@ -31,6 +31,6 @@ describe('SocialMedia', () => {
 
   it('renders the correct number of items', () => {
     render(<SocialMedia media={media} title={title} level={titleLevel} />);
-    expect(screen.getAllByRole('listitem')).toHaveLength(media.length);
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(media.length);
   });
 });
diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx
index f9dea58..ddeb09c 100644
--- a/src/components/organisms/widgets/social-media.tsx
+++ b/src/components/organisms/widgets/social-media.tsx
@@ -3,7 +3,9 @@ import { List, ListItem, SocialLink, type SocialLinkProps } from '../../atoms';
 import { Widget, type WidgetProps } from '../../molecules';
 import styles from './social-media.module.scss';
 
-export type Media = SocialLinkProps;
+export type Media = Required<
+  Pick<SocialLinkProps, 'icon' | 'id' | 'label' | 'url'>
+>;
 
 export type SocialMediaProps = Pick<WidgetProps, 'level' | 'title'> & {
   media: Media[];
@@ -22,9 +24,9 @@ export const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
    * @returns {JSX.Element[]} The social links.
    */
   const getItems = (links: Media[]): JSX.Element[] =>
-    links.map((link, index) => (
-      <ListItem key={`media-${index}`}>
-        <SocialLink name={link.name} url={link.url} />
+    links.map(({ id, ...link }) => (
+      <ListItem key={id}>
+        <SocialLink {...link} />
       </ListItem>
     ));
 
-- 
cgit v1.2.3