6 files changed, 142 insertions, 0 deletions
diff --git a/src/components/molecules/copyright/copyright.module.scss b/src/components/molecules/copyright/copyright.module.scss
new file mode 100644
index 0000000..cf57e7e
--- /dev/null
+++ b/src/components/molecules/copyright/copyright.module.scss
@@ -0,0 +1,4 @@
+.wrapper {
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-md);
+}
diff --git a/src/components/molecules/copyright/copyright.stories.tsx b/src/components/molecules/copyright/copyright.stories.tsx
new file mode 100644
index 0000000..58a82e9
--- /dev/null
+++ b/src/components/molecules/copyright/copyright.stories.tsx
@@ -0,0 +1,65 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Copyright } from './copyright';
+
+/**
+ * Copyright - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Copyright',
+  component: Copyright,
+  argTypes: {
+    from: {
+      control: {
+        type: 'text',
+      },
+      description: 'The copyright start date.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    owner: {
+      control: {
+        type: 'text',
+      },
+      description: 'The copyright owner.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    to: {
+      control: {
+        type: 'text',
+      },
+      description: 'The copyright end date.',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof Copyright>;
+
+const Template: ComponentStory<typeof Copyright> = (args) => (
+  <Copyright {...args} />
+);
+
+/**
+ * Copyright Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  from: '2012',
+  owner: 'Your brand',
+};
+
+/**
+ * Copyright Stories - WithEndYear
+ */
+export const WithEndYear = Template.bind({});
+WithEndYear.args = {
+  from: '2012',
+  owner: 'Your brand',
+  to: '2023',
+};
diff --git a/src/components/molecules/copyright/copyright.test.tsx b/src/components/molecules/copyright/copyright.test.tsx
new file mode 100644
index 0000000..0530478
--- /dev/null
+++ b/src/components/molecules/copyright/copyright.test.tsx
@@ -0,0 +1,23 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Copyright } from './copyright';
+
+const from = '2012';
+const to = '2023';
+const owner = 'Your name';
+
+describe('Copyright', () => {
+  it('renders the copyright symbol, the owner and the start year', () => {
+    render(<Copyright from={from} owner={owner} />);
+
+    expect(rtlScreen.getByText(new RegExp(owner))).toBeInTheDocument();
+    expect(rtlScreen.getByText(from)).toBeInTheDocument();
+  });
+
+  it('can render a copyright with end year', () => {
+    render(<Copyright from={from} owner={owner} to={to} />);
+
+    expect(rtlScreen.getByText(from)).toBeInTheDocument();
+    expect(rtlScreen.getByText(to)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/copyright/copyright.tsx b/src/components/molecules/copyright/copyright.tsx
new file mode 100644
index 0000000..cef8ecb
--- /dev/null
+++ b/src/components/molecules/copyright/copyright.tsx
@@ -0,0 +1,48 @@
+import type { FC, HTMLAttributes } from 'react';
+import { Time } from '../../atoms';
+import styles from './copyright.module.scss';
+
+export type CopyrightProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+> & {
+  /**
+   * The start year of the copyright.
+   */
+  from: string;
+  /**
+   * The end year of the copyright.
+   */
+  to?: string;
+  /**
+   * The copyright owner.
+   */
+  owner: string;
+};
+
+export const Copyright: FC<CopyrightProps> = ({
+  className = '',
+  from,
+  owner,
+  to,
+  ...props
+}) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+
+  /* eslint-disable react/jsx-no-literals -- Symbols allowed */
+  return (
+    <span {...props} className={wrapperClass}>
+      &copy;
+      <Time date={from} hideDay hideMonth />
+      {to ? (
+        <>
+          {'-'}
+          <Time date={to} hideDay hideMonth />
+        </>
+      ) : null}{' '}
+      {owner}
+      {'.'}
+    </span>
+  );
+  /* eslint-enable react/jsx-no-literals */
+};
diff --git a/src/components/molecules/copyright/index.ts b/src/components/molecules/copyright/index.ts
new file mode 100644
index 0000000..4b4368c
--- /dev/null
+++ b/src/components/molecules/copyright/index.ts
@@ -0,0 +1 @@
+export * from './copyright';
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 7f48e45..d53d999 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -3,6 +3,7 @@ export * from './buttons';
 export * from './card';
 export * from './code';
 export * from './collapsible';
+export * from './copyright';
 export * from './forms';
 export * from './grid';
 export * from './images';