feat: public API, SEO and existing surfaces

web/visual/states.ts

@@ -5,6 +5,8 @@ import { approvedExceptions } from './approvedExceptions'
 import { articleListStates } from './articleListStates'
 import { conflictsMovesStates, editorLocalizationStates } from './editorLocalizationStates'
 import { localizationStates } from './localizationStates'
+import { metadataApiStates } from './localizationMetadataStates'
+import { surfacesStates } from './localizationSurfacesStates'
 import { newArticleLocalizationStates } from './newArticleLocalizationStates'
 import { rolesStates } from './rolesStates'
 
@@ -1842,6 +1844,52 @@ function mediaUsageApi(overrides: Record<string, ApiMock> = {}) {
 	})
 }
 
+const mediaLocalizedUsage = [
+	{
+		type: 'article',
+		id: 10,
+		title: 'How we price a bathroom renovation',
+		published: true,
+		fields: ['cover'],
+		story_id: 5,
+		lang: 'en',
+	},
+	{
+		type: 'article',
+		id: 11,
+		title: 'So kalkulieren wir eine Badsanierung',
+		published: true,
+		fields: ['cover'],
+		story_id: 5,
+		lang: 'de',
+	},
+	{
+		type: 'article',
+		id: 12,
+		title: 'Comment nous chiffrons une rénovation de salle de bain',
+		published: false,
+		fields: ['body', 'cover'],
+		story_id: 5,
+		lang: 'fr',
+	},
+	{
+		type: 'article',
+		id: 20,
+		title: 'A guide to lime plaster',
+		published: true,
+		fields: ['body'],
+		story_id: 6,
+		lang: 'en',
+	},
+]
+
+const mediaSurfaceStates: Record<string, VisualState> = {
+	'loc.l12.media': mediaState(
+		mediaApi({ 'GET /v1/media/1/usage': { status: 200, body: mediaLocalizedUsage } }),
+		(page) => openMediaPanel(page, 1),
+	),
+}
+
 const mediaDuplicateIds = [12, 5, 6]
 const mediaDuplicateGroups = [mediaDuplicateIds, [7, 9]]
 
@@ -10352,4 +10400,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 	'localization-editor': editorLocalizationStates,
 	'localization-conflicts-moves': conflictsMovesStates,
 	'localization-new-article': newArticleLocalizationStates,
+	'localization-metadata-api': metadataApiStates,
+	'localization-surfaces': { ...surfacesStates, ...mediaSurfaceStates },
 }