Skip to content

Commit fc75b0c

Browse files
BorghildSelleBorghildSelle
committed
🎨 update tabs component
1 parent bd5c7c5 commit fc75b0c

File tree

4 files changed

+121
-158
lines changed

4 files changed

+121
-158
lines changed

‎web/core/Promotion/Promotion.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -41,29 +41,19 @@ export const Promotion = forwardRef<HTMLAnchorElement, PromotionProps>(function
4141
layoutDirection === 'col' ? 'line-clamp-2' : 'line-clamp-3'
4242
}`
4343

44-
return (
44+
return href ? (
4545
<BaseLink
4646
ref={ref}
4747
type={variant === 'externalLink' ? 'externalUrl' : 'internalUrl'}
4848
href={href}
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,26 +69,20 @@ 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>
10286
</BaseLink>
103-
)
87+
) : null
10488
})

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

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
1-
import Teaser from '../../../sections/teasers/Teaser/Teaser'
2-
import TextBlock from '../../../sections/TextBlock/TextBlock'
3-
import FullWidthImage, { FullWidthImageData } from '../../topicPages/FullWidthImage'
4-
import FullWidthVideo from '../../topicPages/FullWidthVideo'
5-
import Figure, { FigureData } from '../../topicPages/Figure'
6-
import PageQuote from '../../topicPages/PageQuote'
7-
import PromoTileArray from '../../../sections/PromoTiles/PromoTileArray'
8-
import Promotion from '../../topicPages/Promotion'
9-
import NewsList from '../../topicPages/NewsList'
10-
import StockValues from '../../topicPages/StockValues'
11-
import CookieDeclaration from '../../topicPages/CookieDeclaration'
12-
import TwitterEmbed from '../../topicPages/TwitterEmbed'
1+
import type { BackgroundContainerProps } from '@core/Backgrounds'
2+
import AccordionBlock from '@sections/AccordionBlock/AccordionBlock'
3+
import { AnchorLinkList } from '@sections/AnchorLinkList'
4+
import { CampaignBanner } from '@sections/CampaignBanner'
5+
import Grid from '@sections/Grid/Grid'
6+
import { HomePageBanner } from '@sections/HomePageBanner/HomePageBanner'
137
import IframeCarousel from '@sections/IframeCarousel/IframeCarousel'
14-
import VideoPlayer from '../../shared/VideoPlayer'
8+
import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
9+
import ImageForText from '@sections/ImageForText/ImageForText'
10+
import PromotionBlock from '@sections/promotionBlock/PromotionBlock'
11+
import TableBlock, { type TableBlockProps } from '@sections/TableBlock/TableBlock'
12+
import TabsBlock, { type TabsBlockProps } from '@sections/TabsBlock/TabsBlock'
13+
import { getColorForTabsTheme } from '@sections/TabsBlock/tabThemes'
14+
import TextWithIconArray from '@sections/TextWithIconArray/TextWithIconArray'
1515
import TextTeaser from '@sections/teasers/TextTeaser/TextTeaser'
16-
import KeyNumbers from '../../../sections/KeyNumber/KeyNumber'
16+
import { getColorForTheme } from '@sections/teasers/TextTeaser/theme'
17+
import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel'
18+
import Form from '@templates/forms/Form'
1719
import CardsList from '../../../sections/cards/CardsList/CardsList'
18-
import {
20+
import IFrameBlock from '../../../sections/IFrameBlock/IFrameBlock'
21+
import KeyNumbers from '../../../sections/KeyNumber/KeyNumber'
22+
import PromoTileArray from '../../../sections/PromoTiles/PromoTileArray'
23+
import TextBlock from '../../../sections/TextBlock/TextBlock'
24+
import Teaser from '../../../sections/teasers/Teaser/Teaser'
25+
import { type ColorKeyTokens, colorKeyToUtilityMap } from '../../../styles/colorKeyToUtilityMap'
26+
import type {
27+
AccordionData,
1928
AnchorLinkData,
20-
TopicPageSchema,
21-
MagazinePageSchema,
22-
TeaserData,
23-
TextBlockData,
24-
FullWidthVideoData,
25-
TextWithIconArrayData,
29+
AnchorLinkListData,
2630
CallToActionData,
27-
QuoteData,
28-
AccordionData,
29-
PromoTileArrayData,
30-
IFrameData,
31-
PromotionData,
31+
CampaignBannerData,
32+
CardsListData,
33+
CookieDeclarationData,
34+
DesignOptions,
3235
FormData,
33-
TableData,
36+
FullWidthVideoData,
37+
GridData,
38+
IFrameData,
39+
IframeCarouselData,
40+
ImageCarouselData,
41+
ImageForTextData,
42+
KeyNumbersData,
43+
MagazinePageSchema,
3444
NewsListData,
45+
PromoTileArrayData,
46+
PromotionData,
47+
QuoteData,
3548
StockValuesData,
49+
TableData,
50+
TeaserData,
51+
TextBlockData,
52+
TextTeaserData,
53+
TextWithIconArrayData,
54+
TopicPageSchema,
3655
TwitterEmbedData,
37-
CookieDeclarationData,
38-
ImageCarouselData,
39-
IframeCarouselData,
40-
VideoPlayerData,
4156
VideoPlayerCarouselData,
42-
TextTeaserData,
43-
KeyNumbersData,
44-
CardsListData,
45-
GridData,
46-
CampaignBannerData,
47-
DesignOptions,
48-
AnchorLinkListData,
49-
ImageForTextData,
57+
VideoPlayerData,
5058
} from '../../../types/index'
51-
import { getColorForTheme } from '@sections/teasers/TextTeaser/theme'
52-
import Grid from '@sections/Grid/Grid'
53-
import { CampaignBanner } from '@sections/CampaignBanner'
54-
import { BackgroundContainerProps } from '@core/Backgrounds'
55-
import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel'
56-
import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
57-
import { AnchorLinkList } from '@sections/AnchorLinkList'
58-
import ImageForText from '@sections/ImageForText/ImageForText'
59-
import TextWithIconArray from '@sections/TextWithIconArray/TextWithIconArray'
60-
import AccordionBlock from '@sections/AccordionBlock/AccordionBlock'
61-
import TabsBlock, { TabsBlockProps } from '@sections/TabsBlock/TabsBlock'
62-
import { getColorForTabsTheme } from '@sections/TabsBlock/tabThemes'
63-
import { ColorKeyTokens, colorKeyToUtilityMap } from '../../../styles/colorKeyToUtilityMap'
64-
import Form from '@templates/forms/Form'
65-
import IFrameBlock from '../../../sections/IFrameBlock/IFrameBlock'
66-
import { HomePageBanner } from '@sections/HomePageBanner/HomePageBanner'
67-
import TableBlock, { TableBlockProps } from '@sections/TableBlock/TableBlock'
68-
import PromotionBlock from '@sections/promotionBlock/PromotionBlock'
59+
import VideoPlayer from '../../shared/VideoPlayer'
60+
import CookieDeclaration from '../../topicPages/CookieDeclaration'
61+
import Figure, { type FigureData } from '../../topicPages/Figure'
62+
import FullWidthImage, { type FullWidthImageData } from '../../topicPages/FullWidthImage'
63+
import FullWidthVideo from '../../topicPages/FullWidthVideo'
64+
import NewsList from '../../topicPages/NewsList'
65+
import PageQuote from '../../topicPages/PageQuote'
66+
import Promotion from '../../topicPages/Promotion'
67+
import StockValues from '../../topicPages/StockValues'
68+
import TwitterEmbed from '../../topicPages/TwitterEmbed'
6969

7070
type DefaultComponent = {
7171
id?: string
@@ -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-ignore: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
)

0 commit comments

Comments
 (0)