✨ Add Employee highlight section

src/components/sections/employeeHighlight/EmployeeHighlight.tsx

@@ -0,0 +1,34 @@
+import { SanityImage } from "src/components/image/SanityImage";
+import Text from "src/components/text/Text";
+import { EmployeeHighlightSection } from "studio/lib/interfaces/pages";
+
+import styles from "./employeeHighlight.module.css";
+
+export interface EmployeeHighlightProps {
+  section: EmployeeHighlightSection;
+}
+
+export default function EmployeeHighLight({ section }: EmployeeHighlightProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.image}>
+        <SanityImage image={section.employeePhoto} />
+      </div>
+      <div>
+        <div className={styles.titleSection}>
+          <Text type={"h5"} className={styles.title}>
+            {section.basicTitle}
+          </Text>
+          <div className={styles.nameContainer}>
+            <Text type={"h2"} className={styles.name}>
+              {section.name}
+            </Text>
+          </div>
+        </div>
+        <Text type={"bodyNormal"} className={styles.description}>
+          {section.description}
+        </Text>
+      </div>
+    </div>
+  );
+}

src/components/sections/employeeHighlight/employeeHighlight.module.css

@@ -0,0 +1,83 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 2rem 0.375rem 0.375rem 0.375rem;
+  max-width: 68rem;
+  margin: 5rem auto;
+  border-radius: 0.375rem;
+  gap: 1.5rem;
+  color: var(--text-primary);
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.titleSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.title {
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem 0.25rem 0rem 0rem;
+  background-color: var(--Violet-700);
+  color: var(--text-primary-light);
+}
+
+.nameContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0.25rem;
+  gap: 0.5rem;
+  border-radius: 0rem 0.25rem 0.25rem 0.25rem;
+  background: var(--Purple-700, #7022d6);
+}
+
+.name {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 0.75rem 1.25rem 0.625rem 1.25rem;
+  border: 1px solid var(--Violet-700);
+  border-radius: 1.5rem;
+  background-color: var(--text-primary-light);
+}
+
+.description {
+  width: 100%;
+  text-wrap: wrap;
+}
+
+.image {
+  border-radius: 0.75rem;
+  overflow: hidden;
+
+  min-width: 150px;
+  max-width: 15rem;
+
+  @media (min-width: 640px) {
+    min-width: 240px;
+    max-width: 21.25rem;
+  }
+
+  @media (min-width: 1024px) {
+    min-width: 260px;
+    max-width: 21.25rem;
+  }
+
+  @media (min-width: 1400px) {
+    min-width: 360px;
+    max-width: 27.5rem;
+  }
+
+  @media (min-width: 1800px) {
+    min-width: 460px;
+    max-width: 33.75rem;
+  }
+}

src/utils/renderSection.tsx

@@ -7,6 +7,7 @@ import CalloutPreview from "src/components/sections/callout/CalloutPreview";
 import CallToAction from "src/components/sections/callToAction/CallToAction";
 import CallToActionPreview from "src/components/sections/callToAction/CallToActionPreview";
 import ContactBox from "src/components/sections/contact-box/ContactBox";
+import EmployeeHighlight from "src/components/sections/employeeHighlight/EmployeeHighlight";
 import Employees from "src/components/sections/employees/Employees";
 import Grid from "src/components/sections/grid/Grid";
 import GridPreview from "src/components/sections/grid/GridPreview";
@@ -258,6 +259,8 @@ const SectionRenderer = ({
       return <Employees language={language} section={section} />;
     case "jobs":
       return <Jobs language={language} section={section} />;
+    case "employeeHighlight":
+      return <EmployeeHighlight section={section} />;
     default:
       return null;
   }

studio/lib/interfaces/pages.ts

@@ -116,6 +116,15 @@ export interface JobsSection {
   subtitle: string;
 }
 
+export interface EmployeeHighlightSection {
+  _type: "employeeHighlight";
+  _key: string;
+  basicTitle: string;
+  name: string;
+  description: string;
+  employeePhoto: IImage;
+}
+
 export type Section =
   | HeroSection
   | LogoSaladSection
@@ -128,7 +137,8 @@ export type Section =
   | GridSection
   | ContactBoxSection
   | EmployeesSection
-  | JobsSection;
+  | JobsSection
+  | EmployeeHighlightSection;
 
 export interface PageBuilder {
   _createdAt: string;

studio/lib/queries/pages.ts

@@ -53,6 +53,10 @@ const SECTIONS_FRAGMENT = groq`
     _type == "jobs" => {
       "basicTitle": ${translatedFieldFragment("basicTitle")},
       "subtitle": ${translatedFieldFragment("subtitle")}
+    },
+    _type == "employeeHighlight" => {
+      "basicTitle": ${translatedFieldFragment("basicTitle")},
+      "description": ${translatedFieldFragment("description")},
     }
   }
 `;

studio/schema.ts

@@ -20,6 +20,7 @@ import benefitsByLocation from "./schemas/objects/compensations/benefitsByLocati
 import { footerSection } from "./schemas/objects/footerSection";
 import jobPosting from "./schemas/objects/jobPosting";
 import { link } from "./schemas/objects/link";
+import { employeeHighlightSection } from "./schemas/objects/sections/employeeHighlight";
 import seo from "./schemas/objects/seo";
 import { socialMedia } from "./schemas/objects/socialMedia";
 
@@ -47,5 +48,6 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     announcement,
     jobPosting,
     jobPostings,
+    employeeHighlightSection,
   ],
 };

studio/schemas/documents/pageBuilder.ts

@@ -6,6 +6,7 @@ import article from "studio/schemas/objects/sections/article";
 import callout from "studio/schemas/objects/sections/callout";
 import callToAction from "studio/schemas/objects/sections/callToAction";
 import contactBox from "studio/schemas/objects/sections/contact-box";
+import { employeeHighlightSection } from "studio/schemas/objects/sections/employeeHighlight";
 import { employees } from "studio/schemas/objects/sections/employees";
 import grid from "studio/schemas/objects/sections/grid";
 import hero from "studio/schemas/objects/sections/hero";
@@ -55,6 +56,7 @@ const pageBuilder = defineType({
         employees,
         contactBox,
         jobs,
+        employeeHighlightSection,
       ],
     }),
   ],

studio/schemas/objects/sections/employeeHighlight.ts

@@ -0,0 +1,56 @@
+import { defineField } from "sanity";
+
+import { isInternationalizedString } from "studio/lib/interfaces/global";
+import { titleID } from "studio/schemas/fields/text";
+import { firstTranslation } from "studio/utils/i18n";
+
+export const employeeHighlightID = "employeeHighlight";
+
+export const employeeHighlightSection = defineField({
+  name: employeeHighlightID,
+  title: "Employee Highlight",
+  type: "object",
+  fields: [
+    {
+      name: titleID.basic,
+      type: "internationalizedArrayString",
+      title: "Title",
+      description: "The title/prefix that will appear above the name block.",
+    },
+    {
+      name: "name",
+      type: "string",
+      title: "Name",
+      description: "The name of the employee.",
+    },
+    {
+      name: "description",
+      type: "internationalizedArrayString",
+      title: "Description",
+      description: "The body text in the section.",
+    },
+    {
+      name: "employeePhoto",
+      type: "image",
+      title: "Employee photo",
+      description: "A photo of the employee,",
+    },
+  ],
+  preview: {
+    select: {
+      title: "basicTitle",
+      name: "name",
+    },
+    prepare({ title, name }) {
+      if (!isInternationalizedString(title)) {
+        throw new TypeError(
+          `Expected 'title' to be InternationalizedString, was ${typeof title}`,
+        );
+      }
+      return {
+        title: `${firstTranslation(title) ?? ""} ${name}`,
+        subtitle: "Employee highlight",
+      };
+    },
+  },
+});