[Storybook] Removing custom CSS grid and addons from Storybook

Removes the following add-ons and their configuration from Storybook: - addon-cssresources - addon-knobs - addon-options This will hopefully ease the upgrade to Storybook 6. Removes the custom CSS grid used to position previews within the Storybook instance in favour of a flexbox layout. This simplifies the creation of previews for Storybook. This change requires us to to add relative positioning to `.mwe-popups-container` so that the footer is correctly positioned in the popup without absolute positioning. This positioning has been moved to be Storybook specific to avoid an regressions in production. Bug: T271763 Change-Id: I9a97291cb4bca7d4cc60dad232a60f6f92c0adea
2024-09-23 10:21:11 +00:00 · 2021-06-25 11:46:29 +02:00 · 2021-06-25 11:46:29 +02:00 · 1e04551b1c
parent 325789197b
commit 1e04551b1c
9 changed files with 95 additions and 718 deletions
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@ -1,6 +0,0 @@
-/**
- * This file is required to register add-ons with Storybook.
- */
-import '@storybook/addon-options/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-cssresources/register';
--- a/.storybook/config.js
+++ b/.storybook/config.js
@ -1,28 +1,10 @@
-import { configure, addDecorator, addParameters } from '@storybook/html';
-import { withCssResources } from '@storybook/addon-cssresources';
+import { configure, addParameters } from '@storybook/html';
 import jquery from 'jquery';
 import mockMediaWiki from '../node_modules/@wikimedia/mw-node-qunit/src/mockMediaWiki.js';

 global.mw = mockMediaWiki();
 global.$ = jquery;

-/**
- * Storybook global configuration
- */
-
-addDecorator(
-  withCssResources({
-    cssresources: [{
-    name: `x-ray`,
-    code: `<style>
-    body * {
-	outline: 1px solid rgb(255, 0, 0);
-	background-color: rgba(255, 0, 0, 0.07);}
-    </style>`,
-    picked: false,
-  }],
-})
-);

 // Option defaults:
 addParameters( {
@ -36,6 +18,7 @@ addParameters( {
    showSearchBox: false,
    panelPosition: 'right',
    isToolshown: true,
+    showPanel: false,
    /**
     * sorts stories
     * @type {Boolean}
@ -64,11 +47,6 @@ addParameters( {
     * @type {Boolean}
     */
    sidebarAnimations: true,
-    /**
-     * id to select an addon panel
-     * @type {String}
-     */
-    selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
    /**
     * enable/disable shortcuts
     * @type {Boolean}
--- a/.storybook/helpers/createPopup.js
+++ b/.storybook/helpers/createPopup.js
@ -19,11 +19,7 @@ function createPopup( model, layout ) {

 	const preview = createPreviewWithType( model );

-	Object.assign( layout, { dir: model.languageDirection } );
-	layout.offset = layout.flippedY ? {
-		left: layout.offset.left,
-		top: layout.offset.top + layout.flipOffset
-	} : layout.offset;
+	Object.assign( layout, { dir: model.languageDirection, offset: { left: 0, top: 0 } } );

 	layoutPreview(
 		preview,
--- a/.storybook/helpers/grid.js
+++ b/.storybook/helpers/grid.js
@ -1,17 +0,0 @@
-/**
- * Grid helper for absolutely positioning popups on page.
- */
-const grid = {
-	landscape: {
-		row: ( x ) => 50 + ( ( x - 1 ) * 460 ),
-		col: ( x ) => 50 + ( ( x - 1 ) * 500 ),
-		flipOffset: 400
-	},
-	portrait: {
-		row: ( x ) => 50 + ( ( x - 1 ) * 450 ),
-		col: ( x ) => 50 + ( ( x - 1 ) * 400 ),
-		flipOffset: 400
-	},
-}
-
-export default grid;
--- a/.storybook/mocks/custom.less
+++ b/.storybook/mocks/custom.less
@ -5,10 +5,20 @@
@import './mediawiki.ui/components/icons.less';
@import './production-icons.less';

-html, body {
+html,
+body {
 	height: 100%;
 	font-family: sans-serif;
-    }
+}
+
+#root {
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 50px;
+	padding: 20px;
+}

 /**
 * Stopping the fade animation to avoid the animation appearing
@ -28,5 +38,21 @@ html, body {
 /* show popups by default */
 .mwe-popups {
 	display: block;
+	// overrides the popups default "position:absolute" styling
+	// so they align naturally within the flexbox parent.
+	position: static;
 }

+/**
+ * This rule, combined with the rule above, allows the footer
+ * to be positioned correctly without the absolute positioning
+ * that is overridden above.
+ * NOTE: This causes a slight discrepancy in the positioning of
+ * of the settings cog in Storybook when compared to production.
+ * This issue only occurs with previews that have the pokey positioned
+ * at the bottom.
+ */
+
+.mwe-popups-container {
+	position: relative;
+}
--- a/.storybook/stories/index.stories.js
+++ b/.storybook/stories/index.stories.js
@ -16,21 +16,16 @@ import * as cssjanus from 'cssjanus';
 */
 import { document } from 'global';
 import { storiesOf } from '@storybook/html';
-import { text, select, number, object } from '@storybook/addon-knobs';

 /**
 * Popups dependencies
 */
 import { createPointerMasks } from '../../src/ui/renderer.js';
-import { convertPageToModel } from '../../src/gateway/rest.js';
-import { parseHTMLResponse } from '../../src/gateway/restFormatters.js';
-import { default as CONSTANTS } from '../../src/constants';

 /**
 * Popups helpers
 */
 import MODELS from '../mocks/models';
-import grid from '../helpers/grid';
 import createPopup from '../helpers/createPopup';

 /**
@ -74,6 +69,7 @@ function modifyStorybookHead( lang, dir ) {

 	if ( document.documentElement.dir !== dir ) {
 		document.documentElement.dir = dir;
+		document.body.classList.add( dir )
 	}

 	if ( PopupsCSSElement.innerHTML !== popupsCSS[ dir ] ) {
@ -81,132 +77,71 @@ function modifyStorybookHead( lang, dir ) {
 	}
 }

-/**
- * Extends default model with params and adds knobs to it.
- * @param {object} model
- * @param {object} extendedModel
- *
- * @return {object}
- */
-function extendModelWithKnobs( DEFAULT_MODEL, extendedModel ) {
-	var  extendedModel = extendedModel || {},
-		thumbnail = extendedModel.thumbnail || DEFAULT_MODEL.thumbnail || undefined,
-		mergedModel;
-
-	mergedModel = Object.assign(
-		{},
-		DEFAULT_MODEL,
-		{
-			extract: text( "extract", extendedModel.extract || DEFAULT_MODEL.extract),
-			languageDirection: select(
-				'Language direction',
-				['ltr', 'rtl'],
-				extendedModel.languageDirection || DEFAULT_MODEL.languageDirection )
-		}
-	)
-
-	if ( thumbnail ) {
-		mergedModel.thumbnail =  {
-			source: text( 'thumbnail - URL', thumbnail.source ),
-			width: number( 'thumbnail - width', thumbnail.width),
-			height: number( 'thumbnail - height', thumbnail.height)
-		}
-	}
-	return mergedModel;
-}
-/**
- * If an API response is valid, returns a model based on it, if not, returns the initial model.
- * @param {object} ApiValue
- * @param {object} initModel
- * @param {number} thumbnailSize
- * @param {function} ApiParser
- *
- * @return {object} PagePreview model
- */
-function useApiOrInitModel( ApiValue, initModel, thumbnailSize, ApiParser ) {
-	if ( JSON.stringify( ApiValue ) !== '{}' ) {
-		return convertPageToModel( ApiValue, thumbnailSize, ApiParser );
-	}
-	return initModel;
-}
-
 /**
 * Global DOM manipulations
 */
 createPointerMasks( document.body );
 insertPopupsStyleElement();
 modifyStorybookHead( 'en', 'ltr' );
+
 /**
 * Stories
 */

 storiesOf( 'Thumbnails', module )
 .add( 'portrait', () => {
-	const
-		initModel = extendModelWithKnobs( MODELS.THUMBNAIL_PORTRAIT ),
-		apiResponse = object('API Response', {} ),
-		model = useApiOrInitModel( apiResponse, initModel, CONSTANTS.THUMBNAIL_SIZE, parseHTMLResponse );
-
-	object('Effective model', Object.assign( {}, model, { extract: model.extract[0].outerHTML } ) );
-
-	modifyStorybookHead( model.languageCode, model.languageDirection )
-	return `${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 1 ) }, flippedX: true, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
+	modifyStorybookHead( MODELS.THUMBNAIL_PORTRAIT.languageCode, MODELS.THUMBNAIL_PORTRAIT.languageDirection )
+	return `${createPopup( MODELS.THUMBNAIL_PORTRAIT, { flippedX: false, flippedY: false, flipOffset: 0 } )}
+		${createPopup( MODELS.THUMBNAIL_PORTRAIT, { flippedX: true, flippedY: false, flipOffset: 0 } )}
+		${createPopup( MODELS.THUMBNAIL_PORTRAIT, { flippedX: false, flippedY: true, flipOffset: 0 } )}
+		${createPopup( MODELS.THUMBNAIL_PORTRAIT, { flippedX: true, flippedY: true, flipOffset: 0 } )}
 	`;

-}, KNOBS_PARAM )
+} )
 .add( 'landscape', () => {
-	const
-		initModel = extendModelWithKnobs( MODELS.THUMBNAIL_LANDSCAPE ),
-		apiResponse = object('API Response', {} ),
-		model = useApiOrInitModel( apiResponse, initModel, CONSTANTS.THUMBNAIL_SIZE, parseHTMLResponse );

-	object('Effective model', Object.assign( {}, model, { extract: model.extract[0].outerHTML } ) );
-
-	modifyStorybookHead( model.languageCode, model.languageDirection )
-	return `${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 1 ) }, flippedX: true, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 2 ) }, flippedX: false, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
+	modifyStorybookHead( MODELS.THUMBNAIL_LANDSCAPE.languageCode, MODELS.THUMBNAIL_LANDSCAPE.languageDirection )
+	return `${createPopup( MODELS.THUMBNAIL_LANDSCAPE, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.THUMBNAIL_LANDSCAPE, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.THUMBNAIL_LANDSCAPE, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.THUMBNAIL_LANDSCAPE, { flippedX: true, flippedY: true } )}
 	`;

-}, KNOBS_PARAM )
+} )
 .add( 'portrait - SVG', () => {
 	modifyStorybookHead( MODELS.SVG_PORTRAIT.languageCode, MODELS.SVG_PORTRAIT.languageDirection )
 	return `
-		${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.SVG_PORTRAIT, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.SVG_PORTRAIT, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.SVG_PORTRAIT, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.SVG_PORTRAIT, { flippedX: true, flippedY: true } )}
 	`;
 } )
 .add( 'landscape - SVG', () => {
 	modifyStorybookHead( MODELS.SVG_LANDSCAPE.languageCode, MODELS.SVG_LANDSCAPE.languageDirection )
 	return `
-		${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
+		${createPopup( MODELS.SVG_LANDSCAPE, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.SVG_LANDSCAPE, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.SVG_LANDSCAPE, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.SVG_LANDSCAPE, { flippedX: true, flippedY: true } )}
 	`;
 } )
 .add( 'landscape - Thin thumbnail', () => {
 	modifyStorybookHead( MODELS.THIN_THUMBNAIL.languageCode, MODELS.THIN_THUMBNAIL.languageDirection )
 	return `
-		${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
+		${createPopup( MODELS.THIN_THUMBNAIL, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.THIN_THUMBNAIL, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.THIN_THUMBNAIL, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.THIN_THUMBNAIL, { flippedX: true, flippedY: true } )}
 	`;
 } )
 .add( 'portrait - Thumbnail divider', () => {
 	modifyStorybookHead( MODELS.THUMBNAIL_DIVIDER.languageCode, MODELS.THUMBNAIL_DIVIDER.languageDirection )
 	return `
-		${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.THUMBNAIL_DIVIDER, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.THUMBNAIL_DIVIDER, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.THUMBNAIL_DIVIDER, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.THUMBNAIL_DIVIDER, { flippedX: true, flippedY: true } )}
 	`;
 } )

@ -214,19 +149,19 @@ storiesOf( 'Text', module )
 .add( 'Short & long', () => {
 	modifyStorybookHead( MODELS.LONG_WORD_1.languageCode, MODELS.LONG_WORD_1.languageDirection )
 	return `
-		${createPopup( MODELS.LONG_WORD_1, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.LONG_WORD_2, { offset: { top: grid.portrait.row( 1.5), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.LONG_WORD_THUMB, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.LONG_WORD_1, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.LONG_WORD_2, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.LONG_WORD_THUMB, { flippedX: false, flippedY: false } )}
 	`;
 } )
 .add( 'Math & chemistry', () => {
 	modifyStorybookHead( MODELS.CHEM_2.languageCode, MODELS.CHEM_2.languageDirection )
 	return `
-		${createPopup( MODELS.CHEM_2, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.CHEM_3, { offset: { top: grid.portrait.row( 2.4 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.MATH_1, { offset: { top: grid.landscape.row( 1.8 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.CHEM_1, { offset: { top: grid.portrait.row( 1.55 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.MATH_2, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.CHEM_2, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.CHEM_3, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.MATH_1, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.CHEM_1, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.MATH_2, { flippedX: false, flippedY: false } )}
 	`;
 } );

@ -234,10 +169,10 @@ storiesOf( 'Disambiguation', module )
 .add( 'standard', () => {
 	modifyStorybookHead( MODELS.DISAMBIGUATION.languageCode, MODELS.DISAMBIGUATION.languageDirection )
 	return `
-		${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1.7 ) }, flippedX: true, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1.7 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1.7 ), left: grid.landscape.col( 1.7 ) }, flippedX: true, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
+		${createPopup( MODELS.DISAMBIGUATION, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.DISAMBIGUATION, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.DISAMBIGUATION, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.DISAMBIGUATION, { flippedX: true, flippedY: true } )}
 	`;
 } )

@ -245,45 +180,45 @@ storiesOf( 'RTL', module )
 .add( 'portrait', () => {
 	modifyStorybookHead( MODELS.HE_WIKI.languageCode, MODELS.HE_WIKI.languageDirection )
 	return `
-		${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 3) }, flippedX: false, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.HE_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.HE_WIKI, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.HE_WIKI, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.HE_WIKI, { flippedX: true, flippedY: true } )}

-		${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.AR_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.AR_WIKI, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.AR_WIKI, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.AR_WIKI, { flippedX: true, flippedY: true } )}
 	`;
 } )
 .add( 'landscape', () => {
 	modifyStorybookHead( MODELS.HE_WIKI2.languageCode, MODELS.HE_WIKI2.languageDirection )
 	return `
-		${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
+		${createPopup( MODELS.HE_WIKI2, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.HE_WIKI2, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.HE_WIKI2, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.HE_WIKI2, { flippedX: true, flippedY: true } )}
 	`;
 } )
 .add( 'landscape - thin thumbnail', () => {
 	modifyStorybookHead( MODELS.AR_WIKI2.languageCode, MODELS.AR_WIKI2.languageDirection )
 	return `
-		${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
-		${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true, flipOffset: grid.landscape.flipOffset } )}
+		${createPopup( MODELS.AR_WIKI2, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.AR_WIKI2, { flippedX: true, flippedY: false } )}
+		${createPopup( MODELS.AR_WIKI2, { flippedX: false, flippedY: true } )}
+		${createPopup( MODELS.AR_WIKI2, { flippedX: true, flippedY: true } )}
 	`;
 } )
 storiesOf( 'Non-latin', module )
 .add( 'thumbnails', () => {
 	modifyStorybookHead( MODELS.RU_WIKI.languageCode, MODELS.RU_WIKI.languageDirection )
 	return `
-		${createPopup( MODELS.RU_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.EL_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.HZ_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.KO_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.JA_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
-		${createPopup( MODELS.TH_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: false, flipOffset: grid.portrait.flipOffset } )}
+		${createPopup( MODELS.RU_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.EL_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.HZ_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.KO_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.JA_WIKI, { flippedX: false, flippedY: false } )}
+		${createPopup( MODELS.TH_WIKI, { flippedX: false, flippedY: false } )}
 	`;
 } )

--- a/package-lock.json
+++ b/package-lock.json
@ -1256,12 +1256,6 @@
 				"warning": "^4.0.3"
 			}
 		},
-		"@icons/material": {
-			"version": "0.2.4",
-			"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
-			"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
-			"dev": true
-		},
 		"@istanbuljs/load-nyc-config": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@ -1502,265 +1496,6 @@
 			"integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
 			"dev": true
 		},
-		"@storybook/addon-cssresources": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-cssresources/-/addon-cssresources-5.2.5.tgz",
-			"integrity": "sha512-8caKYnASgwwTEuGU5Sw4rWEFrWoIUf84n/HCib7Debg7w7mQSVWlQV9Bh8iEHDO9H5tSVzi1+RksuS7hjQuGHQ==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "5.2.5",
-				"@storybook/api": "5.2.5",
-				"@storybook/components": "5.2.5",
-				"@storybook/core-events": "5.2.5",
-				"core-js": "^3.0.1",
-				"global": "^4.3.2",
-				"react": "^16.8.3"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/addon-knobs": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.5.tgz",
-			"integrity": "sha512-jr8HvtGciYaJqWgsl8CVYemcvC0Apw9YaLCV/ez8wmB4im94lmotE4llE+ZgpyIn6U6ikUYjQEeNzUMvEn25Xg==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "5.2.5",
-				"@storybook/api": "5.2.5",
-				"@storybook/client-api": "5.2.5",
-				"@storybook/components": "5.2.5",
-				"@storybook/core-events": "5.2.5",
-				"@storybook/theming": "5.2.5",
-				"@types/react-color": "^3.0.1",
-				"copy-to-clipboard": "^3.0.8",
-				"core-js": "^3.0.1",
-				"escape-html": "^1.0.3",
-				"fast-deep-equal": "^2.0.1",
-				"global": "^4.3.2",
-				"lodash": "^4.17.15",
-				"prop-types": "^15.7.2",
-				"qs": "^6.6.0",
-				"react-color": "^2.17.0",
-				"react-lifecycles-compat": "^3.0.4",
-				"react-select": "^3.0.0"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/addon-options": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-options/-/addon-options-5.2.5.tgz",
-			"integrity": "sha512-uDQmsmI/GcxWF2NecZdBB85g2P3alDqdIauaiFobUGVhYlBKVDyF59RXTh9Xqy0rTaTiiTkWO9Z0UiBywwp6hw==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "5.2.5",
-				"core-js": "^3.0.1",
-				"util-deprecate": "^1.0.2"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/addons": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.2.5.tgz",
-			"integrity": "sha512-CvMj7Bs3go9tv5rZuAvFwuwe8p/16LDCHS7+5nVFosvcL8nuN339V3rzakw8nLy/S6XKeZ1ACu4t3vYkreRE3w==",
-			"dev": true,
-			"requires": {
-				"@storybook/api": "5.2.5",
-				"@storybook/channels": "5.2.5",
-				"@storybook/client-logger": "5.2.5",
-				"@storybook/core-events": "5.2.5",
-				"core-js": "^3.0.1",
-				"global": "^4.3.2",
-				"util-deprecate": "^1.0.2"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/api": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-5.2.5.tgz",
-			"integrity": "sha512-JvLafqFVgA3dIWpLMoGNk4sRuogE5imhD6/g0d8DOwnCID9xowj5xIptSrCTKvGGGxuN3wWRGn6I2lEbY6969g==",
-			"dev": true,
-			"requires": {
-				"@storybook/channels": "5.2.5",
-				"@storybook/client-logger": "5.2.5",
-				"@storybook/core-events": "5.2.5",
-				"@storybook/router": "5.2.5",
-				"@storybook/theming": "5.2.5",
-				"core-js": "^3.0.1",
-				"fast-deep-equal": "^2.0.1",
-				"global": "^4.3.2",
-				"lodash": "^4.17.15",
-				"memoizerific": "^1.11.3",
-				"prop-types": "^15.6.2",
-				"react": "^16.8.3",
-				"semver": "^6.0.0",
-				"shallow-equal": "^1.1.0",
-				"store2": "^2.7.1",
-				"telejson": "^3.0.2",
-				"util-deprecate": "^1.0.2"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/channel-postmessage": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-5.2.5.tgz",
-			"integrity": "sha512-GoiC6dUM3YfNKpvj3syxQIQJLHBnH61CfLJzz4xygmn+3keHtjtz6yPHaU4+00MSSP2uDzqePkjgXx4DcLedHA==",
-			"dev": true,
-			"requires": {
-				"@storybook/channels": "5.2.5",
-				"@storybook/client-logger": "5.2.5",
-				"core-js": "^3.0.1",
-				"global": "^4.3.2",
-				"telejson": "^3.0.2"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/channels": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-5.2.5.tgz",
-			"integrity": "sha512-I+zB3ym5ozBcNBqyzZbvB6gRIG/ZKKkqy5k6LwKd5NMx7NU7zU74+LQUBBOcSIrigj8kCArZz7rlgb0tlSKXxQ==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.0.1"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/client-api": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-5.2.5.tgz",
-			"integrity": "sha512-n7CAZ3+DZ7EUdmXbq8mXRb+stOavC8GMw3CzjGSo8O6t4rFcMpZQAzjS0YRX1RG/CGFSv9d3R3TNvEBcBGTwRg==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "5.2.5",
-				"@storybook/channel-postmessage": "5.2.5",
-				"@storybook/channels": "5.2.5",
-				"@storybook/client-logger": "5.2.5",
-				"@storybook/core-events": "5.2.5",
-				"@storybook/router": "5.2.5",
-				"common-tags": "^1.8.0",
-				"core-js": "^3.0.1",
-				"eventemitter3": "^4.0.0",
-				"global": "^4.3.2",
-				"is-plain-object": "^3.0.0",
-				"lodash": "^4.17.15",
-				"memoizerific": "^1.11.3",
-				"qs": "^6.6.0",
-				"util-deprecate": "^1.0.2"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/client-logger": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-5.2.5.tgz",
-			"integrity": "sha512-6DyYUrMgAvF+th0foH7UNz+2JJpRdvNbpvYKtvi/+hlvRIaI6AqANgLkPUgMibaif5TLzjCr0bLdAYcjeJz03w==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.0.1"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/components": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-5.2.5.tgz",
-			"integrity": "sha512-6NVaBJm5wY53e9k+2ZiL2ABsHghE1ssQciLTG3jJPahnM6rfkM8ue66rhxhP88jE9isT48JgOZOJepEyxDz/fg==",
-			"dev": true,
-			"requires": {
-				"@storybook/client-logger": "5.2.5",
-				"@storybook/theming": "5.2.5",
-				"@types/react-syntax-highlighter": "10.1.0",
-				"@types/react-textarea-autosize": "^4.3.3",
-				"core-js": "^3.0.1",
-				"global": "^4.3.2",
-				"markdown-to-jsx": "^6.9.1",
-				"memoizerific": "^1.11.3",
-				"polished": "^3.3.1",
-				"popper.js": "^1.14.7",
-				"prop-types": "^15.7.2",
-				"react": "^16.8.3",
-				"react-dom": "^16.8.3",
-				"react-focus-lock": "^1.18.3",
-				"react-helmet-async": "^1.0.2",
-				"react-popper-tooltip": "^2.8.3",
-				"react-syntax-highlighter": "^8.0.1",
-				"react-textarea-autosize": "^7.1.0",
-				"simplebar-react": "^1.0.0-alpha.6"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
 		"@storybook/core": {
 			"version": "5.1.10",
 			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-5.1.10.tgz",
@ -2204,23 +1939,6 @@
 				}
 			}
 		},
-		"@storybook/core-events": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-5.2.5.tgz",
-			"integrity": "sha512-O5GM8XEBbYNbM6Z7a4H1bbnbO2cxQrXMhEwansC7a7YinQdkTPiuGxke3NiyK+7pLDh778kpQyjoCjXq6UfAoQ==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.0.1"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
 		"@storybook/html": {
 			"version": "5.1.10",
 			"resolved": "https://registry.npmjs.org/@storybook/html/-/html-5.1.10.tgz",
@ -2276,57 +1994,6 @@
 				}
 			}
 		},
-		"@storybook/router": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-5.2.5.tgz",
-			"integrity": "sha512-e6ElDAWSoEW1KSnsTbVwbpzaZ8CNWYw0Ok3b5AHfY2fuSH5L4l6s6k/bP7QSYqvWUeTvkFQYux7A2rOFCriAgA==",
-			"dev": true,
-			"requires": {
-				"@reach/router": "^1.2.1",
-				"@types/reach__router": "^1.2.3",
-				"core-js": "^3.0.1",
-				"global": "^4.3.2",
-				"lodash": "^4.17.15",
-				"memoizerific": "^1.11.3",
-				"qs": "^6.6.0"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
-		"@storybook/theming": {
-			"version": "5.2.5",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.2.5.tgz",
-			"integrity": "sha512-PGZNYrRgAhXFJKnktFpyyKlaDXEhtTi5XPq5ASVJrsPW6l963Mk2EMKSm4TCTxIJhs0Kx4cv2MnNZFDqHf47eg==",
-			"dev": true,
-			"requires": {
-				"@emotion/core": "^10.0.14",
-				"@emotion/styled": "^10.0.14",
-				"@storybook/client-logger": "5.2.5",
-				"common-tags": "^1.8.0",
-				"core-js": "^3.0.1",
-				"deep-object-diff": "^1.1.0",
-				"emotion-theming": "^10.0.14",
-				"global": "^4.3.2",
-				"memoizerific": "^1.11.3",
-				"polished": "^3.3.1",
-				"prop-types": "^15.7.2",
-				"resolve-from": "^5.0.0"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.11.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
-					"integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
-					"dev": true
-				}
-			}
-		},
 		"@storybook/ui": {
 			"version": "5.1.10",
 			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-5.1.10.tgz",
@ -2634,12 +2301,6 @@
 			"integrity": "sha512-c3Xy026kOF7QOTn00hbIllV1dLR9hG9NkSrLQgCVs8NF6sBU+VGWjD3wLPhmh1TYAc7ugCFsvHYMN4VcBN1U1A==",
 			"dev": true
 		},
-		"@types/is-function": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.0.tgz",
-			"integrity": "sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==",
-			"dev": true
-		},
 		"@types/istanbul-lib-coverage": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@ -2721,12 +2382,6 @@
 			"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
 			"dev": true
 		},
-		"@types/prop-types": {
-			"version": "15.7.3",
-			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-			"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-			"dev": true
-		},
 		"@types/puppeteer": {
 			"version": "3.0.5",
 			"resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-3.0.5.tgz",
@ -2736,63 +2391,6 @@
 				"@types/node": "*"
 			}
 		},
-		"@types/reach__router": {
-			"version": "1.3.7",
-			"resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.7.tgz",
-			"integrity": "sha512-cyBEb8Ef3SJNH5NYEIDGPoMMmYUxROatuxbICusVRQIqZUB85UCt6R2Ok60tKS/TABJsJYaHyNTW3kqbpxlMjg==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*"
-			}
-		},
-		"@types/react": {
-			"version": "17.0.4",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
-			"integrity": "sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==",
-			"dev": true,
-			"requires": {
-				"@types/prop-types": "*",
-				"@types/scheduler": "*",
-				"csstype": "^3.0.2"
-			}
-		},
-		"@types/react-color": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.4.tgz",
-			"integrity": "sha512-EswbYJDF1kkrx93/YU+BbBtb46CCtDMvTiGmcOa/c5PETnwTiSWoseJ1oSWeRl/4rUXkhME9bVURvvPg0W5YQw==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*",
-				"@types/reactcss": "*"
-			}
-		},
-		"@types/react-syntax-highlighter": {
-			"version": "10.1.0",
-			"resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-10.1.0.tgz",
-			"integrity": "sha512-dF49hC4FZp1dIKyzacOrHvqMUe8U2IXyQCQXOcT1e6n64gLBp+xM6qGtPsThIT9XjiIHSg2W5Jc2V5IqekBfnA==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*"
-			}
-		},
-		"@types/react-textarea-autosize": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz",
-			"integrity": "sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*"
-			}
-		},
-		"@types/reactcss": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz",
-			"integrity": "sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*"
-			}
-		},
 		"@types/responselike": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@ -2802,12 +2400,6 @@
 				"@types/node": "*"
 			}
 		},
-		"@types/scheduler": {
-			"version": "0.16.1",
-			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-			"integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
-			"dev": true
-		},
 		"@types/sizzle": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
@ -6576,12 +6168,6 @@
 				"cssom": "0.3.x"
 			}
 		},
-		"csstype": {
-			"version": "3.0.8",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-			"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
-			"dev": true
-		},
 		"cyclist": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -7195,16 +6781,6 @@
 				"utila": "~0.4"
 			}
 		},
-		"dom-helpers": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-			"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.8.7",
-				"csstype": "^3.0.2"
-			}
-		},
 		"dom-serializer": {
 			"version": "0.2.2",
 			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -8338,12 +7914,6 @@
 			"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
 			"dev": true
 		},
-		"eventemitter3": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-			"dev": true
-		},
 		"events": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@ -10976,12 +10546,6 @@
 			"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
 			"dev": true
 		},
-		"isobject": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-			"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-			"dev": true
-		},
 		"isomorphic-fetch": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
@ -12400,12 +11964,6 @@
 				"minimatch": "^3.0.2"
 			}
 		},
-		"material-colors": {
-			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
-			"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
-			"dev": true
-		},
 		"mathml-tag-names": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@ -12525,12 +12083,6 @@
 				}
 			}
 		},
-		"memoize-one": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-			"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-			"dev": true
-		},
 		"memoizerific": {
 			"version": "1.11.3",
 			"resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@ -15296,21 +14848,6 @@
 				"@babel/runtime": "^7.12.13"
 			}
 		},
-		"react-color": {
-			"version": "2.19.3",
-			"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
-			"integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
-			"dev": true,
-			"requires": {
-				"@icons/material": "^0.2.4",
-				"lodash": "^4.17.15",
-				"lodash-es": "^4.17.15",
-				"material-colors": "^1.2.1",
-				"prop-types": "^15.5.10",
-				"reactcss": "^1.2.0",
-				"tinycolor2": "^1.4.1"
-			}
-		},
 		"react-dev-utils": {
 			"version": "9.1.0",
 			"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.1.0.tgz",
@ -15612,15 +15149,6 @@
 				"prop-types": "^15.6.1"
 			}
 		},
-		"react-input-autosize": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
-			"integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
-			"dev": true,
-			"requires": {
-				"prop-types": "^15.5.8"
-			}
-		},
 		"react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -15671,22 +15199,6 @@
 				"resize-observer-polyfill": "^1.5.1"
 			}
 		},
-		"react-select": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/react-select/-/react-select-3.2.0.tgz",
-			"integrity": "sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.4.4",
-				"@emotion/cache": "^10.0.9",
-				"@emotion/core": "^10.0.9",
-				"@emotion/css": "^10.0.9",
-				"memoize-one": "^5.0.0",
-				"prop-types": "^15.6.0",
-				"react-input-autosize": "^3.0.0",
-				"react-transition-group": "^4.3.0"
-			}
-		},
 		"react-syntax-highlighter": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz",
@ -15710,27 +15222,6 @@
 				"prop-types": "^15.6.0"
 			}
 		},
-		"react-transition-group": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-			"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.5",
-				"dom-helpers": "^5.0.1",
-				"loose-envify": "^1.4.0",
-				"prop-types": "^15.6.2"
-			}
-		},
-		"reactcss": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
-			"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
-			"dev": true,
-			"requires": {
-				"lodash": "^4.0.1"
-			}
-		},
 		"read-pkg": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -18315,22 +17806,6 @@
 				}
 			}
 		},
-		"telejson": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/telejson/-/telejson-3.3.0.tgz",
-			"integrity": "sha512-er08AylQ+LEbDLp1GRezORZu5wKOHaBczF6oYJtgC3Idv10qZ8A3p6ffT+J5BzDKkV9MqBvu8HAKiIIOp6KJ2w==",
-			"dev": true,
-			"requires": {
-				"@types/is-function": "^1.0.0",
-				"global": "^4.4.0",
-				"is-function": "^1.0.1",
-				"is-regex": "^1.0.4",
-				"is-symbol": "^1.0.3",
-				"isobject": "^4.0.0",
-				"lodash": "^4.17.15",
-				"memoizerific": "^1.11.3"
-			}
-		},
 		"term-size": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@ -18512,12 +17987,6 @@
 			"dev": true,
 			"optional": true
 		},
-		"tinycolor2": {
-			"version": "1.4.2",
-			"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-			"integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
-			"dev": true
-		},
 		"tmp": {
 			"version": "0.0.33",
 			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
--- a/package.json
+++ b/package.json
@ -29,9 +29,6 @@
 		"@babel/core": "7.2.0",
 		"@babel/preset-env": "7.2.0",
 		"@babel/register": "7.0.0",
-		"@storybook/addon-cssresources": "5.2.5",
-		"@storybook/addon-knobs": "5.2.5",
-		"@storybook/addon-options": "5.2.5",
 		"@storybook/html": "5.1.10",
 		"@types/jquery": "3.3.29",
 		"@wdio/cli": "6.3.5",
--- a/src/ui/templates/popup/popup.less
+++ b/src/ui/templates/popup/popup.less
@ -46,7 +46,6 @@
 		margin-top: -9px;
 		padding-top: 9px;
 		text-decoration: none;
-		position: relative;

 		footer {
 			// T277364: The top padding doesn't have a visible effect anyway; this reduces the risk