Skip to content

Commit 7323acf

Browse files
BorghildSelleBorghildSelle
committed
🎨 fix typography and news template
1 parent 7eb4926 commit 7323acf

9 files changed

Lines changed: 52 additions & 41 deletions

File tree

‎studio/schemas/editors/blockContentType.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ const ingressStylesOptions: BlockContentProps = {
119119
const articleStylesOptions: BlockContentProps = {
120120
h2: true,
121121
h4: true,
122+
smallText: true,
122123
}
123124
const simpleBlockStylesOptions: BlockContentProps = {
124125
h2: false,

‎web/core/Typography/variants.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,16 @@ const variants = {
6969
lg:ms-layout-lg
7070
[:where(h2+*,h3+*)]:mt-0
7171
text-base`,
72+
sm: `
73+
my-5
74+
:not-only-child:first:mt-0
75+
:not-only-child:last:mb-0
76+
me-layout-sm
77+
lg:me-layout-lg
78+
ms-layout-sm
79+
lg:ms-layout-lg
80+
[:where(h2+*,h3+*)]:mt-0
81+
text-sm`,
7282
h2: `me-layout-sm
7383
lg:me-layout-lg
7484
ms-layout-sm

‎web/portableText/Blocks.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const getBlockComponents = ({
7474
)
7575
},
7676
smallText: ({ children }: TypeProps) => (
77-
<Block as={as} variant='sm' className={className}>
77+
<Block as={as} group={group} variant='sm' className={className}>
7878
{/**@ts-ignore:todo */}
7979
{children}
8080
</Block>
@@ -121,7 +121,6 @@ const getBlockComponents = ({
121121
},
122122
h2: ({ children }: TypeProps) => {
123123
//expect 'article' as group when news other can be undefined group and fall back to heading
124-
console.log('children h2', children)
125124
return (
126125
<Block
127126
as={as}

‎web/portableText/components/news/FigureWithLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const FigureWithLayout = (block: BlockProps) => {
6767
}
6868

6969
const figureClassName = twMerge(
70-
`ps-layout-sm pe-layout-sm ${layoutVariantClassName[layout]} ${layout === 'center' ? `${centerImageLayout === 'right' ? '' : ''}` : ''} my-6`,
70+
`ps-layout-sm pe-layout-sm ${layoutVariantClassName[layout]} ${layout === 'center' ? `${centerImageLayout === 'right' ? '' : ''}` : ''} my-12`,
7171
)
7272
const centerImageCaptionClassName = {
7373
top: 'flex h-full items-start',

‎web/sections/Hero/DefaultHero.tsx‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -46,45 +46,54 @@ export const DefaultHero = ({
4646
imageClassName = '',
4747
ratio = '2:1',
4848
}: DefaultHeroProps) => {
49+
console.log('DefaultHero background', background)
50+
4951
const px =
5052
isBigTitle && bigTitle ? 'px-layout-sm' : 'px-layout-sm lg:px-layout-md'
5153
const isPlainTitle =
5254
title && (title === 'string' || typeof title === 'string')
55+
const isColorBg = background && background !== 'bg-white-100'
5356

5457
return (
5558
<div className={twMerge(className, `relative h-full w-full`)}>
56-
{background && (
59+
<div>
5760
<div
58-
className={`-z-1 absolute inset-0 w-full lg:mb-news-banner-vertical ${background}`}
59-
/>
60-
)}
61-
<div className={twMerge(`pt-10 lg:pt-20`, px, titleClassName)}>
62-
{title &&
63-
(isPlainTitle ? (
64-
<Typography variant='h1' id='mainTitle'>
65-
{title}
66-
</Typography>
67-
) : isBigTitle && bigTitle ? (
68-
<>
69-
<div className='pr-16'>
70-
<Blocks id='mainTitle' value={title} as='h1' variant='xl' />
71-
</div>
61+
className={twMerge(
62+
`pt-10 lg:pt-16 ${isColorBg ? `${isColorBg} pb-news-banner-vertical` : ''}`,
63+
px,
64+
titleClassName,
65+
)}
66+
>
67+
{title &&
68+
(isPlainTitle ? (
69+
<Typography variant='h1' id='mainTitle'>
70+
{title}
71+
</Typography>
72+
) : isBigTitle && bigTitle ? (
73+
<>
74+
<div className='pr-16'>
75+
<Blocks id='mainTitle' value={title} as='h1' variant='xl' />
76+
</div>
77+
<div>
78+
<Blocks value={bigTitle} as='h2' variant='3xl' />
79+
</div>
80+
</>
81+
) : (
7282
<div>
73-
<Blocks value={bigTitle} as='h2' variant='3xl' />
83+
<Blocks id='mainTitle' value={title} variant='h1' />
7484
</div>
75-
</>
76-
) : (
77-
<div>
78-
<Blocks id='mainTitle' value={title} variant='h1' />
79-
</div>
80-
))}
85+
))}
86+
{subTitle && subTitle}
87+
</div>
8188
</div>
82-
{subTitle && subTitle}
8389
{figure && (
8490
<Image
8591
grid='sm'
8692
loading='eager'
87-
className={twMerge(`lg:px-layout-md`, imageWrapperClassName)}
93+
className={twMerge(
94+
`${isColorBg ? 'lg:-mt-news-banner-vertical' : ''} lg:px-layout-md`,
95+
imageWrapperClassName,
96+
)}
8897
aspectRatio={ratio}
8998
image={figure.image}
9099
caption={figure.caption}

‎web/sections/Hero/HeroBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export const HeroBlock = ({
133133
}
134134

135135
return type !== HeroTypes.NO_HERO ? (
136-
<section className='mb-6 h-full w-full'>
136+
<section className='mb-8 h-full w-full'>
137137
{getHero()}
138138
{breadcrumbs?.enableBreadcrumbs && (
139139
<Breadcrumbs

‎web/sections/LatestNews/LatestNews.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const LatestNews = ({ data }: LatestNewsProp) => {
1818
{t('latest_news')}
1919
</Typography>
2020
{/*grid auto-rows-fr grid-cols-1 gap-x-6 gap-y-3 max-lg:w-full md:auto-cols-fr md:grid-flow-col*/}
21-
<ul className='flex w-full flex-col gap-6 lg:flex-row'>
21+
<ul className='flex w-full flex-col gap-6 lg:grid lg:grid-cols-3'>
2222
{data.map((newsItem: CardData) => {
2323
return (
2424
<li key={newsItem.id}>

‎web/sections/RelatedContent/RelatedContent.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { HTMLAttributes } from 'react'
2-
import { twMerge } from 'tailwind-merge'
32
import ResourceLink from '@/core/Link/ResourceLink'
43
import { Typography } from '@/core/Typography'
54
import { getUrlFromAction } from '@/lib/helpers/getUrlFromAction'
@@ -10,16 +9,9 @@ type RelatedContentProps = {
109
data: RelatedLinksData
1110
} & HTMLAttributes<HTMLDivElement>
1211

13-
const RelatedContent = ({
14-
data,
15-
className = '',
16-
...rest
17-
}: RelatedContentProps) => {
12+
const RelatedContent = ({ data, className = '' }: RelatedContentProps) => {
1813
return (
19-
<aside
20-
className={className}
21-
{...rest}
22-
>
14+
<aside className={className}>
2315
<Typography className='pb-4 text-left' variant='xl' as='h2'>
2416
{data.title}
2517
</Typography>

‎web/templates/news/News.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const NewsPage = async ({
6868
}))
6969

7070
const publishedInformation = (
71-
<div className='grid grid-cols-[min-content_1fr] items-start gap-2 px-layout-sm pb-12 text-base lg:flex lg:items-center lg:px-layout-md dark:text-white-100'>
71+
<div className='grid grid-cols-[min-content_1fr] items-start gap-2 pb-12 text-base lg:flex lg:items-center dark:text-white-100'>
7272
<TransformableIcon iconData={calendar} className='md:-mt-1' />
7373
<div className='flex flex-col items-start gap-2 lg:flex-row lg:items-center'>
7474
<FormattedDateTime datetime={publishDateTime} />
@@ -121,7 +121,7 @@ const NewsPage = async ({
121121
{content && content.length > 0 && (
122122
<Blocks group='article' value={formattedContent} includeFootnotes />
123123
)}
124-
<div className='px-layout-lg w-full'>
124+
<div className='w-full px-layout-sm lg:px-layout-lg'>
125125
<div className='mt-8 mb-2'>
126126
<Footnotes blocks={[...ingress, ...content]} />
127127
</div>

0 commit comments

Comments
 (0)