refactor: adapt changes out of release 3.0.0 by DB UI core

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.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]"
 }

packages/db-ui-elements-angular/projects/lib/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-stencil/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/src/components/db-brand/db-brand.tsx

@@ -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-breadcrumb/stories/db-breadcrumb.stories.mdx

@@ -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-chip/db-chip.tsx

@@ -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-header/stories/db-header.intro.stories.mdx

@@ -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-language-switcher/stories/db-language-switcher.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>
 

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

@@ -17,9 +17,7 @@ The `<db-link></db-link>` element represents a control. With its href attribute,
 Icons can be used in link to help give their functionality more clarity at a glance. Define an icon by it's identifier (like e.g. download, compare to [DB UI Icons](https://db-ui.github.io/core/patterns/base-icons/index.html)).
 
 <Canvas>
-  <db-link href="#" icon="alarm">
-    Link
-  </db-link>
+  <db-link href="#" icon="alarm">Link</db-link>
 </Canvas>
 
 <db-headline variant="2">target</db-headline>
@@ -41,12 +39,8 @@ The target attribute specifies the browsing context and gives different visual e
 </p>
 
 <Canvas>
-  <db-link href="#" target="_self">
-    internal
-  </db-link>
-  <db-link href="#" target="_blank">
-    external
-  </db-link>
+  <db-link href="#" target="_self">internal</db-link>
+  <db-link href="#" target="_blank">external</db-link>
 </Canvas>
 
 <Markdown>{Readme}</Markdown>

packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.scss

@@ -1,6 +1,2 @@
 @import '../general';
 @import 'mainnavigation';
-
-a {
-  @extend .elm-link;
-}

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

@@ -36,14 +36,10 @@ There are 3 options to use <db-mainnavigation>; out of the first two, we s
 <Canvas>
   <db-mainnavigation>
     <li>
-      <db-link href="#" current="page">
-        Startseite
-      </db-link>
+      <db-link href="#" current="page">Startseite</db-link>
     </li>
     <li>
-      <db-link href="#">
-        Aufträge
-      </db-link>
+      <db-link href="#">Aufträge</db-link>
     </li>
     <li>
       {/* You could as well use a general hyperlink HTML tag */}
@@ -62,38 +58,26 @@ There are 3 options to use &lt;db-mainnavigation&gt;; out of the first two, we s
       </a>
       <ul>
         <li>
-          <db-link href="#">
-            Subul 01
-          </db-link>
+          <db-link href="#">Subul 01</db-link>
           <ul>
             <li>
-              <db-link href="#">
-                Sub 01 Sub 01
-              </db-link>
+              <db-link href="#">Sub 01 Sub 01</db-link>
             </li>
             <li>
-              <db-link href="#">
-                Sub 01 Sub 02
-              </db-link>
+              <db-link href="#">Sub 01 Sub 02</db-link>
             </li>
             <li>
-              <db-link href="#">
-                Sub 01 Sub 03
-              </db-link>
+              <db-link href="#">Sub 01 Sub 03</db-link>
             </li>
           </ul>
         </li>
       </ul>
     </li>
     <li>
-      <db-link href="#">
-        Aufträge
-      </db-link>
+      <db-link href="#">Aufträge</db-link>
       <ul>
         <li>
-          <db-link href="#">
-            Subul 02
-          </db-link>
+          <db-link href="#">Subul 02</db-link>
         </li>
       </ul>
     </li>
@@ -116,12 +100,8 @@ There are 3 options to use &lt;db-mainnavigation&gt;; out of the first two, we s
 
 <Canvas>
   <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>
 </Canvas>
 
@@ -142,9 +122,7 @@ There are 3 options to use &lt;db-mainnavigation&gt;; out of the first two, we s
         <db-link href="#">Sub2 Sub 2</db-link>
       </db-link>
     </db-link>
-    <db-link href="#" rel="offers">
-      Aufträge
-    </db-link>
+    <db-link href="#" rel="offers">Aufträge</db-link>
   </db-mainnavigation>
 </Canvas>
 

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

@@ -48,12 +48,8 @@ Use [<li> (**l**ist **i**tem)](https://developer.mozilla.org/en-US/docs/We
 
 <Canvas>
   <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>
 </Canvas>
 

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

@@ -57,24 +57,12 @@ Use [<li> (**l**ist **i**tem)](https://developer.mozilla.org/en-US/docs/We
 
 <Canvas>
   <db-sidenavi>
-    <db-link rel="index" href="#" aria-current="page">
-      Startseite
-    </db-link>
-    <db-link rel="documents" href="#">
-      Dokumente
-    </db-link>
-    <db-link icon="settings" href="#">
-      Einstellungen
-    </db-link>
-    <db-link icon="chat" href="#">
-      Nachrichten
-    </db-link>
-    <db-link rel="calendar" href="#">
-      Kalender
-    </db-link>
-    <db-link rel="help" href="#">
-      Frage &amp; Hilfe
-    </db-link>
+    <db-link rel="index" href="#" aria-current="page">Startseite</db-link>
+    <db-link rel="documents" href="#">Dokumente</db-link>
+    <db-link icon="settings" href="#">Einstellungen</db-link>
+    <db-link icon="chat" href="#">Nachrichten</db-link>
+    <db-link rel="calendar" href="#">Kalender</db-link>
+    <db-link rel="help" href="#">Frage &amp; Hilfe</db-link>
   </db-sidenavi>
 </Canvas>
 

packages/db-ui-elements-stencil/src/components/development/github-version-switcher/github-version-switcher.tsx

@@ -73,7 +73,7 @@ export class GithubVersionSwitcher {
       if (foundGroup) {
         foundGroup.branches.push(branch);
       } else {
-        this.groups.at(-1).branches.push(branch);
+        this.groups[3].branches.push(branch);
       }
     });
     this.setCurrentBranch(branchNames);

showcase/angular-showcase/src/app/components/other-components/other-components.component.html

@@ -2,14 +2,14 @@
   <p>Link list:</p>
   <db-linklist>
     <li>
-      <db-link href="https://db-ui.github.io/elements/" target="_blank">
-        DB UI Elements components documentation
-      </db-link>
+      <db-link href="https://db-ui.github.io/elements/" target="_blank"
+        >DB UI Elements components documentation</db-link
+      >
     </li>
     <li>
-      <db-link href="https://db-ui.github.io/elements/" target="_blank">
-        DB UI Core components documentation
-      </db-link>
+      <db-link href="https://db-ui.github.io/elements/" target="_blank"
+        >DB UI Core components documentation</db-link
+      >
     </li>
   </db-linklist>
   <p>Notification:</p>

showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html

@@ -31,9 +31,9 @@
     height="253"
   ></db-image>
   <p>DbLink:</p>
-  <db-link href="https://github.com/db-ui/elements/" target="_blank">
-    DB UI Elements components documentation
-  </db-link>
+  <db-link href="https://github.com/db-ui/elements/" target="_blank"
+    >DB UI Elements components documentation</db-link
+  >
   <p>DbLogo:</p>
   <db-logo></db-logo>
 </div>

showcase/playground-showcase/src/editor/snippets.tsx

@@ -19,12 +19,8 @@ const snippet3 = `
 
 const snippet4 = `
 <db-mainnavigation>
-  <db-link href="#" rel="index" aria-current="page">
-    Startseite
-  </db-link>
-  <db-link href="#" rel="offers">
-    Aufträge
-  </db-link>
+  <db-link href="#" rel="index" aria-current="page">Startseite</db-link>
+  <db-link href="#" rel="offers">Aufträge</db-link>
 </db-mainnavigation>
 
 <db-headline variant="1">Headline 1</db-headline>