feat: Color Picker for Customer Cases (#915)

varianter · Nov 27, 2024 · 7880b39 · 7880b39
1 parent 08593e6
commit 7880b39
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "test-storybook": "test-storybook"
   },
   "dependencies": {
+    "@sanity/color-input": "^4.0.1",
     "@sanity/document-internationalization": "^3.0.1",
     "@sanity/image-url": "^1.0.2",
     "@sanity/preview-url-secret": "^1.6.11",

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -26,13 +26,18 @@ export default async function CustomerCase({
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
-        <Text type={"h1"} className={styles.mainTitle}>
-          {customerCase.basicTitle}
-        </Text>
+        <ColoredTitle
+          title={customerCase.basicTitle}
+          colorPart={customerCase.basicTitleColorPart}
+          color={customerCase.clientColors.color}
+        />
         <hr className={styles.divider} />
         {consultantsResult.ok && (
           <div className={styles.projectInfoWrapper}>
-            <CustomerCaseProjectInfo projectInfo={customerCase.projectInfo} />
+            <CustomerCaseProjectInfo
+              projectInfo={customerCase.projectInfo}
+              clientColors={customerCase.clientColors}
+            />
           </div>
         )}
         <div className={styles.mainImageWrapper}>
@@ -61,3 +66,35 @@ export default async function CustomerCase({
     </div>
   );
 }
+
+function ColoredTitle({
+  title,
+  colorPart,
+  color,
+}: {
+  title: string;
+  colorPart?: string;
+  color?: string;
+}) {
+  if (colorPart === undefined || colorPart === "")
+    return (
+      <Text type={"h1"} className={styles.mainTitle}>
+        {title}
+      </Text>
+    );
+
+  const startColorIndex = title.indexOf(colorPart);
+  const endColorIndex = startColorIndex + colorPart.length;
+
+  const preColorText = title.slice(0, startColorIndex);
+  const colorText = title.slice(startColorIndex, endColorIndex);
+  const postColorText = title.slice(endColorIndex);
+
+  return (
+    <Text type={"h1"} className={styles.mainTitle}>
+      <span>{preColorText}</span>
+      <span style={{ color: color }}>{colorText}</span>
+      <span>{postColorText}</span>
+    </Text>
+  );
+}
diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
@@ -6,17 +6,20 @@ import Text from "src/components/text/Text";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import {
   CustomerCaseProjectInfo as CustomerCaseCaseProjectInfoObject,
+  CustomerCaseClientColors,
   CustomerSector,
 } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCaseProjectInfo.module.css";
 
 interface CustomerCaseProjectInfoProps {
   projectInfo: CustomerCaseCaseProjectInfoObject;
+  clientColors: CustomerCaseClientColors;
 }
 
 export default async function CustomerCaseProjectInfo({
   projectInfo,
+  clientColors,
 }: CustomerCaseProjectInfoProps) {
   const t = await getTranslations("customer_case");
 
@@ -35,7 +38,13 @@ export default async function CustomerCaseProjectInfo({
               </Text>
               <div className={styles.badgeWrapper}>
                 {projectInfo.customerSectors.map((sector: CustomerSector) => (
-                  <Badge key={sector._key}>{sector.customerSector}</Badge>
+                  <Badge
+                    key={sector._key}
+                    badgeColor={clientColors.color}
+                    textColor={clientColors.badgeText}
+                  >
+                    {sector.customerSector}
+                  </Badge>
                 ))}
               </div>
             </div>

diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
@@ -54,8 +54,15 @@ export interface CustomerCaseBase {
   slug: string;
   domains: string[];
   basicTitle: string;
+  basicTitleColorPart: string;
   description: string;
   image: IImage;
+  clientColors: CustomerCaseClientColors;
+}
+
+export interface CustomerCaseClientColors {
+  color?: string;
+  badgeText?: string;
 }
 
 export type CustomerCaseSection =

diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -17,9 +17,14 @@ const CUSTOMER_CASE_BASE_FRAGMENT = groq`
   ${LANGUAGE_FIELD_FRAGMENT},
   "slug": ${translatedFieldFragment("slug")},
   "basicTitle": ${translatedFieldFragment("basicTitle")},
+  "basicTitleColorPart": ${translatedFieldFragment("basicTitleColorPart")},
   "description": ${translatedFieldFragment("description")},
   "image": image {
     ${INTERNATIONALIZED_IMAGE_FRAGMENT}
+  },
+  "clientColors": {
+    "color": clientColor.hex,
+    "badgeText": clientColorBadgeText.hex
   }
 `;
 
@@ -66,7 +71,7 @@ export const CUSTOMER_CASE_QUERY = groq`
       },
       collaborators,
       "consultants": consultants[] {
-        _key,  
+        _key,
         employeeEmail,
         employeeFirstName,
       }

diff --git a/studioShared/schemas/documents/customerCase.ts b/studioShared/schemas/documents/customerCase.ts
@@ -39,7 +39,31 @@ const customerCase = defineType({
       type: "internationalizedArrayString",
       title: "Title",
     }),
+    defineField({
+      name: `${titleID.basic}ColorPart`,
+      type: "internationalizedArrayString",
+      title: "Title Color Part",
+      description: "Which part of the title should be colored",
+    }),
     defineField({ ...domainsField, validation: (rule) => rule.required() }),
+    defineField({
+      name: "clientColor",
+      type: "color",
+      title: "Client Color (Title & Badges)",
+      description: "This color will be used for parts of the title and badges",
+      options: { disableAlpha: true },
+    }),
+    defineField({
+      name: "clientColorBadgeText",
+      type: "color",
+      title: "Client Color (Badge Text)",
+      description:
+        "This color will be used for the text on the badges. There are predefined colors for text in the component",
+      options: {
+        disableAlpha: true,
+        colorList: ["#222424", "#faf8f5"],
+      },
+    }),
     defineField({
       name: "description",
       type: "internationalizedArrayText",

diff --git a/studioShared/studioConfig.tsx b/studioShared/studioConfig.tsx
@@ -1,3 +1,4 @@
+import { colorInput } from "@sanity/color-input";
 import { visionTool } from "@sanity/vision";
 import { WorkspaceOptions } from "sanity";
 import { structureTool } from "sanity/structure";
@@ -32,6 +33,7 @@ const config: WorkspaceOptions = {
       languages: supportedLanguages,
       fieldTypes: ["string", "richText", "text"],
     }),
+    colorInput(),
   ],
 };