refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 0 insertions, 113 deletions

diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx
deleted file mode 100644
index decf657..0000000
--- a/src/components/Widgets/SocialMedia/SocialMedia.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
-import TwitterIcon from '@assets/images/social-media/twitter.svg';
-import styles from './SocialMedia.module.scss';
-import { ExpandableWidget } from '@components/WidgetParts';
-import { useIntl } from 'react-intl';
-
-const SocialMedia = ({
-  title,
-  github = false,
-  gitlab = false,
-  linkedin = false,
-  twitter = false,
-}: {
-  title: string;
-  github?: boolean;
-  gitlab?: boolean;
-  linkedin?: boolean;
-  twitter?: boolean;
-}) => {
-  const intl = useIntl();
-
-  const websites = [
-    {
-      id: 'github',
-      name: intl.formatMessage({
-        defaultMessage: 'Github',
-        description: 'SocialMedia: Github',
-        id: 'SWjj4l',
-      }),
-      url: 'https://github.com/ArmandPhilippot',
-    },
-    {
-      id: 'gitlab',
-      name: intl.formatMessage({
-        defaultMessage: 'Gitlab',
-        description: 'SocialMedia: Gitlab',
-        id: 'obmlFh',
-      }),
-      url: 'https://gitlab.com/ArmandPhilippot',
-    },
-    {
-      id: 'linkedin',
-      name: intl.formatMessage({
-        defaultMessage: 'LinkedIn',
-        description: 'SocialMedia: LinkedIn',
-        id: 'VbcHZ4',
-      }),
-      url: 'https://www.linkedin.com/in/armandphilippot',
-    },
-    {
-      id: 'twitter',
-      name: intl.formatMessage({
-        defaultMessage: 'Twitter',
-        description: 'SocialMedia: Twitter',
-        id: 'IPs/Ck',
-      }),
-      url: 'https://twitter.com/ArmandPhilippot',
-    },
-  ];
-
-  const getIcon = (id: string) => {
-    switch (id) {
-      case 'github':
-        return <GithubIcon className={styles.icon} />;
-      case 'gitlab':
-        return <GitlabIcon className={styles.icon} />;
-      case 'linkedin':
-        return <LinkedInIcon className={styles.icon} />;
-      case 'twitter':
-        return <TwitterIcon className={styles.icon} />;
-      default:
-        break;
-    }
-  };
-
-  const shouldDisplayLink = (id: string) => {
-    switch (id) {
-      case 'github':
-        return github;
-      case 'gitlab':
-        return gitlab;
-      case 'linkedin':
-        return linkedin;
-      case 'twitter':
-        return twitter;
-      default:
-        break;
-    }
-  };
-
-  const items = websites.map((website) => {
-    return shouldDisplayLink(website.id) ? (
-      <li key={website.id}>
-        <a href={website.url} className={styles.link}>
-          {getIcon(website.id)}
-          <span className="screen-reader-text">{website.name}</span>
-        </a>
-      </li>
-    ) : (
-      ''
-    );
-  });
-
-  return (
-    <ExpandableWidget title={title} expand={true}>
-      <ul className={styles.list}>{items}</ul>
-    </ExpandableWidget>
-  );
-};
-
-export default SocialMedia;