Merge pull request #1013 from varianter/v3-petterhh/add-learning-joy-…

…section

✨ Add LÆREGLEDE section

src/components/sections/learning/Learning.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+
+import { SanityImage } from "src/components/image/SanityImage";
+import SmileyBox from "src/components/smileyBox/SmileyBox";
+import Text from "src/components/text/Text";
+import { LearningSection } from "studio/lib/interfaces/pages";
+
+import styles from "./learning.module.css";
+
+export interface LearningProps {
+  section: LearningSection;
+}
+
+export default function Learning({ section }: LearningProps) {
+  return (
+    <div className={styles.wrapper}>
+      <Text type={"h2"} className={styles.title}>
+        {section.basicTitle}
+      </Text>
+      <div className={styles.content}>
+        <SmileyBox
+          description={section.description}
+          smileySide="right"
+          smileyType="shock"
+          backgroundColor="blue"
+        />
+        <div className={styles.image}>
+          <SanityImage image={section.image} />
+        </div>
+        <Link href={section.articleLink}>
+          <div className={styles.textContainer}>
+            <div className={styles.textContent}>
+              <Text type="labelLarge" className={styles.text}>
+                {section.articleTag}
+              </Text>
+              <Text type="h3" className={styles.text}>
+                {section.articleTitle}
+              </Text>
+              <Text type="bodyBig" className={styles.text}>
+                {section.articleSubtitle}
+              </Text>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/sections/learning/learning.module.css

@@ -0,0 +1,90 @@
+.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;
+}
+
+.title {
+  width: 40rem;
+
+  @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: 6rem 0.375rem 0.375rem 0.375rem;
+  }
+
+  @media (max-width: 834px) {
+    height: 26.25rem;
+    align-self: stretch;
+  }
+
+  @media (max-width: 425px) {
+    align-self: stretch;
+    height: 22.375;
+  }
+}
+
+.textContainer {
+  display: flex;
+  height: 30rem;
+  min-width: 26.625rem;
+  max-width: 33.5625rem;
+  padding: 1.5rem 0.375rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  background-color: var(--surface-blue);
+  color: var(--text-primary-light);
+  border-radius: 6px;
+
+  &:hover {
+    background-color: var(--Blue-700);
+    border-radius: 24px;
+  }
+}
+
+.textContent {
+  display: flex;
+  max-width: 33.5625rem;
+  padding: 0rem 1.125rem;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  align-self: stretch;
+}
+
+.text {
+  color: var(--text-primary-light);
+}

src/components/sections/openness/Openness.tsx

@@ -19,7 +19,12 @@ export default function Openness({ section }: OpennessProps) {
         <div className={styles.image}>
           <SanityImage image={section.image} />
         </div>
-        <SmileyBox description={section.description} />
+        <SmileyBox
+          description={section.description}
+          smileySide="left"
+          smileyType="happy"
+          backgroundColor="green"
+        />
       </div>
     </div>
   );

src/components/smileyBox/SmileyBox.tsx

@@ -29,18 +29,17 @@ const backgroundColors = {
 } 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,
   backgroundColor,
   smileySide,
   smileyType,
+  description,
 }: SmileyBoxProps) {
   const smiley = smileys[smileyType ?? "happy"];
   const cssVariables = {

src/utils/renderSection.tsx

@@ -21,6 +21,7 @@ import ImageSplitComponentPreview from "src/components/sections/image-split/Imag
 import ImageSectionComponent from "src/components/sections/imageSection/ImageSectionComponent";
 import ImageSectionComponentPreview from "src/components/sections/imageSection/ImageSectionComponentPreview";
 import Jobs from "src/components/sections/jobs/Jobs";
+import Learning from "src/components/sections/learning/Learning";
 import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad";
 import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview";
 import Openness from "src/components/sections/openness/Openness";
@@ -295,6 +296,8 @@ const SectionRenderer = ({
       return <Openness section={section} />;
     case "generositySection":
       return <Generosity section={section} language={language} />;
+    case "learningSection":
+      return <Learning section={section} />;
     default:
       return null;
   }

studio/lib/interfaces/pages.ts

@@ -178,6 +178,18 @@ export interface OpennessSection {
   description: string;
 }
 
+export interface LearningSection {
+  _type: "learningSection";
+  _key: string;
+  basicTitle: string;
+  image: IImage;
+  description: string;
+  articleLink: string;
+  articleTag: string;
+  articleTitle: string;
+  articleSubtitle: string;
+}
+
 export type Section =
   | HeroSection
   | LogoSaladSection
@@ -196,7 +208,8 @@ export type Section =
   | CompensationCalculatorSection
   | JobsSection
   | OpennessSection
-  | GenerositySection;
+  | GenerositySection
+  | LearningSection;
 
 export interface PageBuilder {
   _createdAt: string;

studio/lib/queries/pages.ts

@@ -118,6 +118,14 @@ const SECTIONS_FRAGMENT = groq`
           ${TRANSLATED_LINK_FRAGMENT}
         }
       }
+    },
+    _type == "learningSection" => {
+      ...,
+      "basicTitle": ${translatedFieldFragment("basicTitle")},
+      "description": ${translatedFieldFragment("description")},
+      "articleTag": ${translatedFieldFragment("articleTag")},
+      "articleTitle": ${translatedFieldFragment("articleTitle")},
+      "articleSubtitle": ${translatedFieldFragment("articleSubtitle")},
     }
   }
 `;

studio/schemas/documents/pageBuilder.ts

@@ -13,6 +13,7 @@ import hero from "studio/schemas/objects/sections/hero";
 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 { learningSection } from "studio/schemas/objects/sections/learning";
 import logoSalad from "studio/schemas/objects/sections/logoSalad";
 import { opennessSection } from "studio/schemas/objects/sections/openness";
 import seo from "studio/schemas/objects/seo";
@@ -61,6 +62,7 @@ const pageBuilder = defineType({
         compensationCalculator,
         opennessSection,
         generositySection,
+        learningSection,
       ],
     }),
   ],

studio/schemas/objects/sections/learning.ts

@@ -0,0 +1,70 @@
+import { defineField } from "sanity";
+
+import { titleID } from "studio/schemas/fields/text";
+
+export const learningID = "learningSection";
+
+export const learningSection = defineField({
+  name: learningID,
+  title: "Learning",
+  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 learning",
+      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(),
+    },
+    {
+      name: "articleLink",
+      title: "Article link",
+      type: "string",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "articleTag",
+      title: "Article tag",
+      type: "internationalizedArrayString",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "articleTitle",
+      title: "Article title",
+      type: "internationalizedArrayString",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "articleSubtitle",
+      title: "Article subtitle",
+      type: "internationalizedArrayString",
+      validation: (rule) => rule.required(),
+    },
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: "Learning Section",
+      };
+    },
+  },
+});