🎨 update

equinor · Feb 14, 2025 · dea1c6b · dea1c6b
1 parent 12a03ab
commit dea1c6b
Show file tree

Hide file tree

Showing 20 changed files with 244 additions and 269 deletions.
diff --git a/sanityv3/schemas/objects/ImageWithLinkAndOrOverlay.tsx b/sanityv3/schemas/objects/ImageWithLinkAndOrOverlay.tsx
@@ -66,7 +66,7 @@ export default {
       of: [blockContentType],
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[]) => {
-          return validateCharCounterEditor(value, 600, true)
+          return validateCharCounterEditor(value, 200, true)
         }).error(),
     },
     {

diff --git a/sanityv3/schemas/objects/carousel/sharedCarouselFields.tsx b/sanityv3/schemas/objects/carousel/sharedCarouselFields.tsx
@@ -1,37 +1,3 @@
-import type { Rule } from 'sanity'
-
-export const singleMode = {
-  type: 'boolean',
-  name: 'singleMode',
-  title: 'Single mode',
-  description: 'Displays the carousel as one item at the time. Default is scroll container',
-  initialValue: false,
-  validation: (Rule: Rule) =>
-    Rule.custom((value: any, context) => {
-      if (!value) {
-        return true
-      }
-      //@ts-ignore:todo
-      return value && context?.parent?.items?.length >= 3 ? true : 'Single mode requires at least 3 items'
-    }),
-}
-export const carouselWidth = {
-  type: 'boolean',
-  name: 'useFullWidthScroll',
-  title: 'Use scroll fullwidth container',
-  description:
-    'Scroll: Select this if you want the carusel go full viewport width. Default is within large content column',
-  initialValue: false,
-  validation: (Rule: Rule) =>
-    Rule.custom((value: any, context) => {
-      if (!value) {
-        return true
-      }
-      //@ts-ignore:todo
-      return value && context?.parent?.singleMode ? 'Single mode is set, turn off single mode to use this' : true
-    }),
-}
-
 export const autoPlay = {
   type: 'boolean',
   name: 'autoplay',

diff --git a/sanityv3/schemas/objects/iframeCarousel.tsx b/sanityv3/schemas/objects/iframeCarousel.tsx
@@ -12,7 +12,6 @@ import {
   height,
   action,
 } from './iframe/sharedIframeFields'
-import { carouselWidth, singleMode } from './carousel/sharedCarouselFields'
 
 const carouselItemFields = [title, frameTitle, description, cookiePolicy, aspectRatio, url, height, action]
 
@@ -43,7 +42,7 @@ export default {
       type: 'array',
       name: 'items',
       description: 'Add more iframes',
-      title: 'Scrollable iframe items',
+      title: 'Iframe items',
       of: [
         {
           title: 'Iframe item',
@@ -70,10 +69,8 @@ export default {
           fields: [...carouselItemFields],
         },
       ],
-      validation: (Rule: Rule) => Rule.required().min(2),
+      validation: (Rule: Rule) => Rule.required().min(3),
     },
-    singleMode,
-    carouselWidth,
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',

diff --git a/sanityv3/schemas/objects/imageCarousel.tsx b/sanityv3/schemas/objects/imageCarousel.tsx
@@ -77,9 +77,8 @@ export default {
         { type: 'imageWithRichTextBelow' },
         { type: 'imageWithLinkAndOrOverlay' },
       ],
-      validation: (Rule: Rule) => Rule.required().min(2),
+      validation: (Rule: Rule) => Rule.required().min(3),
     },
-    singleMode,
     autoPlay,
     {
       title: 'Background',

diff --git a/sanityv3/schemas/objects/videoPlayerCarousel.tsx b/sanityv3/schemas/objects/videoPlayerCarousel.tsx
@@ -100,10 +100,8 @@ export default {
           },
         },
       ],
-      validation: (Rule: Rule) => Rule.required().min(2),
+      validation: (Rule: Rule) => Rule.required().min(3),
     },
-    singleMode,
-    carouselWidth,
     {
       name: 'aspectRatio',
       type: 'string',
@@ -120,6 +118,15 @@ export default {
       fieldset: 'design',
       validation: (Rule: Rule) => Rule.required(),
     },
+    {
+      type: 'boolean',
+      name: 'scrollMode',
+      title: 'Scroll mode',
+      description: 'Displays the carousel as scroll container',
+      initialValue: false,
+      fieldset: 'design',
+      hidden: ({ parent }: { parent: any }) => parent?.aspectRatio !== '9:16',
+    },
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',

diff --git a/web/components/src/Backgrounds/BackgroundContainer.tsx b/web/components/src/Backgrounds/BackgroundContainer.tsx
@@ -30,6 +30,8 @@ export type BackgroundContainerProps = {
   scrimClassName?: string
   /* On mobile dont split background image and content */
   dontSplit?: boolean
+  /** Set return element as section */
+  asSection?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
@@ -43,6 +45,7 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
     id,
     renderFragmentWhenPossible = false,
     dontSplit = false,
+    asSection = false,
     ...rest
   },
   ref,
@@ -61,13 +64,15 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
           className={envisTwMerge(`${id ? 'scroll-mt-topbar' : ''}`, className)}
           scrimClassName={scrimClassName}
           dontSplit={dontSplit}
+          asSection={asSection}
         >
           {children}
         </StyledImageBackground>
       )}
       {(type === 'backgroundColor' || !type) && (
         <>
-          {renderFragmentWhenPossible &&
+          {!asSection &&
+          renderFragmentWhenPossible &&
           (restBackground?.backgroundColor === 'White' || restBackground?.backgroundUtility === 'white-100') &&
           className === '' &&
           !id ? (
@@ -76,6 +81,7 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
             <ColouredContainer
               ref={ref}
               id={id}
+              asSection={asSection}
               {...restBackground}
               style={style}
               className={envisTwMerge(`${id ? 'scroll-mt-topbar' : ''}`, className, twClassName)}

diff --git a/web/components/src/Backgrounds/ColouredContainer.tsx b/web/components/src/Backgrounds/ColouredContainer.tsx
@@ -10,6 +10,8 @@ type ColouredContainerProps = {
   backgroundColor?: BackgroundColours
   backgroundUtility?: keyof ColorKeyTokens
   dark?: boolean
+  /** Set return element as section */
+  asSection?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 type ColourContainerProps = {
@@ -23,9 +25,15 @@ const ColourContainer = styled.div<ColourContainerProps>`
   ${({ $isInverted }) => ($isInverted ? inverted : normal)}
   ${({ $hasUtility }) => ($hasUtility ? '' : 'background-color: var(--background-color);')}
 `
+const ColourSectionContainer = styled.section<ColourContainerProps>`
+  container: size;
+  color: var(--color-on-background);
+  ${({ $isInverted }) => ($isInverted ? inverted : normal)}
+  ${({ $hasUtility }) => ($hasUtility ? '' : 'background-color: var(--background-color);')}
+`
 
 export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerProps>(function BackgroundContainer(
-  { backgroundColor = 'White', backgroundUtility, dark, style, children, className = '', ...rest },
+  { backgroundColor = 'White', backgroundUtility, dark, style, children, className = '', asSection = false, ...rest },
   ref,
 ) {
   const styleVariant = getContainerColor(backgroundColor)
@@ -35,8 +43,10 @@ export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerPro
     dark || backgroundColor === 'Mid Blue' || backgroundColor === 'Slate Blue' || backgroundColor === 'Slate Blue 95'
   const textColor = isDark ? '--inverted-text' : '--default-text'
 
+  const ReturnElement = asSection ? ColourSectionContainer : ColourContainer
+
   return (
-    <ColourContainer
+    <ReturnElement
       className={twMerge(
         `${className} background${styleVariant} ${isDark ? 'dark' : ''} ${
           backgroundUtility ? colorKeyToUtilityMap[backgroundUtility]?.background : ''
@@ -55,6 +65,6 @@ export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerPro
       {...rest}
     >
       {children}
-    </ColourContainer>
+    </ReturnElement>
   )
 })
diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
@@ -11,6 +11,8 @@ type ImageBackgroundContainerProps = {
   /* Provide gradient in scrimClassname and disable default */
   overrideGradient?: boolean
   aspectRatio?: number
+  /** Set return element as section */
+  asSection?: boolean
 } & ImageBackground &
   HTMLAttributes<HTMLDivElement>
 const DEFAULT_MAX_WIDTH = 1920
@@ -28,13 +30,15 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
       overrideGradient = false,
       dontSplit = false,
       aspectRatio,
+      asSection = false,
       ...rest
     },
     ref,
   ) {
     const props = useSanityLoader(image, DEFAULT_MAX_WIDTH, aspectRatio)
     const src = props?.src
     const isMobile = useMediaQuery(`(max-width: 800px)`)
+    const ReturnElement = asSection ? 'section' : 'div'
 
     const fadedFilter = `
     before:content-['']
@@ -79,7 +83,7 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
     }
 
     return useAnimation && !isMobile ? (
-      <div
+      <ReturnElement
         ref={ref}
         className={backgroundClassNames}
         style={
@@ -103,19 +107,19 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
         >
           {children}
         </div>
-      </div>
+      </ReturnElement>
     ) : isMobile && !dontSplit ? (
-      <div ref={ref} {...rest}>
+      <ReturnElement ref={ref} {...rest}>
         <div
           className={twMerge(`aspect-video`, backgroundClassNames)}
           style={{
             backgroundImage: `url(${src})`,
           }}
         />
         {children}
-      </div>
+      </ReturnElement>
     ) : (
-      <div
+      <ReturnElement
         ref={ref}
         className={backgroundClassNames}
         style={{
@@ -136,7 +140,7 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
         >
           {children}
         </div>
-      </div>
+      </ReturnElement>
     )
   },
 )