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

lmc-eu · Apr 24, 2023 · bfd8896 · bfd8896
1 parent 21869cd
commit bfd8896
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/packages/web-twig/src/Resources/components/Accordion/Accordion.twig b/packages/web-twig/src/Resources/components/Accordion/Accordion.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _id = props.id | default(null) -%}
 {%- set _elementType = props.elementType | default('section') -%}
 
@@ -11,11 +10,13 @@
 {%- set _idAttr = _id ? 'id=' ~ _id : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
 
 <{{ _elementType }}
     {{ mainProps(_mainPropsWithoutId) }}
+    {{ styleProp(_styleProps) }}
     {{ _idAttr }}
     {{ classProp(_classNames) }}
     data-toggle="accordion"

diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionContent.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionContent.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _id = props.id -%}
 {%- set _labelledById = props.labelledById -%}
 {%- set _parent = props.parent | default(null) -%}
@@ -18,12 +17,14 @@
 {%- set _dataParentAttr = _parent ? 'data-parent=' ~ _parent : null -%}
 
 {# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
 {%- set _collapseClassNames = [ _rootClassName, _isOpenClassName ] -%}
-{%- set _contentClassNames = [ _accordionClassName, _class ] -%}
+{%- set _contentClassNames = [ _accordionClassName, _styleProps.className ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
 
 <div
     {{ mainProps(_mainPropsWithoutId) }}
+    {{ styleProp(_styleProps) }}
     {{ _idAttr }}
     {{ classProp(_collapseClassNames) }}
     {{ _labelledIdAttr }}

diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _id = props.id -%}
 {%- set _elementType = (props.elementType is defined) ? props.elementType : 'h3' -%}
 {%- set _for = props.for -%}
@@ -19,12 +18,14 @@
 {%- set _dataTargetAttr = _for ? 'data-target=' ~ _for : null -%}
 
 {# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
 {%- set _ariaExpanded = _isOpen ? 'true' : 'false' -%}
-{%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
 
 <{{ _elementType }}
     {{ mainProps(_mainPropsWithoutId) }}
+    {{ styleProp(_styleProps) }}
     {{ _idAttr }}
     {{ classProp(_classNames) }}
 >

diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionItem.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionItem.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _id = props.id -%}
 {%- set _elementType = (props.elementType is defined) ? props.elementType : 'article' -%}
 
@@ -11,11 +10,13 @@
 {%- set _idAttr = _id ? 'id=' ~ _id : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
 
 <{{ _elementType }}
     {{ mainProps(_mainPropsWithoutId) }}
+    {{ styleProp(_styleProps) }}
     {{ _idAttr }}
     {{ classProp(_classNames) }}
 >

diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md
@@ -185,23 +185,20 @@ The Accordion itself consists of several components which cannot be used indepen
 
 | Prop name     | Type     | Default     | Required | Description                                                                                       |
 | ------------- | -------- | ----------- | -------- | ------------------------------------------------------------------------------------------------- |
-| `class`       | `string` | `null`      | no       | Additional class name                                                                             |
 | `elementType` | `string` | `'section'` | no       | Custom element type                                                                               |
 | `id`          | `string` | `null`      | optional | It depends on whether the "Stay open" functionality is used. If so, the id field is not required. |
 
 ### AccordionItem
 
-| Prop name     | Type     | Default     | Required | Description           |
-| ------------- | -------- | ----------- | -------- | --------------------- |
-| `class`       | `string` | `null`      | no       | Additional class name |
-| `elementType` | `string` | `'article'` | no       | Custom element type   |
-| `id`          | `string` | `null`      | yes      | AccordionItem ID      |
+| Prop name     | Type     | Default     | Required | Description         |
+| ------------- | -------- | ----------- | -------- | ------------------- |
+| `elementType` | `string` | `'article'` | no       | Custom element type |
+| `id`          | `string` | `null`      | yes      | AccordionItem ID    |
 
 ### AccordionHeader
 
 | Prop name     | Type     | Default | Required | Description              |
 | ------------- | -------- | ------- | -------- | ------------------------ |
-| `class`       | `string` | `null`  | no       | Additional class name    |
 | `elementType` | `string` | `'h3'`  | no       | Custom element type      |
 | `for`         | `string` | `null`  | yes      | AccordionContent ID      |
 | `id`          | `string` | `null`  | yes      | AccordionHeader ID       |
@@ -212,14 +209,15 @@ The Accordion itself consists of several components which cannot be used indepen
 
 | Prop name      | Type      | Default | Required | Description                                                                 |
 | -------------- | --------- | ------- | -------- | --------------------------------------------------------------------------- |
-| `class`        | `string`  | `null`  | no       | Additional class name                                                       |
 | `id`           | `string`  | `null`  | yes      | AccordionContent ID                                                         |
 | `isOpen`       | `boolean` | `false` | no       | If true, make the item open on page load                                    |
 | `labelledById` | `string`  | `null`  | yes      | AccordionHeader ID                                                          |
 | `parent`       | `string`  | `null`  | no       | A parent element selector that ensures that only one item is open at a time |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
-further extend component's descriptiveness and accessibility. These attributes
-will be passed to the topmost HTML element of the component.
+further extend component's 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.
+These attributes will be passed to the topmost HTML element of the component.
 
 [accordion]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Accordion
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches