Merge branch 'padms/2736' into staging

equinor · Jan 22, 2025 · 6c84287 · 6c84287
2 parents 90c923c + a67eee3
commit 6c84287
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 9 deletions.
diff --git a/sanityv3/schemas/documents/page.ts b/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,
@@ -46,6 +55,7 @@ export default {
       name: 'stickyMenu',
       title: 'Sticky Menu',
       type: 'stickyMenu',
+      fieldset: 'stickymenu',
     },
     ...sharedHeroFields,
     {

diff --git a/sanityv3/schemas/objects/stickyMenu.tsx b/sanityv3/schemas/objects/stickyMenu.tsx
@@ -30,7 +30,7 @@ export default {
         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'
+            if (value?.length == 2 && value[0]._type == value[1]._type) return 'Cannot have two links of same type'
             return true
           }),
     },

diff --git a/web/core/Link/StickyMenuLink.tsx b/web/core/Link/StickyMenuLink.tsx
@@ -34,21 +34,20 @@ export const StickyMenuLink = forwardRef<HTMLAnchorElement, StickMenuLinkProps>(
   return (
     <BaseLink className={classNames} ref={ref} href={href} {...rest}>
       {isDownloadable && <TransformableIcon iconData={library_pdf} className="mr-1" />}
-      <span className={contentClassNames}>{children}</span>
+      <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-[2px]
-    ml-2"
+    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-2"
+    ml-4"
         />
       )}
     </BaseLink>

diff --git a/web/lib/queries/common/stickyMenu.ts b/web/lib/queries/common/stickyMenu.ts
@@ -8,6 +8,7 @@ content->stickyMenu{
 "links": links[]{
    ${downloadableFileFields},
   ${anchorLinkReferenceFields}
-}
+},
+"background": coalesce(backgroundColor.key, 'white-100'),
 }
 `
diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
@@ -16,6 +16,7 @@ import { getAllSitesLink } from '../../common/helpers/getAllSitesLink'
 import { Icon } from '@equinor/eds-core-react'
 import { ButtonLink, LogoLink, StickyMenuLink } from '@core/Link'
 import SiteMenu from '@sections/SiteMenu/SiteMenu'
+import { ColorKeyTokens, colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap'
 
 const TopbarOffset = createGlobalStyle`
   body {
@@ -109,6 +110,9 @@ const Header = ({ slugs, menuData, stickyMenuData }: HeaderProps) => {
   const anchorReference = stickyMenuData?.links.find((it) => it.type == 'anchorLinkReference')
   const resourceLink = stickyMenuData?.links.find((it) => it.type == 'downloadableFile')
 
+  const stickyMenuKey = (stickyMenuData?.background as keyof ColorKeyTokens) || ('white-100' as keyof ColorKeyTokens)
+  const twBg = colorKeyToUtilityMap[stickyMenuKey]?.background
+
   return (
     <div className="sticky top-0 z-10">
       <HeadTags slugs={slugs} />
@@ -154,14 +158,15 @@ const Header = ({ slugs, menuData, stickyMenuData }: HeaderProps) => {
           </Topbar.InnerContainer>
         </Topbar>
         {stickyMenuData && (
-          <div className="w-full items-center bg-moss-green-50 p-4 grid grid-cols-2 lg:grid-cols-5 gap-2 lg:px-16 lg:gap-16 shadow-top-bar z-40">
-            <div className="text-center font-bold lg:col-span-3 text-md col-span-2"> {stickyMenuData?.title}</div>
+          <div
+            className={`hidden lg:grid w-full items-center ${twBg} p-4 grid-cols-2 lg:grid-cols-5 gap-2 lg:px-16 lg:gap-16 shadow-top-bar z-40`}
+          >
+            <div className="text-center font-medium lg:col-span-3 text-md col-span-2"> {stickyMenuData?.title}</div>
             <StickyMenuLink className="mr-4 place-self-end self-center" href={`#${anchorReference?.anchorReference}`}>
               {anchorReference?.title}
             </StickyMenuLink>
             {resourceLink && (
               <StickyMenuLink href={resourceLink.href} isDownloadable>
-                {' '}
                 {resourceLink.label}
               </StickyMenuLink>
             )}

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -489,4 +489,5 @@ export type StickyMenuData = {
   type: 'stickyMenu'
   title: string
   links: StickyMenuLinkType[]
+  background: string
 }