Skip to content

feat(internet-header): allow to use p tags instead of heading tags #5907

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(internet-header): allow to use p tags instead of heading tags #5907

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0297d0
feat(internet-header): allow to use p tags instead of heading tags
gfellerph Jul 28, 2025
b8309b3
Merge branch 'main' into 5620-remove-h-tags-from-post-header
gfellerph Oct 29, 2025
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
6 changes: 6 additions & 0 deletions .changeset/lemon-items-cross.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@swisspost/design-system-components': minor
'@swisspost/design-system-documentation': minor
---

Added the possibility to use paragraphs instead of headings for the post-header component. This enables project to fully control the heading structure of the document.
6 changes: 4 additions & 2 deletions packages/components/src/components/post-megadropdown/post-megadropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@
}
}

h2 {
h2,
.h2 {
display: none;
margin-block: 0 8px;
font-weight: 900;
Expand Down Expand Up @@ -170,7 +171,8 @@
flex-direction: column-reverse;
height: 100%;

h3 {
h3,
.h3 {
font-size: 20px;
display: block;
font-weight: 900;
Expand Down
16 changes: 8 additions & 8 deletions packages/components/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
</post-language-switch>

<!-- Application title (optional) -->
<h1 slot="title">Application title</h1>
<p class="h1" slot="title">Application title</p>

<!-- Custom content (optional) -->
<ul class="list-inline">
Expand All @@ -74,7 +74,7 @@ <h1 slot="title">Application title</h1>
</button>

<post-list title-hidden="">
<h2>Main Navigation</h2>
<p class="h2">Main Navigation</p>

<!-- Link only level 1 -->
<post-list-item slot="post-list-item"
Expand All @@ -97,9 +97,9 @@ <h2>Main Navigation</h2>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Briefe title</h2>
<p slot="megadropdown-title" class="h2">Briefe title</p>
<post-list>
<h3>Briefe senden</h3>
<p class="h3">Briefe senden</p>
Copy link
Contributor

@leagrdv leagrdv Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel it's a bit dangerous to let people put whichever class they want here. In our CSS for instance, we set .megadropdown h2, .megadropdown > h2 to display: none and letting users choose which title size they want might result in a hidden title. Also, it opens the possibility for users to derive from the intended design.

What do you think? Should we skip those classes and target the "fake" headings another way in CSS?

<post-list-item slot="post-list-item"
><a href="/sch">Briefe Schweiz</a></post-list-item
>
Expand All @@ -112,7 +112,7 @@ <h3>Briefe senden</h3>
>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<p class="h3"><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
<post-list-item slot="post-list-item"
><a href="/sch">Pakete Schweiz</a></post-list-item
>
Expand All @@ -134,9 +134,9 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Pakete title</h2>
<p class="h2" slot="megadropdown-title">Pakete title</p>
<post-list>
<h3>Pakete senden</h3>
<p class="h3">Pakete senden</p>
<post-list-item slot="post-list-item"
><a href="/sch">Pakete Schweiz</a></post-list-item
>
Expand All @@ -149,7 +149,7 @@ <h3>Pakete senden</h3>
>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<p class="h3"><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
<post-list-item slot="post-list-item"
><a href="/sch">Pakete Schweiz</a></post-list-item
>
Expand Down
73 changes: 60 additions & 13 deletions packages/documentation/src/stories/components/header/header.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type { StoryObj } from '@storybook/web-components-vite';
import { MetaComponent } from '@root/types';
import { html } from 'lit';
import { nothing } from 'lit';
import { fakeContent } from '@/utils';
import { html, unsafeStatic } from 'lit/static-html.js';

const meta: MetaComponent = {
id: '27a2e64d-55ba-492d-ab79-5f7c5e818498',
Expand All @@ -20,6 +21,7 @@ const meta: MetaComponent = {
title: 'Application title',
metaNavigation: true,
customControls: true,
useHeadings: false,
},
argTypes: {
title: {
Expand All @@ -42,6 +44,17 @@ const meta: MetaComponent = {
category: 'Content',
},
},
useHeadings: {
name: 'Use headings',
description: 'Whether or not to use headings for the title and megadropdown titles.',
control: {
type: 'boolean',
},
table: {
category: 'Content',
},
defaultValue: { summary: true },
Copy link
Contributor

@leagrdv leagrdv Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value is not shown in the arguments table, also is there really a default value here?

},
customControls: {
name: 'Custom controls',
description: 'Whether or not the custom controls are displayed ("search" and "login").',
Expand All @@ -65,6 +78,35 @@ export default meta;

type Story = StoryObj;

/**
* Get the heading element based on the provided parameters.
* @param useHeadings Whether to use semantic headings (h1, h2, etc.) or not.
* @param headingLevel The level of the heading (e.g., "h1", "h2", etc.).
* @param content The content to be displayed inside the heading.
* @param attributes Additional attributes to be added to the heading element.
* @returns A TemplateResult representing the heading element.
*/
const getHeading = (
useHeadings: boolean,
headingLevel: string,
content: string,
attributes?: Record<string, string>,
) => {
const attrs = attributes
? unsafeStatic(
Object.entries(attributes)
.map(([key, value]) => `${key}="${value}"`)
.join(' '),
)
: '';

const headingTag = unsafeStatic(headingLevel);

return useHeadings
? html`<${headingTag} ${attrs}>${unsafeStatic(content)}</${headingTag}>`
: html`<p class="${headingLevel}" ${attrs}>${unsafeStatic(content)}</p>`;
};

export const Default: Story = {
render: args => {
return html`<post-header>
Expand Down Expand Up @@ -103,11 +145,9 @@ export const Default: Story = {
</post-language-switch>

${args.title
? html`
<!-- Application title (optional) -->
<h1 slot="title">${args.title}</h1>
`
: ''}
? html` <!-- Application title (optional) -->
${getHeading(args.useHeadings, 'h1', args.title, { slot: 'title' })}`
: nothing}
${args.customControls
? html`
<!-- Custom content (optional) -->
Expand All @@ -134,7 +174,8 @@ export const Default: Story = {
<post-icon aria-hidden="true" name="arrowleft"></post-icon> Back
</button>
<post-list title-hidden="">
<h2>Main Navigation</h2>
${getHeading(args.useHeadings, 'h2', 'Main Navigation')}

<!-- Link only level 1 -->
<post-list-item slot="post-list-item"><a href="/letters">Letters</a></post-list-item>
<post-list-item slot="post-list-item"><a href="/packages">Packages</a></post-list-item>
Expand All @@ -148,9 +189,12 @@ export const Default: Story = {
Back
</button>
<post-closebutton slot="close-button">Close</post-closebutton>
<h2 slot="megadropdown-title">Letters title</h2>

${getHeading(args.useHeadings, 'h2', 'Letters title', {
slot: 'megadropdown-title',
})}
<post-list>
<h3>Send letters</h3>
${getHeading(args.useHeadings, 'h3', 'Send letters')}
<post-list-item slot="post-list-item"
><a href="/sch">Letters Switzerland</a></post-list-item
>
Expand All @@ -163,7 +207,7 @@ export const Default: Story = {
>
</post-list>
<post-list>
<h3><a href="/step-by-step">Step by step</a></h3>
${getHeading(args.useHeadings, 'h3', '<a href="/step-by-step">Step by step</a>')}
<post-list-item slot="post-list-item"
><a href="/sch">Packages Switzerland</a></post-list-item
>
Expand All @@ -185,9 +229,12 @@ export const Default: Story = {
Back
</button>
<post-closebutton slot="close-button">Close</post-closebutton>
<h2 slot="megadropdown-title">Packages title</h2>

${getHeading(args.useHeadings, 'h2', 'Packages title', {
slot: 'megadropdown-title',
})}
<post-list>
<h3>Send packages</h3>
${getHeading(args.useHeadings, 'h3', 'Send packages')}
<post-list-item slot="post-list-item"
><a href="/sch">Packages Switzerland</a></post-list-item
>
Expand All @@ -200,7 +247,7 @@ export const Default: Story = {
>
</post-list>
<post-list>
<h3><a href="/step-by-step">Step by step</a></h3>
${getHeading(args.useHeadings, 'h3', '<a href="/step-by-step">Step by step</a>')}
<post-list-item slot="post-list-item"
><a href="/sch">Packages Switzerland</a></post-list-item
>
Expand Down