From d1f1f324187bc77ad29c14ead0b988368213f8b2 Mon Sep 17 00:00:00 2001 From: bwang Date: Thu, 22 Jul 2021 12:27:33 -0500 Subject: [PATCH] Update UserLinks and SearchBox storybook stories to match prod - Update UserLinks data to wrap link content with spans and other markup changes - Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories - Add new SearchBox story to account for search collapse behavior in modern Vector Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5 --- .storybook/icons.less | 13 ++- .../components/MenuDropdown.less | 2 +- stories/SearchBox.stories.data.js | 19 +++- stories/SearchBox.stories.js | 13 ++- stories/UserLinks.stories.data.js | 89 ++++++++++--------- stories/types.js | 3 +- 6 files changed, 89 insertions(+), 50 deletions(-) diff --git a/.storybook/icons.less b/.storybook/icons.less index e7c9e1fe8..4c1c710d9 100644 --- a/.storybook/icons.less +++ b/.storybook/icons.less @@ -56,11 +56,18 @@ } .mw-ui-icon-wikimedia-ellipsis:before { - background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eellipsis%3C/title%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A") !important; + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eellipsis%3C/title%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A"); } -.mw-ui-icon-wikimedia-userAvatar:before, -#pt-anonuserpage, +.mw-ui-icon-wikimedia-search:before { + background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3Esearch%3C%2Ftitle%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.2%2013.6a7%207%200%20111.4-1.4l5.4%205.4-1.4%201.4-5.4-5.4zM13%208A5%205%200%20113%208a5%205%200%200110%200z%22%2F%3E%3C%2Fsvg%3E"); +} + +.mw-ui-icon-wikimedia-userAvatar:before { + background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Euser avatar%3C/title%3E%3Cpath d='M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z'/%3E%3Ccircle cx='10' cy='5.5' r='4.5'/%3E%3C/svg%3E"); +} + +.vector-user-menu-legacy #pt-anonuserpage, .vector-user-menu-legacy #pt-userpage a { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg==") !important; } diff --git a/resources/skins.vector.styles.legacy/components/MenuDropdown.less b/resources/skins.vector.styles.legacy/components/MenuDropdown.less index d0ec78b14..894b8fb74 100644 --- a/resources/skins.vector.styles.legacy/components/MenuDropdown.less +++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less @@ -1,6 +1,6 @@ // Extends the common MenuDropdown, but allows it to be opened via hover. -.vector-menu-dropdown { +.vector-menu-dropdown:not( .vector-user-menu ) { li { font-size: @font-size-tabs; } diff --git a/stories/SearchBox.stories.data.js b/stories/SearchBox.stories.data.js index 3b944bf05..4fe8f5660 100644 --- a/stories/SearchBox.stories.data.js +++ b/stories/SearchBox.stories.data.js @@ -5,12 +5,10 @@ import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.mustache'; import { htmlUserLanguageAttributes } from './utils'; -export { searchBoxTemplate }; - /** * @type {SearchData} */ -export const searchBoxData = { +const legacySearchBoxData = { 'form-action': '/w/index.php', class: 'vector-search-box vector-search-show-thumbnail', 'html-user-language-attributes': htmlUserLanguageAttributes, @@ -20,3 +18,18 @@ export const searchBoxData = { 'html-button-search-fallback': '', 'html-button-search': '' }; + +/** + * @type {SearchData} + */ +const searchBoxData = Object.assign( {}, legacySearchBoxData, { + class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses', + 'is-collapsible': true, + 'href-search': '/wiki/Special:Search' +} ); + +export { + searchBoxTemplate, + legacySearchBoxData, + searchBoxData +}; diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js index d1ab7f932..4dccfa750 100644 --- a/stories/SearchBox.stories.js +++ b/stories/SearchBox.stories.js @@ -1,9 +1,18 @@ import mustache from 'mustache'; import '../resources/skins.vector.styles/SearchBox.less'; -import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data'; +import '../resources/skins.vector.styles/layouts/screen.less'; +import { searchBoxData, legacySearchBoxData, searchBoxTemplate } from './SearchBox.stories.data'; export default { title: 'SearchBox' }; -export const simpleSearch = () => mustache.render( searchBoxTemplate, searchBoxData ); +export const legacySimpleSearch = () => ` + ${mustache.render( searchBoxTemplate, legacySearchBoxData )} +`; + +export const simpleSearch = () => ` +
+ ${mustache.render( searchBoxTemplate, searchBoxData )} +
+`; diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js index b5b239aaf..fa699c941 100644 --- a/stories/UserLinks.stories.data.js +++ b/stories/UserLinks.stories.data.js @@ -7,8 +7,20 @@ import { menuTemplate } from './Menu.stories.data'; import userLinksTemplateLegacy from '!!raw-loader!../includes/templates/legacy/UserLinks.mustache'; import userLinksTemplate from '!!raw-loader!../includes/templates/UserLinks.mustache'; import userLinksMoreTemplate from '!!raw-loader!../includes/templates/UserLinks__more.mustache'; +import userLinksLogoutTemplate from '!!raw-loader!../includes/templates/UserLinks__logout.mustache'; +import userLinksLoginTemplate from '!!raw-loader!../includes/templates/UserLinks__login.mustache'; import { helperClassName, helperMakeMenuData } from './utils'; +/** + * Legacy User Links + */ + +const ECHO_ITEMS = `
  • Alerts (0)
  • Notices (3)
    • `; +const USERNAME_ITEM = `
  • WikiUser
    • `; +const REST_ITEMS = `
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
    • `; +const LOGOUT_ITEM = `
  • Log out
    • `; +const ULS_LANGUAGE_SELECTOR = '
  • English
    • '; + /** * @type {MenuDefinition} */ @@ -18,24 +30,6 @@ const loggedOut = helperMakeMenuData( helperClassName( 'vector-user-menu-legacy' ) ); -const ECHO_ITEMS = `
  • Alerts (0)
  • Notices (3)
    • `; -const USERNAME_ITEM = `
  • WikiUser
    • `; -const REST_ITEMS = `
  • Talk
  • Sandbox
  • Preferences
  • Beta
  • Watchlist
  • Contributions
    • `; -const LOGOUT_ITEM = `
  • Log out
    • `; -const ULS_LANGUAGE_SELECTOR = '
  • English
    • '; - -const USER_LINKS_ITEMS = ` -
  • Talk
    • -
  • Sandbox
    • -
  • Preferences
    • -
  • Watchlist
    • -
  • Contributions
    • -`; -const ANON_USER_LINKS_ITEMS = ` -
  • Talk
    • -
  • Contributions
    • -`; - /** * @type {MenuDefinition} */ @@ -63,46 +57,61 @@ const PERSONAL_MENU_TEMPLATE_DATA = { loggedInWithULS }; +/** + * Modern User Links + */ + +const LOGGED_IN_ITEMS = ` + +
  • Talk
    • +
  • Sandbox
    • +
  • Preferences
    • +
  • Watchlist
    • +
  • Contributions
    • +`; +const LOGGED_OUT_ITEMS = ` +
  • Talk
    • +
  • Contributions
    • +`; + const additionalUserMoreData = { class: 'vector-menu vector-user-menu-more', - "heading-class": 'vector-menu-heading', - "is-dropdown": false + 'heading-class': 'vector-menu-heading', + 'is-dropdown': false }; const userMoreHtmlItems = ( isAnon = true ) => mustache.render( userLinksMoreTemplate, { 'is-anon': isAnon, 'html-create-account': `Create account`, - 'data-user-page': helperMakeMenuData( 'user-page', USERNAME_ITEM ), + 'data-user-page': helperMakeMenuData( 'user-page', ` + + ` ), 'data-notifications': helperMakeMenuData( 'notifications', ECHO_ITEMS ) } ); const loggedInData = { class: 'vector-user-menu vector-menu-dropdown vector-user-menu-logged-in', + 'is-dropdown': true, 'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-userAvatar', 'is-anon': false, - 'html-after-portal': ` -
    - Log out -
    - `, - 'is-dropdown': true + 'html-after-portal': mustache.render( userLinksLogoutTemplate, { + htmlLogout: `Log out` + } ) }; const loggedOutData = { class: 'vector-user-menu vector-menu-dropdown vector-user-menu-logged-out', + 'is-dropdown': true, 'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis', 'is-anon': true, - 'html-before-portal': ` -
    - -
    -
    -

    - Pages for logged out editors (learn more): -

    -
    - `, - 'is-dropdown': true + 'html-before-portal': mustache.render( userLinksLoginTemplate, { + htmlCreateAccount: `Create account`, + htmlLogin: `Log in`, + msgLearnMore: `Pages for logged out editors `, + htmlLearnMoreLink: `(learn more):` + } ) }; /** @@ -110,7 +119,7 @@ const loggedOutData = { */ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = { 'data-user-more': helperMakeMenuData( 'personal-more', userMoreHtmlItems( false ), additionalUserMoreData ), - 'data-user-menu': helperMakeMenuData( 'new-personal', USER_LINKS_ITEMS, loggedInData ) + 'data-user-menu': helperMakeMenuData( 'new-personal', LOGGED_IN_ITEMS, loggedInData ) }; /** @@ -118,7 +127,7 @@ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = { */ const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = { 'data-user-more': helperMakeMenuData( 'personal-more', userMoreHtmlItems( true ), additionalUserMoreData ), - 'data-user-menu': helperMakeMenuData( 'new-personal', ANON_USER_LINKS_ITEMS, loggedOutData ) + 'data-user-menu': helperMakeMenuData( 'new-personal', LOGGED_OUT_ITEMS, loggedOutData ) }; export { diff --git a/stories/types.js b/stories/types.js index 00f10a62c..c5167c0dc 100644 --- a/stories/types.js +++ b/stories/types.js @@ -42,13 +42,14 @@ * @property {string} [html-user-language-attributes] * @property {string} form-action URL * @property {string|null} html-input - * @property {boolean} [is-collapsible] * @property {string|null} [class] of the menu * @property {string|null} page-title the title of the search page * @property {string|null} html-button-search-fallback * @property {string|null} html-button-search * @property {string} [input-location] An identifier corresponding the position of the search * widget on the page, e.g. "header-navigation" + * @property {boolean} [is-collapsible] + * @property {string} [href-search] */ /**