yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Add "made by strapi" badge to official marketplace plugins
This commit is contained in:
Rémi de Juvigny 2022-03-03 15:25:52 +01:00 committed by GitHub
commit 09c0efb714
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/admin/admin/src/assets/images/icon_made-by-strapi.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 797 B

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

@ -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,

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

@ -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
class="c37 c38"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
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>
<img
alt="Made by Strapi"
class="c39"
height="auto"
src="IMAGE_MOCK"
width="6"
/>
</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>

7
packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js
View File

@ -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',
},
},

1
packages/core/admin/admin/src/translations/en.json
View File

@ -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",