Refactor: Generalise personal menu

the PersonalMenu should be generalised. In future we will use it as
the template for all menus

Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df

includes/VectorTemplate.php

@@ -463,7 +463,7 @@ class VectorTemplate extends BaseTemplate {
 		$extraClasses = [
 			self::MENU_TYPE_DROPDOWN => 'vectorMenu',
 			self::MENU_TYPE_TABS => 'vectorTabs',
-			self::MENU_TYPE_DEFAULT => '',
+			self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
 		];
 
 		$props = [

includes/templates/index.mustache

@@ -23,7 +23,7 @@
 	string html-navigation-heading heading for entire navigation that is usually hidden to screen
 		readers
 	LogoOptions data-logos
-	MenuDefinition data-personal-menu See PersonalMenu.mustache for documentation.
+	MenuDefinition data-personal-menu
 	object data-namespace-tabs. See VectorTabs.mustache for documentation.
 	object data-variants. See VectorMenu.mustache for documentation.
 	object data-page-actions. See VectorTabs.mustache for documentation.
@@ -77,7 +77,7 @@
 <div id="mw-navigation">
 	<h2>{{{html-navigation-heading}}}</h2>
 	<div id="mw-head">
-		{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
+		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
 			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}

includes/templates/legacy.mustache

@@ -22,7 +22,7 @@
 	string html-dataAfterContent
 	string html-navigation-heading heading for entire navigation that is
 		usually hidden to screen readers
-	MenuDefinition data-personal-menu See PersonalMenu.mustache for documentation.
+	MenuDefinition data-personal-menu
 	object data-namespace-tabs. See VectorTabs.mustache for documentation.
 	object data-variants. See VectorMenu.mustache for documentation.
 	object data-page-actions. See VectorTabs.mustache for documentation.
@@ -70,7 +70,7 @@
 <div id="mw-navigation">
 	<h2>{{{html-navigation-heading}}}</h2>
 	<div id="mw-head">
-		{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
+		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
 			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}

resources/skins.vector.styles/Menu.less

@@ -2,6 +2,8 @@
 @import 'mediawiki.mixins.less';
 
 /* Personal */
+.vectorMenu-default,
+/* FIXME: Remove p-personal selector when cache has cleared. */
 #p-personal {
 	position: absolute;
 	top: @top-personal-tools;

resources/skins.vector.styles/index.less

@@ -6,7 +6,7 @@
 	@import 'common.less';
 	@import 'layout.less';
 	@import 'Logo.less';
-	@import 'PersonalMenu.less';
+	@import 'Menu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';
 	@import 'watchstar.less';

resources/skins.vector.styles/legacy.less

@@ -4,7 +4,7 @@
 @media screen {
 	@import 'common.less';
 	@import 'legacy/layout.less';
-	@import 'PersonalMenu.less';
+	@import 'Menu.less';
 	@import 'SearchBox.less';
 	@import 'VectorTabs.less';
 	@import 'watchstar.less';

stories/Menu.stories.data.js

@@ -1,4 +1,4 @@
-import personalMenuTemplate from '!!raw-loader!../includes/templates/PersonalMenu.mustache';
+import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
 import { htmluserlangattributes } from './utils';
 
 /**
@@ -6,7 +6,7 @@ import { htmluserlangattributes } from './utils';
  */
 const loggedOut = {
 	id: 'p-personal',
-	class: '',
+	class: 'vectorMenu-default',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -18,6 +18,7 @@ const loggedOut = {
  */
 const loggedInWithEcho = {
 	id: 'p-personal',
+	class: 'vectorMenu-default',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -26,11 +27,26 @@ const loggedInWithEcho = {
 
 const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
 
+/**
+ * @type {MenuDefinition}
+ */
+const defaultMenu = {
+	id: 'p-generic',
+	class: 'vectorMenu-default',
+	'label-id': 'p-generic-label',
+	label: 'Menu label',
+	'html-userlangattributes': htmluserlangattributes,
+	'html-items': `<li><a href='#'>Item 1</a></li>
+<li><a href='#'>Item 2</a></li>
+<li><a href='#'>Item 3</a></li>`
+};
+
 /**
  * @type {MenuDefinition}
  */
 const loggedInWithULS = {
 	id: 'p-personal',
+	class: 'vectorMenu-default',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -42,8 +58,9 @@ const loggedInWithULS = {
  */
 const PERSONAL_MENU_TEMPLATE_DATA = {
 	loggedOut,
+	defaultMenu,
 	loggedInWithEcho,
 	loggedInWithULS
 };
 
-export { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate };
+export { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate };

stories/Menu.stories.js

@@ -0,0 +1,22 @@
+import mustache from 'mustache';
+import { menuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './Menu.stories.data';
+import '../resources/skins.vector.styles/Menu.less';
+import '../.storybook/common.less';
+
+export default {
+	title: 'Menu'
+};
+
+export const menu = () => mustache.render(
+	menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.defaultMenu
+);
+
+export const loggedOut = () => mustache.render( menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.loggedOut );
+
+export const loggedInWithEcho = () => mustache.render( menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho );
+
+export const loggedInWithULS = () => mustache.render( menuTemplate,
+	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS );

stories/PersonalMenu.stories.js

@@ -1,17 +0,0 @@
-import mustache from 'mustache';
-import { personalMenuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './PersonalMenu.stories.data';
-import '../resources/skins.vector.styles/PersonalMenu.less';
-import '../.storybook/common.less';
-
-export default {
-	title: 'Personal Menu'
-};
-
-export const loggedOut = () => mustache.render( personalMenuTemplate,
-	PERSONAL_MENU_TEMPLATE_DATA.loggedOut );
-
-export const loggedInWithEcho = () => mustache.render( personalMenuTemplate,
-	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho );
-
-export const loggedInWithULS = () => mustache.render( personalMenuTemplate,
-	PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS );

stories/VectorMenu.stories.js

@@ -4,7 +4,7 @@ import '../.storybook/common.less';
 import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
 
 export default {
-	title: 'Menu'
+	title: 'MenuDropdown'
 };
 
 export const more = () => mustache.render( vectorMenuTemplate, moreData );

stories/skin.stories.data.js

@@ -1,7 +1,7 @@
 import { htmluserlangattributes } from './utils';
 import { placeholder } from './utils';
 
-import { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate } from './PersonalMenu.stories.data';
+import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
 import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.stories.data';
 import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
 import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
@@ -48,7 +48,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
 	Sidebar: sidebarTemplate,
 	VectorTabs: vectorTabsTemplate,
 	VectorMenu: vectorMenuTemplate,
-	PersonalMenu: personalMenuTemplate,
+	Menu: menuTemplate,
 	Footer: footerTemplate
 } );
 

stories/types.js

@@ -30,6 +30,7 @@
  * @prop {string} html-items
  * @prop {string} [class] of menu
  * @prop {string} [html-userlangattributes]
+ * @prop {boolean} [is-dropdown]
  */
 
 /**

tests/phpunit/integration/VectorTemplateTest.php

@@ -171,7 +171,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 		$this->assertSame( $actions['class'],
 			'emptyPortlet vectorMenu' );
 		$this->assertSame( $props['data-personal-menu']['class'],
-			'emptyPortlet' );
+			'emptyPortlet vectorMenu-default' );
 	}
 
 }