refactor(components): rewrite SharingLink component

* replace default label with label prop
* simplify CSS rules

1 files changed, 114 insertions, 62 deletions

diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 61d54d8..eeffb71 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -1,9 +1,70 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { SharingLink, type SharingMedium } from '../../atoms';
 import { Widget, type WidgetProps } from '../../molecules';
 import styles from './sharing.module.scss';
 
+/**
+ * Build the Diaspora sharing url with provided data.
+ *
+ * @param {string} title - The content title.
+ * @param {string} url - The content url.
+ * @returns {string} The Diaspora url.
+ */
+const buildDiasporaUrl = (title: string, url: string): string => {
+  const titleParam = `title=${encodeURI(title)}`;
+  const urlParam = `url=${encodeURI(url)}`;
+  return `https://share.diasporafoundation.org/?${titleParam}&${urlParam}`;
+};
+
+/**
+ * Build the Facebook sharing url with provided data.
+ *
+ * @param {string} url - The content url.
+ * @returns {string} The Facebook url.
+ */
+const buildFacebookUrl = (url: string): string => {
+  const urlParam = `u=${encodeURI(url)}`;
+  return `https://www.facebook.com/sharer/sharer.php?${urlParam}`;
+};
+
+/**
+ * Build the Journal du Hacker sharing url with provided data.
+ *
+ * @param {string} title - The content title.
+ * @param {string} url - The content url.
+ * @returns {string} The Journal du Hacker url.
+ */
+const buildJdHUrl = (title: string, url: string): string => {
+  const titleParam = `title=${encodeURI(title)}`;
+  const urlParam = `url=${encodeURI(url)}`;
+  return `https://www.journalduhacker.net/stories/new?${titleParam}&${urlParam}`;
+};
+
+/**
+ * Build the LinkedIn sharing url with provided data.
+ *
+ * @param {string} url - The content url.
+ * @returns {string} The LinkedIn url.
+ */
+const buildLinkedInUrl = (url: string): string => {
+  const urlParam = `url=${encodeURI(url)}`;
+  return `https://www.linkedin.com/sharing/share-offsite/?${urlParam}`;
+};
+
+/**
+ * Build the Twitter sharing url with provided data.
+ *
+ * @param {string} title - The content title.
+ * @param {string} url - The content url.
+ * @returns {string} The Twitter url.
+ */
+const buildTwitterUrl = (title: string, url: string): string => {
+  const titleParam = `text=${encodeURI(title)}`;
+  const urlParam = `url=${encodeURI(url)}`;
+  return `https://twitter.com/intent/tweet?${titleParam}&${urlParam}`;
+};
+
 export type SharingData = {
   /**
    * The content excerpt.
@@ -55,6 +116,7 @@ export const Sharing: FC<SharingProps> = ({
   level = 2,
   ...props
 }) => {
+  const listClass = `${styles.list} ${className}`;
   const intl = useIntl();
   const widgetTitle = intl.formatMessage({
     defaultMessage: 'Share',
@@ -63,19 +125,6 @@ export const Sharing: FC<SharingProps> = ({
   });
 
   /**
-   * Build the Diaspora sharing url with provided data.
-   *
-   * @param {string} title - The content title.
-   * @param {string} url - The content url.
-   * @returns {string} The Diaspora url.
-   */
-  const buildDiasporaUrl = (title: string, url: string): string => {
-    const titleParam = `title=${encodeURI(title)}`;
-    const urlParam = `url=${encodeURI(url)}`;
-    return `https://share.diasporafoundation.org/?${titleParam}&${urlParam}`;
-  };
-
-  /**
    * Build the mailto url from provided data.
    *
    * @param {string} excerpt - The content excerpt.
@@ -115,51 +164,51 @@ export const Sharing: FC<SharingProps> = ({
   };
 
   /**
-   * Build the Facebook sharing url with provided data.
+   * Retrieve the sharing label by medium id.
    *
-   * @param {string} url - The content url.
-   * @returns {string} The Facebook url.
-   */
-  const buildFacebookUrl = (url: string): string => {
-    const urlParam = `u=${encodeURI(url)}`;
-    return `https://www.facebook.com/sharer/sharer.php?${urlParam}`;
-  };
-
-  /**
-   * Build the Journal du Hacker sharing url with provided data.
-   *
-   * @param {string} title - The content title.
-   * @param {string} url - The content url.
-   * @returns {string} The Journal du Hacker url.
-   */
-  const buildJdHUrl = (title: string, url: string): string => {
-    const titleParam = `title=${encodeURI(title)}`;
-    const urlParam = `url=${encodeURI(url)}`;
-    return `https://www.journalduhacker.net/stories/new?${titleParam}&${urlParam}`;
-  };
-
-  /**
-   * Build the LinkedIn sharing url with provided data.
-   *
-   * @param {string} url - The content url.
-   * @returns {string} The LinkedIn url.
-   */
-  const buildLinkedInUrl = (url: string): string => {
-    const urlParam = `url=${encodeURI(url)}`;
-    return `https://www.linkedin.com/sharing/share-offsite/?${urlParam}`;
-  };
-
-  /**
-   * Build the Twitter sharing url with provided data.
-   *
-   * @param {string} title - The content title.
-   * @param {string} url - The content url.
-   * @returns {string} The Twitter url.
+   * @param {SharingMedium} medium - A sharing medium id.
+   * @returns {string} The sharing label.
    */
-  const buildTwitterUrl = (title: string, url: string): string => {
-    const titleParam = `text=${encodeURI(title)}`;
-    const urlParam = `url=${encodeURI(url)}`;
-    return `https://twitter.com/intent/tweet?${titleParam}&${urlParam}`;
+  const getLabel = (medium: SharingMedium): string => {
+    switch (medium) {
+      case 'diaspora':
+        return intl.formatMessage({
+          defaultMessage: 'Share on Diaspora',
+          description: 'Sharing: Diaspora sharing link',
+          id: 'oVLRW8',
+        });
+      case 'email':
+        return intl.formatMessage({
+          defaultMessage: 'Share by Email',
+          description: 'Sharing: Email sharing link',
+          id: '2ukj9H',
+        });
+      case 'facebook':
+        return intl.formatMessage({
+          defaultMessage: 'Share on Facebook',
+          description: 'Sharing: Facebook sharing link',
+          id: 'o0DAK4',
+        });
+      case 'journal-du-hacker':
+        return intl.formatMessage({
+          defaultMessage: 'Share on Journal du Hacker',
+          description: 'Sharing: Journal du Hacker sharing link',
+          id: 'vnbryZ',
+        });
+      case 'linkedin':
+        return intl.formatMessage({
+          defaultMessage: 'Share on LinkedIn',
+          description: 'Sharing: LinkedIn sharing link',
+          id: 'Y+DYja',
+        });
+      case 'twitter':
+      default:
+        return intl.formatMessage({
+          defaultMessage: 'Share on Twitter',
+          description: 'Sharing: Twitter sharing link',
+          id: 'NI5gXc',
+        });
+    }
   };
 
   /**
@@ -194,17 +243,20 @@ export const Sharing: FC<SharingProps> = ({
    *
    * @returns {JSX.Element[]} The sharing links wrapped with li element.
    */
-  const getItems = (): JSX.Element[] => {
-    return media.map((medium) => (
+  const getItems = (): JSX.Element[] =>
+    media.map((medium) => (
       <li key={medium}>
-        <SharingLink medium={medium} url={getUrl(medium)} />
+        <SharingLink
+          label={getLabel(medium)}
+          medium={medium}
+          url={getUrl(medium)}
+        />
       </li>
     ));
-  };
 
   return (
     <Widget {...props} expanded={expanded} level={level} title={widgetTitle}>
-      <ul className={`${styles.list} ${className}`}>{getItems()}</ul>
+      <ul className={listClass}>{getItems()}</ul>
     </Widget>
   );
 };