✨ Upgrade newsroom #2433

sanityv3/schemas/documents/newsroom.ts

@@ -6,6 +6,8 @@ import { file } from '@equinor/eds-icons'
 import { EdsIcon } from '../../icons'
 import type { PortableTextBlock, Rule } from 'sanity'
 import { lang } from './langField'
+import routes from '../routes'
+import { filterByRoute } from '../../helpers/referenceFilters'
 
 const titleContentType = configureTitleBlockContent()
 const textContentType = configureBlockContent({
@@ -66,6 +68,36 @@ export default {
       type: 'array',
       of: [textContentType],
     },
+    {
+      name: 'subscriptionHeading',
+      title: 'Heading for the subscription banner',
+      type: 'string',
+    },
+    {
+      name: 'subscriptionLink',
+      title: 'Link to the email subscription page',
+      type: 'reference',
+      to: routes,
+      options: {
+        filter: filterByRoute,
+      },
+    },
+    {
+      name: 'subscriptionLinkTitle',
+      title: 'Title for the subscription link',
+      type: 'string',
+    },
+    {
+      name: 'localNewsPagesHeading',
+      title: 'Heading for the local news pages banner',
+      type: 'string',
+    },
+    {
+      title: 'List of local news pages',
+      name: 'localNewsPages',
+      type: 'array',
+      of: [{ type: 'linkSelector', title: 'Link' }],
+    },
   ],
   preview: {
     select: {

sanityv3/schemas/textSnippets.ts

@@ -76,6 +76,16 @@ const snippets: textSnippet = {
     defaultValue: 'Search',
     group: groups.search,
   },
+  search_quick_search: {
+    title: 'Quick search',
+    defaultValue: 'Quick search',
+    group: groups.search,
+  },
+  search_quick_search_label: {
+    title: 'Quick search label',
+    defaultValue: 'Search among Equinor corporate-level news releases',
+    group: groups.search,
+  },
   search_news_tab: {
     title: 'News tab name',
     defaultValue: 'News',
@@ -111,6 +121,26 @@ const snippets: textSnippet = {
     defaultValue: 'Sorry, no results were found. Please try again with some different keywords.',
     group: groups.search,
   },
+  search_reset: {
+    title: 'Reset',
+    defaultValue: 'Reset',
+    group: groups.search,
+  },
+  search_filter_by: {
+    title: 'Filter by',
+    defaultValue: 'Filter by',
+    group: groups.search,
+  },
+  search_pagination_first_page: {
+    title: 'First page',
+    defaultValue: 'First page',
+    group: groups.search,
+  },
+  search_pagination_last_page: {
+    title: 'Last page',
+    defaultValue: 'Last page',
+    group: groups.search,
+  },
   copyright: {
     title: 'Copyright',
     defaultValue: 'Copyright 2022 Equinor ASA',
@@ -667,6 +697,16 @@ const snippets: textSnippet = {
     defaultValue: 'Topic',
     group: groups.newsroom,
   },
+  newsroom_filters_label: {
+    title: 'Filters label',
+    defaultValue: 'Filter by:',
+    group: groups.newsroom,
+  },
+  newsroom_filters_selected: {
+    title: 'Selected',
+    defaultValue: 'selected',
+    group: groups.newsroom,
+  },
   newsroom_country_filter: {
     title: 'Country filter heading',
     defaultValue: 'Country',
@@ -734,6 +774,21 @@ const snippets: textSnippet = {
     defaultValue: 'Back to content',
     group: groups.others,
   },
+  next: {
+    title: 'Next',
+    defaultValue: 'Next',
+    group: groups.others,
+  },
+  previous: {
+    title: 'Previous',
+    defaultValue: 'Previous',
+    group: groups.others,
+  },
+  page: {
+    title: 'Page',
+    defaultValue: 'Page',
+    group: groups.others,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

search/IndexSanityContent/common/news/SharedNewsFields.ts

@@ -1,4 +1,5 @@
 import { Page } from '../../../common'
+import { ImageWithAltAndCaption } from '../types'
 
 export type SharedNewsFields = Page & {
   title: string
@@ -18,4 +19,5 @@ export type SharedNewsFields = Page & {
     text: string
   }[]
   _id: string
+  heroImage?: ImageWithAltAndCaption
 }

search/IndexSanityContent/common/types.ts

@@ -0,0 +1,30 @@
+export type ImageWithAlt = {
+  _type: 'imageWithAlt'
+  alt: string
+  isDecorative?: boolean
+  asset: {
+    _ref: string
+    _type: 'reference'
+  }
+  crop?: {
+    _type: 'sanity.imageCrop'
+    bottom: number
+    left: number
+    right: number
+    top: number
+  }
+  hotspot?: {
+    _type: 'sanity.imageHotspot'
+    height: number
+    width: number
+    x: number
+    y: number
+  }
+}
+
+export type ImageWithAltAndCaption = {
+  _type: 'imageWithAltAndCaption'
+  attribution?: string
+  caption?: string
+  image: ImageWithAlt
+}

search/IndexSanityContent/localNews/sanity.ts

@@ -33,6 +33,7 @@ export const query = /* groq */ `*[_type == "localNews" && lang == $lang && !(_i
     title,
     "text": pt::text(content)
   },
+  heroImage,
   "docToClear": _id match $id
 }
 `

search/IndexSanityContent/magazine/mapper.ts

@@ -1,9 +1,10 @@
 import { pipe } from 'fp-ts/lib/function'
 import * as A from 'fp-ts/lib/Array'
 import * as O from 'fp-ts/lib/Option'
-import { ImageWithAlt, MagazineArticle } from './sanity'
+import { MagazineArticle } from './sanity'
 import { AccordionIndex, MagazineIndex, TextBlockIndex } from '../../common'
 import { mappedAccordions, mappedTextBlocks } from '../common/mappers'
+import { ImageWithAlt } from '../common/types'
 
 const getHeroImage = (article: MagazineArticle): ImageWithAlt | null => {
   if (article?.heroFigure?.image?.asset) {

search/IndexSanityContent/magazine/sanity.ts

@@ -5,6 +5,7 @@ import { SanityClient } from '@sanity/client'
 import { Language } from '../../common'
 import { MappableAccordionType, MappableTextBlockType } from '../common/mappers'
 import { plainTextExcludingStrikeThrough } from '../../common/queryHelpers'
+import { ImageWithAlt, ImageWithAltAndCaption } from '../common/types'
 
 export enum HeroTypes {
   DEFAULT = 'default',
@@ -62,37 +63,6 @@ const getQueryParams = (language: Language, id: string) => ({
   id: id,
 })
 
-export type ImageWithAlt = {
-  _type: 'imageWithAlt'
-  alt: string
-  isDecorative?: boolean
-  asset: {
-    _ref: string
-    _type: 'reference'
-  }
-  crop?: {
-    _type: 'sanity.imageCrop'
-    bottom: number
-    left: number
-    right: number
-    top: number
-  }
-  hotspot?: {
-    _type: 'sanity.imageHotspot'
-    height: number
-    width: number
-    x: number
-    y: number
-  }
-}
-
-export type ImageWithAltAndCaption = {
-  _type: 'imageWithAltAndCaption'
-  attribution?: string
-  caption?: string
-  image: ImageWithAlt
-}
-
 export type MagazineArticle = {
   slug: string
   title: string

search/IndexSanityContent/news/mapper.ts

@@ -5,7 +5,7 @@ import type { NewsArticle } from './sanity'
 
 type MapDataType = (article: NewsArticle) => NewsIndex[]
 export const mapData: MapDataType = (article) => {
-  const { publishDateTime, topicTags, countryTags, title, ingress, slug, factboxes } = article
+  const { publishDateTime, topicTags, countryTags, title, ingress, slug, factboxes, heroImage } = article
   // Hu hei hvor det går
   const year = publishDateTime ? new Date(publishDateTime).getFullYear() : ''
   return pipe(
@@ -24,6 +24,7 @@ export const mapData: MapDataType = (article) => {
           topicTags,
           countryTags,
           year,
+          heroImage,
         } as NewsIndex),
     ),
     A.concat(
@@ -40,6 +41,7 @@ export const mapData: MapDataType = (article) => {
             topicTags,
             countryTags,
             year,
+            heroImage,
           } as NewsIndex),
       ),
     ),

search/IndexSanityContent/news/sanity.ts

@@ -34,6 +34,7 @@ export const query = /* groq */ `*[_type == "news" && lang == $lang && !(_id in
     title,
     "text": pt::text(content)
   },
+  heroImage,
   "docToClear": _id match $id
 }
 `

search/common/types.ts

@@ -58,6 +58,7 @@ export type NewsIndex = {
   countryTags: string[]
   thumbnailUrl: string
   localNewsTag: string
+  heroImage: object
 }
 
 export type MagazineIndex = {

web/common/helpers/getPaths.ts

@@ -1,7 +1,7 @@
 import { groq } from 'next-sanity'
 import { getNameFromLocale } from '../../lib/localization'
 import { publishDateTimeQuery } from '../../lib/queries/common/publishDateTime'
-import { sanityClient } from '../../lib/sanity.server'
+import { getClient } from '../../lib/sanity.server'
 import { noDrafts, sameLang } from './../../lib/queries/common/langAndDrafts'
 
 // These URLs uses SSR and thus should not be static rendered
@@ -14,7 +14,7 @@ const getTopicRoutesForLocale = async (locale: string) => {
   const lang = getNameFromLocale(locale)
   // Empty array as fallback for satelittes
   const blacklist = topicSlugBlackList[lang as keyof typeof topicSlugBlackList] || []
-  const data: { slug: string; _updatedAt: string }[] = await sanityClient.fetch(
+  const data: { slug: string; _updatedAt: string }[] = await getClient(false).fetch(
     groq`*[_type match "route_" + $lang + "*" && (!(slug.current in $blacklist)) && defined(slug.current) && !(_id in path("drafts.**"))][] {
       _updatedAt,
       "slug": slug.current,
@@ -30,7 +30,7 @@ const getTopicRoutesForLocaleToStaticallyBuild = async (locale: string) => {
   const lang = getNameFromLocale(locale)
   // Empty array as fallback for satelittes
   const blacklist = topicSlugBlackList[lang as keyof typeof topicSlugBlackList] || []
-  const data: { slug: string; _updatedAt: string }[] = await sanityClient.fetch(
+  const data: { slug: string; _updatedAt: string }[] = await getClient(false).fetch(
     groq`*[_type match "route_" + $lang + "*" && (!(slug.current in $blacklist)) && includeInBuild && defined(slug.current) && !(_id in path("drafts.**"))][] {
       _updatedAt,
       "slug": slug.current,
@@ -40,12 +40,13 @@ const getTopicRoutesForLocaleToStaticallyBuild = async (locale: string) => {
       blacklist,
     },
   )
+  console.log('data', data)
   return data
 }
 
 const getDocumentsForLocale = async (type: 'news' | 'localNews' | 'magazine', locale: string) => {
   const lang = getNameFromLocale(locale)
-  const data: { slug: string; _updatedAt: string }[] = await sanityClient.fetch(
+  const data: { slug: string; _updatedAt: string }[] = await getClient(false).fetch(
     groq`*[_type == $type && defined(slug.current) && ${sameLang} && ${noDrafts}][] {
       _updatedAt,
       "slug": slug.current,
@@ -62,7 +63,7 @@ const getDocumentsForLocale = async (type: 'news' | 'localNews' | 'magazine', lo
 // Only include drafts if preview mode is enabled
 export const getDocumentBySlug = async (slug: string, isPreview = false) => {
   const draft = isPreview ? `` : /* groq */ `&& ${noDrafts}`
-  const data: { slug: string; _updatedAt: string }[] = await sanityClient.fetch(
+  const data: { slug: string; _updatedAt: string }[] = await getClient(false).fetch(
     groq`*[defined(slug.current) && slug.current == $slug ${draft}][0] {
       _updatedAt,
       "slug": slug.current,
@@ -148,7 +149,7 @@ export const getLocalNewsPaths = async (locales: string[]): Promise<PathType[]>
 export const getNewsroomPaths = async (): Promise<PathType[]> => {
   // Use last published news as updatedAt field for newsroom
   const getUpdatedAt = async (lang: 'en_GB' | 'nb_NO'): Promise<{ _updatedAt: string }> =>
-    await sanityClient.fetch(
+    await getClient(false).fetch(
       groq`*[_type == 'news' && ${sameLang} && ${noDrafts}] | order(${publishDateTimeQuery} desc)[0] {
       _updatedAt,
     }`,
@@ -177,7 +178,7 @@ export const getNewsroomPaths = async (): Promise<PathType[]> => {
 export const getMagazineIndexPaths = async (): Promise<PathType[]> => {
   // Use last published news as updatedAt field for newsroom
   const getUpdatedAt = async (lang: 'en_GB' | 'nb_NO'): Promise<{ _updatedAt: string }> =>
-    await sanityClient.fetch(
+    await getClient(false).fetch(
       groq`*[_type == 'magazine' && ${sameLang} && ${noDrafts}] | order(_createdAt desc)[0] {
       _updatedAt,
     }`,

web/components/src/Accordion/Header.tsx

@@ -53,7 +53,7 @@ const StyledHeader = styled(Typography)`
   }
 `
 
-const StyledTypography = styled(Typography)<{ isExpanded?: boolean }>`
+const StyledTypography = styled(Typography)<{ $isExpanded?: boolean }>`
   font-size: var(--typeScale-1);
   line-height: var(--lineHeight-2);
   display: inline-block;
@@ -65,8 +65,8 @@ const StyledTypography = styled(Typography)<{ isExpanded?: boolean }>`
 
   color: var(--color-on-background);
 
-  ${({ isExpanded }) =>
-    isExpanded && {
+  ${({ $isExpanded }) =>
+    $isExpanded && {
       fontWeight: 700,
     }}
 `
@@ -92,7 +92,7 @@ export const Header = forwardRef<HTMLButtonElement, AccordionHeaderProps>(functi
             <FilledIcon size={iconSize} data={add_circle_filled} />
           </StyledIcon>
         )}
-        <StyledTypography isExpanded={isOpen} forwardedAs="span">
+        <StyledTypography $isExpanded={isOpen} forwardedAs="span">
           {children}
         </StyledTypography>
       </StyledCAccordionButton>