From 48307e62eafa4f45204b512c080df1c0ee1f8f79 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Wed, 13 Sep 2023 09:23:29 +0200
Subject: [PATCH] fixup! Refactor(web-react): Use class name prefix for
 utilities and helpers

---
 .../src/components/Breadcrumbs/Breadcrumbs.tsx    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 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}