wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-12-11 23:36:07 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Popups/.storybook/stories/index.stories.js

324 lines
16 KiB
JavaScript
Raw Normal View History

Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
/**
* Browser globals
*/
import jquery from 'jquery';
import '../mocks/js/mockMediaWiki.js';
/**
* CSS
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
* Custom CSS is inserted into the <head> via webpack.
* However, the Popups-specific CSS is imported as a string and inserted into the <head> manually
* in order to change it later for RTL transformations with CSSJanus.
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
*/
import '../mocks/less/custom.less';
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
// NOTE: The following import overrides the webpack config for this specific LESS file in order to
// omit the 'style-loader' and import the content as a string.
// The "./mocks/less" path is hard-coded and should be kept in sync with the path in webpack.config.js
import PopupsCSSString from '!css-loader!less-loader?{"paths":"./mocks/less"}!../../src/ui/index.less';
// The CSSJanus library is used to transform CSS for RTL languages.
import * as cssjanus from 'cssjanus';
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
/**
* Storybook dependencies
*/
import { document } from 'global';
import { storiesOf } from '@storybook/html';
import { withKnobs, 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';
Add SVG masks to Storybook app The SVG masks used for previews are clip paths, making it hard to visualize what their actual shape is. This patch extracts the paths inside those clip paths into new SVG objects and renders them in the Storybook app. Also removes a few previews from the portrait/landscape thumbnails so that the Knobs addon can function properly. Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 13:22:15 +00:00
/**
* SVG Assets
*/
import pointerMaskSVG from '../../src/ui/pointer-mask.svg';
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
const popupsCSS = {
ltr: PopupsCSSString,
rtl: cssjanus.transform( PopupsCSSString.toString() )
},
KNOBS_PARAM = { knobs: {
escapeHTML: false
} },
PopupsCSSElementId = 'PopupsCssElement';
/**
* Inserts the Popups CSS string into the <head> of the document manually.
* @param {string} CSSString
*/
function insertPopupsStyleElement() {
const PopupsCSSElement = document.createElement( 'style' ),
customCSSElement = document.head.querySelector( 'style:last-of-type' );
PopupsCSSElement.type = 'text/css';
PopupsCSSElement.id = PopupsCSSElementId;
document.head.insertBefore( PopupsCSSElement, customCSSElement );
}
/**
* Modifies the Popups CSS via CSSJanus and changes the document lang and dir attributes.
* @param {string} lang
* @param {string} dir
*/
function modifyStorybookHead( lang, dir ) {
const PopupsCSSElement = document.getElementById( PopupsCSSElementId );
if ( document.documentElement.lang !== lang ) {
document.documentElement.lang = lang;
}
if ( document.documentElement.dir !== dir ) {
document.documentElement.dir = dir;
}
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
if ( PopupsCSSElement.innerHTML !== popupsCSS[ dir ] ) {
PopupsCSSElement.innerHTML = popupsCSS[ dir ]
}
}
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
/**
* Extends default model with params and adds knobs to it.
* @param {object} model
* @param {object} extendedModel
*
* @returns {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;
}
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
/**
* Global DOM manipulations
*/
createPointerMasks( document.body );
insertPopupsStyleElement();
modifyStorybookHead( 'en', 'ltr' );
/**
* Stories
*/
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
storiesOf( 'Thumbnails', module )
.addDecorator(withKnobs)
.add( 'portrait', () => {
const
initModel = extendModelWithKnobs( MODELS.THUMBNAIL_PORTRAIT ),
apiResponse = object('API Response', {} ),
Add SVG masks to Storybook app The SVG masks used for previews are clip paths, making it hard to visualize what their actual shape is. This patch extracts the paths inside those clip paths into new SVG objects and renders them in the Storybook app. Also removes a few previews from the portrait/landscape thumbnails so that the Knobs addon can function properly. Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 13:22:15 +00:00
model = useApiOrInitModel( apiResponse, initModel, CONSTANTS.THUMBNAIL_SIZE, parseHTMLResponse );
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
object('Effective model', Object.assign( {}, model, { extract: model.extract[0].outerHTML } ) );
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
modifyStorybookHead( model.languageCode, model.languageDirection )
return `${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 1 ) }, flippedX: true, flippedY: false } )}
${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: true } )}
${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
}, KNOBS_PARAM )
.addDecorator(withKnobs)
.add( 'landscape', () => {
const
initModel = extendModelWithKnobs( MODELS.THUMBNAIL_LANDSCAPE ),
apiResponse = object('API Response', {} ),
Add SVG masks to Storybook app The SVG masks used for previews are clip paths, making it hard to visualize what their actual shape is. This patch extracts the paths inside those clip paths into new SVG objects and renders them in the Storybook app. Also removes a few previews from the portrait/landscape thumbnails so that the Knobs addon can function properly. Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 13:22:15 +00:00
model = useApiOrInitModel( apiResponse, initModel, CONSTANTS.THUMBNAIL_SIZE, parseHTMLResponse );
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
object('Effective model', Object.assign( {}, model, { extract: model.extract[0].outerHTML } ) );
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
modifyStorybookHead( model.languageCode, model.languageDirection )
return `${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 1 ) }, flippedX: true, flippedY: false } )}
${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 2 ) }, flippedX: false, flippedY: true } )}
${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
}, KNOBS_PARAM )
.add( 'portrait - SVG', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
.add( 'landscape - SVG', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
.add( 'landscape - Thin thumbnail', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
.add( 'portrait - Thumbnail divider', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
storiesOf( 'Text', module )
.add( 'Short & long', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.LONG_WORD_2, { offset: { top: grid.portrait.row( 1.5), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.LONG_WORD_THUMB, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
.add( 'Math & chemistry', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.CHEM_3, { offset: { top: grid.portrait.row( 2.4 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.MATH_1, { offset: { top: grid.landscape.row( 1.8 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.CHEM_1, { offset: { top: grid.portrait.row( 1.55 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.MATH_2, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} );
storiesOf( 'Disambiguation', module )
.add( 'standard', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1.7 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1.7 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1.7 ), left: grid.landscape.col( 1.7 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
storiesOf( 'RTL', module )
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
.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 } )}
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 3) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true } )}
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 4 ) }, 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 } )}
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, 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 } )}
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
storiesOf( 'Non-latin', module )
.add( 'thumbnails', () => {
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
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 } )}
${createPopup( MODELS.EL_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.HZ_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.KO_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.JA_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.TH_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: false } )}
`;
Storybook.js for Popups Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2018-12-12 23:08:38 +00:00
} )
Add SVG masks to Storybook app The SVG masks used for previews are clip paths, making it hard to visualize what their actual shape is. This patch extracts the paths inside those clip paths into new SVG objects and renders them in the Storybook app. Also removes a few previews from the portrait/landscape thumbnails so that the Knobs addon can function properly. Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 13:22:15 +00:00
storiesOf( 'assets', module )
.add( 'SVG Masks', () => {
const parser = new DOMParser(),
svgDoc = parser.parseFromString(pointerMaskSVG, "image/svg+xml"),
clipPaths = svgDoc.querySelectorAll('clipPath'),
domString = Array.prototype.reduce.call( clipPaths, ( v, clipPath ) => {
return v += `
<div>
<hr>
<pre>#${clipPath.id}</pre>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 1000 1000">
${clipPath.innerHTML}
</svg>
</div>
`;
}, '' )
Improving RTL support for the Storybook app - Adds CSSJanus support on a story-by-story basis for the Storybook app. - Adds an extra RTL portrait thumbnail test-case. - Adds an extra RTL 'thin' portrait thumbnail test-case. - Removes the `createContextualFragment` wrapper from stories, as well as the wrapper divs. Bug: T204627 Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-11 14:01:59 +00:00
modifyStorybookHead( 'en', 'ltr' )
Add SVG masks to Storybook app The SVG masks used for previews are clip paths, making it hard to visualize what their actual shape is. This patch extracts the paths inside those clip paths into new SVG objects and renders them in the Storybook app. Also removes a few previews from the portrait/landscape thumbnails so that the Knobs addon can function properly. Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 13:22:15 +00:00
return `
<div>
<p>SVG masks are rendered in at a width/height of 500px in a viewbox of 1000px, so half size.</p>
${domString}
</div>`;
} )
Reference in a new issue Copy permalink