BREAKING-CHANGE(web-twig): Remove default elementType value for Headi…

…ng component
lmc-eu · Oct 8, 2024 · c81309d · c81309d
1 parent b28bc87
commit c81309d
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 23 deletions.
diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.twig b/packages/web-twig/src/Resources/components/Heading/Heading.twig
@@ -2,7 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _emphasis = props.emphasis | default('bold') -%}
 {%- set _size = props.size | default('medium') -%}
-{%- set _elementType = props.elementType | default('div') -%}
+{%- set _elementType = props.elementType -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'typography-heading-' ~ _size ~ '-' ~ _emphasis -%}

diff --git a/packages/web-twig/src/Resources/components/Heading/README.md b/packages/web-twig/src/Resources/components/Heading/README.md
@@ -4,12 +4,6 @@ This is Twig implementation of the [Heading][heading] component.
 
 ## Basic Usage
 
-```twig
-<Heading>This is a heading</Heading>
-```
-
-## Element Type
-
 Use the `elementType` prop to set the HTML tag of the Heading component.
 
 ```twig
@@ -23,7 +17,7 @@ Use the `elementType` prop to set the HTML tag of the Heading component.
 Use the `size` prop to set the size of the text.
 
 ```twig
-<Heading size="large">
+<Heading elementType="h1" size="large">
   Heading
 </Heading>
 ```
@@ -35,7 +29,7 @@ Use the `emphasis` prop to set the emphasis of the text.
 ⚠️ This prop only affects styling, not the semantics of the element.
 
 ```twig
-<Heading emphasis="semibold">Semibold heading</Heading>
+<Heading elementType="h1" emphasis="semibold">Semibold heading</Heading>
 ```
 
 ## Full Example
@@ -50,6 +44,7 @@ Use the `emphasis` prop to set the emphasis of the text.
 
 ```twig
 {% embed "@spirit/heading.twig" with { props: {
+  elementType: 'h1',
   emphasis: 'semibold',
   size: 'medium'
 }} %}
@@ -63,7 +58,7 @@ Use the `emphasis` prop to set the emphasis of the text.
 
 | Name          | Type                                        | Default  | Required | Description                                                    |
 | ------------- | ------------------------------------------- | -------- | -------- | -------------------------------------------------------------- |
-| `elementType` | `string`                                    | `div`    | ✕        | HTML tag to render                                             |
+| `elementType` | `string`                                    | -        | ✓        | HTML tag to render                                             |
 | `emphasis`    | [Emphasis dictionary][dictionary-emphasis]  | `bold`   | ✕        | Emphasis of the text                                           |
 | `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text                                               |
 | `translate`   | \[`yes` \| `no` \| `''`]                    | `null`   | ✕        | Set to `no` to disable machine translation of the text content |

diff --git a/...ages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig b/...ages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig
@@ -1,4 +1,5 @@
-<Heading>
+<!-- Render as div -->
+<Heading elementType="div">
     Example heading
 </Heading>
 
@@ -7,8 +8,8 @@
     Example heading
 </Heading>
 
-<!-- Render as semibold -->
-<Heading emphasis="semibold">
+<!-- Render as h1 semibold -->
+<Heading elementType="h1" emphasis="semibold">
     Example heading
 </Heading>
 

diff --git a/...ig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html b/...ig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!-- Render as div --><html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>
     </title>
@@ -13,11 +13,11 @@
     <h1 class="typography-heading-medium-bold">
       Example heading
     </h1>
-    <!-- Render as semibold -->
+    <!-- Render as h1 semibold -->
 
-    <div class="typography-heading-medium-semibold">
+    <h1 class="typography-heading-medium-semibold">
       Example heading
-    </div>
+    </h1>
     <!-- Render with all props -->
 
     <h2 translate="no" class="typography-heading-large-italic">

diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingDefault.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingDefault.twig
@@ -1,3 +1,3 @@
-<Heading>Heading</Heading>
+<Heading elementType="div">Heading</Heading>
 
 <Heading elementType="h2">Heading H2</Heading>
diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingEmphasis.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingEmphasis.twig
@@ -1,7 +1,7 @@
-<Heading emphasis="regular">Heading regular</Heading>
+<Heading elementType="h2" emphasis="regular">Heading regular</Heading>
 
-<Heading emphasis="semibold">Heading semibold</Heading>
+<Heading elementType="h2" emphasis="semibold">Heading semibold</Heading>
 
-<Heading emphasis="bold">Heading bold</Heading>
+<Heading elementType="h2" emphasis="bold">Heading bold</Heading>
 
-<Heading emphasis="italic">Heading italic</Heading>
+<Heading elementType="h2" emphasis="italic">Heading italic</Heading>
diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingSizes.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingSizes.twig
@@ -1,5 +1,5 @@
 {% set sizes = [ 'xsmall', 'small', 'medium', 'large', 'xlarge' ] %}
 
 {% for size in sizes %}
-    <Heading size={{ size }}>Heading {{ size }}</Heading>
+    <Heading elementType="h2" size={{ size }}>Heading {{ size }}</Heading>
 {% endfor %}