Merge branch 'bose/2547' into staging

sanityv3/schemas/HeroTypes.ts

@@ -3,4 +3,5 @@ export enum HeroTypes {
   FIFTY_FIFTY = 'fiftyFifty',
   FULL_WIDTH_IMAGE = 'fullWidthImage',
   LOOPING_VIDEO = 'loopingVideo',
+  BACKGROUND_IMAGE = 'backgroundImage',
 }

sanityv3/schemas/documents/magazine.ts

@@ -180,9 +180,7 @@ export default {
     {
       title: 'Title ',
       name: 'titleAsc',
-      // Yes, this will add a warning in the console, but we still need the [0] since it's a rich text editor
-      // Might be worth to look into if it is a better way of sorting rich text editors
-      by: [{ field: 'title[0].children[0].text', direction: 'asc' }],
+      by: [{ field: 'title', direction: 'asc' }],
     },
   ],
   preview: {

sanityv3/schemas/documents/magazineIndexPage.ts

@@ -1,12 +1,17 @@
 import blocksToText from '../../helpers/blocksToText'
 import { configureBlockContent } from '../editors/blockContentType'
+import CompactBlockEditor from '../components/CompactBlockEditor'
 import MagazineFooterComponent from '../objects/magazineFooterComponent'
-import sharedHeroFields from './header/sharedHeaderFields'
 import { EdsIcon } from '../../icons'
 import { bookmarks } from '@equinor/eds-icons'
 
 import type { PortableTextBlock, Rule } from 'sanity'
 import { lang } from './langField'
+import { HeroTypes } from '../HeroTypes'
+import { configureTitleBlockContent } from '../editors'
+import { ValidationContext } from '../../types/schemaTypes'
+
+const titleContentType = configureTitleBlockContent()
 
 const textContentType = configureBlockContent({
   h2: true,
@@ -53,7 +58,60 @@ export default {
       description: 'You can override the hero image as the SoMe image by uploading another image here.',
       fieldset: 'metadata',
     },
-    ...sharedHeroFields,
+    {
+      name: 'title',
+      type: 'array',
+      title: 'Title',
+      components: {
+        input: CompactBlockEditor,
+      },
+      of: [titleContentType],
+      fieldset: 'header',
+      validation: (Rule: Rule) => Rule.required(),
+    },
+    {
+      title: 'Type',
+      name: 'heroType',
+      type: 'string',
+      options: {
+        list: [
+          { title: 'Default', value: HeroTypes.DEFAULT },
+          { title: 'Full Image', value: HeroTypes.FULL_WIDTH_IMAGE },
+          { title: 'Background image', value: HeroTypes.BACKGROUND_IMAGE },
+        ].filter((e) => e),
+      },
+      initialValue: 'default',
+      fieldset: 'header',
+    },
+    {
+      title: 'Hero image',
+      name: 'heroFigure',
+      type: 'imageWithAltAndCaption',
+      fieldset: 'header',
+    },
+    {
+      title: 'Hero image ratio',
+      name: 'heroRatio',
+      type: 'string',
+      options: {
+        list: [
+          { title: 'Tall', value: 'tall' },
+          { title: '2:1(deprecated)', value: '0.5' },
+          { title: 'Narrow', value: 'narrow' },
+        ],
+      },
+      hidden: ({ parent }: DocumentType) => {
+        return parent?.heroType !== HeroTypes.FULL_WIDTH_IMAGE
+      },
+      validation: (Rule: Rule) =>
+        Rule.custom((value: string, context: ValidationContext) => {
+          const { parent } = context as unknown as DocumentType
+          if (parent?.heroType === HeroTypes.FULL_WIDTH_IMAGE && !value) return 'Field is required'
+          return true
+        }),
+      initialValue: '0.5',
+      fieldset: 'header',
+    },
     {
       title: 'Text',
       name: 'ingress',

sanityv3/schemas/documents/page.ts

@@ -90,9 +90,7 @@ export default {
     {
       title: 'Title ',
       name: 'titleAsc',
-      // Yes, this will add a warning in the console, but we still need the [0] since it's a rich text editor
-      // Might be worth to look into if it is a better way of sorting rich text editors
-      by: [{ field: 'title[0].children[0].text', direction: 'asc' }],
+      by: [{ field: 'title', direction: 'asc' }],
     },
   ],
   preview: {

sanityv3/schemas/textSnippets.ts

@@ -355,7 +355,7 @@ const snippets: textSnippet = {
     defaultValue: 'Please fill out your name',
     group: groups.pensionForm,
   },
-  
+
   pension_form_email: {
     title: 'Email',
     defaultValue: 'Email *',
@@ -365,7 +365,7 @@ const snippets: textSnippet = {
     title: 'Email validation',
     defaultValue: 'Please fill out a valid email address',
     group: groups.pensionForm,
-  },  
+  },
   pension_form_category: {
     title: 'Category',
     defaultValue: 'Category',
@@ -386,7 +386,7 @@ const snippets: textSnippet = {
     defaultValue: 'Other Pension/Insurance Related',
     group: groups.pensionForm,
   },
-  
+
   pension_form_what_is_your_request: {
     title: 'What is your request?',
     defaultValue: 'What is your request?',
@@ -402,7 +402,7 @@ const snippets: textSnippet = {
     defaultValue: 'Please let us know how we may help you',
     group: groups.pensionForm,
   },
-  
+
   pension_form_submit: {
     title: 'Submit Button Text',
     defaultValue: 'Submit Form',
@@ -932,6 +932,11 @@ const snippets: textSnippet = {
     defaultValue: 'Remove',
     group: groups.others,
   },
+  filter: {
+    title: 'Filter',
+    defaultValue: 'Filter',
+    group: groups.others,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

web/common/helpers/scrollToTop.ts

@@ -0,0 +1,3 @@
+export const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}

web/components/src/Backgrounds/ImageBackgroundContainer.tsx

@@ -8,6 +8,9 @@ type ImageBackgroundContainerProps = {
   scrimClassName?: string
   /* On mobile dont split background image and content */
   dontSplit?: boolean
+  /* Provide gradient in scrimClassname and disable default */
+  overrideGradient?: boolean
+  aspectRatio?: number
 } & ImageBackground &
   HTMLAttributes<HTMLDivElement>
 const DEFAULT_MAX_WIDTH = 1920
@@ -22,12 +25,14 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
       children,
       className = '',
       scrimClassName = '',
+      overrideGradient = false,
       dontSplit = false,
+      aspectRatio,
       ...rest
     },
     ref,
   ) {
-    const props = useSanityLoader(image, DEFAULT_MAX_WIDTH, undefined)
+    const props = useSanityLoader(image, DEFAULT_MAX_WIDTH, aspectRatio)
     const src = props?.src
     const isMobile = useMediaQuery(`(max-width: 800px)`)
 
@@ -66,9 +71,12 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
       'bottom-center': 'black-to-top-gradient',
     }
 
-    const animatedScrimGradient = useLight
-      ? `${lightGradientForContentAlignment[contentAlignment]}`
-      : `black-center-gradient ${darkGradientForContentAlignment[contentAlignment]}`
+    let animatedScrimGradient = ''
+    if (!overrideGradient) {
+      animatedScrimGradient = useLight
+        ? `${lightGradientForContentAlignment[contentAlignment]}`
+        : `black-center-gradient ${darkGradientForContentAlignment[contentAlignment]}`
+    }
 
     return useAnimation && !isMobile ? (
       <div
@@ -119,10 +127,10 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
         <div
           className={twMerge(
             `h-full
-          py-40 
-          lg:py-52
-          relative
-          ${animatedScrimGradient}`,
+            py-40
+            lg:py-52
+            relative
+            ${animatedScrimGradient}`,
             scrimClassName,
           )}
         >

web/lib/fetchData.ts

@@ -21,18 +21,14 @@ export const getComponentsData = async (page: { query: string; queryParams: Quer
   return { menuData, pageData, footerData }
 }
 
-type NewsroomQueryParams = {
+export type MagazineQueryParams = {
   lang?: string
-  tags?: string[]
-  countryTags?: string[]
-  years?: string[]
-  index?: number
+  tag?: string | undefined
   lastId?: string
+  lastPublishedAt?: string
 }
-export const getNewsroomData = async (
-  fetchQuery: { query: string; queryParams: NewsroomQueryParams },
-  preview = false,
-) => {
+
+export const getData = async (fetchQuery: { query: string; queryParams: MagazineQueryParams }, preview = false) => {
   const client = getClient(preview)
   try {
     const results = await client.fetch(fetchQuery.query, fetchQuery.queryParams)

web/lib/queries/magazine.ts

@@ -7,6 +7,8 @@ import downloadableImageFields from './common/actions/downloadableImageFields'
 import markDefs from './common/blockEditorMarks'
 import { seoAndSomeFields } from './common/seoAndSomeFields'
 import { sameLang, fixPreviewForDrafts, noDrafts } from './common/langAndDrafts'
+import { publishDateTimeQuery } from './common/publishDateTime'
+import background from './common/background'
 
 const footerComponentFields = /* groq */ `
   title,
@@ -15,7 +17,7 @@ const footerComponentFields = /* groq */ `
     ${markDefs},
   },
   "designOptions": {
-    "background": coalesce(background.title, 'White'),
+    ${background},
     "imagePosition": coalesce(imagePosition, 'left'),
   },
   "image": image{
@@ -29,7 +31,11 @@ const footerComponentFields = /* groq */ `
   },
 `
 
-const promotedmagazineTags = /* groq */ `"": *[_type == "magazineIndex" && ${sameLang} && ${noDrafts}][0] {"magazineTags":promotedMagazineTags[]->title[$lang]}`
+const promotedmagazineTags = /* groq */ `"": *[_type == "magazineIndex" && ${sameLang} && ${noDrafts}][0] {"magazineTags":promotedMagazineTags[]->{
+  "id": _id,
+  "key": key.current,
+  "title":title[$lang],
+}}`
 
 export const magazineQuery = /* groq */ `
 *[_type == "magazine" && slug.current == $slug && ${fixPreviewForDrafts}] {
@@ -40,6 +46,7 @@ export const magazineQuery = /* groq */ `
     "hero": ${heroFields},
     "template": _type,
     ${promotedmagazineTags},
+    "tags": magazineTags[]->title[$lang],
     "content": content[] {
           ${pageContentFields}
       },
@@ -65,8 +72,62 @@ export const magazineIndexQuery = /* groq */ `
       },
       "background": coalesce(ingressBackground.title, 'White'),
     },
-    "magazineTags": promotedMagazineTags[]->title[$lang],
+    "magazineTags": promotedMagazineTags[]->{
+      "id": _id,
+      "key": key.current,
+      "title":title[$lang],
+    },
     "footerComponent": footerComponent{
       ${footerComponentFields}
     }
-  }`
+}`
+
+export const allMagazineDocuments = /* groq */ `
+*[_type == "magazine" && ${sameLang} && ${noDrafts} ] | order(${publishDateTimeQuery} desc){
+    "id": _id,
+    "slug": slug.current,
+    title[]{
+    ...,
+    ${markDefs},
+  },
+  "hero": ${heroFields}
+}`
+
+//&& (${publishDateTimeQuery} < $lastPublishedAt || (${publishDateTimeQuery} == $lastPublishedAt && _id < $lastId))
+const prevDirectionFilter = /* groq */ `
+&& (${publishDateTimeQuery} < $lastPublishedAt || (${publishDateTimeQuery} == $lastPublishedAt && _id < $lastId))
+`
+//&& (${publishDateTimeQuery} > $lastPublishedAt || (${publishDateTimeQuery} == $lastPublishedAt && _id > $lastId))
+const nextDirectionFilter = /* groq */ `
+&& (${publishDateTimeQuery} > $lastPublishedAt || (${publishDateTimeQuery} == $lastPublishedAt && _id > $lastId))
+`
+
+export const getMagazineArticlesByTag = (hasFirstId = false, hasLastId = false) => /* groq */ `
+{
+ "tagsParam": *[_type == 'magazineTag'
+                && !(_id in path('drafts.**'))
+                && key.current == $tag]
+                { _id, "key": key.current },
+}{
+  "articles": *[_type == 'magazine' && ${sameLang} && ${noDrafts}
+    && references(^.tagsParam[]._id)
+  ${hasLastId ? nextDirectionFilter : ''}
+  ${hasFirstId ? prevDirectionFilter : ''}
+  ] | order(${publishDateTimeQuery} desc){
+    "id": _id,
+    "slug": slug.current,
+    title[]{
+      ...,
+      ${markDefs},
+    },
+    "hero": ${heroFields}
+  }
+}.articles
+`
+
+export const allMagazineTags = /* groq */ `
+*[_type == "magazineTag" && ${noDrafts}]{
+"id": _id,
+"key": key.current,
+"title":title[$lang],
+}`