[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

dev-scripts/setup-storybook.sh

@@ -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

includes/templates/Header.mustache

@@ -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>

includes/templates/Logo.mustache

@@ -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}}

package.json

@@ -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"

resources/skins.vector.styles.legacy/layouts/screen.less

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

stories/Header.stories.data.js

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

stories/Header.stories.js

@@ -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
+);

stories/SearchBox.stories.data.js

@@ -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
 };

stories/SearchBox.stories.js

@@ -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 )}
+`;

stories/UserLinks.stories.data.js

@@ -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
 };

stories/UserLinks.stories.js

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