diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 3697053a9d..a34ccaf022 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -15,7 +15,9 @@ import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Layout, HeaderLayout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout'; import { Main } from '@strapi/design-system/Main'; import { Searchbar } from '@strapi/design-system/Searchbar'; +import { LinkButton } from '@strapi/design-system/LinkButton'; import { useNotifyAT } from '@strapi/design-system/LiveRegions'; +import Plus from '@strapi/icons/Plus'; import PluginCard from './components/PluginCard'; import { EmptyPluginSearch } from './components/EmptyPluginSearch'; @@ -137,6 +139,18 @@ const MarketPlacePage = () => { id: 'admin.pages.MarketPlacePage.subtitle', defaultMessage: 'Get more out of Strapi', })} + primaryAction={ + } + variant="tertiary" + href="https://market.strapi.io/submit-plugin" + > + {formatMessage({ + id: 'admin.pages.MarketPlacePage.submit.plugin.link', + defaultMessage: 'Submit your plugin', + })} + + } /> { await waitFor(() => expect(getByRole('heading', { name: /marketplace/i })).toBeInTheDocument()); expect(container.firstChild).toMatchInlineSnapshot(` - .c29 { + .c35 { border-radius: 4px; width: 64px; height: 64px; } - .c30 { + .c36 { padding-top: 20px; } - .c33 { + .c39 { padding-top: 8px; } - .c54 { + .c55 { margin-left: 4px; width: 24px; height: auto; } - .c55 { + .c56 { padding-left: 16px; } - .c51 { + .c52 { font-weight: 600; color: #32324d; font-size: 0.75rem; line-height: 1.33; } - .c48 { + .c49 { padding-right: 8px; } - .c45 { + .c46 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -102,21 +102,21 @@ describe('Marketplace page', () => { outline: none; } - .c45 svg { + .c46 svg { height: 12px; width: 12px; } - .c45 svg > g, - .c45 svg path { + .c46 svg > g, + .c46 svg path { fill: #ffffff; } - .c45[aria-disabled='true'] { + .c46[aria-disabled='true'] { pointer-events: none; } - .c45:after { + .c46:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -131,11 +131,11 @@ describe('Marketplace page', () => { border: 2px solid transparent; } - .c45:focus-visible { + .c46:focus-visible { outline: none; } - .c45:focus-visible:after { + .c46:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -146,11 +146,11 @@ describe('Marketplace page', () => { border: 2px solid #4945ff; } - .c49 { + .c50 { height: 100%; } - .c46 { + .c47 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -162,7 +162,7 @@ describe('Marketplace page', () => { background: #f0f0ff; } - .c46 .c47 { + .c47 .c48 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -173,66 +173,66 @@ describe('Marketplace page', () => { align-items: center; } - .c46 .c50 { + .c47 .c51 { color: #ffffff; } - .c46[aria-disabled='true'] { + .c47[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } - .c46[aria-disabled='true'] .c50 { + .c47[aria-disabled='true'] .c51 { color: #666687; } - .c46[aria-disabled='true'] svg > g, - .c46[aria-disabled='true'] svg path { + .c47[aria-disabled='true'] svg > g, + .c47[aria-disabled='true'] svg path { fill: #666687; } - .c46[aria-disabled='true']:active { + .c47[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } - .c46[aria-disabled='true']:active .c50 { + .c47[aria-disabled='true']:active .c51 { color: #666687; } - .c46[aria-disabled='true']:active svg > g, - .c46[aria-disabled='true']:active svg path { + .c47[aria-disabled='true']:active svg > g, + .c47[aria-disabled='true']:active svg path { fill: #666687; } - .c46:hover { + .c47:hover { background-color: #ffffff; } - .c46:active { + .c47:active { background-color: #ffffff; border: 1px solid #4945ff; } - .c46:active .c50 { + .c47:active .c51 { color: #4945ff; } - .c46:active svg > g, - .c46:active svg path { + .c47:active svg > g, + .c47:active svg path { fill: #4945ff; } - .c46 .c50 { + .c47 .c51 { color: #271fe0; } - .c46 svg > g, - .c46 svg path { + .c47 svg > g, + .c47 svg path { fill: #271fe0; } - .c27 { + .c33 { background: #ffffff; padding-top: 16px; padding-right: 24px; @@ -243,7 +243,7 @@ describe('Marketplace page', () => { height: 100%; } - .c28 { + .c34 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -261,7 +261,7 @@ describe('Marketplace page', () => { align-items: normal; } - .c32 { + .c38 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -275,35 +275,35 @@ describe('Marketplace page', () => { align-items: center; } - .c52 { + .c53 { color: #328048; margin-left: 8px; } - .c56 { + .c57 { color: #328048; margin-right: 8px; width: 12; height: 12; } - .c53 path { + .c54 path { fill: #328048; } - .c16 { + .c22 { font-weight: 600; color: #32324d; font-size: 0.75rem; line-height: 1.33; } - .c20 { + .c26 { padding-right: 8px; padding-left: 12px; } - .c18 { + .c24 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -321,7 +321,7 @@ describe('Marketplace page', () => { align-items: center; } - .c22 { + .c28 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -335,7 +335,7 @@ describe('Marketplace page', () => { align-items: center; } - .c24 { + .c30 { border: none; border-radius: 4px; padding-left: 0; @@ -347,37 +347,37 @@ describe('Marketplace page', () => { width: 100%; } - .c24::-webkit-input-placeholder { + .c30::-webkit-input-placeholder { color: #8e8ea9; opacity: 1; } - .c24::-moz-placeholder { + .c30::-moz-placeholder { color: #8e8ea9; opacity: 1; } - .c24:-ms-input-placeholder { + .c30:-ms-input-placeholder { color: #8e8ea9; opacity: 1; } - .c24::placeholder { + .c30::placeholder { color: #8e8ea9; opacity: 1; } - .c24[aria-disabled='true'] { + .c30[aria-disabled='true'] { background: inherit; color: inherit; } - .c24:focus { + .c30:focus { outline: none; box-shadow: none; } - .c19 { + .c25 { border: 1px solid #dcdce4; border-radius: 4px; background: #ffffff; @@ -390,12 +390,12 @@ describe('Marketplace page', () => { transition-duration: 0.2s; } - .c19:focus-within { + .c25:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } - .c15 { + .c21 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -407,15 +407,15 @@ describe('Marketplace page', () => { width: 1px; } - .c23 { + .c29 { font-size: 0.8rem; } - .c23 svg path { + .c29 svg path { fill: #32324d; } - .c14 { + .c20 { border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); outline: none; @@ -426,24 +426,24 @@ describe('Marketplace page', () => { transition-duration: 0.2s; } - .c14:focus-within .c21 svg path { + .c20:focus-within .c27 svg path { fill: #4945ff; } - .c14 .c17 { + .c20 .c23 { border: 1px solid transparent; } - .c14 .c17:focus-within { + .c20 .c23:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } - .c36 { + .c42 { padding-top: 12px; } - .c37 { + .c43 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -457,42 +457,42 @@ describe('Marketplace page', () => { align-items: center; } - .c38 > * { + .c44 > * { margin-left: 0; margin-right: 0; } - .c38 > * + * { + .c44 > * + * { margin-left: 8px; } - .c31 { + .c37 { color: #32324d; font-weight: 500; font-size: 1rem; line-height: 1.25; } - .c34 { + .c40 { color: #666687; font-size: 0.875rem; line-height: 1.43; } - .c57 { + .c58 { font-weight: 600; color: #328048; font-size: 0.875rem; line-height: 1.43; } - .c25 { + .c31 { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } - .c26 { + .c32 { grid-column: span 4; max-width: 100%; } @@ -509,12 +509,12 @@ describe('Marketplace page', () => { padding-left: 56px; } - .c9 { + .c15 { padding-right: 56px; padding-left: 56px; } - .c10 { + .c16 { padding-bottom: 16px; } @@ -559,7 +559,7 @@ describe('Marketplace page', () => { align-items: center; } - .c11 { + .c17 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -577,7 +577,7 @@ describe('Marketplace page', () => { align-items: flex-start; } - .c12 { + .c18 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -594,7 +594,7 @@ describe('Marketplace page', () => { flex-wrap: wrap; } - .c13 > * + * { + .c19 > * + * { margin-left: 8px; } @@ -605,7 +605,7 @@ describe('Marketplace page', () => { line-height: 1.25; } - .c8 { + .c14 { color: #666687; font-size: 1rem; line-height: 1.5; @@ -615,18 +615,22 @@ describe('Marketplace page', () => { outline: none; } - .c42 { + .c13 { font-weight: 600; color: #32324d; font-size: 0.75rem; line-height: 1.33; } - .c44 { + .c11 { + padding-right: 8px; + } + + .c45 { padding-left: 8px; } - .c39 { + .c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -640,21 +644,21 @@ describe('Marketplace page', () => { outline: none; } - .c39 svg { + .c8 svg { height: 12px; width: 12px; } - .c39 svg > g, - .c39 svg path { + .c8 svg > g, + .c8 svg path { fill: #ffffff; } - .c39[aria-disabled='true'] { + .c8[aria-disabled='true'] { pointer-events: none; } - .c39:after { + .c8:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -669,11 +673,11 @@ describe('Marketplace page', () => { border: 2px solid transparent; } - .c39:focus-visible { + .c8:focus-visible { outline: none; } - .c39:focus-visible:after { + .c8:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -684,7 +688,7 @@ describe('Marketplace page', () => { border: 2px solid #4945ff; } - .c40 { + .c9 { padding: 8px 16px; background: #4945ff; border: none; @@ -699,7 +703,7 @@ describe('Marketplace page', () => { text-decoration: none; } - .c40 .c43 { + .c9 .c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -710,56 +714,56 @@ describe('Marketplace page', () => { align-items: center; } - .c40 .c41 { + .c9 .c12 { color: #ffffff; } - .c40[aria-disabled='true'] { + .c9[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } - .c40[aria-disabled='true'] .c41 { + .c9[aria-disabled='true'] .c12 { color: #666687; } - .c40[aria-disabled='true'] svg > g, - .c40[aria-disabled='true'] svg path { + .c9[aria-disabled='true'] svg > g, + .c9[aria-disabled='true'] svg path { fill: #666687; } - .c40[aria-disabled='true']:active { + .c9[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } - .c40[aria-disabled='true']:active .c41 { + .c9[aria-disabled='true']:active .c12 { color: #666687; } - .c40[aria-disabled='true']:active svg > g, - .c40[aria-disabled='true']:active svg path { + .c9[aria-disabled='true']:active svg > g, + .c9[aria-disabled='true']:active svg path { fill: #666687; } - .c40:hover { + .c9:hover { background-color: #f6f6f9; } - .c40:active { + .c9:active { background-color: #eaeaef; } - .c40 .c41 { + .c9 .c12 { color: #32324d; } - .c40 svg > g, - .c40 svg path { + .c9 svg > g, + .c9 svg path { fill: #32324d; } - .c35 { + .c41 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -767,13 +771,13 @@ describe('Marketplace page', () => { } @media (max-width:68.75rem) { - .c26 { + .c32 { grid-column: span 6; } } @media (max-width:34.375rem) { - .c26 { + .c32 { grid-column: span 12; } } @@ -809,49 +813,79 @@ describe('Marketplace page', () => { Marketplace + + + + Submit your plugin + +

Get more out of Strapi

{ > Comments logo

Comments

Powerful Strapi based comments moderation tool for you and your users

Learn more
{ > Config Sync logo

Config Sync
{

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

Learn more
{ > Content Versioning logo

Content Versioning

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

Learn more
{ > Documentation logo

Documentation
Made by Strapi {

Create an OpenAPI Document and visualize your API with SWAGGER UI

Learn more
{ /> Installed @@ -1381,14 +1415,14 @@ describe('Marketplace page', () => {
{ > Transformer logo

Transformer

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

Learn more