Fix KolHeading usages

public-ui · Nov 7, 2023 · 74a2865 · 74a2865
1 parent 1690427
commit 74a2865
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
@@ -18,7 +18,7 @@ export class KolHeading implements Props {
 	public render(): JSX.Element {
 		return (
 			<kol-heading-wc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>
-				<slot />
+				<slot name="expert" slot="expert" />
 			</kol-heading-wc>
 		);
 	}

diff --git a/packages/samples/react/src/components/heading/badged.tsx b/packages/samples/react/src/components/heading/badged.tsx
@@ -6,22 +6,34 @@ import { FC } from 'react';
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 	</div>
 );
diff --git a/packages/samples/react/src/scenarios/complex-form/component.tsx b/packages/samples/react/src/scenarios/complex-form/component.tsx
@@ -19,8 +19,8 @@ type Zeiten = {
 export const TerminComponent: FC = () => (
 	<>
 		<div className="grid sm:grid-cols-1 gap-2 my-3">
-			<KolHeading>Terminreservierung</KolHeading>
-			<KolHeading _level={2}>Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten</KolHeading>
+			<KolHeading _label="Terminreservierung" />
+			<KolHeading _label="Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten" _level={2} />
 			<div style={{ fontFamily: 'Arial' }}>
 				<p className="py-2">Derzeit kann generell nur mit vorheriger Terminvereinbarung bei den Bürgerdiensten vorgesprochen werden.</p>
 				<p className="py-2">
@@ -141,22 +141,22 @@ export const TerminComponent: FC = () => (
 				]}
 			>
 				<div>
-					<KolHeading _level={2}>Wählen Sie einen Stadtteil aus</KolHeading>
+					<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus" />
 					<TerminLocationComponent onSubmitted={() => {}} />
 				</div>
 				<div>
-					<KolHeading _level={2}>Wählen Sie einen Termin aus</KolHeading>
+					<KolHeading _level={2} _label="Wählen Sie einen Termin aus" />
 					<TerminScheduleComponent onSubmitted={() => {}} />
 				</div>
 				<div>
-					<KolHeading _level={2}>Geben Sie Ihre Kontaktdaten ein</KolHeading>
+					<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein" />
 					<TerminKopfdatenComponent onSubmitted={() => {}} />
 				</div>
 			</KolTabs>
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<div className="border-top"></div>
-			<KolHeading _level={3}>Fortschritt</KolHeading>
+			<KolHeading _level={3} _label="Fortschritt" />
 			<KolProgress _value={0} _max={100} _unit="Prozent des Formulars"></KolProgress>
 		</div>
 	</>