From 3357f30dd3f7b2f177f9ac65126eff17b7d71a3f Mon Sep 17 00:00:00 2001
From: SemenStruchev <semen.struchev@devico.io>
Date: Wed, 19 Jul 2023 15:58:07 +0300
Subject: [PATCH 1/6] added smart breakdown item wrapping

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

diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index 08a422136..7201a1571 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useRef, useState, useEffect } from "react";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {
@@ -32,19 +32,67 @@ Breakdown.propTypes = {
     currency: PropTypes.string.isRequired,
 };
 
-const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => {
+const BreakdownItem = ({
+    children,
+    info,
+    methodIcon,
+    secondary,
+    date,
+    value,
+    className,
+    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 colSpan={2} className="text-left leading-none">
+            <td ref={containerRef} colSpan={2} className="text-left leading-none">
                 <span className="mr-0.5">{methodIcon}</span>
-                <span>{children}</span>
+                <span ref={textRef} className={clsx(!rowWidthExceeds20Percent && "whitespace-nowrap")}>
+                    {children}
+                </span>
                 <span className="ml-1 text-sm">
-                    {info && (
-                        <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">{info}</span>
-                    )}
                     {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>
 
diff --git a/src/stories/Other/Breakdown.stories.js b/src/stories/Other/Breakdown.stories.js
index 092c87677..a9b9c4391 100644
--- a/src/stories/Other/Breakdown.stories.js
+++ b/src/stories/Other/Breakdown.stories.js
@@ -42,15 +42,15 @@ export const Default = () => {
                     </Button>
                 </Breakdown.SubtotalItem>
 
-                <Breakdown.Item value={1230} secondary="12/18/2019" info="*0259" methodIcon={<CardIcon />}>
+                <Breakdown.Item value={1230} date="12/18/2019" info="*0259" methodIcon={<CardIcon />}>
                     Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item color="primary" secondary="07/23/2021" value={-62} methodIcon={<CardIcon />}>
+                <Breakdown.Item color="primary" info="*0259" date="07/23/2021" value={-62} methodIcon={<CardIcon />}>
                     Return Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item secondary="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
+                <Breakdown.Item date="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
                     This is a really long message that should wrap somehow
                 </Breakdown.Item>
 

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 2/6] 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 />

From 480f22bdc3069602061ad85d0b540243059a57df Mon Sep 17 00:00:00 2001
From: SemenStruchev <semen.struchev@devico.io>
Date: Thu, 20 Jul 2023 17:17:39 +0300
Subject: [PATCH 3/6] swap info and secondary

---
 src/components/Breakdown.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index b8298e095..9eb1548ca 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -54,12 +54,12 @@ const BreakdownItem = ({
                         {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>
                         )}
+                        {secondary && <span className="empty:hidden">{secondary}</span>}
                     </span>
                 </div>
             </td>

From 7219df3142cd10fb8e80441232472102e879baed Mon Sep 17 00:00:00 2001
From: SemenStruchev <semen.struchev@devico.io>
Date: Fri, 21 Jul 2023 13:09:20 +0300
Subject: [PATCH 4/6] fix lint

---
 src/components/Breakdown.jsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index 9eb1548ca..be112ba44 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { createContext, useContext, useRef, useState, useEffect } from "react";
+import React, { createContext, useContext } from "react";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {
@@ -32,17 +32,7 @@ Breakdown.propTypes = {
     currency: PropTypes.string.isRequired,
 };
 
-const BreakdownItem = ({
-    children,
-    info,
-    methodIcon,
-    secondary,
-    date,
-    value,
-    className,
-    color = "default",
-    ...rest
-}) => {
+const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => {
     const currency = useContext(CurrencyContext);
 
     return (

From b9a97ebc1bc6f8306d9d21f745bce9dd12f91542 Mon Sep 17 00:00:00 2001
From: SemenStruchev <semen.struchev@devico.io>
Date: Sun, 14 Jan 2024 17:33:42 +0200
Subject: [PATCH 5/6] make huge modal a bit bigger

---
 src/components/Modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 4e06c2f6b..ea23ddfc5 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -8,7 +8,7 @@ const sizes = {
     small: "max-w-100", // 400px
     medium: "max-w-125", // 500px
     large: "max-w-150", // 600px
-    huge: "max-w-200", // 800px
+    huge: "max-w-225", // 800px
 };
 
 const positions = {

From 063f75cd54686a5a9ab7b56512b5bd59eedb86c3 Mon Sep 17 00:00:00 2001
From: SemenStruchev <semen.struchev@devico.io>
Date: Sun, 14 Jan 2024 17:40:00 +0200
Subject: [PATCH 6/6] change huge size

---
 src/components/Modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index ea23ddfc5..bc9153ea0 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -8,7 +8,7 @@ const sizes = {
     small: "max-w-100", // 400px
     medium: "max-w-125", // 500px
     large: "max-w-150", // 600px
-    huge: "max-w-225", // 800px
+    huge: "max-w-[900px]", // 900px
 };
 
 const positions = {