✨ Upgrade newsroom #2433 (#2448)

* 🎨 start fetching on selection

* ✨ Index news hero image #2433

* 🎨 updated newsroom

* 🎨 lint errors and algolia for newsroom

* 🎨 transient props

* :Art new player

* 🎨 add pagination and translations,degrade next and next sanity

* 🎨 delete new provider since downgrade

* 🎨 responsive versions

* 🎨 look over packages

* 🎨 adjustments to max w

* 🐛 fix lg padding

* 🎨 update

* 🎨 design changes and added radix ui accordion

* 🎨 add max w

* 🎨 update

* 🎨 more accessibility

* 🎨 wrong hook

* 🎨 make algolia search box to core comp

* 🎨 fix thumbnail images

* 🎨 specify no end border

* 🐛 fix console logs and revert sanity client

* 🐛 fix responsive bugs

* 🎨 allow a bit bigger images

* 🎨 change initial load and refinements to sanity

* 🎨 sanity pagination

* 🎨 update queries

* 🎨 update groqs

* 🎨 take some algolia back

* 🎨 revert to algolia

* 🎨 add skeleton to newsroom

* 🎨 remove unused

---------

Co-authored-by: Padmaja <[email protected]>

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,42 @@ export default {
       type: 'array',
       of: [textContentType],
     },
+    {
+      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',
+    },
+    {
+      title: 'List of local news pages',
+      name: 'localNewsPages',
+      type: 'array',
+      of: [{ type: 'linkSelector', title: 'Link' }],
+    },
+    {
+      title: 'Image thumbnail fallbacks',
+      name: 'imageThumbnailFallbacks',
+      type: 'array',
+      of: [
+        {
+          type: 'image',
+          title: 'Fallback image',
+          options: {
+            hotspot: true,
+            collapsed: false,
+          },
+        },
+      ],
+      validation: (Rule: Rule) => Rule.max(3),
+    },
   ],
   preview: {
     select: {

sanityv3/schemas/textSnippets.ts

@@ -81,6 +81,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',
@@ -116,6 +126,31 @@ const snippets: textSnippet = {
     defaultValue: 'Sorry, no results were found. Please try again with some different keywords.',
     group: groups.search,
   },
+  search_submit: {
+    title: 'Submit search',
+    defaultValue: 'Submit search',
+    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',
@@ -689,6 +724,21 @@ 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_filters_clear_all: {
+    title: 'Clear all',
+    defaultValue: 'Clear all',
+    group: groups.newsroom,
+  },
   newsroom_country_filter: {
     title: 'Country filter heading',
     defaultValue: 'Country',
@@ -720,6 +770,16 @@ const snippets: textSnippet = {
     defaultValue: 'Your search returned no results',
     group: groups.newsroom,
   },
+  newsroom_related_links: {
+    title: 'Related links',
+    defaultValue: 'Related links',
+    group: groups.newsroom,
+  },
+  newsroom_skip_to_news: {
+    title: 'Skip to list of news',
+    defaultValue: 'Skip to list of news',
+    group: groups.newsroom,
+  },
   magazineindex_list_header: {
     title: 'Magazine index: Stories list heading',
     defaultValue: 'Stories',
@@ -766,6 +826,26 @@ const snippets: textSnippet = {
     defaultValue: 'Switch to',
     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,
+  },
+  remove: {
+    title: 'Remove',
+    defaultValue: 'Remove',
+    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 = {