Refactor(web-twig): Use class name prefix for utilities and helpers

refs #DS-926
lmc-eu · Sep 14, 2023 · a070c5f · a070c5f
1 parent a9d2841
commit a070c5f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
@@ -6,6 +6,9 @@
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Breadcrumbs' -%}
+{%- set _displayNoneClassName = _spiritClassPrefix ~ 'd-none' -%}
+{%- set _displayTabletNoneClassName = _spiritClassPrefix ~ 'd-tablet-none' -%}
+{%- set _displayTabletFlexClassName = _spiritClassPrefix ~ 'd-tablet-flex' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -22,12 +25,12 @@
         <ol>
             {% for item in _items %}
                 {% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %}
-                    <li class="d-tablet-none">
+                    <li class="{{ _displayTabletNoneClassName }}">
                         <Icon name="chevron-left" />
                         <Link href="{{ item.url }}" color="primary" isUnderlined>{{ _goBackTitle }}</Link>
                     </li>
                 {% endif %}
-                <li class="d-none d-tablet-flex">
+                <li {{ classProp([_displayNoneClassName, _displayTabletFlexClassName]) }}>
                     {% if loop.index0 is not same as(0) %}
                         <Icon name="chevron-right" />
                     {% endif %}

diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
@@ -12,7 +12,9 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'FileUploaderAttachment' -%}
 {%- set _imageClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__image' -%}
 {%- set _nameClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__name' -%}
-{%- set _removeClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__action' -%}
+{%- set _actionClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__action' -%}
+{%- set _slotClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__slot' -%}
+{%- set _textTruncateClassName = _spiritClassPrefix ~ 'text-truncate' -%}
 
 {# Attributes #}
 {%- set _dataImagePreviewAttr = _generateImagePreview ? 'data-spirit-imagePreview="true"' : null -%}
@@ -38,21 +40,21 @@
         <Icon name="{{ _iconName }}" isReusable={ false } />
     {% endif %}
     <span class="{{ _nameClassName }}">
-        <span class="text-truncate" data-spirit-populate-field="name">
+        <span class="{{ _textTruncateClassName }}" data-spirit-populate-field="name">
             {{- _fileName -}}
         </span>
     </span>
     {% if _onEdit %}
-        <span class="FileUploaderAttachment__slot">
-            <button type="button" class="FileUploaderAttachment__action" onclick="{{ _onEdit }}">
+        <span class="{{ _slotClassName }}">
+            <button type="button" class="{{ _actionClassName }}" onclick="{{ _onEdit }}">
                 <VisuallyHidden>{{ _editText }}</VisuallyHidden>
                 <Icon name="edit" isReusable={ false } />
             </button>
         </span>
     {% endif %}
     <button
         type="button"
-        class="{{ _removeClassName }}"
+        class="{{ _actionClassName }}"
         data-spirit-populate-field="button"
     >
         <VisuallyHidden>{{ _removeText }}</VisuallyHidden>

diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
@@ -32,6 +32,8 @@
 {%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'FileUploaderInput__label--hidden' : null -%}
 {%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'FileUploaderInput__label--required' : null -%}
 {%- set _linkClassName = _spiritClassPrefix ~ 'FileUploaderInput__link' -%}
+{%- set _linkPrimaryClassName = _spiritClassPrefix ~ 'link-primary' -%}
+{%- set _linkUnderlinedClassName = _spiritClassPrefix ~ 'link-underlined' -%}
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'FileUploaderInput__validationText' -%}
 
 {# Attributes #}
@@ -78,7 +80,7 @@
     <div class="{{ _dropzoneClassName }}" data-spirit-element="dropZone">
         <Icon name="{{ _iconName }}" isReusable={false} />
         <label for="{{ _id }}" class="{{ _dropzoneLabelClassName }}">
-            <span class="{{ _linkClassName }} link-primary link-underlined">
+            <span {{ classProp([_linkClassName, _linkPrimaryClassName, _linkUnderlinedClassName]) }}>
                 {{- _pickAFileText -}}
             </span>
             <span class="{{  _dragAndDropLabelClassName }}">