diff --git a/src/components/sections/compensation-calculator/CompensationCalculator.tsx b/src/components/sections/compensation-calculator/CompensationCalculator.tsx index dd98edcbb..bb354512c 100644 --- a/src/components/sections/compensation-calculator/CompensationCalculator.tsx +++ b/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 ( -
-
- {section.moduleTitle} +
+ {section.moduleTitle} + +
+
+ {section.calculatorTitle} + {section.calculatorDescription} +
+
+ {section.handbookTitle} + {section.handbookDescription} +
); diff --git a/src/components/sections/compensation-calculator/compensation-calculator.module.css b/src/components/sections/compensation-calculator/compensation-calculator.module.css index 01a0e1ebf..3570c0223 100644 --- a/src/components/sections/compensation-calculator/compensation-calculator.module.css +++ b/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); } diff --git a/src/styles/global.css b/src/styles/global.css index d0aa6e94f..d4e4142e5 100644 --- a/src/styles/global.css +++ b/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; diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 808831f19..27736ee99 100644 --- a/studio/lib/interfaces/pages.ts +++ b/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 = diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index b229d5276..da7ea974d 100644 --- a/studio/lib/queries/pages.ts +++ b/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")} diff --git a/studio/lib/queries/specialPages.ts b/studio/lib/queries/specialPages.ts index e5c401604..781a4eb90 100644 --- a/studio/lib/queries/specialPages.ts +++ b/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[] { + ... }, } `; diff --git a/studio/schemas/objects/sections/compensation-calculator.ts b/studio/schemas/objects/sections/compensation-calculator.ts index 251e1c475..8997cc5fa 100644 --- a/studio/schemas/objects/sections/compensation-calculator.ts +++ b/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: