From 763ae2073cac680c616c837df05fe6fd61530b2f Mon Sep 17 00:00:00 2001
From: SemenStruchev <semen.struchev@devico.io>
Date: Thu, 20 Jul 2023 17:16:14 +0300
Subject: [PATCH] fully reworked

---
 src/components/Breakdown.jsx           | 62 +++++++-------------------
 src/stories/Other/Breakdown.stories.js | 10 ++---
 2 files changed, 20 insertions(+), 52 deletions(-)

diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index 7201a1571..b8298e095 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -43,57 +43,25 @@ const BreakdownItem = ({
     color = "default",
     ...rest
 }) => {
-    const containerRef = useRef(null);
-    const textRef = useRef(null);
-    const [rowWidthExceeds20Percent, setRowWidthExceeds20Percent] = useState(false);
-    const dateOrInfoExist = !!date || !!info;
     const currency = useContext(CurrencyContext);
 
-    useEffect(() => {
-        const containerElement = containerRef.current;
-        const containerRect = containerElement.getBoundingClientRect();
-        const containerWidth = containerRect.width;
-
-        const textElement = textRef.current;
-        const textRect = textElement.getBoundingClientRect();
-        const textWidth = textRect.width;
-
-        const percentage = (textWidth / containerWidth) * 100;
-        if (!rowWidthExceeds20Percent) {
-            setRowWidthExceeds20Percent(percentage > 20);
-        }
-    }, [info, date]);
-
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
-            <td ref={containerRef} colSpan={2} className="text-left leading-none">
-                <span className="mr-0.5">{methodIcon}</span>
-                <span ref={textRef} className={clsx(!rowWidthExceeds20Percent && "whitespace-nowrap")}>
-                    {children}
-                </span>
-                <span className="ml-1 text-sm">
-                    {secondary && <span className="empty:hidden">{secondary}</span>}
-                    {rowWidthExceeds20Percent && dateOrInfoExist ? (
-                        <p className="mt-1.5 mb-1 flex items-center">
-                            {info && (
-                                <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">
-                                    {info}
-                                </span>
-                            )}
-
-                            {date && <span className="empty:hidden">{date}</span>}
-                        </p>
-                    ) : (
-                        <>
-                            {info && (
-                                <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">
-                                    {info}
-                                </span>
-                            )}
-                            {date && <span className="empty:hidden">{date}</span>}
-                        </>
-                    )}
-                </span>
+            <td colSpan={2} className="text-left leading-none">
+                <div className="flex flex-wrap items-center leading-3.5">
+                    <span className="break-word">
+                        <span className="mr-0.5">{methodIcon}</span>
+                        {children}
+                    </span>
+                    <span className="ml-1 text-sm">
+                        {secondary && <span className="empty:hidden">{secondary}</span>}
+                        {info && (
+                            <span className="mr-2 ml-1 rounded bg-white p-1 uppercase leading-6 text-black empty:hidden">
+                                {info}
+                            </span>
+                        )}
+                    </span>
+                </div>
             </td>
 
             <td className="w-[1%] whitespace-nowrap pl-4 text-right">
diff --git a/src/stories/Other/Breakdown.stories.js b/src/stories/Other/Breakdown.stories.js
index a9b9c4391..bc3076a5e 100644
--- a/src/stories/Other/Breakdown.stories.js
+++ b/src/stories/Other/Breakdown.stories.js
@@ -22,7 +22,7 @@ export const Default = () => {
             <Breakdown currency="USD">
                 <Breakdown.Item value={100}>Line item caption</Breakdown.Item>
                 <Breakdown.Item value={29} secondary="($29.00 x 1)">
-                    Children
+                    Very long really Children
                 </Breakdown.Item>
                 <Breakdown.Item value={29} secondary="($29.00 x 1)">
                     Adults
@@ -42,16 +42,16 @@ export const Default = () => {
                     </Button>
                 </Breakdown.SubtotalItem>
 
-                <Breakdown.Item value={1230} date="12/18/2019" info="*0259" methodIcon={<CardIcon />}>
+                <Breakdown.Item value={1230} secondary="12/18/2019" info="*0259" methodIcon={<CardIcon />}>
                     Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item color="primary" info="*0259" date="07/23/2021" value={-62} methodIcon={<CardIcon />}>
+                <Breakdown.Item color="primary" info="*0259" secondary="07/23/2021" value={-62} methodIcon={<CardIcon />}>
                     Return Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item date="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
-                    This is a really long message that should wrap somehow
+                <Breakdown.Item secondary="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
+                    This is a really long message that should wrap somehow more long
                 </Breakdown.Item>
 
                 <Breakdown.Separator />