Feat(web-twig): Deprecate class in Heading #DS-646

lmc-eu · Apr 24, 2023 · f780d4b · f780d4b
1 parent bf5b7f4
commit f780d4b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig
@@ -8,7 +8,7 @@
             {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
         </Header>
 
-        <Heading elementType="div" size="large" class="text-center mb-1200">Example Cover</Heading>
+        <Heading elementType="div" size="large" UNSAFE_className="text-center mb-1200">Example Cover</Heading>
 
     </div>
 

diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.twig b/packages/web-twig/src/Resources/components/Heading/Heading.twig
@@ -1,15 +1,15 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _size = props.size | default('medium') -%}
 {%- set _elementType = props.elementType | default('div') -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'typography-heading-' ~ _size ~ '-text' -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 
-<{{ _elementType }} {{ mainProps(props) }} {{ classProp(_classNames) }}>
+<{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
 {%- block content %}{% endblock -%}
 </{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Heading/README.md b/packages/web-twig/src/Resources/components/Heading/README.md
@@ -30,12 +30,13 @@ Without lexer:
 
 | Prop name     | Type                                        | Default  | Required | Description        |
 | ------------- | ------------------------------------------- | -------- | -------- | ------------------ |
-| `class`       | `string`                                    | `null`   | no       | Custom CSS class   |
 | `size`        | [Size Extended dictionary][dictionary-size] | `medium` | no       | Size of the text   |
 | `elementType` | `string`                                    | `div`    | no       | HTML tag to render |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
-descriptiveness and accessibility.
+descriptiveness and accessibility. Also, UNSAFE styling props are available,
+see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
 [heading]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Heading
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches