refactor: adapt changes out of release 3.0.0 by DB UI core (#2710)

* refactor: updated DB UI Core version

* refactor: adapted the HTML changes out of DB UI Core

* fix(chip): remove aria-hidden to expose label in a11y tree (#2659)

Co-authored-by: Maximilian Franzke <[email protected]>

* refactor: updated snapshots

* chore: update snapshots

* refactor: we need to ignore the h function import

* refactor: updated to DB UI Core Version 3.3.4

* refactor: downgraded zone.js to prevent a conflict

* refactor: regenerated package lock file

* refactor: added relevant field

* fix: structure

* docs: added documentation on the regeneration of snapshots

* test: updated snapshots

* refactor: optimized build

* Update README.md

* refactor: reverted screenshot

* refactor: reverted screenshots

* refactor: shouldn't include a paragraph

* refactor: removed obsolete declaration

---------

Co-authored-by: Jonas Kuske <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

Author: 3 people

e2e/cypress/e2e/README.md

@@ -0,0 +1,13 @@
+# Regenerate snapshots
+
+In case that your snapshot tests fail, you would need to regenerate the snapshots.
+
+```bash
+npm run start
+```
+
+and in parallel:
+
+```bash
+npm run cypress:snapshot:base
+```

package-lock.json

@@ -73,5 +73,6 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "homepage": "https://db-ui.github.io/elements/"
+  "homepage": "https://db-ui.github.io/elements/",
+  "packageManager": "[email protected]"
 }

package.json

@@ -2,8 +2,8 @@
   "name": "lib",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^17.3.11",
-    "@angular/core": "^17.3.11"
+    "@angular/common": "^17.3.12",
+    "@angular/core": "^17.3.12"
   },
   "dependencies": {
     "tslib": "^2.6.3"

packages/db-ui-elements-angular/projects/lib/package.json

@@ -45,7 +45,7 @@
     "puppeteer": "^24.0.0"
   },
   "dependencies": {
-    "@db-ui/core": "^2.22.0"
+    "@db-ui/core": "^3.3.4"
   },
   "license": "Apache-2.0",
   "publishConfig": {

packages/db-ui-elements-stencil/package.json

@@ -44,12 +44,12 @@ export class DbBrand {
           rel={this.anchorRelation}
         >
           <img src={this.src} alt={this.alt} class="elm-image is-logo" />
-          {this.siteNameLink && (
-            <span class="is-site-name">
-              <slot />
-            </span>
-          )}
         </a>
+        {this.siteNameLink && (
+          <span class="is-site-name">
+            <slot />
+          </span>
+        )}
         {!this.siteNameLink && (
           <span class="is-site-name">
             <slot />

packages/db-ui-elements-stencil/src/components/db-brand/db-brand.tsx

@@ -47,9 +47,7 @@ There are 3 options to use <db-breadcrumb>:
   <db-breadcrumb aria-label="Breadcrumb">
     <db-link href="#">Startseite</db-link>
     <db-link href="#">Page XYZ</db-link>
-    <db-link href="#" current="location">
-      Page ZYS
-    </db-link>
+    <db-link href="#" current="location">Page ZYS</db-link>
   </db-breadcrumb>
 </Canvas>
 

packages/db-ui-elements-stencil/src/components/db-breadcrumb/stories/db-breadcrumb.stories.mdx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, Host, h, Prop } from '@stencil/core';
 import { uuid } from '../../utils/utils';
 
@@ -75,12 +76,7 @@ export class DbChip {
           name={this.name}
           checked={this.selected}
         />
-        <label
-          htmlFor={this.input_id}
-          role="button"
-          aria-hidden="true"
-          data-variant={this.variant}
-        >
+        <label htmlFor={this.input_id} data-variant={this.variant}>
           {this.icon ? <db-icon variant="20-outline" icon={this.icon} /> : null}
           <slot />
           {this.iconafter ? (

packages/db-ui-elements-stencil/src/components/db-chip/db-chip.tsx

@@ -20,12 +20,8 @@ A header component.
   <db-header>
     <db-brand>DB-UI Elements</db-brand>
     <db-mainnavigation>
-      <db-link href="#" rel="index" current="page">
-        Startseite
-      </db-link>
-      <db-link href="#" rel="offers">
-        Aufträge
-      </db-link>
+      <db-link href="#" rel="index" current="page">Startseite</db-link>
+      <db-link href="#" rel="offers">Aufträge</db-link>
     </db-mainnavigation>
   </db-header>
 </Canvas>
@@ -37,12 +33,8 @@ A header component.
     <db-brand>DB-UI Elements</db-brand>
     <db-meta>
       <db-metanavigation>
-        <db-link icon="settings" href="#">
-          Einstellungen
-        </db-link>
-        <db-link icon="chat" icononly href="#">
-          Nachrichten
-        </db-link>
+        <db-link icon="settings" href="#">Einstellungen</db-link>
+        <db-link icon="chat" icononly href="#">Nachrichten</db-link>
       </db-metanavigation>
     </db-meta>
   </db-header>

packages/db-ui-elements-stencil/src/components/db-header/stories/db-header.intro.stories.mdx

@@ -41,12 +41,8 @@ There are three options to use <db-language-switcher>:
 
 <Canvas>
   <db-language-switcher aria-selected-index="1">
-    <db-link title="English language" href="#">
-      EN
-    </db-link>
-    <db-link title="Deutsche Sprache" href="#">
-      DE
-    </db-link>
+    <db-link title="English language" href="#">EN</db-link>
+    <db-link title="Deutsche Sprache" href="#">DE</db-link>
   </db-language-switcher>
 </Canvas>