mediawiki-extensions-Popups/.storybook/helpers/createPopup.js
Jan Drewniak 1e04551b1c [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
2021-07-14 12:54:55 +02:00

39 lines
917 B
JavaScript

import { SIZES } from '../../src/ui/thumbnail';
import { createPreviewWithType, layoutPreview, getClasses } from '../../src/ui/renderer.js';
import scaleDownThumbnail from './scaleDownThumbnail';
const POINTER_SIZE = 8;
/**
* Creates a static/stateless Popup and returns its HTML.
*
* @param {ext.popups.PreviewModel} model
* @param {object} layout
*
* @return {string} HTML
*/
function createPopup( model, layout ) {
if ( model.thumbnail ) {
model.thumbnail = scaleDownThumbnail( model.thumbnail );
}
const preview = createPreviewWithType( model );
Object.assign( layout, { dir: model.languageDirection, offset: { left: 0, top: 0 } } );
layoutPreview(
preview,
layout,
getClasses( preview, {
flippedX: layout.flippedX,
flippedY: layout.flippedY
} ),
SIZES.landscapeImage.h,
POINTER_SIZE,
window.innerHeight
);
return preview.el[ 0 ].outerHTML;
}
export default createPopup;