feat(DIA-135): add captions and navigation on artworks inside articles (

#9416)

feat: add captions and navigation of artworks inside articles

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionArtworkCaption.tsx

@@ -0,0 +1,81 @@
+import { Flex, Text, Touchable } from "@artsy/palette-mobile"
+import { ArticleSectionArtworkCaption_artwork$key } from "__generated__/ArticleSectionArtworkCaption_artwork.graphql"
+import { navigate } from "app/system/navigation/navigate"
+import { useFragment, graphql } from "react-relay"
+
+interface ArticleSectionArtworkCaptionProps {
+  artwork: ArticleSectionArtworkCaption_artwork$key
+}
+
+export const ArticleSectionArtworkCaption: React.FC<ArticleSectionArtworkCaptionProps> = ({
+  artwork,
+}) => {
+  const data = useFragment(fragment, artwork)
+
+  if (!data) {
+    return null
+  }
+
+  const handleOnNavigate = (href: string | null = null) => {
+    if (href) {
+      navigate(href)
+    }
+  }
+
+  return (
+    <Flex px={2} py={1}>
+      {data.artists?.map((artist, i) => {
+        if (!artist || !artist.href || !artist.name) return null
+
+        return (
+          <Touchable key={i} onPress={() => handleOnNavigate(artist.href)}>
+            <Text variant="sm-display">
+              {artist.name}
+              {i !== data.artists!.length - 1 && ", "}
+            </Text>
+          </Touchable>
+        )
+      })}
+
+      <Touchable onPress={() => handleOnNavigate(data.href)}>
+        <Text variant="sm-display" color="black60">
+          <Text variant="sm-display" color="black60" italic>
+            {data.title}
+          </Text>
+          {!!data.date && `, ${data.date}`}
+        </Text>
+      </Touchable>
+
+      <Touchable onPress={() => handleOnNavigate(data.partner?.href)}>
+        <Text variant="xs" color="black60">
+          {data.partner?.name}
+        </Text>
+      </Touchable>
+
+      {!!data.saleMessage && (
+        <Text variant="xs" weight="medium">
+          {data.saleMessage}
+        </Text>
+      )}
+    </Flex>
+  )
+}
+
+const fragment = graphql`
+  fragment ArticleSectionArtworkCaption_artwork on Artwork {
+    internalID
+    href
+    title
+    date
+    saleMessage
+    artists(shallow: true) {
+      id
+      href
+      name
+    }
+    partner {
+      name
+      href
+    }
+  }
+`

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionArtworkImage.tsx

@@ -0,0 +1,54 @@
+import { Image, Touchable, useScreenDimensions } from "@artsy/palette-mobile"
+import { ArticleSectionArtworkImage_artwork$key } from "__generated__/ArticleSectionArtworkImage_artwork.graphql"
+import { navigate } from "app/system/navigation/navigate"
+import { useFragment, graphql } from "react-relay"
+
+interface ArticleSectionArtworkImageProps {
+  artwork: ArticleSectionArtworkImage_artwork$key
+}
+
+export const ArticleSectionArtworkImage: React.FC<ArticleSectionArtworkImageProps> = ({
+  artwork,
+}) => {
+  const { width } = useScreenDimensions()
+  const data = useFragment(fragment, artwork)
+
+  if (!data.image?.url) {
+    return null
+  }
+
+  const handleOnPress = () => {
+    if (!!data.href) {
+      navigate(data.href)
+    }
+  }
+
+  const widthShrinkPercentage = width / (data.image?.width ?? width)
+  const height = (data.image?.height ?? width) * widthShrinkPercentage
+  const aspectRatio = width / height
+
+  return (
+    <Touchable onPress={handleOnPress}>
+      <Image
+        accessibilityLabel={`Image of ${data.title}`}
+        src={data.image.url}
+        width={width}
+        height={height}
+        aspectRatio={aspectRatio}
+      />
+    </Touchable>
+  )
+}
+
+const fragment = graphql`
+  fragment ArticleSectionArtworkImage_artwork on Artwork {
+    id
+    href
+    title
+    image {
+      url(version: ["main", "normalized", "larger", "large"])
+      width
+      height
+    }
+  }
+`

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionImageCollectionCaption.tsx

@@ -1,8 +1,8 @@
 import { useColor } from "@artsy/palette-mobile"
 import { ArticleSectionImageCollectionCaption_figure$key } from "__generated__/ArticleSectionImageCollectionCaption_figure.graphql"
 import { HTML } from "app/Components/HTML"
-import { useFragment } from "react-relay"
-import { graphql } from "relay-runtime"
+import { ArticleSectionArtworkCaption } from "app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionArtworkCaption"
+import { useFragment, graphql } from "react-relay"
 
 interface ArticleSectionImageCollectionCaptionProps {
   figure: ArticleSectionImageCollectionCaption_figure$key
@@ -12,13 +12,18 @@ export const ArticleSectionImageCollectionCaption: React.FC<
   ArticleSectionImageCollectionCaptionProps
 > = ({ figure }) => {
   const data = useFragment(ArticleSectionImageCollectionCaptionQuery, figure)
+  const typename = data.__typename
 
   const color = useColor()
 
-  if (data.__typename !== "ArticleImageSection") {
+  if (typename !== "ArticleImageSection" && typename !== "Artwork") {
     return null
   }
 
+  if (typename === "Artwork") {
+    return <ArticleSectionArtworkCaption artwork={data} />
+  }
+
   return (
     <HTML
       html={data.caption as string}
@@ -40,5 +45,8 @@ const ArticleSectionImageCollectionCaptionQuery = graphql`
     ... on ArticleImageSection {
       caption
     }
+    ... on Artwork {
+      ...ArticleSectionArtworkCaption_artwork
+    }
   }
 `

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionImageCollectionImage.tsx

@@ -1,7 +1,7 @@
 import { Image, useScreenDimensions } from "@artsy/palette-mobile"
 import { ArticleSectionImageCollectionImage_figure$key } from "__generated__/ArticleSectionImageCollectionImage_figure.graphql"
-import { useFragment } from "react-relay"
-import { graphql } from "relay-runtime"
+import { ArticleSectionArtworkImage } from "app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionArtworkImage"
+import { useFragment, graphql } from "react-relay"
 
 interface ArticleSectionImageCollectionImageProps {
   figure: ArticleSectionImageCollectionImage_figure$key
@@ -11,10 +11,13 @@ export const ArticleSectionImageCollectionImage: React.FC<
   ArticleSectionImageCollectionImageProps
 > = ({ figure }) => {
   const { width } = useScreenDimensions()
-
   const data = useFragment(ArticleSectionImageCollectionImageQuery, figure)
 
-  if (!data.image?.url) {
+  if (data.__typename === "Artwork") {
+    return <ArticleSectionArtworkImage artwork={data} />
+  }
+
+  if (data.__typename === "%other" || !data.image?.url) {
     return null
   }
 
@@ -27,6 +30,7 @@ export const ArticleSectionImageCollectionImage: React.FC<
 
 const ArticleSectionImageCollectionImageQuery = graphql`
   fragment ArticleSectionImageCollectionImage_figure on ArticleSectionImageCollectionFigure {
+    __typename
     ... on ArticleImageSection {
       id
       image {
@@ -36,12 +40,7 @@ const ArticleSectionImageCollectionImageQuery = graphql`
       }
     }
     ... on Artwork {
-      id
-      image {
-        url(version: ["main", "normalized", "larger", "large"])
-        width
-        height
-      }
+      ...ArticleSectionArtworkImage_artwork
     }
     ... on ArticleUnpublishedArtwork {
       id

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionArtworkCaption.tests.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, screen } from "@testing-library/react-native"
+import { ArticleSectionArtworkCaptionTestQuery } from "__generated__/ArticleSectionArtworkCaptionTestQuery.graphql"
+import { ArticleSectionArtworkCaption } from "app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionArtworkCaption"
+import { navigate } from "app/system/navigation/navigate"
+import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
+import { graphql } from "react-relay"
+
+describe("ArticleSectionArtworkCaption", () => {
+  const { renderWithRelay } = setupTestWrapper<ArticleSectionArtworkCaptionTestQuery>({
+    Component: ({ artwork }) => {
+      return <ArticleSectionArtworkCaption artwork={artwork!} />
+    },
+    query: graphql`
+      query ArticleSectionArtworkCaptionTestQuery @relay_test_operation {
+        artwork(id: "test-id") {
+          ...ArticleSectionArtworkCaption_artwork
+        }
+      }
+    `,
+  })
+
+  it("renders", async () => {
+    renderWithRelay({ Artwork: () => artwork })
+
+    expect(screen.getByText("Test Artwork, 2023")).toBeOnTheScreen()
+    expect(screen.getByText("Test Partner")).toBeOnTheScreen()
+    expect(screen.getByText("Test Artist")).toBeOnTheScreen()
+    expect(screen.getByText("Contact for price")).toBeOnTheScreen()
+  })
+
+  it("navigates", async () => {
+    renderWithRelay({ Artwork: () => artwork })
+
+    fireEvent.press(screen.getByText("Test Artwork, 2023"))
+    expect(navigate).toHaveBeenCalledWith("artwork-href")
+
+    fireEvent.press(screen.getByText("Test Partner"))
+    expect(navigate).toHaveBeenCalledWith("partner-href")
+
+    fireEvent.press(screen.getByText("Test Artist"))
+    expect(navigate).toHaveBeenCalledWith("artist-href")
+  })
+})
+
+const artwork = {
+  title: "Test Artwork",
+  href: "artwork-href",
+  partner: {
+    name: "Test Partner",
+    href: "partner-href",
+  },
+  date: "2023",
+  artists: [{ name: "Test Artist", href: "artist-href" }],
+  saleMessage: "Contact for price",
+}

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionArtworkImage.tests.tsx

@@ -0,0 +1,35 @@
+import { fireEvent, screen } from "@testing-library/react-native"
+import { ArticleSectionArtworkImageTestQuery } from "__generated__/ArticleSectionArtworkImageTestQuery.graphql"
+import { ArticleSectionArtworkImage } from "app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/ArticleSectionArtworkImage"
+import { navigate } from "app/system/navigation/navigate"
+import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
+import { graphql } from "react-relay"
+
+describe("ArticleSectionArtworkImage", () => {
+  const { renderWithRelay } = setupTestWrapper<ArticleSectionArtworkImageTestQuery>({
+    Component: ({ artwork }) => {
+      return <ArticleSectionArtworkImage artwork={artwork!} />
+    },
+    query: graphql`
+      query ArticleSectionArtworkImageTestQuery @relay_test_operation {
+        artwork(id: "test-id") {
+          ...ArticleSectionArtworkImage_artwork
+        }
+      }
+    `,
+  })
+
+  it("renders", async () => {
+    renderWithRelay()
+
+    expect(screen.getByLabelText(`Image of <mock-value-for-field-\"title\">`)).toBeOnTheScreen()
+  })
+
+  it("navigates to the artwork", async () => {
+    renderWithRelay()
+
+    fireEvent.press(screen.getByLabelText(`Image of <mock-value-for-field-\"title\">`))
+
+    expect(navigate).toHaveBeenCalledWith(`<mock-value-for-field-\"href\">`)
+  })
+})

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionImageCollectionCaption.tests.tsx

@@ -48,4 +48,19 @@ describe("ArticleSectionImageCollectionCaption", () => {
       expect(screen.getByText("Example Caption")).toBeOnTheScreen()
     })
   })
+
+  it("renders Artwork type", async () => {
+    renderWithRelay({
+      ArticleSectionImageCollection: () => ({
+        figures: [{ __typename: "Artwork" }],
+      }),
+      Artwork: () => ({
+        title: "Test Artwork",
+      }),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Artwork")).toBeOnTheScreen()
+    })
+  })
 })

src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionImageCollectionImage.tests.tsx

@@ -44,4 +44,16 @@ describe("ArticleSectionImageCollectionImage", () => {
       expect(screen.UNSAFE_getByType(Image)).toBeOnTheScreen()
     })
   })
+
+  it("renders Artwork type", async () => {
+    renderWithRelay({
+      ArticleSectionImageCollection: () => ({
+        figures: [{ __typename: "Artwork" }],
+      }),
+    })
+
+    await waitFor(() => {
+      expect(screen.UNSAFE_getByType(Image)).toBeOnTheScreen()
+    })
+  })
 })