diff --git a/public/_assets/happy-smiley-face.svg b/public/_assets/happy-smiley-face.svg new file mode 100644 index 000000000..7cd0708ef --- /dev/null +++ b/public/_assets/happy-smiley-face.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/components/sections/openness/Openness.tsx b/src/components/sections/openness/Openness.tsx new file mode 100644 index 000000000..6df256b6e --- /dev/null +++ b/src/components/sections/openness/Openness.tsx @@ -0,0 +1,26 @@ +import { SanityImage } from "src/components/image/SanityImage"; +import SmileyBox from "src/components/smileyBox/SmileyBox"; +import Text from "src/components/text/Text"; +import { OpennessSection } from "studio/lib/interfaces/pages"; + +import styles from "./openness.module.css"; + +export interface OpennessProps { + section: OpennessSection; +} + +export default function Openness({ section }: OpennessProps) { + return ( +
+
+ {section.basicTitle} +
+
+
+ +
+ +
+
+ ); +} diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css new file mode 100644 index 000000000..1eef0508c --- /dev/null +++ b/src/components/sections/openness/openness.module.css @@ -0,0 +1,32 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + max-width: var(--max-content-width-large); + padding: 0 2rem; + margin: 5rem auto; + gap: 2rem; + color: var(--text-primary); +} + +.image { + height: 30rem; + + & img { + border-radius: 0.375rem 6rem 0.375rem 0.375rem; + } +} + +.title { + width: 40rem; + color: var(--text-primary); +} + +.content { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0.25rem; + gap: 1rem; +} diff --git a/src/components/smileyBox/SmileyBox.tsx b/src/components/smileyBox/SmileyBox.tsx new file mode 100644 index 000000000..d1cfb9878 --- /dev/null +++ b/src/components/smileyBox/SmileyBox.tsx @@ -0,0 +1,19 @@ +import Text from "src/components/text/Text"; + +import styles from "./smileyBox.module.css"; + +type SmileyBoxProps = { + background?: "dark" | "light"; + description: string; +}; + +export default function SmileyBox({ description }: SmileyBoxProps) { + return ( + description && ( +
+
+ {description} +
+ ) + ); +} diff --git a/src/components/smileyBox/smileyBox.module.css b/src/components/smileyBox/smileyBox.module.css new file mode 100644 index 000000000..4f233579d --- /dev/null +++ b/src/components/smileyBox/smileyBox.module.css @@ -0,0 +1,25 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height: 30rem; + min-width: var(19.75rem); + padding: 2.25rem; + border-radius: 6rem 6rem 0.375rem 0.375rem; + background-color: #dafbdc; +} + +.smiley { + &::before { + content: ""; + display: block; + width: 4.86119rem; + height: 4.86119rem; + -webkit-mask: url("/_assets/happy-smiley-face.svg") no-repeat center; + -webkit-mask-size: cover; + mask: url("/_assets/happy-smiley-face.svg") no-repeat center; + mask-size: cover; + background-color: var(--text-primary); + } +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 3795d5c0d..cd85bae1d 100644 --- a/src/utils/renderSection.tsx +++ b/src/utils/renderSection.tsx @@ -22,6 +22,7 @@ import ImageSectionComponentPreview from "src/components/sections/imageSection/I import Jobs from "src/components/sections/jobs/Jobs"; import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad"; import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview"; +import Openness from "src/components/sections/openness/Openness"; import { Testimonials } from "src/components/sections/testimonials/Testimonials"; import TestimonialsPreview from "src/components/sections/testimonials/TestimonialsPreview"; import { Locale } from "src/i18n/routing"; @@ -289,6 +290,8 @@ const SectionRenderer = ({ return ; case "employeeHighlight": return ; + case "opennessSection": + return ; default: return null; } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 5202444ac..3bbb856a1 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -101,7 +101,7 @@ export interface ContactBoxSection { _key: string; basicTitle: string; optionalSubtitle?: string; - background: "light" | "dark"; + background: "light" | "dark" | "transparent"; contactPoints: { _key: string; _type: string; @@ -158,6 +158,14 @@ export interface EmployeeHighlightSection { employeePhoto: IImage; } +export interface OpennessSection { + _type: "opennessSection"; + _key: string; + basicTitle: string; + image: IImage; + description: string; +} + export type Section = | HeroSection | LogoSaladSection @@ -174,7 +182,8 @@ export type Section = | EmployeesSection | EmployeeHighlightSection | CompensationCalculatorSection - | JobsSection; + | JobsSection + | OpennessSection; export interface PageBuilder { _createdAt: string; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index 69766a785..ae1fff0d8 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -85,6 +85,10 @@ const SECTIONS_FRAGMENT = groq` _type == "employeeHighlight" => { "basicTitle": ${translatedFieldFragment("basicTitle")}, "description": ${translatedFieldFragment("description")}, + }, + _type == "opennessSection" => { + "basicTitle": ${translatedFieldFragment("basicTitle")}, + "description": ${translatedFieldFragment("description")}, } } `; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index f3a712b8d..fd723affa 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -16,6 +16,7 @@ import imageSection from "studio/schemas/objects/sections/image"; import imageSplitSection from "studio/schemas/objects/sections/imagesplit"; import { jobs } from "studio/schemas/objects/sections/jobs"; import logoSalad from "studio/schemas/objects/sections/logoSalad"; +import { opennessSection } from "studio/schemas/objects/sections/openness"; import testimonals from "studio/schemas/objects/sections/testimonials"; import seo from "studio/schemas/objects/seo"; import { titleSlug } from "studio/schemas/schemaTypes/slug"; @@ -61,6 +62,7 @@ const pageBuilder = defineType({ jobs, employeeHighlightSection, compensationCalculator, + opennessSection, ], }), ], diff --git a/studio/schemas/objects/sections/openness.ts b/studio/schemas/objects/sections/openness.ts new file mode 100644 index 000000000..4e6fd6937 --- /dev/null +++ b/studio/schemas/objects/sections/openness.ts @@ -0,0 +1,42 @@ +import { defineField } from "sanity"; + +import { titleID } from "studio/schemas/fields/text"; +export const opennessID = "opennessSection"; + +export const opennessSection = defineField({ + name: opennessID, + title: "Openness", + type: "object", + fields: [ + { + name: titleID.basic, + title: "Title", + description: + "Enter the primary title that will be displayed at the top of the section.", + type: "internationalizedArrayString", + }, + { + name: "image", + type: "image", + title: "Image", + description: "An image of the openness", + options: { + hotspot: true, + }, + }, + { + name: "description", + title: "Description", + description: + "Enter the description that will be displayed in the smiley block.", + type: "internationalizedArrayString", + }, + ], + preview: { + prepare() { + return { + title: "Openness Section", + }; + }, + }, +});