- {{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
+ {{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
diff --git a/resources/skins.vector.styles/PersonalMenu.less b/resources/skins.vector.styles/Menu.less
similarity index 94%
rename from resources/skins.vector.styles/PersonalMenu.less
rename to resources/skins.vector.styles/Menu.less
index 56e87ac..31a7d12 100644
--- a/resources/skins.vector.styles/PersonalMenu.less
+++ b/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;
diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less
index 61fb8fa..e26e427 100644
--- a/resources/skins.vector.styles/index.less
+++ b/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';
diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less
index 7542f6e..f61affa 100644
--- a/resources/skins.vector.styles/legacy.less
+++ b/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';
diff --git a/stories/PersonalMenu.stories.data.js b/stories/Menu.stories.data.js
similarity index 89%
rename from stories/PersonalMenu.stories.data.js
rename to stories/Menu.stories.data.js
index 1036818..1a138f9 100644
--- a/stories/PersonalMenu.stories.data.js
+++ b/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 = '
English';
+/**
+ * @type {MenuDefinition}
+ */
+const defaultMenu = {
+ id: 'p-generic',
+ class: 'vectorMenu-default',
+ 'label-id': 'p-generic-label',
+ label: 'Menu label',
+ 'html-userlangattributes': htmluserlangattributes,
+ 'html-items': `
Item 1
+
Item 2
+
Item 3`
+};
+
/**
* @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 };
diff --git a/stories/Menu.stories.js b/stories/Menu.stories.js
new file mode 100644
index 0000000..efac6d4
--- /dev/null
+++ b/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 );
diff --git a/stories/PersonalMenu.stories.js b/stories/PersonalMenu.stories.js
deleted file mode 100644
index 5e18ad0..0000000
--- a/stories/PersonalMenu.stories.js
+++ /dev/null
@@ -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 );
diff --git a/stories/VectorMenu.stories.js b/stories/VectorMenu.stories.js
index e0ca02d..9d73f1e 100644
--- a/stories/VectorMenu.stories.js
+++ b/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 );
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index f0ebff5..e1ce386 100644
--- a/stories/skin.stories.data.js
+++ b/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
} );
diff --git a/stories/types.js b/stories/types.js
index 9f1dd67..17dcafb 100644
--- a/stories/types.js
+++ b/stories/types.js
@@ -30,6 +30,7 @@
* @prop {string} html-items
* @prop {string} [class] of menu
* @prop {string} [html-userlangattributes]
+ * @prop {boolean} [is-dropdown]
*/
/**
diff --git a/tests/phpunit/integration/VectorTemplateTest.php b/tests/phpunit/integration/VectorTemplateTest.php
index 80e6ba0..acaa506 100644
--- a/tests/phpunit/integration/VectorTemplateTest.php
+++ b/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' );
}
}