🎨 Port accordion to radix ui and add image and link component to acco…

…rdions #2671 (#2705)

* 🎨 update

* 🎨 add image to accordions

* 🎨 start porting menu

* 🎨 add menu and some more

* 🎨 more tweaks

* 🎨 cleanup

* 🎨 review fixes

* 🎨 update mobile point

sanityv3/schemas/documents/subMenu.tsx

@@ -9,6 +9,7 @@ import routes from '../routes'
 import { filterByRoute, filterByRouteNewsMagazineAndTitle } from '../../helpers/referenceFilters'
 import { Flags } from '../../src/lib/datasetHelpers'
 import { lang } from './langField'
+import { description } from '../objects/iframe/sharedIframeFields'
 
 export type SubMenu = {
   _type: 'subMenu'
@@ -45,6 +46,14 @@ export default {
         collapsed: false,
       },
     },
+    {
+      title: 'Featured content',
+      name: 'featured',
+      options: {
+        collapsible: true,
+        collapsed: false,
+      },
+    },
   ],
   fields: [
     lang,
@@ -103,6 +112,24 @@ export default {
         filter: filterByRouteNewsMagazineAndTitle,
         disableNew: true,
       },
+      fieldset: 'featured',
+    },
+    {
+      name: 'featuredIngress',
+      title: 'Featured ingress',
+      description:
+        'If the featured content does not have ingress and is not event, you can add an ingress here (max. 215 chars)',
+      type: 'array',
+      of: [introBlockContentType],
+      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 215, true)),
+      fieldset: 'featured',
+    },
+    {
+      name: 'featuredCTALabel',
+      title: 'Featured CTA label text',
+      description: 'The label text appearing with the CTA arrow link style if not event',
+      fieldset: 'featured',
+      type: 'string',
     },
     {
       name: 'intro',

sanityv3/schemas/objects/accordionItem.tsx

@@ -14,6 +14,8 @@ const contentType = configureBlockContent({
   h3: false,
   h4: false,
   attachment: false,
+  internalLink: false,
+  externalLink: false,
 })
 
 export default {
@@ -27,12 +29,28 @@ export default {
       type: 'string',
       validation: (Rule: Rule) => Rule.required().error(),
     },
+    {
+      title: 'Image',
+      name: 'image',
+      type: 'image',
+      description: 'Image will be presented as landscape format',
+      options: {
+        hotspot: true,
+        collapsed: false,
+      },
+    },
     {
       title: 'Content',
       name: 'content',
       type: 'array',
       of: [contentType],
     },
+    {
+      name: 'links',
+      type: 'array',
+      title: 'Links',
+      of: [{ type: 'linkSelector', title: 'Link' }],
+    },
   ],
   preview: {
     select: {

sanityv3/schemas/textSnippets.ts

@@ -827,6 +827,16 @@ const snippets: textSnippet = {
     defaultValue: 'Carousel controls',
     group: groups.carousel,
   },
+  logolink_title: {
+    title: 'Equinor logo link',
+    defaultValue: 'Equinor homepage',
+    group: groups.common,
+  },
+  featured_content: {
+    title: 'Featured content',
+    defaultValue: 'Featured content',
+    group: groups.common,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

web/components/src/Backgrounds/BackgroundContainer.tsx

@@ -5,6 +5,7 @@ import type { BackgroundColours, BackgroundTypes, ImageBackground } from '../../
 import { ColouredContainer } from './ColouredContainer'
 import { ImageBackgroundContainer } from './ImageBackgroundContainer'
 import { ColorKeyTokens } from '../../../styles/colorKeyToUtilityMap'
+import envisTwMerge from '../../../twMerge'
 
 const StyledImageBackground = styled(ImageBackgroundContainer)<{ $isInverted: boolean }>`
   ${({ $isInverted }) => ($isInverted ? inverted : normal)}
@@ -57,7 +58,7 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
           ref={ref}
           id={id}
           {...backgroundImage}
-          className={className}
+          className={envisTwMerge(`${id ? 'scroll-mt-topbar' : ''}`, className)}
           scrimClassName={scrimClassName}
           dontSplit={dontSplit}
         >
@@ -77,7 +78,7 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
               id={id}
               {...restBackground}
               style={style}
-              className={`${className} ${twClassName}`}
+              className={envisTwMerge(`${id ? 'scroll-mt-topbar' : ''}`, className, twClassName)}
               {...rest}
             >
               {children}

web/components/src/index.ts

@@ -10,7 +10,6 @@ export * from './Teaser'
 export * from './Eyebrow'
 export * from './Backgrounds'
 export * from './FigureCaption'
-export * from './Accordion'
 export * from './Menu'
 export * from './Heading'
 export * from './Table'

web/core/Accordion/Accordion.tsx

@@ -2,16 +2,14 @@ import { forwardRef } from 'react'
 import * as _Accordion from '@radix-ui/react-accordion'
 import envisTwMerge from '../../twMerge'
 
-interface AccordionSingleProps extends _Accordion.AccordionSingleProps {
+export interface AccordionSingleProps extends _Accordion.AccordionSingleProps {
   type: 'single'
 }
-interface AccordionMultipleProps extends _Accordion.AccordionMultipleProps {
+export interface AccordionMultipleProps extends _Accordion.AccordionMultipleProps {
   type: 'multiple'
 }
 
-export type AccordionProps = {
-  className?: string
-} & (AccordionSingleProps | AccordionMultipleProps)
+export type Variants = 'primary' | 'menu' | 'simpleMenu'
 
 /**
  * Accordion
@@ -33,10 +31,10 @@ export type AccordionProps = {
  * </Accordion>
  * ```
  */
-export const Accordion = forwardRef<React.ElementRef<typeof _Accordion.Root>, AccordionProps>(function Accordion(
-  { id, children, type = 'single', className = '', ...rest },
-  ref,
-) {
+export const Accordion = forwardRef<
+  React.ElementRef<typeof _Accordion.Root>,
+  AccordionSingleProps | AccordionMultipleProps
+>(function Accordion({ id, children, type = 'single', className = '', ...rest }, ref) {
   const props = type === 'single' ? (rest as AccordionSingleProps) : (rest as AccordionMultipleProps)
   return (
     //@ts-ignore: TODO solve type casting