From d8351bc0aeb4e2d147f6df0679fd6c75dfdeac34 Mon Sep 17 00:00:00 2001 From: bwang Date: Tue, 22 Jun 2021 11:12:50 -0500 Subject: [PATCH] Update user links storybook - Remove logged in links from logged out user links storybook - Add icons to all user links Bug: T284584 Change-Id: I7fbe22b257d1a6e08c27315d69b0ae1233868aed --- .storybook/icons.less | 28 ++++++++++++++++++++++++++++ stories/UserLinks.stories.data.js | 20 ++++++++++++++++---- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/.storybook/icons.less b/.storybook/icons.less index 446379a18..446a64508 100644 --- a/.storybook/icons.less +++ b/.storybook/icons.less @@ -27,6 +27,34 @@ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Elanguage%3C/title%3E%3Cg fill='%2354595d'%3E%3Cpath d='M20 18h-1.44a.61.61 0 01-.4-.12.81.81 0 01-.23-.31L17 15h-5l-1 2.54a.77.77 0 01-.22.3.59.59 0 01-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 01-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 01-2.91-1.41 11.46 11.46 0 002.81-5.37H12V4H7.31a4 4 0 00-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 005 10.7a17.19 17.19 0 01-5 2.1q.56.82.87 1.38a23.28 23.28 0 005.22-2.51 15.64 15.64 0 003.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 01-2.45 4.45 9.11 9.11 0 01-2.46-4.45z'/%3E%3C/g%3E%3C/svg%3E"); } +.mw-ui-icon-wikimedia-userTalk: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%3Euser talk%3C/title%3E%3Cpath d='M18 0H2a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V2a2 2 0 00-2-2zm-4 4a1.5 1.5 0 11-1.5 1.5A1.5 1.5 0 0114 4zM6 4a1.5 1.5 0 11-1.5 1.5A1.5 1.5 0 016 4zm4 8c-2.61 0-4.83-.67-5.65-3h11.3c-.82 2.33-3.04 3-5.65 3z'/%3E%3C/svg%3E"); +} + +.mw-ui-icon-wikimedia-markup: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%3Emarkup%3C/title%3E%3Cpath d='M6.5 3.5L0 10l1.5 1.5 5 5L8 15l-5-5 5-5zm7 0L12 5l5 5-5 5 1.5 1.5L20 10z'/%3E%3C/svg%3E"); +} + +.mw-ui-icon-wikimedia-settings: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' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esettings%3C/title%3E%3Cg transform='translate(10 10)'%3E%3Cpath id='a' d='M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3'/%3E%3Cuse transform='rotate(45)' xlink:href='%23a'/%3E%3Cuse transform='rotate(90)' xlink:href='%23a'/%3E%3Cuse transform='rotate(135)' xlink:href='%23a'/%3E%3C/g%3E%3Cpath d='M10 2.5a7.5 7.5 0 000 15 7.5 7.5 0 000-15v4a3.5 3.5 0 010 7 3.5 3.5 0 010-7'/%3E%3C/svg%3E"); +} + +.mw-ui-icon-wikimedia-unStar: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%3Eun-star%3C/title%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z'/%3E%3C/svg%3E"); +} + +.mw-ui-icon-wikimedia-userContributions: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%3Euser contributions%3C/title%3E%3Ccircle cx='2' cy='4' r='2'/%3E%3Ccircle cx='2' cy='10' r='2'/%3E%3Ccircle cx='2' cy='16' r='2'/%3E%3Ccircle cx='15.5' cy='10.5' r='2.5'/%3E%3Cpath d='M6 15h3v2H6zm0-6h5v2H6zm0-6h11v2H6zm9.5 10.556c-3.33 0-4.5 1.666-4.5 2.777V18h9v-1.667c0-1.11-1.17-2.777-4.5-2.777z'/%3E%3C/svg%3E"); +} + +.mw-ui-icon-wikimedia-logIn: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%3Elog in%3C/title%3E%3Cpath d='M1 11v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6h8V5l4.75 5L9 15v-4H1z'/%3E%3C/svg%3E"); +} + +.mw-ui-icon-wikimedia-logOut: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%3Elog out%3C/title%3E%3Cpath d='M3 3h8V1H3a2 2 0 00-2 2v14a2 2 0 002 2h8v-2H3z'/%3E%3Cpath d='M13 5v4H5v2h8v4l6-5z'/%3E%3C/svg%3E"); +} + #pt-anonuserpage, #pt-userpage a, #p-new-personal-label { diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js index 17741e420..a1d2bfdae 100644 --- a/stories/UserLinks.stories.data.js +++ b/stories/UserLinks.stories.data.js @@ -22,6 +22,18 @@ const REST_ITEMS = `
  • 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} */ @@ -59,7 +71,7 @@ const loggedInData = { 'is-anon': true, 'html-after-portal': `
    - Log out + Log out
    ` }; @@ -68,7 +80,7 @@ const loggedOutData = { 'is-anon': true, 'html-before-portal': `
    - Log in +

    @@ -85,7 +97,7 @@ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = { 'is-anon': false, 'data-user-page': helperMakeMenuData( 'user-page', USERNAME_ITEM ), 'data-notifications': helperMakeMenuData( 'notifications', ECHO_ITEMS ), - 'data-user-menu': helperMakeMenuData( 'new-personal', REST_ITEMS, Object.assign( {}, additionalMenuData, loggedInData ) ) + 'data-user-menu': helperMakeMenuData( 'new-personal', USER_LINKS_ITEMS, Object.assign( {}, additionalMenuData, loggedInData ) ) }; /** @@ -94,7 +106,7 @@ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = { const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = { 'is-anon': true, 'html-create-account': `Create account`, - 'data-user-menu': helperMakeMenuData( 'new-personal', REST_ITEMS, Object.assign( {}, additionalMenuData, loggedOutData ) ) + 'data-user-menu': helperMakeMenuData( 'new-personal', ANON_USER_LINKS_ITEMS, Object.assign( {}, additionalMenuData, loggedOutData ) ) }; export {