Merge pull request #997 from varianter/v3-petterhh/openness-section

✨ Add openness section

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 (
+    <div className={styles.wrapper}>
+      <Text type={"h2"} className={styles.title}>
+        {section.basicTitle}
+      </Text>
+      <div className={styles.content}>
+        <div className={styles.image}>
+          <SanityImage image={section.image} />
+        </div>
+        <SmileyBox description={section.description} />
+      </div>
+    </div>
+  );
+}

src/components/sections/openness/openness.module.css

@@ -0,0 +1,55 @@
+.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: 40rem;
+  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;
+
+  @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;
+  }
+}

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 (
+    <div className={styles.wrapper}>
+      <div className={styles.smiley} />
+      <div className={styles.description}>
+        <Text type={"h3"}>{description}</Text>
+      </div>
+    </div>
+  );
+}

src/components/smileyBox/smileyBox.module.css

@@ -0,0 +1,48 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  height: 30rem;
+  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 {
+  &::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);
+  }
+}
+
+.description {
+  align-self: stretch;
+
+  @media (max-width: 834px) {
+    max-width: 27.1875rem;
+  }
+
+  @media (max-width: 425px) {
+    max-width: 19.4375rem;
+  }
+}

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 <Jobs language={language} section={section} />;
     case "employeeHighlight":
       return <EmployeeHighlight section={section} />;
+    case "opennessSection":
+      return <Openness section={section} />;
     default:
       return null;
   }

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;

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")},
     }
   }
 `;

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,
       ],
     }),
   ],

studio/schemas/objects/sections/openness.ts

@@ -0,0 +1,45 @@
+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",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "image",
+      type: "image",
+      title: "Image",
+      description: "An image of the openness",
+      options: {
+        hotspot: true,
+      },
+      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(),
+    },
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: "Openness Section",
+      };
+    },
+  },
+});