Merge branch 'bose/3854' into staging

Author: BorghildSelle

studio/schemas/objects/textBlock.tsx

@@ -1,10 +1,12 @@
 import { text_field } from '@equinor/eds-icons'
 import {
+  defineArrayMember,
   defineField,
   type PortableTextBlock,
   type Reference,
   type Rule,
 } from 'sanity'
+import { Flags } from '@/src/lib/datasetHelpers'
 import blocksToText from '../../helpers/blocksToText'
 import { EdsIcon } from '../../icons'
 import type { ColorSelectorValue } from '../components/ColorSelector'
@@ -114,7 +116,16 @@ export default {
       name: 'text',
       title: 'Text content',
       type: 'array',
-      of: [configureBlockContent({ variant: 'textBlock' })],
+      of: [
+        configureBlockContent({ variant: 'textBlock' }),
+        // This enables the image upload/paste block
+        Flags.IS_DEV
+          ? defineArrayMember({
+              type: 'image',
+              options: { hotspot: true },
+            })
+          : false,
+      ],
     },
     {
       name: 'action',

web/app/globals.css

@@ -1,6 +1,5 @@
 @import "tailwindcss" source("../");
 @import '@energyvision/shared/brand.css';
-/* @source '../styles/components/imagezoom.css'; */
 @source '../styles/components/cookiebot.css';
 
 /* Custom theme for web, not common brand */

web/core/Image/Image.tsx

@@ -10,7 +10,6 @@ import {
   getPxLgSizes,
   getPxSmSizes,
   getSmallerThanPxLgSizes,
-  getTwAspectRatioUtilityOnRatio,
   type ImageProps,
   mapSanityImageRatio,
 } from './imageUtilities'
@@ -55,15 +54,8 @@ export const Image = ({
   attribution,
   figCaptionClassName = '',
   keepRatioOnMobile = false,
-  hasImageZoom = false,
 }: ImageProps) => {
-  let isLargerDisplays = useMediaQuery(`(min-width: 800px)`)
-
-  if (hasImageZoom) {
-    //Override max sizes for mobile since zoom
-    //grid is set to sm in FigureWithLayout when zoom is enabled.
-    isLargerDisplays = true
-  }
+  const isLargerDisplays = useMediaQuery(`(min-width: 800px)`)
 
   if (!image || !image?.asset) return null
 
@@ -83,9 +75,6 @@ export const Image = ({
   if ('alt' in image && image?.alt) {
     altText = image.alt
   }
-  /*   const aspectRatioClass = getTwAspectRatioUtilityOnRatio(
-    isLargerDisplays ? aspectRatio : '4:3',
-  ) */
 
   const nextImage = url ? (
     <NextImage
@@ -107,7 +96,6 @@ export const Image = ({
       <div
         className={twMerge(
           `relative h-full max-h-full w-full max-w-full`,
-          //fill && aspectRatioClass - why did i, Borghild, add this?,
           className,
         )}
       >

web/core/Image/imageUtilities.ts

@@ -1,8 +1,4 @@
-import type {
-  SanityImageCrop,
-  SanityImageHotspot,
-  SanityImageObject,
-} from '@sanity/image-url'
+import type { SanityImageObject } from '@sanity/image-url'
 import type { ImageProps as NextImageProps } from 'next/image'
 
 export const ImageRatios = {
@@ -163,7 +159,7 @@ export const getTwAspectRatioUtilityOnRatio = (ratio: ImageRatioKeys) => {
 export type Image = {
   alt?: string
   asset: SanityImageObject
-  extension: string
+  extension?: string
 }
 
 export type Figure = {
@@ -209,6 +205,4 @@ export type ImageProps = Omit<NextImageProps, 'src' | 'alt' | 'sizes'> & {
   figCaptionClassName?: string
   /** Ignores 4:3 ratio on mobile */
   keepRatioOnMobile?: boolean
-  /** Enables image zoom functionality on image */
-  hasImageZoom?: boolean
 }

web/core/Typography/Typography.tsx

@@ -73,10 +73,21 @@ const findTypography = (
 
 export type TypographyProps = {
   /** Typography variants, specifies which variant to use.
+   *
+   * Quick variants can be used without providing `group`.
+   * These are the variants merged into `quickVariants` from the `heading`,
+   * `paragraph`, `marks`, and `plain` groups in `variants.ts`.
+   *
+   * Variants that only exist in grouped collections, such as `display` or `card`,
+   * should be paired with the matching `group` prop so the class lookup resolves correctly.
    * @default body
    */
   variant?: TypographyVariants
-  /** Typography groups, specifies which group to use. */
+  /** Typography groups, specifies which group to use.
+   *
+   * Optional when `variant` is a quick variant.
+   * Required in practice for grouped-only variants such as `h1_base`, `h2_lg`, or card-specific styles.
+   */
   group?: TypographyGroups
   /** Override the element type */
   as?: ElementType
@@ -96,12 +107,31 @@ export type TypographyProps = {
 
 /**
  * Typography used for common text styles
+ *
+ * When `group` is omitted, the component first resolves `variant` against the shared
+ * quick variant map. That supports the common heading, paragraph, marks, and plain variants
+ * without extra configuration.
+ *
+ * Use `group` when selecting a variant that belongs to a specific collection such as
+ * `display`, `card`, or `article`.
+ *
  * @example
  * ```jsx
  *     <Typography variant="h6" as="h2" className="text-moss-green-100">
  *       I am a h2 heading with h6 styling with classname override
  *     </Typography>
  * ```
+ *
+ * @example
+ * ```jsx
+ *     <Typography variant="body">
+ *       Quick variants like body resolve without a group.
+ *     </Typography>
+ *
+ *     <Typography variant="h2_base" group="display">
+ *       Display variants should be used with their group.
+ *     </Typography>
+ * ```
  */
 export const Typography: OverridableComponent<TypographyProps, HTMLElement> =
   forwardRef(function Typography(
@@ -123,9 +153,7 @@ export const Typography: OverridableComponent<TypographyProps, HTMLElement> =
 
     if (typeof typography === 'undefined') {
       console.warn(
-        `Typography variant not found for variant "${variant}" ("${variant}") & group "${
-          group || ''
-        }"`,
+        `Typography variant not found for variant "${variant}" & group "${group ?? ''}"`,
       )
     }
     const TypographyTag = as ?? (`p` as React.ElementType)

web/portableText/Blocks.tsx

@@ -13,6 +13,7 @@ import type {
 } from '@portabletext/types'
 import dynamic from 'next/dynamic'
 import type { ElementType } from 'react'
+import { Image } from '@/core/Image/Image'
 import DownloadableLink from '@/core/Link/DownloadableLink'
 import { Link as CoreLink } from '@/core/Link/Link'
 import type { TypographyProps } from '@/core/Typography'
@@ -408,25 +409,8 @@ export default function Blocks({
           if (inlineBlockTypes.includes(blocks[i + 1]?._type)) return null
           // Otherwise, render the group of text blocks we have
           const value = div
-          //const CustomElementType = as ?? (`div` as React.ElementType)
           div = []
 
-          /*
-          Find out why i, borghild put asOneElementTYpe           
-          return asOneElementType && as ? (
-            <CustomElementType key={block._key} className={className} id={id}>
-              <PortableText
-                value={value}
-                components={componentsProps}
-                onMissingComponent={(message, options) => {
-                  console.warn(
-                    `${message},type:${options.type},nodeType:${options.nodeType}`,
-                  )
-                  return false
-                }}
-              />
-            </CustomElementType>
-          ) : ( */
           return (
             <div
               key={block._key}
@@ -445,7 +429,6 @@ export default function Blocks({
               />
             </div>
           )
-          /*           ) */
         }
         /** Factbox block */
         if (block._type === 'factbox') {
@@ -508,11 +491,25 @@ export default function Blocks({
         }
         // Non-text blocks (modules, sections, etc.) — note that these can recursively render text
         // blocks again
+
         return (
           <PortableText
             key={block._key}
             value={block}
             components={{
+              types: {
+                image: ({ value }) => {
+                  //@ts-ignore
+                  return (
+                    <Image
+                      aspectRatio='original'
+                      image={value}
+                      useFitMax={true}
+                      className='my-8 border border-gray-50 drop-shadow-md'
+                    />
+                  )
+                },
+              },
               ...components,
             }}
           />

web/portableText/components/news/FigureWithLayout.tsx

@@ -1,6 +1,4 @@
 import type { PortableTextBlock } from '@portabletext/types'
-//Add to packagejson later after upgrade
-//import Zoom from 'react-medium-image-zoom'
 import { twMerge } from 'tailwind-merge'
 import { FigureCaption } from '@/core/FigureCaption/FigureCaption'
 import { Image } from '@/core/Image/Image'
@@ -19,16 +17,13 @@ type FigureNode = {
   caption?: string
   image: ImageType
   layout: LayoutAlignment
-  //Hold until upgrade is done
-  //enableImageZoom?: boolean
   imageOrientation?: 'portrait' | 'landscape' | 'square'
   centerImageLayout?: 'left' | 'right'
   centerCaptionAlignment?: 'top' | 'center' | 'bottom'
   landscapeRatio?: Extract<ImageRatioKeys, '21:9' | 'original' | '16:9'>
 }
 
 type BlockProps = {
-  isInline: boolean
   value: FigureNode
 } & PortableTextBlock
 
@@ -39,7 +34,6 @@ export const FigureWithLayout = (block: BlockProps) => {
     caption,
     attribution,
     layout = 'full',
-    //enableImageZoom = false,
     imageOrientation = 'landscape',
     centerImageLayout = 'left',
     centerCaptionAlignment = 'bottom',

web/sections/AnchorSearch/AnchorSearch.tsx

@@ -124,7 +124,7 @@ const AnchorSearch = forwardRef<HTMLDivElement, AnchorSearchProps>(
             </ul>
             <div
               tabIndex={0}
-              className='flex max-h-[50vh] flex-col overflow-auto border-neutral-400 border-y'
+              className='flex max-h-[50vh] flex-col gap-4 overflow-auto border-neutral-400 border-y py-4'
             >
               {letters?.map(contentLetter => {
                 const content = anchors?.filter(
@@ -137,15 +137,8 @@ const AnchorSearch = forwardRef<HTMLDivElement, AnchorSearchProps>(
                 return (
                   <div
                     key={contentLetter as string}
-                    className='grid auto-cols-min grid-flow-col border-neutral-400 border-b py-8 last:border-none'
+                    className='grid auto-cols-min grid-flow-col gap-4'
                   >
-                    <Typography
-                      group='plain'
-                      variant='div'
-                      className='w-fit ps-4 pe-20 font-semibold text-2xl'
-                    >
-                      {contentLetter as string}
-                    </Typography>
                     <div className='grid auto-cols-[500px] grid-flow-col'>
                       {chunks?.map((chunk: any) => {
                         return (
@@ -162,6 +155,7 @@ const AnchorSearch = forwardRef<HTMLDivElement, AnchorSearchProps>(
                                   className='text-base hover:underline'
                                   onClick={() => setOpen(false)}
                                 >
+                                  {`# `}
                                   {Array.isArray(anchor?.label) ? (
                                     <Blocks value={anchor?.label} />
                                   ) : (

web/templates/shared/ErrorBoundaryClient.tsx

@@ -19,23 +19,33 @@ export const ErrorBoundaryClient = ({
     <ErrorBoundary
       fallbackRender={({ error }) => {
         console.error(
-          `Error in component ${c.type}: ${
+          `Error in component ${c.type} with title: ${
             c?.title ? toPlainText(c.title) : ''
           }`,
           error,
         )
         return (
           <div
             role='alert'
-            className={`mx-layout-sm mb-page-content flex flex-col items-center gap-8 rounded-card bg-gray-20 px-6 py-8 lg:mx-layout-lg`}
+            className={`mx-layout-sm mb-page-content flex flex-col items-center rounded-card bg-gray-20 px-6 py-8 lg:mx-layout-lg`}
           >
             <TbFaceIdError size={64} />
-            <Typography as='h2' variant='h3' className='text-center'>
+            <Typography as='h2' variant='h4' className='text-center'>
               {dataset === 'global-development'
-                ? `Error in component ${c.type}: ${c?.title ? toPlainText(c.title) : ''}`
+                ? `Error in ${c.type}`
                 : (t('sectionRenderError') ??
                   `This section could not be shown`)}
             </Typography>
+            {dataset === 'global-development' && (
+              <>
+                <Typography as='h3' variant='h5' className='text-center'>
+                  {`Title: ${c?.title ? toPlainText(c.title) : ''}`}
+                </Typography>
+                <Typography variant='body' className='pt-2 text-center'>
+                  {error.message}
+                </Typography>
+              </>
+            )}
           </div>
         )
       }}