app-project: Add MastodonIcon and BlueSkyIcon (#6338)

* add MastodonIcon and BlueSkyIcon

packages/app-project/public/locales/en/components.json

@@ -32,10 +32,12 @@
     "title": "Connect with {{projectName}}",
     "ProjectLink": {
       "types": {
+        "bluesky": "BlueSky",
         "bitbucket": "Bitbucket",
         "facebook": "Facebook",
         "github": "GitHub",
         "instagram": "Instagram",
+        "mastodon": "Mastodon",
         "medium": "Medium",
         "pinterest": "Pinterest",
         "reddit": "Reddit",

packages/app-project/src/shared/components/ConnectWithProject/ConnectWithProject.mock.js

@@ -9,6 +9,13 @@ export const ConnectWithProjectMock = {
         site: 'bitbucket.com',
         url: 'https://bitbucket.com/test-project',
       },
+      {
+        name: 'BlueSky',
+        label: '',
+        path: 'test-project',
+        site: 'bsky.app',
+        url: 'https://bsky.app/profile/zooniverse.bsky.social',
+      },
       {
         name: 'Facebook',
         label: '',
@@ -30,6 +37,13 @@ export const ConnectWithProjectMock = {
         site: 'instagram.com',
         url: 'https://instagram.com/test-project',
       },
+      {
+        name: 'Mastodon',
+        label: '',
+        path: 'test-project',
+        site: 'mastodon.social',
+        url: 'https://mastodon.social/@test-project',
+      },
       {
         name: 'Medium',
         label: '',

packages/app-project/src/shared/components/ConnectWithProject/ConnectWithProjectContainer.js

@@ -1,34 +1,27 @@
-import { inject, observer } from 'mobx-react'
-import { arrayOf, shape, string } from 'prop-types'
-import { Component } from 'react'
+import { MobXProviderContext, observer } from 'mobx-react'
+import { useContext } from 'react'
 
 import ConnectWithProject from './ConnectWithProject'
 import isValidUrl from './helpers/isValidUrl'
 
-function storeMapper (stores) {
-  const { project } = stores.store
+function useStore() {
+  const { store } = useContext(MobXProviderContext)
+  const projectName = store.project['display_name']
+  const urls = store.project.urls
+
   return {
-    projectName: project['display_name'],
-    urls: project.urls
+    projectName,
+    urls
   }
 }
 
-class ConnectWithProjectContainer extends Component {
-  render () {
-    const { projectName, urls } = this.props
-    const validUrls = urls && urls.filter && urls.filter(urlObject => isValidUrl(urlObject.url))
-    return (!validUrls || validUrls.length > 0)
-      ? <ConnectWithProject projectName={projectName} urls={urls} />
-      : null
-  }
-}
+const ConnectWithProjectContainer = () => {
+  const { projectName = '', urls = [] } = useStore()
+  const validUrls = urls && urls.filter && urls.filter(urlObject => isValidUrl(urlObject.url))
 
-ConnectWithProjectContainer.propTypes = {
-  projectName: string,
-  urls: arrayOf(shape({
-    label: string.isRequired,
-    url: string.isRequired
-  }))
+  return !validUrls || validUrls.length > 0 ? (
+    <ConnectWithProject projectName={projectName} urls={urls} />
+  ) : null
 }
 
-export default inject(storeMapper)(observer(ConnectWithProjectContainer))
+export default observer(ConnectWithProjectContainer)

packages/app-project/src/shared/components/ConnectWithProject/components/ProjectLink/components/BlueSkyIcon.js

@@ -0,0 +1,19 @@
+import { Blank } from 'grommet-icons'
+
+function BlueSkyIcon(props) {
+  return (
+    <Blank
+      viewBox='0 0 600 530'
+      width='100'
+      height='88'
+      aria-label='BlueSky'
+      {...props}
+    >
+      <path
+        d='m135.7 44c66.5 50 138 151.2 164.3 205.5 26.3-54.3 97.8-155.5 164.3-205.5 48-36 125.7-63.9 125.7 24.8 0 17.7-10.2 148.8-16.1 170.1-20.7 74-96.2 92.8-163.3 81.4 117.3 20 147.2 86.1 82.7 152.2-122.4 125.6-175.9-31.5-189.6-71.7-2.5-7.4-3.7-10.8-3.7-7.9 0-3-1.2 0.5-3.7 7.9-13.7 40.2-67.2 197.3-189.6 71.7-64.5-66.1-34.6-132.2 82.7-152.2-67.2 11.4-142.6-7.4-163.3-81.4-5.9-21.3-16.1-152.4-16.1-170.1 0-88.7 77.7-60.8 125.7-24.8z'
+      />
+    </Blank>
+  )
+}
+
+export default BlueSkyIcon

packages/app-project/src/shared/components/ConnectWithProject/components/ProjectLink/components/MastodonIcon.js

@@ -0,0 +1,19 @@
+import { Blank } from 'grommet-icons'
+
+function MastodonIcon(props) {
+  return (
+    <Blank
+      viewBox='0 0 100 107'
+      aria-label='Mastodon'
+      {...props}
+    >
+      <path d='m97.6 63.9c-1.4 7.5-13.1 15.7-26.4 17.3-6.9 0.8-13.8 1.6-21.1 1.3-11.9-0.6-21.3-2.9-21.3-2.9q0 1.8 0.2 3.3c1.5 11.8 11.7 12.5 21.2 12.9 9.7 0.3 18.4-2.4 18.4-2.4l0.4 8.7c0 0-6.8 3.7-18.9 4.3-6.6 0.4-14.9-0.1-24.5-2.7-20.9-5.5-24.5-27.8-25-50.4-0.2-6.7-0.1-13-0.1-18.3 0-23.1 15.1-29.9 15.1-29.9 7.6-3.5 20.7-5 34.3-5.1h0.4c13.6 0.1 26.7 1.6 34.3 5.1 0 0 15.1 6.8 15.1 29.9 0 0 0.2 17-2.1 28.9z' />
+      <path
+        fill='white'
+        d='m81.9 36.8v28h-11.1v-27.2c0-5.7-2.4-8.6-7.2-8.6-5.3 0-8 3.4-8 10.2v14.9h-11v-14.9c0-6.8-2.7-10.2-8-10.2-4.8 0-7.2 2.9-7.2 8.6v27.2h-11.1v-28q0-8.6 4.4-13.7c3-3.3 6.9-5 11.8-5 5.7 0 10 2.1 12.8 6.5l2.8 4.6 2.8-4.6c2.8-4.4 7.1-6.5 12.8-6.5 4.8 0 8.8 1.7 11.8 5q4.4 5.1 4.4 13.7z'
+      />
+    </Blank>
+  )
+}
+
+export default MastodonIcon

packages/app-project/src/shared/components/ConnectWithProject/components/ProjectLink/helpers/formatUrlObject/formatUrlObject.js

@@ -12,8 +12,10 @@ import {
   Youtube as YouTubeIcon
 } from 'grommet-icons'
 
-import BitbucketIcon from './../../components/BitbucketIcon'
-import WeiboIcon from './../../components/WeiboIcon'
+import BitbucketIcon from './../../components/BitbucketIcon.js'
+import BlueSkyIcon from '../../components/BlueSkyIcon.js'
+import MastodonIcon from '../../components/MastodonIcon.js'
+import WeiboIcon from './../../components/WeiboIcon.js'
 
 function formatUrlObject(obj, t) {
   // Default to external website
@@ -29,6 +31,11 @@ function formatUrlObject(obj, t) {
     formattedObject.type = t('ConnectWithProject.ProjectLink.types.bitbucket')
   }
 
+  if (obj.site && obj.site.includes('bsky.app')) {
+    formattedObject.IconComponent = BlueSkyIcon
+    formattedObject.type = t('ConnectWithProject.ProjectLink.types.bluesky')
+  }
+
   if (obj.site && obj.site.includes('facebook')) {
     formattedObject.IconComponent = FacebookIcon
     formattedObject.type = t('ConnectWithProject.ProjectLink.types.facebook')
@@ -47,6 +54,11 @@ function formatUrlObject(obj, t) {
     formattedObject.type = t('ConnectWithProject.ProjectLink.types.instagram')
   }
 
+  if (obj.site && obj.site.includes('mastodon.social')) {
+    formattedObject.IconComponent = MastodonIcon
+    formattedObject.type = t('ConnectWithProject.ProjectLink.types.mastodon')
+  }
+
   if (obj.site && obj.site.includes('medium')) {
     formattedObject.IconComponent = MediumIcon
     formattedObject.type = t('ConnectWithProject.ProjectLink.types.medium')
@@ -92,6 +104,8 @@ function formatUrlObject(obj, t) {
     formattedObject.type = t('ConnectWithProject.ProjectLink.types.youtube')
   }
 
+
+
   return formattedObject
 }