Skip to content

Commit 34ec96e

Browse files
committed
🎨 update titles
1 parent 6cc2b49 commit 34ec96e

10 files changed

Lines changed: 72 additions & 68 deletions

File tree

studio/static/Equinor-Regular.woff

-36.2 KB
Binary file not shown.
-53.9 KB
Binary file not shown.
-43.4 KB
Binary file not shown.

studio/styles/fonts.css

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
@font-face {
2-
font-family: 'Equinor';
3-
src: url('../static/Equinor-Regular.woff') format('woff');
4-
font-weight: normal;
2+
font-family: Equinor;
3+
src:
4+
local('😊'),
5+
url(https://cdn.eds.equinor.com/font/EquinorVariable-VF.woff2) format('woff2-variations'),
6+
url(https://cdn.eds.equinor.com/font/EquinorVariable-VF.woff) format('woff-variations'),
7+
url(https://cdn.eds.equinor.com/font/Equinor-Regular.woff) format('woff');
58
font-style: normal;
9+
font-weight: 1 999;
10+
font-display: fallback;
611
}
712
:root {
813
--font-sm: clamp(calc(14.61 / 16 * 1rem), 0.33vw + 0.84rem, calc(19.68 / 16 * 1rem));
@@ -31,60 +36,60 @@
3136

3237
/* Preflight */
3338

34-
.pt-editable [data-text] .m-0 *:where([data-slate-string='true']) {
39+
.pt-editable [data-text] .m-0 *:where([data-slate-leaf='true']) {
3540
margin: 0;
3641
}
3742
/* .pt-editable [data-text] .p-0{
3843
padding:0;
3944
} */
40-
.pt-editable [data-text] *:where([data-slate-string='true']) {
45+
.pt-editable [data-text] *:where([data-slate-leaf='true']) {
4146
/*white-space: normal;*/
4247
font-family: Equinor, 'Open Sans', sans-serif !important;
4348
font-size: 16px;
4449
}
4550
.pt-editable [data-text] [data-group='display'] {
4651
margin: 0;
4752
}
48-
.pt-editable .pt-block:has([data-group='display']) [data-text] *:where([data-slate-string='true']) {
53+
.pt-editable .pt-block:has([data-group='display']) [data-text] *:where([data-slate-leaf='true']) {
4954
white-space: normal;
5055
}
51-
.pt-editable .text-sm *:where([data-slate-string='true']) {
56+
.pt-editable .text-sm *:where([data-slate-leaf='true']) {
5257
font-size: var(--font-sm);
5358
}
54-
.pt-editable .text-base *:where([data-slate-string='true']) {
59+
.pt-editable .text-base *:where([data-slate-leaf='true']) {
5560
font-size: var(--font-base);
5661
}
57-
.pt-editable .text-md *:where([data-slate-string='true']) {
62+
.pt-editable .text-md *:where([data-slate-leaf='true']) {
5863
font-size: var(--font-md);
5964
}
60-
.pt-editable .text-lg *:where([data-slate-string='true']) {
65+
.pt-editable .text-lg *:where([data-slate-leaf='true']) {
6166
font-size: var(--font-lg);
6267
}
63-
.pt-editable .text-xl *:where([data-slate-string='true']) {
68+
.pt-editable .text-xl *:where([data-slate-leaf='true']) {
6469
font-size: var(--font-xl);
6570
}
66-
.pt-editable .text-2xl *:where([data-slate-string='true']) {
71+
.pt-editable .text-2xl *:where([data-slate-leaf='true']) {
6772
font-size: var(--font-2xl);
6873
}
69-
.pt-editable .text-3xl *:where([data-slate-string='true']) {
74+
.pt-editable .text-3xl *:where([data-slate-leaf='true']) {
7075
font-size: var(--font-3xl);
7176
}
72-
.pt-editable .text-4xl *:where([data-slate-string='true']) {
77+
.pt-editable .text-4xl *:where([data-slate-leaf='true']) {
7378
font-size: var(--font-4xl);
7479
}
75-
.pt-editable .text-5xl *:where([data-slate-string='true']) {
80+
.pt-editable .text-5xl *:where([data-slate-leaf='true']) {
7681
font-size: var(--font-5xl);
7782
}
78-
.pt-editable .tracking-display *:where([data-slate-string='true']) {
83+
.pt-editable .tracking-display *:where([data-slate-leaf='true']) {
7984
letter-spacing: var(--tracking-display);
8085
}
81-
.pt-editable .leading-md *:where([data-slate-string='true']) {
86+
.pt-editable .leading-md *:where([data-slate-leaf='true']) {
8287
line-height: var(--leading-md);
8388
}
84-
.pt-editable .leading-lg *:where([data-slate-string='true']) {
89+
.pt-editable .leading-lg *:where([data-slate-leaf='true']) {
8590
line-height: var(--leading-lg);
8691
}
87-
.pt-editable .leading-xl *:where([data-slate-string='true']) {
92+
.pt-editable .leading-xl *:where([data-slate-leaf='true']) {
8893
line-height: var(--leading-xl);
8994
}
9095
.pt-editable .py-2 {
@@ -97,12 +102,12 @@
97102
.pt-editable .pb-8 {
98103
padding-bottom: var(--spacing-8);
99104
}
100-
.pt-editable .font-normal *:where([data-slate-string='true']) {
105+
.pt-editable .font-normal *:where([data-slate-leaf='true']) {
101106
font-weight: var(--font-weight-normal);
102107
}
103-
.pt-editable .font-md *:where([data-slate-string='true']) {
108+
.pt-editable .font-md *:where([data-slate-leaf='true']) {
104109
font-weight: var(--font-weight-md);
105110
}
106-
.pt-editable .font-semibold *:where([data-slate-string='true']) {
111+
.pt-editable .font-semibold *:where([data-slate-leaf='true']) {
107112
font-weight: var(--font-weight-semibold);
108113
}

web/core/Promotion/Promotion.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ export const Promotion = forwardRef<HTMLAnchorElement, PromotionProps>(
7373
},
7474
ref,
7575
) {
76-
console.log('Promotion variant', variant)
7776
const plainText = Array.isArray(title)
7877
? title
7978
.map(block => block.children.map(span => span.text).join(''))

web/core/Typography/variants.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ const variants = {
2727
'text-5xl lg:text-6xl 2xl:text-8xl leading-cloudy lg:leading-cloudy 2xl:leading-cloudy ',
2828
},
2929
display: {
30-
h1_base: 'text-3xl leading-lofty tracking-display',
31-
h1_lg: 'text-4xl leading-earthy tracking-display ',
32-
h1_xl: 'text-5xl leading-earthy tracking-display ',
33-
h2_base: 'text-3xl leading-lofty tracking-display ',
34-
h2_lg: 'text-4xl leading-earthy tracking-display ',
35-
h2_xl: 'text-5xl leading-earthy tracking-display ',
30+
h1_base: 'text-3xl leading-earthy tracking-display',
31+
h1_lg: 'text-4xl leading-cloudy tracking-display ',
32+
h1_xl: 'text-5xl leading-cloudy tracking-display ',
33+
h2_base: 'text-3xl leading-earthy tracking-display ',
34+
h2_lg: 'text-4xl leading-cloudy tracking-display ',
35+
h2_xl: 'text-5xl leading-cloudy tracking-display ',
3636
},
3737
paragraph: {
3838
caption: '',

web/portableText/Blocks.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -119,18 +119,21 @@ const getBlockComponents = ({
119119
</Block>
120120
)
121121
},
122-
h2: ({ children }: TypeProps) => (
122+
h2: ({ children }: TypeProps) => {
123123
//expect 'article' as group when news other can be undefined group and fall back to heading
124-
<Block
125-
as={as}
126-
group={group ?? 'heading'}
127-
variant='h2'
128-
className={className}
129-
>
130-
{/**@ts-ignore:todo */}
131-
{children}
132-
</Block>
133-
),
124+
console.log('children h2', children)
125+
return (
126+
<Block
127+
as={as}
128+
group={group ?? 'heading'}
129+
variant='h2'
130+
className={className}
131+
>
132+
{/**@ts-ignore:todo */}
133+
{children}
134+
</Block>
135+
)
136+
},
134137
h3: ({ children }: TypeProps) => (
135138
<Block
136139
as={as}
@@ -377,7 +380,7 @@ export default function Blocks({
377380
...getBlockComponents({
378381
group: blocksGroup,
379382
variant: blocksVariant,
380-
as: 'span',
383+
as: 'div',
381384
className: twMerge(
382385
clampLines && twLineClampUtility[clampLines],
383386
blockClassName,

web/sections/TextBlock/TextBlock.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -78,29 +78,26 @@ const TextBlock = ({ data, anchor, className = '' }: TextBlockProps) => {
7878
)}
7979
>
8080
{image?.asset && (
81-
<div className='w-75'>
82-
<Image
83-
image={image}
84-
grid='xs'
85-
aspectRatio={'16:9'}
86-
className='object-cover'
87-
/>
88-
</div>
81+
<Image
82+
image={image}
83+
grid='xs'
84+
aspectRatio='4:3'
85+
imageClassName='object-contain object-left'
86+
className='mb-8 aspect-4/3 w-1/2 lg:mb-16 lg:w-1/3'
87+
/>
8988
)}
9089
{overline ? (
9190
<hgroup
92-
className={`mb-1 ${
93-
useBrandTheme ? 'text-energy-red-100' : ''
94-
} text-balance`}
91+
className={`mb-1 ${useBrandTheme ? 'text-energy-red-100' : ''}`}
9592
>
9693
<Typography variant='overline'>{overline}</Typography>
9794
{title && (
9895
<Blocks
9996
value={title}
10097
as='h2'
10198
asOneElementType
102-
//same as variants h2
103-
className='pb-8'
99+
group='heading'
100+
variant='h2'
104101
/>
105102
)}
106103
</hgroup>
@@ -110,14 +107,14 @@ const TextBlock = ({ data, anchor, className = '' }: TextBlockProps) => {
110107
value={title}
111108
as='h2'
112109
asOneElementType
113-
//same as variants h2
114-
className='pb-8'
110+
group='heading'
111+
variant='h2'
115112
/>
116113
)
117114
)}
118115
{(ingress || text || callToActions) && (
119116
<div
120-
className={`flex flex-col gap-6 ${
117+
className={`flex flex-col gap-6 pt-lg ${
121118
contentAlignment === 'right' ? 'items-end' : ''
122119
}`}
123120
>

web/sections/teasers/Teaser/Teaser.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type TeaserData = {
1717
type: string
1818
id: string
1919
title: PortableTextBlock[]
20-
text: PortableTextBlock[]
20+
content: PortableTextBlock[]
2121
overline?: string
2222
image: ImageWithAlt
2323
actions?: LinkData[]
@@ -34,7 +34,7 @@ type TeaserProps = {
3434
}
3535

3636
const Teaser = ({ data, anchor }: TeaserProps) => {
37-
const { title, overline, text, image, actions, designOptions } = data
37+
const { title, overline, content, image, actions, designOptions } = data
3838
const {
3939
imageSize = 'full',
4040
imagePosition,
@@ -46,7 +46,7 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
4646
const useFlexCol = useMediaQuery(`(max-width: 1023px)`)
4747
const { bg, dark } = getBgAndDarkFromBackground(designOptions)
4848

49-
if ([title, overline, text, image?.asset, actions].every(i => !i)) {
49+
if ([title, overline, content, image?.asset, actions].every(i => !i)) {
5050
return null
5151
}
5252

@@ -91,8 +91,8 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
9191
value={title}
9292
as='h2'
9393
asOneElementType
94-
//same as variants h2
95-
className='pb-8'
94+
group='heading'
95+
variant='h2'
9696
/>
9797
)}
9898
</hgroup>
@@ -101,15 +101,15 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
101101
<Blocks
102102
value={title}
103103
as='h2'
104+
group='heading'
105+
variant='h2'
104106
asOneElementType
105-
//same as variants h2
106-
className='pb-8'
107107
/>
108108
)
109109
)}
110-
{text && <Blocks variant='ingress' value={text} />}
110+
{content && <Blocks variant='ingress' value={content} />}
111111
{actions && (
112-
<div className='flex flex-col gap-8'>
112+
<div className='mt-8 flex flex-col gap-x-8 gap-y-6'>
113113
{actions?.map((action, idx) => {
114114
const url = action && getUrlFromAction(action)
115115
return (

web/sections/teasers/TextTeaser/TextTeaser.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const TextTeaser = ({ data, anchor, className }: TextTeaserProps) => {
2424
value={title}
2525
as='h2'
2626
asOneElementType
27-
//same as variants h2
28-
className='pb-8'
27+
group='heading'
28+
variant='h2'
2929
/>
3030
)
3131

0 commit comments

Comments
 (0)