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

316 lines
18 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
/**
* 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
*/
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
Publish storybook now we are using more modern node Breaking change - I was having issues getting the knobs feature to work so it has been removed for the time being. Bug: T236589 Depends-On: I8505d2dad69aefed5f8ed1f599b3ca1b7e79acf5 Change-Id: I42fbf37124477e2d950b4bca15acf77703cd3f5d
2019-09-04 17:49:22 +00:00
import PopupsCSSString from '../../src/ui/index.less';
import '../mocks/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
// 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';
Publish storybook now we are using more modern node Breaking change - I was having issues getting the knobs feature to work so it has been removed for the time being. Bug: T236589 Depends-On: I8505d2dad69aefed5f8ed1f599b3ca1b7e79acf5 Change-Id: I42fbf37124477e2d950b4bca15acf77703cd3f5d
2019-09-04 17:49:22 +00:00
import { text, select, number, object } from '@storybook/addon-knobs';
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
/**
* 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
*
eslint: Remove valid-jsdoc override Change-Id: I6a9936743a74afb528713f21e016838947fa1914
2019-08-05 12:35:21 +00:00
* @return {object}
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
*/
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
*/
Publish storybook now we are using more modern node Breaking change - I was having issues getting the knobs feature to work so it has been removed for the time being. Bug: T236589 Depends-On: I8505d2dad69aefed5f8ed1f599b3ca1b7e79acf5 Change-Id: I42fbf37124477e2d950b4bca15acf77703cd3f5d
2019-09-04 17:49:22 +00:00
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 )
.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 )
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
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 } )}
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
`;
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( '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 )
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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( 'landscape', () => {
modifyStorybookHead( MODELS.HE_WIKI2.languageCode, MODELS.HE_WIKI2.languageDirection )
return `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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( 'landscape - thin thumbnail', () => {
modifyStorybookHead( MODELS.AR_WIKI2.languageCode, MODELS.AR_WIKI2.languageDirection )
return `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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 `
Performance optimization for popup rendering Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes. Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY"). Disable some test cases that relied on implementation detail of using "top" CSS. Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-24 14:33:42 +00:00
${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 } )}
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
`;
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