refactor(components): replace LinksListWidget with LinksWidget

* avoid List component repeat
* rewrite tests and CSS
* add an id to LinksWidgetItemData (previously LinksListItems) type
because the label could be duplicated

19 files changed, 360 insertions, 359 deletions

diff --git a/src/components/organisms/widgets/index.ts b/src/components/organisms/widgets/index.ts
index 2286898..972561e 100644
--- a/src/components/organisms/widgets/index.ts
+++ b/src/components/organisms/widgets/index.ts
@@ -1,5 +1,5 @@
 export * from './image-widget';
-export * from './links-list-widget';
+export * from './links-widget';
 export * from './sharing-widget';
 export * from './social-media-widget';
 export * from './table-of-contents';
diff --git a/src/components/organisms/widgets/links-list-widget.module.scss b/src/components/organisms/widgets/links-list-widget.module.scss
deleted file mode 100644
index 4efc2d4..0000000
--- a/src/components/organisms/widgets/links-list-widget.module.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/placeholders";
-
-.widget {
-  .list {
-    .list {
-      padding: 0;
-
-      > *:first-child {
-        border-top: fun.convert-px(1) solid var(--color-primary);
-      }
-    }
-
-    &__link {
-      display: block;
-      padding: var(--spacing-2xs) var(--spacing-xs);
-      background: none;
-      text-decoration: underline solid transparent 0;
-
-      &:hover,
-      &:focus {
-        background: var(--color-bg-secondary);
-        font-weight: 600;
-      }
-
-      &:focus {
-        color: var(--color-primary);
-        text-decoration-color: var(--color-primary-light);
-        text-decoration-thickness: 0.25ex;
-      }
-
-      &:active {
-        background: var(--color-bg-tertiary);
-        text-decoration-color: transparent;
-        text-decoration-thickness: 0;
-      }
-    }
-
-    &--ordered {
-      counter-reset: link;
-
-      .list__link {
-        counter-increment: link;
-
-        &::before {
-          padding-right: var(--spacing-2xs);
-          content: counters(link, ".") ". ";
-          color: var(--color-secondary);
-        }
-      }
-    }
-
-    &__item {
-      &:not(:last-child) {
-        border-bottom: fun.convert-px(1) solid var(--color-primary);
-      }
-
-      > .list {
-        .list__link {
-          padding-left: var(--spacing-md);
-        }
-
-        .list__item > .list {
-          .list__link {
-            padding-left: var(--spacing-xl);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
deleted file mode 100644
index 6e5f170..0000000
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Heading } from '../../atoms';
-import { LinksListWidget } from './links-list-widget';
-
-/**
- * LinksListWidget - Storybook Meta
- */
-export default {
-  title: 'Organisms/Widgets/LinksList',
-  component: LinksListWidget,
-  args: {
-    isOrdered: false,
-  },
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the list wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    items: {
-      description: 'The widget data.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof LinksListWidget>;
-
-const Template: ComponentStory<typeof LinksListWidget> = (args) => (
-  <LinksListWidget {...args} />
-);
-
-const items = [
-  { name: 'Level 1: Item 1', url: '#' },
-  {
-    name: 'Level 1: Item 2',
-    url: '#',
-    child: [
-      { name: 'Level 2: Item 1', url: '#' },
-      { name: 'Level 2: Item 2', url: '#' },
-      {
-        name: 'Level 2: Item 3',
-        url: '#',
-        child: [
-          { name: 'Level 3: Item 1', url: '#' },
-          { name: 'Level 3: Item 2', url: '#' },
-        ],
-      },
-      { name: 'Level 2: Item 4', url: '#' },
-    ],
-  },
-  { name: 'Level 1: Item 3', url: '#' },
-  { name: 'Level 1: Item 4', url: '#' },
-];
-
-/**
- * Links List Widget Stories - Unordered
- */
-export const Unordered = Template.bind({});
-Unordered.args = {
-  heading: (
-    <Heading isFake level={3}>
-      Quo et totam
-    </Heading>
-  ),
-  items,
-};
-
-/**
- * Links List Widget Stories - Ordered
- */
-export const Ordered = Template.bind({});
-Ordered.args = {
-  heading: (
-    <Heading isFake level={3}>
-      Quo et totam
-    </Heading>
-  ),
-  isOrdered: true,
-  items,
-};
diff --git a/src/components/organisms/widgets/links-list-widget.test.tsx b/src/components/organisms/widgets/links-list-widget.test.tsx
deleted file mode 100644
index 2a914e7..0000000
--- a/src/components/organisms/widgets/links-list-widget.test.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '@testing-library/react';
-import { Heading } from '../../atoms';
-import { LinksListWidget } from './links-list-widget';
-
-const title = 'Voluptatem minus autem';
-
-const items = [
-  { name: 'Item 1', url: '/item-1' },
-  { name: 'Item 2', url: '/item-2' },
-  { name: 'Item 3', url: '/item-3' },
-];
-
-describe('LinksListWidget', () => {
-  it('renders a widget title', () => {
-    render(
-      <LinksListWidget
-        heading={<Heading level={3}>{title}</Heading>}
-        items={items}
-      />
-    );
-    expect(
-      rtlScreen.getByRole('heading', { level: 3, name: new RegExp(title, 'i') })
-    ).toBeInTheDocument();
-  });
-
-  it('renders the correct number of items', () => {
-    render(
-      <LinksListWidget
-        heading={
-          <Heading isFake level={3}>
-            {title}
-          </Heading>
-        }
-        items={items}
-      />
-    );
-    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(items.length);
-  });
-
-  it('renders some links', () => {
-    render(
-      <LinksListWidget
-        heading={
-          <Heading isFake level={3}>
-            {title}
-          </Heading>
-        }
-        items={items}
-      />
-    );
-    expect(
-      rtlScreen.getByRole('link', { name: items[0].name })
-    ).toHaveAttribute('href', items[0].url);
-  });
-});
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
deleted file mode 100644
index 17a5884..0000000
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { FC } from 'react';
-import { slugify } from '../../../utils/helpers';
-import { Link, List, ListItem } from '../../atoms';
-import { Collapsible, type CollapsibleProps } from '../../molecules';
-import styles from './links-list-widget.module.scss';
-
-export type LinksListItems = {
-  /**
-   * An array of name/url couple child of this list item.
-   */
-  child?: LinksListItems[];
-  /**
-   * The item name.
-   */
-  name: string;
-  /**
-   * The item url.
-   */
-  url: string;
-};
-
-export type LinksListWidgetProps = Omit<
-  CollapsibleProps,
-  'children' | 'disablePadding' | 'hasBorders'
-> & {
-  className?: string;
-  /**
-   * Should the links be ordered?
-   *
-   * @default false
-   */
-  isOrdered?: boolean;
-  /**
-   * An array of name/url couple.
-   */
-  items: LinksListItems[];
-};
-
-/**
- * LinksListWidget component
- *
- * Render a list of links inside a widget.
- */
-export const LinksListWidget: FC<LinksListWidgetProps> = ({
-  className = '',
-  isOrdered = false,
-  items,
-  ...props
-}) => {
-  const listKindClass = `list--${isOrdered ? 'ordered' : 'unordered'}`;
-
-  /**
-   * Format the widget data to be used as List items.
-   *
-   * @param {LinksListItems[]} data - The widget data.
-   * @returns {ListItem[]} The list items data.
-   */
-  const getListItems = (data: LinksListItems[]) =>
-    data.map((item) => (
-      <ListItem className={styles.list__item} key={slugify(item.name)}>
-        <Link className={styles.list__link} href={item.url}>
-          {item.name}
-        </Link>
-        {item.child?.length ? (
-          <List
-            className={`${styles.list} ${styles[listKindClass]} ${className}`}
-            hideMarker
-            isOrdered={isOrdered}
-          >
-            {getListItems(item.child)}
-          </List>
-        ) : null}
-      </ListItem>
-    ));
-
-  return (
-    <Collapsible {...props} className={styles.widget} disablePadding hasBorders>
-      <List
-        className={`${styles.list} ${styles[listKindClass]} ${className}`}
-        hideMarker
-        isOrdered={isOrdered}
-      >
-        {getListItems(items)}
-      </List>
-    </Collapsible>
-  );
-};
diff --git a/src/components/organisms/widgets/links-widget/index.ts b/src/components/organisms/widgets/links-widget/index.ts
new file mode 100644
index 0000000..cf1de6d
--- /dev/null
+++ b/src/components/organisms/widgets/links-widget/index.ts
@@ -0,0 +1 @@
+export * from './links-widget';
diff --git a/src/components/organisms/widgets/links-widget/links-widget.module.scss b/src/components/organisms/widgets/links-widget/links-widget.module.scss
new file mode 100644
index 0000000..296d8e4
--- /dev/null
+++ b/src/components/organisms/widgets/links-widget/links-widget.module.scss
@@ -0,0 +1,65 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/placeholders";
+
+.item {
+  &:not(:last-child) {
+    border-bottom: fun.convert-px(1) solid var(--color-primary);
+  }
+}
+
+.link {
+  display: block;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  background: none;
+  text-decoration: underline solid transparent 0;
+
+  &:hover,
+  &:focus {
+    background: var(--color-bg-secondary);
+  }
+
+  &:focus {
+    color: var(--color-primary);
+    text-decoration-color: var(--color-primary-light);
+    text-decoration-thickness: 0.25ex;
+  }
+
+  &:active {
+    background: var(--color-bg-tertiary);
+    text-decoration-color: transparent;
+    text-decoration-thickness: 0;
+  }
+}
+
+.list {
+  padding: 0;
+
+  &--ordered {
+    counter-reset: link;
+
+    .link {
+      counter-increment: link;
+
+      &::before {
+        content: counters(link, ".") ". ";
+        display: inline-block;
+        padding-inline-end: var(--spacing-2xs);
+        color: var(--color-secondary);
+      }
+    }
+  }
+
+  & & {
+    border-top: fun.convert-px(1) solid var(--color-primary);
+
+    .link {
+      padding-left: var(--spacing-lg);
+    }
+  }
+
+  & & & {
+    .link {
+      padding-left: var(--spacing-2xl);
+    }
+  }
+}
diff --git a/src/components/organisms/widgets/links-widget/links-widget.stories.tsx b/src/components/organisms/widgets/links-widget/links-widget.stories.tsx
new file mode 100644
index 0000000..3a0b027
--- /dev/null
+++ b/src/components/organisms/widgets/links-widget/links-widget.stories.tsx
@@ -0,0 +1,80 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Heading } from '../../../atoms';
+import { LinksWidget, type LinksWidgetItemData } from './links-widget';
+
+/**
+ * LinksWidget - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Widgets/Links',
+  component: LinksWidget,
+  args: {
+    isOrdered: false,
+  },
+  argTypes: {
+    items: {
+      description: 'The links data.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+} as ComponentMeta<typeof LinksWidget>;
+
+const Template: ComponentStory<typeof LinksWidget> = (args) => (
+  <LinksWidget {...args} />
+);
+
+const items = [
+  { id: 'item11', label: 'Level 1: Item 1', url: '#' },
+  {
+    id: 'item12',
+    label: 'Level 1: Item 2',
+    url: '#',
+    child: [
+      { id: 'item21', label: 'Level 2: Item 1', url: '#' },
+      { id: 'item22', label: 'Level 2: Item 2', url: '#' },
+      {
+        id: 'item23',
+        label: 'Level 2: Item 3',
+        url: '#',
+        child: [
+          { id: 'item31', label: 'Level 3: Item 1', url: '#' },
+          { id: 'item32', label: 'Level 3: Item 2', url: '#' },
+        ],
+      },
+      { id: 'item24', label: 'Level 2: Item 4', url: '#' },
+    ],
+  },
+  { id: 'item13', label: 'Level 1: Item 3', url: '#' },
+  { id: 'item14', label: 'Level 1: Item 4', url: '#' },
+] satisfies LinksWidgetItemData[];
+
+/**
+ * Links List Widget Stories - Unordered
+ */
+export const Unordered = Template.bind({});
+Unordered.args = {
+  heading: (
+    <Heading isFake level={3}>
+      Quo et totam
+    </Heading>
+  ),
+  items,
+};
+
+/**
+ * Links List Widget Stories - Ordered
+ */
+export const Ordered = Template.bind({});
+Ordered.args = {
+  heading: (
+    <Heading isFake level={3}>
+      Quo et totam
+    </Heading>
+  ),
+  isOrdered: true,
+  items,
+};
diff --git a/src/components/organisms/widgets/links-widget/links-widget.test.tsx b/src/components/organisms/widgets/links-widget/links-widget.test.tsx
new file mode 100644
index 0000000..f0edecc
--- /dev/null
+++ b/src/components/organisms/widgets/links-widget/links-widget.test.tsx
@@ -0,0 +1,83 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Heading } from '../../../atoms';
+import { LinksWidget, type LinksWidgetItemData } from './links-widget';
+
+describe('LinksWidget', () => {
+  it('renders the widget heading and a list of links', () => {
+    const heading = 'modi sit fugiat';
+    const headingLvl = 3;
+    const items = [
+      { id: 'item1', label: 'Link 1', url: '#link1' },
+      { id: 'item2', label: 'Link 2', url: '#link2' },
+      { id: 'item3', label: 'Link 3', url: '#link3' },
+    ] satisfies LinksWidgetItemData[];
+
+    render(
+      <LinksWidget
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        items={items}
+      />
+    );
+
+    expect(
+      rtlScreen.getByRole('heading', { level: headingLvl })
+    ).toHaveTextContent(heading);
+    expect(rtlScreen.getAllByRole('link').length).toBe(items.length);
+  });
+
+  it('can render a nested list of links', () => {
+    const heading = 'modi sit fugiat';
+    const headingLvl = 3;
+    const items = [
+      { id: 'item1', label: 'Link 1', url: '#link1' },
+      {
+        id: 'item2',
+        label: 'Link 2',
+        url: '#link2',
+        child: [
+          { id: 'subitem1', label: 'Nested link 1', url: '#nested-link1' },
+          { id: 'subitem2', label: 'Nested link 2', url: '#nested-link2' },
+        ],
+      },
+      { id: 'item3', label: 'Link 3', url: '#link3' },
+    ] satisfies LinksWidgetItemData[];
+
+    render(
+      <LinksWidget
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        items={items}
+      />
+    );
+
+    const totalLinks =
+      items.length +
+      items.reduce(
+        (accumulator, currentValue) =>
+          accumulator + (currentValue.child?.length ?? 0),
+        0
+      );
+
+    expect(rtlScreen.getAllByRole('link').length).toBe(totalLinks);
+  });
+
+  it('can render an ordered list of links', () => {
+    const heading = 'modi sit fugiat';
+    const headingLvl = 3;
+    const items = [
+      { id: 'item1', label: 'Link 1', url: '#link1' },
+      { id: 'item2', label: 'Link 2', url: '#link2' },
+      { id: 'item3', label: 'Link 3', url: '#link3' },
+    ] satisfies LinksWidgetItemData[];
+
+    render(
+      <LinksWidget
+        heading={<Heading level={headingLvl}>{heading}</Heading>}
+        isOrdered
+        items={items}
+      />
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass(`list--ordered`);
+  });
+});
diff --git a/src/components/organisms/widgets/links-widget/links-widget.tsx b/src/components/organisms/widgets/links-widget/links-widget.tsx
new file mode 100644
index 0000000..e28e15f
--- /dev/null
+++ b/src/components/organisms/widgets/links-widget/links-widget.tsx
@@ -0,0 +1,78 @@
+import { type ForwardRefRenderFunction, forwardRef, useCallback } from 'react';
+import { Link, List, ListItem } from '../../../atoms';
+import { Collapsible, type CollapsibleProps } from '../../../molecules';
+import styles from './links-widget.module.scss';
+
+export type LinksWidgetItemData = {
+  /**
+   * An array of name/url couple child of this list item.
+   */
+  child?: LinksWidgetItemData[];
+  /**
+   * The item id.
+   */
+  id: string;
+  /**
+   * The item name.
+   */
+  label: string;
+  /**
+   * The item url.
+   */
+  url: string;
+};
+
+export type LinksWidgetProps = Omit<
+  CollapsibleProps,
+  'children' | 'disablePadding' | 'hasBorders'
+> & {
+  /**
+   * Should the links be ordered?
+   *
+   * @default false
+   */
+  isOrdered?: boolean;
+  /**
+   * The links.
+   */
+  items: LinksWidgetItemData[];
+};
+
+const LinksWidgetWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  LinksWidgetProps
+> = ({ isOrdered = false, items, ...props }, ref) => {
+  const listClass = [
+    styles.list,
+    styles[isOrdered ? 'list--ordered' : 'list--unordered'],
+  ].join(' ');
+
+  const getLinksList = useCallback(
+    (data: LinksWidgetItemData[]) => (
+      <List className={listClass} hideMarker isOrdered={isOrdered}>
+        {data.map((item) => (
+          <ListItem className={styles.item} key={item.id}>
+            <Link className={styles.link} href={item.url}>
+              {item.label}
+            </Link>
+            {item.child?.length ? getLinksList(item.child) : null}
+          </ListItem>
+        ))}
+      </List>
+    ),
+    [isOrdered, listClass]
+  );
+
+  return (
+    <Collapsible {...props} disablePadding hasBorders ref={ref}>
+      {getLinksList(items)}
+    </Collapsible>
+  );
+};
+
+/**
+ * LinksWidget component
+ *
+ * Render a list of links inside a widget.
+ */
+export const LinksWidget = forwardRef(LinksWidgetWithRef);
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
index 8892485..5f14415 100644
--- a/src/components/organisms/widgets/table-of-contents.tsx
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { useHeadingsTree, type Heading } from '../../../utils/hooks';
-import { type LinksListItems, LinksListWidget } from './links-list-widget';
+import { Heading as HeadingComponent } from '../../atoms';
+import { LinksWidget, type LinksWidgetItemData } from './links-widget';
 import styles from './table-of-contents.module.scss';
-import { Heading as HeadingComponent } from 'src/components/atoms';
 
 type TableOfContentsProps = {
   /**
@@ -32,17 +32,18 @@ export const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
    * @param {Heading[]} tree - The headings tree.
    * @returns {LinksListItems[]} The list items.
    */
-  const getItems = (tree: Heading[]): LinksListItems[] =>
+  const getItems = (tree: Heading[]): LinksWidgetItemData[] =>
     tree.map((heading) => {
       return {
-        name: heading.title,
+        id: heading.id,
+        label: heading.title,
         url: `#${heading.id}`,
         child: getItems(heading.children),
       };
     });
 
   return (
-    <LinksListWidget
+    <LinksWidget
       className={styles.list}
       heading={
         <HeadingComponent isFake level={3}>
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 9f0cce1..2b44933 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ButtonLink, Heading, Link } from '../../atoms';
-import { LinksListWidget, PostsList, SharingWidget } from '../../organisms';
+import { LinksWidget, PostsList, SharingWidget } from '../../organisms';
 import { LayoutBase } from '../layout/layout.stories';
 import { PageLayout as PageLayoutComponent } from './page-layout';
 
@@ -457,13 +457,10 @@ const postsListBreadcrumb = [
 ];
 
 const blogCategories = [
-  { name: 'Cat 1', url: '#' },
-  {
-    name: 'Cat 2',
-    url: '#',
-  },
-  { name: 'Cat 3', url: '#' },
-  { name: 'Cat 4', url: '#' },
+  { id: 'cat1', label: 'Cat 1', url: '#' },
+  { id: 'cat2', label: 'Cat 2', url: '#' },
+  { id: 'cat3', label: 'Cat 3', url: '#' },
+  { id: 'cat4', label: 'Cat 4', url: '#' },
 ];
 
 const posts = [
@@ -503,7 +500,7 @@ Blog.args = {
   headerMeta: [{ id: 'total', label: 'Total:', value: `${posts.length}` }],
   children: <PostsList posts={posts} sortByYear />,
   widgets: [
-    <LinksListWidget
+    <LinksWidget
       heading={
         <Heading isFake level={3}>
           Categories
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 00e2d5a..2b6ddf3 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -8,7 +8,7 @@ import {
   getLayout,
   Heading,
   Link,
-  LinksListWidget,
+  LinksWidget,
   PageLayout,
   SearchForm,
   type SearchFormSubmit,
@@ -25,7 +25,7 @@ import type {
   RawTopicPreview,
 } from '../types';
 import { ROUTES } from '../utils/constants';
-import { getLinksListItems, getPageLinkFromRawData } from '../utils/helpers';
+import { getLinksItemData, getPageLinkFromRawData } from '../utils/helpers';
 import { loadTranslation, type Messages } from '../utils/helpers/server';
 import { useBreadcrumb, useSettings } from '../utils/hooks';
 
@@ -122,13 +122,13 @@ const Error404Page: NextPageWithLayout<Error404PageProps> = ({
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
         widgets={[
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {thematicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               thematicsList.map((thematic) =>
                 getPageLinkFromRawData(thematic, 'thematic')
               )
@@ -136,13 +136,13 @@ const Error404Page: NextPageWithLayout<Error404PageProps> = ({
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
             key="thematics-list"
           />,
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {topicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
             )}
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 678b75a..e5fc2c2 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl';
 import {
   getLayout,
   Heading,
-  LinksListWidget,
+  LinksWidget,
   type MetaItemData,
   Notice,
   PageLayout,
@@ -37,7 +37,7 @@ import { settings } from '../../utils/config';
 import { ROUTES } from '../../utils/constants';
 import {
   getBlogSchema,
-  getLinksListItems,
+  getLinksItemData,
   getPageLinkFromRawData,
   getSchemaJson,
   getWebPageSchema,
@@ -242,13 +242,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         breadcrumbSchema={breadcrumbSchema}
         headerMeta={headerMeta}
         widgets={[
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {thematicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               thematicsList.map((thematic) =>
                 getPageLinkFromRawData(thematic, 'thematic')
               )
@@ -256,13 +256,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
             key="thematics-list"
           />,
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {topicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
             )}
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index 842c2b8..5f6a2d6 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 import {
   getLayout,
   Heading,
-  LinksListWidget,
+  LinksWidget,
   type MetaItemData,
   PageLayout,
   PostsList,
@@ -36,7 +36,7 @@ import type {
 import { settings } from '../../../utils/config';
 import {
   getBlogSchema,
-  getLinksListItems,
+  getLinksItemData,
   getPageLinkFromRawData,
   getPostsList,
   getSchemaJson,
@@ -237,13 +237,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         breadcrumbSchema={breadcrumbSchema}
         headerMeta={headerMeta}
         widgets={[
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {thematicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               thematicsList.map((thematic) =>
                 getPageLinkFromRawData(thematic, 'thematic')
               )
@@ -251,13 +251,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
             key="thematics-list"
           />,
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {topicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
             )}
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index effd087..87e6171 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl';
 import {
   getLayout,
   Heading,
-  LinksListWidget,
+  LinksWidget,
   type MetaItemData,
   Notice,
   PageLayout,
@@ -34,7 +34,7 @@ import type {
 import { ROUTES } from '../../utils/constants';
 import {
   getBlogSchema,
-  getLinksListItems,
+  getLinksItemData,
   getPageLinkFromRawData,
   getSchemaJson,
   getWebPageSchema,
@@ -222,13 +222,13 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
         breadcrumbSchema={breadcrumbSchema}
         headerMeta={headerMeta}
         widgets={[
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {thematicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               thematicsList.map((thematic) =>
                 getPageLinkFromRawData(thematic, 'thematic')
               )
@@ -236,13 +236,13 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
             key="thematics-list"
           />,
-          <LinksListWidget
+          <LinksWidget
             heading={
               <Heading isFake level={3}>
                 {topicsListTitle}
               </Heading>
             }
-            items={getLinksListItems(
+            items={getLinksItemData(
               topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
             )}
             // eslint-disable-next-line react/jsx-no-literals -- Key allowed
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 66c3d02..d841b73 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 import {
   getLayout,
   Heading,
-  LinksListWidget,
+  LinksWidget,
   type MetaItemData,
   PageLayout,
   PostsList,
@@ -25,7 +25,7 @@ import styles from '../../styles/pages/blog.module.scss';
 import type { NextPageWithLayout, PageLink, Topic } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
-  getLinksListItems,
+  getLinksItemData,
   getPageLinkFromRawData,
   getPostsWithUrl,
   getSchemaJson,
@@ -185,23 +185,23 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
         widgets={
           thematics
             ? [
-                <LinksListWidget
+                <LinksWidget
                   heading={
                     <Heading isFake level={3}>
                       {thematicsListTitle}
                     </Heading>
                   }
-                  items={getLinksListItems(thematics)}
+                  items={getLinksItemData(thematics)}
                   // eslint-disable-next-line react/jsx-no-literals -- Key allowed
                   key="related-thematics"
                 />,
-                <LinksListWidget
+                <LinksWidget
                   heading={
                     <Heading isFake level={3}>
                       {topicsListTitle}
                     </Heading>
                   }
-                  items={getLinksListItems(topics)}
+                  items={getLinksItemData(topics)}
                   // eslint-disable-next-line react/jsx-no-literals -- Key allowed
                   key="topics"
                 />,
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 61d105e..20c1ee8 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl';
 import {
   getLayout,
   Heading,
-  LinksListWidget,
+  LinksWidget,
   type MetaItemData,
   PageLayout,
   PostsList,
@@ -24,7 +24,7 @@ import styles from '../../styles/pages/blog.module.scss';
 import type { NextPageWithLayout, PageLink, Thematic } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
-  getLinksListItems,
+  getLinksItemData,
   getPageLinkFromRawData,
   getPostsWithUrl,
   getSchemaJson,
@@ -158,23 +158,23 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
         widgets={
           topics
             ? [
-                <LinksListWidget
+                <LinksWidget
                   heading={
                     <Heading isFake level={3}>
                       {thematicsListTitle}
                     </Heading>
                   }
-                  items={getLinksListItems(thematics)}
+                  items={getLinksItemData(thematics)}
                   // eslint-disable-next-line react/jsx-no-literals -- Key allowed
                   key="thematics"
                 />,
-                <LinksListWidget
+                <LinksWidget
                   heading={
                     <Heading isFake level={3}>
                       {topicsListTitle}
                     </Heading>
                   }
-                  items={getLinksListItems(topics)}
+                  items={getLinksItemData(topics)}
                   // eslint-disable-next-line react/jsx-no-literals -- Key allowed
                   key="related-topics"
                 />,
diff --git a/src/utils/helpers/pages.tsx b/src/utils/helpers/pages.tsx
index 556b4fb..62a582f 100644
--- a/src/utils/helpers/pages.tsx
+++ b/src/utils/helpers/pages.tsx
@@ -1,5 +1,5 @@
 import NextImage from 'next/image';
-import type { LinksListItems, PostData } from '../../components';
+import type { LinksWidgetItemData, PostData } from '../../components';
 import { getArticleFromRawData } from '../../services/graphql';
 import type {
   Article,
@@ -61,10 +61,11 @@ export const sortPageLinksByName = (a: PageLink, b: PageLink) => {
  * @param {PageLink[]} links - An array of page links.
  * @returns {LinksListItem[]} An array of links items.
  */
-export const getLinksListItems = (links: PageLink[]): LinksListItems[] =>
+export const getLinksItemData = (links: PageLink[]): LinksWidgetItemData[] =>
   links.map((link) => {
     return {
-      name: link.name,
+      id: `${link.id}`,
+      label: link.name,
       url: link.url,
     };
   });