feat(core/progress-bar): add new web component 'ix-progress-bar'

[rouven-s]

💡 What is the current behavior?

🆕 What is the new behavior?

Added a new core web component "ix-progress-bar".

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📄 Documentation was reviewed/updated (pnpm run docs)
• 🧪 Unit tests were added/updated and pass (pnpm test)
• 📸 Visual regression tests were added/updated and pass (Guide)
• 🧐 Static code analysis passes (pnpm lint)
• 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

• Some linting and tests seem to be failing on other components that I have not touched.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7d50dbf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[danielleroux]

@rouven-s Thank for your PR. We have to address some points before we can proceed here.

• Accessibility has to be implemented for for new components e.g https://www.w3.org/WAI/ARIA/apg/patterns/meter/
• Merge conflict in pnpm-lock.yaml
• Component tests are missing
• Visual Regression tests are missing

If this points are fulfilled we can further proceed with the code review.

[danielleroux]

@rouven-s Lint fails on your component:

[danielleroux]

@rouven-s please read the first sentence of the linked visual regression test guide: https://github.com/siemens/ix/blob/main/CONTRIBUTING.md#visual-regression-testing. Its not allowed to add windows based snapshots these snapshots cannot be checked via github workflow.

[rouven-s]

@danielleroux I added a11y and regression tests.

Following the instructions for the screenshot creation, running pnpm --filter @siemens/ix run visual-regression progress-bar -u with playwright installed locally only created win32 pngs, no linux ones.

Running docker run -p 8080:8080 -v $(cd):/work/ -w /work -it mcr.microsoft.com/playwright:v1.30.0-focal /bin/bash and then pnpm --filter @siemens/ix run visual-regression progress-bar -u with webServer.reuseExistingServer=true configuration results in this error:
Error: page.originalGoto: net::ERR_EMPTY_RESPONSE at http://127.0.0.1:8080/src/tests/progress-bar/basic?theme=theme-classic-dark

Do you have a hint on what I'm doing wrong?

[matthiashader]

@rouven-s I have looked a little bit more into detail and also tried setting up an docker development enviroment but it just seems that windows making strange symlinks and pnpm seems not really capable of dealing with multiple filesystems and volumes (when mounting folders). (https://pnpm.io/faq#:~:text=Does%20pnpm%20work%20across%20multiple,address%20a%20location%20in%20another.)

For further development i would suggest to you:

1. WSL2 - Inside the WSL setup iX again, then you can connect remotely connect to the instance via your IDE

• https://www.jetbrains.com/help/webstorm/remote-development-starting-page.html#run_in_wsl_ij
• https://learn.microsoft.com/en-us/windows/wsl/install
• https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-vscode

2. Doing everything in docker (you can also remote connect and develop there)

• https://code.visualstudio.com/docs/devcontainers/containers

I generally would you suggest to use the WSL2 approach, but i also wrote a small Dockerfile, so it is also possible to use:
FROM node:20 RUN corepack enable pnpm USER node:node WORKDIR /home/node RUN git clone https://github.com/siemens/ix WORKDIR /home/node/ix RUN pnpm i USER root RUN pnpm exec playwright install-deps RUN pnpm exec playwright install
Build the Dockerfile: docker build -t ix-docker-image -f .\Dockerfile .
Deploy container: docker run -p 3333:3333 -it --name ix-docker-container ix-docker-image /bin/bash

[danielleroux]

@rouven-s PR review + adaptions will be part of our next sprint

[BastLast]

Hi, i'm interested by this component; is this still planned ?

[matthiashader]

Hello @BastLast, yes, this component is planned for the next quarter of 2025 and will also be aligned with the new form components.