diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js index 051f157f5d..2ea76218c2 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js @@ -1,4 +1,5 @@ import React, { useState, useRef } from 'react'; +import styled from 'styled-components'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { Box } from '@strapi/design-system/Box'; @@ -18,6 +19,10 @@ const FilterTag = ({ name, handleRemove }) => { ); }; +const ButtonToggle = styled(Button)` + height: ${({ theme }) => theme.sizes.input.S}; +`; + const NpmPackagesFilters = ({ possibleCollections, possibleCategories, @@ -35,7 +40,7 @@ const NpmPackagesFilters = ({ return ( <> - + {isVisible && ( theme.fontWeights.semiBold}; -const SortToggleButton = styled(Button)` - svg { - width: ${({ theme }) => theme.spaces[2]}; - height: ${({ theme }) => theme.spaces[1]}; - } - - svg > path { - fill: ${({ theme }) => theme.colors.neutral500}; + span { + font-size: ${({ theme }) => theme.fontSizes[1]}; } `; const SortSelect = ({ sortQuery, setQuery, setTabQuery, npmPackageType }) => { const { formatMessage } = useIntl(); - const buttonRef = useRef(); - const [isVisible, setIsVisible] = useState(false); const sortTypes = { 'name:asc': { - id: 'admin.pages.MarketPlacePage.sort.alphabetical', - defaultMessage: 'Alphabetical order', + selected: { + id: 'admin.pages.MarketPlacePage.sort.alphabetical.selected', + defaultMessage: 'Sort by alphabetical order', + }, + option: { + id: 'admin.pages.MarketPlacePage.sort.alphabetical', + defaultMessage: 'Alphabetical order', + }, }, 'submissionDate:desc': { - id: 'admin.pages.MarketPlacePage.sort.newest', - defaultMessage: 'Newest', + selected: { + id: 'admin.pages.MarketPlacePage.sort.newest.selected', + defaultMessage: 'Sort by newest', + }, + option: { + id: 'admin.pages.MarketPlacePage.sort.newest', + defaultMessage: 'Newest', + }, }, }; - const handleToggle = () => setIsVisible((prev) => !prev); - - const handleBlur = (e) => { - e.preventDefault(); - - if (!e.currentTarget.contains(e.relatedTarget)) { - setIsVisible(false); - } - }; - - const handleSortClick = (sortName) => { - setQuery({ sort: sortName }); - setTabQuery((prev) => ({ - ...prev, - [npmPackageType]: { ...prev[npmPackageType], sort: sortName, npmPackageType }, - })); - handleToggle(); - }; - - const computeSortMessage = (sortName) => { - const defaultSortLabel = formatMessage({ - id: 'admin.pages.MarketPlacePage.sort.sortBy', - defaultMessage: 'Sort by', - }); - - if (sortName) { - const sortInfo = sortTypes[sortName]; - const message = formatMessage({ - id: sortInfo.id, - defaultMessage: sortInfo.defaultMessage, - }); - - return `${defaultSortLabel}: ${message}`; - } - - return defaultSortLabel; - }; - return ( - <> - } + + + ); }; -SortSelect.defaultProps = { - sortQuery: undefined, -}; - SortSelect.propTypes = { + sortQuery: PropTypes.string.isRequired, setQuery: PropTypes.func.isRequired, setTabQuery: PropTypes.func.isRequired, - sortQuery: PropTypes.string, npmPackageType: PropTypes.string.isRequired, }; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 460c4a75c5..45314ac3db 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -183,7 +183,7 @@ const MarketPlacePage = () => { } else { setQuery( { - npmPackageType: null, + npmPackageType: selectedTab, // Clear filters collections: [], categories: [], @@ -194,7 +194,6 @@ const MarketPlacePage = () => { } }; - console.log(tabQuery); // Check if plugins and providers are installed already const installedPackageNames = Object.keys(dependencies); @@ -266,7 +265,7 @@ const MarketPlacePage = () => { g, -.c38 svg path { +.c52 svg > g, +.c52 svg path { fill: #ffffff; } -.c38[aria-disabled='true'] { +.c52[aria-disabled='true'] { pointer-events: none; } -.c38:after { +.c52:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -101,11 +97,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` border: 2px solid transparent; } -.c38:focus-visible { +.c52:focus-visible { outline: none; } -.c38:focus-visible:after { +.c52:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -116,11 +112,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` border: 2px solid #4945ff; } -.c47 { +.c57 { height: 100%; } -.c39 { +.c53 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -132,7 +128,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` background: #ffffff; } -.c39 .c43 { +.c53 .c55 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -143,56 +139,56 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` align-items: center; } -.c39 .c41 { +.c53 .c58 { color: #ffffff; } -.c39[aria-disabled='true'] { +.c53[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c39[aria-disabled='true'] .c41 { +.c53[aria-disabled='true'] .c58 { color: #666687; } -.c39[aria-disabled='true'] svg > g, -.c39[aria-disabled='true'] svg path { +.c53[aria-disabled='true'] svg > g, +.c53[aria-disabled='true'] svg path { fill: #666687; } -.c39[aria-disabled='true']:active { +.c53[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c39[aria-disabled='true']:active .c41 { +.c53[aria-disabled='true']:active .c58 { color: #666687; } -.c39[aria-disabled='true']:active svg > g, -.c39[aria-disabled='true']:active svg path { +.c53[aria-disabled='true']:active svg > g, +.c53[aria-disabled='true']:active svg path { fill: #666687; } -.c39:hover { +.c53:hover { background-color: #f6f6f9; } -.c39:active { +.c53:active { background-color: #eaeaef; } -.c39 .c41 { +.c53 .c58 { color: #32324d; } -.c39 svg > g, -.c39 svg path { +.c53 svg > g, +.c53 svg path { fill: #32324d; } -.c63 { +.c75 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -204,7 +200,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` background: #f0f0ff; } -.c63 .c43 { +.c75 .c55 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -215,62 +211,62 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` align-items: center; } -.c63 .c41 { +.c75 .c58 { color: #ffffff; } -.c63[aria-disabled='true'] { +.c75[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c63[aria-disabled='true'] .c41 { +.c75[aria-disabled='true'] .c58 { color: #666687; } -.c63[aria-disabled='true'] svg > g, -.c63[aria-disabled='true'] svg path { +.c75[aria-disabled='true'] svg > g, +.c75[aria-disabled='true'] svg path { fill: #666687; } -.c63[aria-disabled='true']:active { +.c75[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c63[aria-disabled='true']:active .c41 { +.c75[aria-disabled='true']:active .c58 { color: #666687; } -.c63[aria-disabled='true']:active svg > g, -.c63[aria-disabled='true']:active svg path { +.c75[aria-disabled='true']:active svg > g, +.c75[aria-disabled='true']:active svg path { fill: #666687; } -.c63:hover { +.c75:hover { background-color: #ffffff; } -.c63:active { +.c75:active { background-color: #ffffff; border: 1px solid #4945ff; } -.c63:active .c41 { +.c75:active .c58 { color: #4945ff; } -.c63:active svg > g, -.c63:active svg path { +.c75:active svg > g, +.c75:active svg path { fill: #4945ff; } -.c63 .c41 { +.c75 .c58 { color: #271fe0; } -.c63 svg > g, -.c63 svg path { +.c75 svg > g, +.c75 svg path { fill: #271fe0; } @@ -278,7 +274,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` padding-bottom: 16px; } -.c50 { +.c62 { background: #ffffff; padding-top: 16px; padding-right: 16px; @@ -289,14 +285,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` height: 100%; } -.c71 { +.c83 { background: #ffffff; padding: 24px; border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c72 { +.c84 { background: #f6ecfc; padding: 12px; border-radius: 4px; @@ -317,7 +313,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` gap: 8px; } -.c51 { +.c63 { -webkit-align-items: normal; -webkit-box-align: normal; -ms-flex-align: normal; @@ -335,7 +331,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` justify-content: space-between; } -.c55 { +.c67 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -349,30 +345,30 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` flex-direction: row; } -.c64 { +.c76 { color: #328048; margin-left: 8px; } -.c68 { +.c80 { color: #328048; margin-right: 8px; width: 12; height: 12; } -.c78 { +.c90 { color: #666687; margin-left: 8px; width: 12px; height: 12px; } -.c65 path { +.c77 path { fill: #328048; } -.c79 path { +.c91 path { fill: #666687; } @@ -525,25 +521,35 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` box-shadow: #4945ff 0px 0px 0px 2px; } -.c59 { - padding-top: 24px; +.c43 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; } -.c60 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; +.c43:focus { + outline: none; } -.c74 { +.c43[aria-disabled='true'] { + cursor: not-allowed; +} + +.c46 { + padding-right: 16px; + padding-left: 16px; +} + +.c48 { + padding-left: 12px; +} + +.c39 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -557,41 +563,174 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` flex-direction: column; } -.c75 > * { +.c41 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c44 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c47 { + color: #32324d; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.875rem; + line-height: 1.43; +} + +.c40 > * { margin-top: 0; margin-bottom: 0; } -.c61 > * { +.c42 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + min-height: 2rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c42:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c49 { + background: transparent; + border: none; + position: relative; + z-index: 1; +} + +.c49 svg { + height: 0.6875rem; + width: 0.6875rem; +} + +.c49 svg path { + fill: #666687; +} + +.c50 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; +} + +.c50 svg { + width: 0.375rem; +} + +.c45 { + width: 100%; +} + +.c71 { + padding-top: 24px; +} + +.c72 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c86 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c87 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c73 > * { margin-left: 0; margin-right: 0; } -.c61 > * + * { +.c73 > * + * { margin-left: 8px; } -.c54 { +.c66 { color: #32324d; font-weight: 500; font-size: 1rem; line-height: 1.25; } -.c57 { +.c69 { color: #666687; font-size: 0.875rem; line-height: 1.43; } -.c69 { +.c81 { font-weight: 600; color: #328048; font-size: 0.875rem; line-height: 1.43; } -.c76 { +.c88 { font-weight: 500; color: #32324d; font-size: 0.75rem; @@ -609,7 +748,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` padding-right: 8px; } -.c62 { +.c74 { padding-left: 8px; } @@ -750,16 +889,16 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` fill: #32324d; } -.c73 { +.c85 { margin-right: 24px; } -.c73 svg { +.c85 svg { width: 2rem; height: 2rem; } -.c77 { +.c89 { word-break: break-all; } @@ -870,41 +1009,44 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` cursor: not-allowed; } -.c48 { +.c60 { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } -.c49 { +.c61 { grid-column: span 4; max-width: 100%; } -.c58 { +.c70 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } -.c40 svg { - width: 8px; - height: 4px; +.c38 { + font-weight: 500; } -.c40 svg > path { - fill: #8e8ea9; +.c38 span { + font-size: 0.75rem; +} + +.c54 { + height: 2rem; } @media (max-width:68.75rem) { - .c49 { + .c61 { grid-column: span 6; } } @media (max-width:34.375rem) { - .c49 { + .c61 { grid-column: span 12; } } @@ -1104,52 +1246,83 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
-
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +