[Storybook] Add Header component

* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors

Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
This commit is contained in:
jdlrobson 2021-09-13 14:19:58 -07:00 committed by Jdlrobson
parent 326e11dfbf
commit ad5c127239
11 changed files with 64 additions and 35 deletions

View file

@ -9,7 +9,7 @@ rm -f .storybook/resolve-imports/mediawiki.skin.variables.less
cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-imports/
# Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code.
curl -sS "https://en.wikipedia.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface|mediawiki.ui.icon|mediawiki.ui.button" -o .storybook/integration.less
curl -sS "https://www.mediawiki.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface|mediawiki.ui.icon|mediawiki.ui.button" -o .storybook/integration.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.skin.defaults.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.mixins.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.ui/variables.less

View file

@ -10,7 +10,7 @@
title="{{msg-vector-main-menu-tooltip}}">
{{msg-vector-action-toggle-sidebar}}
</label>
{{>Logo}}
{{#data-logos}}{{>Logo}}{{/data-logos}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
{{#data-vector-user-links}}{{>UserLinks}}{{/data-vector-user-links}}
</header>

View file

@ -3,7 +3,6 @@
string link-mainpage link to the main page (from SkinMustache in core)
string msg-sitesubtitle the contents of the sitesubtitle message key
}}
{{#data-logos}}
<a href="{{link-mainpage}}" class="mw-logo">
{{#icon}}
{{! alt is provided for valid HTML but given aria-hidden not needed. }}
@ -25,4 +24,3 @@
{{/tagline}}
</span>
</a>
{{/data-logos}}

View file

@ -1,7 +1,7 @@
{
"private": true,
"scripts": {
"start": "bash dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006",
"start": "bash dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006 -s resources/skins.vector.styles",
"test": "npm -s run lint && tsc && npm -s run doc",
"test:size": "node ./tests/resource-loader-bundlesize.js",
"lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n",
@ -11,7 +11,7 @@
"lint:styles": "stylelint \"**/*.{less,css}\"",
"lint:i18n": "banana-checker --requireLowerCase=0 i18n/",
"selenium-test": "npm -s run test:size",
"doc": "jsdoc -c jsdoc.json && npm run build-storybook",
"doc": "jsdoc -c jsdoc.json && npm run build-storybook -s resources/skins.vector.styles",
"build-storybook": "bash dev-scripts/setup-storybook.sh && build-storybook --quiet --loglevel warn -o docs/ui",
"minify-svg": "svgo --config=.svgo.config.js -q -r -f resources/",
"pre-commit": "[ \"${PRE_COMMIT:-1}\" -eq 0 ] || npm -s t"

View file

@ -113,7 +113,7 @@ body {
}
/* Search */
#p-search {
.vector-search-box {
float: left;
margin-right: 0.5em;
margin-left: 0.5em;

View file

@ -0,0 +1,23 @@
import headerTemplate from '!!raw-loader!../includes/templates/Header.mustache';
import { logoTemplate as Logo, LOGO_TEMPLATE_DATA } from './Logo.stories.data';
import { searchBoxTemplate as SearchBox,
searchBoxDataWithCollapsing,
SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data';
import { userLinksTemplate as UserLinks,
USER_LINKS_LOGGED_OUT_TEMPLATE_DATA,
USER_LINK_PARTIALS } from './UserLinks.stories.data';
export const HEADER_TEMPLATE_PARTIALS = Object.assign( {
SearchBox,
Logo,
UserLinks
}, SEARCH_TEMPLATE_PARTIALS, USER_LINK_PARTIALS );
export { headerTemplate };
export const HEADER_TEMPLATE_DATA = Object.assign( {
'msg-vector-main-menu-tooltip': 'Tooltip',
'msg-vector-action-toggle-sidebar': 'Toggle',
'data-search-box': searchBoxDataWithCollapsing,
'data-vector-user-links': USER_LINKS_LOGGED_OUT_TEMPLATE_DATA
}, LOGO_TEMPLATE_DATA.wordmarkTaglineIcon );

14
stories/Header.stories.js Normal file
View file

@ -0,0 +1,14 @@
import mustache from 'mustache';
import { HEADER_TEMPLATE_DATA, HEADER_TEMPLATE_PARTIALS,
headerTemplate } from './Header.stories.data';
import '../resources/skins.vector.styles/components/Header.less';
export default {
title: 'Header'
};
export const header = () => mustache.render(
headerTemplate,
HEADER_TEMPLATE_DATA,
HEADER_TEMPLATE_PARTIALS
);

View file

@ -9,7 +9,7 @@ import { htmlUserLanguageAttributes } from './utils';
/**
* @type {SearchData}
*/
const legacySearchBoxData = {
const searchBoxData = {
'form-action': '/w/index.php',
class: 'vector-search-box vector-search-show-thumbnail',
'html-user-language-attributes': htmlUserLanguageAttributes,
@ -23,8 +23,8 @@ const legacySearchBoxData = {
/**
* @type {SearchData}
*/
const searchBoxData = Object.assign( {}, legacySearchBoxData, {
class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses',
const searchBoxDataWithCollapsing = Object.assign( {}, searchBoxData, {
class: `${searchBoxData.class} vector-search-box-collapses`,
'is-collapsible': true,
'data-collapse-icon': {
icon: 'wikimedia-search',
@ -42,6 +42,6 @@ const SEARCH_TEMPLATE_PARTIALS = {
export {
SEARCH_TEMPLATE_PARTIALS,
searchBoxTemplate,
legacySearchBoxData,
searchBoxDataWithCollapsing,
searchBoxData
};

View file

@ -1,7 +1,7 @@
import mustache from 'mustache';
import '../resources/skins.vector.styles/SearchBox.less';
import '../resources/skins.vector.styles/layouts/screen.less';
import { searchBoxData, legacySearchBoxData, searchBoxTemplate,
import { searchBoxData, searchBoxDataWithCollapsing, searchBoxTemplate,
SEARCH_TEMPLATE_PARTIALS
} from './SearchBox.stories.data';
@ -9,10 +9,10 @@ export default {
title: 'SearchBox'
};
export const legacySimpleSearch = () => `
${mustache.render( searchBoxTemplate, legacySearchBoxData, SEARCH_TEMPLATE_PARTIALS )}
`;
export const simpleSearch = () => `
export const searchBoxWithoutCollapsing = () => `
${mustache.render( searchBoxTemplate, searchBoxData, SEARCH_TEMPLATE_PARTIALS )}
`;
export const searchBoxWithCollapsing = () => `
${mustache.render( searchBoxTemplate, searchBoxDataWithCollapsing, SEARCH_TEMPLATE_PARTIALS )}
`;

View file

@ -132,11 +132,15 @@ const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = {
'data-user-menu': helperMakeMenuData( 'new-personal', LOGGED_OUT_ITEMS, loggedOutData )
};
const USER_LINK_PARTIALS = {
Menu: menuTemplate
};
export {
PERSONAL_MENU_TEMPLATE_DATA,
USER_LINKS_LOGGED_IN_TEMPLATE_DATA,
USER_LINKS_LOGGED_OUT_TEMPLATE_DATA,
menuTemplate,
USER_LINK_PARTIALS,
userLinksTemplateLegacy,
userLinksTemplate
};

View file

@ -1,7 +1,7 @@
import mustache from 'mustache';
import { menuTemplate } from './Menu.stories.data';
import { PERSONAL_MENU_TEMPLATE_DATA, USER_LINKS_LOGGED_IN_TEMPLATE_DATA, USER_LINKS_LOGGED_OUT_TEMPLATE_DATA } from './UserLinks.stories.data';
import { userLinksTemplateLegacy, userLinksTemplate } from './UserLinks.stories.data';
import { userLinksTemplateLegacy, userLinksTemplate,
USER_LINK_PARTIALS } from './UserLinks.stories.data';
import '../resources/skins.vector.styles.legacy/components/UserLinks.less';
import '../resources/skins.vector.styles/components/UserLinks.less';
@ -14,9 +14,7 @@ export const legacyLoggedOut = () => mustache.render(
{
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut
},
{
Menu: menuTemplate
}
USER_LINK_PARTIALS
);
export const legacyLoggedInWithEcho = () => mustache.render(
@ -24,9 +22,7 @@ export const legacyLoggedInWithEcho = () => mustache.render(
{
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho
},
{
Menu: menuTemplate
}
USER_LINK_PARTIALS
);
export const legacyLoggedInWithULS = () => mustache.render(
@ -34,23 +30,17 @@ export const legacyLoggedInWithULS = () => mustache.render(
{
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS
},
{
Menu: menuTemplate
}
USER_LINK_PARTIALS
);
export const loggedInUserLinks = () => mustache.render(
userLinksTemplate,
USER_LINKS_LOGGED_IN_TEMPLATE_DATA,
{
Menu: menuTemplate
}
USER_LINK_PARTIALS
);
export const loggedOutUserLinks = () => mustache.render(
userLinksTemplate,
USER_LINKS_LOGGED_OUT_TEMPLATE_DATA,
{
Menu: menuTemplate
}
USER_LINK_PARTIALS
);