From fc8a4e2fdaef7751aa3da8076070ddde27e504dd Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 4 Nov 2024 17:50:36 +0100
Subject: [PATCH] Fix abbr usages in Designer and Sample App

Refs: #6627
---
 .../designer/src/components/editor/store.tsx  | 26 ++----------------
 .../react/src/components/handout/basic.tsx    | 27 +++----------------
 2 files changed, 5 insertions(+), 48 deletions(-)

diff --git a/packages/designer/src/components/editor/store.tsx b/packages/designer/src/components/editor/store.tsx
index 48f80287bf..355e67b6eb 100644
--- a/packages/designer/src/components/editor/store.tsx
+++ b/packages/designer/src/components/editor/store.tsx
@@ -174,32 +174,10 @@ export const components: Record<string, Component> = {
 	'KOL-ABBR': () => (
 		<div class="grid gap-6">
 			<p>
-				Ich bin eine{' '}
-				<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="top">
-					ABB
-				</KolAbbr>{' '}
-				mit Tooltip oben
+				Ich <KolAbbr _label="zum Beispiel">z. B.</KolAbbr> bin eine Abkürzung mit Label.
 			</p>
 			<p>
-				Ich bin eine{' '}
-				<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="right">
-					ABB
-				</KolAbbr>{' '}
-				mit Tooltip rechts
-			</p>
-			<p>
-				Ich bin eine{' '}
-				<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="bottom">
-					ABB
-				</KolAbbr>{' '}
-				mit Tooltip unten
-			</p>
-			<p>
-				Ich bin eine{' '}
-				<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="left">
-					ABB
-				</KolAbbr>{' '}
-				mit Tooltip links
+				Ich <KolAbbr>z. B.</KolAbbr> bin eine Abkürzung ohne Label.
 			</p>
 		</div>
 	),
diff --git a/packages/samples/react/src/components/handout/basic.tsx b/packages/samples/react/src/components/handout/basic.tsx
index e94241318f..9810758f80 100644
--- a/packages/samples/react/src/components/handout/basic.tsx
+++ b/packages/samples/react/src/components/handout/basic.tsx
@@ -251,32 +251,11 @@ export const HandoutBasic: FC = () => {
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _label="Abbreviation and Progress" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
 						<p>
-							I am a{' '}
-							<KolAbbr _label="Detailed description" _tooltipAlign="top">
-								ABB
-							</KolAbbr>{' '}
-							with tooltip at the top
-						</p>
-						<p>
-							I am a{' '}
-							<KolAbbr _label="Detailed description" _tooltipAlign="right">
-								ABB
-							</KolAbbr>{' '}
-							with tooltip on the right
-						</p>
-						<p>
-							I am a{' '}
-							<KolAbbr _label="Detailed description" _tooltipAlign="bottom">
-								ABB
-							</KolAbbr>{' '}
-							with tooltip at the bottom
+							I am <KolAbbr _label="as an example">e.g.</KolAbbr> an abbreviation.
 						</p>
+
 						<p>
-							I am a{' '}
-							<KolAbbr _label="Detailed description" _tooltipAlign="left">
-								ABB
-							</KolAbbr>{' '}
-							with tooltip on the left
+							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 						</p>
 						<div className="grid grid-cols-2 items-center">
 							<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />