diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js index dcef7e35b7..d025df9f35 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; +import { useIntl } from 'react-intl'; import { Typography } from '@strapi/design-system/Typography'; import { Icon } from '@strapi/design-system/Icon'; import { Divider } from '@strapi/design-system/Divider'; @@ -8,20 +9,34 @@ import { Stack } from '@strapi/design-system/Stack'; import Github from '@strapi/icons/Github'; import Download from '@strapi/icons/Download'; import Star from '@strapi/icons/Star'; +import { pxToRem } from '@strapi/helper-plugin'; const VerticalDivider = styled(Divider)` - width: 0.75rem; + width: ${pxToRem(12)}; transform: rotate(90deg); `; -const PackageStats = ({ githubStars, weeklyDownloads }) => { +const PackageStats = ({ githubStars, weeklyDownloads, npmPackageType }) => { + const { formatMessage } = useIntl(); + return ( {!!githubStars && ( <> - - -

+ + +

{githubStars} @@ -29,8 +44,19 @@ const PackageStats = ({ githubStars, weeklyDownloads }) => { )} - -

+ +

{weeklyDownloads} @@ -47,6 +73,7 @@ PackageStats.defaultProps = { PackageStats.propTypes = { githubStars: PropTypes.number, weeklyDownloads: PropTypes.number, + npmPackageType: PropTypes.string.isRequired, }; export default PackageStats; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js index 52903825c4..26f35ca470 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js @@ -77,7 +77,7 @@ const NpmPackageCard = ({ width={11} height={11} /> - + diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap index 0630387d11..c954c94e27 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap @@ -16,15 +16,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` height: 64px; } -.c47 { - margin-left: 4px; -} - .c52 { padding-top: 16px; } -.c54 { +.c55 { padding-top: 8px; } @@ -257,7 +253,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` justify-content: space-between; } -.c42 { +.c54 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -271,17 +267,12 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` flex-direction: row; } -.c43 { +.c44 { color: #666687; - width: 12px; - height: 12px; } -.c45 { +.c46 { color: #f29d41; - margin-left: 4px; - width: 12px; - height: 12px; } .c68 { @@ -303,11 +294,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` height: 12px; } -.c44 path { +.c45 path { fill: #666687; } -.c46 path { +.c47 path { fill: #f29d41; } @@ -464,11 +455,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` box-shadow: #4945ff 0px 0px 0px 2px; } -.c57 { +.c58 { padding-top: 24px; } -.c58 { +.c42 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -501,6 +492,15 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` margin-bottom: 0; } +.c43 > * { + margin-left: 0; + margin-right: 0; +} + +.c43 > * + * { + margin-left: 4px; +} + .c59 > * { margin-left: 0; margin-right: 0; @@ -523,7 +523,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` line-height: 1.25; } -.c55 { +.c56 { color: #666687; font-size: 0.875rem; line-height: 1.43; @@ -828,8 +828,6 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` .c49 { background: #dcdce4; - margin-left: 4px; - margin-right: 4px; } .c50 { @@ -838,13 +836,12 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` } .c51 { - width: 12px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } -.c56 { +.c57 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -1091,14 +1088,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` width="11" />

-
12 -
+


-
135 -
+

Comments

Powerful Strapi based comments moderation tool for you and your users

@@ -1278,14 +1273,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Config Sync

Migrate your config data across environments using the CLI or Strapi admin panel.

@@ -1496,14 +1489,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Content Versioning

This plugin enables you to versioning Content Types. It allows multiple draft versions✅ Keeps history of all changes (with time travel) ✅

@@ -1692,14 +1683,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Documentation

Create an OpenAPI Document and visualize your API with SWAGGER UI

@@ -1884,14 +1873,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Transformer

A plugin for Strapi Headless CMS that provides the ability to transform the API response.

@@ -2068,10 +2055,10 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` target="_blank" >
Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration! @@ -2148,19 +2135,15 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` height: 64px; } -.c47 { - margin-left: 4px; -} - .c52 { padding-top: 16px; } -.c55 { +.c56 { padding-top: 8px; } -.c54 { +.c55 { margin-left: 4px; width: 24px; height: auto; @@ -2389,7 +2372,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` justify-content: space-between; } -.c42 { +.c54 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2403,17 +2386,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` flex-direction: row; } -.c43 { +.c44 { color: #666687; - width: 12px; - height: 12px; } -.c45 { +.c46 { color: #f29d41; - margin-left: 4px; - width: 12px; - height: 12px; } .c70 { @@ -2430,11 +2408,11 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` height: 12px; } -.c44 path { +.c45 path { fill: #666687; } -.c46 path { +.c47 path { fill: #f29d41; } @@ -2591,11 +2569,11 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` box-shadow: #4945ff 0px 0px 0px 2px; } -.c58 { +.c59 { padding-top: 24px; } -.c59 { +.c42 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2628,6 +2606,15 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` margin-bottom: 0; } +.c43 > * { + margin-left: 0; + margin-right: 0; +} + +.c43 > * + * { + margin-left: 4px; +} + .c60 > * { margin-left: 0; margin-right: 0; @@ -2650,7 +2637,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` line-height: 1.25; } -.c56 { +.c57 { color: #666687; font-size: 0.875rem; line-height: 1.43; @@ -2955,8 +2942,6 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` .c49 { background: #dcdce4; - margin-left: 4px; - margin-right: 4px; } .c50 { @@ -2965,13 +2950,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` } .c51 { - width: 12px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } -.c57 { +.c58 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -3218,14 +3202,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Amazon Ses
Made by Strapi

Amazon Ses provider for Strapi

@@ -3420,14 +3402,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

AWS S3
Made by Strapi

AWS S3 provider for Strapi uploads

@@ -3622,14 +3602,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Cloudinary
Made by Strapi

Cloudinary provider for Strapi uploads

@@ -3814,14 +3792,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Local Upload
Made by Strapi

Local upload provider for Strapi

@@ -4016,14 +3992,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Mailgun
Made by Strapi

Mailgun provider for Strapi

@@ -4218,14 +4192,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Nodemailer
Made by Strapi

Nodemailer provider for Strapi

@@ -4420,14 +4392,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Rackspace
Made by Strapi

Rackspace provider for Strapi uploads

@@ -4622,14 +4592,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

SendGrid
Made by Strapi

SendGrid provider for Strapi

@@ -4824,14 +4792,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` width="11" />
-
12 -
+


-
135 -
+

Sendmail
Made by Strapi

Sendmail provider for Strapi

@@ -5014,10 +4980,10 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` target="_blank" >
Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration! diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 128dff946d..a6abbb61c8 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -272,7 +272,11 @@ "admin.pages.MarketPlacePage.plugin.tooltip.verified": "Plugin verified by Strapi", "admin.pages.MarketPlacePage.plugin.version": "Update your Strapi version: \"{strapiAppVersion}\" to: \"{versionRange}\"", "admin.pages.MarketPlacePage.plugin.version.null": "Unable to verify compatibility with your Strapi version: \"{strapiAppVersion}\"", + "admin.pages.MarketPlacePage.plugin.githubStars": "This plugin was starred {starsCount} on GitHub", + "admin.pages.MarketPlacePage.plugin.downloads": "This plugin has {downloadsCount} weekly downloads", "admin.pages.MarketPlacePage.providers": "Providers", + "admin.pages.MarketPlacePage.provider.githubStars": "This provider was starred {starsCount} on GitHub", + "admin.pages.MarketPlacePage.provider.downloads": "This provider has {downloadsCount} weekly downloads", "admin.pages.MarketPlacePage.search.clear": "Clear the search", "admin.pages.MarketPlacePage.search.empty": "No result for \"{target}\"", "admin.pages.MarketPlacePage.search.placeholder": "Search",