Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Telekom user menu (WIP) #2208

Merged
merged 59 commits into from
Feb 8, 2024
Merged
Changes from 1 commit
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
0caaa04
feat: Telekom user menu (WIP)
tallence-dsulyok Nov 16, 2023
ea542e8
fix: js error when closing menu-flyout
tallence-dsulyok Nov 16, 2023
9a81601
removed TODOs
tallence-dsulyok Nov 16, 2023
16a1a3f
updated default URLs
tallence-dsulyok Nov 20, 2023
0c165f7
cleaned up demo
tallence-dsulyok Nov 20, 2023
7c2c32a
added profile menu demo draft to storybook
tallence-dsulyok Nov 21, 2023
2679c65
storybook: added component
tallence-dsulyok Nov 23, 2023
79d169f
storybook: added missing attributes
tallence-dsulyok Nov 23, 2023
7b28515
storybook: added missing attributes
tallence-dsulyok Nov 23, 2023
c1e8877
storybook: added missing attributes
tallence-dsulyok Nov 23, 2023
f231523
default value for serviceLinks
tallence-dsulyok Nov 23, 2023
321c025
debug service links
tallence-dsulyok Nov 23, 2023
50a8d5d
debug service links
tallence-dsulyok Nov 23, 2023
1141c5b
added a11y labels: close menu, open (mobile) menu
tallence-dsulyok Nov 29, 2023
d2a344c
added a11y labels: close menu, open (mobile) menu
tallence-dsulyok Nov 29, 2023
910209c
storybook: added argsTable
tallence-dsulyok Nov 29, 2023
1eab187
storybook: added loggedIn-toggle to argsTable
tallence-dsulyok Nov 29, 2023
a889694
storybook: added loggedIn-toggle to argsTable
tallence-dsulyok Nov 29, 2023
5b840cb
storybook: added loggedIn-toggle to argsTable (undo removing props)
tallence-dsulyok Nov 29, 2023
8af5dd2
storybook: loggedIn default true
tallence-dsulyok Nov 29, 2023
84113e7
storybook: add profile menu as separate story
tallence-dsulyok Dec 3, 2023
0bac80b
storybook: add profile menu as separate story - enable argsTable
tallence-dsulyok Dec 3, 2023
c9edc60
storybook: add profile menu as separate story - replaced dummy component
tallence-dsulyok Dec 3, 2023
beb68d6
storybook: add profile menu as separate story - style preview
tallence-dsulyok Dec 3, 2023
8f29a9d
storybook: add profile menu as separate story - style preview
tallence-dsulyok Dec 3, 2023
c828d8a
storybook: add profile menu as separate story - style preview
tallence-dsulyok Dec 3, 2023
1dde0d9
storybook: add profile menu as separate story - hide args table
tallence-dsulyok Dec 3, 2023
e1493a3
storybook: add profile menu as separate story - added component prope…
tallence-dsulyok Dec 3, 2023
7f79bd7
storybook: add profile menu as separate story - separate logged in / …
tallence-dsulyok Dec 4, 2023
673b982
storybook: add profile menu as separate story - increased preview height
tallence-dsulyok Dec 4, 2023
34d9f29
storybook: added usage docs, removed and referenced profile menu from…
tallence-dsulyok Dec 11, 2023
7337f1b
storybook: fix build
tallence-dsulyok Dec 11, 2023
49a1256
storybook: extended usage description
tallence-dsulyok Dec 12, 2023
368cd5a
storybook: extended usage description
tallence-dsulyok Dec 12, 2023
5d01e7c
storybook: extended usage description
tallence-dsulyok Dec 12, 2023
8d9f356
storybook: updated example code
tallence-dsulyok Dec 12, 2023
fc2a179
storybook: prevent vertical flipping of menu-flyout-list in profile-menu
tallence-dsulyok Dec 12, 2023
b2aafc6
yarn lint & format
tallence-dsulyok Dec 13, 2023
c8324ec
fix: code format
tallence-dsulyok Dec 13, 2023
bfc49f8
docs: updated profile-menu dependencies
tallence-dsulyok Dec 13, 2023
8cf3953
fix: menu status condition
tallence-dsulyok Dec 13, 2023
cb3a25f
refactor: renamed component
tallence-dsulyok Dec 13, 2023
d964f57
refactor: renamed properties
tallence-dsulyok Dec 13, 2023
343a616
refactor: renamed component folder
tallence-dsulyok Dec 13, 2023
34330ea
fix: display in storybook
tallence-dsulyok Dec 13, 2023
d5531bb
fix(storybook): state changeable in canvas tab
tallence-dsulyok Dec 14, 2023
efb267c
fix(storybook): logout label in canvas tab after state change
tallence-dsulyok Dec 14, 2023
6e51c7f
fix: enable shadow dom
tallence-dsulyok Dec 14, 2023
091b225
refactor: revert change of focus handling wehn closing menu-flyout
tallence-dsulyok Jan 9, 2024
780f931
fix: checkmark size in loggedIn-badge
tallence-dsulyok Jan 15, 2024
de59c0b
fix: trigger interaction state (remain black when activated)
tallence-dsulyok Jan 15, 2024
bf2e46a
fix: close menu with Escape
tallence-dsulyok Jan 15, 2024
6fdf35e
fix: checkmark size in loggedIn-badge (mobile-menu)
tallence-dsulyok Jan 16, 2024
ebfb3cd
docs(storybook): added english properties, fixed service urls
tallence-dsulyok Jan 16, 2024
40192f2
docs(storybook): seperated german & english properties, fixed urls fo…
tallence-dsulyok Jan 16, 2024
cd7c31f
fix: remove menu role from profile menu parents (so JAWS < 2023 does …
tallence-dsulyok Jan 25, 2024
9d2047f
fix: remove aria-haspopup from profile menu trigger
tallence-dsulyok Jan 26, 2024
f9f6ef1
fix: changed demo's page lang to german (for correct screenreader out…
tallence-dsulyok Jan 26, 2024
86ba3da
fix: remove HR elements from accessibility tree
tallence-dsulyok Feb 1, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
storybook: added missing attributes
tallence-dsulyok committed Nov 23, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 79d169f196c723dedfdbe9a284752d0521c3e663
Original file line number Diff line number Diff line change
@@ -13,6 +13,8 @@
logged-in="true"
label="Alexander"
accessibility-label="Benutzerprofil: Alexander"
:user-info="userInfo"
:service-links="serviceLinks"
></telekom-profile-menu>
</scale-telekom-nav-list>
</template>
@@ -22,6 +24,8 @@ export default {
props: {
appName: String,
appNameLink: String,
userInfo: String,
serviceLinks: String,
}
};
</script>
Original file line number Diff line number Diff line change
@@ -10,22 +10,27 @@
<SlotMetaNavExternal />
<SlotMetaNav />
<SlotLangSwitcher />
<SlotFunctionsProfile :app-name="appName" :app-name-link="appNameLink" />
<SlotMainNav />
<SlotFunctionsProfile
:app-name="appName"
:app-name-link="appNameLink"
:user-info="userInfo"
:service-links="serviceLinks" />
</scale-telekom-header>
</template>

<script>
import SlotMetaNavExternal from './SlotMetaNavExternal.vue';
import SlotMetaNav from './SlotMetaNav.vue';
import SlotMainNavWithFlyout from './SlotMainNavWithFlyout.vue';
import SlotLangSwitcher from './SlotLangSwitcher.vue';
import SlotFunctionsProfile from './SlotFunctionsProfile.vue';
import SlotMainNav from "./SlotMainNav.vue";

export default {
components: {
SlotMetaNavExternal,
SlotMetaNav,
SlotMainNavWithFlyout,
SlotMainNav,
SlotLangSwitcher,
SlotFunctionsProfile,
},
@@ -36,6 +41,8 @@ export default {
metaNavExternalAriaLabel: String,
langSwitcherAriaLabel: String,
mainNavAriaLabel: String,
userInfo: String,
serviceLinks: String,
},
};
</script>
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import {
addonNavigation,
sectorNavigation,
userNavigation,
userInfo,
serviceLinks,
} from './fixtures';

<Meta
@@ -281,7 +283,12 @@ scale-telekom-nav-item {
<Canvas withSource="none">
<Story
name="Profile Menu"
args={{ storyName: 'StoryProfile', appName: 'Application Name' }}
args={{
storyName: 'StoryProfile',
appName: 'Application Name',
userInfo: JSON.stringify(userInfo),
serviceLinks: JSON.stringify(serviceLinks),
}}
inline={false}
height={500}
>
Original file line number Diff line number Diff line change
@@ -355,7 +355,7 @@ export const mainNavigationFlyout = [
];
export const iconNavigation = [
{ name: 'Search', id: 'Search35', href: '#search', icon: 'action-search' },
{
{
name: 'Cart',
id: 'Cart36',
href: '#cart',
@@ -372,3 +372,41 @@ export const iconNavigation = [
export const sectorNavigation = [
{ name: 'Business', id: 'Business39', href: '#business' },
];

export const userInfo = {
name: 'Alexander Dreyer',
email: '[email protected]',
}

export const serviceLinks = [
{
name: 'My Account',
href: 'https://www.telekom.de/mein-kundencenter',
icon: 't-product-measure-internet-speed',
},
{
name: 'E-Mail Center',
href: 'https://www.telekom.de/e-mail/e-mail-center',
icon: 'communication-mail-opened',
},
{
name: 'MagentaTV',
href: 'https://web.magentatv.de/EPG/',
icon: 't-product-magenta-tv',
},
{
name: 'MagentaSport',
href: 'https://www.magentasport.de',
icon: 't-product-telekom-1t1',
},
{
name: 'MagentaCloud',
href: 'https://magentacloud.de',
icon: 'action-upload-to-cloud',
},
{
name: 'MagentaHome Web',
href: 'https://cockpit.telekom.net',
icon: 'home-smarthome',
}
]