diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.twig b/packages/web-twig/src/Resources/components/Heading/Heading.twig index de6706ea18..6ea91c5736 100644 --- 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 index 2820ab24f7..0e0733fa06 100644 --- 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 -This is a 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 ``` @@ -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 -Semibold heading +Semibold 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/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig b/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig index ad949c40bc..413a76da67 100644 --- a/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig +++ b/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig @@ -1,4 +1,5 @@ - + + Example heading @@ -7,8 +8,8 @@ Example heading - - + + Example heading diff --git a/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html index 7065f4eafb..e9ebd6b3e5 100644 --- a/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html @@ -1,5 +1,5 @@ - + @@ -13,11 +13,11 @@

Example heading

- + -
+

Example heading -

+

diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingDefault.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingDefault.twig index b03a2b6298..8292628d35 100644 --- 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 H2 diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingEmphasis.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingEmphasis.twig index ae22017053..9e819dc608 100644 --- 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 regular +Heading regular -Heading semibold +Heading semibold -Heading bold +Heading bold -Heading italic +Heading italic diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingSizes.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingSizes.twig index 9d31221380..171385bba8 100644 --- 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 }} + Heading {{ size }} {% endfor %}