Handle clipped blockquote by adding blockquote fade out effect

- Added styling to apply a psuedoelement to the blockquote
- Added a storybook story to cover blockquotes

Bug: T213107
Change-Id: I09706137fec00b3bff649180a559f4f663b71d90

.storybook/mocks/models.js

@@ -193,6 +193,21 @@ MODELS.THUMBNAIL_SMALL_SHORT = {
 	},
 	pageId: 11432
 };
+MODELS.THUMBNAIL_BLOCKQUOTE = {
+	title: "List of photographs of Abraham Lincoln",
+	url: "List of photographs of Abraham Lincoln",
+	languageCode: "en",
+	languageDirection: "ltr",
+	extract:
+		`<p>There are 130 known photographs of Abraham Lincoln.</p><blockquote class="templatequote "><p>Lincoln's features were the despair of every artist who undertook his portrait. The writer saw nearly a dozen, one after another, soon after the first nomination to the presidency, attempt the task. They put into their pictures the large, rugged features, and strong, prominent lines; they made measurements to obtain exact proportions; they "petrified" some single look, but the picture remained hard and cold. Even before these paintings were finished it was plain to see that they were unsatisfactory to the artists themselves, and much more so to the intimate friends of the man this was not he who smiled, spoke, laughed, charmed. The picture was to the man as the grain of sand to the mountain, as the dead to the living. Graphic art was powerless before a face that moved through a thousand delicate gradations of line and contour, light and shade, sparkle of the eye and curve of the lip, in the long gamut of expression from grave to gay, and back again from the rollicking jollity of laughter to that serious, far away look that with prophetic intuitions beheld the awful panorama of war, and heard the cry of oppression and suffering. There are many pictures of Lincoln; there is no portrait of him.</p></blockquote>`,
+	type: "page",
+	thumbnail: {
+		source: 'img/640px-Abraham_Lincoln_by_Nicholas_Shepherd,_1846-crop.jpg',
+		width: 506,
+		height: 640
+	},
+	pageId: 38746858
+};
 MODELS.LONG_WORD_1 = {
 	title: "Pneumonoultramicroscopicsilicovolcanoconiosis",
 	url: "Pneumonoultramicroscopicsilicovolcanoconiosis",

.storybook/stories/index.stories.js

@@ -199,6 +199,15 @@ storiesOf( 'Thumbnails', module )
 	${createPopup( MODELS.THUMBNAIL_SMALL_SHORT, { flippedX: true, flippedY: true } )}
 `;
 } )
+.add( 'landscape - Blockquote', () => {
+	modifyStorybookHead( MODELS.THUMBNAIL_BLOCKQUOTE.languageCode, MODELS.THUMBNAIL_BLOCKQUOTE.languageDirection )
+	return `
+	${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: false, flippedY: false } )}
+	${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: true, flippedY: false } )}
+	${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: false, flippedY: true } )}
+	${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: true, flippedY: true } )}
+`;
+} )
 
 storiesOf( 'Text', module )
 .add( 'Short & long', () => {

src/ui/templates/popup/popup.less

@@ -83,7 +83,8 @@
 			text-decoration: none;
 		}
 
-		&:after {
+		&:after,
+		blockquote:after {
 			content: ' ';
 			position: absolute;
 			bottom: 0;
@@ -112,6 +113,17 @@
 			/* @noflip */
 			background-image: linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
 		}
+
+		blockquote:after {
+			width: 100%;
+			height: @lineHeight + 5px;
+			/* @noflip */
+			bottom: 0;
+			/* @noflip */
+			background-image: -webkit-linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 75% );
+			/* @noflip */
+			background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 75% );
+		}
 		/* stylelint-enable function-linear-gradient-no-nonstandard-direction */
 
 		// Make the text fit in exactly as many lines as we want.