refactor: enhance KolHeading component to support secondary headline and update snapshots

Author: deleonio

packages/components/src/components/heading/__snapshots__/snapshot.spec.tsx.snap

@@ -77,6 +77,22 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 </kol-heading>
 `;
 
+exports[`kol-heading should render with _label="Headline" _secondaryHeadline="Subheadline" 1`] = `
+<kol-heading>
+  <template shadowrootmode="open">
+    <hgroup class="kol-heading-group">
+      <strong class="kol-headline kol-headline--group kol-headline--primary kol-headline--strong">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </strong>
+      <p class="kol-headline kol-headline--group kol-headline--secondary">
+        Subheadline
+      </p>
+    </hgroup>
+  </template>
+</kol-heading>
+`;
+
 exports[`kol-heading should render with _label="Headline" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">

packages/components/src/components/heading/component.tsx

@@ -1,9 +1,10 @@
 import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop, Watch } from '@stencil/core';
 
+import { BaseWebComponent } from '../../internal/functional-components/base-web-component';
 import type { WebComponentInterface } from '../../internal/functional-components/generic-types';
-import { HeadingFC } from '../../internal/functional-components/heading/component';
 import type { HeadingApi } from '../../internal/functional-components/heading/api';
+import { HeadingFC } from '../../internal/functional-components/heading/component';
 import { HeadingController } from '../../internal/functional-components/heading/controller';
 import type { HeadingLevel, LabelWithExpertSlotPropType } from '../../schema';
 
@@ -18,8 +19,8 @@ import type { HeadingLevel, LabelWithExpertSlotPropType } from '../../schema';
 	},
 	shadow: true,
 })
-export class KolHeading implements WebComponentInterface<HeadingApi> {
-	private readonly ctrl: HeadingController = new HeadingController();
+export class KolHeading extends BaseWebComponent<HeadingApi> implements WebComponentInterface<HeadingApi> {
+	private readonly ctrl: HeadingController = new HeadingController(this.setState, this.getState);
 
 	/**
 	 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
@@ -60,10 +61,13 @@ export class KolHeading implements WebComponentInterface<HeadingApi> {
 	}
 
 	public render(): JSX.Element {
-		const { label, level, secondaryHeadline } = this.ctrl.getProps();
 		return (
 			<Host>
-				<HeadingFC label={label} level={level} secondaryHeadline={secondaryHeadline} />
+				<HeadingFC
+					label={this.ctrl.getRenderProp('label')}
+					level={this.ctrl.getRenderProp('level')}
+					secondaryHeadline={this.ctrl.getRenderProp('secondaryHeadline')}
+				/>
 			</Host>
 		);
 	}

packages/components/src/components/heading/snapshot.spec.tsx

@@ -7,5 +7,9 @@ import { KolHeading } from './component';
 executeSnapshotTests<HeadingProps>(
 	KolHeadingTag,
 	[KolHeading],
-	[{ _label: 'Headline' }, ...[0, 1, 2, 3, 4, 5, 6].map((_level) => ({ _label: 'Headline', _level }) as HeadingProps)],
+	[
+		{ _label: 'Headline' },
+		{ _label: 'Headline', _secondaryHeadline: 'Subheadline' },
+		...[0, 1, 2, 3, 4, 5, 6].map((_level) => ({ _label: 'Headline', _level }) as HeadingProps),
+	],
 );

packages/components/src/internal/functional-components/heading/api.tsx

@@ -1,9 +1,9 @@
-import type { LabelWithExpertSlotProp, LevelProp, SecondaryHeadlineProp } from '../../props';
-import type { ComponentApi } from '../generic-types';
+import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';
+import type { ApiFromConfig, PropsConfigShape } from '../generic-types';
 
-export interface HeadingApi extends ComponentApi {
-	Props: {
-		Optional: LevelProp & SecondaryHeadlineProp;
-		Required: LabelWithExpertSlotProp;
-	};
-}
+export const headingPropsConfig = {
+	optional: [levelProp, secondaryHeadlineProp],
+	required: [labelWithExpertSlotProp],
+} as const satisfies PropsConfigShape;
+
+export type HeadingApi = ApiFromConfig<typeof headingPropsConfig>;

packages/components/src/internal/functional-components/heading/controller.ts

@@ -1,16 +1,12 @@
-import type { HeadingLevel, LabelWithExpertSlotProp, LevelProp, SecondaryHeadlineProp } from '../../props';
-import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp, withValidPropValue } from '../../props';
+import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';
 import { BaseController } from '../base-controller';
-import type { ControllerInterface, ResolvedInputProps } from '../generic-types';
+import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
 import type { HeadingApi } from './api';
+import { headingPropsConfig } from './api';
 
 export class HeadingController extends BaseController<HeadingApi> implements ControllerInterface<HeadingApi> {
-	public constructor(states: HeadingApi['States'] = {}) {
-		super(states, {
-			label: '',
-			level: 0 as HeadingLevel,
-			secondaryHeadline: '',
-		});
+	public constructor(setState: SetStateFn<HeadingApi>, getState: GetStateFn<HeadingApi>) {
+		super(headingPropsConfig, setState, getState);
 	}
 
 	public componentWillLoad(props: ResolvedInputProps<HeadingApi>): void {
@@ -21,20 +17,20 @@ export class HeadingController extends BaseController<HeadingApi> implements Con
 	}
 
 	public watchLabel(value?: string): void {
-		withValidPropValue<LabelWithExpertSlotProp>(labelWithExpertSlotProp, value, (v) => {
-			this.setProp('label', v);
+		labelWithExpertSlotProp.apply(value, (v) => {
+			this.setRenderProp('label', v);
 		});
 	}
 
-	public watchLevel(value?: HeadingLevel): void {
-		withValidPropValue<LevelProp>(levelProp, value, (v) => {
-			this.setProp('level', v);
+	public watchLevel(value?: number): void {
+		levelProp.apply(value, (v) => {
+			this.setRenderProp('level', v);
 		});
 	}
 
 	public watchSecondaryHeadline(value?: string): void {
-		withValidPropValue<SecondaryHeadlineProp>(secondaryHeadlineProp, value, (v) => {
-			this.setProp('secondaryHeadline', v);
+		secondaryHeadlineProp.apply(value, (v) => {
+			this.setRenderProp('secondaryHeadline', v);
 		});
 	}
 }

packages/components/src/internal/props/label-with-expert-slot.ts

@@ -3,4 +3,4 @@ import { createPropDefinition } from './helpers/factory';
 import { normalizeString } from './helpers/normalizers';
 
 export type LabelWithExpertSlotProp = SimpleProp<'label', string>;
-export const labelWithExpertSlotProp = createPropDefinition<LabelWithExpertSlotProp>(normalizeString, () => true);
+export const labelWithExpertSlotProp = createPropDefinition<LabelWithExpertSlotProp>('label', '', normalizeString);

packages/components/src/internal/props/level.ts

@@ -7,6 +7,8 @@ export type HeadingLevel = (typeof headingLevelOptions)[number];
 
 export type LevelProp = SimpleProp<'level', HeadingLevel>;
 export const levelProp = createPropDefinition<LevelProp>(
+	'level',
+	0,
 	(value) => normalizeInteger(value) as HeadingLevel,
 	(v) => headingLevelOptions.includes(v),
 );

packages/components/src/internal/props/secondary-headline.ts

@@ -3,4 +3,4 @@ import { createPropDefinition } from './helpers/factory';
 import { normalizeString } from './helpers/normalizers';
 
 export type SecondaryHeadlineProp = SimpleProp<'secondaryHeadline', string>;
-export const secondaryHeadlineProp = createPropDefinition<SecondaryHeadlineProp>(normalizeString, () => true);
+export const secondaryHeadlineProp = createPropDefinition<SecondaryHeadlineProp>('secondaryHeadline', '', normalizeString);