jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Storybook] Fixes state of various components 

Change-Id: Icd3fef87485aaa7abc2f10534ccdc8960ef06f1d
This commit is contained in:
Jon Robson 2022-06-08 11:58:52 -07:00
parent 189b953096
commit c8d2c6e460
8 changed files with 72 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
stories/ArticleToolbar.stories.data.js Normal file
View File

@ -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 };

15
stories/ArticleToolbar.stories.js Normal file
View File

@ -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
);

1
stories/LanguageButton.stories.data.js
View File

@ -6,6 +6,7 @@ import { placeholder, htmlUserLanguageAttributes,
*/
export const languageData = {
id: 'p-lang-btn',
'is-dropdown': true,
// both classes needed for this to render correctly
class: 'mw-portlet-lang vector-menu-dropdown',
// mw-interlanguage-selector must be present to operate in ULS mode.

6
stories/Logo.stories.js
View File

@ -8,17 +8,17 @@ export default {
export const logo = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.wordmarkTaglineIcon
LOGO_TEMPLATE_DATA.wordmarkTaglineIcon[ 'data-logos' ]
);
export const logoWordmarkIcon = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.wordmarkIcon
LOGO_TEMPLATE_DATA.wordmarkIcon[ 'data-logos' ]
);
export const logoWordmark = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.wordmarkOnly
LOGO_TEMPLATE_DATA.wordmarkOnly[ 'data-logos' ]
);
export const noLogo = () => mustache.render(

5
stories/UserLinks.stories.data.js
View File

@ -1,6 +1,6 @@
import msgs from '../i18n/en.json';
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 userLinksTemplate from '!!raw-loader!../includes/templates/UserLinks.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 = {
Menu: menuTemplate
Menu: menuTemplate,
LegacyMenu: legacyMenuTemplate
};
export {

4
stories/skin.less Normal file
View File

@ -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';
}

21
stories/skin.stories.data.js
View File

@ -1,10 +1,10 @@
import { htmlUserLanguageAttributes } from './utils';
import { placeholder } from './utils';
import { articleToolbarTemplate, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY } from './ArticleToolbar.stories.data';
import { userLinksTemplateLegacy } from './UserLinks.stories.data';
import { menuTemplate, legacyMenuTemplate } from './Menu.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 { searchBoxData, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.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 = {
loggedInWithVariantsAndOptOut: Object.assign( {}, {
'data-portlets': {
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespaces': namespaceTabsData,
'data-views': pageActionsData,
'data-variants': variantsData
},
} ),
'data-search-box': searchBoxData,
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
'msg-navigation-heading': 'Navigation menu',
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
}, OPT_OUT_DATA ),
loggedOutWithVariants: {
'data-portlets': {
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
'data-namespaces': namespaceTabsData,
'data-views': pageActionsData,
'data-variants': variantsData
},
} ),
'data-search-box': searchBoxData,
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
'msg-navigation-heading': 'Navigation menu',
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
},
loggedInWithMoreActions: {
'data-portlets': {
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespaces': namespaceTabsData,
'data-views': pageActionsData,
'data-actions': moreData
},
} ),
'data-search-box': searchBoxData,
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
'msg-navigation-heading': 'Navigation menu',
@ -54,6 +48,7 @@ export const NAVIGATION_TEMPLATE_DATA = {
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Logo: logoTemplate,
ArticleToolbar: articleToolbarTemplate,
SearchBox: searchBoxTemplate,
LegacySidebar: sidebarLegacyTemplate,
Sidebar: sidebarTemplate,

14
stories/legacy.stories.js → stories/skin.stories.js
View File

@ -1,6 +1,6 @@
import mustache from 'mustache';
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 {
LEGACY_TEMPLATE_DATA,
@ -9,10 +9,10 @@ import {
} from './skin.stories.data';
export default {
title: 'Skin (legacy)'
title: 'Skin'
};
export const vectorLegacyLoggedOut = () => mustache.render(
const vectorLegacyLoggedOutBody = () => mustache.render(
legacySkinTemplate,
Object.assign(
{},
@ -22,7 +22,7 @@ export const vectorLegacyLoggedOut = () => mustache.render(
TEMPLATE_PARTIALS
);
export const vectorLegacyLoggedIn = () => mustache.render(
const vectorLegacyLoggedInBody = () => mustache.render(
legacySkinTemplate,
Object.assign(
{},
@ -31,3 +31,9 @@ export const vectorLegacyLoggedIn = () => mustache.render(
),
TEMPLATE_PARTIALS
);
export const vectorLegacyLoggedOut = () =>
`<div class="skin-vector-legacy">${vectorLegacyLoggedOutBody()}</div>`;
export const vectorLegacyLoggedIn = () =>
`<div class="skin-vector-legacy">${vectorLegacyLoggedInBody()}</div>`;