🎨 fix grid arrow and grid text block to richtext variants

Author: BorghildSelle

studio/icons/customIcons.tsx

@@ -64,6 +64,10 @@ export const SmallSizeImage = (): JSX.Element => (
   <svg
     width='48'
     height='48'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     viewBox='0 0 48 48'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
@@ -86,6 +90,10 @@ export const LeftAlignedImage = (): JSX.Element => (
     width='48'
     height='48'
     viewBox='0 0 48 48'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     aria-labelledby='leftAlignedTitle'
     fill='currentColor'
     stroke='currentColor'
@@ -103,7 +111,10 @@ export const LeftAlignedImage = (): JSX.Element => (
 export const ContentCenterImage = (): JSX.Element => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    className='icon icon-tabler icon-tabler-align-box-center-middle-filled'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     width='48'
     height='48'
     viewBox='0 0 24 24'
@@ -124,9 +135,12 @@ export const ContentCenterImage = (): JSX.Element => (
 export const ContentLeftImage = (): JSX.Element => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    className='icon icon-tabler icon-tabler-align-box-left-middle-filled'
     width='48'
     height='48'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     viewBox='0 0 24 24'
     strokeWidth='1.5'
     stroke='currentColor'
@@ -146,7 +160,10 @@ export const ContentLeftImage = (): JSX.Element => (
 export const ContentRightImage = (): JSX.Element => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    className='icon icon-tabler icon-tabler-align-box-right-middle-filled'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     width='48'
     height='48'
     viewBox='0 0 24 24'
@@ -167,7 +184,10 @@ export const ContentRightImage = (): JSX.Element => (
 export const ContentBottomCenterImage = (): JSX.Element => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    className='icon icon-tabler icon-tabler-align-box-right-middle-filled'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     width='48'
     height='48'
     viewBox='0 0 24 24'
@@ -181,7 +201,10 @@ export const ContentBottomCenterImage = (): JSX.Element => (
 export const ContentBottomLeftImage = (): JSX.Element => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    className=''
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     width='48'
     height='48'
     viewBox='0 0 24 24'
@@ -197,6 +220,10 @@ export const RightAlignedImage = (): JSX.Element => (
   <svg
     width='48'
     height='48'
+    style={{
+      width: '100%',
+      height: 'auto',
+    }}
     viewBox='0 0 48 48'
     aria-labelledby='rightAlignedTitle'
     fill='currentColor'

studio/schemas/components/RadioIconSelector.tsx

@@ -93,7 +93,7 @@ export const RadioIconSelector = ({
                     ? option.icon()
                     : option.icon}
                 </div>
-                <p style={{ margin: 0 }}>{option.value}</p>
+                <p style={{ margin: 0, textAlign: 'center' }}>{option.value}</p>
               </div>
             </label>
           </div>

studio/schemas/objects/grid/cellTypes/gridTextBlock.tsx

@@ -23,9 +23,9 @@ import {
 
 const blockContentType = configureBlockContent({ variant: 'extendedBlock' })
 const themedTitleContentType = configureBlockContent({
-  variant: 'with2XLTitle',
+  variant: 'richTitleH2',
 })
-const titleContentType = configureBlockContent({ variant: 'title' })
+const titleContentType = configureBlockContent({ variant: 'titleH2' })
 
 const contentAlignmentOptions = [
   { value: 'left', icon: ContentLeftImage },

studio/styles/fonts.css

@@ -19,7 +19,6 @@
   --font-3xl: clamp(calc(39.81 / 16 * 1rem), 1.77vw + 2.07rem, calc(67.14 / 16 * 1rem));
   --font-4xl: clamp(calc(45.89 / 16 * 1rem), 2.16vw + 2.355rem, calc(79.225 / 16 * 1rem));
   --font-5xl: clamp(calc(51.97 / 16 * 1rem), 2.55vw + 2.64rem, calc(91.31 / 16 * 1rem));
-  --font-5xl: clamp(calc(51.97 / 16 * 1rem), 2.55vw + 2.64rem, calc(91.31 / 16 * 1rem));
   --font-6xl: clamp(calc(58.05 / 16 * 1rem), 2.94vw + 2.925rem, calc(103.39 / 16 * 1rem));
   --font-8xl: clamp(calc(59.19 / 16 * 1rem), 3.72vw + 3.495rem, calc(115.47 / 16 * 1rem));
   --tracking-display: -3px;
@@ -53,7 +52,9 @@
   margin: 0;
 }
 .pt-editable .pt-block:has([data-group='display']) [data-text] *:where([data-slate-leaf='true']) {
-  white-space: normal;
+  /*white-space: normal; Did not work, tried to avoid pre-wrap because used together with other styles it can make an empty line
+  in eitor when text gets wrapped. Looks wrong with the emtpy pre-wrapped line with a cursor to write... 
+  But with out pre-wrap the space doesnt show in editor... */
 }
 .pt-editable .text-sm *:where([data-slate-leaf='true']) {
   font-size: var(--font-sm);

web/core/Carousel/Carousel.tsx

@@ -6,6 +6,7 @@ import {
   type ElementType,
   forwardRef,
   type HTMLAttributes,
+  type ReactNode,
   useCallback,
   useEffect,
   useId,
@@ -69,6 +70,7 @@ type CarouselProps = {
   title?: PortableTextBlock[]
   /** Variant Image: The section title to be used in translated autorotation control button */
   sectionTitle?: PortableTextBlock[]
+  getVariantElementBody?: (itemData: any, index?: number) => JSX.Element
 } & Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 
 const TRANSLATE_X_AMOUNT_LG = 1000
@@ -89,6 +91,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(
       listClassName = '',
       hasSectionTitle = false,
       sectionTitle,
+      getVariantElementBody,
     },
     ref,
   ) {
@@ -342,7 +345,9 @@ const [scrollPosition, setScrollPosition] = useState<'start' | 'middle' | 'end'>
       )
     }
     const getEventVariantBody = (itemData: EventCardData, index: number) => {
-      const element = (
+      const element = getVariantElementBody ? (
+        getVariantElementBody(itemData)
+      ) : (
         <EventCard
           hasSectionTitle={hasSectionTitle}
           data={itemData}

web/sections/Grid/GridLinkArrow.tsx

@@ -20,6 +20,7 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(
     { action, className = '', bgColor, variant = 'square' },
     ref,
   ) {
+    console.log('GridLinkArrow bgColor', bgColor)
     const url = action && getUrlFromAction(action)
 
     const bgClassName = () => {
@@ -34,7 +35,7 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(
         case 'bg-white-100':
           return `text-slate-80 hover:bg-grey-50 hover:text-white-100 focus-visible:bg-grey-50 focus-visible:text-white-100`
         default:
-          return `text-white-100 hover:bg-white-100 hover:text-slate-80 dark:hover:bg-white-100 dark:hover:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80`
+          return `text-white-100 hover:bg-white-100 hover:text-slate-80 dark:hover:bg-white-100 dark:hover:*:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80`
       }
     }
 
@@ -53,7 +54,7 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(
           <div
             ref={ref}
             className={twMerge(
-              `focus-visible:-translate-x-[5px] focus-visible:-translate-y-[5px] absolute right-0 bottom-0 flex w-full justify-end 3xl:pt-12 pt-4`,
+              `focus-visible:-translate-x-1.25 focus-visible:-translate-y-1.25 absolute right-0 bottom-0 flex w-full justify-end 3xl:pt-12 pt-4`,
               className,
             )}
           >

web/sections/Grid/Span3.tsx

@@ -1,20 +1,29 @@
 'use client'
+import { forwardRef, type HTMLAttributes } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { HTMLAttributes, forwardRef } from 'react'
 import { mapGridContent } from './mapGridContent'
 
 export type Span3Props = {
   data: any
   className?: string
 } & HTMLAttributes<HTMLDivElement>
 
-const Span3 = forwardRef<HTMLDivElement, Span3Props>(function Span3({ data, className = '', ...rest }, ref) {
-  const minHeight = data?.content?.type === 'videoPlayer' ? '' : 'min-h-[350px] lg:min-h-[600px]'
+const Span3 = forwardRef<HTMLDivElement, Span3Props>(function Span3(
+  { data, className = '', ...rest },
+  ref,
+) {
+  const minHeight =
+    data?.content?.type === 'videoPlayer'
+      ? ''
+      : 'min-h-[350px] lg:min-h-[600px]'
 
   return (
     <div
       ref={ref}
-      className={twMerge(`h-full w-full border border-moss-green-60 lg:col-span-3 ${minHeight} `, className)}
+      className={twMerge(
+        `h-full w-full border border-moss-green-60 lg:col-span-3 ${minHeight} `,
+        className,
+      )}
       {...rest}
     >
       {mapGridContent(data?.content, 'span3')}

web/sections/Grid/mapGridContent.tsx

@@ -1,20 +1,25 @@
 'use client'
-import { IFrameData } from '../../types/index'
+import { VideoPlayer } from '@/core/VideoJsPlayer/VideoPlayer'
+import type { IFrameData } from '../../types/index'
+import type { FigureData } from '../Figure/Figure'
 import IFrame from '../IFrameBlock/IFrameBlock'
-import GridTextBlock from './GridTextBlock'
-import { GridTeaser } from './GridTeaser'
+import type { VideoPlayerBlockProps } from '../VideoPlayerBlock/VideoPlayerBlock'
 import GridFigure from './GridFigure'
-import { FigureData } from '../Figure/Figure'
-import { VideoPlayer } from '@/core/VideoJsPlayer/VideoPlayer'
-import { VideoPlayerBlockProps } from '../VideoPlayerBlock/VideoPlayerBlock'
+import { GridTeaser } from './GridTeaser'
+import GridTextBlock from './GridTextBlock'
 
 export type RowType = 'span3' | 'span2and1' | 'threeColumns' | undefined
 
-export const mapGridContent = (data: any, rowType?: RowType): React.ReactNode => {
+export const mapGridContent = (
+  data: any,
+  rowType?: RowType,
+): React.ReactNode => {
   //@ts-ignore:so many types
   switch (data.type) {
     case 'gridTextBlock':
-      return <GridTextBlock key={data.id} data={data as any} rowType={rowType} />
+      return (
+        <GridTextBlock key={data.id} data={data as any} rowType={rowType} />
+      )
     case 'gridTeaser':
       return <GridTeaser key={data.id} data={data as any} rowType={rowType} />
     case 'figure':

web/sections/cards/EventCard/EventCard.tsx

@@ -11,15 +11,15 @@ import FormattedDateTime, {
   TimeIcon,
 } from '@/core/FormattedDateTime/FormattedDateTime'
 import { BaseLink } from '@/core/Link/BaseLink'
+import { defaultLanguage } from '@/languageConfig'
 import { getEventDates } from '@/lib/helpers/dateUtilities'
+import { getLocaleFromIso } from '@/sanity/helpers/localization'
 import {
   type ColorKeys,
   colorKeyToUtilityMap,
 } from '@/styles/colorKeyToUtilityMap'
 import AddToCalendar from '../../../core/AddToCalendar/AddToCalendar'
 import Blocks from '../../../portableText/Blocks'
-import { defaultLanguage } from '@/languageConfig'
-import { getLocaleFromIso } from '@/sanity/helpers/localization'
 
 type Variants = 'default' | 'single' | 'carousel'
 
@@ -74,9 +74,9 @@ const EventCard = forwardRef<HTMLDivElement, EventCardProps>(function EventCard(
   } = data
 
   const iso = useLocale()
-  const locale = iso!== defaultLanguage.name? getLocaleFromIso(iso) :""
-  const href =  ("/"+locale+ slug) || ''
-    
+  const locale = iso !== defaultLanguage.name ? getLocaleFromIso(iso) : ''
+  const href = '/' + locale + slug || ''
+
   const formatter = useFormatter()
   const { start, end } = getEventDates(eventDate)
   const { dayTime: startDayTime, overrideTimeLabel: startTimeLabel } =

web/sections/promotions/PromotionsBlock.tsx

@@ -135,6 +135,8 @@ const PromotionsBlock = ({
 
   const { backgroundImage, backgroundPosition } = designOptions || {}
 
+  console.log('promotion data', data)
+
   const promotionVariant =
     variant ?? mapOldPromoType(data.promotions?.[0]?.type) ?? 'promoteTopics'
 
@@ -157,6 +159,7 @@ const PromotionsBlock = ({
   }, [promotions, eventsCount])
 
   const onColorBg = designOptions?.background?.backgroundColor !== 'White'
+  console.log('onColorBg', onColorBg)
   const paddingClassName = `px-layout-sm lg:px-layout-lg`
 
   return (