Skip to content

Commit 5f7882b

Browse files
laske185laske185
authored
Remove prop heading-variant from kol-heading (#7836)
2 parents f8f2070 + 5ab349b commit 5f7882b

File tree

7 files changed

+13
-133
lines changed

7 files changed

+13
-133
lines changed

‎packages/components/src/components/heading/shadow.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Component, h, Prop, State, Watch } from '@stencil/core';
21
import type { JSX } from '@stencil/core';
3-
import type { HeadingAPI, HeadingLevel, HeadingStates, HeadingVariantPropType, LabelWithExpertSlotPropType } from '../../schema';
4-
import { validateHeadingVariant, validateLabelWithExpertSlot, watchString } from '../../schema';
2+
import { Component, h, Prop, State, Watch } from '@stencil/core';
3+
import type { HeadingAPI, HeadingLevel, HeadingStates, LabelWithExpertSlotPropType } from '../../schema';
4+
import { validateLabelWithExpertSlot, watchString } from '../../schema';
55
import { KolHeadingFc } from '../../functional-components';
66
import { watchHeadingLevel } from './validation';
77

@@ -32,11 +32,6 @@ export class KolHeading implements HeadingAPI {
3232
*/
3333
@Prop() public _secondaryHeadline?: string;
3434

35-
/**
36-
* Defines which variant should be used for presentation.
37-
*/
38-
@Prop() public _variant?: HeadingVariantPropType;
39-
4035
@State() public state: HeadingStates = {
4136
_label: '', // ⚠ required
4237
_level: 0,
@@ -57,23 +52,17 @@ export class KolHeading implements HeadingAPI {
5752
watchString(this, '_secondaryHeadline', value);
5853
}
5954

60-
@Watch('_variant')
61-
public validateVariant(value?: HeadingVariantPropType): void {
62-
validateHeadingVariant(this, value);
63-
}
64-
6555
public componentWillLoad(): void {
6656
this.validateLabel(this._label);
6757
this.validateLevel(this._level);
6858
this.validateSecondaryHeadline(this._secondaryHeadline);
69-
this.validateVariant(this._variant);
7059
}
7160

7261
public render(): JSX.Element {
73-
const { _secondaryHeadline, _label, _level, _variant } = this.state;
62+
const { _secondaryHeadline, _label, _level } = this.state;
7463

7564
return (
76-
<KolHeadingFc secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
65+
<KolHeadingFc secondaryHeadline={_secondaryHeadline} level={_level}>
7766
{_label}
7867
<slot name="expert" slot="expert" />
7968
</KolHeadingFc>

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

Lines changed: 0 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -77,83 +77,6 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
7777
</kol-heading>
7878
`;
7979

80-
exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
81-
<kol-heading>
82-
<template shadowrootmode="open">
83-
<strong class="kol-headline kol-headline--h1 kol-headline--single">
84-
Headline
85-
<slot name="expert" slot="expert"></slot>
86-
</strong>
87-
</template>
88-
</kol-heading>
89-
`;
90-
91-
exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
92-
<kol-heading>
93-
<template shadowrootmode="open">
94-
<strong class="kol-headline kol-headline--h2 kol-headline--single">
95-
Headline
96-
<slot name="expert" slot="expert"></slot>
97-
</strong>
98-
</template>
99-
</kol-heading>
100-
`;
101-
102-
exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
103-
<kol-heading>
104-
<template shadowrootmode="open">
105-
<strong class="kol-headline kol-headline--h3 kol-headline--single">
106-
Headline
107-
<slot name="expert" slot="expert"></slot>
108-
</strong>
109-
</template>
110-
</kol-heading>
111-
`;
112-
113-
exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
114-
<kol-heading>
115-
<template shadowrootmode="open">
116-
<strong class="kol-headline kol-headline--h4 kol-headline--single">
117-
Headline
118-
<slot name="expert" slot="expert"></slot>
119-
</strong>
120-
</template>
121-
</kol-heading>
122-
`;
123-
124-
exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
125-
<kol-heading>
126-
<template shadowrootmode="open">
127-
<strong class="kol-headline kol-headline--h5 kol-headline--single">
128-
Headline
129-
<slot name="expert" slot="expert"></slot>
130-
</strong>
131-
</template>
132-
</kol-heading>
133-
`;
134-
135-
exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
136-
<kol-heading>
137-
<template shadowrootmode="open">
138-
<strong class="kol-headline kol-headline--h6 kol-headline--single">
139-
Headline
140-
<slot name="expert" slot="expert"></slot>
141-
</strong>
142-
</template>
143-
</kol-heading>
144-
`;
145-
146-
exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
147-
<kol-heading>
148-
<template shadowrootmode="open">
149-
<strong class="kol-headline kol-headline--single kol-headline--strong">
150-
Headline
151-
<slot name="expert" slot="expert"></slot>
152-
</strong>
153-
</template>
154-
</kol-heading>
155-
`;
156-
15780
exports[`kol-heading should render with _label="Headline" 1`] = `
15881
<kol-heading>
15982
<template shadowrootmode="open">

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,5 @@ import { KolHeading } from '../shadow';
77
executeSnapshotTests<HeadingProps>(
88
KolHeadingTag,
99
[KolHeading],
10-
[
11-
{ _label: 'Headline' },
12-
...[0, 1, 2, 3, 4, 5, 6].map((_level) => ({ _label: 'Headline', _level }) as HeadingProps),
13-
...['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong'].map((_variant) => ({ _label: 'Headline', _variant }) as HeadingProps),
14-
],
10+
[{ _label: 'Headline' }, ...[0, 1, 2, 3, 4, 5, 6].map((_level) => ({ _label: 'Headline', _level }) as HeadingProps)],
1511
);

‎packages/components/src/functional-components/Heading/Heading.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { h, type FunctionalComponent as FC } from '@stencil/core';
22
import clsx from 'clsx';
33
import type { JSXBase } from '@stencil/core/internal';
4-
import type { HeadingLevel, HeadingVariantPropType } from '../../schema';
4+
import type { HeadingLevel } from '../../schema';
55

66
type HGroupProps = JSXBase.HTMLAttributes<HTMLElement>;
77

@@ -11,9 +11,7 @@ type BaseProps = JSXBase.HTMLAttributes<HTMLHeadingElement | HTMLElement> & {
1111
};
1212

1313
// Define a type for the main headline props
14-
type HeadlineProps = BaseProps & {
15-
variant?: HeadingVariantPropType;
16-
};
14+
type HeadlineProps = BaseProps;
1715

1816
// Define a type for the secondary headline props
1917
type SecondaryHeadlineProps = BaseProps;
@@ -67,12 +65,11 @@ export function getSubHeadlineTag(level: HeadingLevel | number): SubHeadlineTag
6765
* @param children - The children to render inside the headline.
6866
* @returns A VNode representing the headline.
6967
*/
70-
const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADING_LEVEL, variant, ...other }, children) => {
68+
const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADING_LEVEL, ...other }, children) => {
7169
const HeadlineTag = getHeadlineTag(level);
72-
const finalVariant = variant || HeadlineTag;
7370

7471
return (
75-
<HeadlineTag class={clsx('kol-headline', `kol-headline--${finalVariant}`, classNames)} {...other}>
72+
<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, classNames)} {...other}>
7673
{children}
7774
</HeadlineTag>
7875
);

‎packages/components/src/schema/components/heading.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import type { Generic } from 'adopted-style-sheets';
22

3-
import type { HeadingLevel, PropHeadingVariant, PropLabelWithExpertSlot } from '../props';
3+
import type { HeadingLevel, PropLabelWithExpertSlot } from '../props';
44

55
type RequiredProps = PropLabelWithExpertSlot;
6-
type OptionalProps = PropHeadingVariant & {
6+
type OptionalProps = {
77
secondaryHeadline: string;
88
level: HeadingLevel;
99
};
1010

1111
type RequiredStates = RequiredProps & {
1212
level: HeadingLevel;
1313
};
14-
type OptionalStates = PropHeadingVariant & {
14+
type OptionalStates = {
1515
secondaryHeadline: string;
1616
};
1717
export type HeadingProps = Generic.Element.Members<RequiredProps, OptionalProps>;

‎packages/components/src/schema/props/heading-variant.ts‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎packages/components/src/schema/props/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export * from './has-closer';
2727
export * from './has-compact-button';
2828
export * from './has-counter';
2929
export * from './has-icons-when-expanded';
30-
export * from './heading-variant';
3130
export * from './hide-label';
3231
export * from './hide-msg';
3332
export * from './href';

0 commit comments

Comments
 (0)
⚡