Merge branch 'bose/2374' into staging

equinor · Jul 4, 2024 · d9c1b22 · d9c1b22
2 parents 39a952e + 758e2dd
commit d9c1b22
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 121 deletions.
diff --git a/sanityv3/schemas/objects/grid/cellTypes/gridTeaser.tsx b/sanityv3/schemas/objects/grid/cellTypes/gridTeaser.tsx
@@ -71,7 +71,7 @@ export default {
     {
       title: 'Use extended themes',
       name: 'useExtendedThemes',
-      description: 'Enabling this removes normal text style, but gives more theme options',
+      description: 'Enabling this removes normal text style and quote, but gives more theme options',
       type: 'boolean',
     },
     {
@@ -96,41 +96,26 @@ export default {
           return validateCharCounterEditor(value, 600)
         }).warning(),
     },
-    {
-      name: 'contentThemeFromNormal',
-      title: 'Content theme',
-      type: 'themeList',
-      options: {
-        colors: fromNormalTextThemeColors,
-      },
-      hidden: ({ parent }: GridTeaserDocument) => parent.useExtendedThemes,
-    },
-    {
-      name: 'contentThemeFromLarger',
-      title: 'Content theme',
-      type: 'themeList',
-      options: {
-        colors: fromLargerTextThemeColors,
-      },
-      hidden: ({ parent }: GridTeaserDocument) => !parent.useExtendedThemes,
-    },
     {
       name: 'quote',
       type: 'text',
       title: 'Quote',
       description: 'Highlighted quote from the article, gets theme from below',
       rows: 5,
+      hidden: ({ parent }: GridTeaserDocument) => parent.useExtendedThemes,
     },
     {
       name: 'author',
       type: 'string',
       title: 'Name',
+      hidden: ({ parent }: GridTeaserDocument) => parent.useExtendedThemes,
     },
     {
       name: 'authorTitle',
       type: 'string',
       title: 'Title',
       description: 'Optional title for the author.',
+      hidden: ({ parent }: GridTeaserDocument) => parent.useExtendedThemes,
     },
     {
       name: 'action',
@@ -173,11 +158,20 @@ export default {
     {
       name: 'theme',
       title: 'Theme',
+      type: 'themeList',
       options: {
         colors: fromNormalTextThemeColors,
       },
-      description: 'If no theme set, normal text color is set',
+      hidden: ({ parent }: GridTeaserDocument) => parent.useExtendedThemes,
+    },
+    {
+      name: 'themeFromLarger',
+      title: 'Theme',
       type: 'themeList',
+      options: {
+        colors: fromLargerTextThemeColors,
+      },
+      hidden: ({ parent }: GridTeaserDocument) => !parent.useExtendedThemes,
     },
   ],
   preview: {

diff --git a/sanityv3/schemas/objects/grid/cellTypes/gridTextBlock.tsx b/sanityv3/schemas/objects/grid/cellTypes/gridTextBlock.tsx
@@ -95,17 +95,6 @@ export default {
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[]) => (!value ? 'A title is recommended' : true)).warning(),
     },
-    {
-      name: 'titleThemeFromNormal',
-      title: 'Title theme',
-      type: 'themeList',
-      options: {
-        colors: fromNormalTextThemeColors,
-      },
-      fieldset: 'title',
-      hidden: ({ parent }: GridTextBlockDocument) => parent.useThemedTitle,
-      description: 'use white text or black text when background image',
-    },
     {
       name: 'titleThemeFromLarger',
       title: 'Title theme',
@@ -115,7 +104,7 @@ export default {
       },
       fieldset: 'title',
       hidden: ({ parent }: GridTextBlockDocument) => !parent.useThemedTitle,
-      description: 'use white text or black text when background image',
+      description: 'Use white text or black text when background image',
     },
     {
       name: 'content',
@@ -142,9 +131,20 @@ export default {
       options: {
         colors: fromNormalTextThemeColors,
       },
+      hidden: ({ parent }: GridTextBlockDocument) => !parent.useThemedTitle,
       description:
         'Title theme background will be used if different.Text will then be white/black. Use white or black text when background image',
     },
+    {
+      name: 'theme',
+      title: 'Theme',
+      type: 'themeList',
+      options: {
+        colors: fromNormalTextThemeColors,
+      },
+      hidden: ({ parent }: GridTextBlockDocument) => parent.useThemedTitle,
+      description: 'Use white or black text when background image',
+    },
     {
       name: 'contentAlignment',
       title: 'Content Alignment',

diff --git a/sanityv3/schemas/objects/imageWithAlt.tsx b/sanityv3/schemas/objects/imageWithAlt.tsx
@@ -22,7 +22,6 @@ export default {
       title: 'Image is decorative',
       description:
         'If this image is purely decorative you can disable the alt tag input here. Please note that this makes the image invisible for screen reader users.',
-      initialValue: false,
     },
     {
       name: 'alt',

diff --git a/web/lib/queries/gridContentFields.ts b/web/lib/queries/gridContentFields.ts
@@ -41,10 +41,10 @@ overline,
 useThemedTitle,
 title[]{..., ${markDefs}},
 themedTitle[]{..., ${markDefs}},
-"titleThemeFromNormal": coalesce(titleThemeFromNormal.value, null),
 "titleThemeFromLarger":coalesce(titleThemeFromLarger.value, null),
 content[]{..., ${markDefs}},
 "contentTheme":coalesce(contentTheme.value, null),
+"theme":coalesce(theme.value, null),
 "action": action[0]{
 ${linkSelectorFields},
 ${downloadableFileFields},
@@ -72,17 +72,13 @@ _type == "gridTeaser" => {
     useExtendedThemes,
     content[]{..., ${markDefs}},
     themedContent[]{..., ${markDefs}},
-    "contentThemeFromNormal": coalesce(contentThemeFromNormal.value, null),
-    "contentThemeFromLarger":coalesce(contentThemeFromLarger.value, null),
+    "themeFromLarger": coalesce(themeFromLarger.value, null),
+    "theme":coalesce(theme.value, null),
     author,
     authorTitle,
     quote,
     "imagePosition": coalesce(imagePosition, 'left'),
-    "theme": coalesce(theme.value, null),
-    "image": image {
-      ...,
-      "extension": asset-> extension
-    },
+    image,
     "action": action[0]{
       ${linkSelectorFields},
       ${downloadableFileFields},

diff --git a/web/sections/Grid/GridLinkArrow.tsx b/web/sections/Grid/GridLinkArrow.tsx
@@ -5,44 +5,29 @@ import { BaseLink } from '@core/Link'
 import { getLocaleFromName } from '../../lib/localization'
 import { ArrowRight } from '../../icons'
 import { LinkData } from '../../types/types'
-import { getColorForTheme } from '../../pageComponents/shared/textTeaser/theme'
 
 type GridLinkArrowProps = {
-  theme?: number
   action?: LinkData
   className?: string
-  /* If background image */
-  hasBackgroundImage?: boolean
-  useLight?: boolean
+  bgColor?: string
 }
 
-const GridLinkArrow = ({
-  theme,
-  action,
-  className = '',
-  hasBackgroundImage = false,
-  useLight = false,
-}: GridLinkArrowProps) => {
+const GridLinkArrow = ({ action, className = '', bgColor }: GridLinkArrowProps) => {
   const url = action && getUrlFromAction(action)
-  const { textUtility } = getColorForTheme(theme)
 
   const variantClassName = () => {
-    if (hasBackgroundImage) {
-      if (useLight) {
-        return 'text-slate-80 hover:bg-white-100 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 focus-visible:bg-white-100 focus-visible:text-slate-80'
-    }
-    switch (theme) {
-      case 0:
-        return 'text-energy-red-100 hover:bg-energy-red-100 hover:text-white-100 focus-visible:bg-energy-red-100 focus-visible:text-white-100'
-      case 8:
-        return `text-white-100 hover:bg-white-100 hover:text-blue-50 focus-visible:bg-white-100 focus-visible:text-blue-50`
-      case 10:
+    switch (bgColor) {
+      case 'bg-yellow-50':
+      case 'bg-green-50':
+      case 'bg-orange-50':
+      case 'bg-mist-blue-100':
+        return `text-slate-80 hover:bg-slate-80 hover:text-white-100 focus-visible:bg-slate-80  focus-visible:text-white-100`
+      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`
+      case 'bg-blue-50':
+      case 'bg-slate-80':
       default:
-        return `${theme !== null ? textUtility : ''} hover:bg-white-100 hover:${
-          theme !== null ? textUtility : ''
-        } focus-visible:bg-white-100 focus-visible:${theme !== null ? textUtility : ''}`
+        return `text-white-100 hover:bg-white-100 hover:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80`
     }
   }
 

diff --git a/web/sections/Grid/GridTeaser.tsx b/web/sections/Grid/GridTeaser.tsx
@@ -28,20 +28,33 @@ export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function G
     author,
     authorTitle,
     useExtendedThemes,
-    contentThemeFromLarger,
-    contentThemeFromNormal,
+    themeFromLarger,
     theme,
   } = data
+
   const imageSrc = urlFor(image).size(1200, 800).auto('format').toString()
   const altTag = image?.isDecorative ? '' : image?.alt || ''
 
-  const {
-    backgroundUtility,
-    textUtility: contentTextUtility,
-    dark,
-  } = getColorForTheme(useExtendedThemes ? contentThemeFromLarger : contentThemeFromNormal)
-
-  const contentTextColor = (contentThemeFromNormal || contentThemeFromLarger) !== null ? contentTextUtility : ''
+  let contentTextColor = 'text-slate-80'
+  let bgColor = 'bg-white-100'
+  if (useExtendedThemes && themeFromLarger) {
+    const { backgroundUtility: extendedBg, textUtility: extendedTxt } = getColorForTheme(themeFromLarger)
+    if (extendedTxt) {
+      contentTextColor = extendedTxt
+    }
+    if (extendedBg) {
+      bgColor = extendedBg
+    }
+  }
+  if (theme) {
+    const { backgroundUtility: themeBg, textUtility: themeTxt } = getColorForTheme(theme)
+    if (themeTxt) {
+      contentTextColor = themeTxt
+    }
+    if (themeBg) {
+      bgColor = themeBg
+    }
+  }
 
   return (
     <div
@@ -52,8 +65,7 @@ export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function G
       grid-rows-2
       lg:grid-rows-[250px_1fr]
       ${String(rowType) === 'span3' ? 'lg:grid-cols-[40%_60%] lg:grid-rows-1' : ''}
-      ${backgroundUtility ?? ''}
-      ${dark ? 'dark' : ''}
+      ${bgColor}
       `)}
     >
       {image && (
@@ -119,7 +131,7 @@ export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function G
             </figure>
           )}
         </div>
-        {action && <GridLinkArrow theme={theme} action={action} />}
+        {action && <GridLinkArrow bgColor={bgColor} action={action} />}
       </div>
     </div>
   )