✨ Sticky Menu Component (#2740)

* ✨ Sticky Menu Component

* 💄 Remove additional classes #2736

* Miised commit

* ♻️ Add validations and exclude colors #2736

* ♻️ Changes after review #2736

* 💄 Fix bg in tw #2736

* ♻️ Fix after comments #2736

* 🐛 Handle error #2736

* 🐛 After 2 nd review #2736

* 💄 Use tailwind #2736

sanityv3/schemas/documents/page.ts

@@ -6,6 +6,7 @@ import sharedHeroFields from './header/sharedHeaderFields'
 import { EdsIcon } from '../../icons'
 import { paste } from '@equinor/eds-icons'
 import { lang } from './langField'
+import { description } from '../objects/iframe/sharedIframeFields'
 
 export default {
   type: 'document',
@@ -26,6 +27,14 @@ export default {
         collapsed: true,
       },
     },
+    {
+      title: 'Sticky Menu',
+      name: 'stickymenu',
+      options: {
+        collapsible: true,
+        collaped: true,
+      },
+    },
   ],
   fields: [
     lang,
@@ -42,6 +51,12 @@ export default {
       description: 'You can override the hero image as the SoMe image by uploading another image here.',
       fieldset: 'metadata',
     },
+    {
+      name: 'stickyMenu',
+      title: 'Sticky Menu',
+      type: 'stickyMenu',
+      fieldset: 'stickymenu',
+    },
     ...sharedHeroFields,
     {
       title: 'Is Campain',

sanityv3/schemas/index.ts

@@ -82,6 +82,7 @@ import transcript from './objects/transcript'
 import anchorLinkList from './objects/anchorLinkList/anchorLinkList'
 import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference'
 import imageForText from './objects/imageForText'
+import stickyMenu from './objects/stickyMenu'
 
 const {
   pageNotFound,
@@ -210,6 +211,7 @@ const RemainingSchemas = [
   anchorLinkList,
   anchorLinkReference,
   imageForText,
+  stickyMenu,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

sanityv3/schemas/objects/stickyMenu.tsx

@@ -0,0 +1,47 @@
+import { Rule } from 'sanity'
+import { defaultColors } from '../defaultColors'
+import { description } from './iframe/sharedIframeFields'
+
+const chosenColors = ['White', 'Moss Green Light']
+const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
+
+export default {
+  name: 'stickyMenu',
+  title: 'Sticky Menu',
+  type: 'object',
+  fields: [
+    {
+      title: 'Title',
+      name: 'title',
+      type: 'string',
+    },
+    {
+      title: 'Links',
+      name: 'links',
+      type: 'array',
+      of: [
+        {
+          type: 'anchorLinkReference',
+          title: 'Anchor reference',
+        },
+        { type: 'downloadableFile', title: 'Downloadable file' },
+      ],
+      validation: (Rule: Rule) =>
+        Rule.unique()
+          .max(2)
+          .custom((value: any) => {
+            if (value?.length == 2 && value[0]._type == value[1]._type) return 'Cannot have two links of same type'
+            return true
+          }),
+    },
+    {
+      title: 'Color',
+      description: 'Default is white.',
+      name: 'backgroundColor',
+      type: 'colorlist',
+      options: {
+        colors: backgroundColors,
+      },
+    },
+  ],
+}

web/core/Link/LogoLink.tsx

@@ -1,18 +1,22 @@
 import { AnchorHTMLAttributes } from 'react'
 import { LogoSecondary } from '@components'
 import NextLink from 'next/link'
+import { twMerge } from 'tailwind-merge'
 import { useIntl } from 'react-intl'
 
 export type LogoLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
 
-export const LogoLink = ({ ...rest }: LogoLinkProps) => {
+export const LogoLink = ({ className, ...rest }: LogoLinkProps) => {
   const intl = useIntl()
   return (
     <NextLink
       href="/"
       aria-label={intl.formatMessage({ id: 'logolink_title', defaultMessage: 'Equinor homepage' })}
       {...rest}
-      className="fill-energy-red-100 dark:fill-white-100 flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert"
+      className={twMerge(
+        'fill-energy-red-100 dark:fill-white-100 flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert',
+        className,
+      )}
       prefetch={false}
     >
       <LogoSecondary className="-mt-[12%]" />

web/core/Link/StickyMenuLink.tsx

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { BaseLink, BaseLinkProps } from './BaseLink'
+import { TransformableIcon } from '../../icons/TransformableIcon'
+import { arrow_down, library_pdf } from '@equinor/eds-icons'
+
+export type StickMenuLinkProps = {
+  isDownloadable?: boolean
+} & BaseLinkProps
+
+/** Sticky menu link style */
+export const StickyMenuLink = forwardRef<HTMLAnchorElement, StickMenuLinkProps>(function StickyMenuLink(
+  { children, type = 'internalUrl', className = '', href = '', isDownloadable = false, ...rest },
+  ref,
+) {
+  const classNames = twMerge(
+    `
+    group
+    inline-flex
+    align-baseline
+    w-fit
+    text-slate-80
+    leading-0
+  `,
+    className,
+  )
+  const contentClassNames = `
+  relative
+  w-fit
+  hover:underline
+  no-underline
+  `
+
+  return (
+    <BaseLink className={classNames} ref={ref} href={href} {...rest}>
+      {isDownloadable && <TransformableIcon iconData={library_pdf} className="mr-1" />}
+      <div className={contentClassNames}>{children}</div>
+      {isDownloadable && (
+        <TransformableIcon
+          iconData={arrow_down}
+          className="text-energy-red-100
+    dark:text-white-100 h-[22px] border-energy-red-100 border-b-2 ml-4"
+        />
+      )}
+      {!isDownloadable && (
+        <TransformableIcon
+          iconData={arrow_down}
+          className="text-energy-red-100
+    dark:text-white-100
+    ml-4"
+        />
+      )}
+    </BaseLink>
+  )
+})
+export default StickyMenuLink

web/core/Link/index.ts

@@ -2,4 +2,5 @@ export { default as Link, type LinkProps } from './Link'
 export { default as ResourceLink, type ResourceLinkProps } from './ResourceLink'
 export { default as ButtonLink, type ButtonLinkProps } from './ButtonLink'
 export { default as BaseLink, type BaseLinkProps } from './BaseLink'
+export { default as StickyMenuLink, type StickMenuLinkProps } from './StickyMenuLink'
 export { default as LogoLink, type LogoLinkProps } from './LogoLink'

web/lib/queries/common/anchorLinkReferenceFields.ts

@@ -0,0 +1,7 @@
+export const anchorLinkReferenceFields = /* groq */ `
+ _type == "anchorLinkReference" =>{
+      "type": _type,
+      "id": _key,
+      title,
+      anchorReference,
+    }`

web/lib/queries/common/pageContentFields.ts

@@ -14,6 +14,7 @@ import { keyNumbersFields } from './keyNumbersFields'
 import { noDrafts, sameLang } from './langAndDrafts'
 import promoteMagazine from './promotions/promoteMagazine'
 import { lastUpdatedTimeQuery, publishDateTimeQuery } from './publishDateTime'
+import { anchorLinkReferenceFields } from './anchorLinkReferenceFields'
 
 const pageContentFields = /* groq */ `
 _type == "keyNumbers" =>{
@@ -593,10 +594,7 @@ _type == "keyNumbers" =>{
     title,
     columns,
     "anchorList":anchorList[]{
-      "type": _type,
-      "id": _key,
-      title,
-      anchorReference,
+     ${anchorLinkReferenceFields}
     }
   },
   _type == "imageForText" => {

web/lib/queries/common/stickyMenu.ts

@@ -0,0 +1,14 @@
+import downloadableFileFields from './actions/downloadableFileFields'
+import { anchorLinkReferenceFields } from './anchorLinkReferenceFields'
+
+export const stickyMenu = /* groq */ `"stickyMenu": 
+content->stickyMenu{
+ title,
+"type": _type,
+"links": links[]{
+   ${downloadableFileFields},
+  ${anchorLinkReferenceFields}
+},
+"background": coalesce(backgroundColor.key, 'white-100'),
+}
+`

web/lib/queries/routes.ts

@@ -4,6 +4,7 @@ import { eventContentFields } from './common/eventContentFields'
 import { heroFields } from './common/heroFields'
 import { seoAndSomeFields } from './common/seoAndSomeFields'
 import { breadcrumbsQuery } from './common/breadcrumbs'
+import { stickyMenu } from './common/stickyMenu'
 
 const allSlugsQuery = /* groq */ `
     "currentSlug": {
@@ -22,6 +23,7 @@ export const routeQuery = /* groq */ `
     ${allSlugsQuery},
     "title": content->title,
     "seoAndSome": content->${seoAndSomeFields},
+    ${stickyMenu},
     "hero": content->${heroFields},
     "template": content->_type,
     content->_type == "page" => {