feat: adds option for violet/dark for salary calc

src/components/sections/compensation-calculator/CompensationCalculator.tsx

@@ -1,7 +1,8 @@
 import Text from "src/components/text/Text";
 import { CompensationCalculatorSection } from "studio/lib/interfaces/pages";
-import { COMPENSATIONS_BENEFITS } from "studio/lib/queries/specialPages";
+import { COMPENSATIONS_SALARIES } from "studio/lib/queries/specialPages";
 import { loadStudioQuery } from "studio/lib/store";
+import { SalariesByLocation } from "studio/lib/interfaces/compensations";
 
 import styles from "./compensation-calculator.module.css";
 
@@ -14,19 +15,37 @@ export default async function CompensationCalculator({
   language,
   section,
 }: CompensationCalculatorProps) {
-  const employeesPageRes = await loadStudioQuery<{ slug: string }>(
-    COMPENSATIONS_BENEFITS,
-    {
-      language,
-    },
-  );
-  const compensationCalculator = employeesPageRes.data.slug;
-  console.log(compensationCalculator);
+  const employeesPageRes = await loadStudioQuery<{
+    slug: string;
+    salariesByLocation: SalariesByLocation[];
+  }>(COMPENSATIONS_SALARIES, {
+    language,
+  });
+  console.log(employeesPageRes.data);
+
+  // TODO: add cn util or andIf
+  const calculatorBgClassname =
+    section.background === "violet"
+      ? `${styles.calculator} ${styles["calculator--violet"]}`
+      : styles.calculator;
+  const handbookBgClassname =
+    section.background === "violet"
+      ? `${styles.handbook} ${styles["handbook--violet"]}`
+      : styles.handbook;
 
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.employees}>
-        <Text type="h1">{section.moduleTitle}</Text>
+    <div>
+      <Text type="h2">{section.moduleTitle}</Text>
+
+      <div className={styles.grid}>
+        <div className={calculatorBgClassname}>
+          <Text type="h3">{section.calculatorTitle}</Text>
+          <Text type="bodyBig">{section.calculatorDescription}</Text>
+        </div>
+        <div className={handbookBgClassname}>
+          <Text type="h3">{section.handbookTitle}</Text>
+          <Text type="bodyBig">{section.handbookDescription}</Text>
+        </div>
       </div>
     </div>
   );

src/components/sections/compensation-calculator/compensation-calculator.module.css

@@ -1,80 +1,28 @@
-/* Employees.tsx */
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 5rem 1rem;
-  flex-wrap: wrap;
-
-  max-width: var(--max-content-width-large);
-  margin: 0 auto;
-
-  background: var(--background-bg-light-secondary);
-  padding: 3rem;
-  border-radius: var(--radius-large, 24px);
-
-  @media (max-width: 375px) {
-    padding: 1.5rem;
-  }
-}
-
-.header {
-  color: var(--background-bg-light-primary);
-  font-size: 48px;
-  font-weight: 600;
-  align-self: flex-start;
-}
-
-.employees {
-  display: flex;
-  flex-direction: column;
-  max-width: 1400px;
-  width: 100%;
-  text-wrap: wrap;
-  gap: 0.5rem;
-}
-
-/* EmployeeList.tsx */
-
-.employeeFiltersWrapper {
-  padding: 1.5rem 0;
-  align-self: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.employeeFilterWrapper {
-  flex-wrap: wrap;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1rem;
 }
 
-.employeeFilterLabel {
-  flex-shrink: 0;
-  @media (min-width: 375px) {
-    min-width: 4.5rem;
-    width: 4.5rem;
-  }
-}
+.calculator,
+.handbook {
+  --_calcBg: var(--background-bg-light-secondary);
+  --_calcColor: var(--text-primary-dark);
+  padding: 3rem;
+  border-radius: var(--radius-small);
 
-.peopleCountWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  background-color: var(--_calcBg);
+  color: var(--_calcColor);
 }
-
-.employeeCount {
-  font-size: 16px;
+.calculator {
+  --_calcBg: var(--background-bg-dark);
+  --_calcColor: var(--text-primary-light);
 }
-
-.employeeCountValue {
-  font-weight: 500;
+.calculator--violet {
+  --_calcBg: var(--surface-violet-light);
+  --_calcColor: var(--text-primary-dark);
 }
-
-.peopleContainer {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
+.handbook--violet {
+  --_calcBg: var(--surface-violet);
+  --_calcColor: var(--text-primary-light);
 }

src/styles/global.css

@@ -115,6 +115,8 @@ html {
   --surface-red-light: var(--Red-100);
   --surface-yellow-light: var(--Yellow-50);
   --surface-white: var(--Light-50);
+  --surface-violet-light: var(--Violet-50);
+  --surface-violet: var(--Violet-700);
 
   /* breakpoints */
   --breakpoint-mobile: 425px;

studio/lib/interfaces/pages.ts

@@ -5,6 +5,7 @@ import { SeoData } from "src/utils/seo";
 import { Slug } from "./global";
 import { IImage, ImageExtendedProps } from "./media";
 import { ILink } from "./navigation";
+import { CompensationCalculatorBackground } from "studio/schemas/objects/sections/compensation-calculator";
 
 export interface HeroSection {
   _type: "hero";
@@ -91,10 +92,11 @@ export interface CompensationCalculatorSection {
   _type: "compensationCalculator";
   _key: string;
   moduleTitle: string;
+  background: CompensationCalculatorBackground;
   calculatorTitle: string;
-  calculatorDescription: PortableTextBlock[];
+  calculatorDescription: string;
   handbookTitle: string;
-  handbookDescription: PortableTextBlock[];
+  handbookDescription: string;
 }
 
 export type Section =

studio/lib/queries/pages.ts

@@ -37,9 +37,9 @@ const SECTIONS_FRAGMENT = groq`
     _type == "compensationCalculator" => {
       "moduleTitle": ${translatedFieldFragment("moduleTitle")},
       "calculatorTitle": ${translatedFieldFragment("calculatorTitle")},
-      "calculatorDesc": ${translatedFieldFragment("calculatorDesc")},
+      "calculatorDescription": ${translatedFieldFragment("calculatorDescription")},
       "handbookTitle": ${translatedFieldFragment("handbookTitle")},
-      "handbookDesc": ${translatedFieldFragment("handbookDesc")}
+      "handbookDescription": ${translatedFieldFragment("handbookDescription")}
     },
     _type == "employees" => {
       "basicTitle": ${translatedFieldFragment("basicTitle")}

studio/lib/queries/specialPages.ts

@@ -26,17 +26,11 @@ export const COMPENSATIONS_PAGE_BY_SLUG_QUERY = groq`
     },
   }
 `;
-export const COMPENSATIONS_BENEFITS = groq`
+export const COMPENSATIONS_SALARIES = groq`
   *[_type == "compensations"][0] {
-    ...,
-    ${LANGUAGE_FIELD_FRAGMENT},
-    "benefitsByLocation": benefitsByLocation[] {
-      ...,
-      "benefits": benefits[] {
-        ...,
-        "basicTitle": ${translatedFieldFragment("basicTitle")},
-        "richText": ${translatedFieldFragment("richText")}
-      }
+    "slug": ${translatedFieldFragment("slug")},
+    "salariesByLocation": salariesByLocation[] {
+      ...
     },
   }
 `;

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

@@ -2,6 +2,16 @@ import { defineField } from "sanity";
 
 export const compensationCalculatorId = "compensationCalculator";
 
+export enum CompensationCalculatorBackground {
+  Dark = "dark",
+  Violet = "violet",
+}
+
+const backgroundOptions = [
+  { title: "Dark", value: CompensationCalculatorBackground.Dark },
+  { title: "Violet", value: CompensationCalculatorBackground.Violet },
+];
+
 export const compensationCalculator = defineField({
   name: compensationCalculatorId,
   title: "Compensation Calculator",
@@ -17,6 +27,19 @@ export const compensationCalculator = defineField({
         { _key: "no", value: "Ansattopplevelsen" },
       ],
     },
+    {
+      name: "background",
+      title: "Background",
+      type: "string",
+      description:
+        "Select the whether the calculator should be purple or have dark background.",
+      options: {
+        list: backgroundOptions,
+        layout: "radio",
+      },
+      initialValue: CompensationCalculatorBackground.Dark,
+    },
+
     {
       name: "calculatorTitle",
       type: "internationalizedArrayString",
@@ -28,7 +51,7 @@ export const compensationCalculator = defineField({
       ],
     },
     {
-      name: "calculatorDesc",
+      name: "calculatorDescription",
       title: "Calculator Description",
       type: "internationalizedArrayString",
       description: "Description that will be displayed inside the calculator.",
@@ -56,7 +79,7 @@ export const compensationCalculator = defineField({
       ],
     },
     {
-      name: "handbookDesc",
+      name: "handbookDescription",
       title: "Handbook Description",
       type: "internationalizedArrayString",
       description: