Skip to content

Commit bfc34cf

Browse files
BorghildSelleBorghildSelle
committed
Merge branch 'bose/3473' into staging
2 parents e223583 + fc75b0c commit bfc34cf

4 files changed

Lines changed: 62 additions & 99 deletions

File tree

‎web/core/Promotion/Promotion.tsx‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,11 @@ export const Promotion = forwardRef<HTMLAnchorElement, PromotionProps>(function
4949
locale={locale}
5050
prefetch={false}
5151
className={twMerge(
52-
`group
53-
w-full
54-
h-full
55-
rounded-[13px]
56-
${colorKeyToUtilityMap[background ?? 'gray-20'].background}
57-
grid
58-
${
52+
`group h-full w-full rounded-[13px] ${colorKeyToUtilityMap[background ?? 'gray-20'].background}grid ${
5953
layoutDirection === 'col'
6054
? 'grid-cols-1 grid-rows-[65%_35%]'
6155
: 'min-h-[120px] grid-cols-[30%_70%] grid-rows-1'
62-
}
63-
focus:outline-none
64-
focus-visible:envis-outline
65-
dark:focus-visible:envis-outline-invert
66-
`,
56+
}focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert`,
6757
className,
6858
)}
6959
>
@@ -79,23 +69,17 @@ export const Promotion = forwardRef<HTMLAnchorElement, PromotionProps>(function
7969
)}
8070
</div>
8171
<div
82-
className={`
83-
w-inherit
84-
h-inherit
85-
relative
86-
${layoutDirection === 'col' ? 'p-4' : 'pl-4 pr-3 py-4'}
87-
flex
88-
items-center
89-
overflow-hidden
90-
`}
72+
className={`relative h-inherit w-inherit ${
73+
layoutDirection === 'col' ? 'p-4' : 'py-4 pr-3 pl-4'
74+
}flex items-center overflow-hidden`}
9175
>
92-
<div className="grow max-w-prose ">
76+
<div className="max-w-prose grow">
9377
<Typography as="p" variant="h6" className={titleClassNames}>
9478
{plainText}
9579
</Typography>
9680
</div>
9781

98-
<div className="flex p-1 self-end justify-end items-end">
82+
<div className="flex items-end justify-end self-end p-1">
9983
{getArrowElement(variant === 'externalLink' ? 'externalUrl' : 'internalUrl')}
10084
</div>
10185
</div>

‎web/pageComponents/pageTemplates/shared/SharedPageContent.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,7 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => {
232232
: (data?.content?.[previousComponentIndex] as unknown as ComponentProps)
233233

234234
const topSpacingClassName = applyPaddingTopIfApplicable(c, previousComponentToCompare)
235+
//In general most sections should get pb-page-content or it needs to take care of this customly
235236
const spacingClassName = `${topSpacingClassName} pb-page-content`
236237
//@ts-expect-error:so many types
237238
switch (c.type) {
@@ -359,7 +360,7 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => {
359360
case 'imageForText':
360361
return <ImageForText key={c.id} data={c as ImageForTextData} />
361362
case 'tabs':
362-
return <TabsBlock key={c.id} {...(c as any)} className={spacingClassName} />
363+
return <TabsBlock key={c.id} {...(c as any)} className={topSpacingClassName} />
363364
/* Remove from here and move to Homepage Template PageContent */
364365
case 'homepageBanner':
365366
return <HomePageBanner key={c.id} {...(c as any)} />

‎web/sections/TabsBlock/TabsBlock.tsx‎

Lines changed: 19 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Heading } from '../../core/Typography'
2-
import { twMerge } from 'tailwind-merge'
3-
import IngressText from '../../pageComponents/shared/portableText/IngressText'
4-
import { getColorForTabsTheme } from './tabThemes'
51
import { Tabs } from '@core/Tabs'
2+
import type { PortableTextBlock } from '@portabletext/types'
63
import { forwardRef, useId, useRef } from 'react'
7-
import TabsKeyNumberItem from './TabsKeyNumberItem'
4+
import { twMerge } from 'tailwind-merge'
5+
import { Heading } from '../../core/Typography'
86
import Blocks from '../../pageComponents/shared/portableText/Blocks'
7+
import IngressText from '../../pageComponents/shared/portableText/IngressText'
8+
import type { TabItem } from './TabsBlock.types'
99
import TabsInfoPanelItem from './TabsInfoPanelItem'
10-
import { PortableTextBlock } from '@portabletext/types'
11-
import { TabItem } from './TabsBlock.types'
10+
import TabsKeyNumberItem from './TabsKeyNumberItem'
11+
import { getColorForTabsTheme } from './tabThemes'
1212

1313
const { TabList, Tab, TabPanel } = Tabs
1414

@@ -53,21 +53,16 @@ const TabsBlock = forwardRef<HTMLDivElement, TabsBlockProps>(function TabsBlock(
5353
)}
5454
>
5555
<div
56-
className={`flex
57-
flex-col
58-
gap-6
59-
max-w-viewport
60-
mx-auto
61-
${
62-
tabPanelVariant === 'tabsKeyNumbers'
63-
? `px-layout-sm lg:px-layout-md pb-page-content`
64-
: `lg:mx-layout-sm ${theme?.backgroundUtility} rounded-md`
65-
}
56+
className={`mx-auto flex max-w-viewport flex-col gap-6 ${
57+
tabPanelVariant === 'tabsKeyNumbers'
58+
? `px-layout-sm pb-page-content lg:px-layout-md`
59+
: `lg:mx-layout-sm ${theme?.backgroundUtility} rounded-md`
60+
}
6661
`}
6762
>
6863
<div
6964
className={`${
70-
tabPanelVariant === 'tabsInfoPanel' && !hideTitle ? `lg:pt-20 pl-layout-sm max-w-innerColumn` : ``
65+
tabPanelVariant === 'tabsInfoPanel' && !hideTitle ? `max-w-innerColumn pl-layout-sm lg:pt-20` : ``
7166
}`}
7267
>
7368
{title && (
@@ -79,11 +74,7 @@ const TabsBlock = forwardRef<HTMLDivElement, TabsBlockProps>(function TabsBlock(
7974
<Tabs
8075
defaultValue={tabList[0]?.id}
8176
{...(hideTitle && { 'aria-labelledby': headingId })}
82-
className={`w-full
83-
flex
84-
flex-col
85-
items-center
86-
${tabPanelVariant === 'tabsInfoPanel' ? 'mt-4' : ''}
77+
className={`flex w-full flex-col items-center ${tabPanelVariant === 'tabsInfoPanel' ? 'mt-4' : ''}
8778
`}
8879
>
8980
<TabList ref={tabsListRef}>
@@ -105,19 +96,15 @@ const TabsBlock = forwardRef<HTMLDivElement, TabsBlockProps>(function TabsBlock(
10596
className={`${
10697
tabPanelVariant === 'tabsKeyNumbers'
10798
? 'w-full py-14 max-lg:px-layout-sm'
108-
: 'w-full h-full rounded-md overflow-hidden'
99+
: 'h-full w-full overflow-hidden rounded-md'
109100
}`}
110101
>
111102
{tabItem.panel?.type === 'tabsKeyNumbers' && tabItem.panel?.items && (
112103
<ul
113104
{...(title && hideTitle && { 'aria-labelledby': headingId })}
114-
className={`
115-
flex
116-
flex-col
117-
md:grid
118-
md:grid-cols-2
119-
${tabItem.panel?.items?.length < 4 ? '3xl:grid-flow-col 3xl:auto-cols-fr' : ''}
120-
gap-6`}
105+
className={`flex flex-col md:grid md:grid-cols-2 ${
106+
tabItem.panel?.items?.length < 4 ? '3xl:auto-cols-fr 3xl:grid-flow-col' : ''
107+
} gap-6`}
121108
>
122109
{tabItem.panel?.items?.map((tabsKeyNumber: any) => {
123110
return (
@@ -137,7 +124,7 @@ const TabsBlock = forwardRef<HTMLDivElement, TabsBlockProps>(function TabsBlock(
137124
<TabsInfoPanelItem theme={designOptions.theme?.value} {...tabItem.panel} />
138125
)}
139126
{tabItem.panel?.type === 'tabsKeyNumbers' && tabItem?.panel?.disclaimer && (
140-
<Blocks value={tabItem?.panel?.disclaimer} className="italic text-sm mt-6" />
127+
<Blocks value={tabItem?.panel?.disclaimer} className="mt-6 text-sm italic" />
141128
)}
142129
</TabPanel>
143130
)

‎web/sections/TabsBlock/TabsInfoPanelItem.tsx‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -30,42 +30,29 @@ const TabsInfoPanelItem = forwardRef<HTMLDivElement, TabsInfoPanelItemProps>(fun
3030
<div
3131
ref={ref}
3232
className={twMerge(
33-
`relative
34-
${
35-
imageVariant === 'sideImage'
36-
? `flex
37-
flex-col-reverse
38-
lg:grid
39-
lg:grid-cols-2
40-
gap-12
41-
items-start
42-
px-8
43-
lg:px-16
44-
py-12`
45-
: ''
33+
`relative grid grid-cols-1 grid-rows-[auto_auto] gap-12 px-layout-sm pt-12 pb-page-content lg:px-16 ${
34+
imageVariant === 'sideImage' ? `items-start gap-12` : 'lg:grid-cols-auto-2'
4635
}`,
4736
className,
4837
)}
4938
>
5039
{image?.asset && imageVariant === 'backgroundImage' && (
51-
<Image sizes={getPxSmSizes()} aria-hidden image={image} fill className="z-[1] object-center" />
40+
<Image
41+
sizes={getPxSmSizes()}
42+
aria-hidden
43+
image={image}
44+
fill
45+
className="z-[0] col-span-2 row-span-2 object-center"
46+
/>
5247
)}
5348
<div
54-
className={`relative
55-
flex
56-
flex-col
57-
${
58-
imageVariant === 'sideImage'
59-
? ''
60-
: 'lg:grid lg:grid-cols-2 px-8 lg:px-12 pt-12 pb-16 lg:pt-16 lg:pb-40 z-10'
61-
}
62-
gap-x-12 lg:gap-x-20 gap-y-12 `}
49+
className={`relative flex flex-col lg:row-start-1 lg:row-end-1 ${
50+
imageVariant === 'sideImage' ? 'grid grid-cols-1 gap-y-6 lg:grid-cols-2' : 'z-10'
51+
}`}
6352
>
64-
<div>
65-
<div className="flex flex-col gap-4">
66-
{title && <Heading value={title} as="h3" variant="h5" className={``} />}
67-
{text && <Blocks value={text} className={`text-sm`} />}
68-
</div>
53+
<div className="order-2 flex flex-col lg:order-1">
54+
{title && <Heading value={title} variant="h2" className={`text-lg lg:text-lg`} />}
55+
{text && <Blocks value={text} className={`text-sm`} />}
6956
{action && url && (
7057
<ResourceLink
7158
href={url}
@@ -79,29 +66,33 @@ const TabsInfoPanelItem = forwardRef<HTMLDivElement, TabsInfoPanelItemProps>(fun
7966
}}
8067
showExtensionIcon={true}
8168
variant="fit"
82-
className="mt-12"
69+
className="mt-2"
8370
>
8471
{`${action?.label}`}
8572
</ResourceLink>
8673
)}
8774
</div>
88-
{keyInfo && (
89-
<div className={`grid grid-cols-1 ${keyInfo?.length % 2 ? 'xl:grid-cols-1' : 'xl:grid-cols-2'} gap-6`}>
90-
{keyInfo?.map((item) => {
91-
return (
92-
<div key={item?.id}>
93-
<div className="text-sm font-semibold">{item?.title}</div>
94-
<div className="text-md font-semibold">{item?.keyFigure}</div>
95-
<div className="text-xs">{item?.explanation}</div>
96-
</div>
97-
)
98-
})}
75+
{image?.asset && imageVariant === 'sideImage' && (
76+
<div className="relative order-1 aspect-video w-full rounded-md lg:order-2 lg:aspect-5/4">
77+
<Image image={image} fill className="rounded-md" />
9978
</div>
10079
)}
10180
</div>
102-
{image?.asset && imageVariant === 'sideImage' && (
103-
<div className="w-full relative rounded-md aspect-video lg:aspect-5/4">
104-
<Image image={image} fill className="rounded-md" />
81+
{keyInfo && (
82+
<div
83+
className={`grid auto-rows-min grid-cols-2 gap-x-10 gap-y-6 lg:row-start-2 lg:row-end-2 lg:flex lg:flex-wrap ${
84+
imageVariant === 'sideImage' ? '' : 'z-10'
85+
}`}
86+
>
87+
{keyInfo?.map((item) => {
88+
return (
89+
<div key={item?.id} className="text-balance">
90+
<div className="font-semibold text-md">{item?.title}</div>
91+
<div className="font-semibold text-lg">{item?.keyFigure}</div>
92+
<div className="text-base">{item?.explanation}</div>
93+
</div>
94+
)
95+
})}
10596
</div>
10697
)}
10798
</div>

0 commit comments

Comments
 (0)