Link header badges to Auction Result / Career Highlights

src/Apps/Artist/Components/ArtistHeader.tsx

@@ -405,7 +405,13 @@ const renderAuctionHighlight = artist => {
   )
   if (topAuctionResult) {
     const auctionLabel = topAuctionResult + " Auction Record"
-    return <ArtistIndicator label={auctionLabel} type="high-auction" />
+    return (
+      <ArtistIndicator
+        label={auctionLabel}
+        type="high-auction"
+        link={`/artist/${artist.slug}/auction-results`}
+      />
+    )
   }
 }
 
@@ -420,7 +426,11 @@ const renderRepresentationStatus = artist => {
     const highCategory = highestCategory(partnersConnection.edges)
 
     return (
-      <ArtistIndicator label={CATEGORIES[highCategory]} type={highCategory} />
+      <ArtistIndicator
+        label={CATEGORIES[highCategory]}
+        type={highCategory}
+        link={`/artist/${artist.slug}/cv`}
+      />
     )
   }
 }

src/Apps/Artist/Components/ArtistIndicator.tsx

@@ -8,10 +8,12 @@ import {
   TopEstablishedIcon,
 } from "@artsy/palette"
 import styled from "styled-components"
+import { StyledLink } from "./StyledLink"
 
 interface ArtistIndicatorProps {
   type: string
   label: string
+  link: string
 }
 
 const ICON_MAPPING = {
@@ -33,21 +35,23 @@ export class ArtistIndicator extends React.Component<ArtistIndicatorProps> {
   }
 
   render() {
-    const { label, type } = this.props
+    const { label, type, link } = this.props
 
     return (
-      <RoundedFlex
-        background={color("black5")}
-        width="auto"
-        py={5}
-        px={10}
-        mt={1}
-      >
-        {this.renderIcon(type)}
-        <Sans pt="2px" size="2">
-          {label}
-        </Sans>
-      </RoundedFlex>
+      <StyledLink to={link}>
+        <RoundedFlex
+          background={color("black5")}
+          width="auto"
+          py={5}
+          px={10}
+          mt={1}
+        >
+          {this.renderIcon(type)}
+          <Sans pt="2px" size="2">
+            {label}
+          </Sans>
+        </RoundedFlex>
+      </StyledLink>
     )
   }
 }

src/Apps/Artist/Components/__tests__/ArtistHeader.test.tsx

@@ -6,6 +6,7 @@ import {
 } from "Apps/Artist/Components/ArtistHeader"
 import { renderRelayTree } from "DevTools"
 import { graphql } from "react-relay"
+import { ArtistIndicator } from "../ArtistIndicator"
 
 jest.unmock("react-relay")
 
@@ -17,7 +18,7 @@ describe("ArtistHeader", () => {
       Component: ArtistHeader,
       query: graphql`
         query ArtistHeader_Test_Query @raw_response_type {
-          artist(id: "pablo-picasso") {
+          artist(id: "cecily-brown") {
             ...ArtistHeader_artist
           }
         }
@@ -49,12 +50,32 @@ describe("ArtistHeader", () => {
     expect(html).toContain("Blue Chip")
   })
 
+  it("career stage links to cv page", async () => {
+    const wrapper = await getWrapper()
+    expect(
+      wrapper
+        .find(ArtistIndicator)
+        .at(0)
+        .props().link
+    ).toEqual("/artist/cecily-brown/cv")
+  })
+
   it("renders auction record indicator when data is present", async () => {
     const wrapper = await getWrapper()
     const html = wrapper.html()
     expect(html).toContain("Auction Record")
   })
 
+  it("auction record indicator links to auction results tab", async () => {
+    const wrapper = await getWrapper()
+    expect(
+      wrapper
+        .find(ArtistIndicator)
+        .at(1)
+        .props().link
+    ).toEqual("/artist/cecily-brown/auction-results")
+  })
+
   it("hides auction record indicator when data is not present", async () => {
     const artist = {
       ...ArtistHeaderFixture,