Merge pull request #12740 from strapi/market-made-by-strapi

Add "made by strapi" badge to official marketplace plugins

packages/core/admin/admin/src/assets/images/icon_made-by-strapi.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="4" fill="#4945FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8075 7.625H9.03058V11.1792H12.2533C12.4977 11.1792 12.6958 11.3773 12.6958 11.6216V14.8444H16.25V8.06746C16.25 7.82309 16.0519 7.625 15.8075 7.625Z" fill="white"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M9.0308 7.625V11.1792H6.01073C5.81364 11.1792 5.71494 10.9409 5.8543 10.8015L9.0308 7.625ZM13.0735 18.0209C12.9342 18.1603 12.6959 18.0616 12.6959 17.8645V14.8444H16.25L13.0735 18.0209ZM12.4746 11.1792H9.03058V14.4019C9.03058 14.6463 9.22868 14.8444 9.47304 14.8444H12.6958V11.4004C12.6958 11.2782 12.5968 11.1792 12.4746 11.1792Z" fill="#DAD9FF"/>
+</svg>

packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js

@@ -16,6 +16,8 @@ import Check from '@strapi/icons/Check';
 import CheckCircle from '@strapi/icons/CheckCircle';
 import { useNotification, useTracking } from '@strapi/helper-plugin';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
+
 // Custom component to have an ellipsis after the 2nd line
 const EllipsisText = styled(Typography)`
   /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
@@ -38,6 +40,11 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
     ? `yarn add ${attributes.npmPackageName}`
     : `npm install ${attributes.npmPackageName}`;
 
+  const madeByStrapiMessage = formatMessage({
+    id: 'admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi',
+    defaultMessage: 'Made by Strapi',
+  });
+
   return (
     <Flex
       direction="column"
@@ -65,7 +72,7 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
           <Typography as="h3" variant="delta">
             <Flex alignItems="center">
               {attributes.name}
-              {attributes.validated && (
+              {attributes.validated && !attributes.madeByStrapi && (
                 <Tooltip
                   description={formatMessage({
                     id: 'admin.pages.MarketPlacePage.plugin.tooltip.verified',
@@ -77,6 +84,20 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
                   </Flex>
                 </Tooltip>
               )}
+              {attributes.madeByStrapi && (
+                <Tooltip description={madeByStrapiMessage}>
+                  <Flex>
+                    <Box
+                      as="img"
+                      src={madeByStrapiIcon}
+                      alt={madeByStrapiMessage}
+                      marginLeft={1}
+                      width={6}
+                      height="auto"
+                    />
+                  </Flex>
+                </Tooltip>
+              )}
             </Flex>
           </Typography>
         </Box>
@@ -154,6 +175,7 @@ PluginCard.propTypes = {
       logo: PropTypes.object.isRequired,
       developerName: PropTypes.string.isRequired,
       validated: PropTypes.bool.isRequired,
+      madeByStrapi: PropTypes.bool.isRequired,
       strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
     }).isRequired,
   }).isRequired,

packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js

@@ -61,6 +61,12 @@ describe('Marketplace page', () => {
       }
 
       .c39 {
+        margin-left: 4px;
+        width: 24px;
+        height: auto;
+      }
+
+      .c40 {
         padding-left: 16px;
       }
 
@@ -267,7 +273,7 @@ describe('Marketplace page', () => {
         margin-left: 8px;
       }
 
-      .c40 {
+      .c41 {
         color: #328048;
         margin-right: 8px;
         width: 12;
@@ -318,7 +324,7 @@ describe('Marketplace page', () => {
         line-height: 1.43;
       }
 
-      .c41 {
+      .c42 {
         font-weight: 600;
         color: #328048;
         font-size: 0.875rem;
@@ -1024,21 +1030,13 @@ describe('Marketplace page', () => {
                                   class="c17"
                                   tabindex="0"
                                 >
-                                  <svg
+                                  <img
-                                    class="c37 c38"
+                                    alt="Made by Strapi"
-                                    fill="none"
+                                    class="c39"
-                                    height="1em"
+                                    height="auto"
-                                    viewBox="0 0 24 24"
+                                    src="IMAGE_MOCK"
-                                    width="1em"
+                                    width="6"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      clip-rule="evenodd"
-                                      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-1.438-11.066L16.158 7.5 18 9.245l-7.438 7.18-4.462-4.1 1.84-1.745 2.622 2.354z"
-                                      fill="#212134"
-                                      fill-rule="evenodd"
                                   />
-                                  </svg>
                                 </div>
                               </span>
                             </div>
@@ -1090,10 +1088,10 @@ describe('Marketplace page', () => {
                           </div>
                         </a>
                         <div
-                          class="c39"
+                          class="c40"
                         >
                           <svg
-                            class="c40 c38"
+                            class="c41 c38"
                             fill="none"
                             height="12"
                             viewBox="0 0 24 24"
@@ -1106,7 +1104,7 @@ describe('Marketplace page', () => {
                             />
                           </svg>
                           <span
-                            class="c41"
+                            class="c42"
                           >
                             Installed
                           </span>

packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js

@@ -50,6 +50,7 @@ const handlers = [
               },
               developerName: 'Hugo Sarti',
               validated: false,
+              madeByStrapi: false,
               strapiCompatibility: 'v3',
             },
           },
@@ -246,6 +247,7 @@ const handlers = [
               ],
               developerName: 'Mateusz Ziarko',
               validated: false,
+              madeByStrapi: false,
               strapiCompatibility: 'v4',
             },
           },
@@ -323,6 +325,7 @@ const handlers = [
               ],
               developerName: 'Boaz Poolman',
               validated: true,
+              madeByStrapi: false,
               strapiCompatibility: 'v4',
             },
           },
@@ -401,6 +404,7 @@ const handlers = [
               ],
               developerName: 'Ondřej Janošík',
               validated: false,
+              madeByStrapi: false,
               strapiCompatibility: 'v4',
             },
           },
@@ -446,6 +450,7 @@ const handlers = [
               },
               developerName: 'Strapi team',
               validated: true,
+              madeByStrapi: true,
               strapiCompatibility: 'v4',
             },
           },
@@ -491,6 +496,7 @@ const handlers = [
               },
               developerName: 'Strapi team',
               validated: true,
+              madeByStrapi: false,
               strapiCompatibility: 'v3',
             },
           },
@@ -536,6 +542,7 @@ const handlers = [
               },
               developerName: 'Daedalus',
               validated: false,
+              madeByStrapi: false,
               strapiCompatibility: 'v4',
             },
           },

packages/core/admin/admin/src/translations/en.json

@@ -69,6 +69,7 @@
   "admin.pages.MarketPlacePage.plugin.info": "Learn more",
   "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
   "admin.pages.MarketPlacePage.plugin.tooltip.verified": "Plugin verified by Strapi",
+  "admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi": "Made by Strapi",
   "Content Manager": "Content Manager",
   "Content Type Builder": "Content-Types Builder",
   "Documentation": "Documentation",