From 6ec26796ee25fe696a9fa491786874de76049e41 Mon Sep 17 00:00:00 2001
From: Tomas Vykoukal <vykoukal.tom@gmail.com>
Date: Tue, 12 Sep 2023 14:39:07 +0200
Subject: [PATCH 1/2] fix LabelWrapper

---
 .../Blocks/OpeningHours/OpeningHours.tsx      |  4 +-
 .../OrderSummary/OrderSummaryElements.tsx     |  4 +-
 .../Blocks/OrderSummary/PromoCode.tsx         |  6 +-
 .../OrderSummary/TransportAndPayment.tsx      |  4 +-
 .../components/Forms/Lib/LabelWrapper.tsx     | 12 ++-
 .../Forms/Radiobutton/Radiobutton.tsx         | 20 +----
 .../Forms/Radiobutton/RadiobuttonGroup.tsx    |  2 +-
 .../components/Forms/TextInput/TextInput.tsx  | 13 +--
 .../TransportAndPaymentSelect.tsx             |  4 +-
 .../TransportAndPaymentSelectItemLabel.tsx    | 83 ++++++++++++-------
 10 files changed, 75 insertions(+), 77 deletions(-)

diff --git a/storefront/components/Blocks/OpeningHours/OpeningHours.tsx b/storefront/components/Blocks/OpeningHours/OpeningHours.tsx
index 80d529e802..3f54953728 100644
--- a/storefront/components/Blocks/OpeningHours/OpeningHours.tsx
+++ b/storefront/components/Blocks/OpeningHours/OpeningHours.tsx
@@ -17,7 +17,7 @@ export const OpeningHours: FC<{ openingHours: OpeningHoursApi }> = ({ openingHou
     ];
 
     return (
-        <div className={twMergeCustom('flex w-full flex-col items-center text-left', className)}>
+        <div className={twMergeCustom('flex w-full flex-col items-center gap-2 text-left', className)}>
             {openingHours.openingHoursOfDays.map(
                 ({ firstOpeningTime, firstClosingTime, secondOpeningTime, secondClosingTime, dayOfWeek }) => {
                     const isToday = openingHours.dayOfWeek === dayOfWeek;
@@ -30,7 +30,7 @@ export const OpeningHours: FC<{ openingHours: OpeningHoursApi }> = ({ openingHou
                         <div
                             key={dayOfWeek}
                             className={twJoin(
-                                'flex flex-col items-center py-1 md:flex-row',
+                                'flex w-full flex-col items-center md:w-auto md:flex-row',
                                 isToday ? 'font-bold' : 'font-normal',
                             )}
                         >
diff --git a/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx b/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx
index a3349b623c..1d0e95e282 100644
--- a/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx
+++ b/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx
@@ -9,13 +9,13 @@ export const OrderSummaryRowWrapper: FC = ({ children, dataTestId }) => (
 export const OrderSummaryRow: FC = ({ children }) => <div className="flex justify-between">{children}</div>;
 
 export const OrderSummaryTextAndImage: FC = ({ children, dataTestId }) => (
-    <div className="table-row py-2 align-baseline text-sm" data-testid={dataTestId}>
+    <div className="flex items-center gap-2 align-baseline text-sm" data-testid={dataTestId}>
         {children}
     </div>
 );
 
 export const OrderSummaryPrice: FC = ({ children, dataTestId }) => (
-    <div className="py-2 text-right align-baseline text-sm" data-testid={dataTestId}>
+    <div className="text-sm" data-testid={dataTestId}>
         {children}
     </div>
 );
diff --git a/storefront/components/Blocks/OrderSummary/PromoCode.tsx b/storefront/components/Blocks/OrderSummary/PromoCode.tsx
index 55d4e9980a..3b9ef61b39 100644
--- a/storefront/components/Blocks/OrderSummary/PromoCode.tsx
+++ b/storefront/components/Blocks/OrderSummary/PromoCode.tsx
@@ -21,13 +21,13 @@ export const PromoCode: FC<PromoCodeProps> = ({ discount, promoCode }) => {
     const formatPrice = useFormatPrice();
 
     return (
-        <OrderSummaryRowWrapper data-testid={TEST_IDENTIFIER}>
+        <OrderSummaryRowWrapper dataTestId={TEST_IDENTIFIER}>
             <OrderSummaryContent>
                 <OrderSummaryRow>
-                    <OrderSummaryTextAndImage data-testid={TEST_IDENTIFIER + '-promocode-name'}>
+                    <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-promocode-name'}>
                         {`${t('Promo code')}: ${promoCode}`}
                     </OrderSummaryTextAndImage>
-                    <OrderSummaryPrice data-testid={TEST_IDENTIFIER + '-promocode-discount'}>
+                    <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-promocode-discount'}>
                         <strong>-{formatPrice(discount.priceWithVat)}</strong>
                     </OrderSummaryPrice>
                 </OrderSummaryRow>
diff --git a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
index bee5bdfc3b..f1962a8f16 100644
--- a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
+++ b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
@@ -25,7 +25,7 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                     <OrderSummaryRow>
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-transport-name'}>
                             {transport.name}
-                            <span className="ml-2 inline-block h-5 align-bottom">
+                            <span className="inline-block align-bottom">
                                 <Image
                                     image={transport.mainImage}
                                     type="default"
@@ -43,7 +43,7 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                     <OrderSummaryRow>
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-payment-name'}>
                             {payment.name}
-                            <span className="ml-2 inline-block h-5 align-bottom">
+                            <span className="inline-block align-bottom">
                                 <Image image={payment.mainImage} type="default" alt={payment.name} className="w-9" />
                             </span>
                         </OrderSummaryTextAndImage>
diff --git a/storefront/components/Forms/Lib/LabelWrapper.tsx b/storefront/components/Forms/Lib/LabelWrapper.tsx
index a811af6bb9..3119d64e88 100644
--- a/storefront/components/Forms/Lib/LabelWrapper.tsx
+++ b/storefront/components/Forms/Lib/LabelWrapper.tsx
@@ -6,11 +6,10 @@ import { CheckmarkIcon } from 'components/Basic/Icon/IconsSvg';
 type NativeProps = ExtractNativePropsFromDefault<LabelHTMLAttributes<HTMLLabelElement>, never, 'htmlFor'>;
 
 type LabelWrapperProps = NativeProps & {
-    label: string | ReactNode | ReactNode[];
+    label: string | ReactNode | ReactNode[] | undefined;
     count?: number;
     inputType: 'textarea' | 'text-input' | 'checkbox' | 'radio' | 'selectbox';
     required?: boolean;
-    isWithoutLabel?: boolean;
     checked?: boolean;
     disabled?: boolean;
     selectBoxLabelIsFloated?: boolean;
@@ -21,7 +20,6 @@ export const LabelWrapper: FC<LabelWrapperProps> = ({
     count,
     inputType,
     required,
-    isWithoutLabel,
     checked,
     disabled,
     selectBoxLabelIsFloated,
@@ -31,7 +29,7 @@ export const LabelWrapper: FC<LabelWrapperProps> = ({
 }) => (
     <div className="relative w-full">
         {children}
-        {!isWithoutLabel && (
+        {!!label && (
             <label
                 htmlFor={htmlFor}
                 // "peer" here is input passed from parent component
@@ -91,11 +89,11 @@ export const LabelWrapper: FC<LabelWrapperProps> = ({
                     </div>
                 )}
 
-                <span>
+                <div className="w-full">
                     {label}
-                    {!!count && !checked && count > 0 && ` (${count})`}
+                    {!!count && !checked && ` (${count})`}
                     {required && <span className="ml-1 text-red">*</span>}
-                </span>
+                </div>
             </label>
         )}
     </div>
diff --git a/storefront/components/Forms/Radiobutton/Radiobutton.tsx b/storefront/components/Forms/Radiobutton/Radiobutton.tsx
index 6ad23c3772..4700194a1a 100644
--- a/storefront/components/Forms/Radiobutton/Radiobutton.tsx
+++ b/storefront/components/Forms/Radiobutton/Radiobutton.tsx
@@ -1,6 +1,4 @@
 import { LabelWrapper } from '../Lib/LabelWrapper';
-import { Image } from 'components/Basic/Image/Image';
-import { ImageSizesFragmentApi } from 'graphql/generated';
 import { forwardRef, InputHTMLAttributes, MouseEventHandler, ReactNode, useCallback } from 'react';
 import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault';
 
@@ -15,13 +13,12 @@ export type RadiobuttonProps = NativeProps & {
     checked: InputHTMLAttributes<HTMLInputElement>['checked'];
     dataTestId?: string;
     label: ReactNode;
-    image?: ImageSizesFragmentApi | null;
     onChangeCallback?: (newValue: string | null) => void;
 };
 
 export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
     (
-        { label, image, onChangeCallback, onChange, id, name, checked, value, disabled, dataTestId, onBlur },
+        { label, onChangeCallback, onChange, id, name, checked, value, disabled, dataTestId, onBlur },
         radiobuttonForwardedRef,
     ) => {
         const onClickHandler: MouseEventHandler<HTMLInputElement> = useCallback(
@@ -40,20 +37,7 @@ export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
         );
 
         return (
-            <LabelWrapper
-                htmlFor={id}
-                label={
-                    <>
-                        {!!image && (
-                            <Image alt={image.name} type="default" image={image} className="mr-3 h-6 max-h-full w-11" />
-                        )}
-                        {label}
-                    </>
-                }
-                inputType="radio"
-                checked={checked}
-                disabled={disabled}
-            >
+            <LabelWrapper htmlFor={id} label={label} inputType="radio" checked={checked} disabled={disabled}>
                 <input
                     className="peer sr-only"
                     value={value}
diff --git a/storefront/components/Forms/Radiobutton/RadiobuttonGroup.tsx b/storefront/components/Forms/Radiobutton/RadiobuttonGroup.tsx
index c47d136dd6..005beeaa8d 100644
--- a/storefront/components/Forms/Radiobutton/RadiobuttonGroup.tsx
+++ b/storefront/components/Forms/Radiobutton/RadiobuttonGroup.tsx
@@ -5,7 +5,7 @@ import { Control, useController } from 'react-hook-form';
 type RadiobuttonGroupProps = {
     name: string;
     render: (input: JSX.Element, key: string) => ReactElement<any, any> | null;
-    radiobuttons: Pick<RadiobuttonProps, 'disabled' | 'image' | 'label' | 'value' | 'dataTestId'>[];
+    radiobuttons: Pick<RadiobuttonProps, 'disabled' | 'label' | 'value' | 'dataTestId'>[];
     control: Control<any>;
     formName: string;
 };
diff --git a/storefront/components/Forms/TextInput/TextInput.tsx b/storefront/components/Forms/TextInput/TextInput.tsx
index c3b066ecaa..a0801f6976 100644
--- a/storefront/components/Forms/TextInput/TextInput.tsx
+++ b/storefront/components/Forms/TextInput/TextInput.tsx
@@ -20,11 +20,10 @@ type NativeProps = ExtractNativePropsFromDefault<
 
 export type TextInputProps = NativeProps & {
     value: any;
-    label: ReactNode;
+    label?: ReactNode;
     hasError?: boolean;
     dataTestId?: string;
     inputSize?: 'small' | 'default';
-    isWithoutLabel?: boolean;
 };
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
@@ -44,20 +43,12 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             dataTestId,
             value,
             type,
-            isWithoutLabel,
             children,
             autoComplete,
         },
         textInputForwarderRef,
     ) => (
-        <LabelWrapper
-            className={className}
-            label={label}
-            required={required}
-            htmlFor={id}
-            inputType="text-input"
-            isWithoutLabel={isWithoutLabel}
-        >
+        <LabelWrapper className={className} label={label} required={required} htmlFor={id} inputType="text-input">
             <input
                 className={twMergeCustom(
                     // class "peer" is used for styling in LabelWrapper
diff --git a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx
index ef1f3075bd..f33eb44dfc 100644
--- a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx
+++ b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx
@@ -189,7 +189,6 @@ export const TransportAndPaymentSelect: FC<TransportAndPaymentSelectProps> = ({
                 value={transportItem.uuid}
                 checked={isActive}
                 dataTestId={TEST_IDENTIFIER + 'transport-item-input'}
-                image={transportItem.mainImage}
                 onChangeCallback={handleTransportChange}
                 label={
                     <TransportAndPaymentSelectItemLabel
@@ -197,6 +196,7 @@ export const TransportAndPaymentSelect: FC<TransportAndPaymentSelectProps> = ({
                         daysUntilDelivery={transportItem.daysUntilDelivery}
                         price={transportItem.price}
                         description={transportItem.description}
+                        image={transportItem.mainImage}
                         pickupPlaceDetail={getPickupPlaceDetail(transportItem)}
                     />
                 }
@@ -216,13 +216,13 @@ export const TransportAndPaymentSelect: FC<TransportAndPaymentSelectProps> = ({
                 value={paymentItem.uuid}
                 checked={isActive}
                 dataTestId={TEST_IDENTIFIER + 'payment-item-input'}
-                image={paymentItem.mainImage}
                 onChangeCallback={handlePaymentChange}
                 label={
                     <TransportAndPaymentSelectItemLabel
                         name={paymentItem.name}
                         price={paymentItem.price}
                         description={paymentItem.description}
+                        image={paymentItem.mainImage}
                     />
                 }
             />
diff --git a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
index e385353218..52690fe6b9 100644
--- a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
+++ b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
@@ -1,14 +1,16 @@
-import { ListedStoreFragmentApi } from 'graphql/generated';
+import { ImageSizesFragmentApi, ListedStoreFragmentApi } from 'graphql/generated';
 import { useFormatPrice } from 'hooks/formatting/useFormatPrice';
 import useTranslation from 'next-translate/useTranslation';
 import { Translate } from 'next-translate';
 import { OpeningHours } from 'components/Blocks/OpeningHours/OpeningHours';
+import { Image } from 'components/Basic/Image/Image';
 
 type TransportAndPaymentSelectItemLabelProps = {
     name: string;
     price?: { priceWithVat: string; priceWithoutVat: string; vatAmount: string };
     daysUntilDelivery?: number;
     description?: string | null;
+    image?: ImageSizesFragmentApi | null;
     pickupPlaceDetail?: ListedStoreFragmentApi | null;
 };
 
@@ -19,50 +21,71 @@ export const TransportAndPaymentSelectItemLabel: FC<TransportAndPaymentSelectIte
     price,
     daysUntilDelivery,
     description,
+    image,
     pickupPlaceDetail,
 }) => {
     const { t } = useTranslation();
     const formatPrice = useFormatPrice();
 
     return (
-        <div className="flex w-full flex-row flex-wrap items-center lg:w-auto lg:flex-1" data-testid={TEST_IDENTIFIER}>
-            <div className="mr-4 flex w-full flex-col flex-wrap text-sm lg:w-auto lg:flex-1">
-                <span data-testid={TEST_IDENTIFIER + '-name'}>{name}</span>
-                <span
-                    className="inline text-sm text-greyLight lg:hidden"
-                    data-testid={TEST_IDENTIFIER + '-description'}
-                >
-                    {description}
-                </span>
-                {pickupPlaceDetail !== null && pickupPlaceDetail !== undefined && (
-                    <>
-                        <span className="text-sm text-greyLight" data-testid={TEST_IDENTIFIER + '-place'}>
+        <div className="flex w-full flex-row items-center gap-3" data-testid={TEST_IDENTIFIER}>
+            <Image
+                alt={image?.name}
+                type="default"
+                image={image}
+                wrapperClassName="shrink-0"
+                className="h-6 w-11 shrink-0 basis-11"
+            />
+
+            <div className="flex flex-1 flex-col text-sm lg:flex-auto lg:basis-full lg:flex-row lg:items-center lg:gap-3">
+                <div data-testid={TEST_IDENTIFIER + '-name'}>{name}</div>
+
+                {description && (
+                    <div className="text-greyLight lg:hidden" data-testid={TEST_IDENTIFIER + '-description'}>
+                        {description}
+                    </div>
+                )}
+
+                {pickupPlaceDetail && (
+                    <div>
+                        <div className="text-greyLight" data-testid={TEST_IDENTIFIER + '-place'}>
                             {pickupPlaceDetail.name}
-                        </span>
-                        <span className="text-sm text-greyLight" data-testid={TEST_IDENTIFIER + '-address'}>
+                        </div>
+
+                        <div className="text-greyLight" data-testid={TEST_IDENTIFIER + '-address'}>
                             {pickupPlaceDetail.street +
                                 ', ' +
                                 pickupPlaceDetail.postcode +
                                 ', ' +
                                 pickupPlaceDetail.city}
-                        </span>
-                        <span className="text-sm text-greyLight">{t('Open') + ': '}</span>
-                        <OpeningHours openingHours={pickupPlaceDetail.openingHours} className="items-start" />
-                    </>
+                        </div>
+
+                        <div className="my-1 text-greyLight">{t('Open') + ': '}</div>
+
+                        <OpeningHours
+                            openingHours={pickupPlaceDetail.openingHours}
+                            className="items-start gap-1 lg:items-start"
+                        />
+                    </div>
+                )}
+
+                {daysUntilDelivery !== undefined && (
+                    <div
+                        className="text-sm text-inStock lg:ml-auto lg:basis-36 lg:text-right"
+                        data-testid={TEST_IDENTIFIER + '-delivery'}
+                    >
+                        {getDeliveryMessage(daysUntilDelivery, !!pickupPlaceDetail, t)}
+                    </div>
                 )}
             </div>
-            {daysUntilDelivery !== undefined && (
-                <span
-                    className="w-1/2 text-sm text-inStock lg:w-36 lg:self-center lg:text-right"
-                    data-testid={TEST_IDENTIFIER + '-delivery'}
+
+            {price && (
+                <div
+                    className="shrink-0 text-right text-sm font-bold lg:basis-20"
+                    data-testid={TEST_IDENTIFIER + '-price'}
                 >
-                    {getDeliveryMessage(daysUntilDelivery, pickupPlaceDetail !== undefined, t)}
-                </span>
-            )}
-            {price !== undefined && (
-                <strong className="w-1/2 text-right text-sm lg:w-24" data-testid={TEST_IDENTIFIER + '-price'}>
                     {formatPrice(price.priceWithVat)}
-                </strong>
+                </div>
             )}
         </div>
     );
@@ -73,6 +96,7 @@ const getDeliveryMessage = (daysUntilDelivery: number, isPersonalPickup: boolean
         if (daysUntilDelivery < 7) {
             return t('Personal pickup in {{ count }} days', { count: daysUntilDelivery });
         }
+
         return t('Personal pickup in {{count}} weeks', {
             count: Math.ceil(daysUntilDelivery / 7),
         });
@@ -83,6 +107,7 @@ const getDeliveryMessage = (daysUntilDelivery: number, isPersonalPickup: boolean
             count: daysUntilDelivery,
         });
     }
+
     return t('Delivery in {{count}} weeks', {
         count: Math.ceil(daysUntilDelivery / 7),
     });

From a0b53c589036730ad1f4455be4751f194a5a5da4 Mon Sep 17 00:00:00 2001
From: Tomas Vykoukal <vykoukal.tom@gmail.com>
Date: Wed, 13 Sep 2023 10:37:43 +0200
Subject: [PATCH 2/2] fix overfloating text on Edit Profile page

---
 storefront/components/Pages/Customer/AddressList.tsx | 6 +++---
 storefront/styles/globals.css                        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/storefront/components/Pages/Customer/AddressList.tsx b/storefront/components/Pages/Customer/AddressList.tsx
index de3ff4dd7d..2315ab45dd 100644
--- a/storefront/components/Pages/Customer/AddressList.tsx
+++ b/storefront/components/Pages/Customer/AddressList.tsx
@@ -61,7 +61,7 @@ export const AddressList: FC<AddressListProps> = ({ defaultDeliveryAddress, deli
                     <div
                         key={address.uuid}
                         className={twJoin(
-                            'relative mb-5 flex w-full flex-row flex-wrap rounded border border-grey p-5',
+                            'mb-5 flex w-full items-center justify-between rounded border border-grey p-5',
                             defaultDeliveryAddress?.uuid === address.uuid
                                 ? 'border-primary bg-greyVeryLight'
                                 : 'cursor-pointer',
@@ -81,7 +81,7 @@ export const AddressList: FC<AddressListProps> = ({ defaultDeliveryAddress, deli
                             <br />
                             {address.telephone && (
                                 <>
-                                    <PhoneIcon className="relative top-[2px] mr-1" />
+                                    <PhoneIcon className="mr-1" />
                                     {address.telephone}
                                 </>
                             )}
@@ -89,7 +89,7 @@ export const AddressList: FC<AddressListProps> = ({ defaultDeliveryAddress, deli
 
                         <RemoveIcon
                             onClick={() => setAddressToBeDeleted(address.uuid)}
-                            className="absolute right-5 top-5 w-3 cursor-pointer text-greyLight hover:text-red"
+                            className="w-7 shrink-0 cursor-pointer p-2 text-greyLight hover:text-red"
                         />
                     </div>
                 ))}
diff --git a/storefront/styles/globals.css b/storefront/styles/globals.css
index 2ad2d93372..4981ad9573 100644
--- a/storefront/styles/globals.css
+++ b/storefront/styles/globals.css
@@ -73,7 +73,7 @@ input::-webkit-inner-spin-button {
 }
 
 svg {
-    @apply inline-flex h-full w-[14px] text-center font-normal normal-case leading-none;
+    @apply inline-flex w-[14px] text-center font-normal normal-case leading-none;
 }
 
 /* Firefox */