fix: Add imageType to cartoon element and rename credit to photograph…

…er (#310) * rename credit to photographer * add imageType to Cartoon fields * rename labels
guardian · Aug 10, 2023 · eb524f8 · eb524f8
1 parent f92c086
commit eb524f8
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 20 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -468,7 +468,7 @@ const createEditor = (server: CollabServer) => {
         elementName: cartoonElementName,
         values: {
           largeImages: [imageToInsert],
-          credit: photographer,
+          photographer,
           source,
           caption,
         },

diff --git a/src/elements/cartoon/CartoonForm.tsx b/src/elements/cartoon/CartoonForm.tsx
@@ -49,7 +49,7 @@ export const createCartoonElement = (
       return (
         <FieldLayoutVertical>
           <ImageSet
-            label={"Large images (default)"}
+            label={"Desktop images (default)"}
             images={fields.largeImages.value}
             alt={fields.alt.value}
             addImage={(mediaId?: string, index?: number) => {
@@ -74,7 +74,7 @@ export const createCartoonElement = (
             mainMediaId={fields.largeImages.value[0]?.mediaId}
           />
           <ImageSet
-            label={"Small images"}
+            label={"Mobile images"}
             images={fields.smallImages.value}
             alt={fields.alt.value}
             addImage={(mediaId?: string, index?: number) => {
@@ -140,16 +140,10 @@ export const createCartoonElement = (
           />
           <Columns>
             <Column width={1 / 3}>
-              <FieldLayoutVertical>
-                <FieldWrapper
-                  field={fields.credit}
-                  headingLabel={"Comic credit"}
-                />
-                <CustomCheckboxView
-                  field={fields.displayCredit}
-                  label="Display credit information"
-                />
-              </FieldLayoutVertical>
+              <FieldWrapper
+                field={fields.photographer}
+                headingLabel={"Byline"}
+              />
             </Column>
             <Column width={1 / 3}>
               <FieldWrapper field={fields.source} headingLabel={"Source"} />
@@ -162,6 +156,20 @@ export const createCartoonElement = (
               />
             </Column>
           </Columns>
+          <Columns>
+            <Column width={2 / 3}>
+              <CustomCheckboxView
+                field={fields.displayCredit}
+                label="Display credit information"
+              />
+            </Column>
+            <Column width={1 / 3}>
+              <CustomDropdownView
+                field={fields.imageType}
+                label={"Image type"}
+              ></CustomDropdownView>
+            </Column>
+          </Columns>
         </FieldLayoutVertical>
       );
     }

diff --git a/src/elements/cartoon/CartoonSpec.tsx b/src/elements/cartoon/CartoonSpec.tsx
@@ -39,7 +39,7 @@ export const cartoonFields = (
       isResizeable: true,
       attrs: useTyperighterAttrs,
     }),
-    credit: createTextField({
+    photographer: createTextField({
       validators: [htmlMaxLength(100)],
       placeholder: "Enter the artist...",
     }),
@@ -55,5 +55,10 @@ export const cartoonFields = (
       { text: "thumbnail", value: "thumbnail" },
       { text: "immersive", value: "immersive" },
     ]),
+    imageType: createCustomDropdownField("Illustration", [
+      { text: "Photograph", value: "Photograph" },
+      { text: "Illustration", value: "Illustration" },
+      { text: "Composite", value: "Composite" },
+    ]),
   };
 };
diff --git a/src/elements/cartoon/__tests__/cartoonDataTransformer.spec.ts b/src/elements/cartoon/__tests__/cartoonDataTransformer.spec.ts
@@ -18,7 +18,7 @@ describe("cartoon element transform", () => {
       const element: Element = {
         elementType: "cartoon",
         fields: {
-          credit: "Oliva Hemingway",
+          photographer: "Oliva Hemingway",
           caption: "Photo of a dog",
           alt: "Photo of a dog",
           source: "PA",
@@ -55,11 +55,12 @@ describe("cartoon element transform", () => {
 
       expect(transformElement.in(element)).toEqual({
         role: "none-selected",
-        credit: "Oliva Hemingway",
+        photographer: "Oliva Hemingway",
         source: "PA",
         caption: "Photo of a dog",
         alt: "Photo of a dog",
         displayCredit: true,
+        imageType: "Illustration",
         largeImages: [
           {
             mimeType: "image/jpeg",
@@ -94,11 +95,12 @@ describe("cartoon element transform", () => {
       it("should transform elements out correctly", () => {
         const element = {
           role: "none-selected",
-          credit: "Oliva Hemingway",
+          photographer: "Oliva Hemingway",
           source: "PA",
           alt: "Photo of a dog",
           displayCredit: true,
           caption: "Photo of a dog",
+          imageType: "Illustration",
           largeImages: [
             {
               mimeType: "image/jpeg",
@@ -125,8 +127,9 @@ describe("cartoon element transform", () => {
             alt: "Photo of a dog",
             caption: "Photo of a dog",
             source: "PA",
-            credit: "Oliva Hemingway",
+            photographer: "Oliva Hemingway",
             displayCredit: true,
+            imageType: "Illustration",
             variants: [
               {
                 viewportSize: "small",

diff --git a/src/elements/cartoon/cartoonDataTransformer.ts b/src/elements/cartoon/cartoonDataTransformer.ts
@@ -15,11 +15,12 @@ type Variant = {
 type Fields = {
   variants: Variant[];
   role?: string;
-  credit?: string;
+  photographer?: string;
   caption?: string;
   alt?: string;
   source?: string;
   displayCredit?: boolean;
+  imageType?: string;
 };
 
 export type Element = {
@@ -32,7 +33,7 @@ export const transformElementIn: TransformIn<
   Element,
   ReturnType<typeof cartoonFields>
 > = ({ fields }) => {
-  const { role, variants, ...rest } = fields;
+  const { role, imageType, variants, ...rest } = fields;
 
   const getImages = (viewportSize: ViewportSize): Image[] => {
     const variant = variants.find(
@@ -46,6 +47,7 @@ export const transformElementIn: TransformIn<
 
   return {
     role: role ?? undefinedDropdownValue,
+    imageType: imageType ?? "Illustration",
     largeImages: getImages("large"),
     smallImages: getImages("small"),
     ...rest,