From 9492414d4ae94045eff4e06f636529bc0e71cb06 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 20 Oct 2023 17:01:37 +0200
Subject: refactor(components): rewrite Copyright component

* remove `icon` prop (it is confusing because a copyright should have
the copyright symbol, the license is not part of the copyright)
* reorganize copyright informations

I also updated the CC BY SA icon because the elements was in the wrong
order.
---
 .../organisms/layout/site-footer.stories.tsx           |  5 +++--
 src/components/organisms/layout/site-footer.test.tsx   |  9 +++++----
 src/components/organisms/layout/site-footer.tsx        | 18 +++++++++++-------
 3 files changed, 19 insertions(+), 13 deletions(-)

(limited to 'src/components/organisms')

diff --git a/src/components/organisms/layout/site-footer.stories.tsx b/src/components/organisms/layout/site-footer.stories.tsx
index 77cc183..3f244b0 100644
--- a/src/components/organisms/layout/site-footer.stories.tsx
+++ b/src/components/organisms/layout/site-footer.stories.tsx
@@ -73,9 +73,9 @@ const Template: ComponentStory<typeof SiteFooterComponent> = (args) => (
 );
 
 const copyright = {
-  dates: { start: '2017', end: '2022' },
+  from: '2017',
   owner: 'Lorem ipsum',
-  icon: <Icon shape="cc-by-sa" />,
+  to: '2022',
 };
 
 const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
@@ -86,6 +86,7 @@ const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
 export const SiteFooter = Template.bind({});
 SiteFooter.args = {
   copyright,
+  license: <Icon shape="cc-by-sa" />,
   navItems,
   topId: 'top',
 };
diff --git a/src/components/organisms/layout/site-footer.test.tsx b/src/components/organisms/layout/site-footer.test.tsx
index 0d2cec2..11ddd7f 100644
--- a/src/components/organisms/layout/site-footer.test.tsx
+++ b/src/components/organisms/layout/site-footer.test.tsx
@@ -3,9 +3,8 @@ import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { SiteFooter, type SiteFooterProps } from './site-footer';
 
 const copyright: SiteFooterProps['copyright'] = {
-  dates: { start: '2017', end: '2022' },
+  from: '2017',
   owner: 'Lorem ipsum',
-  icon: 'CC',
 };
 
 const navItems: SiteFooterProps['navItems'] = [
@@ -15,8 +14,10 @@ const navItems: SiteFooterProps['navItems'] = [
 describe('SiteFooter', () => {
   it('renders the website copyright', () => {
     render(<SiteFooter copyright={copyright} topId="top" />);
-    expect(rtlScreen.getByText(copyright.owner)).toBeInTheDocument();
-    expect(rtlScreen.getByText(copyright.dates.start)).toBeInTheDocument();
+    expect(
+      rtlScreen.getByText(new RegExp(copyright.owner))
+    ).toBeInTheDocument();
+    expect(rtlScreen.getByText(new RegExp(copyright.from))).toBeInTheDocument();
   });
 
   it('renders a back to top link', () => {
diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
index b4930d6..9ed5ce6 100644
--- a/src/components/organisms/layout/site-footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -1,12 +1,14 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import { Copyright, type CopyrightProps, Footer } from '../../atoms';
+import { Footer } from '../../atoms';
 import {
   BackToTop,
   type BackToTopProps,
   NavList,
   NavItem,
   NavLink,
+  type CopyrightProps,
+  Copyright,
 } from '../../molecules';
 import styles from './site-footer.module.scss';
 
@@ -29,6 +31,10 @@ export type SiteFooterProps = {
    * Set the copyright information.
    */
   copyright: CopyrightProps;
+  /**
+   * The website license.
+   */
+  license?: ReactNode;
   /**
    * The footer nav items.
    */
@@ -48,6 +54,7 @@ export const SiteFooter: FC<SiteFooterProps> = ({
   backToTopClassName,
   className = '',
   copyright,
+  license,
   navItems,
   topId,
 }) => {
@@ -68,11 +75,8 @@ export const SiteFooter: FC<SiteFooterProps> = ({
 
   return (
     <Footer className={footerClass}>
-      <Copyright
-        dates={copyright.dates}
-        icon={copyright.icon}
-        owner={copyright.owner}
-      />
+      <Copyright {...copyright} />
+      {license}
       {navItems ? (
         <NavList aria-label={ariaLabel} className={styles.nav} isInline>
           {navItems.map(({ id, ...link }) => (
-- 
cgit v1.2.3