diff --git a/.changeset/2024-11-10-update-icons.md b/.changeset/2024-11-10-update-icons.md
new file mode 100644
index 0000000000..58d8ed8161
--- /dev/null
+++ b/.changeset/2024-11-10-update-icons.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Added icon number 2632.
+
diff --git a/.changeset/big-socks-dress.md b/.changeset/big-socks-dress.md
new file mode 100644
index 0000000000..5863769099
--- /dev/null
+++ b/.changeset/big-socks-dress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed issue where the focus ring was not appearing on inactive chips.
diff --git a/.changeset/cuddly-gifts-film.md b/.changeset/cuddly-gifts-film.md
new file mode 100644
index 0000000000..84750ff7fc
--- /dev/null
+++ b/.changeset/cuddly-gifts-film.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size.
diff --git a/.changeset/dirty-mayflies-taste.md b/.changeset/dirty-mayflies-taste.md
new file mode 100644
index 0000000000..b8e7157047
--- /dev/null
+++ b/.changeset/dirty-mayflies-taste.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': major
+---
+
+Updated list group to v2 and added new options: list links, list documents and list switches.
diff --git a/.changeset/fast-bats-poke.md b/.changeset/fast-bats-poke.md
new file mode 100644
index 0000000000..d9c7be75ce
--- /dev/null
+++ b/.changeset/fast-bats-poke.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Created the `post-list` and `post-list-item` components.
diff --git a/.changeset/fifty-dodos-wait.md b/.changeset/fifty-dodos-wait.md
new file mode 100644
index 0000000000..b6cdea8148
--- /dev/null
+++ b/.changeset/fifty-dodos-wait.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the Accessibility documentation section with Form Labels guidelines.
diff --git a/.changeset/fifty-students-call.md b/.changeset/fifty-students-call.md
new file mode 100644
index 0000000000..267b9ce0d7
--- /dev/null
+++ b/.changeset/fifty-students-call.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons.
diff --git a/.changeset/gold-chefs-rule.md b/.changeset/gold-chefs-rule.md
new file mode 100644
index 0000000000..183a0a9024
--- /dev/null
+++ b/.changeset/gold-chefs-rule.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Created token-based styles for `` elements.
diff --git a/.changeset/grumpy-parrots-wonder.md b/.changeset/grumpy-parrots-wonder.md
new file mode 100644
index 0000000000..1942021760
--- /dev/null
+++ b/.changeset/grumpy-parrots-wonder.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed an issue with the post-collapsible throwing an invalid selector error.
diff --git a/.changeset/neat-suits-provide.md b/.changeset/neat-suits-provide.md
new file mode 100644
index 0000000000..0e5e0cf803
--- /dev/null
+++ b/.changeset/neat-suits-provide.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated basic `` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`.
diff --git a/.changeset/new-goats-impress.md b/.changeset/new-goats-impress.md
new file mode 100644
index 0000000000..d1bd841e3c
--- /dev/null
+++ b/.changeset/new-goats-impress.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated vertical-align utility
diff --git a/.changeset/popular-mirrors-cross.md b/.changeset/popular-mirrors-cross.md
new file mode 100644
index 0000000000..a047d3d7cc
--- /dev/null
+++ b/.changeset/popular-mirrors-cross.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-components-angular': minor
+'@swisspost/design-system-components-react': minor
+---
+
+Added a provisional post-header component with some basic functionality in place. This component is not finished in this state.
diff --git a/.changeset/pre.json b/.changeset/pre.json
index 5169ad951f..a948833b59 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -24,6 +24,7 @@
"changesets": [
"2024-10-17-update-icons",
"2024-10-27-update-icons",
+ "2024-11-10-update-icons",
"beige-jobs-do",
"big-frogs-admire",
"breezy-cups-add",
@@ -32,17 +33,25 @@
"cold-baboons-appear",
"cold-panthers-vanish",
"cuddly-bears-check",
+ "cuddly-gifts-film",
+ "dirty-mayflies-taste",
"eight-turkeys-matter",
"eleven-keys-work",
"empty-islands-kneel",
"fair-actors-scream",
+ "fast-bats-poke",
"fast-fans-wash",
+ "fifty-dodos-wait",
+ "fifty-students-call",
"five-hornets-sin",
"friendly-insects-breathe",
"funny-shrimps-care",
"giant-games-swim",
+ "gold-chairs-grin",
+ "gold-chefs-rule",
"gorgeous-flowers-flow",
"great-humans-talk",
+ "grumpy-parrots-wonder",
"heavy-rats-explode",
"kind-buses-trade",
"kind-papayas-provide",
@@ -51,26 +60,33 @@
"loud-dingos-remember",
"lovely-deers-itch",
"lovely-mirrors-travel",
+ "neat-suits-provide",
"nervous-rocks-shop",
+ "new-goats-impress",
"ninety-nails-float",
"pink-weeks-relate",
"plenty-apricots-raise",
"popular-games-rush",
"proud-actors-knock",
+ "proud-cheetahs-act",
"proud-moons-impress",
"quick-eagles-watch",
"quiet-apes-rhyme",
+ "rare-dryers-count",
"red-cobras-cry",
"red-lies-lick",
+ "rich-timers-listen",
"selfish-bats-run",
"selfish-ways-know",
"shaggy-experts-give",
"sharp-baboons-smile",
"sharp-crews-watch",
"shiny-ears-care",
+ "shy-walls-exercise",
"silver-coins-invent",
"six-spiders-smoke",
"sixty-items-promise",
+ "slimy-rockets-pull",
"strange-bottles-impress",
"tame-terms-push",
"three-lies-do",
diff --git a/.changeset/proud-cheetahs-act.md b/.changeset/proud-cheetahs-act.md
new file mode 100644
index 0000000000..dcb4a242f0
--- /dev/null
+++ b/.changeset/proud-cheetahs-act.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class.
diff --git a/.changeset/quick-buses-give.md b/.changeset/quick-buses-give.md
new file mode 100644
index 0000000000..d3212d7400
--- /dev/null
+++ b/.changeset/quick-buses-give.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added new Menu Button components (post-menu-button, post-menu-trigger, and post-menu-item) for creating accessible dropdown menus.
diff --git a/.changeset/rare-dryers-count.md b/.changeset/rare-dryers-count.md
new file mode 100644
index 0000000000..988dc5dbf7
--- /dev/null
+++ b/.changeset/rare-dryers-count.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated button component to v2.
diff --git a/.changeset/rich-timers-listen.md b/.changeset/rich-timers-listen.md
new file mode 100644
index 0000000000..b6fbcdf2d1
--- /dev/null
+++ b/.changeset/rich-timers-listen.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the skiplinks component to styles and documentation.
diff --git a/.changeset/shy-walls-exercise.md b/.changeset/shy-walls-exercise.md
new file mode 100644
index 0000000000..ba712642c4
--- /dev/null
+++ b/.changeset/shy-walls-exercise.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added close button web component.
diff --git a/.github/ISSUE_TEMPLATE/component-v2.yml b/.github/ISSUE_TEMPLATE/component-v2.yml
index dfefd7c352..ace2c22cfb 100644
--- a/.github/ISSUE_TEMPLATE/component-v2.yml
+++ b/.github/ISSUE_TEMPLATE/component-v2.yml
@@ -28,14 +28,31 @@ body:
options:
- label: Tokens for this component are ready
- type: textarea
- id: tasks
+ id: tasksdesign
attributes:
- label: Tasks
+ label: Tasks design
+ description: Default tasks for the design team. Can be edited later according to needs.
+ value: |
+ ```[tasklist]
+ ### 🎨 Design
+ - [ ] Design component according to WIKIT
+ - [ ] Update dependencies
+ - [ ] Add & test compo in layout examples
+ - [ ] Designer review
+ - [ ] Documentation: Overview and usage (about, compo overview, compo props, usage, examples)
+ - [ ] Documentation: Technical documentation (anatomy, accessibility)
+ - [ ] Documentation: Review (content correctness, understandability, gaps)
+ ```
+ - type: textarea
+ id: tasksdev
+ attributes:
+ label: Tasks development
description: Default tasks for the dev team. Can be edited later according to needs.
value: |
```[tasklist]
- ### 💻 Tasks
+ ### 💻 Development
- [ ] Review Design (All states present? Possible to implement?)
+ - [ ] Tokenization
- [ ] HTML/CSS implementation
- [ ] Web component implementation
- [ ] Documentation in Storybook
diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml
index 5bc19a4479..70c2fe428a 100644
--- a/.github/workflows/build-tokens.yaml
+++ b/.github/workflows/build-tokens.yaml
@@ -21,57 +21,3 @@ jobs:
- name: Build tokens & dependencies
run: pnpm --filter design-system-tokens... build
-
- - name: Create Summary
- id: summary
- uses: actions/github-script@v7
- with:
- script: |
- const fs = require('fs')
- const path = require('path')
-
- const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated')
- const inputFiles = inputFileNames.map(fileName => ({
- type: path.extname(fileName).replace(/^\./, ''),
- name: fileName,
- content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8')
- }))
-
- const outputOrder = [
- 'index.scss',
- 'core.scss',
- 'scheme.scss',
- 'device.scss',
- 'channel.scss',
- 'theme.scss',
- 'components.scss',
- ]
- const outputFileNames = fs.readdirSync('packages/tokens/dist')
- const outputFiles = outputFileNames
- .map(fileName => ({
- type: path.extname(fileName).replace(/^\./, ''),
- name: fileName,
- content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8')
- }))
- .map(({ type, name, content }) => {
- if (type === 'scss') content = content.replaceAll('\n\n', '\n \n').replaceAll('$', '$').replaceAll(' ', ' ')
- return { type, name, content }
- })
- .sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000))
-
- return `# Token Build
- ## Input
- ${inputFiles.map(({ type, name, content }) => `
- ${name}
- ${content}
- `).join('\n')}
-
- ## Output
- ${outputFiles.map(({ type, name, content }) => `
- ${name}
- ${content}
- `).join('\n')}
- `
-
- - name: Output Summary
- run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY
diff --git a/.github/workflows/create-token-pr.yaml b/.github/workflows/create-token-pr.yaml
index 9a744f478e..0735130155 100644
--- a/.github/workflows/create-token-pr.yaml
+++ b/.github/workflows/create-token-pr.yaml
@@ -8,7 +8,7 @@ name: Create Token PR
on:
push:
branches:
- - tokens/v*
+ - tokens/*
jobs:
create_pr:
@@ -46,8 +46,17 @@ jobs:
echo "exists=false" >> $GITHUB_OUTPUT
fi
- # If the branch exits, update the PR
- - name: Update PR
+ # If the branch does not exit, create it
+ - name: Create PR Branch
+ if: steps.pr-branch.outputs.exists == 'false'
+ run: |
+ git checkout -b ${{ steps.pr-branch.outputs.name }} ${{ github.ref_name }}
+ git push --set-upstream origin ${{ steps.pr-branch.outputs.name }}
+ env:
+ GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+
+ # If the branch exits, update it
+ - name: Update PR Branch
if: steps.pr-branch.outputs.exists == 'true'
run: |
git checkout ${{ steps.pr-branch.outputs.name }}
@@ -56,12 +65,22 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
- # If the branch does not exit, create the PR
+ # Check if a PR already exist
+ - name: Get PR
+ id: pr
+ run: |
+ if [[ -n $(gh pr list --head "${{ steps.pr-branch.outputs.name }}") ]]; then
+ echo "exists=true" >> $GITHUB_OUTPUT
+ else
+ echo "exists=false" >> $GITHUB_OUTPUT
+ fi
+ env:
+ GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+
+ # If the PR does not exit, create it
- name: Create PR
- if: steps.pr-branch.outputs.exists == 'false'
+ if: steps.pr.outputs.exists == 'false'
run: |
- git checkout -b ${{ steps.pr-branch.outputs.name }} ${{ github.ref_name }}
- git push --set-upstream origin ${{ steps.pr-branch.outputs.name }}
gh pr create --title "chore(tokens): :art: update tokens" --body "Merge this PR to update the tokens in the main branch." --base main
env:
GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 11eca2d195..14bd6d34d2 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,13 @@
# @swisspost/design-system-components-angular-workspace
+## 1.1.10-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+ - @swisspost/design-system-styles@9.0.0-next.4
+ - @swisspost/design-system-components@9.0.0-next.4
+
## 1.1.10-next.3
### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index c98a47d80d..04519844ac 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@swisspost/design-system-components-angular-workspace",
- "version": "1.1.10-next.3",
+ "version": "1.1.10-next.4",
"scripts": {
"start": "ng serve --port 9210",
"build": "ng build components",
@@ -10,28 +10,28 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "18.2.9",
- "@angular/common": "18.2.9",
- "@angular/compiler": "18.2.9",
- "@angular/core": "18.2.9",
- "@angular/forms": "18.2.9",
- "@angular/platform-browser": "18.2.9",
- "@angular/platform-browser-dynamic": "18.2.9",
- "@angular/router": "18.2.9",
- "@swisspost/design-system-components": "workspace:9.0.0-next.3",
- "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+ "@angular/animations": "18.2.10",
+ "@angular/common": "18.2.10",
+ "@angular/compiler": "18.2.10",
+ "@angular/core": "18.2.10",
+ "@angular/forms": "18.2.10",
+ "@angular/platform-browser": "18.2.10",
+ "@angular/platform-browser-dynamic": "18.2.10",
+ "@angular/router": "18.2.10",
+ "@swisspost/design-system-components": "workspace:9.0.0-next.4",
+ "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
"rxjs": "7.8.1",
"tslib": "2.6.3",
"zone.js": "0.14.8"
},
"devDependencies": {
- "@angular-devkit/build-angular": "18.2.10",
+ "@angular-devkit/build-angular": "18.2.11",
"@angular-eslint/builder": "18.4.0",
"@angular-eslint/eslint-plugin": "18.4.0",
"@angular-eslint/eslint-plugin-template": "18.4.0",
"@angular-eslint/template-parser": "18.4.0",
- "@angular/cli": "18.2.10",
- "@angular/compiler-cli": "18.2.9",
+ "@angular/cli": "18.2.11",
+ "@angular/compiler-cli": "18.2.10",
"@cypress/schematic": "2.5.2",
"@typescript-eslint/eslint-plugin": "7.18.0",
"@typescript-eslint/parser": "7.18.0",
diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md
index c897490ffa..8a2305d0ef 100644
--- a/packages/components-angular/projects/components/CHANGELOG.md
+++ b/packages/components-angular/projects/components/CHANGELOG.md
@@ -1,5 +1,12 @@
# @swisspost/design-system-components-angular
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+ - @swisspost/design-system-components@9.0.0-next.4
+
## 9.0.0-next.3
### Minor Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index e82f5da166..040548d639 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@swisspost/design-system-components-angular",
- "version": "9.0.0-next.3",
+ "version": "9.0.0-next.4",
"description": "Swiss Post Design System - Angular Wrapper Components",
"author": "Swiss Post ",
"license": "Apache-2.0",
@@ -19,7 +19,7 @@
},
"dependencies": {
"tslib": "2.6.3",
- "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+ "@swisspost/design-system-components": "workspace:9.0.0-next.4"
},
"peerDependencies": {
"@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 2345d27a43..e1503d21ca 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
# @swisspost/design-system-components-react
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+ - @swisspost/design-system-components@9.0.0-next.4
+
## 9.0.0-next.3
### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 8238f83559..76bb2f2ae5 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
{
"name": "@swisspost/design-system-components-react",
- "version": "9.0.0-next.3",
+ "version": "9.0.0-next.4",
"description": "Design System React Components for easy integration with the React ecosystem",
"author": "Swiss Post ",
"license": "Apache-2.0",
@@ -29,7 +29,7 @@
"lint": "eslint src/**/*.ts"
},
"dependencies": {
- "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+ "@swisspost/design-system-components": "workspace:9.0.0-next.4"
},
"devDependencies": {
"@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4eb3171fc0..2f4eb8c9fb 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,23 @@
# @swisspost/design-system-components
+## 9.0.0-next.4
+
+### Major Changes
+
+- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659))
+
+### Minor Changes
+
+- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+### Patch Changes
+
+- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726))
+- Updated dependencies:
+ - @swisspost/design-system-styles@9.0.0-next.4
+
## 9.0.0-next.3
### Major Changes
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 2355ec2939..2975071b22 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -113,6 +113,10 @@ By setting a component's name as a `component` property in your stories' metadat
All components should have automated tests.
These tests are available in the `cypress/e2e` folder.
+### Set inital component Visibility to hidden
+
+To prevent flickering while components load, add each new component to the list in `packages/styles/src/utilities/_not-defined.scss`, which applies `visibility: hidden` to all listed components until they are registered by the browser (when the hydrated attribute actually starts to take effect).
+
## Stencil
diff --git a/packages/components/cypress/e2e/closebutton.cy.ts b/packages/components/cypress/e2e/closebutton.cy.ts
new file mode 100644
index 0000000000..275adfb50a
--- /dev/null
+++ b/packages/components/cypress/e2e/closebutton.cy.ts
@@ -0,0 +1,22 @@
+const CLOSE_BTN_ID = 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a';
+
+describe('Close button', () => {
+ describe('default', () => {
+ beforeEach(() => {
+ cy.getComponent('post-closebutton', CLOSE_BTN_ID);
+ });
+
+ it('should render with a close button and a11y label', () => {
+ cy.get('@closebutton').should('exist');
+ cy.get('@closebutton').find('.btn-icon-close').should('exist');
+ cy.get('@closebutton').find('span.visually-hidden').should('exist');
+ });
+ });
+});
+
+describe('Accessibility', () => {
+ it('Has no detectable a11y violations on load for all variants', () => {
+ cy.getSnapshots('post-closebutton');
+ cy.checkA11y('#root-inner');
+ });
+});
diff --git a/packages/components/cypress/e2e/list.cy.ts b/packages/components/cypress/e2e/list.cy.ts
new file mode 100644
index 0000000000..0bf19446f9
--- /dev/null
+++ b/packages/components/cypress/e2e/list.cy.ts
@@ -0,0 +1,60 @@
+describe('PostList Component', { baseUrl: null, includeShadowDom: false }, () => {
+ beforeEach(() => {
+ // Visit the page where the component is rendered
+ cy.visit('./cypress/fixtures/post-list.test.html');
+ });
+
+ it('should render the post-list component', () => {
+ // Check if the post-list component is rendered
+ cy.get('post-list').should('exist');
+ });
+
+ it('should have an id for the first div in post-list', () => {
+ // Ensure the first div inside post-list has an id attribute
+ cy.get('post-list')
+ .find('div')
+ .first()
+ .should('have.attr', 'id')
+ .and('not.be.empty')
+ .then($div => {
+ const id = $div['id'];
+ cy.log(`First div ID: ${id}`);
+ });
+ });
+
+ it('should throw an error if the title is missing', () => {
+ // Check for the mandatory title accessibility error if no title is provided
+ cy.on('uncaught:exception', err => {
+ expect(err.message).to.include(
+ 'Please provide a title to the list component. Title is mandatory for accessibility purposes.',
+ );
+ return false;
+ });
+ cy.get('post-list').within(() => {
+ cy.get('[slot="post-list-item"]').first().invoke('remove');
+ });
+ });
+
+ it('should hide the title when title-hidden is set', () => {
+ // Set the `title-hidden` property and check if the title is hidden
+ cy.get('post-list').invoke('attr', 'title-hidden', true);
+ cy.get('post-list div').first().should('have.class', 'visually-hidden');
+ });
+
+ it('should render horizontally when the horizontal attribute is set', () => {
+ // Set the `horizontal` property and verify if the list has a horizontal layout
+ cy.get('post-list').invoke('attr', 'horizontal', true);
+ cy.get('post-list').should('have.attr', 'horizontal', 'true');
+ });
+
+ it('should ensure post-list-item components have the correct slot and role', () => {
+ // Verify that the `post-list-item` components have the correct slot and role attributes
+ cy.get('post-list').within(() => {
+ cy.get('post-list-item').each($el => {
+ cy.wrap($el)
+ .should('have.attr', 'slot', 'post-list-item')
+ .and('have.attr', 'role', 'listitem');
+ });
+ });
+ });
+});
diff --git a/packages/components/cypress/fixtures/post-card-control.form-association.test.html b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
index d551a6534e..6cf8703d6f 100644
--- a/packages/components/cypress/fixtures/post-card-control.form-association.test.html
+++ b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
@@ -43,7 +43,7 @@
diff --git a/packages/components/cypress/fixtures/post-list.test.html b/packages/components/cypress/fixtures/post-list.test.html
new file mode 100644
index 0000000000..bd2da7fc62
--- /dev/null
+++ b/packages/components/cypress/fixtures/post-list.test.html
@@ -0,0 +1,19 @@
+
+
+