diff --git a/stories/Menu.stories.data.js b/stories/Menu.stories.data.js
index c71192d12..ba0f6d269 100644
--- a/stories/Menu.stories.data.js
+++ b/stories/Menu.stories.data.js
@@ -2,39 +2,15 @@
* @external MenuDefinition
*/
import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
-import { htmlUserLanguageAttributes } from './utils';
-
-/**
- * @param {string} name of the menu
- * @param {string} htmlItems
- * @return {MenuDefinition}
- */
-function helperMakeMenuData( name, htmlItems ) {
- let label;
- switch ( name ) {
- case 'personal':
- label = 'Personal tools';
- break;
- default:
- label = 'Menu label';
- break;
- }
-
- return {
- id: `p-${name}`,
- class: `mw-portlet mw-portlet-${name} vector-menu`,
- label,
- 'html-user-language-attributes': htmlUserLanguageAttributes,
- 'html-items': htmlItems
- };
-}
+import { helperMakeMenuData } from './utils';
/**
* @type {MenuDefinition}
*/
const loggedOut = helperMakeMenuData(
'personal',
- `
Not logged inTalkContributionsCreate accountLog in`
+ `Not logged inTalkContributionsCreate accountLog in`,
+ 'vector-user-menu-legacy'
);
/**
@@ -42,7 +18,8 @@ const loggedOut = helperMakeMenuData(
*/
const loggedInWithEcho = helperMakeMenuData(
'personal',
- `JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`
+ `JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`,
+ 'vector-user-menu-legacy'
);
const ULS_LANGUAGE_SELECTOR = 'English';
@@ -62,7 +39,8 @@ const defaultMenu = helperMakeMenuData(
*/
const loggedInWithULS = helperMakeMenuData(
'personal',
- `${ULS_LANGUAGE_SELECTOR}JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`
+ `${ULS_LANGUAGE_SELECTOR}JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`,
+ 'vector-user-menu-legacy'
);
/**
diff --git a/stories/utils.js b/stories/utils.js
index 9b3783d45..f538901fc 100644
--- a/stories/utils.js
+++ b/stories/utils.js
@@ -19,4 +19,30 @@ const portletAfter = ( html ) => {
const htmlUserLanguageAttributes = `dir="ltr" lang="en-GB"`;
-export { placeholder, htmlUserLanguageAttributes, portletAfter };
+/**
+ * @param {string} name of the menu
+ * @param {string} htmlItems
+ * @param {string} [additionalClassString] to add to the menu
+ * @return {MenuDefinition}
+ */
+function helperMakeMenuData( name, htmlItems, additionalClassString = '' ) {
+ let label;
+ switch ( name ) {
+ case 'personal':
+ label = 'Personal tools';
+ break;
+ default:
+ label = 'Menu label';
+ break;
+ }
+
+ return {
+ id: `p-${name}`,
+ class: `mw-portlet mw-portlet-${name} vector-menu ${additionalClassString}`,
+ label,
+ 'html-user-language-attributes': htmlUserLanguageAttributes,
+ 'html-items': htmlItems
+ };
+}
+
+export { placeholder, htmlUserLanguageAttributes, portletAfter, helperMakeMenuData };