From a070c5f65b14e2946e0ce2d59df75bbfbcdd29be Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Mon, 11 Sep 2023 17:19:30 +0200
Subject: [PATCH] Refactor(web-twig): Use class name prefix for utilities and
 helpers

refs #DS-926
---
 .../components/Breadcrumbs/Breadcrumbs.twig          |  7 +++++--
 .../FileUploader/FileUploaderAttachment.twig         | 12 +++++++-----
 .../components/FileUploader/FileUploaderInput.twig   |  4 +++-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
index 5cbffe31a2..897b37fe35 100644
--- 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
index 875c2309ec..ea66b668e7 100644
--- 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,13 +40,13 @@
         <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>
@@ -52,7 +54,7 @@
     {% 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
index 4e29f04a7b..7a1f221777 100644
--- 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 }}">