feat(components): replace icons with a generic Icon component

Sizes are also predefined and can be set using the `size` prop,
so the consumers should no longer adjust the size in CSS.

3 files changed, 11 insertions, 12 deletions

diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss
index 5d5435c..ffde516 100644
--- a/src/components/atoms/layout/copyright.module.scss
+++ b/src/components/atoms/layout/copyright.module.scss
@@ -2,8 +2,6 @@
 @use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
-  --icon-size: #{fun.convert-px(70)};
-
   display: flex;
   flex-flow: row wrap;
   align-items: center;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index fa79d32..a21fdfb 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CCBySA } from '../icons';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Icon } from '../images';
 import { Copyright as CopyrightComponent } from './copyright';
 
 /**
@@ -53,6 +53,6 @@ Copyright.args = {
     start: '2012',
     end: '2022',
   },
-  icon: <CCBySA />,
+  icon: <Icon shape="cc-by-sa" />,
   owner: 'Your name',
 };
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index 1e2230c..3aa04d0 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,33 +1,34 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { CCBySA } from '../icons';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Icon } from '../images';
 import { Copyright } from './copyright';
 
 const dates = {
   start: '2012',
   end: '2022',
 };
-const icon = <CCBySA />;
+const iconHeading = 'CC BY SA';
+const icon = <Icon heading={iconHeading} shape="cc-by-sa" />;
 const owner = 'Your name';
 
 describe('Copyright', () => {
   it('renders the copyright owner', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByText(owner)).toBeInTheDocument();
+    expect(rtlScreen.getByText(owner)).toBeInTheDocument();
   });
 
   it('renders the copyright start date', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByText(dates.start)).toBeInTheDocument();
+    expect(rtlScreen.getByText(dates.start)).toBeInTheDocument();
   });
 
   it('renders the copyright end date', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByText(dates.end)).toBeInTheDocument();
+    expect(rtlScreen.getByText(dates.end)).toBeInTheDocument();
   });
 
   it('renders the copyright icon', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByTitle('CC BY SA')).toBeInTheDocument();
+    expect(rtlScreen.getByTitle(iconHeading)).toBeInTheDocument();
   });
 });