Skip to content

Commit f294fa7

Browse files
awesomephantawesomephant
authored
feat(Typography): Add as prop (#238)
* Allows rendering Headline, Copy, Caption, Note as arbitrary HTML elements
1 parent a2ceb41 commit f294fa7

File tree

7 files changed

+100
-22
lines changed

7 files changed

+100
-22
lines changed

‎components/src/Caption/Caption.stories.svelte‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script context="module">
22
import { defineMeta } from '@storybook/addon-svelte-csf';
3+
import { expect } from 'storybook/test';
34
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
45
56
import Caption from './Caption.svelte';
@@ -28,8 +29,21 @@
2829
</DesignTokens>
2930
</Story>
3031

31-
<style>
32-
.container {
33-
color: var(--color-textPrimary);
34-
}
35-
</style>
32+
<Story
33+
name="Render as HTML element"
34+
asChild
35+
play={async ({ canvasElement, step }) => {
36+
const el = canvasElement.querySelector('p');
37+
await step('Renders as specified HTML element', async () => {
38+
expect(el).toBeTruthy();
39+
});
40+
}}
41+
>
42+
<DesignTokens theme="light">
43+
<div class="container">
44+
<Caption weight="bold" as="p">
45+
Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
46+
</Caption>
47+
</div>
48+
</DesignTokens>
49+
</Story>

‎components/src/Caption/Caption.svelte‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,15 @@
33
44
interface CaptionProps {
55
weight?: 'regular' | 'bold';
6+
as?: string;
67
children?: Snippet;
78
}
8-
let { weight = 'regular', children }: CaptionProps = $props();
9+
let { weight = 'regular', as = 'div', children }: CaptionProps = $props();
910
</script>
1011

11-
<div class={['container', weight]}>
12-
{#if children}
13-
{@render children()}
14-
{/if}
15-
</div>
12+
<svelte:element this={as} class={['container', weight]}>
13+
{@render children?.()}
14+
</svelte:element>
1615

1716
<style lang="scss">
1817
.container {

‎components/src/Copy/Copy.stories.svelte‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script context="module">
22
import { defineMeta } from '@storybook/addon-svelte-csf';
3+
import { expect } from 'storybook/test';
4+
35
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
46
57
import Copy from './Copy.svelte';
@@ -24,7 +26,7 @@
2426
</DesignTokens>
2527
</Story>
2628
<Story name="Bold" asChild>
27-
<DesignTokens>
29+
<DesignTokens theme="light">
2830
<div class="container">
2931
<Copy weight="bold">
3032
Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
@@ -36,6 +38,28 @@
3638
</div>
3739
</DesignTokens>
3840
</Story>
41+
<Story
42+
name="Render as HTML element"
43+
asChild
44+
play={async ({ canvasElement, step }) => {
45+
const el = canvasElement.querySelector('p');
46+
await step('Renders as specified HTML element', async () => {
47+
expect(el).toBeTruthy();
48+
});
49+
}}
50+
>
51+
<DesignTokens theme="light">
52+
<div class="container">
53+
<Copy as="p">
54+
Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
55+
größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die
56+
Pollensaison hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die
57+
Pollensaison wird länger, die Grippesaison wird länger und dadurch überlappt sich das
58+
Ganze."
59+
</Copy>
60+
</div>
61+
</DesignTokens>
62+
</Story>
3963

4064
<style>
4165
.container {

‎components/src/Headline/Headline.stories.svelte‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script context="module">
22
import { defineMeta } from '@storybook/addon-svelte-csf';
3-
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
3+
import { expect } from 'storybook/test';
44
5+
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
56
import Headline from './Headline.svelte';
67
78
const { Story } = defineMeta({
@@ -18,6 +19,23 @@
1819
</DesignTokens>
1920
</Story>
2021

22+
<Story
23+
name="Render as HTML element"
24+
asChild
25+
play={async ({ canvasElement, step }) => {
26+
const el = canvasElement.querySelector('h3');
27+
await step('Renders as specified HTML element', async () => {
28+
expect(el).toBeTruthy();
29+
});
30+
}}
31+
>
32+
<DesignTokens theme="light">
33+
<div class="container">
34+
<Headline as="h3">This should be a H3</Headline>
35+
</div>
36+
</DesignTokens>
37+
</Story>
38+
2139
<style>
2240
.container {
2341
color: var(--color-textPrimary);

‎components/src/Headline/Headline.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
44
interface HeadlineProps {
55
children?: Snippet;
6+
as?: string;
67
}
7-
let { children }: HeadlineProps = $props();
8+
9+
let { as = 'h2', children }: HeadlineProps = $props();
810
</script>
911

10-
<h2 class="container">
12+
<svelte:element this={as} class="container">
1113
{@render children?.()}
12-
</h2>
14+
</svelte:element>
1315

1416
<style>
1517
.container {

‎components/src/Note/Note.stories.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script context="module">
22
import { defineMeta } from '@storybook/addon-svelte-csf';
3+
import { expect } from 'storybook/test';
4+
35
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
46
import Middot from '../Middot/Middot.svelte';
57
@@ -21,3 +23,23 @@
2123
</Note>
2224
</DesignTokens>
2325
</Story>
26+
27+
<Story
28+
name="Render as HTML element"
29+
asChild
30+
play={async ({ canvasElement, step }) => {
31+
const el = canvasElement.querySelector('p');
32+
await step('Renders as specified HTML element', async () => {
33+
expect(el).toBeTruthy();
34+
});
35+
}}
36+
>
37+
<DesignTokens theme="light">
38+
<Note as="p">
39+
Daten: <a href="#1">Zensus 2022</a>
40+
(Durchschnittsmieten und Einwohnerzahlen),
41+
<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
42+
auf bewohnte Gebiete begrenzt.
43+
</Note>
44+
</DesignTokens>
45+
</Story>

‎components/src/Note/Note.svelte‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
44
interface NoteProps {
55
children?: Snippet;
6+
as?: string;
67
}
7-
let { children }: NoteProps = $props();
8+
let { as = 'div', children }: NoteProps = $props();
89
</script>
910

10-
<div class="container">
11-
{#if children}
12-
{@render children()}
13-
{/if}
14-
</div>
11+
<svelte:element this={as} class="container">
12+
{@render children?.()}
13+
</svelte:element>
1514

1615
<style lang="scss">
1716
.container {

0 commit comments

Comments
 (0)