From 48df0cbaea398f380facef84dd80fb9dc88e92a7 Mon Sep 17 00:00:00 2001
From: Clare Ming <cming@wikimedia.org>
Date: Fri, 13 Aug 2021 13:42:27 -0600
Subject: [PATCH] Fix popup preview regressions, add story

- Fix margin for page preview flipped-x.
- Fix margins for generic previews.
- Add error story to storybook.
- Fix minor typo, pageIds in MODELS.

Bug: T281170
Change-Id: I5b96719c1d08518cbd977590171974796fd10986
---
 .storybook/mocks/models.js          | 14 +++++++++++---
 .storybook/stories/index.stories.js | 11 +++++++++++
 src/ui/templates/popup/popup.less   |  5 +++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/.storybook/mocks/models.js b/.storybook/mocks/models.js
index e24b094a2..13e754c8f 100644
--- a/.storybook/mocks/models.js
+++ b/.storybook/mocks/models.js
@@ -2,7 +2,7 @@
 * Various Page Preview models used for different configurations.
 * PreviewModel is defined in 'src/preview/model.js`.
 *
-* In produciton, thumbnail size is determined by the gateway before fetching
+* In production, thumbnail size is determined by the gateway before fetching
 * from the server. Here, thumbnails are defined statically so they
 * must be scaled down for low-dpi display, using `helpers/scaleDownThumbnails.js`.
 *
@@ -176,7 +176,7 @@ MODELS.THUMBNAIL_SMALL_TALL = {
 		width: 300,
 		height: 1000
 	},
-	pageId: 8246305
+	pageId: 18842359
 };
 MODELS.THUMBNAIL_SMALL_SHORT = {
 	title: "Full Moon",
@@ -191,7 +191,7 @@ MODELS.THUMBNAIL_SMALL_SHORT = {
 		width: 300,
 		height: 200
 	},
-	pageId: 2486305
+	pageId: 11432
 };
 MODELS.LONG_WORD_1 = {
 	title: "Pneumonoultramicroscopicsilicovolcanoconiosis",
@@ -558,4 +558,12 @@ MODELS.TYPE_REFERENCE_GENERIC_COLLAPSIBLE = {
 	extract: `<p>This is a reference.</p><div class="mw-collapsible"></div>`
 };
 
+MODELS.ERROR = {
+	title: "Error Preview",
+	url: "Error Preview",
+	languageCode: "en",
+	languageDirection: "ltr",
+	type: 'generic',
+};
+
 export default MODELS;
diff --git a/.storybook/stories/index.stories.js b/.storybook/stories/index.stories.js
index 77849ce1d..7b66c855f 100644
--- a/.storybook/stories/index.stories.js
+++ b/.storybook/stories/index.stories.js
@@ -306,6 +306,17 @@ storiesOf( 'Non-latin', module )
 	`;
 } )
 
+storiesOf( 'Error', module )
+.add( 'generic', () => {
+	modifyStorybookHead( MODELS.ERROR.languageCode, MODELS.ERROR.languageDirection )
+	return `
+		${createPopup( MODELS.ERROR, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.ERROR, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.ERROR, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.ERROR, { flippedX: true, flippedY: true } )}
+	`;
+} );
+
 storiesOf( 'assets', module )
 .add( 'SVG Masks', () => {
 	const parser = new DOMParser(),
diff --git a/src/ui/templates/popup/popup.less b/src/ui/templates/popup/popup.less
index a36cb6a2b..46b4b0d09 100644
--- a/src/ui/templates/popup/popup.less
+++ b/src/ui/templates/popup/popup.less
@@ -294,6 +294,10 @@
 			z-index: @zIndexThumbnailMask;
 			right: 0;
 		}
+
+		.mwe-popups-extract {
+			margin-top: 8px;
+		}
 	}
 
 	&.flipped-x-y {
@@ -495,6 +499,7 @@
 			padding-top: var( --pointer-height );
 		}
 
+		&.mwe-popups-type-generic:not( .flipped-y ):not( .flipped-x-y ),
 		&.mwe-popups-type-disambiguation:not( .flipped-y ):not( .flipped-x-y ) {
 			.mwe-popups-container {
 				padding-top: var( --pointer-height );