From a3c9982821c1754caf0e06cfecc19121ee13f3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Thu, 21 Nov 2024 11:50:22 -0300
Subject: [PATCH] feat: add stories

---
 src/sections/collection/Collection.tsx        |  2 +-
 .../ShareCollectionButton.tsx                 |  1 +
 .../ShareDatasetButton.tsx                    |  1 +
 .../social-share-modal/SocialShareModal.tsx   | 26 +++++-----
 .../SocialShareModal.stories.tsx              | 48 +++++++++++++++++++
 5 files changed, 66 insertions(+), 12 deletions(-)
 create mode 100644 src/stories/shared/social-share-modal/SocialShareModal.stories.tsx

diff --git a/src/sections/collection/Collection.tsx b/src/sections/collection/Collection.tsx
index 3884dd4d4..5d2cbfd27 100644
--- a/src/sections/collection/Collection.tsx
+++ b/src/sections/collection/Collection.tsx
@@ -76,7 +76,7 @@ export function Collection({
             )}
 
             <div className={styles['metrics-actions-container']}>
-              <div className={styles.metrics}>Metrics</div>
+              <div className={styles.metrics}></div>
               <div className={styles['right-content']}>
                 <div className={styles['contact-share-btns']}>
                   {/* 👇 Here should go Contact button also */}
diff --git a/src/sections/collection/share-collection-button/ShareCollectionButton.tsx b/src/sections/collection/share-collection-button/ShareCollectionButton.tsx
index 7616ad770..e2ee13c6a 100644
--- a/src/sections/collection/share-collection-button/ShareCollectionButton.tsx
+++ b/src/sections/collection/share-collection-button/ShareCollectionButton.tsx
@@ -25,6 +25,7 @@ export const ShareCollectionButton = () => {
       </Tooltip>
 
       <SocialShareModal
+        shareUrl={window.location.href}
         show={showShareModal}
         handleClose={closeShareModal}
         title={t('share.shareCollection')}
diff --git a/src/sections/dataset/dataset-action-buttons/share-dataset-button/ShareDatasetButton.tsx b/src/sections/dataset/dataset-action-buttons/share-dataset-button/ShareDatasetButton.tsx
index 9bc7644e2..46058265c 100644
--- a/src/sections/dataset/dataset-action-buttons/share-dataset-button/ShareDatasetButton.tsx
+++ b/src/sections/dataset/dataset-action-buttons/share-dataset-button/ShareDatasetButton.tsx
@@ -18,6 +18,7 @@ export const ShareDatasetButton = () => {
       </Button>
 
       <SocialShareModal
+        shareUrl={window.location.href}
         show={showShareModal}
         handleClose={closeShareModal}
         title={t('datasetActionButtons.share.shareDataset')}
diff --git a/src/sections/shared/social-share-modal/SocialShareModal.tsx b/src/sections/shared/social-share-modal/SocialShareModal.tsx
index 0e7d35e81..a73b2ff5a 100644
--- a/src/sections/shared/social-share-modal/SocialShareModal.tsx
+++ b/src/sections/shared/social-share-modal/SocialShareModal.tsx
@@ -3,30 +3,34 @@ import { Button, Modal, Stack } from '@iqss/dataverse-design-system'
 import { Facebook, Linkedin, TwitterX } from 'react-bootstrap-icons'
 import styles from './SocialShareModal.module.scss'
 
-// TODO:ME - Add storybook
 // TODO:ME - Add component test to check url is correct
 
+export const LINKEDIN_SHARE_URL = 'https://www.linkedin.com/shareArticle?url='
+export const X_SHARE_URL = 'https://x.com/intent/post?url='
+export const FACEBOOK_SHARE_URL = 'https://www.facebook.com/sharer/sharer.php?u='
+
 interface SocialShareModalProps {
   show: boolean
   title: string
   helpText: string
+  shareUrl: string
   handleClose: () => void
 }
 
-export const SocialShareModal = ({ show, title, helpText, handleClose }: SocialShareModalProps) => {
+export const SocialShareModal = ({
+  show,
+  title,
+  helpText,
+  shareUrl,
+  handleClose
+}: SocialShareModalProps) => {
   const { t } = useTranslation('shared')
 
-  const currentUrl = window.location.href
-
-  const shareOnLinkedInURL = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(
-    currentUrl
-  )}`
+  const shareOnLinkedInURL = `${LINKEDIN_SHARE_URL}${encodeURIComponent(shareUrl)}`
 
-  const shareOnXURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}`
+  const shareOnXURL = `${X_SHARE_URL}${encodeURIComponent(shareUrl)}`
 
-  const shareOnFacebookURL = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-    currentUrl
-  )}`
+  const shareOnFacebookURL = `${FACEBOOK_SHARE_URL}${encodeURIComponent(shareUrl)}`
 
   return (
     <Modal show={show} onHide={handleClose} centered>
diff --git a/src/stories/shared/social-share-modal/SocialShareModal.stories.tsx b/src/stories/shared/social-share-modal/SocialShareModal.stories.tsx
new file mode 100644
index 000000000..f378028be
--- /dev/null
+++ b/src/stories/shared/social-share-modal/SocialShareModal.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { WithI18next } from '../../WithI18next'
+import { SocialShareModal } from '@/sections/shared/social-share-modal/SocialShareModal'
+
+const meta: Meta<typeof SocialShareModal> = {
+  title: 'Sections/Shared/SocialShareModal',
+  component: SocialShareModal,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof SocialShareModal>
+
+export const Default: Story = {
+  render: () => (
+    <SocialShareModal
+      shareUrl="https://example.com"
+      show
+      title="Share"
+      helpText="Share this page with your friends"
+      handleClose={() => {}}
+    />
+  )
+}
+
+export const ShareCollection: Story = {
+  render: () => (
+    <SocialShareModal
+      shareUrl="https://example.com/some-collection"
+      show
+      title="Share Collection"
+      helpText="Share this collection on your favorite social media networks."
+      handleClose={() => {}}
+    />
+  )
+}
+
+export const ShareDataset: Story = {
+  render: () => (
+    <SocialShareModal
+      shareUrl="https://example.com/some-dataset"
+      show
+      title="Share Dataset"
+      helpText="Share this dataset on your favorite social media networks."
+      handleClose={() => {}}
+    />
+  )
+}