🎨 cleanup

equinor · Dec 12, 2024 · f85f5bd · f85f5bd
1 parent 2a5485e
commit f85f5bd
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 271 deletions.
diff --git a/web/core/Accordion/Accordion.tsx b/web/core/Accordion/Accordion.tsx
@@ -9,7 +9,7 @@ export interface AccordionMultipleProps extends _Accordion.AccordionMultipleProp
   type: 'multiple'
 }
 
-export type Variants = 'primary' | 'menu'
+export type Variants = 'primary' | 'menu' | 'simple_menu'
 
 /**
  * Accordion

diff --git a/web/core/Accordion/Content.tsx b/web/core/Accordion/Content.tsx
@@ -24,11 +24,13 @@ export const Content = forwardRef<HTMLDivElement, AccordionContentProps>(functio
 
   const variantClassName: Partial<Record<Variants, string>> = {
     primary: `${commonSlideUpDown}`,
-    menu: `
-    max-lg:overflow-hidden
+    menu: `max-lg:overflow-hidden
     max-lg:motion-safe:data-closed:animate-slideDown
     max-lg:motion-safe:data-open:animate-slideUp
     `,
+    simple_menu: `max-lg:overflow-hidden
+    max-lg:motion-safe:data-closed:animate-slideDown
+    max-lg:motion-safe:data-open:animate-slideUp`,
   }
 
   /**
@@ -63,6 +65,8 @@ export const Content = forwardRef<HTMLDivElement, AccordionContentProps>(functio
             {children}
           </motion.div>
         )
+      case 'simple_menu':
+        return <div className="pl-4 py-6 xl:py-10">{children}</div>
 
       default:
         return (

diff --git a/web/core/Accordion/Header.tsx b/web/core/Accordion/Header.tsx
@@ -33,6 +33,7 @@ export const Header = forwardRef<HTMLButtonElement, AccordionHeaderProps>(functi
   const headerVariantClassName: Partial<Record<Variants, string>> = {
     primary: '',
     menu: '',
+    simple_menu: '',
   }
   const variantClassName: Partial<Record<Variants, string>> = {
     primary: ` 
@@ -44,28 +45,38 @@ export const Header = forwardRef<HTMLButtonElement, AccordionHeaderProps>(functi
     menu: `
     py-3
     px-2
-    xl:px-6
-    xl:my-4
     items-center
     text-base
-    xl:text-sm
     aria-current:bg-grey-10
     border-b
     border-grey-20
+    aria-current:border-moss-green-95
+    font-normal 
+    data-open:font-bold
+    leading-none
+    xl:px-6
+    xl:my-4
+    xl:text-sm
     xl:border-t-0
     xl:border-transparent
     xl:border-b-2
     data-open:xl:border-moss-green-95
+    data-open:xl:font-normal`,
+    simple_menu: `py-3
+    px-2
+    items-center
+    text-base
+    aria-current:bg-grey-10
     aria-current:border-moss-green-95
     font-normal 
-    data-open:font-bold 
-    data-open:xl:font-normal
+    data-open:font-bold
     leading-none`,
   }
 
   const textVariantClassName: Partial<Record<Variants, string>> = {
     primary: 'text-base',
     menu: 'text-base xl:text-sm',
+    simple_menu: 'text-base xl:text-sm',
   }
 
   return (

diff --git a/web/core/Accordion/Item.tsx b/web/core/Accordion/Item.tsx
@@ -14,6 +14,7 @@ export const Item = forwardRef<HTMLDivElement, AccordionItemProps>(function Item
   const variantClassName: Partial<Record<Variants, string>> = {
     primary: 'border-b border-grey-40 dark:border-white-100',
     menu: '',
+    simple_menu: 'border-b border-grey-40 dark:border-white-100',
   }
   return (
     <AccordionItem ref={forwardedRef} {...rest} className={envisTwMerge(`${variantClassName[variant]}`, className)}>

diff --git a/web/core/MenuAccordion/MenuContent.tsx b/web/core/MenuAccordion/MenuContent.tsx
@@ -11,7 +11,12 @@ export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function
   ref,
 ) {
   return (
-    <Accordion.Content variant={variant === 'simple' ? 'primary' : 'menu'} ref={ref} className={className} {...rest}>
+    <Accordion.Content
+      variant={variant === 'simple' ? 'simple_menu' : 'menu'}
+      ref={ref}
+      className={className}
+      {...rest}
+    >
       {children}
     </Accordion.Content>
   )

diff --git a/web/core/MenuAccordion/MenuHeader.tsx b/web/core/MenuAccordion/MenuHeader.tsx
@@ -17,7 +17,11 @@ export const MenuHeader = forwardRef<HTMLButtonElement, MenuHeaderProps>(functio
   }
 
   return (
-    <Accordion.Header ref={ref} variant="menu" className={envisTwMerge(`${variantClassName[variant]}`, className)}>
+    <Accordion.Header
+      ref={ref}
+      variant={variant === 'simple' ? 'simple_menu' : 'menu'}
+      className={envisTwMerge(`${variantClassName[variant]}`, className)}
+    >
       {children}
     </Accordion.Header>
   )

diff --git a/web/core/MenuAccordion/MenuItem.tsx b/web/core/MenuAccordion/MenuItem.tsx
@@ -1,12 +1,14 @@
 import { Accordion, AccordionItemProps } from '@core/Accordion'
+import { Variants } from './MenuAccordion'
 
 export type MenuItemProps = {
   children: React.ReactNode
-} & AccordionItemProps
+  variant?: Variants
+} & Omit<AccordionItemProps, 'variant'>
 
-export const MenuItem = ({ children, ...rest }: MenuItemProps) => {
+export const MenuItem = ({ children, variant = 'default', ...rest }: MenuItemProps) => {
   return (
-    <Accordion.Item variant="menu" asChild {...rest}>
+    <Accordion.Item variant={variant === 'simple' ? 'simple_menu' : 'menu'} asChild {...rest}>
       <li>{children}</li>
     </Accordion.Item>
   )

diff --git a/web/sections/SiteMenu/SimpleMenuItem.tsx b/web/sections/SiteMenu/SimpleMenuItem.tsx
@@ -1,12 +1,8 @@
-import { Link, ReadMoreLink } from '@core/Link'
+import { Link, ResourceLink } from '@core/Link'
 import type { SimpleGroupData } from '../../types/index'
 import { Menu } from '@core/MenuAccordion'
-
-/* const SimpleSubMenu = styled(SubMenu)`
-  @media (min-width: 1300px) {
-    border-bottom: 0.5px solid var(--grey-40);
-  }
-` */
+import { useRouter } from 'next/router'
+import { useId } from 'react'
 
 const { MenuItem, MenuHeader, MenuContent } = Menu
 
@@ -17,35 +13,86 @@ type MenuGroupType = {
 
 export const SimpleMenuItem = ({ item, index }: MenuGroupType) => {
   const { type, label, links = [], readMoreLink } = item
+  const router = useRouter()
+  const id = useId()
 
   if (item?.type === 'simpleMenuLink' && item.link && !item.link.slug) {
     console.warn('Missing slug for simple menu link')
   }
+
   return (
-    <MenuItem value={`${index}`}>
-      {label && <MenuHeader>{label}</MenuHeader>}
-      <MenuContent className="md:max-w-screen-3xl mx-0 my-auto">
-        {type === 'simpleMenuLink' ? (
-          <>
-            <Link
-              className="list-none no-underline w-full mt-2 mx-0 mr-0 hover:bg-grey-10 py-xs+sm"
-              href={(item.link && item.link.slug) || '/'}
-            >
-              {item.label}
-            </Link>
-          </>
-        ) : (
-          <div className="pb-6">
-            <div className="max-w-menuText xl:pr-lg pb-sm">
-              {!!readMoreLink?.link?.slug && (
-                <ReadMoreLink href={readMoreLink.link?.slug}>{readMoreLink.label}</ReadMoreLink>
-              )}
-            </div>
-            <ul aria-label={label} className="flex flex-col flex-wrap">
-              {links?.map((link: any) => (
-                <li className="m-0" key={link.id}>
-                  <Link
-                    className={`flex 
+    <>
+      {type === 'simpleMenuLink' ? (
+        <>
+          <Link
+            {...(item?.link &&
+              item.link.slug === router.asPath && {
+                'aria-current': 'page',
+              })}
+            className={`w-full
+              border-b
+              border-grey-40
+              aria-current:bg-grey-10
+              aria-current:px-2
+              aria-current:-ml-2
+              aria-current:font-semibold
+              aria-current:border-l-[3px]
+              aria-current:border-moss-green-95
+              py-4
+              hover:underline 
+              underline-offset-2
+              text-sm
+              no-underline`}
+            href={(item.link && item.link.slug) || '/'}
+          >
+            {item.label}
+          </Link>
+        </>
+      ) : (
+        <>
+          <MenuItem value={`${index}`} variant="simple">
+            {label && (
+              <MenuHeader id={id} variant="simple">
+                {label}
+              </MenuHeader>
+            )}
+            <MenuContent variant="simple" className="">
+              <div className="">
+                {!!readMoreLink?.link?.slug && (
+                  <ResourceLink href={readMoreLink.link?.slug} className="w-fit pt-0">
+                    {readMoreLink.label}
+                  </ResourceLink>
+                )}
+              </div>
+              <ul
+                aria-labelledby={id}
+                className={`flex flex-col flex-wrap
+                    ${
+                      readMoreLink?.link?.slug
+                        ? `mt-8 border-l 
+                    border-dashed
+                    border-slate-80
+                    pl-4
+                    pb-4`
+                        : ''
+                    }
+                    `}
+              >
+                {links?.map((link: any) => (
+                  <li className="" key={link.id}>
+                    <Link
+                      className={`aria-current:bg-grey-10
+                          aria-current:px-2
+                          aria-current:-ml-2
+                          aria-current:border-l-[3px]
+                          aria-current:border-moss-green-95
+                          py-4
+                          no-underline
+                          hover:underline 
+                          underline-offset-2
+                          text-sm`}
+                      /**
+                     * flex 
                       aria-current:bg-grey-10
                       hover:bg-grey-10
                       m-0
@@ -55,38 +102,19 @@ export const SimpleMenuItem = ({ item, index }: MenuGroupType) => {
                       xl:ml-[calc(var(--space-medium)_*_(-1))]
                       aria-current:border-l-[3px]
                       aria-current:border-moss-green-95
-                      `}
-                    href={link?.link?.slug || '/'}
-                  >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </MenuContent>
-    </MenuItem>
-  )
-}
-
-/* if (item?.type === 'simpleMenuGroup') {
-  return <SimpleMenuItem item={item} key={item.id} index={idx} />
-} else if (item?.type === 'simpleMenuLink') {
-  // Is this really necessary?
-  if (item.link && !item.link.slug) {
-    console.warn('Missing slug for simple menu link')
-  }
-  return (
-    <li key={item.id}>
-      <Link
-        className="list-none no-underline w-full mt-2 mx-0 mr-0 hover:bg-grey-10 py-xs+sm"
-        href={(item.link && item.link.slug) || '/'}
-      >
-        {' '}
-        {item.label}{' '}
-      </Link>
-    </li>
+                     */
+                      href={link?.link?.slug || '/'}
+                      aria-current={router?.asPath == link?.link?.slug ? 'page' : 'false'}
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </MenuContent>
+          </MenuItem>
+        </>
+      )}
+    </>
   )
 }
-})} */
diff --git a/web/sections/SiteMenu/SiteMenu.tsx b/web/sections/SiteMenu/SiteMenu.tsx
@@ -51,8 +51,13 @@ const SiteMenu = ({ data, variant = 'default', ...rest }: MenuProps) => {
   const getCurrentMenuItemIndex = () => {
     const temp = menuItems
       .findIndex((menuItem) => {
-        if (variant === 'simple' && 'links' in menuItem && menuItem.links) {
-          return menuItem.links.some((link) => link.link?.slug === router.asPath)
+        if (variant === 'simple') {
+          if ('link' in menuItem && menuItem?.link) {
+            return menuItem.link.slug === router.asPath
+          }
+          if ('links' in menuItem && menuItem?.links) {
+            return menuItem.links.some((link) => link.link?.slug === router.asPath)
+          }
         } else if (variant === 'default' && 'groups' in menuItem && menuItem.groups) {
           return menuItem.groups?.some((group) => group.links.some((link) => link.link?.slug === router.asPath))
         } else {
@@ -64,6 +69,11 @@ const SiteMenu = ({ data, variant = 'default', ...rest }: MenuProps) => {
     return temp
   }
 
+  const variantClassName: Partial<Record<Variants, string>> = {
+    default: 'h-full px-8 xl:bg-moss-green-50 xl:mt-8 xl:mx-8 xl:flex xl:justify-between items-center',
+    simple: 'px-layout-sm flex flex-col mx-auto xl:px-layout-lg xl:w-fit',
+  }
+
   return (
     <>
       <MenuButton
@@ -90,10 +100,7 @@ const SiteMenu = ({ data, variant = 'default', ...rest }: MenuProps) => {
                     onClick={() => setIsOpen(false)}
                   />
                 </NavTopbar>
-                <div
-                  className="h-full px-8 xl:bg-moss-green-50 xl:mt-8 xl:mx-8 xl:flex xl:justify-between items-center"
-                  {...rest}
-                >
+                <div className={variantClassName[variant]} {...rest}>
                   <Menu variant={variant} defaultValue={getCurrentMenuItemIndex()}>
                     {menuItems.map((item, idx: number) => {
                       return variant === 'simple' ? (
@@ -106,12 +113,17 @@ const SiteMenu = ({ data, variant = 'default', ...rest }: MenuProps) => {
 
                   <Link
                     className={`
-                    py-6
-                    xl:py-4
-                    px-2
-                    xl:px-6
-                    xl:my-4
-                    text-base
+                    ${
+                      variant === 'simple'
+                        ? 'py-4 xl:py-6 text-sm'
+                        : `py-6
+                      px-2
+                      xl:px-6
+                      xl:my-4
+                      xl:py-4
+                      text-base
+                      `
+                    }
                     xl:text-sm
                     leading-none
                     no-underline