Revert "Refactoring Span and Heading Component as Functional Componen…

…t" (#7064)
public-ui · Nov 13, 2024 · 1fc556f · 1fc556f
2 parents 4a51be7 + f3ae087
commit 1fc556f
Show file tree

Hide file tree

Showing 57 changed files with 723 additions and 1,275 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -77,7 +77,6 @@
 		"clsx": "2.1.1",
 		"color-convert": "2.0.1",
 		"color-rgba": "2.4.0",
-		"lodash-es": "4.17.21",
 		"markdown-it": "14.1.0",
 		"query-selector-all-shadow-root": "0.0.3",
 		"query-selector-shadow-root": "0.0.3",
@@ -97,7 +96,6 @@
 		"@stencil/sass": "3.0.12",
 		"@types/color-convert": "2.0.4",
 		"@types/jest": "26.0.24",
-		"@types/lodash-es": "4.17.12",
 		"@types/markdown-it": "14.1.2",
 		"@types/mustache": "4.2.5",
 		"@types/pug": "2.0.10",

diff --git a/packages/components/src/components/abbr/abbr.e2e.ts b/packages/components/src/components/abbr/abbr.e2e.ts
@@ -5,7 +5,7 @@ test.describe('kol-abbr', () => {
 	test('it shows tooltip on hover', async ({ page }) => {
 		await page.setContent('<kol-abbr _label="for example">e.g.</kol-abbr>');
 		const kolAbbr = page.locator('kol-abbr');
-		const tooltip = kolAbbr.locator('kol-tooltip-wc .tooltip-content');
+		const tooltip = kolAbbr.locator('kol-tooltip-wc kol-span-wc');
 		await expect(tooltip).not.toBeVisible();
 		await kolAbbr.hover();
 		await expect(tooltip).toBeVisible();

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,11 +4,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h1 class="headline headline-h1">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </section>
+      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -25,11 +23,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible disabled" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h1 class="headline headline-h1">
-          <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </section>
+      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -46,11 +42,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="" class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible open" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h1 class="headline headline-h1">
-          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </section>
+      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div class="accordion__content collapsible__content" id="nonce-control">
@@ -67,11 +61,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="" class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible disabled open" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h1 class="headline headline-h1">
-          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </section>
+      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div class="accordion__content collapsible__content" id="nonce-control">
@@ -88,11 +80,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h1 class="headline headline-h1">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </section>
+      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -109,11 +99,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h2 class="headline headline-h2">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h2>
-      </section>
+      <kol-heading-wc _label="" _level="2" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -130,11 +118,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h3 class="headline headline-h3">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h3>
-      </section>
+      <kol-heading-wc _label="" _level="3" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -151,11 +137,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h4 class="headline headline-h4">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h4>
-      </section>
+      <kol-heading-wc _label="" _level="4" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -172,11 +156,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h5 class="headline headline-h5">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h5>
-      </section>
+      <kol-heading-wc _label="" _level="5" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -193,11 +175,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h6 class="headline headline-h6">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h6>
-      </section>
+      <kol-heading-wc _label="" _level="6" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
@@ -214,11 +194,9 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion class="kol-accordion">
   <template shadowrootmode="open">
     <div class="accordion collapsible" id="nonce">
-      <section class="accordion__heading collapsible__heading kol-heading-wc">
-        <h1 class="headline headline-h1">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </section>
+      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+      </kol-heading-wc>
       <div class="accordion__wrapper collapsible__wrapper">
         <div class="accordion__wrapper-animation collapsible__wrapper-animation">
           <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">