diff --git a/public/_assets/happy-smiley-face.svg b/public/_assets/smiley-face-happy.svg similarity index 100% rename from public/_assets/happy-smiley-face.svg rename to public/_assets/smiley-face-happy.svg diff --git a/public/_assets/smiley-face-shock.svg b/public/_assets/smiley-face-shock.svg new file mode 100644 index 000000000..84a393b62 --- /dev/null +++ b/public/_assets/smiley-face-shock.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/_assets/smiley-face-smug.svg b/public/_assets/smiley-face-smug.svg new file mode 100644 index 000000000..980128f63 --- /dev/null +++ b/public/_assets/smiley-face-smug.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/components/sections/generosity/Generosity.tsx b/src/components/sections/generosity/Generosity.tsx new file mode 100644 index 000000000..baafcb57a --- /dev/null +++ b/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 ( +
+ + {section.basicTitle} + +
+ + +
+
+ ); +} diff --git a/src/components/sections/generosity/generosity.module.css b/src/components/sections/generosity/generosity.module.css new file mode 100644 index 000000000..4f8b0f93d --- /dev/null +++ b/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: 45rem; + 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; + } +} diff --git a/src/components/smileyBox/SmileyBox.tsx b/src/components/smileyBox/SmileyBox.tsx index a2ae212a8..895a2cc9f 100644 --- a/src/components/smileyBox/SmileyBox.tsx +++ b/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 ( -
+
{description} diff --git a/src/components/smileyBox/smileyBox.module.css b/src/components/smileyBox/smileyBox.module.css index 13b9723c7..f0f9e6339 100644 --- a/src/components/smileyBox/smileyBox.module.css +++ b/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); } diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 7ba5d73d5..98cb0312b 100644 --- a/src/utils/renderSection.tsx +++ b/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 ; case "opennessSection": return ; + case "generositySection": + return ; default: return null; } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 7fe2dbdca..4f38fb0cf 100644 --- a/studio/lib/interfaces/pages.ts +++ b/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; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index 831b8d651..d82e5f90c 100644 --- a/studio/lib/queries/pages.ts +++ b/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} + } + } } } `; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index a80429aea..b64aa33ab 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/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, ], }), ], diff --git a/studio/schemas/objects/sections/compensation-calculator.ts b/studio/schemas/objects/sections/compensation-calculator.ts index a72fec58c..eb31698c1 100644 --- a/studio/schemas/objects/sections/compensation-calculator.ts +++ b/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.", }, ], }, diff --git a/studio/schemas/objects/sections/generosity.ts b/studio/schemas/objects/sections/generosity.ts new file mode 100644 index 000000000..327b200fb --- /dev/null +++ b/studio/schemas/objects/sections/generosity.ts @@ -0,0 +1,65 @@ +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.", + }, + { + name: "handbookDescription", + title: "Handbook Description", + type: "internationalizedArrayString", + description: + "Description that will be displayed inside the handbook section.", + }, + + { + ...link, + name: "handbookLink", + description: + "Bottom link that will be displayed inside the handbook section.", + }, + ], + }, + ], + preview: { + prepare() { + return { + title: "Generosity Section", + }; + }, + }, +});