mediawiki-skins-Vector/stories/LanguageButton.stories.js
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00

45 lines
1.3 KiB
JavaScript

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'
);