Share Collection and Share Dataset features

README.md

@@ -223,6 +223,10 @@ The environment is accessible through the following URLs:
 > #### Account Page BreadCrumbs
 >
 > The Account Page has been updated to remove breadcrumbs, as the page is not part of the main navigation.
+>
+> #### Share Collection and Dataset feature
+>
+> Links to share a collection or a dataset via LinkedIn, X or Facebook will now open in a new tab instead of a popup.
 
 </details>
 

package.json

@@ -34,7 +34,7 @@
     "lodash": "^4.17.21",
     "moment-timezone": "0.5.43",
     "react-bootstrap": "2.7.2",
-    "react-bootstrap-icons": "1.10.3",
+    "react-bootstrap-icons": "1.11.4",
     "react-hook-form": "7.51.2",
     "react-i18next": "12.1.5",
     "react-infinite-scroll-hook": "4.1.1",

packages/design-system/package.json

@@ -50,7 +50,7 @@
     "@types/react": "18.0.27",
     "bootstrap": "5.2.3",
     "react-bootstrap": "2.7.2",
-    "react-bootstrap-icons": "1.10.3",
+    "react-bootstrap-icons": "1.11.4",
     "sass": "1.58.1",
     "typescript": "4.9.5",
     "vite-plugin-istanbul": "4.0.1"

packages/design-system/src/lib/stories/button-group/ButtonGroup.stories.tsx

@@ -55,17 +55,12 @@ export const NestedButtonGroups: Story = {
   render: () => (
     <ButtonToolbar ariaLabel="Toolbar with button groups">
       <ButtonGroup vertical>
-        <DropdownButton asButtonGroup withSpacing title="Access File" id="access-file">
+        <DropdownButton asButtonGroup title="Access File" id="access-file">
           <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
           <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
           <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>
         </DropdownButton>
-        <DropdownButton
-          asButtonGroup
-          withSpacing
-          title="Edit File"
-          id="edit-file"
-          variant="secondary">
+        <DropdownButton asButtonGroup title="Edit File" id="edit-file" variant="secondary">
           <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
           <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
           <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>

public/locales/en/collection.json

@@ -31,6 +31,10 @@
     "error": "There was an error publishing your collection."
   },
   "publishedAlert": "Your collection is now public.",
+  "share": {
+    "shareCollection": "Share Collection",
+    "helpText": "Share this collection on your favorite social media networks."
+  },
   "editedAlert": "You have successfully updated your collection!",
   "editCollection": {
     "edit": "Edit",

public/locales/en/dataset.json

@@ -59,7 +59,12 @@
         "archivalZip": "Archival Format (.tab) ZIP"
       }
     },
-    "uploadFiles": "Upload Files"
+    "uploadFiles": "Upload Files",
+    "share": {
+      "shareDataset": "Share Dataset",
+      "helpText": "Share this dataset on your favorite social media networks."
+    },
+    "contactOwner": "Contact Owner"
   },
   "alerts": {
     "publishInProgress": {

public/locales/en/shared.json

@@ -3,7 +3,9 @@
   "remove": "Remove",
   "add": "Add",
   "cancel": "Cancel",
+  "close": "Close",
   "continue": "Continue",
+  "share": "Share",
   "pageNumberNotFound": {
     "heading": "Page Number Not Found",
     "message": "The page number you requested does not exist. Please try a different page number."

src/sections/collection/Collection.module.scss

@@ -11,10 +11,19 @@
   gap: 10px;
 }
 
-.action-buttons {
+.metrics-actions-container {
   display: flex;
-  justify-content: flex-end;
-  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+
+  .right-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }
 
 .subtext {

src/sections/collection/Collection.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next'
 import { Alert, ButtonGroup, Col, Row } from '@iqss/dataverse-design-system'
-
 import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
 import { useCollection } from './useCollection'
 import { useScrollTop } from '../../shared/hooks/useScrollTop'
@@ -14,6 +13,7 @@ import { CollectionSkeleton } from './CollectionSkeleton'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
 import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
+import { ShareCollectionButton } from './share-collection-button/ShareCollectionButton'
 import { EditCollectionDropdown } from './edit-collection-dropdown/EditCollectionDropdown'
 import styles from './Collection.module.scss'
 
@@ -81,19 +81,28 @@ export function Collection({
                 {t('publishedAlert')}
               </Alert>
             )}
-            {(showPublishButton || showEditButton) && (
-              <div className={styles['action-buttons']}>
-                <ButtonGroup>
-                  {showPublishButton && (
-                    <PublishCollectionButton
-                      repository={collectionRepository}
-                      collectionId={collection.id}
-                    />
-                  )}
-                  {showEditButton && <EditCollectionDropdown collection={collection} />}
-                </ButtonGroup>
+
+            <div className={styles['metrics-actions-container']}>
+              <div className={styles.metrics}></div>
+              <div className={styles['right-content']}>
+                {/* 👇 Here should go Contact button also */}
+                {/* <ContactButton /> */}
+
+                <ShareCollectionButton />
+
+                {(showPublishButton || showEditButton) && (
+                  <ButtonGroup>
+                    {showPublishButton && (
+                      <PublishCollectionButton
+                        repository={collectionRepository}
+                        collectionId={collection.id}
+                      />
+                    )}
+                    {showEditButton && <EditCollectionDropdown collection={collection} />}
+                  </ButtonGroup>
+                )}
               </div>
-            )}
+            </div>
 
             <CollectionItemsPanel
               key={collection.id}

src/sections/collection/share-collection-button/ShareCollectionButton.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button, Tooltip } from '@iqss/dataverse-design-system'
+import { ShareFill } from 'react-bootstrap-icons'
+import { SocialShareModal } from '@/sections/shared/social-share-modal/SocialShareModal'
+
+export const ShareCollectionButton = () => {
+  const { t } = useTranslation('collection')
+  const { t: tShared } = useTranslation('shared')
+
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const openShareModal = () => setShowShareModal(true)
+  const closeShareModal = () => setShowShareModal(false)
+
+  return (
+    <>
+      <Tooltip overlay={t('share.shareCollection')} placement="top">
+        <Button
+          variant="link"
+          onClick={openShareModal}
+          icon={<ShareFill style={{ marginRight: '0.3rem', marginBottom: '0.2rem' }} />}>
+          {tShared('share')}
+        </Button>
+      </Tooltip>
+
+      <SocialShareModal
+        shareUrl={window.location.href}
+        show={showShareModal}
+        handleClose={closeShareModal}
+        title={t('share.shareCollection')}
+        helpText={t('share.helpText')}
+      />
+    </>
+  )
+}

src/sections/dataset/dataset-action-buttons/DatasetActionButtons.module.scss

@@ -3,3 +3,9 @@
   width: 100%;
   margin: 0.5rem 0;
 }
+
+.contact-owner-and-share-group {
+  > button {
+    width: 50%;
+  }
+}

src/sections/dataset/dataset-action-buttons/DatasetActionButtons.tsx

@@ -1,14 +1,15 @@
-import { Dataset } from '../../../dataset/domain/models/Dataset'
-import { ButtonGroup } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import { Button, ButtonGroup } from '@iqss/dataverse-design-system'
+import { Dataset } from '@/dataset/domain/models/Dataset'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
+import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
 import { AccessDatasetMenu } from './access-dataset-menu/AccessDatasetMenu'
 import { PublishDatasetMenu } from './publish-dataset-menu/PublishDatasetMenu'
-import styles from './DatasetActionButtons.module.scss'
 import { SubmitForReviewButton } from './submit-for-review-button/SubmitForReviewButton'
 import { EditDatasetMenu } from './edit-dataset-menu/EditDatasetMenu'
 import { LinkDatasetButton } from './link-dataset-button/LinkDatasetButton'
-import { useTranslation } from 'react-i18next'
-import { DatasetRepository } from '../../../dataset/domain/repositories/DatasetRepository'
-import { CollectionRepository } from '../../../collection/domain/repositories/CollectionRepository'
+import { ShareDatasetButton } from './share-dataset-button/ShareDatasetButton'
+import styles from './DatasetActionButtons.module.scss'
 
 interface DatasetActionButtonsProps {
   dataset: Dataset
@@ -22,6 +23,7 @@ export function DatasetActionButtons({
   collectionRepository
 }: DatasetActionButtonsProps) {
   const { t } = useTranslation('dataset')
+
   return (
     <ButtonGroup aria-label={t('datasetActionButtons.title')} vertical className={styles.group}>
       <AccessDatasetMenu
@@ -39,6 +41,12 @@ export function DatasetActionButtons({
       <SubmitForReviewButton dataset={dataset} />
       <EditDatasetMenu dataset={dataset} />
       <LinkDatasetButton dataset={dataset} />
+      <ButtonGroup className={styles['contact-owner-and-share-group']}>
+        <Button disabled variant="secondary" size="sm">
+          {t('datasetActionButtons.contactOwner')}
+        </Button>
+        <ShareDatasetButton />
+      </ButtonGroup>
     </ButtonGroup>
   )
 }

src/sections/dataset/dataset-action-buttons/share-dataset-button/ShareDatasetButton.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@iqss/dataverse-design-system'
+import { SocialShareModal } from '@/sections/shared/social-share-modal/SocialShareModal'
+
+export const ShareDatasetButton = () => {
+  const { t } = useTranslation('dataset')
+  const { t: tShared } = useTranslation('shared')
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const openShareModal = () => setShowShareModal(true)
+  const closeShareModal = () => setShowShareModal(false)
+
+  return (
+    <>
+      <Button variant="secondary" onClick={openShareModal} size="sm">
+        {tShared('share')}
+      </Button>
+
+      <SocialShareModal
+        shareUrl={window.location.href}
+        show={showShareModal}
+        handleClose={closeShareModal}
+        title={t('datasetActionButtons.share.shareDataset')}
+        helpText={t('datasetActionButtons.share.helpText')}
+      />
+    </>
+  )
+}

src/sections/shared/social-share-modal/SocialShareModal.module.scss

@@ -0,0 +1,50 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.help-block {
+  color: $dv-subtext-color;
+  font-size: 14px;
+}
+
+.social-btn {
+  display: grid;
+  place-items: center;
+  padding: 8px 12px;
+  background-color: transparent;
+  border: 0;
+  border-radius: 6px;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    scale: 1.1;
+    box-shadow: 2px 2px 10px rgb(0 0 0 / 30%);
+  }
+
+  &:active {
+    scale: 1;
+    box-shadow: none;
+  }
+
+  &.fb {
+    background-color: #3a5795;
+
+    svg {
+      color: #fff;
+    }
+  }
+
+  &.x {
+    background-color: #000;
+
+    svg {
+      color: #fff;
+    }
+  }
+
+  &.linkedin {
+    background-color: #6f5499;
+
+    svg {
+      color: #fff;
+    }
+  }
+}