mediawiki-skins-Vector/stories/utils.js
bwang 7909cf1eb6 Update user links storybook
- Fixes logged in and logged out links in the user links storybook
- Fixes type def warnings by importing defs
- Update the user page styles in storybook

Bug: T284584
Change-Id: I8e56df16617f71be89ac8d3094497cdb0daa64ef
2021-06-21 21:34:35 +00:00

73 lines
1.8 KiB
JavaScript

/**
* @external MenuDefinition
*/
/**
* @param {string} msg
* @param {number} [height=200]
* @return {string}
*/
const placeholder = ( msg, height ) => {
return `<div style="width: 100%; height: ${height || 200}px; margin-bottom: 2px;
font-size: 12px; padding: 8px; box-sizing: border-box;
display: flex; background: #eee; align-items: center;justify-content: center;">${msg}</div>`;
};
/**
* @param {string} html
* @return {string}
*/
const portletAfter = ( html ) => {
return `<div class="after-portlet after-portlet-tb">${html}</div>`;
};
const htmlUserLanguageAttributes = `dir="ltr" lang="en-GB"`;
/**
* @param {string} [additionalClassString] to add to the menu class
* @return {Object}
*/
function helperClassName( additionalClassString = '' ) {
return { class: additionalClassString };
}
/**
* @param {string} name of the menu
* @param {string} htmlItems
* @param {Object} [additionalData] to add to the menu template data
* @param {string} [additionalData.class]
* @return {MenuDefinition}
*/
function helperMakeMenuData( name, htmlItems, additionalData = {} ) {
let label;
switch ( name ) {
case 'personal':
label = 'Personal tools';
break;
default:
label = 'Menu label';
break;
}
// Handle "class" property separately to ensure it is appended to existing classes
const additionalClassString = additionalData.class;
const additionalDataWithoutClass = Object.assign( {}, additionalData );
delete additionalDataWithoutClass.class;
return Object.assign( {
id: `p-${name}`,
class: `mw-portlet mw-portlet-${name} vector-menu ${additionalClassString}`,
label,
'html-user-language-attributes': htmlUserLanguageAttributes,
'html-items': htmlItems
}, additionalDataWithoutClass );
}
export {
placeholder,
htmlUserLanguageAttributes,
portletAfter,
helperClassName,
helperMakeMenuData
};