aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-20 17:01:37 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commit9492414d4ae94045eff4e06f636529bc0e71cb06 (patch)
tree7f268e6b62ee89128abd0581301265dc64f147d5 /src/components/organisms
parentc6f6f8f895e68f2d85ca681997ef613d982bac14 (diff)
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.
Diffstat (limited to 'src/components/organisms')
-rw-r--r--src/components/organisms/layout/site-footer.stories.tsx5
-rw-r--r--src/components/organisms/layout/site-footer.test.tsx9
-rw-r--r--src/components/organisms/layout/site-footer.tsx18
3 files changed, 19 insertions, 13 deletions
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';
@@ -30,6 +32,10 @@ export type SiteFooterProps = {
*/
copyright: CopyrightProps;
/**
+ * The website license.
+ */
+ license?: ReactNode;
+ /**
* The footer nav items.
*/
navItems?: FooterLinks[];
@@ -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 }) => (