diff --git a/stories/ArticleToolbar.stories.data.js b/stories/ArticleToolbar.stories.data.js
new file mode 100644
index 00000000..dede65f5
--- /dev/null
+++ b/stories/ArticleToolbar.stories.data.js
@@ -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 };
diff --git a/stories/ArticleToolbar.stories.js b/stories/ArticleToolbar.stories.js
new file mode 100644
index 00000000..5f8aa9cb
--- /dev/null
+++ b/stories/ArticleToolbar.stories.js
@@ -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
+);
diff --git a/stories/LanguageButton.stories.data.js b/stories/LanguageButton.stories.data.js
index f019a272..85f17ab2 100644
--- a/stories/LanguageButton.stories.data.js
+++ b/stories/LanguageButton.stories.data.js
@@ -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.
diff --git a/stories/Logo.stories.js b/stories/Logo.stories.js
index 836df0d2..9b2d4d31 100644
--- a/stories/Logo.stories.js
+++ b/stories/Logo.stories.js
@@ -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(
diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js
index 50858c1b..97934c90 100644
--- a/stories/UserLinks.stories.data.js
+++ b/stories/UserLinks.stories.data.js
@@ -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 {
diff --git a/stories/skin.less b/stories/skin.less
new file mode 100644
index 00000000..4dd1e8de
--- /dev/null
+++ b/stories/skin.less
@@ -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';
+}
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index 95178483..ee0c62eb 100644
--- a/stories/skin.stories.data.js
+++ b/stories/skin.stories.data.js
@@ -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,
diff --git a/stories/legacy.stories.js b/stories/skin.stories.js
similarity index 60%
rename from stories/legacy.stories.js
rename to stories/skin.stories.js
index d6075c27..1001f924 100644
--- a/stories/legacy.stories.js
+++ b/stories/skin.stories.js
@@ -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 = () =>
+ `${vectorLegacyLoggedOutBody()}
`;
+
+export const vectorLegacyLoggedIn = () =>
+ `${vectorLegacyLoggedInBody()}
`;