diff --git a/src/components/sections/employeeHighlight/EmployeeHighlight.tsx b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx new file mode 100644 index 000000000..77af34328 --- /dev/null +++ b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx @@ -0,0 +1,32 @@ +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 ( +
+
+ +
+
+
+ + {section.basicTitle} + +
+ + {section.name} + +
+
+ {section.description} +
+
+ ); +} diff --git a/src/components/sections/employeeHighlight/employeeHighlight.module.css b/src/components/sections/employeeHighlight/employeeHighlight.module.css new file mode 100644 index 000000000..ee99d935d --- /dev/null +++ b/src/components/sections/employeeHighlight/employeeHighlight.module.css @@ -0,0 +1,69 @@ +.wrapper { + display: flex; + flex-direction: row; + justify-content: center; + padding: 0 2rem; + max-width: 64rem; + margin: 5rem auto; + gap: 1.5rem; + color: var(--text-primary); + + @media (max-width: 834px) { + flex-direction: column; + margin-left: 2rem; + margin-right: 2rem; + } +} + +.image { + min-width: 20rem; + width: 100%; + height: auto; + object-fit: cover; + + & img { + border-radius: 0.375rem; + } + + @media (max-width: 834px) { + max-width: 60%; + } +} + +.textContainer { + display: flex; + flex-direction: column; + gap: 0.625rem; +} + +.titleContainer { + 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; + padding: 0.25rem 0.75rem 0.125rem 0.75rem; + border-radius: 1.5rem; + background-color: var(--text-primary-light); +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 5239578f6..1908e8fd9 100644 --- a/src/utils/renderSection.tsx +++ b/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 ; case "jobs": return ; + case "employeeHighlight": + return ; default: return null; } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 59466a7d6..01c692109 100644 --- a/studio/lib/interfaces/pages.ts +++ b/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; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index 573c59f60..06bcf9d4e 100644 --- a/studio/lib/queries/pages.ts +++ b/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")}, } } `; diff --git a/studio/schema.ts b/studio/schema.ts index 8fbc2f74e..96d364e35 100644 --- a/studio/schema.ts +++ b/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, ], }; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index 3a9734f8d..855b3cc9f 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/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, ], }), ], diff --git a/studio/schemas/objects/sections/employeeHighlight.ts b/studio/schemas/objects/sections/employeeHighlight.ts new file mode 100644 index 000000000..779a785d2 --- /dev/null +++ b/studio/schemas/objects/sections/employeeHighlight.ts @@ -0,0 +1,59 @@ +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: "internationalizedArrayText", + title: "Description", + description: "The body text in the section.", + }, + { + name: "employeePhoto", + type: "image", + title: "Employee photo", + description: "A photo of the employee,", + options: { + hotspot: true, + }, + }, + ], + 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", + }; + }, + }, +});