From 1f878466b33637cd384dd2e660d6918469662a8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Schubert?= <reneschubert@gmx.de>
Date: Tue, 2 Nov 2021 15:03:43 +0100
Subject: [PATCH] fix(ld-typo): apply code review suggestions

---
 src/liquid/components/ld-typo/ld-typo.tsx | 22 +++++++++++++++++++---
 src/liquid/components/ld-typo/readme.md   | 14 ++++++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/liquid/components/ld-typo/ld-typo.tsx b/src/liquid/components/ld-typo/ld-typo.tsx
index 4c85391e61..56ae9c79e2 100644
--- a/src/liquid/components/ld-typo/ld-typo.tsx
+++ b/src/liquid/components/ld-typo/ld-typo.tsx
@@ -63,9 +63,21 @@ export class LdTypo {
   @Prop() ariaLabel: string
 
   private applyAriaLabel() {
-    const isBrandHeading =
-      this.variant.includes('b') && !this.variant.includes('body')
-    if (isBrandHeading) {
+    const isUppercase = [
+      'cap-m',
+      'cap-l',
+      'b1',
+      'b2',
+      'b3',
+      'b4',
+      'b5',
+      'b6',
+      'xb1',
+      'xb2',
+      'xb3',
+    ].includes(this.variant)
+
+    if (isUppercase) {
       this.root.setAttribute(
         'aria-label',
         this.ariaLabel || this.el.innerHTML.trim()
@@ -75,6 +87,10 @@ export class LdTypo {
 
   private getDefaultTag = () =>
     ({
+      'cap-m': 'span',
+      'cap-l': 'span',
+      'label-s': 'span',
+      'label-m': 'span',
       h1: 'h1',
       h2: 'h2',
       h3: 'h3',
diff --git a/src/liquid/components/ld-typo/readme.md b/src/liquid/components/ld-typo/readme.md
index 003b5a9184..30e4d5c36e 100644
--- a/src/liquid/components/ld-typo/readme.md
+++ b/src/liquid/components/ld-typo/readme.md
@@ -7,15 +7,11 @@ title: Typography
 permalink: components/ld-typo/
 ---
 
-# ld-typo
-
 <link rel="stylesheet" href="/css_components/ld-typo.css">
 
-Headings are used as an introduction into a topic or a content section and for visual and semantic differentiation between content blocks.
+# ld-typo
 
-> **Note**: A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
-> 
-> If you really must place headings in a way that they are visually not following a semantic hirarchicy, use the `variant` property for visually styling the heading according to the design given, while still applying correct semantical heading levels using the `level` prop. 
+To give text a certain style of typography, you can use the `ld-typo` component. Every variant has its own semantic HTML tag that it gets rendered with. Heading styles render with their respective heading tag (`h1`, `h2`, etc). You can use the `tag` attribute, to render the variant with a different HTML tag, while keeping the visual variant style.
 
 ---
 
@@ -127,6 +123,12 @@ Headings are used as an introduction into a topic or a content section and for v
 
 ### Headings
 
+Headings are used as an introduction into a topic or a content section and for visual and semantic differentiation between content blocks.
+
+> **Note**: A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
+> 
+> If you really must place headings in a way that they are visually not following a semantic hirarchicy, use the `variant` property for visually styling the heading according to the design given, while still applying correct semantical heading levels using the `level` prop. 
+
 {% example "html", true %}
 <ld-typo variant="h1">
   Almost before we knew it, we had left the ground.