Merge "Fix storybook instance display of footer and personal menu"

This commit is contained in:
jenkins-bot 2020-10-09 09:15:17 +00:00 committed by Gerrit Code Review
commit aea69ce200
4 changed files with 58 additions and 33 deletions

View File

@ -2,6 +2,12 @@
import { htmlUserLanguageAttributes } from './utils'; import { htmlUserLanguageAttributes } from './utils';
import footerTemplate from '!!raw-loader!../includes/templates/Footer.mustache'; 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 const
FOOTER_INFO = { FOOTER_INFO = {

View File

@ -1,5 +1,6 @@
import mustache from 'mustache'; 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 '../resources/skins.vector.styles/Footer.less';
import '../.storybook/common.less'; import '../.storybook/common.less';
@ -7,4 +8,8 @@ export default {
title: 'Footer' title: 'Footer'
}; };
export const footer = () => mustache.render( footerTemplate, FOOTER_TEMPLATE_DATA ); export const footer = () => mustache.render(
footerTemplate,
FOOTER_TEMPLATE_DATA,
FOOTER_TEMPLATE_PARTIALS
);

View File

@ -8,52 +8,65 @@ import menuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
import { htmlUserLanguageAttributes } from './utils'; import { htmlUserLanguageAttributes } from './utils';
/** /**
* @type {MenuDefinition} * @param {string} name of the menu
* @param {string} htmlItems
* @return {MenuDefinition}
*/ */
const loggedOut = { function helperMakeMenuData( name, htmlItems ) {
id: 'p-personal', let label;
class: 'vector-menu', switch ( name ) {
label: 'Personal tools', case 'personal':
'html-user-language-attributes': htmlUserLanguageAttributes, label = 'Personal tools';
'html-items': `<li id="pt-anonuserpage">Not logged in</li><li id="pt-anontalk"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-anoncontribs"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-createaccount"><a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Main+Page" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a></li><li id="pt-login"><a href="/w/index.php?title=Special:UserLogin&amp;returnto=Main+Page" title="You're encouraged to log in; however, it's not mandatory. [⌃⌥o]" accesskey="o">Log in</a></li>` 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} * @type {MenuDefinition}
*/ */
const loggedInWithEcho = { const loggedOut = helperMakeMenuData(
id: 'p-personal', 'personal',
class: 'vector-menu', `<li id="pt-anonuserpage">Not logged in</li><li id="pt-anontalk"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-anoncontribs"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-createaccount"><a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Main+Page" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a></li><li id="pt-login"><a href="/w/index.php?title=Special:UserLogin&amp;returnto=Main+Page" title="You're encouraged to log in; however, it's not mandatory. [⌃⌥o]" accesskey="o">Log in</a></li>`
label: 'Personal tools', );
'html-user-language-attributes': htmlUserLanguageAttributes,
'html-items': `<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>` /**
}; * @type {MenuDefinition}
*/
const loggedInWithEcho = helperMakeMenuData(
'personal',
`<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`
);
const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>'; const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">English</a></li>';
/** /**
* @type {MenuDefinition} * @type {MenuDefinition}
*/ */
const defaultMenu = { const defaultMenu = helperMakeMenuData(
id: 'p-generic', 'generic',
class: 'vector-menu', `<li><a href='#'>Item 1</a></li>
label: 'Menu label',
'html-user-language-attributes': htmlUserLanguageAttributes,
'html-items': `<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li> <li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>` <li><a href='#'>Item 3</a></li>`
}; );
/** /**
* @type {MenuDefinition} * @type {MenuDefinition}
*/ */
const loggedInWithULS = { const loggedInWithULS = helperMakeMenuData(
id: 'p-personal', 'personal',
class: 'vector-menu', `${ULS_LANGUAGE_SELECTOR}<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`
label: 'Personal tools', );
'html-user-language-attributes': htmlUserLanguageAttributes,
'html-items': `${ULS_LANGUAGE_SELECTOR}<li id="pt-userpage"><a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a></li><li id="pt-notifications-alert"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts">Alerts (0)</a></li><li id="pt-notifications-notice"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray" data-counter-num="3" data-counter-text="3" title="Your notices">Notices (3)</a></li><li id="pt-mytalk"><a href="/wiki/User_talk:Jdlrobson" title="Your talk page [⌃⌥n]" accesskey="n">Talk</a></li><li id="pt-sandbox"><a href="/wiki/User:Jdlrobson/sandbox" title="Your sandbox">Sandbox</a></li><li id="pt-preferences"><a href="/wiki/Special:Preferences" title="Your preferences">Preferences</a></li><li id="pt-betafeatures"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features">Beta</a></li><li id="pt-watchlist"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l">Watchlist</a></li><li id="pt-mycontris"><a href="/wiki/Special:Contributions/Jdlrobson" title="A list of your contributions [⌃⌥y]" accesskey="y">Contributions</a></li><li id="pt-logout"><a href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page&amp;returntoquery=useskin%3Dvector" title="Log out">Log out</a></li>`
};
/** /**
* @type {Object.<string, MenuDefinition>} * @type {Object.<string, MenuDefinition>}

View File

@ -13,7 +13,8 @@ import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stori
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data'; import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS,
sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data'; 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'; import { logoTemplate } from './Logo.stories.data';
export const NAVIGATION_TEMPLATE_DATA = { export const NAVIGATION_TEMPLATE_DATA = {
@ -57,7 +58,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
VectorMenu: vectorMenuTemplate, VectorMenu: vectorMenuTemplate,
Menu: menuTemplate, Menu: menuTemplate,
Footer: footerTemplate Footer: footerTemplate
} ); }, FOOTER_TEMPLATE_PARTIALS );
/** /**
* @type {Indicator[]} * @type {Indicator[]}