diff --git a/src/components/sections/compensation-calculator/CompensationCalculator.tsx b/src/components/sections/compensation-calculator/CompensationCalculator.tsx new file mode 100644 index 000000000..a853fa5b0 --- /dev/null +++ b/src/components/sections/compensation-calculator/CompensationCalculator.tsx @@ -0,0 +1,35 @@ +import Text from "src/components/text/Text"; +import { CompensationCalculatorSection } from "studio/lib/interfaces/pages"; +import { loadStudioQuery } from "studio/lib/store"; + +import { + COMPENSATIONS_BENEFITS, + COMPENSATIONS_PAGE_BY_SLUG_QUERY, +} from "studio/lib/queries/specialPages"; +import styles from "./compensation-calculator.module.css"; + +export interface CompensationCalculatorProps { + language: string; + section: CompensationCalculatorSection; +} + +export default async function CompensationCalculator({ + language, + section, +}: CompensationCalculatorProps) { + const employeesPageRes = await loadStudioQuery<{ slug: string }>( + COMPENSATIONS_BENEFITS, + { + language, + }, + ); + const compensationCalculator = employeesPageRes.data.slug; + + return ( +
+
+ {section.moduleTitle} +
+
+ ); +} diff --git a/src/components/sections/compensation-calculator/compensation-calculator.module.css b/src/components/sections/compensation-calculator/compensation-calculator.module.css new file mode 100644 index 000000000..01a0e1ebf --- /dev/null +++ b/src/components/sections/compensation-calculator/compensation-calculator.module.css @@ -0,0 +1,80 @@ +/* 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; +} + +.employeeFilterLabel { + flex-shrink: 0; + @media (min-width: 375px) { + min-width: 4.5rem; + width: 4.5rem; + } +} + +.peopleCountWrapper { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.employeeCount { + font-size: 16px; +} + +.employeeCountValue { + font-weight: 500; +} + +.peopleContainer { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 57a98b2d2..5096dee59 100644 --- a/src/utils/renderSection.tsx +++ b/src/utils/renderSection.tsx @@ -7,6 +7,7 @@ import Callout from "src/components/sections/callout/Callout"; 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 CompensationCalculator from "src/components/sections/compensation-calculator/CompensationCalculator"; import Employees from "src/components/sections/employees/Employees"; import Grid from "src/components/sections/grid/Grid"; import GridPreview from "src/components/sections/grid/GridPreview"; @@ -217,6 +218,8 @@ const SectionRenderer = ({ isDraftMode, initialData, ); + case "compensationCalculator": + return ; case "grid": return renderGridSection(section, sectionIndex, isDraftMode, initialData); case "employees": diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 3121ac69f..808831f19 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -87,6 +87,16 @@ export interface EmployeesSection { basicTitle: string; } +export interface CompensationCalculatorSection { + _type: "compensationCalculator"; + _key: string; + moduleTitle: string; + calculatorTitle: string; + calculatorDescription: PortableTextBlock[]; + handbookTitle: string; + handbookDescription: PortableTextBlock[]; +} + export type Section = | HeroSection | LogoSaladSection @@ -96,7 +106,8 @@ export type Section = | TestimonialsSection | ImageSection | GridSection - | EmployeesSection; + | EmployeesSection + | CompensationCalculatorSection; export interface PageBuilder { _createdAt: string; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index 56cef8e98..b229d5276 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -34,6 +34,13 @@ const SECTIONS_FRAGMENT = groq` ${TRANSLATED_LINK_FRAGMENT} } }, + _type == "compensationCalculator" => { + "moduleTitle": ${translatedFieldFragment("moduleTitle")}, + "calculatorTitle": ${translatedFieldFragment("calculatorTitle")}, + "calculatorDesc": ${translatedFieldFragment("calculatorDesc")}, + "handbookTitle": ${translatedFieldFragment("handbookTitle")}, + "handbookDesc": ${translatedFieldFragment("handbookDesc")} + }, _type == "employees" => { "basicTitle": ${translatedFieldFragment("basicTitle")} } diff --git a/studio/lib/queries/specialPages.ts b/studio/lib/queries/specialPages.ts index 3c12660b2..e5c401604 100644 --- a/studio/lib/queries/specialPages.ts +++ b/studio/lib/queries/specialPages.ts @@ -26,6 +26,20 @@ export const COMPENSATIONS_PAGE_BY_SLUG_QUERY = groq` }, } `; +export const COMPENSATIONS_BENEFITS = groq` + *[_type == "compensations"][0] { + ..., + ${LANGUAGE_FIELD_FRAGMENT}, + "benefitsByLocation": benefitsByLocation[] { + ..., + "benefits": benefits[] { + ..., + "basicTitle": ${translatedFieldFragment("basicTitle")}, + "richText": ${translatedFieldFragment("richText")} + } + }, + } +`; export const COMPENSATIONS_PAGE_SITEMAP_QUERY = groq` *[_type == "compensations"][0] { _updatedAt, diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index e16cbbd83..e8f98b8b7 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -14,6 +14,7 @@ import testimonals from "studio/schemas/objects/sections/testimonials"; import seo from "studio/schemas/objects/seo"; import { titleSlug } from "studio/schemas/schemaTypes/slug"; import { firstTranslation } from "studio/utils/i18n"; +import { compensationCalculator } from "../objects/sections/compensation-calculator"; export const pageBuilderID = "pageBuilder"; @@ -49,6 +50,7 @@ const pageBuilder = defineType({ imageSection, grid, employees, + compensationCalculator, ], }), ], diff --git a/studio/schemas/objects/sections/compensation-calculator.ts b/studio/schemas/objects/sections/compensation-calculator.ts new file mode 100644 index 000000000..251e1c475 --- /dev/null +++ b/studio/schemas/objects/sections/compensation-calculator.ts @@ -0,0 +1,86 @@ +import { defineField } from "sanity"; + +export const compensationCalculatorId = "compensationCalculator"; + +export const compensationCalculator = defineField({ + name: compensationCalculatorId, + title: "Compensation Calculator", + type: "object", + fields: [ + { + name: "moduleTitle", + type: "internationalizedArrayString", + title: "Module Title", + description: "Title that will be displayed at the top of the section.", + initialValue: [ + { _key: "en", value: "Employee Experience" }, + { _key: "no", value: "Ansattopplevelsen" }, + ], + }, + { + name: "calculatorTitle", + type: "internationalizedArrayString", + title: "Calculator Title", + description: "Title that will be displayed inside the calculator.", + initialValue: [ + { _key: "en", value: "Salary Calculator" }, + { _key: "no", value: "Lønnskalkulator" }, + ], + }, + { + name: "calculatorDesc", + title: "Calculator Description", + type: "internationalizedArrayString", + description: "Description that will be displayed inside the calculator.", + initialValue: [ + { + _key: "en", + value: + "We believe that salary should be simple, open and predictable. Therefore, we designed a transparent salary model that equalizes all employees.", + }, + { + _key: "no", + value: + "Vi mener lønn bør være enkelt, åpent og forutsigbart. Derfor designet vi en transparent lønnsmodell som likestiller alle ansatte.", + }, + ], + }, + { + 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: "handbookDesc", + 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 finner du i håndboken. Endrer vi på oss, endrer vi håndboken.", + }, + ], + }, + ], + preview: { + prepare() { + return { + title: "Compensation Calculator", + }; + }, + }, +});