From 5e533bec4ac2ea29054e3ace7b6f973ccf4f14b5 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Wed, 11 Dec 2024 15:36:16 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20Add=20openness=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/_assets/happy-smiley-face.svg | 6 +++ src/components/sections/openness/Openness.tsx | 26 ++++++++++++ .../sections/openness/openness.module.css | 32 ++++++++++++++ src/components/smileyBox/SmileyBox.tsx | 19 +++++++++ src/components/smileyBox/smileyBox.module.css | 25 +++++++++++ src/utils/renderSection.tsx | 3 ++ studio/lib/interfaces/pages.ts | 11 ++++- studio/lib/queries/pages.ts | 4 ++ studio/schemas/documents/pageBuilder.ts | 2 + studio/schemas/objects/sections/openness.ts | 42 +++++++++++++++++++ 10 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 public/_assets/happy-smiley-face.svg create mode 100644 src/components/sections/openness/Openness.tsx create mode 100644 src/components/sections/openness/openness.module.css create mode 100644 src/components/smileyBox/SmileyBox.tsx create mode 100644 src/components/smileyBox/smileyBox.module.css create mode 100644 studio/schemas/objects/sections/openness.ts diff --git a/public/_assets/happy-smiley-face.svg b/public/_assets/happy-smiley-face.svg new file mode 100644 index 000000000..7cd0708ef --- /dev/null +++ b/public/_assets/happy-smiley-face.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/components/sections/openness/Openness.tsx b/src/components/sections/openness/Openness.tsx new file mode 100644 index 000000000..6df256b6e --- /dev/null +++ b/src/components/sections/openness/Openness.tsx @@ -0,0 +1,26 @@ +import { SanityImage } from "src/components/image/SanityImage"; +import SmileyBox from "src/components/smileyBox/SmileyBox"; +import Text from "src/components/text/Text"; +import { OpennessSection } from "studio/lib/interfaces/pages"; + +import styles from "./openness.module.css"; + +export interface OpennessProps { + section: OpennessSection; +} + +export default function Openness({ section }: OpennessProps) { + return ( +
+
+ {section.basicTitle} +
+
+
+ +
+ +
+
+ ); +} diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css new file mode 100644 index 000000000..1eef0508c --- /dev/null +++ b/src/components/sections/openness/openness.module.css @@ -0,0 +1,32 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + max-width: var(--max-content-width-large); + padding: 0 2rem; + margin: 5rem auto; + gap: 2rem; + color: var(--text-primary); +} + +.image { + height: 30rem; + + & img { + border-radius: 0.375rem 6rem 0.375rem 0.375rem; + } +} + +.title { + width: 40rem; + color: var(--text-primary); +} + +.content { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0.25rem; + gap: 1rem; +} diff --git a/src/components/smileyBox/SmileyBox.tsx b/src/components/smileyBox/SmileyBox.tsx new file mode 100644 index 000000000..d1cfb9878 --- /dev/null +++ b/src/components/smileyBox/SmileyBox.tsx @@ -0,0 +1,19 @@ +import Text from "src/components/text/Text"; + +import styles from "./smileyBox.module.css"; + +type SmileyBoxProps = { + background?: "dark" | "light"; + description: string; +}; + +export default function SmileyBox({ description }: SmileyBoxProps) { + return ( + description && ( +
+
+ {description} +
+ ) + ); +} diff --git a/src/components/smileyBox/smileyBox.module.css b/src/components/smileyBox/smileyBox.module.css new file mode 100644 index 000000000..4f233579d --- /dev/null +++ b/src/components/smileyBox/smileyBox.module.css @@ -0,0 +1,25 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height: 30rem; + min-width: var(19.75rem); + padding: 2.25rem; + border-radius: 6rem 6rem 0.375rem 0.375rem; + background-color: #dafbdc; +} + +.smiley { + &::before { + content: ""; + display: block; + width: 4.86119rem; + height: 4.86119rem; + -webkit-mask: url("/_assets/happy-smiley-face.svg") no-repeat center; + -webkit-mask-size: cover; + mask: url("/_assets/happy-smiley-face.svg") no-repeat center; + mask-size: cover; + background-color: var(--text-primary); + } +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index e7918fc16..7ba5d73d5 100644 --- a/src/utils/renderSection.tsx +++ b/src/utils/renderSection.tsx @@ -22,6 +22,7 @@ import ImageSectionComponentPreview from "src/components/sections/imageSection/I import Jobs from "src/components/sections/jobs/Jobs"; import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad"; import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview"; +import Openness from "src/components/sections/openness/Openness"; import { Testimonials } from "src/components/sections/testimonials/Testimonials"; import TestimonialsPreview from "src/components/sections/testimonials/TestimonialsPreview"; import { Locale } from "src/i18n/routing"; @@ -289,6 +290,8 @@ const SectionRenderer = ({ return ; case "employeeHighlight": return ; + case "opennessSection": + return ; default: return null; } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 8560b5035..7fe2dbdca 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -157,6 +157,14 @@ export interface EmployeeHighlightSection { employeePhoto: IImage; } +export interface OpennessSection { + _type: "opennessSection"; + _key: string; + basicTitle: string; + image: IImage; + description: string; +} + export type Section = | HeroSection | LogoSaladSection @@ -173,7 +181,8 @@ export type Section = | EmployeesSection | EmployeeHighlightSection | CompensationCalculatorSection - | JobsSection; + | JobsSection + | OpennessSection; export interface PageBuilder { _createdAt: string; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index d0db592f2..831b8d651 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -100,6 +100,10 @@ const SECTIONS_FRAGMENT = groq` }, _type == "customerCasesEntry" => { "basicTitle":${translatedFieldFragment("basicTitle")}, + }, + _type == "opennessSection" => { + "basicTitle": ${translatedFieldFragment("basicTitle")}, + "description": ${translatedFieldFragment("description")}, } } `; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index 76ebecc45..a80429aea 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -13,6 +13,7 @@ import imageSection from "studio/schemas/objects/sections/image"; import imageSplitSection from "studio/schemas/objects/sections/imagesplit"; import { jobs } from "studio/schemas/objects/sections/jobs"; import logoSalad from "studio/schemas/objects/sections/logoSalad"; +import { opennessSection } from "studio/schemas/objects/sections/openness"; import seo from "studio/schemas/objects/seo"; import { titleSlug } from "studio/schemas/schemaTypes/slug"; import { firstTranslation } from "studio/utils/i18n"; @@ -57,6 +58,7 @@ const pageBuilder = defineType({ jobs, employeeHighlightSection, compensationCalculator, + opennessSection, ], }), ], diff --git a/studio/schemas/objects/sections/openness.ts b/studio/schemas/objects/sections/openness.ts new file mode 100644 index 000000000..4e6fd6937 --- /dev/null +++ b/studio/schemas/objects/sections/openness.ts @@ -0,0 +1,42 @@ +import { defineField } from "sanity"; + +import { titleID } from "studio/schemas/fields/text"; +export const opennessID = "opennessSection"; + +export const opennessSection = defineField({ + name: opennessID, + title: "Openness", + 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", + }, + { + name: "image", + type: "image", + title: "Image", + description: "An image of the openness", + options: { + hotspot: true, + }, + }, + { + name: "description", + title: "Description", + description: + "Enter the description that will be displayed in the smiley block.", + type: "internationalizedArrayString", + }, + ], + preview: { + prepare() { + return { + title: "Openness Section", + }; + }, + }, +}); From a9242f43a04e122ef307e9d1da86eed970ec35ad Mon Sep 17 00:00:00 2001 From: Ane Date: Wed, 11 Dec 2024 18:07:02 +0100 Subject: [PATCH 2/4] add transparent background to contact card --- src/components/employeeCard/EmployeeCard.tsx | 2 +- src/components/sections/contact-box/ContactSelector.tsx | 2 +- src/components/tag/index.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/employeeCard/EmployeeCard.tsx b/src/components/employeeCard/EmployeeCard.tsx index c0c0b141b..5ccc3eff8 100644 --- a/src/components/employeeCard/EmployeeCard.tsx +++ b/src/components/employeeCard/EmployeeCard.tsx @@ -91,7 +91,7 @@ export default function EmployeeCard({ export function EmployeeCardSkeleton({ background = "light", }: { - background?: "light" | "dark"; + background?: "light" | "dark" | "transparent"; }) { const backgroundClass = background === "dark" ? styles["employeeImage--dark"] : ""; diff --git a/src/components/sections/contact-box/ContactSelector.tsx b/src/components/sections/contact-box/ContactSelector.tsx index 5bdb25905..aeb5215ac 100644 --- a/src/components/sections/contact-box/ContactSelector.tsx +++ b/src/components/sections/contact-box/ContactSelector.tsx @@ -12,7 +12,7 @@ export type ContactSelectorProps = { contactPoints: Promise; employeesPageSlug: string; language: string; - background?: "dark" | "light"; + background?: "dark" | "light" | "transparent"; }; export default function ContactSelector({ diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx index 1ff66a6f0..40fe85989 100644 --- a/src/components/tag/index.tsx +++ b/src/components/tag/index.tsx @@ -18,6 +18,8 @@ function getBackgroundClass(backgroundColor: string) { switch (backgroundColor) { case "light": return ""; + case "transparent": + return ""; case "dark": return styles["tag--bgDark"]; case "violet": @@ -29,7 +31,7 @@ function getBackgroundClass(backgroundColor: string) { type TagProps = { active?: boolean; - background?: "light" | "dark" | "violet"; + background?: "light" | "dark" | "violet" | "transparent"; text: string; } & TagInner; From d072f5db943d1b34b13761cb4022341ed7ea6885 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Thu, 12 Dec 2024 09:07:26 +0100 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=93=B1=20Make=20it=20responsive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/employeeCard/EmployeeCard.tsx | 2 +- .../sections/contact-box/ContactSelector.tsx | 2 +- src/components/sections/openness/Openness.tsx | 6 +-- .../sections/openness/openness.module.css | 40 +++++++++++++++---- src/components/smileyBox/SmileyBox.tsx | 8 ++-- src/components/smileyBox/smileyBox.module.css | 25 +++++++++++- 6 files changed, 65 insertions(+), 18 deletions(-) diff --git a/src/components/employeeCard/EmployeeCard.tsx b/src/components/employeeCard/EmployeeCard.tsx index 5ccc3eff8..c0c0b141b 100644 --- a/src/components/employeeCard/EmployeeCard.tsx +++ b/src/components/employeeCard/EmployeeCard.tsx @@ -91,7 +91,7 @@ export default function EmployeeCard({ export function EmployeeCardSkeleton({ background = "light", }: { - background?: "light" | "dark" | "transparent"; + background?: "light" | "dark"; }) { const backgroundClass = background === "dark" ? styles["employeeImage--dark"] : ""; diff --git a/src/components/sections/contact-box/ContactSelector.tsx b/src/components/sections/contact-box/ContactSelector.tsx index aeb5215ac..5bdb25905 100644 --- a/src/components/sections/contact-box/ContactSelector.tsx +++ b/src/components/sections/contact-box/ContactSelector.tsx @@ -12,7 +12,7 @@ export type ContactSelectorProps = { contactPoints: Promise; employeesPageSlug: string; language: string; - background?: "dark" | "light" | "transparent"; + background?: "dark" | "light"; }; export default function ContactSelector({ diff --git a/src/components/sections/openness/Openness.tsx b/src/components/sections/openness/Openness.tsx index 6df256b6e..54cec6ad8 100644 --- a/src/components/sections/openness/Openness.tsx +++ b/src/components/sections/openness/Openness.tsx @@ -12,9 +12,9 @@ export interface OpennessProps { export default function Openness({ section }: OpennessProps) { return (
-
- {section.basicTitle} -
+ + {section.basicTitle} +
diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css index 1eef0508c..34b14fb32 100644 --- a/src/components/sections/openness/openness.module.css +++ b/src/components/sections/openness/openness.module.css @@ -10,17 +10,17 @@ color: var(--text-primary); } -.image { - height: 30rem; - - & img { - border-radius: 0.375rem 6rem 0.375rem 0.375rem; - } -} - .title { width: 40rem; color: var(--text-primary); + + @media (max-width: 834px) { + width: 25.875rem; + } + + @media (max-width: 425px) { + width: 19.4375rem; + } } .content { @@ -29,4 +29,28 @@ align-items: flex-start; padding: 0.25rem; gap: 1rem; + + @media (max-width: 768px) { + display: flex; + flex-direction: column; + padding: 1.5rem; + } +} + +.image { + height: 30rem; + + & img { + border-radius: 0.375rem 6rem 0.375rem 0.375rem; + } + + @media (max-width: 834px) { + height: 26.25rem; + align-self: stretch; + } + + @media (max-width: 425px) { + align-self: stretch; + height: 22.375; + } } diff --git a/src/components/smileyBox/SmileyBox.tsx b/src/components/smileyBox/SmileyBox.tsx index d1cfb9878..a2ae212a8 100644 --- a/src/components/smileyBox/SmileyBox.tsx +++ b/src/components/smileyBox/SmileyBox.tsx @@ -9,11 +9,11 @@ type SmileyBoxProps = { export default function SmileyBox({ description }: SmileyBoxProps) { return ( - description && ( -
-
+
+
+
{description}
- ) +
); } diff --git a/src/components/smileyBox/smileyBox.module.css b/src/components/smileyBox/smileyBox.module.css index 4f233579d..13b9723c7 100644 --- a/src/components/smileyBox/smileyBox.module.css +++ b/src/components/smileyBox/smileyBox.module.css @@ -4,10 +4,21 @@ justify-content: space-between; align-items: flex-start; height: 30rem; - min-width: var(19.75rem); + min-width: 19.75rem; padding: 2.25rem; border-radius: 6rem 6rem 0.375rem 0.375rem; background-color: #dafbdc; + + @media (max-width: 834px) { + align-self: stretch; + height: 26.25rem; + } + + @media (max-width: 425px) { + align-self: stretch; + height: 26.25rem; + min-width: 19.4375rem; + } } .smiley { @@ -23,3 +34,15 @@ background-color: var(--text-primary); } } + +.description { + align-self: stretch; + + @media (max-width: 834px) { + max-width: 27.1875rem; + } + + @media (max-width: 425px) { + max-width: 19.4375rem; + } +} From de57e5ffd41b7801bce61adc22a0cb6c96f5c765 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Thu, 12 Dec 2024 09:29:31 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=91=8C=20Add=20field=20validations=20?= =?UTF-8?q?and=20remove=20padding?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sections/openness/openness.module.css | 1 - src/components/tag/index.tsx | 4 +--- studio/schemas/objects/sections/openness.ts | 3 +++ 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css index 34b14fb32..aac10389e 100644 --- a/src/components/sections/openness/openness.module.css +++ b/src/components/sections/openness/openness.module.css @@ -4,7 +4,6 @@ justify-content: center; align-items: flex-start; max-width: var(--max-content-width-large); - padding: 0 2rem; margin: 5rem auto; gap: 2rem; color: var(--text-primary); diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx index 40fe85989..1ff66a6f0 100644 --- a/src/components/tag/index.tsx +++ b/src/components/tag/index.tsx @@ -18,8 +18,6 @@ function getBackgroundClass(backgroundColor: string) { switch (backgroundColor) { case "light": return ""; - case "transparent": - return ""; case "dark": return styles["tag--bgDark"]; case "violet": @@ -31,7 +29,7 @@ function getBackgroundClass(backgroundColor: string) { type TagProps = { active?: boolean; - background?: "light" | "dark" | "violet" | "transparent"; + background?: "light" | "dark" | "violet"; text: string; } & TagInner; diff --git a/studio/schemas/objects/sections/openness.ts b/studio/schemas/objects/sections/openness.ts index 4e6fd6937..937f3423c 100644 --- a/studio/schemas/objects/sections/openness.ts +++ b/studio/schemas/objects/sections/openness.ts @@ -14,6 +14,7 @@ export const opennessSection = defineField({ description: "Enter the primary title that will be displayed at the top of the section.", type: "internationalizedArrayString", + validation: (rule) => rule.required(), }, { name: "image", @@ -23,6 +24,7 @@ export const opennessSection = defineField({ options: { hotspot: true, }, + validation: (rule) => rule.required(), }, { name: "description", @@ -30,6 +32,7 @@ export const opennessSection = defineField({ description: "Enter the description that will be displayed in the smiley block.", type: "internationalizedArrayString", + validation: (rule) => rule.required(), }, ], preview: {