feat: add GenerositySection

src/components/sections/generosity/Generosity.tsx

@@ -0,0 +1,37 @@
+import { Handbook } from "src/components/sections/compensation-calculator/CompensationCalculator";
+import SmileyBox from "src/components/smileyBox/SmileyBox";
+import Text from "src/components/text/Text";
+import { GenerositySection } from "studio/lib/interfaces/pages";
+import { CompensationCalculatorBackground } from "studio/schemas/objects/sections/compensation-calculator";
+
+import styles from "./generosity.module.css";
+
+export interface GenerosityProps {
+  section: GenerositySection;
+  language: string;
+}
+
+export default function Generosity({ section, language }: GenerosityProps) {
+  return (
+    <div className={styles.wrapper}>
+      <Text type={"h2"} className={styles.title}>
+        {section.basicTitle}
+      </Text>
+      <div className={styles.content}>
+        <SmileyBox
+          description={section.description}
+          smileySide="right"
+          smileyType="smug"
+          backgroundColor="purple"
+        />
+        <Handbook
+          title={section.handbookBlock.handbookTitle}
+          description={section.handbookBlock.handbookDescription}
+          link={section.handbookBlock.handbookLink}
+          sectionBackground={CompensationCalculatorBackground.Violet}
+          language={language}
+        />
+      </div>
+    </div>
+  );
+}

src/components/sections/generosity/generosity.module.css

@@ -0,0 +1,53 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: var(--max-content-width-large);
+  margin: 5rem auto;
+  gap: 2rem;
+  color: var(--text-primary);
+}
+
+.title {
+  width: 40rem;
+  color: var(--text-primary);
+
+  @media (max-width: 834px) {
+    width: 25.875rem;
+  }
+
+  @media (max-width: 425px) {
+    width: 19.4375rem;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0.25rem;
+  gap: 1rem;
+
+  height: 30rem;
+
+  & > :first-child {
+    flex: 1;
+  }
+
+  & > :last-child {
+    flex: 2;
+  }
+
+  & > :first-child,
+  & > :last-child {
+    height: 100%;
+  }
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+    height: unset;
+  }
+}

src/components/smileyBox/SmileyBox.tsx

@@ -1,15 +1,59 @@
+import { CSSProperties } from "react";
+
 import Text from "src/components/text/Text";
 
 import styles from "./smileyBox.module.css";
 
+const smileys = {
+  shock: {
+    url: "url(/_assets/smiley-face-shock.svg)",
+    height: "4.1875rem",
+    width: "4.1875rem",
+  },
+  happy: {
+    url: "url(/_assets/smiley-face-happy.svg)",
+    width: "4.86119rem",
+    height: "4.86119rem",
+  },
+  smug: {
+    url: "url(/_assets/smiley-face-smug.svg)",
+    width: "4.375rem",
+    height: "4.375rem",
+  },
+} as const;
+
+const backgroundColors = {
+  green: "#dafbdc",
+  purple: "#f0ebfe",
+  blue: "#f2f3fd",
+} as const;
+
 type SmileyBoxProps = {
   background?: "dark" | "light";
+  backgroundColor?: keyof typeof backgroundColors;
+  smileyType?: keyof typeof smileys;
+  smileySide?: "left" | "right";
   description: string;
 };
 
-export default function SmileyBox({ description }: SmileyBoxProps) {
+export default function SmileyBox({
+  description,
+  backgroundColor,
+  smileySide,
+  smileyType,
+}: SmileyBoxProps) {
+  const smiley = smileys[smileyType ?? "happy"];
+  const cssVariables = {
+    "--smiley-url": smiley.url,
+    "--smiley-width": smiley.width,
+    "--smiley-height": smiley.height,
+    "--smiley-background-color": backgroundColors[backgroundColor ?? "green"],
+    "--smiley-align":
+      (smileySide ?? "left") === "left" ? "flex-start" : "flex-end",
+  } as CSSProperties;
+
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} style={cssVariables}>
       <div className={styles.smiley} />
       <div className={styles.description}>
         <Text type={"h3"}>{description}</Text>

src/components/smileyBox/smileyBox.module.css

@@ -7,7 +7,7 @@
   min-width: 19.75rem;
   padding: 2.25rem;
   border-radius: 6rem 6rem 0.375rem 0.375rem;
-  background-color: #dafbdc;
+  background-color: var(--smiley-background-color);
 
   @media (max-width: 834px) {
     align-self: stretch;
@@ -22,14 +22,16 @@
 }
 
 .smiley {
+  align-self: var(--smiley-align);
+
   &::before {
     content: "";
     display: block;
-    width: 4.86119rem;
-    height: 4.86119rem;
-    -webkit-mask: url("/_assets/happy-smiley-face.svg") no-repeat center;
+    width: var(--smiley-width);
+    height: var(--smiley-height);
+    -webkit-mask: var(--smiley-url) no-repeat center;
     -webkit-mask-size: cover;
-    mask: url("/_assets/happy-smiley-face.svg") no-repeat center;
+    mask: var(--smiley-url) no-repeat center;
     mask-size: cover;
     background-color: var(--text-primary);
   }

src/utils/renderSection.tsx

@@ -11,6 +11,7 @@ import ContactBox from "src/components/sections/contact-box/ContactBox";
 import CustomerCasesEntry from "src/components/sections/customerCasesEntry/CustomerCasesEntry";
 import EmployeeHighlight from "src/components/sections/employeeHighlight/EmployeeHighlight";
 import Employees from "src/components/sections/employees/Employees";
+import Generosity from "src/components/sections/generosity/Generosity";
 import Grid from "src/components/sections/grid/Grid";
 import GridPreview from "src/components/sections/grid/GridPreview";
 import { Hero } from "src/components/sections/hero/Hero";
@@ -292,6 +293,8 @@ const SectionRenderer = ({
       return <EmployeeHighlight section={section} />;
     case "opennessSection":
       return <Openness section={section} />;
+    case "generositySection":
+      return <Generosity section={section} language={language} />;
     default:
       return null;
   }

studio/lib/interfaces/pages.ts

@@ -148,6 +148,19 @@ export interface CompensationCalculatorSection {
   };
 }
 
+export interface GenerositySection {
+  _type: "generositySection";
+  _key: string;
+  basicTitle: string;
+  description: string;
+
+  handbookBlock: {
+    handbookTitle: string;
+    handbookDescription: string;
+    handbookLink: ILink;
+  };
+}
+
 export interface EmployeeHighlightSection {
   _type: "employeeHighlight";
   _key: string;
@@ -182,7 +195,8 @@ export type Section =
   | EmployeeHighlightSection
   | CompensationCalculatorSection
   | JobsSection
-  | OpennessSection;
+  | OpennessSection
+  | GenerositySection;
 
 export interface PageBuilder {
   _createdAt: string;

studio/lib/queries/pages.ts

@@ -104,6 +104,20 @@ const SECTIONS_FRAGMENT = groq`
     _type == "opennessSection" => {
       "basicTitle": ${translatedFieldFragment("basicTitle")},
       "description": ${translatedFieldFragment("description")},
+    },
+    _type == "generositySection" => {
+      ...,
+      "basicTitle": ${translatedFieldFragment("basicTitle")},
+      "description": ${translatedFieldFragment("description")},
+      "handbookBlock": handbookBlock {
+        ...,
+        "handbookTitle": ${translatedFieldFragment("handbookTitle")},
+        "handbookDescription": ${translatedFieldFragment("handbookDescription")},
+        "handbookLink": handbookLink {
+          ...,
+          ${TRANSLATED_LINK_FRAGMENT}
+        }
+      }
     }
   }
 `;

studio/schemas/documents/pageBuilder.ts

@@ -8,6 +8,7 @@ import contactBox from "studio/schemas/objects/sections/contact-box";
 import { customerCasesEntry } from "studio/schemas/objects/sections/customerCasesEntry";
 import { employeeHighlightSection } from "studio/schemas/objects/sections/employeeHighlight";
 import { employees } from "studio/schemas/objects/sections/employees";
+import { generositySection } from "studio/schemas/objects/sections/generosity";
 import hero from "studio/schemas/objects/sections/hero";
 import imageSection from "studio/schemas/objects/sections/image";
 import imageSplitSection from "studio/schemas/objects/sections/imagesplit";
@@ -59,6 +60,7 @@ const pageBuilder = defineType({
         employeeHighlightSection,
         compensationCalculator,
         opennessSection,
+        generositySection,
       ],
     }),
   ],

studio/schemas/objects/sections/compensation-calculator.ts

@@ -120,7 +120,7 @@ export const compensationCalculator = defineField({
             {
               _key: "no",
               value:
-                "Ord og handling bør gå hånd i hånd. Alt om oss, regler og finner du i håndboken. Endrer vi på oss, endrer vi håndboken.",
+                "Ord og handling bør gå hånd i hånd. Alt om oss, regler og mer finner du i håndboken. Endrer vi på oss, endrer vi håndboken.",
             },
           ],
         },

studio/schemas/objects/sections/generosity.ts

@@ -0,0 +1,82 @@
+import { defineField } from "sanity";
+
+import { titleID } from "studio/schemas/fields/text";
+import { link } from "studio/schemas/objects/link";
+
+export const generosityID = "generositySection";
+
+export const generositySection = defineField({
+  name: generosityID,
+  title: "Generosity",
+  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",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "description",
+      title: "Description",
+      description:
+        "Enter the description that will be displayed in the smiley block.",
+      type: "internationalizedArrayString",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "handbookBlock",
+      type: "object",
+
+      fields: [
+        {
+          name: "handbookTitle",
+          type: "internationalizedArrayString",
+          title: "Handbook Title",
+          description:
+            "Title that will be displayed inside the handbook section.",
+          initialValue: [
+            { _key: "en", value: "Handbook" },
+            { _key: "no", value: "Håndbok" },
+          ],
+        },
+        {
+          name: "handbookDescription",
+          title: "Handbook Description",
+          type: "internationalizedArrayString",
+          description:
+            "Description that will be displayed inside the handbook section.",
+
+          initialValue: [
+            {
+              _key: "en",
+              value:
+                "Words and actions should go hand in hand. All about us, rules and more you can find in the handbook. If we change, we change the handbook.",
+            },
+            {
+              _key: "no",
+              value:
+                "Ord og handling bør gå hånd i hånd. Alt om oss, regler og mer finner du i håndboken. Endrer vi på oss, endrer vi håndboken.",
+            },
+          ],
+        },
+
+        {
+          ...link,
+          name: "handbookLink",
+          description:
+            "Bottom link that will be displayed inside the handbook section.",
+        },
+      ],
+    },
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: "Generosity Section",
+      };
+    },
+  },
+});