Alert banner

lib/sanity/queries.tsx

@@ -33,6 +33,8 @@ export const modules = `
     variant,
     headingLevel,
     text,
+    color,
+    overlay,
     link {
       title,
       reference->{title, slug, "locale": language}

lib/sanity/schemas/documents/usp.tsx

@@ -1,7 +1,6 @@
-import {StarIcon} from '@sanity/icons'
-import {defineField} from 'sanity'
-import {languages} from '../../languages'
-import {validateImage} from '../../utils/validation'
+import { StarIcon } from '@sanity/icons';
+import { defineField } from 'sanity';
+import { languages } from '../../languages';
 
 export default defineField({
   name: 'usp',
@@ -13,7 +12,7 @@ export default defineField({
       name: 'language',
       type: 'string',
       readOnly: true,
-      description: 'Language of this document.',
+      description: 'Language of this document.'
       // hidden: true,
     }),
     // Title
@@ -22,15 +21,14 @@ export default defineField({
       title: 'Title',
       type: 'string',
       description: 'USP title',
-      validation: (Rule) => Rule.required(),
+      validation: (Rule) => Rule.required()
     }),
     // Image
     defineField({
       name: 'image',
       title: 'Image',
       type: 'mainImage',
-      description: 'USP icon',
-      validation: (Rule) => validateImage(Rule, true),
+      description: 'USP icon'
     }),
     // Text
     defineField({
@@ -38,25 +36,25 @@ export default defineField({
       title: 'Text',
       type: 'text',
       description: 'Small text displayed below title.',
-      rows: 5,
-    }),
+      rows: 5
+    })
   ],
   preview: {
     select: {
       title: 'title',
       image: 'image',
-      language: 'language',
+      language: 'language'
     },
     prepare(selection) {
-      const {image, title, language} = selection
+      const { image, title, language } = selection;
 
-      const currentLang = languages.find((lang) => lang.id === language)
+      const currentLang = languages.find((lang) => lang.id === language);
 
       return {
         media: image,
         title,
-        subtitle: `${currentLang ? currentLang.title : ''}`,
-      }
-    },
-  },
-})
+        subtitle: `${currentLang ? currentLang.title : ''}`
+      };
+    }
+  }
+});

lib/sanity/schemas/objects/hero.ts

@@ -1,5 +1,5 @@
-import {defineField} from 'sanity'
-import {StarIcon} from '@sanity/icons'
+import { StarIcon } from '@sanity/icons'
+import { defineField } from 'sanity'
 import { validateImage } from '../../utils/validation'
 
 export default defineField({
@@ -58,6 +58,30 @@ export default defineField({
         layout: 'radio',
       },
     },
+    {
+      name: 'color',
+      type: 'string',
+      title: 'Color',
+      initialValue: 'dark',
+      fieldset: 'settings',
+      description: 'Set appropriate color depending on image characteristics.',
+      options: {
+        list: [
+          {title: 'Dark', value: 'dark'},
+          {title: 'Light', value: 'light'},
+        ],
+        layout: 'radio',
+      },
+    },
+    {
+      name: 'overlay',
+      type: 'boolean',
+      title: 'Overlay?',
+      fieldset: 'settings',
+      description: 'Adds a dark overlay to the image.',
+      initialValue: false,
+      validation: (Rule) => Rule.required(),
+    },
     {
       name: 'label',
       type: 'string',
@@ -101,7 +125,6 @@ export default defineField({
       title: 'Link',
       description: 'Link to internal page.',
       options: {
-        collapsed: true,
         collapsible: true,
       },
     },