Merge "[Storybook] Fixes state of various components"
This commit is contained in:
commit
ccbfa4c895
|
@ -0,0 +1,28 @@
|
||||||
|
import articleToolbarTemplate from '!!raw-loader!../includes/templates/ArticleToolbar.mustache';
|
||||||
|
import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data';
|
||||||
|
import { menuTemplate } from './Menu.stories.data';
|
||||||
|
|
||||||
|
const ARTICLE_TOOLBAR_TEMPLATE_DATA = {
|
||||||
|
'data-portlets': {
|
||||||
|
'data-views': pageActionsData,
|
||||||
|
'data-namespaces': namespaceTabsData
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY = {
|
||||||
|
'data-portlets': {
|
||||||
|
'data-views': Object.assign( {}, pageActionsData, {
|
||||||
|
class: 'vector-menu-tabs-legacy'
|
||||||
|
} ),
|
||||||
|
'data-namespaces': Object.assign( {}, namespaceTabsData, {
|
||||||
|
class: 'vector-menu-tabs-legacy'
|
||||||
|
} )
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ARTICLE_TOOLBAR_PARTIALS = {
|
||||||
|
Menu: menuTemplate
|
||||||
|
};
|
||||||
|
|
||||||
|
export { articleToolbarTemplate, ARTICLE_TOOLBAR_TEMPLATE_DATA,
|
||||||
|
ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY, ARTICLE_TOOLBAR_PARTIALS };
|
|
@ -0,0 +1,15 @@
|
||||||
|
import mustache from 'mustache';
|
||||||
|
import { articleToolbarTemplate,
|
||||||
|
ARTICLE_TOOLBAR_TEMPLATE_DATA,
|
||||||
|
ARTICLE_TOOLBAR_PARTIALS } from './ArticleToolbar.stories.data';
|
||||||
|
import '../resources/skins.vector.styles/components/ArticleToolbar.less';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'ArticleToolbar'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultState = () => mustache.render(
|
||||||
|
articleToolbarTemplate,
|
||||||
|
ARTICLE_TOOLBAR_TEMPLATE_DATA,
|
||||||
|
ARTICLE_TOOLBAR_PARTIALS
|
||||||
|
);
|
|
@ -6,6 +6,7 @@ import { placeholder, htmlUserLanguageAttributes,
|
||||||
*/
|
*/
|
||||||
export const languageData = {
|
export const languageData = {
|
||||||
id: 'p-lang-btn',
|
id: 'p-lang-btn',
|
||||||
|
'is-dropdown': true,
|
||||||
// both classes needed for this to render correctly
|
// both classes needed for this to render correctly
|
||||||
class: 'mw-portlet-lang vector-menu-dropdown',
|
class: 'mw-portlet-lang vector-menu-dropdown',
|
||||||
// mw-interlanguage-selector must be present to operate in ULS mode.
|
// mw-interlanguage-selector must be present to operate in ULS mode.
|
||||||
|
|
|
@ -8,17 +8,17 @@ export default {
|
||||||
|
|
||||||
export const logo = () => mustache.render(
|
export const logo = () => mustache.render(
|
||||||
logoTemplate,
|
logoTemplate,
|
||||||
LOGO_TEMPLATE_DATA.wordmarkTaglineIcon
|
LOGO_TEMPLATE_DATA.wordmarkTaglineIcon[ 'data-logos' ]
|
||||||
);
|
);
|
||||||
|
|
||||||
export const logoWordmarkIcon = () => mustache.render(
|
export const logoWordmarkIcon = () => mustache.render(
|
||||||
logoTemplate,
|
logoTemplate,
|
||||||
LOGO_TEMPLATE_DATA.wordmarkIcon
|
LOGO_TEMPLATE_DATA.wordmarkIcon[ 'data-logos' ]
|
||||||
);
|
);
|
||||||
|
|
||||||
export const logoWordmark = () => mustache.render(
|
export const logoWordmark = () => mustache.render(
|
||||||
logoTemplate,
|
logoTemplate,
|
||||||
LOGO_TEMPLATE_DATA.wordmarkOnly
|
LOGO_TEMPLATE_DATA.wordmarkOnly[ 'data-logos' ]
|
||||||
);
|
);
|
||||||
|
|
||||||
export const noLogo = () => mustache.render(
|
export const noLogo = () => mustache.render(
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import msgs from '../i18n/en.json';
|
import msgs from '../i18n/en.json';
|
||||||
import mustache from 'mustache';
|
import mustache from 'mustache';
|
||||||
import { menuTemplate } from './Menu.stories.data';
|
import { menuTemplate, legacyMenuTemplate } from './Menu.stories.data';
|
||||||
import userLinksTemplateLegacy from '!!raw-loader!../includes/templates/LegacyUserLinks.mustache';
|
import userLinksTemplateLegacy from '!!raw-loader!../includes/templates/LegacyUserLinks.mustache';
|
||||||
import userLinksTemplate from '!!raw-loader!../includes/templates/UserLinks.mustache';
|
import userLinksTemplate from '!!raw-loader!../includes/templates/UserLinks.mustache';
|
||||||
import userLinksMoreTemplate from '!!raw-loader!../includes/templates/UserLinks__more.mustache';
|
import userLinksMoreTemplate from '!!raw-loader!../includes/templates/UserLinks__more.mustache';
|
||||||
|
@ -129,7 +129,8 @@ const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const USER_LINK_PARTIALS = {
|
const USER_LINK_PARTIALS = {
|
||||||
Menu: menuTemplate
|
Menu: menuTemplate,
|
||||||
|
LegacyMenu: legacyMenuTemplate
|
||||||
};
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
.skin-vector-legacy {
|
||||||
|
@import '../resources/skins.vector.styles.legacy/layouts/screen.less';
|
||||||
|
@import '../resources/skins.vector.styles.legacy/components/MenuTabs.less';
|
||||||
|
}
|
|
@ -1,10 +1,10 @@
|
||||||
import { htmlUserLanguageAttributes } from './utils';
|
import { htmlUserLanguageAttributes } from './utils';
|
||||||
import { placeholder } from './utils';
|
import { placeholder } from './utils';
|
||||||
|
|
||||||
|
import { articleToolbarTemplate, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY } from './ArticleToolbar.stories.data';
|
||||||
import { userLinksTemplateLegacy } from './UserLinks.stories.data';
|
import { userLinksTemplateLegacy } from './UserLinks.stories.data';
|
||||||
import { menuTemplate, legacyMenuTemplate } from './Menu.stories.data';
|
import { menuTemplate, legacyMenuTemplate } from './Menu.stories.data';
|
||||||
import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
|
import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
|
||||||
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
|
|
||||||
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
|
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
|
||||||
import { searchBoxData, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data';
|
import { searchBoxData, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data';
|
||||||
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
|
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
|
||||||
|
@ -15,36 +15,30 @@ import { logoTemplate } from './Logo.stories.data';
|
||||||
|
|
||||||
export const NAVIGATION_TEMPLATE_DATA = {
|
export const NAVIGATION_TEMPLATE_DATA = {
|
||||||
loggedInWithVariantsAndOptOut: Object.assign( {}, {
|
loggedInWithVariantsAndOptOut: Object.assign( {}, {
|
||||||
'data-portlets': {
|
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
||||||
'data-namespaces': namespaceTabsData,
|
|
||||||
'data-views': pageActionsData,
|
|
||||||
'data-variants': variantsData
|
'data-variants': variantsData
|
||||||
},
|
} ),
|
||||||
'data-search-box': searchBoxData,
|
'data-search-box': searchBoxData,
|
||||||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||||||
'msg-navigation-heading': 'Navigation menu',
|
'msg-navigation-heading': 'Navigation menu',
|
||||||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||||||
}, OPT_OUT_DATA ),
|
}, OPT_OUT_DATA ),
|
||||||
loggedOutWithVariants: {
|
loggedOutWithVariants: {
|
||||||
'data-portlets': {
|
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
|
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
|
||||||
'data-namespaces': namespaceTabsData,
|
|
||||||
'data-views': pageActionsData,
|
|
||||||
'data-variants': variantsData
|
'data-variants': variantsData
|
||||||
},
|
} ),
|
||||||
'data-search-box': searchBoxData,
|
'data-search-box': searchBoxData,
|
||||||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||||||
'msg-navigation-heading': 'Navigation menu',
|
'msg-navigation-heading': 'Navigation menu',
|
||||||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||||||
},
|
},
|
||||||
loggedInWithMoreActions: {
|
loggedInWithMoreActions: {
|
||||||
'data-portlets': {
|
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
||||||
'data-namespaces': namespaceTabsData,
|
|
||||||
'data-views': pageActionsData,
|
|
||||||
'data-actions': moreData
|
'data-actions': moreData
|
||||||
},
|
} ),
|
||||||
'data-search-box': searchBoxData,
|
'data-search-box': searchBoxData,
|
||||||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||||||
'msg-navigation-heading': 'Navigation menu',
|
'msg-navigation-heading': 'Navigation menu',
|
||||||
|
@ -54,6 +48,7 @@ export const NAVIGATION_TEMPLATE_DATA = {
|
||||||
|
|
||||||
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
|
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
|
||||||
Logo: logoTemplate,
|
Logo: logoTemplate,
|
||||||
|
ArticleToolbar: articleToolbarTemplate,
|
||||||
SearchBox: searchBoxTemplate,
|
SearchBox: searchBoxTemplate,
|
||||||
LegacySidebar: sidebarLegacyTemplate,
|
LegacySidebar: sidebarLegacyTemplate,
|
||||||
Sidebar: sidebarTemplate,
|
Sidebar: sidebarTemplate,
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import mustache from 'mustache';
|
import mustache from 'mustache';
|
||||||
import '../resources/common/common.less';
|
import '../resources/common/common.less';
|
||||||
import '../resources/skins.vector.styles.legacy/skin-legacy.less';
|
import './skin.less';
|
||||||
import legacySkinTemplate from '!!raw-loader!../includes/templates/skin-legacy.mustache';
|
import legacySkinTemplate from '!!raw-loader!../includes/templates/skin-legacy.mustache';
|
||||||
import {
|
import {
|
||||||
LEGACY_TEMPLATE_DATA,
|
LEGACY_TEMPLATE_DATA,
|
||||||
|
@ -9,10 +9,10 @@ import {
|
||||||
} from './skin.stories.data';
|
} from './skin.stories.data';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Skin (legacy)'
|
title: 'Skin'
|
||||||
};
|
};
|
||||||
|
|
||||||
export const vectorLegacyLoggedOut = () => mustache.render(
|
const vectorLegacyLoggedOutBody = () => mustache.render(
|
||||||
legacySkinTemplate,
|
legacySkinTemplate,
|
||||||
Object.assign(
|
Object.assign(
|
||||||
{},
|
{},
|
||||||
|
@ -22,7 +22,7 @@ export const vectorLegacyLoggedOut = () => mustache.render(
|
||||||
TEMPLATE_PARTIALS
|
TEMPLATE_PARTIALS
|
||||||
);
|
);
|
||||||
|
|
||||||
export const vectorLegacyLoggedIn = () => mustache.render(
|
const vectorLegacyLoggedInBody = () => mustache.render(
|
||||||
legacySkinTemplate,
|
legacySkinTemplate,
|
||||||
Object.assign(
|
Object.assign(
|
||||||
{},
|
{},
|
||||||
|
@ -31,3 +31,9 @@ export const vectorLegacyLoggedIn = () => mustache.render(
|
||||||
),
|
),
|
||||||
TEMPLATE_PARTIALS
|
TEMPLATE_PARTIALS
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const vectorLegacyLoggedOut = () =>
|
||||||
|
`<div class="skin-vector-legacy">${vectorLegacyLoggedOutBody()}</div>`;
|
||||||
|
|
||||||
|
export const vectorLegacyLoggedIn = () =>
|
||||||
|
`<div class="skin-vector-legacy">${vectorLegacyLoggedInBody()}</div>`;
|
Loading…
Reference in New Issue