From edb8872c951ae6201df1df6fe44cdd0bab981e56 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 8 Oct 2020 14:56:52 -0700 Subject: [PATCH] Fix storybook instance display of footer and personal menu * The classes provided on the personal menu are incorrect. Rectify these by creating a menu helper * Register the footer template partials Change-Id: I4b73be54c073f0dd350c107b18f10456c9ee1b17 --- stories/Footer.stories.data.js | 6 +++ stories/Footer.stories.js | 9 ++++- stories/Menu.stories.data.js | 71 ++++++++++++++++++++-------------- stories/skin.stories.data.js | 5 ++- 4 files changed, 58 insertions(+), 33 deletions(-) diff --git a/stories/Footer.stories.data.js b/stories/Footer.stories.data.js index f761d39..01ea726 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 0876c38..58569df 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 c60987f..da77ee3 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 in
  • Talk
  • Contributions
  • Create account
  • Log 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': `
  • Jdlrobson
  • Alerts (0)
  • Notices (3)
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
  • Log out
    • ` -}; +const loggedOut = helperMakeMenuData( + 'personal', + `
  • Not logged in
  • Talk
  • Contributions
  • Create account
  • Log in
    • ` +); + +/** + * @type {MenuDefinition} + */ +const loggedInWithEcho = helperMakeMenuData( + 'personal', + `
  • Jdlrobson
  • Alerts (0)
  • Notices (3)
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
  • Log 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}
  • Jdlrobson
  • Alerts (0)
  • Notices (3)
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
  • Log out
    • ` -}; +const loggedInWithULS = helperMakeMenuData( + 'personal', + `${ULS_LANGUAGE_SELECTOR}
  • Jdlrobson
  • Alerts (0)
  • Notices (3)
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
  • Log out
    • ` +); /** * @type {Object.} diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js index 2a532f9..1cf8710 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[]}