Merge branch 'bose/2547' into staging

equinor · Oct 25, 2024 · e55ef84 · e55ef84
2 parents b48eab4 + c778387
commit e55ef84
Show file tree

Hide file tree

Showing 36 changed files with 781 additions and 388 deletions.
diff --git a/sanityv3/schemas/HeroTypes.ts b/sanityv3/schemas/HeroTypes.ts
@@ -3,4 +3,5 @@ export enum HeroTypes {
   FIFTY_FIFTY = 'fiftyFifty',
   FULL_WIDTH_IMAGE = 'fullWidthImage',
   LOOPING_VIDEO = 'loopingVideo',
+  BACKGROUND_IMAGE = 'backgroundImage',
 }
diff --git a/sanityv3/schemas/documents/magazineIndexPage.ts b/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',

diff --git a/sanityv3/schemas/textSnippets.ts b/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',
@@ -912,6 +912,11 @@ const snippets: textSnippet = {
     defaultValue: 'Switch to',
     group: groups.others,
   },
+  filter: {
+    title: 'Filter',
+    defaultValue: 'Filter',
+    group: groups.others,
+  },
   next: {
     title: 'Next',
     defaultValue: 'Next',

diff --git a/web/common/helpers/scrollToTop.ts b/web/common/helpers/scrollToTop.ts
@@ -0,0 +1,3 @@
+export const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/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,
           )}
         >

diff --git a/web/core/SimplePagination/SimplePagination.tsx b/web/core/SimplePagination/SimplePagination.tsx
@@ -2,8 +2,8 @@ import envisTwMerge from '../../twMerge'
 import { useIntl } from 'react-intl'
 import { MediaButton } from '@core/MediaButton/MediaButton'
 import { useContext } from 'react'
-import { PaginationContext } from '../../common/contexts/PaginationContext'
 import { usePrefersReducedMotion } from '../../common/hooks/usePrefersReducedMotion'
+import { PaginationContext } from '../../common/contexts/PaginationContext'
 
 export type SimplePaginationProps = {
   className?: string

diff --git a/web/lib/fetchData.ts b/web/lib/fetchData.ts
@@ -21,6 +21,30 @@ export const getComponentsData = async (page: { query: string; queryParams: Quer
   return { menuData, pageData, footerData }
 }
 
+export type MagazineQueryParams = {
+  lang?: string
+  tag?: string | undefined
+  lastId?: string
+  lastPublishedAt?: string
+}
+
+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)
+    return {
+      isSuccess: true,
+      data: results,
+    }
+  } catch (error) {
+    console.log('Error when fetching from Sanity', error)
+    return {
+      isError: true,
+      data: [],
+    }
+  }
+}
+
 type NewsroomQueryParams = {
   lang?: string
   tags?: string[]

diff --git a/web/lib/queries/magazine.ts b/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],
+}`