import mustache from 'mustache'; import '../resources/skins.vector.styles/LanguageButton.less'; import { vectorMenuTemplate } from './MenuDropdown.stories.data'; import { languageData } from './LanguageButton.stories.data'; export default { title: 'LanguageButton' }; // mw-page-container is needed to enable the 20x20 icon // mw-body-header can be removed when VectorLanguageInHeader is true and // old language inside portal in modern Vector is no longer supported. const CONTAINER_CLASS_MODERN_VECTOR = 'mw-body-header mw-page-container'; /** * It allows us to support old and new renderings. * * @param {string|HTMLElement} htmlOrElement * @param {string} className of containing element * @return {HTMLElement} */ const wrapLanguageButton = ( htmlOrElement, className ) => { const node = document.createElement( 'div' ); node.setAttribute( 'class', className ); if ( typeof htmlOrElement === 'string' ) { node.innerHTML = htmlOrElement; } else { node.appendChild( htmlOrElement ); } return node; }; export const languageButton = () => mustache.render( vectorMenuTemplate, languageData ); export const languageButtonWhenULSEnabled = () => wrapLanguageButton( wrapLanguageButton( wrapLanguageButton( mustache.render( vectorMenuTemplate, languageData ), 'vector-menu-hide-dropdown' ), CONTAINER_CLASS_MODERN_VECTOR ), 'client-js' );