♻️ Index big title text #1890

equinor · Oct 9, 2023 · 72092c9 · 72092c9
1 parent 4c4dd8c
commit 72092c9
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 45 deletions.
diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx
@@ -24,7 +24,7 @@ const ingressContentType = configureBlockContent({
   attachment: false,
 })
 
-const ingressContentTypeForBigText = configureBlockContent({
+const blockContentTypeForBigText = configureBlockContent({
   h1: false,
   h2: false,
   h3: false,
@@ -159,14 +159,14 @@ export default {
       hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
     },
     {
-      name: 'bigIngress',
-      title: 'Ingress',
+      name: 'bigTitle',
+      title: 'Title',
       type: 'array',
-      of: [ingressContentTypeForBigText],
+      of: [blockContentTypeForBigText],
       hidden: ({ parent }: TextBlockDocument) => !parent.isBigText,
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
-          !value && (ctx.parent as TextBlock)?.isBigText ? 'Ingress is required' : true,
+          !value && (ctx.parent as TextBlock)?.isBigText ? 'Title is required' : true,
         ),
     },
     {
@@ -221,22 +221,22 @@ export default {
       ingress: 'ingress',
       text: 'text',
       isBigText: 'isBigText',
-      bigIngress: 'bigIngress',
+      bigTitle: 'bigTitle',
     },
     prepare({
       title,
       isBigText,
-      bigIngress,
+      bigTitle,
       ingress,
       text,
     }: {
       title: PortableTextBlock[]
       ingress: PortableTextBlock[]
       isBigText: boolean
-      bigIngress: PortableTextBlock[]
+      bigTitle: PortableTextBlock[]
       text: PortableTextBlock[]
     }) {
-      const plainTitle = isBigText ? blocksToText(bigIngress) : blocksToText(title || ingress || text)
+      const plainTitle = isBigText ? blocksToText(bigTitle) : blocksToText(title || ingress || text)
 
       return {
         title: plainTitle || 'Missing title/content',

diff --git a/search/IndexSanityContent/magazine/sanity.ts b/search/IndexSanityContent/magazine/sanity.ts
@@ -27,7 +27,11 @@ export const query = /* groq */ `*[_type == "magazine" && _lang == $lang && !(_i
   "ingress": pt::text(ingress),
   "textBlocks": content[_type == "textBlock"]{
     "_key": _key,
-    "title": pt::text(title),
+    "title": select(
+      "isBigText" == true => {
+        pt::text(bigTitle),
+        pt::text(title)
+      }),
     "ingress": pt::text(ingress),
     "text": pt::text(text)  // TODO: Do this manually to cover all cases
   },

diff --git a/search/IndexSanityContent/topic/sanity.ts b/search/IndexSanityContent/topic/sanity.ts
@@ -11,7 +11,11 @@ export const query = /* groq */ `*[_type match "route_" + $lang + "*" && content
   "type": content->_type,
   "textBlocks": content->content[_type == "textBlock"]{
     "_key": _key,
-    "title": pt::text(title),
+    "title": select(
+      "isBigText" == true => {
+        pt::text(bigTitle),
+        pt::text(title)
+      }),
     "ingress": pt::text(ingress),
     "text": pt::text(text)  // TODO: Do this manually to cover all cases
   },

diff --git a/web/components/src/Heading/Heading.stories.tsx b/web/components/src/Heading/Heading.stories.tsx
@@ -35,7 +35,7 @@ Default.storyName = 'Default'
 
 export const HeaderLevels: StoryFn<HeadingProps> = () => (
   <Wrapper>
-    <Heading level="h1" size="2xl">
+    <Heading level="h1" size="3xl">
       Renewables and low-carbon{' '}
     </Heading>
     <Heading level="h2" size="xl">
@@ -60,10 +60,10 @@ HeaderLevels.storyName = 'Header levels'
 
 export const FontWeight: StoryFn<HeadingProps> = () => (
   <Wrapper>
-    <Heading level="h1" size="2xl">
+    <Heading level="h1" size="3xl">
       I'm bold
     </Heading>
-    <Heading level="h1" size="2xl" regular>
+    <Heading level="h1" size="3xl" regular>
       I'm regular
     </Heading>
   </Wrapper>
@@ -72,7 +72,7 @@ FontWeight.storyName = 'Font weight'
 
 FontWeight.parameters = {
   docs: {
-    storyDescription: `The largest font size, 2xl, can be either bold or regular`,
+    storyDescription: `The largest font size, 3xl, can be either bold or regular`,
   },
 }
 
@@ -93,7 +93,7 @@ export const Sizes: StoryFn<HeadingProps> = () => (
     <Heading level="h1" size="xl">
       We are all h1 headers
     </Heading>
-    <Heading level="h1" size="2xl">
+    <Heading level="h1" size="3xl">
       We are all h1 headers
     </Heading>
   </Wrapper>
@@ -122,7 +122,7 @@ export const Long: StoryFn<HeadingProps> = () => (
     <Heading level="h2" size="xl">
       Equinor is in a unique position to make a difference in the global energy future. We will seize this opportunity.
     </Heading>
-    <Heading level="h1" size="2xl">
+    <Heading level="h1" size="3xl">
       Equinor is in a unique position to make a difference in the global energy future. We will seize this opportunity.
     </Heading>
   </Wrapper>

diff --git a/web/components/src/Heading/Heading.tsx b/web/components/src/Heading/Heading.tsx
@@ -30,7 +30,7 @@ const StyledHeading = styled(Typography)<StyledHeadingProps>`
 `
 
 export type HeadingProps = {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
   level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   regular?: boolean
   center?: boolean
@@ -45,7 +45,8 @@ const sizes = {
   md: 'var(--typeScale-2)',
   lg: 'var(--typeScale-3)',
   xl: 'var(--typeScale-4)',
-  '2xl': 'var(--typeScale-5)',
+  '2xl': 'var(--typeScale-4_5)',
+  '3xl': 'var(--typeScale-5)',
 }
 
 const lineHeights = {
@@ -54,7 +55,8 @@ const lineHeights = {
   md: 'var(--lineHeight-1)',
   lg: 'var(--lineHeight-1)',
   xl: 'var(--lineHeight-1)',
-  '2xl': 'var(--lineHeight-2)',
+  '2xl': 'var(--lineHeight-2_5)',
+  '3xl': 'var(--lineHeight-2)',
 }
 
 const fontWeights = {
@@ -63,7 +65,8 @@ const fontWeights = {
   md: 'var(--fontWeight-regular)',
   lg: 'var(--fontWeight-regular)',
   xl: 'var(--fontWeight-regular)',
-  '2xl': 'var(--fontWeight-regular)',
+  '2xl': 'var(--fontWeidht-regular)',
+  '3xl': 'var(--fontWeight-regular)',
 }
 
 export const Heading = forwardRef<HTMLDivElement, HeadingProps>(function Heading(

diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
@@ -43,17 +43,14 @@ const pageContentFields = /* groq */ `
     "id": _key,
     image,
     overline,
-    title,
     isBigText,
-    "ingress": select(
+    "title": select(
       isBigText =>
-        bigIngress[]{..., ${markDefs}},
-        ingress[]{..., ${markDefs}}
+        bigTitle[]{..., ${markDefs}},
+        title[]{..., ${markDefs}}
       ),
-    text[]{
-      ...,
-      ${markDefs},
-    },
+    ingress[]{..., ${markDefs}},
+    text[]{..., ${markDefs}},
     "callToActions": action[]{
       ${linkSelectorFields},
       ${downloadableFileFields},

diff --git a/web/pageComponents/pageTemplates/ErrorPage.tsx b/web/pageComponents/pageTemplates/ErrorPage.tsx
@@ -41,7 +41,7 @@ const ErrorPage = ({ pageData }: { pageData: ErrorPageData }) => {
       <BodyContainer>
         {backgroundImage && <BackgroundImage backgroundImage={backgroundImage} />}
         <TextWrapper>
-          <StyledHeading level="h1" size="2xl">
+          <StyledHeading level="h1" size="3xl">
             <MegaText>404</MegaText>
             {title && <span>{toPlainText(title)}</span>}
           </StyledHeading>

diff --git a/web/pageComponents/pageTemplates/Event.tsx b/web/pageComponents/pageTemplates/Event.tsx
@@ -150,7 +150,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
         <EventLayout>
           <Header>
             <HeaderInner>
-              {title && <TitleText value={title} level="h1" size="2xl" />}
+              {title && <TitleText value={title} level="h1" size="3xl" />}
               {start && (
                 <StyledDate>
                   <FormattedDate datetime={start} />

diff --git a/web/pageComponents/pageTemplates/LandingPage.tsx b/web/pageComponents/pageTemplates/LandingPage.tsx
@@ -43,7 +43,7 @@ const LandingPage = ({ data }: LandingPageProps) => {
     <>
       <Seo seoAndSome={data?.seoAndSome} slug={data?.slug} pageTitle={data?.title} />
       <LandingPageLayout>
-        <HeroBanner>{title && <StyledHeading value={title} level="h1" size="2xl" />}</HeroBanner>
+        <HeroBanner>{title && <StyledHeading value={title} level="h1" size="3xl" />}</HeroBanner>
         {ingress && (
           <Intro>
             <IngressText value={ingress} />

diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx
@@ -219,7 +219,7 @@ const NewsPage = ({ data: news }: ArticleProps) => {
           <NewsLayout>
             <Header>
               <HeaderInner>
-                <StyledHeading level="h1" size="2xl" inverted>
+                <StyledHeading level="h1" size="3xl" inverted>
                   {title}
                 </StyledHeading>
                 {publishDateTime && (

diff --git a/web/pageComponents/pageTemplates/NewsRoomPage.tsx b/web/pageComponents/pageTemplates/NewsRoomPage.tsx
@@ -189,7 +189,7 @@ const NewsRoomPage = ({ isServerRendered, locale, pageData, slug, url }: NewsRoo
                       // @ts-ignore: Still struggling with the types here :/
                       if (isEmpty(children)) return null
                       return (
-                        <Heading level="h1" size="2xl">
+                        <Heading level="h1" size="3xl">
                           {children}
                         </Heading>
                       )

diff --git a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
@@ -40,7 +40,7 @@ const StyledHeading = styled(TitleText)<{ $bgColor?: BackgroundColours }>`
 const SharedTitle = ({ title, styles }: SharedTitleProps) => {
   return (
     <TitleWrapper styles={styles}>
-      <StyledHeading $bgColor={styles?.backgroundColor} value={title} level="h1" size="2xl" />
+      <StyledHeading $bgColor={styles?.backgroundColor} value={title} level="h1" size="3xl" />
     </TitleWrapper>
   )
 }

diff --git a/web/pageComponents/shared/Hero/DefaultHero.tsx b/web/pageComponents/shared/Hero/DefaultHero.tsx
@@ -34,7 +34,7 @@ type Props = {
 export const DefaultHero = ({ title, image }: Props) => {
   return (
     <>
-      <HeroBanner>{title && <StyledHeading value={title} level="h1" size="2xl" />}</HeroBanner>
+      <HeroBanner>{title && <StyledHeading value={title} level="h1" size="3xl" />}</HeroBanner>
       <ImageWrapper>{image && <DefaulHeroImage data={image} />}</ImageWrapper>
     </>
   )

diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx
@@ -1,4 +1,4 @@
-import { Eyebrow, BackgroundContainer, Text } from '@components'
+import { Eyebrow, BackgroundContainer, Text, Heading } from '@components'
 import IngressText from '../shared/portableText/IngressText'
 import RichText from '../shared/portableText/RichText'
 import TitleText from '../shared/portableText/TitleText'
@@ -73,16 +73,13 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => {
     <StyledTextBlockWrapper background={background} id={anchor || data.anchor}>
       <StyledTextBlock>
         {isBigText ? (
-          ingress && (
-            <IngressText
-              value={ingress}
+          title && (
+            <TitleText
+              level="h2"
+              value={title}
               components={{
                 block: {
-                  normal: ({ children }: { children: React.ReactNode }) => (
-                    <Text lineHeight="2_5" size="lg">
-                      {children}
-                    </Text>
-                  ),
+                  normal: ({ children }: { children: React.ReactNode }) => <Heading size="2xl">{children}</Heading>,
                 } as BlockType,
               }}
             />