diff --git a/dev-scripts/setup-storybook.sh b/dev-scripts/setup-storybook.sh index 0002bb9..14afa5f 100755 --- a/dev-scripts/setup-storybook.sh +++ b/dev-scripts/setup-storybook.sh @@ -9,7 +9,7 @@ rm -f .storybook/resolve-imports/mediawiki.skin.variables.less cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-imports/ # Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code. -curl -sS "https://en.wikipedia.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface|mediawiki.ui.icon|mediawiki.ui.button" -o .storybook/integration.less +curl -sS "https://www.mediawiki.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface|mediawiki.ui.icon|mediawiki.ui.button" -o .storybook/integration.less curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.skin.defaults.less curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.mixins.less curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.ui/variables.less diff --git a/includes/templates/Header.mustache b/includes/templates/Header.mustache index 5be60f0..d0e0db9 100644 --- a/includes/templates/Header.mustache +++ b/includes/templates/Header.mustache @@ -10,7 +10,7 @@ title="{{msg-vector-main-menu-tooltip}}"> {{msg-vector-action-toggle-sidebar}} - {{>Logo}} + {{#data-logos}}{{>Logo}}{{/data-logos}} {{#data-search-box}}{{>SearchBox}}{{/data-search-box}} {{#data-vector-user-links}}{{>UserLinks}}{{/data-vector-user-links}} diff --git a/includes/templates/Logo.mustache b/includes/templates/Logo.mustache index c42f912..b44a4f6 100644 --- a/includes/templates/Logo.mustache +++ b/includes/templates/Logo.mustache @@ -3,7 +3,6 @@ string link-mainpage link to the main page (from SkinMustache in core) string msg-sitesubtitle the contents of the sitesubtitle message key }} -{{#data-logos}} -{{/data-logos}} diff --git a/package.json b/package.json index 49dcc76..5955b41 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "scripts": { - "start": "bash dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006", + "start": "bash dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006 -s resources/skins.vector.styles", "test": "npm -s run lint && tsc && npm -s run doc", "test:size": "node ./tests/resource-loader-bundlesize.js", "lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n", @@ -11,7 +11,7 @@ "lint:styles": "stylelint \"**/*.{less,css}\"", "lint:i18n": "banana-checker --requireLowerCase=0 i18n/", "selenium-test": "npm -s run test:size", - "doc": "jsdoc -c jsdoc.json && npm run build-storybook", + "doc": "jsdoc -c jsdoc.json && npm run build-storybook -s resources/skins.vector.styles", "build-storybook": "bash dev-scripts/setup-storybook.sh && build-storybook --quiet --loglevel warn -o docs/ui", "minify-svg": "svgo --config=.svgo.config.js -q -r -f resources/", "pre-commit": "[ \"${PRE_COMMIT:-1}\" -eq 0 ] || npm -s t" diff --git a/resources/skins.vector.styles.legacy/layouts/screen.less b/resources/skins.vector.styles.legacy/layouts/screen.less index b81ccd4..18a8a0b 100644 --- a/resources/skins.vector.styles.legacy/layouts/screen.less +++ b/resources/skins.vector.styles.legacy/layouts/screen.less @@ -113,7 +113,7 @@ body { } /* Search */ -#p-search { +.vector-search-box { float: left; margin-right: 0.5em; margin-left: 0.5em; diff --git a/stories/Header.stories.data.js b/stories/Header.stories.data.js new file mode 100644 index 0000000..7da57a4 --- /dev/null +++ b/stories/Header.stories.data.js @@ -0,0 +1,23 @@ +import headerTemplate from '!!raw-loader!../includes/templates/Header.mustache'; +import { logoTemplate as Logo, LOGO_TEMPLATE_DATA } from './Logo.stories.data'; +import { searchBoxTemplate as SearchBox, + searchBoxDataWithCollapsing, + SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data'; +import { userLinksTemplate as UserLinks, + USER_LINKS_LOGGED_OUT_TEMPLATE_DATA, + USER_LINK_PARTIALS } from './UserLinks.stories.data'; + +export const HEADER_TEMPLATE_PARTIALS = Object.assign( { + SearchBox, + Logo, + UserLinks +}, SEARCH_TEMPLATE_PARTIALS, USER_LINK_PARTIALS ); + +export { headerTemplate }; + +export const HEADER_TEMPLATE_DATA = Object.assign( { + 'msg-vector-main-menu-tooltip': 'Tooltip', + 'msg-vector-action-toggle-sidebar': 'Toggle', + 'data-search-box': searchBoxDataWithCollapsing, + 'data-vector-user-links': USER_LINKS_LOGGED_OUT_TEMPLATE_DATA +}, LOGO_TEMPLATE_DATA.wordmarkTaglineIcon ); diff --git a/stories/Header.stories.js b/stories/Header.stories.js new file mode 100644 index 0000000..f4c33fb --- /dev/null +++ b/stories/Header.stories.js @@ -0,0 +1,14 @@ +import mustache from 'mustache'; +import { HEADER_TEMPLATE_DATA, HEADER_TEMPLATE_PARTIALS, + headerTemplate } from './Header.stories.data'; +import '../resources/skins.vector.styles/components/Header.less'; + +export default { + title: 'Header' +}; + +export const header = () => mustache.render( + headerTemplate, + HEADER_TEMPLATE_DATA, + HEADER_TEMPLATE_PARTIALS +); diff --git a/stories/SearchBox.stories.data.js b/stories/SearchBox.stories.data.js index 95efcc8..57cac1a 100644 --- a/stories/SearchBox.stories.data.js +++ b/stories/SearchBox.stories.data.js @@ -9,7 +9,7 @@ import { htmlUserLanguageAttributes } from './utils'; /** * @type {SearchData} */ -const legacySearchBoxData = { +const searchBoxData = { 'form-action': '/w/index.php', class: 'vector-search-box vector-search-show-thumbnail', 'html-user-language-attributes': htmlUserLanguageAttributes, @@ -23,8 +23,8 @@ const legacySearchBoxData = { /** * @type {SearchData} */ -const searchBoxData = Object.assign( {}, legacySearchBoxData, { - class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses', +const searchBoxDataWithCollapsing = Object.assign( {}, searchBoxData, { + class: `${searchBoxData.class} vector-search-box-collapses`, 'is-collapsible': true, 'data-collapse-icon': { icon: 'wikimedia-search', @@ -42,6 +42,6 @@ const SEARCH_TEMPLATE_PARTIALS = { export { SEARCH_TEMPLATE_PARTIALS, searchBoxTemplate, - legacySearchBoxData, + searchBoxDataWithCollapsing, searchBoxData }; diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js index 028939b..bfaaf2d 100644 --- a/stories/SearchBox.stories.js +++ b/stories/SearchBox.stories.js @@ -1,7 +1,7 @@ import mustache from 'mustache'; import '../resources/skins.vector.styles/SearchBox.less'; import '../resources/skins.vector.styles/layouts/screen.less'; -import { searchBoxData, legacySearchBoxData, searchBoxTemplate, +import { searchBoxData, searchBoxDataWithCollapsing, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data'; @@ -9,10 +9,10 @@ export default { title: 'SearchBox' }; -export const legacySimpleSearch = () => ` - ${mustache.render( searchBoxTemplate, legacySearchBoxData, SEARCH_TEMPLATE_PARTIALS )} -`; - -export const simpleSearch = () => ` +export const searchBoxWithoutCollapsing = () => ` ${mustache.render( searchBoxTemplate, searchBoxData, SEARCH_TEMPLATE_PARTIALS )} `; + +export const searchBoxWithCollapsing = () => ` + ${mustache.render( searchBoxTemplate, searchBoxDataWithCollapsing, SEARCH_TEMPLATE_PARTIALS )} +`; diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js index 1d8a41f..6307563 100644 --- a/stories/UserLinks.stories.data.js +++ b/stories/UserLinks.stories.data.js @@ -132,11 +132,15 @@ const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = { 'data-user-menu': helperMakeMenuData( 'new-personal', LOGGED_OUT_ITEMS, loggedOutData ) }; +const USER_LINK_PARTIALS = { + Menu: menuTemplate +}; + export { PERSONAL_MENU_TEMPLATE_DATA, USER_LINKS_LOGGED_IN_TEMPLATE_DATA, USER_LINKS_LOGGED_OUT_TEMPLATE_DATA, - menuTemplate, + USER_LINK_PARTIALS, userLinksTemplateLegacy, userLinksTemplate }; diff --git a/stories/UserLinks.stories.js b/stories/UserLinks.stories.js index ecede39..d00221e 100644 --- a/stories/UserLinks.stories.js +++ b/stories/UserLinks.stories.js @@ -1,7 +1,7 @@ import mustache from 'mustache'; -import { menuTemplate } from './Menu.stories.data'; import { PERSONAL_MENU_TEMPLATE_DATA, USER_LINKS_LOGGED_IN_TEMPLATE_DATA, USER_LINKS_LOGGED_OUT_TEMPLATE_DATA } from './UserLinks.stories.data'; -import { userLinksTemplateLegacy, userLinksTemplate } from './UserLinks.stories.data'; +import { userLinksTemplateLegacy, userLinksTemplate, + USER_LINK_PARTIALS } from './UserLinks.stories.data'; import '../resources/skins.vector.styles.legacy/components/UserLinks.less'; import '../resources/skins.vector.styles/components/UserLinks.less'; @@ -14,9 +14,7 @@ export const legacyLoggedOut = () => mustache.render( { 'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut }, - { - Menu: menuTemplate - } + USER_LINK_PARTIALS ); export const legacyLoggedInWithEcho = () => mustache.render( @@ -24,9 +22,7 @@ export const legacyLoggedInWithEcho = () => mustache.render( { 'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho }, - { - Menu: menuTemplate - } + USER_LINK_PARTIALS ); export const legacyLoggedInWithULS = () => mustache.render( @@ -34,23 +30,17 @@ export const legacyLoggedInWithULS = () => mustache.render( { 'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithULS }, - { - Menu: menuTemplate - } + USER_LINK_PARTIALS ); export const loggedInUserLinks = () => mustache.render( userLinksTemplate, USER_LINKS_LOGGED_IN_TEMPLATE_DATA, - { - Menu: menuTemplate - } + USER_LINK_PARTIALS ); export const loggedOutUserLinks = () => mustache.render( userLinksTemplate, USER_LINKS_LOGGED_OUT_TEMPLATE_DATA, - { - Menu: menuTemplate - } + USER_LINK_PARTIALS );