feat: add stories

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 */}

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')}

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')}

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>

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={() => {}}
+    />
+  )
+}