<commit_before>import { color } from "@artsy/palette"
import { CollectionsRailContent } from "Components/CollectionsRail"
import {
  ArticleData,
  DisplayData,
  RelatedArticleCanvasData,
} from "Components/Publishing//Typings"
import { DisplayCanvas } from "Components/Publishing/Display/Canvas"
import { RelatedArticlesCanvas } from "Components/Publishing/RelatedArticles/Canvas/RelatedArticlesCanvas"
import React from "react"
import styled from "styled-components"

export interface CanvasFooterProps {
  display?: DisplayData
  relatedArticles?: RelatedArticleCanvasData[]
  article: ArticleData
  renderTime?: number
  showCollectionsRail?: boolean
}

export const CanvasFooter: React.SFC<CanvasFooterProps> = props => {
  const { article, display, relatedArticles, renderTime } = props
  const showCollectionRails = ["standard", "feature", "news"].includes(
    article.layout
  )

  return (
    <CanvasFooterContainer>
      {relatedArticles && (
        <RelatedArticlesCanvas
          articles={relatedArticles}
          vertical={article.layout !== "news" && article.vertical}
        />
      )}

      {showCollectionRails && <CollectionsRailContent {...props} />}

      {display && (
        <DisplayContainer hasBorder={relatedArticles ? true : false}>
          <DisplayCanvas
            unit={display.canvas}
            campaign={display}
            article={article}
            renderTime={renderTime}
          />
        </DisplayContainer>
      )}
    </CanvasFooterContainer>
  )
}

export const CanvasFooterContainer = styled.div`
  border-top: 1px solid ${color("black10")};
`

const DisplayContainer = styled.div.attrs<{ hasBorder?: boolean }>({})`
  ${props =>
    props.hasBorder &&
    `
    border-top: 1px solid ${color("black10")}; <commit_msg>use passed prop in conditional<commit_after>import { color } from "@artsy/palette"
import { CollectionsRailContent } from "Components/CollectionsRail"
import {
  ArticleData,
  DisplayData,
  RelatedArticleCanvasData,
} from "Components/Publishing//Typings"
import { DisplayCanvas } from "Components/Publishing/Display/Canvas"
import { RelatedArticlesCanvas } from "Components/Publishing/RelatedArticles/Canvas/RelatedArticlesCanvas"
import React from "react"
import styled from "styled-components"

export interface CanvasFooterProps {
  display?: DisplayData
  relatedArticles?: RelatedArticleCanvasData[]
  article: ArticleData
  renderTime?: number
  showCollectionsRail?: boolean
}

export const CanvasFooter: React.SFC<CanvasFooterProps> = props => {
  const { article, display, relatedArticles, renderTime } = props

  return (
    <CanvasFooterContainer>
      {relatedArticles && (
        <RelatedArticlesCanvas
          articles={relatedArticles}
          vertical={article.layout !== "news" && article.vertical}
        />
      )}

      {props.showCollectionsRail && <CollectionsRailContent {...props} />}

      {display && (
        <DisplayContainer hasBorder={relatedArticles ? true : false}>
          <DisplayCanvas
            unit={display.canvas}
            campaign={display}
            article={article}
            renderTime={renderTime}
          />
        </DisplayContainer>
      )}
    </CanvasFooterContainer>
  )
}

export const CanvasFooterContainer = styled.div`
  border-top: 1px solid ${color("black10")};
`

const DisplayContainer = styled.div.attrs<{ hasBorder?: boolean }>({})`
  ${props =>
    props.hasBorder &&
    `
    border-top: 1px solid ${color("black10")}; 
{'fraction_non_alphanumeric': 0.11492281303602059, 'fraction_numerical': 0.003430531732418525, 'mean_word_length': 3.5559895833333335, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6270756', 'n_tokens_mistral': 986, 'n_tokens_neox': 941, 'n_words': 202}