From 450822c791d522cb223b1fff8796a16278635f4d Mon Sep 17 00:00:00 2001 From: Tomas Chlebek Date: Mon, 6 Jan 2025 09:08:34 +0100 Subject: [PATCH 1/3] redesigned product detail tabs --- .../components/Basic/Icon/DownloadIcon.tsx | 8 ++ storefront/components/Basic/Tabs/Tabs.tsx | 14 +-- .../ProductDetailTabs/ProductDetailTabs.tsx | 92 ++++++++++--------- 3 files changed, 64 insertions(+), 50 deletions(-) create mode 100644 storefront/components/Basic/Icon/DownloadIcon.tsx diff --git a/storefront/components/Basic/Icon/DownloadIcon.tsx b/storefront/components/Basic/Icon/DownloadIcon.tsx new file mode 100644 index 0000000000..1576012fa1 --- /dev/null +++ b/storefront/components/Basic/Icon/DownloadIcon.tsx @@ -0,0 +1,8 @@ +export const DownloadIcon: SvgFC = (props) => ( + + + +); diff --git a/storefront/components/Basic/Tabs/Tabs.tsx b/storefront/components/Basic/Tabs/Tabs.tsx index 0adb730421..454d8417fe 100644 --- a/storefront/components/Basic/Tabs/Tabs.tsx +++ b/storefront/components/Basic/Tabs/Tabs.tsx @@ -39,14 +39,14 @@ export const Tabs: TabFC> = ({ children, className, ...props ); export const TabsList: TabFC> = ({ children }) => ( - {children} + {children} ); export const TabsListItem: TabFC>> = ({ children, className, ...props }) => ( -

{headingTextMobile} -

+ {(isActiveOnMobile || (isActive && isLg)) && ( diff --git a/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx b/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx index b2fd113920..5ee6d6abd6 100644 --- a/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx +++ b/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx @@ -1,4 +1,4 @@ -import { ArrowSecondaryIcon } from 'components/Basic/Icon/ArrowSecondaryIcon'; +import { DownloadIcon } from 'components/Basic/Icon/DownloadIcon'; import { Cell, Row, Table } from 'components/Basic/Table/Table'; import { Tabs, TabsContent, TabsList, TabsListItem } from 'components/Basic/Tabs/Tabs'; import { UserText } from 'components/Basic/UserText/UserText'; @@ -7,7 +7,8 @@ import { TypeParameterFragment } from 'graphql/requests/parameters/fragments/Par import { TypeListedProductFragment } from 'graphql/requests/products/fragments/ListedProductFragment.generated'; import useTranslation from 'next-translate/useTranslation'; import dynamic from 'next/dynamic'; -import { useState } from 'react'; +import { Fragment, useState } from 'react'; +import { useMediaMin } from 'utils/ui/useMediaMin'; const ProductDetailRelatedProductsTab = dynamic( () => import('./ProductDetailRelatedProductsTab').then((component) => component.ProductDetailRelatedProductsTab), @@ -26,6 +27,7 @@ export const ProductDetailTabs: FC = ({ description, par const { t } = useTranslation(); const [selectedTab, setSelectedTab] = useState(0); const [skipInitialAnimation, setSkipInitialAnimation] = useState(true); + const isLg = useMediaMin('lg'); const formatParameterValue = (valueText: string, index: number) => { return index > 0 ? ' | ' + valueText : valueText; @@ -87,45 +89,46 @@ export const ProductDetailTabs: FC = ({ description, par {!!parameters.length && ( - {sortedIndividualParameters.length > 0 && ( -
- - {sortedIndividualParameters.map((parameter) => ( - - - {parameter.name} - - - {parameter.values.map((value, index) => - formatParameterValue( - value.text + - (parameter.unit?.name ? ` (${parameter.unit.name})` : ''), - index, - ), - )} - - - ))} -
-
- )} - - {sortedGroupParameters.map(({ groupName, groupParameters }) => ( -
-

{groupName}

- +
+ {sortedIndividualParameters.length > 0 && + sortedIndividualParameters.map((parameter) => ( + + +
{parameter.name}
+ + +
{parameter.name}
+ {parameter.values.map((value, index) => + formatParameterValue( + value.text + (parameter.unit?.name ? ` (${parameter.unit.name})` : ''), + index, + ), + )} + + + ))} + {sortedGroupParameters.map(({ groupName, groupParameters }) => ( + + {isLg && ( + + + + )} {groupParameters.map((parameter) => ( - - {parameter.name} + +
{parameter.name}
 - + +
{parameter.name}
{parameter.values.map((value, index) => formatParameterValue( value.text + @@ -136,9 +139,9 @@ export const ProductDetailTabs: FC = ({ description, par ))} -
+

{groupName}

+
-
- ))} + + ))} + )} @@ -153,12 +156,15 @@ export const ProductDetailTabs: FC = ({ description, par {!!files.length && ( -