Skip to content

Commit

Permalink
redesigned product detail tabs (#3714)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chlebektomas
chlebektomas authored Jan 15, 2025
2 parents 47b0412 + ca246e7 commit b5d6fc4
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 67 deletions.
8 changes: 8 additions & 0 deletions storefront/components/Basic/Icon/DownloadIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const DownloadIcon: SvgFC = (props) => (
<svg {...props} fill="none" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.8701 3C13.8701 2.44772 13.4224 2 12.8701 2C12.3178 2 11.8701 2.44772 11.8701 3L13.8701 3ZM11.8701 14C11.8701 14.5523 12.3178 15 12.8701 15C13.4224 15 13.8701 14.5523 13.8701 14H11.8701ZM17.5772 12.7071C17.9677 12.3166 17.9677 11.6834 17.5772 11.2929C17.1867 10.9024 16.5535 10.9024 16.163 11.2929L17.5772 12.7071ZM13.5772 15.2929L12.8701 14.5858L13.5772 15.2929ZM12.163 15.2929L12.8701 14.5858H12.8701L12.163 15.2929ZM9.57722 11.2929C9.1867 10.9024 8.55353 10.9024 8.16301 11.2929C7.77249 11.6834 7.77249 12.3166 8.16301 12.7071L9.57722 11.2929ZM4.87012 16C4.87012 15.4477 4.4224 15 3.87012 15C3.31783 15 2.87012 15.4477 2.87012 16H4.87012ZM22.8701 16C22.8701 15.4477 22.4224 15 21.8701 15C21.3178 15 20.8701 15.4477 20.8701 16H22.8701ZM20.2321 20.673L19.7781 19.782H19.7781L20.2321 20.673ZM21.5431 19.362L22.4341 19.816L21.5431 19.362ZM4.1971 19.362L3.30609 19.816L4.1971 19.362ZM5.50815 20.673L5.05416 21.564H5.05416L5.50815 20.673ZM11.8701 3L11.8701 14H13.8701L13.8701 3L11.8701 3ZM16.163 11.2929L12.8701 14.5858L14.2843 16L17.5772 12.7071L16.163 11.2929ZM12.8701 14.5858L9.57722 11.2929L8.16301 12.7071L11.4559 16L12.8701 14.5858ZM12.8701 14.5858H12.8701L11.4559 16C12.237 16.781 13.5033 16.781 14.2843 16L12.8701 14.5858ZM2.87012 16V16.2H4.87012V16H2.87012ZM8.67012 22H17.0701V20H8.67012V22ZM22.8701 16.2V16H20.8701V16.2H22.8701ZM17.0701 22C17.8937 22 18.5715 22.0008 19.1219 21.9558C19.684 21.9099 20.2007 21.8113 20.6861 21.564L19.7781 19.782C19.6217 19.8617 19.3975 19.9266 18.9591 19.9624C18.509 19.9992 17.9267 20 17.0701 20V22ZM20.8701 16.2C20.8701 17.0566 20.8693 17.6389 20.8326 18.089C20.7967 18.5274 20.7318 18.7516 20.6521 18.908L22.4341 19.816C22.6814 19.3306 22.78 18.8139 22.8259 18.2518C22.8709 17.7014 22.8701 17.0236 22.8701 16.2H20.8701ZM20.6861 21.564C21.4387 21.1805 22.0506 20.5686 22.4341 19.816L20.6521 18.908C20.4604 19.2843 20.1544 19.5903 19.7781 19.782L20.6861 21.564ZM2.87012 16.2C2.87012 17.0236 2.86934 17.7014 2.91431 18.2518C2.96024 18.8139 3.0588 19.3306 3.30609 19.816L5.0881 18.908C5.00841 18.7516 4.94349 18.5274 4.90767 18.089C4.87089 17.6389 4.87012 17.0566 4.87012 16.2H2.87012ZM8.67012 20C7.81354 20 7.23124 19.9992 6.78116 19.9624C6.34274 19.9266 6.11854 19.8617 5.96214 19.782L5.05416 21.564C5.53949 21.8113 6.05619 21.9099 6.61829 21.9558C7.16871 22.0008 7.84654 22 8.67012 22V20ZM3.30609 19.816C3.68959 20.5686 4.30151 21.1805 5.05416 21.564L5.96214 19.782C5.58581 19.5903 5.27985 19.2843 5.0881 18.908L3.30609 19.816Z"
fill="currentColor"
/>
</svg>
);
14 changes: 7 additions & 7 deletions storefront/components/Basic/Tabs/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@ export const Tabs: TabFC<Partial<TabsProps>> = ({ children, className, ...props
);

export const TabsList: TabFC<Partial<TabListProps>> = ({ children }) => (
<TabList className="z-above hidden flex-row lg:flex lg:gap-4">{children}</TabList>
<TabList className="z-above hidden flex-row lg:flex lg:gap-5">{children}</TabList>
);

export const TabsListItem: TabFC<Partial<PropsWithRef<TabProps>>> = ({ children, className, ...props }) => (
<Tab
selectedClassName="isActive"
className={twJoin(
'cursor-pointer select-none rounded-2xl bg-backgroundMore px-3 py-2 text-sm font-semibold outline-1 outline-borderAccentSuccess [&.isActive]:outline',
'cursor-pointer select-none rounded-2xl bg-backgroundMore px-3 py-2 font-secondary text-sm font-semibold outline-1 outline-borderAccentSuccess [&.isActive]:bg-textInverted [&.isActive]:outline',
className,
)}
{...props}
Expand All @@ -69,24 +69,24 @@ export const TabsContent: TabFC<TabsContentProps & Partial<PropsWithRef<TabPanel
return (
<TabPanel
forceRender
className="flex flex-col flex-wrap lg:hidden [&.isActive]:flex [&.isActive]:lg:pt-12"
className="flex flex-col flex-wrap lg:hidden [&.isActive]:flex [&.isActive]:lg:pt-5"
selectedClassName="isActive"
{...props}
>
<h3
className="flex w-full cursor-pointer items-center justify-between rounded bg-backgroundMore px-5 py-4 font-bold lg:hidden"
<div
className="flex w-full cursor-pointer items-center justify-between rounded-xl bg-backgroundMore p-3 font-secondary text-sm font-semibold lg:hidden"
onClick={mobileTab}
>
{headingTextMobile}
<AnimateRotateDiv className="flex items-start" condition={isActiveOnMobile}>
<ArrowIcon className={twJoin('size-4 rotate-0 text-text transition')} />
</AnimateRotateDiv>
</h3>
</div>

<AnimatePresence initial={false}>
{(isActiveOnMobile || (isActive && isLg)) && (
<AnimateCollapseDiv
className="relative !block w-full"
className="relative mt-3 !block w-full lg:mt-0"
initial={skipInitialAnimation ? 'open' : 'closed'}
keyName={`tabs-content-${headingTextMobile}`}
>
Expand Down
130 changes: 71 additions & 59 deletions storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -7,7 +7,7 @@ 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';

const ProductDetailRelatedProductsTab = dynamic(
() => import('./ProductDetailRelatedProductsTab').then((component) => component.ProductDetailRelatedProductsTab),
Expand Down Expand Up @@ -87,58 +87,67 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par

{!!parameters.length && (
<TabsContent headingTextMobile={t('Parameters')} isActive={selectedTab === parametersTabIndex}>
{sortedIndividualParameters.length > 0 && (
<div>
<Table className="mx-auto max-w-screen-lg border-0 p-0">
{sortedIndividualParameters.map((parameter) => (
<Row
key={parameter.uuid}
className="border-none bg-tableBackground odd:bg-tableBackgroundContrast"
>
<Cell className="py-2 text-left text-sm font-bold uppercase leading-5">
{parameter.name}
</Cell>
<Cell className="py-2 text-right text-sm leading-5">
{parameter.values.map((value, index) =>
formatParameterValue(
value.text +
(parameter.unit?.name ? ` (${parameter.unit.name})` : ''),
index,
),
)}
</Cell>
</Row>
))}
</Table>
</div>
)}

{sortedGroupParameters.map(({ groupName, groupParameters }) => (
<div key={groupName}>
<h2 className="mx-auto my-4 max-w-screen-lg text-lg font-bold">{groupName}</h2>
<Table className="mx-auto max-w-screen-lg border-0 p-0">
{groupParameters.map((parameter) => (
<Row
key={parameter.uuid}
className="border-none bg-tableBackground odd:bg-tableBackgroundContrast"
>
<Cell className="py-2 text-left text-sm font-bold uppercase leading-5">
{parameter.name}
</Cell>
<Cell className="py-2 text-right text-sm leading-5">
{parameter.values.map((value, index) =>
formatParameterValue(
value.text +
(parameter.unit?.name ? ` (${parameter.unit.name})` : ''),
index,
),
)}
</Cell>
</Row>
))}
</Table>
</div>
))}
<div className="mx-auto max-w-[700px]">
{sortedGroupParameters.map(({ groupName, groupParameters }) => (
<Fragment key={groupName}>
<h4 className="py-5">{groupName}</h4>
<Table>
{groupParameters.map((parameter) => (
<Row
key={parameter.uuid}
className="border-none bg-tableBackground odd:bg-tableBackgroundContrast"
>
<Cell className="hidden w-[240px] px-5 py-2.5 align-top lg:table-cell">
<h6 className="leading-5">{parameter.name}</h6>
</Cell>
<Cell className="px-5 py-2.5 text-sm">
<h6 className="leading-5 lg:hidden">{parameter.name}</h6>
{parameter.values.map((value, index) =>
formatParameterValue(
value.text +
(parameter.unit?.name ? ` (${parameter.unit.name})` : ''),
index,
),
)}
</Cell>
</Row>
))}
</Table>
</Fragment>
))}

{sortedIndividualParameters.length > 0 && (
<Fragment key="other-parameters">
{!!sortedGroupParameters.length && <h4 className="py-5">{t('Other parameters')}</h4>}
<Table>
{sortedIndividualParameters.map((parameter) => (
<Fragment key={parameter.uuid}>
<Row
key={parameter.uuid}
className="border-none bg-tableBackground odd:bg-tableBackgroundContrast"
>
<Cell className="hidden w-[240px] px-5 py-2.5 align-top lg:table-cell">
<h6 className="leading-5">{parameter.name}</h6>
</Cell>
<Cell className="px-5 py-2.5 text-sm">
<h6 className="leading-5 lg:hidden">{parameter.name}</h6>
{parameter.values.map((value, index) =>
formatParameterValue(
value.text +
(parameter.unit?.name
? ` (${parameter.unit.name})`
: ''),
index,
),
)}
</Cell>
</Row>
</Fragment>
))}
</Table>
</Fragment>
)}
</div>
</TabsContent>
)}

Expand All @@ -153,12 +162,15 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par

{!!files.length && (
<TabsContent headingTextMobile={t('Files')} isActive={selectedTab === filesTabIndex}>
<ul>
<ul className="grid grid-cols-1 gap-3 lg:grid-cols-2">
{files.map((file) => (
<li key={file.url}>
<a className="no-underline" href={file.url}>
{file.anchorText}
<ArrowSecondaryIcon className="ml-1 rotate-90" />
<li key={file.url} className="">
<a
className="flex cursor-pointer items-center gap-5 rounded-xl bg-backgroundMore px-5 py-2.5 no-underline"
href={file.url}
>
<DownloadIcon className="size-6" />
<h4>{file.anchorText}</h4>
</a>
</li>
))}
Expand Down
Binary file modified ...snapshots/e2e/visits/simpleVisitsWithScreenshots.cy.ts/5-0-1 product detail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions storefront/public/locales/cs/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@
"Order sent": "Objednávka odeslána",
"Order sent page is not available.": "Stránka odeslané objednávky není k dispozici. Z důvodu bezpečnosti a ochrany vašich osobních údajů platnost této stránky vypršela. Prosím, zkontrolujte si Váš e-mail, ve kterém naleznete odkaz pro zobrazení údajů o objednávce a možnostech platby.",
"Orders": "Objednávky",
"Other parameters": "Ostatní parametry",
"Overview": "Přehled",
"page {{ currentPage }} from {{ totalPages }}": "stránka {{ currentPage }} z {{ totalPages }}",
"page {{ currentPage }} to {{ currentPageWithLoadMore }} from {{ totalPages }}": "page {{ currentPage }} to {{ currentPageWithLoadMore }} from {{ totalPages }}",
Expand Down
3 changes: 2 additions & 1 deletion storefront/public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@
"Order sent": "Order sent",
"Order sent page is not available.": "Order sent page is not available. For your security and protection of your personal data, the validity of this page has expired. Please check your email for a link to view your order details and payment options.",
"Orders": "Orders",
"Other parameters": "Other parameters",
"Overview": "Overview",
"page {{ currentPage }} from {{ totalPages }}": "page {{ currentPage }} from {{ totalPages }}",
"page {{ currentPage }} to {{ currentPageWithLoadMore }} from {{ totalPages }}": "page {{ currentPage }} to {{ currentPageWithLoadMore }} from {{ totalPages }}",
Expand Down Expand Up @@ -358,7 +359,7 @@
"Show less": "Show less",
"Show menu": "Show menu",
"Show more": "Show more",
"Show order detail": "",
"Show order detail": "Show order detail",
"Show products comparison": "Show products comparison",
"Sign in": "Sign in",
"Sign up": "Sign up",
Expand Down
1 change: 1 addition & 0 deletions storefront/public/locales/sk/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@
"Order sent": "Objednávka odoslaná",
"Order sent page is not available.": "Stránka odoslanej objednávky nie je k dispozícii. Z dôvodu bezpečnosti a ochrany osobných údajov táto stránka stratila platnosť. Skontrolujte si prosím svoj e-mail, kde nájdete odkaz na zobrazenie podrobností objednávky a možností platby.",
"Orders": "Objednávky",
"Other parameters": "Ostatné parametre",
"Overview": "Prehľad",
"page {{ currentPage }} from {{ totalPages }}": "stránka {{ currentPage }} z {{ totalPages }}",
"page {{ currentPage }} to {{ currentPageWithLoadMore }} from {{ totalPages }}": "page {{ currentPage }} to {{ currentPageWithLoadMore }} from {{ totalPages }}",
Expand Down

0 comments on commit b5d6fc4

Please sign in to comment.