✨ Inpage links v2 #2237 (#2479)

* 🎨 add all components

* 🎨 fix build

* 🎨 forgot to add to schemas

* 🎨 forgot one more

sanityv3/schemas/documents/page.ts

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

sanityv3/schemas/index.ts

@@ -79,6 +79,8 @@ import gridTeaser from './objects/grid/cellTypes/gridTeaser'
 import threeColumns from './objects/grid/rowTypes/3columns'
 import gridColorTheme from './objects/grid/theme'
 import transcript from './objects/transcript'
+import anchorLinkList from './objects/anchorLinkList/anchorLinkList'
+import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference'
 
 const {
   pageNotFound,
@@ -204,6 +206,8 @@ const RemainingSchemas = [
   threeColumns,
   gridColorTheme,
   transcript,
+  anchorLinkList,
+  anchorLinkReference,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

sanityv3/schemas/objects/anchorLinkList/anchorLinkList.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { format_line_spacing } from '@equinor/eds-icons'
+import { EdsIcon } from '../../../icons'
+
+export type AnchorLinkList = {
+  _type: 'anchorLinkList'
+}
+
+export default {
+  title: 'List of anchor links',
+  name: 'anchorLinkList',
+  type: 'object',
+
+  fields: [
+    {
+      name: 'title',
+      type: 'string',
+    },
+    {
+      name: 'columns',
+      type: 'string',
+      description: 'Manually set number of columns. Defaults to even flow with set space between',
+      options: {
+        list: [
+          { title: 'Even flow', value: 'flex' },
+          { title: '3', value: '3' },
+          { title: '4', value: '4' },
+          { title: '5', value: '5' },
+          { title: '6', value: '6' },
+        ],
+      },
+      initalValue: 'flex',
+    },
+    {
+      title: 'List of anchors',
+      name: 'anchorList',
+      type: 'array',
+      of: [{ type: 'anchorLinkReference' }],
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({ title }: { title: string }) {
+      return {
+        title: title,
+        subtitle: `List of anchor links component`,
+        media: EdsIcon(format_line_spacing),
+      }
+    },
+  },
+}

sanityv3/schemas/objects/anchorLinkList/anchorLinkReference.tsx

@@ -0,0 +1,39 @@
+import { anchor } from '@equinor/eds-icons'
+import { EdsIcon } from '../../../icons'
+import { AnchorLinkDescription } from '../anchorReferenceField'
+
+export type AnchorLinkReference = {
+  _type: 'anchorLinkReference'
+}
+
+export default {
+  title: 'Anchor Link Reference',
+  name: 'anchorLinkReference',
+  type: 'object',
+
+  fields: [
+    {
+      name: 'title',
+      description: 'Visible title for the anchor link in the list of anchors',
+      type: 'string',
+    },
+    {
+      name: 'anchorReference',
+      title: 'Anchor reference',
+      type: 'anchorReferenceField',
+      description: AnchorLinkDescription(),
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({ title }: { title: string }) {
+      return {
+        title: title,
+        subtitle: `Anchor Link Reference component`,
+        media: EdsIcon(anchor),
+      }
+    },
+  },
+}

web/lib/queries/common/pageContentFields.ts

@@ -578,6 +578,18 @@ _type == "keyNumbers" =>{
       }
     },
   },
+  _type == "anchorLinkList" => {
+    "type": _type,
+    "id": _key,
+    title,
+    columns,
+    "anchorList":anchorList[]{
+      "type": _type,
+      "id": _key,
+      title,
+      anchorReference,
+    }
+  },
 `
 
 export default pageContentFields

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -52,13 +52,15 @@ import {
   GridData,
   CampaignBannerData,
   DesignOptions,
+  AnchorLinkListData,
 } from '../../../types/types'
 import { getColorForTheme } from '../../shared/textTeaser/theme'
 import Grid from '@sections/Grid/Grid'
 import { CampaignBanner } from '@sections/CampaignBanner'
 import { BackgroundContainerProps } from '@components/Backgrounds'
 import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel'
 import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
+import { AnchorLinkList } from '@sections/AnchorLinkList'
 
 type DefaultComponent = {
   id?: string
@@ -339,6 +341,15 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => {
         return <Grid key={c.id} data={c as GridData} anchor={anchorReference} className={topSpacingClassName} />
       case 'campaignBanner':
         return <CampaignBanner key={c.id} data={c as CampaignBannerData} />
+      case 'anchorLinkList':
+        return (
+          <AnchorLinkList
+            key={c.id}
+            data={c as AnchorLinkListData}
+            anchor={anchorReference}
+            className={topSpacingClassName}
+          />
+        )
       default:
         return null
     }

web/sections/AnchorLinkList/AnchorLinkList.tsx

@@ -0,0 +1,65 @@
+import { twMerge } from 'tailwind-merge'
+import { HTMLAttributes, forwardRef } from 'react'
+import { AnchorLinkListData } from '../../types'
+import { Typography } from '../../core/Typography'
+import { ButtonLink } from '../../core/Link'
+
+export type AnchorLinkListProps = {
+  data: AnchorLinkListData
+  anchor?: string
+  className?: string
+} & HTMLAttributes<HTMLElement>
+
+const AnchorLinkList = forwardRef<HTMLElement, AnchorLinkListProps>(function AnchorLinkList(
+  { data, anchor, className = '', ...rest },
+  ref,
+) {
+  const { title, anchorList = [], columns } = data
+
+  const getFlow = () => {
+    const commonGridStyling = 'grid auto-fill-fr lg:place-items-start'
+    switch (columns) {
+      case '3':
+        return `${commonGridStyling} lg:grid-cols-3`
+      case '4':
+        return `${commonGridStyling} lg:grid-cols-4`
+      case '5':
+        return `${commonGridStyling} lg:grid-cols-5`
+      case '6':
+        return `${commonGridStyling} lg:grid-cols-6`
+      default:
+      case 'flex':
+        return 'grid auto-fill-fr justify-start'
+    }
+  }
+  return (
+    <section
+      ref={ref}
+      className={twMerge(`px-layout-md pb-page-content max-w-viewport mx-auto flex flex-col items-center`, className)}
+      id={anchor}
+      {...rest}
+    >
+      <div className="w-full border-y border-moss-green-50 py-6">
+        {title && (
+          <Typography variant="h5" as="h2" className="pb-4 text-center">
+            {title}
+          </Typography>
+        )}
+        <ul className={`w-full ${getFlow()} gap-x-4 gap-y-2 lg:gap-y-4 lg:gap-x-6`}>
+          {anchorList?.map((anchorLink: { id: string; title?: string; anchorReference?: string }) => {
+            const anchor = anchorLink?.anchorReference ? `#${anchorLink?.anchorReference}` : ''
+            return (
+              <li key={`anchor_link_${anchorLink?.id}`} className="w-full flex justify-center">
+                <ButtonLink variant="ghost" href={anchor} className="w-max text-moss-green-100">
+                  {anchorLink?.title}
+                </ButtonLink>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+})
+
+export default AnchorLinkList

web/sections/AnchorLinkList/index.ts

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

web/tailwind.config.cjs

@@ -335,6 +335,9 @@ module.exports = {
         move: 'auto linear move forwards',
         'spin-slow': 'spin 3s linear infinite',
       },
+      flex: {
+        fr: '1 1 1',
+      },
       typography: (theme) => ({
         DEFAULT: {
           css: [
@@ -458,7 +461,7 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    plugin(function ({ addVariant, matchVariant, addUtilities, theme, config, e }) {
+    plugin(function ({ addVariant, matchVariant, addUtilities, theme }) {
       matchVariant(
         'nth',
         (value) => {
@@ -488,6 +491,9 @@ module.exports = {
           '.break-word': {
             wordBreak: 'break-word',
           },
+          '.auto-fill-fr': {
+            gridTemplateColumns: `repeat(auto-fill, minmax(80px,1fr))`,
+          },
         })
     }),
   ],

web/types/types.ts

@@ -914,3 +914,15 @@ export type GridTeaserData = {
   action?: LinkData
   theme?: number
 }
+export type AnchorLinkListData = {
+  id: string
+  type: 'anchorLinkList'
+  title?: string
+  columns?: string
+  anchorList?: {
+    id: string
+    type: 'anchorLinkReference'
+    title?: string
+    anchorReference?: string
+  }[]
+}