diff --git a/stories/Footer.stories.data.js b/stories/Footer.stories.data.js
index f761d39e..01ea7260 100644
--- a/stories/Footer.stories.data.js
+++ b/stories/Footer.stories.data.js
@@ -2,6 +2,12 @@
import { htmlUserLanguageAttributes } from './utils';
import footerTemplate from '!!raw-loader!../includes/templates/Footer.mustache';
+import footerRowTemplate from '!!raw-loader!../includes/templates/Footer__row.mustache';
+
+export const FOOTER_TEMPLATE_PARTIALS = {
+ // eslint-disable-next-line camelcase
+ Footer__row: footerRowTemplate
+};
const
FOOTER_INFO = {
diff --git a/stories/Footer.stories.js b/stories/Footer.stories.js
index 0876c380..58569dff 100644
--- a/stories/Footer.stories.js
+++ b/stories/Footer.stories.js
@@ -1,5 +1,6 @@
import mustache from 'mustache';
-import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
+import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
+ footerTemplate } from './Footer.stories.data';
import '../resources/skins.vector.styles/Footer.less';
import '../.storybook/common.less';
@@ -7,4 +8,8 @@ export default {
title: 'Footer'
};
-export const footer = () => mustache.render( footerTemplate, FOOTER_TEMPLATE_DATA );
+export const footer = () => mustache.render(
+ footerTemplate,
+ FOOTER_TEMPLATE_DATA,
+ FOOTER_TEMPLATE_PARTIALS
+);
diff --git a/stories/Menu.stories.data.js b/stories/Menu.stories.data.js
index c60987f4..da77ee3d 100644
--- a/stories/Menu.stories.data.js
+++ b/stories/Menu.stories.data.js
@@ -8,52 +8,65 @@ import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
import { htmlUserLanguageAttributes } from './utils';
/**
- * @type {MenuDefinition}
+ * @param {string} name of the menu
+ * @param {string} htmlItems
+ * @return {MenuDefinition}
*/
-const loggedOut = {
- id: 'p-personal',
- class: 'vector-menu',
- label: 'Personal tools',
- 'html-user-language-attributes': htmlUserLanguageAttributes,
- 'html-items': `
Not logged inTalkContributionsCreate accountLog in`
-};
+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
+ };
+}
/**
* @type {MenuDefinition}
*/
-const loggedInWithEcho = {
- id: 'p-personal',
- class: 'vector-menu',
- label: 'Personal tools',
- 'html-user-language-attributes': htmlUserLanguageAttributes,
- 'html-items': `JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`
-};
+const loggedOut = helperMakeMenuData(
+ 'personal',
+ `Not logged inTalkContributionsCreate accountLog in`
+);
+
+/**
+ * @type {MenuDefinition}
+ */
+const loggedInWithEcho = helperMakeMenuData(
+ 'personal',
+ `JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`
+);
const ULS_LANGUAGE_SELECTOR = 'English';
/**
* @type {MenuDefinition}
*/
-const defaultMenu = {
- id: 'p-generic',
- class: 'vector-menu',
- label: 'Menu label',
- 'html-user-language-attributes': htmlUserLanguageAttributes,
- 'html-items': `Item 1
+const defaultMenu = helperMakeMenuData(
+ 'generic',
+ `Item 1
Item 2
Item 3`
-};
+);
/**
* @type {MenuDefinition}
*/
-const loggedInWithULS = {
- id: 'p-personal',
- class: 'vector-menu',
- label: 'Personal tools',
- 'html-user-language-attributes': htmlUserLanguageAttributes,
- 'html-items': `${ULS_LANGUAGE_SELECTOR}JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`
-};
+const loggedInWithULS = helperMakeMenuData(
+ 'personal',
+ `${ULS_LANGUAGE_SELECTOR}JdlrobsonAlerts (0)Notices (3)TalkSandboxPreferencesBetaWatchlistContributionsLog out`
+);
/**
* @type {Object.}
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index 2a532f91..1cf8710d 100644
--- a/stories/skin.stories.data.js
+++ b/stories/skin.stories.data.js
@@ -13,7 +13,8 @@ import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stori
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS,
sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
-import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
+import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
+ footerTemplate } from './Footer.stories.data';
import { logoTemplate } from './Logo.stories.data';
export const NAVIGATION_TEMPLATE_DATA = {
@@ -57,7 +58,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
VectorMenu: vectorMenuTemplate,
Menu: menuTemplate,
Footer: footerTemplate
-} );
+}, FOOTER_TEMPLATE_PARTIALS );
/**
* @type {Indicator[]}