DB UI Mono (Alpha) 🚂💖

DB UI Mono provides robust HTML UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.

We’re not designing pages anymore. We’re designing systems of components. Stephen Hay. Citated in a talk by Brad Frost at beyond tellerrand conference.

Packages

Package	Content	Version
foundations	CSS/Scss/Tailwind styles and assets
components	CSS/Scss styles for components
ngx-components	Native Angular components
react-components	Native React components
v-components	Native Vue components

How to use

Install your preferred package via npm or yarn e.g. npm i @db-ui/react-components.

Afterwards you need to add the specific css or scss files to provide the styles of DB UX Design System. For a detailed overview look at our examples.

Components

Here is an overview of all components you can use:

Table of Components

Name	Category	Inside Repo	Styling	Complete	Planned for beta
Accordion	04 - Data-Display	❌	❌	❌	✅
Alert	05 - Feedback	❌	❌	❌	✅
Avatar	04 - Data-Display	❌	❌	❌	❌
Backdrop	06 - Utility	❌	❌	❌	✅
Badge	05 - Feedback	❌	❌	❌	✅
Bottom-Navigation	02 - Action	❌	❌	❌	❌
Breadcrumbs	02 - Action	❌	❌	❌	✅
Button	02 - Action	✅	v3	❌	✅
Button-Group	02 - Action	❌	❌	❌	❌
Card	01 - Layout	✅	v3	❌	✅
Carousel	06 - Utility	❌	❌	❌	❌
Checkbox	03 - Data-Input	❌	❌	❌	✅
Combobox	03 - Data-Input	❌	❌	❌	❌
Container	01 - Layout	❌	❌	❌	❌
Date-Picker	03 - Data-Input	❌	❌	❌	❌
Divider	01 - Layout	✅	v3	❌	✅
Drawer	01 - Layout	❌	❌	❌	✅
Dropdown	06 - Utility	❌	❌	❌	✅
Floating-Button	02 - Action	❌	❌	❌	❌
Footer	01 - Layout	❌	❌	❌	✅
Grid	01 - Layout	❌	❌	❌	✅
Header	01 - Layout	❌	❌	❌	✅
Icons	04 - Data-Display	✅	v3	✅	✅
Image	04 - Data-Display	❌	❌	❌	✅
Indicator	04 - Data-Display	❌	❌	❌	❌
Infotext	04 - Data-Display	❌	❌	❌	✅
Input	03 - Data-Input	✅	v3	❌	✅
Link	02 - Action	❌	❌	❌	✅
List-Item	04 - Data-Display	❌	❌	❌	✅
Menu	02 - Action	❌	❌	❌	✅
Modal	06 - Utility	❌	❌	❌	✅
Notification	05 - Feedback	❌	❌	❌	✅
Numbers-Field	03 - Data-Input	❌	❌	❌	❌
Pagination	02 - Action	❌	❌	❌	❌
Popover	06 - Utility	❌	❌	❌	❌
Progress	05 - Feedback	❌	❌	❌	❌
Radio	03 - Data-Input	✅	v3	❌	✅
Rating	03 - Data-Input	❌	❌	❌	❌
Section	01 - Layout	❌	❌	❌	✅
Select	03 - Data-Input	❌	❌	❌	✅
Skeleton	05 - Feedback	❌	❌	❌	❌
Slider	03 - Data-Input	❌	❌	❌	❌
Spinner	05 - Feedback	❌	❌	❌	❌
Stack/List	06 - Utility	❌	❌	❌	✅
Stepper	02 - Action	❌	❌	❌	❌
Switch	02 - Action	❌	❌	❌	❌
Table	04 - Data-Display	❌	❌	❌	❌
Tabs	04 - Data-Display	✅	v2	❌	❌
Tag	04 - Data-Display	❌	❌	❌	✅
Text	04 - Data-Display	❌	❌	❌	✅
Textarea	03 - Data-Input	❌	❌	❌	✅
Timeline	04 - Data-Display	❌	❌	❌	❌
Time-Picker	03 - Data-Input	❌	❌	❌	❌
Toggle-Button	02 - Action	❌	❌	❌	❌
Tooltip	04 - Data-Display	❌	❌	❌	❌
Tree	04 - Data-Display	❌	❌	❌	❌
Upload	03 - Data-Input	❌	❌	❌	❌

‼ Some components are missing and some are not migrated to the new styling, be aware that non-completed components may change in the future. You can enable automated warnings with ESLint if you like.

Warnings with ESLint

Install ESLint plugin: npm i @db-ui/eslint-plugin.

Add the plugin and rule to your configuration:

...
"plugins": ["@db-ui"],
"rules": {
	"@db-ui/v2-component-used": "warn",
...

Core principals

Consistent & Compliant

DB UI Mono is based on the DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.

Accessible

DB UI Mono leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus enforcing correct, accessible markup. And we're quality checking this in partnership with the Team Digital Accessibility.

Declarative

DB UI Mono uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human read- and understandable, lean, performant and so much easier to update.

Evergreen

As DB UX Design System evolves, so does DB UI Mono, meaning apps only need to keep their DB UI Mono package updated to ensure the latest look and feel.

More information

Additionally we'll provide some more information over time regrading the whole ecosystem:

• DB UX Design System documentation within the DB Marketingportal (german)
• Confluence / Base Wiki - "Technische Umsetzung des Enterprise UI Design Systems" (german, only available internally)
• Confluence - Web UI Component Library (only available internally)
• Changelog
• Architectural Decision Records
• DB UI Mono 1.x Gitlab repository (only accessible internally)

Things to keep in mind

Developed for and driven by the community

This is mainly a platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community and adapted out of the work done in projects and through the huge amount of feedback that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!

How to start develop / contribute

npm install
npm run build
npm run start

Please mind the conventions for git commits.

Give us your feedback!

This is only the first version of our framework and we really want your feedback - either within the DB UI Channel by Web Dev Community in Microsoft Teams (only available DB internally), or directly at [email protected]. We're particularly keen to add as many examples to the behaviours as possible, to further clarify them.

Deutsche Bahn brand

As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound to clear guidelines and restrictions even when being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights and ownership regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. Please have a look at our brand portal at https://marketingportal.extranet.deutschebahn.com/ for any further questions and whom to contact on any brand issues. As these assets and visual guidelines are retrieved from our Deutsche Bahn Marketingportal, you'll agree with the "Allgemeine Nutzungsbedingungen für das DB-Marketingportal" (german) in case of using them.

For any usage outside of Deutsche Bahn websites and applications you must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.

This especially relates to the files in the directories /source/fonts/, source/images and source/samples and source/favicon.ico as well.

Development

Tests

TODO: Elaborate on testing setup

Component Tests

Visual regression tests

Playwright is used to create and compare screenshots of each individual component.

To update screenshots just run the following (you need Docker installed and available on your shell):

npm run regenerate:screenshots

If you want to generate the screenshots manually, do the following:

npm run build

# unix
docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.30.0-focal /bin/bash

#windows - allow file sharing (windows pop up)
docker run --rm --network host -v ${PWD}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.30.0-focal /bin/bash

npm install

cd output/${frameworkFolder}

npx playwright test --update-snapshots

You can also use docker-compose to test or regenerate screenshots.

• testing: docker-compose -f ./e2e/docker-compose.yml up
• update screenshots: docker-compose -f ./e2e/docker-compose.regenerate.yml up

Contributions

Contributions are very welcome, please refer to the contribution guide.

Code of conduct

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone – have a look at our Contributor Covenant Code of Conduct.

License

This project is licensed under Apache-2.0, Copyright 2022 by DB Systel GmbH.