ux(datasheet): soften the purchase link — "Buy" becomes a localized "Product page"

The word "Buy" on a solid button read as an ad inside a work dialog. The
link is really a pointer to the part's product page, so it now says that —
localized in all nine languages — with an external-link icon instead of a
shopping cart. Same URL, same placement, in both the part inspector and the
picker hover card.
This commit is contained in:
David Montero Crespo 2026-08-07 07:13:05 +02:00
parent 16c3089c5f
commit b1c9c41849
11 changed files with 28 additions and 17 deletions

View File

@ -20,6 +20,7 @@
import React from 'react'; import React from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import type { PropertyDescriptor } from '../types/component-metadata'; import type { PropertyDescriptor } from '../types/component-metadata';
@ -114,6 +115,7 @@ export const ComponentInfoBody: React.FC<{
/** false = doc/description + tags + Buy only (the dialog has its own props UI). */ /** false = doc/description + tags + Buy only (the dialog has its own props UI). */
showProps?: boolean; showProps?: boolean;
}> = ({ data, showProps = true }) => { }> = ({ data, showProps = true }) => {
const { t: translate } = useTranslation();
const doc = useComponentDoc(data.id); const doc = useComponentDoc(data.id);
const visibleProps = data.properties.filter((p) => !HIDDEN_PROPS.has(p.name)); const visibleProps = data.properties.filter((p) => !HIDDEN_PROPS.has(p.name));
@ -178,11 +180,11 @@ export const ComponentInfoBody: React.FC<{
strokeLinejoin="round" strokeLinejoin="round"
aria-hidden="true" aria-hidden="true"
> >
<circle cx="9" cy="21" r="1" /> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<circle cx="20" cy="21" r="1" /> <polyline points="15 3 21 3 21 9" />
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /> <line x1="10" y1="14" x2="21" y2="3" />
</svg> </svg>
Buy {translate('editor.inspector.productPage')}
</a> </a>
</div> </div>
)} )}

View File

@ -788,11 +788,11 @@ export const PartInspectorDialog: React.FC<PartInspectorDialogProps> = ({
strokeLinejoin="round" strokeLinejoin="round"
aria-hidden="true" aria-hidden="true"
> >
<circle cx="9" cy="21" r="1" /> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<circle cx="20" cy="21" r="1" /> <polyline points="15 3 21 3 21 9" />
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /> <line x1="10" y1="14" x2="21" y2="3" />
</svg> </svg>
Buy {t('editor.inspector.productPage')}
</a> </a>
</div> </div>
)} )}

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "Eigenschaften", "propertiesTab": "Eigenschaften",
"datasheetTab": "Datenblatt", "datasheetTab": "Datenblatt",
"examplesTitle": "Beispielprojekte" "examplesTitle": "Beispielprojekte",
"productPage": "Produktseite"
} }
}, },
"about": { "about": {

View File

@ -394,7 +394,8 @@
"inspector": { "inspector": {
"propertiesTab": "Properties", "propertiesTab": "Properties",
"datasheetTab": "Datasheet", "datasheetTab": "Datasheet",
"examplesTitle": "Example projects" "examplesTitle": "Example projects",
"productPage": "Product page"
} }
}, },
"about": { "about": {

View File

@ -394,7 +394,8 @@
"inspector": { "inspector": {
"propertiesTab": "Propiedades", "propertiesTab": "Propiedades",
"datasheetTab": "Ficha técnica", "datasheetTab": "Ficha técnica",
"examplesTitle": "Proyectos de ejemplo" "examplesTitle": "Proyectos de ejemplo",
"productPage": "Ver producto"
} }
}, },
"about": { "about": {

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "Propriétés", "propertiesTab": "Propriétés",
"datasheetTab": "Fiche technique", "datasheetTab": "Fiche technique",
"examplesTitle": "Projets d’exemple" "examplesTitle": "Projets d’exemple",
"productPage": "Page produit"
} }
}, },
"about": { "about": {

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "Proprietà", "propertiesTab": "Proprietà",
"datasheetTab": "Scheda tecnica", "datasheetTab": "Scheda tecnica",
"examplesTitle": "Progetti di esempio" "examplesTitle": "Progetti di esempio",
"productPage": "Pagina prodotto"
} }
}, },
"about": { "about": {

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "プロパティ", "propertiesTab": "プロパティ",
"datasheetTab": "データシート", "datasheetTab": "データシート",
"examplesTitle": "サンプルプロジェクト" "examplesTitle": "サンプルプロジェクト",
"productPage": "製品ページ"
} }
}, },
"about": { "about": {

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "Propriedades", "propertiesTab": "Propriedades",
"datasheetTab": "Ficha técnica", "datasheetTab": "Ficha técnica",
"examplesTitle": "Projetos de exemplo" "examplesTitle": "Projetos de exemplo",
"productPage": "Página do produto"
} }
}, },
"about": { "about": {

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "Свойства", "propertiesTab": "Свойства",
"datasheetTab": "Спецификация", "datasheetTab": "Спецификация",
"examplesTitle": "Примеры проектов" "examplesTitle": "Примеры проектов",
"productPage": "Страница товара"
} }
}, },
"about": { "about": {

View File

@ -392,7 +392,8 @@
"inspector": { "inspector": {
"propertiesTab": "属性", "propertiesTab": "属性",
"datasheetTab": "数据手册", "datasheetTab": "数据手册",
"examplesTitle": "示例项目" "examplesTitle": "示例项目",
"productPage": "产品页面"
} }
}, },
"about": { "about": {