Merge pull request #3625 from dzucconi/feat/FX-2184--captions--2

[FX-2184] Updates captions

src/Components/Publishing/Sections/ArtworkCaption.tsx

@@ -1,4 +1,4 @@
-import { color as Color, Sans, Serif } from "@artsy/palette"
+import { Box, BoxProps, Text, color } from "@artsy/palette"
 import { ErrorBoundary } from "Artsy/Router/ErrorBoundary"
 import { pMedia } from "Components/Helpers"
 import { ArticleLayout, SectionLayout } from "Components/Publishing/Typings"
@@ -7,7 +7,7 @@ import _ from "lodash"
 import React from "react"
 import styled from "styled-components"
 
-interface ArtworkCaptionProps extends React.HTMLProps<HTMLDivElement> {
+interface ArtworkCaptionProps extends BoxProps {
   artwork: any
   color?: string
   layout?: ArticleLayout
@@ -18,7 +18,7 @@ interface ArtworkCaptionProps extends React.HTMLProps<HTMLDivElement> {
 
 export class ArtworkCaption extends React.Component<ArtworkCaptionProps> {
   static defaultProps = {
-    color: Color("black30"),
+    color: "black60",
   }
 
   joinParts(children, key, delimiter = ", ") {
@@ -195,7 +195,7 @@ export class ArtworkCaption extends React.Component<ArtworkCaptionProps> {
 
   renderFullscreenCaption = () => {
     return (
-      <StyledFullscreenCaption size={["3", "4"]} weight="medium">
+      <StyledFullscreenCaption variant="mediumText">
         <Line>
           <ArtistNames>{this.renderArtists()}</ArtistNames>
         </Line>
@@ -209,11 +209,7 @@ export class ArtworkCaption extends React.Component<ArtworkCaptionProps> {
 
   renderClassicCaption = () => {
     return (
-      <StyledClassicCaption
-        color={Color("black60")}
-        size="2"
-        className="display-artwork__caption"
-      >
+      <StyledClassicCaption className="display-artwork__caption">
         <Truncator>
           <ArtistNames>{this.renderArtists()}</ArtistNames>
           {this.renderTitleDate()}
@@ -229,7 +225,6 @@ export class ArtworkCaption extends React.Component<ArtworkCaptionProps> {
 
     return (
       <StyledArtworkCaption
-        size="3"
         color={color}
         layout={layout}
         sectionLayout={sectionLayout}
@@ -244,41 +239,42 @@ export class ArtworkCaption extends React.Component<ArtworkCaptionProps> {
   }
 
   render() {
-    const { layout, isFullscreenCaption } = this.props
+    const { layout, isFullscreenCaption, ...rest } = this.props
 
     return (
       <ErrorBoundary>
-        <div>
+        <Box {...rest}>
           {isFullscreenCaption
             ? this.renderFullscreenCaption()
             : layout === "classic"
             ? this.renderClassicCaption()
             : this.renderEditorialCaption()}
-        </div>
+        </Box>
       </ErrorBoundary>
     )
   }
 }
 
-const ArtistNames = styled.span`
+const ArtistNames = styled.strong`
   margin-right: 30px;
+  color: ${color("black100")};
 `
 
 const ArtistName = styled.span`
   white-space: nowrap;
 `
 
-export const StyledArtworkCaption = styled(Sans)<{
-  color?: string
+export const StyledArtworkCaption = styled(Text).attrs({
+  variant: "text",
+})<{
   layout?: ArticleLayout
   sectionLayout?: SectionLayout
 }>`
   padding: ${props => (props.sectionLayout === "fillwidth" ? "0 10px;" : "0;")};
   margin-top: 10px;
-  display: flex;
 
   a {
-    color: ${props => props.color};
+    color: inherit;
     text-decoration: none;
   }
 
@@ -292,21 +288,22 @@ export const StyledArtworkCaption = styled(Sans)<{
   `};
 `
 
-const StyledClassicCaption = styled(Serif)<{
-  className?: string
-  color?: string
-}>`
+const StyledClassicCaption = styled(Text).attrs({
+  fontFamily: "serif",
+  variant: "text",
+  color: "black60",
+})`
   margin-top: 10px;
   display: block;
 
   a {
-    color: ${props => props.color};
+    color: inherit;
     text-decoration: none;
   }
 
   ${ArtistNames} {
     margin-right: 0;
-    font-weight: bold;
+    color: inherit;
 
     &::after {
       content: ", ";
@@ -318,11 +315,10 @@ const StyledClassicCaption = styled(Serif)<{
   }
 `
 
-const StyledFullscreenCaption = styled(Sans)`
-  display: flex;
-
+const StyledFullscreenCaption = styled(Text).attrs({
+  variant: "text",
+})`
   a {
-    color: black;
     text-decoration: none;
   }
 

src/Components/Publishing/Sections/Caption.tsx

@@ -1,8 +1,8 @@
-import { garamond, unica } from "Assets/Fonts"
 import { pMedia } from "Components/Helpers"
 import { ArticleLayout, SectionLayout } from "Components/Publishing/Typings"
 import React from "react"
 import styled from "styled-components"
+import { Text, color } from "@artsy/palette"
 
 interface CaptionProps {
   caption: string
@@ -18,7 +18,7 @@ interface FigcaptionProps {
   sectionLayout?: SectionLayout
 }
 
-export const Caption: React.SFC<CaptionProps> = props => {
+export const Caption: React.FC<CaptionProps> = props => {
   const { caption, children, color, layout, sectionLayout } = props
 
   const child = children || (
@@ -28,7 +28,13 @@ export const Caption: React.SFC<CaptionProps> = props => {
   return (
     <CaptionContainer>
       <Figcaption layout={layout} sectionLayout={sectionLayout} color={color}>
-        {child}
+        <Text
+          color="black60"
+          variant="caption"
+          fontFamily={layout === "classic" ? "serif" : "sans"}
+        >
+          {child}
+        </Text>
       </Figcaption>
     </CaptionContainer>
   )
@@ -46,28 +52,20 @@ export const CaptionContainer = styled.div`
 
 // includes draft placeholder class for editable text in Writer
 const Figcaption = styled.div<FigcaptionProps>`
-  padding: ${props => (props.sectionLayout === "fillwidth" ? "0 10px;" : "0;")}
+  padding: ${props => (props.sectionLayout === "fillwidth" ? "0 10px" : "0")};
   width: 100%;
   word-break: break-word;
 
-  & > p, p,
-  .public-DraftEditorPlaceholder-root,
-  .public-DraftStyleDefault-block {
-    ${props => (props.layout === "classic" ? garamond("s15") : unica("s14"))}
-    color: ${props =>
-      props.color ? props.color : props.layout === "classic" ? "#666" : "#999"};
-    margin: 0;
-    display: inline;    
-  }
+  & > a,
+  a {
+    color: inherit;
 
-  & > a, a {
-    color: #999;
     &:hover {
-      color: black;
+      color: ${color("black100")};
     }
   }
 
   ${pMedia.xs`
-    padding: 0px;
+    padding: 0;
   `}
 `

src/Components/Publishing/Sections/FullscreenViewer/ArtworkCaption.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import { Box, BoxProps, Button } from "@artsy/palette"
+import { ArtworkCaption as BaseArtworkCaption } from "../ArtworkCaption"
+
+interface ArtworkCaptionProps extends BoxProps {
+  section: unknown & { type: "artwork"; slug: string }
+}
+
+export const ArtworkCaption: React.FC<ArtworkCaptionProps> = ({
+  section,
+  ...rest
+}) => {
+  return (
+    <Box {...rest}>
+      <BaseArtworkCaption
+        flex="1"
+        artwork={section}
+        isFullscreenCaption
+        linked
+        color="black100"
+      />
+
+      <Button
+        variant="secondaryGray"
+        // TODO: event should be the correct type in palette
+        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          // TODO: This isn't a real link and that's annoying
+          // <Button> doesn't support `as`, once it does, replace
+          // click handler this with: as={RouterLink} to={`/artwork/${section.slug}`}
+          const path = `/artwork/${section.slug}`
+
+          if (event.metaKey) {
+            window.open(path, "_blank")
+            return
+          }
+
+          window.location.href = path
+        }}
+      >
+        View
+      </Button>
+    </Box>
+  )
+}