Add new IconLink atom and use it in SocialLinks molecule. For #2119gek/atomic-social-links

8 files changed, 69 insertions, 36 deletions

diff --git a/web/components/atomic/atoms/IconLink/IconLink.module.scss b/web/components/atomic/atoms/IconLink/IconLink.module.scss
new file mode 100644
index 000000000..c24391e40
--- /dev/null
+++ b/web/components/atomic/atoms/IconLink/IconLink.module.scss
@@ -0,0 +1,4 @@
+.link {
+  width: 1.8em;
+  margin-right: 16px;
+}
diff --git a/web/components/atomic/atoms/IconLink/IconLink.stories.tsx b/web/components/atomic/atoms/IconLink/IconLink.stories.tsx
new file mode 100644
index 000000000..636ec1fff
--- /dev/null
+++ b/web/components/atomic/atoms/IconLink/IconLink.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { IconLink } from './IconLink';
+
+export default {
+  title: 'atoms/Icon link',
+  component: IconLink,
+} as ComponentMeta<typeof IconLink>;
+
+const Template: ComponentStory<typeof IconLink> = args => <IconLink {...args} />;
+
+export const GithHubLink = Template.bind({});
+GithHubLink.args = {
+  title: 'github',
+  alt: 'github',
+  href: 'https://github.com/owncast/owncast',
+  icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
+};
diff --git a/web/components/atomic/atoms/IconLink/IconLink.tsx b/web/components/atomic/atoms/IconLink/IconLink.tsx
new file mode 100644
index 000000000..83c88530b
--- /dev/null
+++ b/web/components/atomic/atoms/IconLink/IconLink.tsx
@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import styles from './IconLink.module.scss';
+
+export type IconLinkProps = {
+  href: string;
+  icon: string;
+  alt: string;
+  title: string;
+};
+
+/**
+ * Component that renders an icon within a link.
+ *
+ * @component
+ */
+export const IconLink: FC<IconLinkProps> = ({ href, icon, title, alt }) => (
+  <a href={href} className={styles.link} target="_blank" rel="noreferrer">
+    <img src={icon} alt={alt} title={title} className={styles.link} />
+  </a>
+);
diff --git a/web/components/ui/SocialLinks/SocialLinks.module.scss b/web/components/atomic/molecules/SocialLinks/SocialLinks.module.scss
index 618119345..00e46fa0c 100644
--- a/web/components/ui/SocialLinks/SocialLinks.module.scss
+++ b/web/components/atomic/molecules/SocialLinks/SocialLinks.module.scss
@@ -1,8 +1,3 @@
-.link {
-  width: 1.8em;
-  margin-right: 16px;
-}
-
 .links {
   display: flex;
   align-items: center;
diff --git a/web/components/ui/SocialLinks/SocialLinks.stories.tsx b/web/components/atomic/molecules/SocialLinks/SocialLinks.stories.tsx
index 58e928196..1ed48da21 100644
--- a/web/components/ui/SocialLinks/SocialLinks.stories.tsx
+++ b/web/components/atomic/molecules/SocialLinks/SocialLinks.stories.tsx
@@ -3,32 +3,30 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { SocialLinks } from './SocialLinks';
 
 export default {
-  title: 'owncast/Components/Social links',
+  title: 'molecules/Social links',
   component: SocialLinks,
   parameters: {},
 } as ComponentMeta<typeof SocialLinks>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof SocialLinks> = args => <SocialLinks {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Populated = Template.bind({});
 Populated.args = {
   links: [
     {
       platform: 'github',
       url: 'https://github.com/owncast/owncast',
-      icon: '/img/platformlogos/github.svg',
+      icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
     },
     {
       platform: 'Documentation',
       url: 'https://owncast.online',
-      icon: '/img/platformlogos/link.svg',
+      icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
     },
     {
       platform: 'mastodon',
       url: 'https://fosstodon.org/users/owncast',
-      icon: '/img/platformlogos/mastodon.svg',
+      icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
     },
   ],
 };
diff --git a/web/components/atomic/molecules/SocialLinks/SocialLinks.tsx b/web/components/atomic/molecules/SocialLinks/SocialLinks.tsx
new file mode 100644
index 000000000..0c963a530
--- /dev/null
+++ b/web/components/atomic/molecules/SocialLinks/SocialLinks.tsx
@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { SocialLink } from '../../../../interfaces/social-link.model';
+import styles from './SocialLinks.module.scss';
+import { IconLink } from '../../atoms/IconLink/IconLink';
+
+export type SocialLinksProps = {
+  links: SocialLink[];
+};
+
+export const SocialLinks: FC<SocialLinksProps> = ({ links }) => (
+  <div className={styles.links}>
+    {links.map(link => (
+      <IconLink
+        key={link.platform}
+        href={link.url}
+        icon={link.icon}
+        alt={link.platform}
+        title={link.platform}
+      />
+    ))}
+  </div>
+);
diff --git a/web/components/common/ContentHeader/ContentHeader.tsx b/web/components/common/ContentHeader/ContentHeader.tsx
index 9ed73a74f..0b3c58a77 100644
--- a/web/components/common/ContentHeader/ContentHeader.tsx
+++ b/web/components/common/ContentHeader/ContentHeader.tsx
@@ -2,7 +2,7 @@ import cn from 'classnames';
 import { FC } from 'react';
 import Linkify from 'react-linkify';
 import { Logo } from '../../ui/Logo/Logo';
-import { SocialLinks } from '../../ui/SocialLinks/SocialLinks';
+import { SocialLinks } from '../../atomic/molecules/SocialLinks/SocialLinks';
 import { SocialLink } from '../../../interfaces/social-link.model';
 import styles from './ContentHeader.module.scss';
 
diff --git a/web/components/ui/SocialLinks/SocialLinks.tsx b/web/components/ui/SocialLinks/SocialLinks.tsx
deleted file mode 100644
index 678743aa8..000000000
--- a/web/components/ui/SocialLinks/SocialLinks.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { FC } from 'react';
-import { SocialLink } from '../../../interfaces/social-link.model';
-import styles from './SocialLinks.module.scss';
-
-export type SocialLinksProps = {
-  links: SocialLink[];
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const SocialLinks: FC<SocialLinksProps> = ({ links }) => (
-  <div className={styles.links}>
-    {links.map(link => (
-      <a
-        key={link.platform}
-        href={link.url}
-        className={styles.link}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <img src={link.icon} alt={link.platform} title={link.platform} className={styles.link} />
-      </a>
-    ))}
-  </div>
-);