From a9d284196cf3544503655abff768d08e8b5c4a62 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Mon, 11 Sep 2023 17:15:13 +0200
Subject: [PATCH 1/2] Refactor(web-react): Use class name prefix for utilities
 and helpers

refs #DS-926
---
 .../src/components/Breadcrumbs/Breadcrumbs.tsx    | 15 ++++++++++-----
 .../FileUploader/FileUploaderAttachment.tsx       |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
index 13bed3fbec..de13305702 100644
--- a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,10 +1,11 @@
-import React, { ElementType } from 'react';
 import classNames from 'classnames';
-import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
-import { SpiritBreadcrumbsProps } from '../../types';
+import React, { ElementType } from 'react';
+import { useClassNamePrefix } from '../../hooks';
 import { useStyleProps } from '../../hooks/styleProps';
+import { SpiritBreadcrumbsProps } from '../../types';
 import { Icon } from '../Icon';
 import { Link } from '../Link';
+import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
 
 const defaultProps = {
   items: [],
@@ -15,6 +16,10 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
   const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
+  const displayTabletNoneClassName = useClassNamePrefix('d-tablet-none');
+  const displayNoneClassName = useClassNamePrefix('d-none');
+  const displayTabletFlexClassName = useClassNamePrefix('d-tablet-flex');
+
   const isLast = (index: number, itemsCount: number) => {
     return index === itemsCount - 1;
   };
@@ -31,14 +36,14 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
           items?.map((item, index) => (
             <React.Fragment key={`BreadcrumbsItem_${item.title}`}>
               {index === items.length - 2 && goBackTitle && (
-                <li className="d-tablet-none">
+                <li className={displayTabletNoneClassName}>
                   <Icon name="chevron-left" />
                   <Link href={item.url} color="primary" isUnderlined>
                     {goBackTitle}
                   </Link>
                 </li>
               )}
-              <li className="d-none d-tablet-flex">
+              <li className={classNames(displayNoneClassName, displayTabletFlexClassName)}>
                 {index !== 0 && <Icon name="chevron-right" />}
                 <Link
                   href={item.url}
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
index 9c39a23c73..96e78d51df 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, RefObject, MouseEvent, useState } from 'react';
 import classNames from 'classnames';
 import { SpiritFileUploaderAttachmentProps } from '../../types';
-import { useDeprecationMessage, useStyleProps } from '../../hooks';
+import { useClassNamePrefix, useDeprecationMessage, useStyleProps } from '../../hooks';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
 import { useFileUploaderAttachment } from './useFileUploaderAttachment';
 import AttachmentImagePreview from './AttachmentImagePreview';
@@ -87,7 +87,7 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
         <Icon name={iconName} aria-hidden="true" />
       )}
       <span className={classProps.attachment.name}>
-        <span className="text-truncate">{label}</span>
+        <span className={useClassNamePrefix('text-truncate')}>{label}</span>
       </span>
       {onEdit && (
         <span className={classProps.attachment.slot}>

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 2/2] 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 }}">