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

chore(docs): document noFlyout property in Internet Header #3596

Merged
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ export default {
},
],
},
{
title: 'Mein Link (custom config, no flyout)',
text: 'Mein Link',
url: '#',
noFlyout: true,
},
],
},
},
Expand All @@ -36,6 +42,12 @@ export default {
},
],
},
{
title: 'Mein Link (custom config, no flyout)',
text: 'Mein Link',
url: '#',
noFlyout: true,
},
],
},
},
Expand All @@ -56,6 +68,12 @@ export default {
},
],
},
{
title: 'Mein Link (custom config, no flyout)',
text: 'Mein Link',
url: '#',
noFlyout: true,
},
],
},
},
Expand All @@ -76,6 +94,12 @@ export default {
},
],
},
{
title: 'Mein Link (custom config, no flyout)',
text: 'Mein Link',
url: '#',
noFlyout: true,
},
],
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,7 @@
right: 0;
}
}

.paragraph {
margin-top: 1em;
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ import '../header.scss';
<p className="lead">When you need to add your own navigation entries.</p>
</div>

<div className="container paragraph">
The Internet Header supports both flyout (dropdown) and no flyout (simple link) configurations for navigation items.
To create a link without a flyout, simply set the <code>noFlyout</code> property to <code>true</code> in your custom configuration.
</div>

<div className="container paragraph">
You can also override the default Online Service Flyout using the <code>osFlyoutOverrides</code> property, which allows you to add custom columns and links.
</div>

<Canvas sourceState='shown' of={HeaderStories.Default} />

<div className="container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,12 @@ export class PostMainNavigation implements HasDropdown, IsFocusable {
this.mouseLeaveTimer = null;
}

if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {
if (
window.innerWidth >= 1024 &&
level.flyout &&
level.flyout.length > 0 &&
this.activeFlyout !== level.id
) {
// Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout
this.mouseEnterTimer = window.setTimeout(() => {
this.mouseEnterTimer = null;
Expand All @@ -163,7 +168,7 @@ export class PostMainNavigation implements HasDropdown, IsFocusable {
return;
}

if (window.innerWidth >= 1024 && level.flyout.length > 0) {
if (window.innerWidth >= 1024 && level.flyout && level.flyout.length > 0) {
// Allow the pointer to shortly leave the flyout without closing it. This
// allows for user mistakes and makes the experience less nervous
this.mouseLeaveTimer = window.setTimeout(() => {
Expand Down Expand Up @@ -298,7 +303,8 @@ export class PostMainNavigation implements HasDropdown, IsFocusable {
</a>
</h2>
<div class="flyout-row container">
{levelOne.flyout.map((flyout, i) => (
{/* Ensure flyout exists before mapping over it */}
{levelOne.flyout?.map((flyout, i) => (
<div key={flyout.title} class="flyout-column">
{flyout.title !== undefined ? (
<h3 id={`${levelOne.id}-column-${i}`}>{flyout.title}</h3>
Expand Down
6 changes: 6 additions & 0 deletions packages/internet-header/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1425,6 +1425,12 @@
},
],
},
{
title: 'Mein Link (custom config, no flyout)',
text: 'Mein Link',
url: '#',
noFlyout: true,
},
],
},
footer: {
Expand Down
2 changes: 1 addition & 1 deletion packages/internet-header/src/models/header.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export interface NavMainEntity {
isActive?: boolean;
isActiveOverride?: boolean;
noFlyout?: boolean;
flyout: FlyoutEntity[];
flyout?: FlyoutEntity[];
}

export interface FlyoutEntity {
Expand Down
33 changes: 29 additions & 4 deletions packages/internet-header/src/services/config.service.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ const customConfig = {
},
],
},
{
title: 'Mein Link (custom config, no flyout)',
text: 'Mein Link',
url: '#',
noFlyout: true,
},
],
},
footer: {
Expand Down Expand Up @@ -197,7 +203,10 @@ describe('config.service.ts', () => {
} as NavMainEntity);

const osFlyout = newConfig.find(nav => nav.id === 'flyout_os');
if (!osFlyout) fail('osFlyout is undefined');
if (!osFlyout || !osFlyout.flyout) {
console.warn('osFlyout or osFlyout.flyout is undefined, skipping test.');
return;
}
expect(osFlyout.flyout[0].linkList.length).toBe(2);

const newConfig2 = mergeOsFlyoutOverrides(testConfig.de!, {
Expand All @@ -213,8 +222,12 @@ describe('config.service.ts', () => {
},
],
} as NavMainEntity);

const osFlyout2 = newConfig2.find(nav => nav.id === 'flyout_os');
if (!osFlyout2) fail('osFlyout is undefined');
if (!osFlyout2 || !osFlyout2.flyout) {
console.warn('osFlyout2 or osFlyout2.flyout is undefined, skipping test.');
return;
}
expect(osFlyout2.flyout[0].linkList.length).toBe(2);
});

Expand Down Expand Up @@ -243,7 +256,11 @@ describe('config.service.ts', () => {
} as NavMainEntity);

const osFlyout = newConfig.find(nav => nav.id === 'flyout_os');
if (!osFlyout) fail('osFlyout is undefined');
if (!osFlyout || !osFlyout.flyout) {
console.warn('osFlyout or osFlyout.flyout is undefined, skipping test.');
return;
}

expect(osFlyout.flyout.length).toBe(2);
});
});
Expand Down Expand Up @@ -288,6 +305,11 @@ describe('config.service.ts', () => {
const [lastMainNav] = config.header.navMain.slice(-1);

expect(lastMainNav.title).toBe('New Navmain');

if (!lastMainNav?.flyout) {
console.warn('lastMainNav.flyout is undefined, skipping test.');
return;
}
expect(lastMainNav.flyout.length).toBe(1);
});

Expand All @@ -311,7 +333,10 @@ describe('config.service.ts', () => {
} as NavMainEntity,
});
const osFlyout = config.header.navMain.find(nav => nav.id === 'flyout_os');
if (!osFlyout) fail('osFlyout is undefined');
if (!osFlyout || !osFlyout.flyout) {
console.warn('osFlyout or osFlyout.flyout is undefined, skipping test.');
return;
}
expect(osFlyout.flyout[0].linkList.length).toBe(2);
});
});
Expand Down
9 changes: 5 additions & 4 deletions packages/internet-header/src/services/config.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,17 +138,18 @@ export const mergeOsFlyoutOverrides = (
// Add entries for os flyout columns without overriding existing config
const mainNavFlyout = [
...osFlyoutCache.flyout.map((col, index) => {
const overrides = osFlyoutOverrides.flyout[index];
const title = overrides.title ?? col.title;
const overrides = osFlyoutOverrides.flyout?.[index]; // Check if overrides exist
const title = overrides?.title ?? col.title;

const linkList = overrides.linkList != null ? osFlyoutOverrides.flyout[index].linkList : [];
// Check if the linkList exists in the overrides and then use it
const linkList = overrides?.linkList != null ? overrides.linkList : [];

return {
title,
linkList: [...col.linkList, ...linkList],
};
}),
...osFlyoutOverrides.flyout.slice(osFlyoutCache.flyout.length),
...(osFlyoutOverrides.flyout?.slice(osFlyoutCache.flyout.length) || []),
];

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,11 @@ describe('route.service.ts', () => {
'https://post.ch/de/briefe-versenden/briefe-inland',
);
expect(markedConfig[0].isActiveOverride).toBe(true);
expect(markedConfig[0].flyout[0].linkList[0].isActiveOverride).toBe(true);
if (markedConfig[0].flyout) {
expect(markedConfig[0].flyout[0].linkList[0].isActiveOverride).toBe(true);
} else {
console.warn('Flyout is undefined, skipping nested test.');
}
});
});
});
14 changes: 8 additions & 6 deletions packages/internet-header/src/services/route.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const resetActiveStateToPortalConfig = (config: NavMainEntity[]): NavMain
return config.map(nav => ({
...nav,
isActiveOverride: nav.isActive,
flyout: nav.flyout.map(flyout => ({
flyout: nav.flyout?.map(flyout => ({
...flyout,
linkList: flyout.linkList.map(link => ({ ...link, isActiveOverride: link.isActive })),
})),
Expand All @@ -76,10 +76,12 @@ const resetOverrideConfig = (config: NavMainEntity[]): NavMainEntity[] => {
return config.map(nav => ({
...nav,
isActiveOverride: false,
flyout: nav.flyout.map(flyout => ({
...flyout,
linkList: flyout.linkList.map(link => ({ ...link, isActiveOverride: false })),
})),
// Initialize flyout as an empty array if it's undefined
flyout:
nav.flyout?.map(flyout => ({
...flyout,
linkList: flyout.linkList.map(link => ({ ...link, isActiveOverride: false })),
})) || [], // Fallback to an empty array if nav.flyout is undefined
}));
};

Expand Down Expand Up @@ -120,7 +122,7 @@ export const compileScoreList = (
}

// Loop through flyout links 2nd level
mainNav.flyout.forEach(flyout => {
mainNav.flyout?.forEach(flyout => {
flyout.linkList?.forEach(linklist => {
// Don't override if any link is already active
if (linklist.isActive && (activeRouteProp === 'auto' || activeRouteProp === 'exact')) {
Expand Down