Sticky textblock #2581

sanityv3/schemas/documents/page.ts

@@ -82,6 +82,7 @@ export default {
         Flags.HAS_TWITTER_FEED && { type: 'twitterEmbed' },
         { type: 'cookieDeclaration' },
         { type: 'anchorLinkList' },
+        { type: 'stickyTextBlocks' },
       ].filter((e) => e),
     },
   ].filter((e) => e),

sanityv3/schemas/index.ts

@@ -81,6 +81,7 @@ import gridColorTheme from './objects/grid/theme'
 import transcript from './objects/transcript'
 import anchorLinkList from './objects/anchorLinkList/anchorLinkList'
 import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference'
+import stickyTextBlocks from './objects/stickyTextBlocks'
 
 const {
   pageNotFound,
@@ -208,6 +209,7 @@ const RemainingSchemas = [
   transcript,
   anchorLinkList,
   anchorLinkReference,
+  stickyTextBlocks,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

sanityv3/schemas/objects/stickyTextBlocks.tsx

@@ -0,0 +1,71 @@
+import { view_module } from '@equinor/eds-icons'
+import { EdsIcon } from '../../icons'
+import { SchemaType } from '../../types'
+import { configureBlockContent } from '../editors'
+
+const blockContentType = configureBlockContent({
+  h2: false,
+  h3: true,
+  h4: true,
+  attachment: false,
+})
+
+export default {
+  type: 'object',
+  name: 'stickyTextBlocks',
+  title: 'Sticky text blocks',
+  fieldsets: [
+    {
+      name: 'design',
+      title: 'Design options',
+    },
+  ],
+  fields: [
+    {
+      type: 'array',
+      name: 'blockGroup',
+      title: 'List of text block',
+      of: [
+        {
+          name: 'textBlock',
+          title: 'Text block',
+          type: 'object',
+          fields: [
+            {
+              name: 'title',
+              title: 'Title heading',
+              type: 'string',
+              description: 'Heading that will stay sticky until side content is scrolled by',
+            },
+            {
+              name: 'content',
+              title: 'Text content',
+              type: 'array',
+              of: [blockContentType],
+            },
+          ],
+        },
+      ],
+      validation: (Rule: SchemaType.ValidationRule) => Rule.required(),
+    },
+    {
+      title: 'Background',
+      description: 'Pick a colour for the background. Default is white.',
+      name: 'background',
+      type: 'colorlist',
+      fieldset: 'design',
+    },
+  ],
+  preview: {
+    select: {
+      group: 'blockGroup',
+    },
+    prepare({ group }: any) {
+      return {
+        title: 'Sticky textblocks',
+        subtitle: `${group ? group.length : 0} textblocks`,
+        media: <div>{EdsIcon(view_module)}</div>,
+      }
+    },
+  },
+}

web/lib/queries/common/pageContentFields.ts

@@ -590,6 +590,22 @@ _type == "keyNumbers" =>{
       anchorReference,
     }
   },
+  _type == "stickyTextBlocks"=>{
+    "type": _type,
+    "id": _key,
+    "group": blockGroup[]{
+      "id": _key,
+      title,
+      content[]{
+        ...,
+        ${markDefs},
+      }
+    },
+
+    "designOptions": {
+      ${background},
+    },
+  },
 `
 
 export default pageContentFields

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -53,6 +53,7 @@ import {
   CampaignBannerData,
   DesignOptions,
   AnchorLinkListData,
+  StickyTextBlocksData,
 } from '../../../types/index'
 import { getColorForTheme } from '../../shared/textTeaser/theme'
 import Grid from '@sections/Grid/Grid'
@@ -61,6 +62,7 @@ import { BackgroundContainerProps } from '@components/Backgrounds'
 import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel'
 import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
 import { AnchorLinkList } from '@sections/AnchorLinkList'
+import { StickyTextBlocks } from '@sections/StickyTextBlocks'
 
 type DefaultComponent = {
   id?: string
@@ -350,6 +352,15 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => {
             className={topSpacingClassName}
           />
         )
+      case 'stickyTextBlocks':
+        return (
+          <StickyTextBlocks
+            key={c.id}
+            data={c as StickyTextBlocksData}
+            anchor={anchorReference}
+            className={topSpacingClassName}
+          />
+        )
       default:
         return null
     }

web/sections/StickyTextBlocks/StickyTextBlocks.tsx

@@ -0,0 +1,39 @@
+import { BackgroundContainer } from '@components/Backgrounds'
+import { Typography } from '@core/Typography'
+import Blocks from '../../pageComponents/shared/portableText/Blocks'
+import { twMerge } from 'tailwind-merge'
+import { PortableTextBlock } from '@portabletext/types'
+import { StickyTextBlocksData } from '../../types/types'
+
+export type StickyTextBlocksProps = {
+  data: StickyTextBlocksData
+  anchor?: string
+  className?: string
+}
+const StickyTextBlocks = ({ data, anchor, className }: StickyTextBlocksProps) => {
+  const { group, designOptions } = data
+  return (
+    <BackgroundContainer {...designOptions} className={twMerge(`pb-page-content px-layout-sm`, className)} id={anchor}>
+      {group?.length > 0 &&
+        group?.map((textBlock: { id: string; title?: string; content: PortableTextBlock[] }) => {
+          return (
+            <section
+              key={textBlock?.id}
+              className="lg:grid lg:grid-cols-[30%_70%] gap-24 py-12 border-y-2 border-energy-red-100"
+            >
+              {textBlock?.title && (
+                <Typography variant="h2" className="h-max lg:sticky top-32 text-pretty">
+                  {textBlock.title}
+                </Typography>
+              )}
+              <div className="max-w-text">
+                {textBlock?.content && <Blocks value={textBlock.content} className="flex flex-col" />}
+              </div>
+            </section>
+          )
+        })}
+    </BackgroundContainer>
+  )
+}
+
+export default StickyTextBlocks

web/sections/StickyTextBlocks/index.ts

@@ -0,0 +1,2 @@
+//"use client";
+export { default as StickyTextBlocks, type StickyTextBlocksProps } from './StickyTextBlocks'

web/types/types.ts

@@ -465,3 +465,13 @@ export type AnchorLinkListData = {
     anchorReference?: string
   }[]
 }
+export type StickyTextBlocksData = {
+  type: string
+  id: string
+  group: {
+    id: string
+    title?: string
+    content: PortableTextBlock[]
+  }[]
+  designOptions: DesignOptions
+}