<commit_before>import { Box, color } from "@artsy/palette"
import {
  is300x50AdUnit,
  targetingData,
} from "Components/Publishing/Display/DisplayTargeting"
import { Nav } from "Components/Publishing/Nav/Nav"
import { ArticleCards } from "Components/Publishing/RelatedArticles/ArticleCards/ArticleCards"
import { FixedBackground } from "Components/Publishing/Series/FixedBackground"
import { SeriesAbout } from "Components/Publishing/Series/SeriesAbout"
import {
  SeriesTitle,
  SeriesTitleContainer,
} from "Components/Publishing/Series/SeriesTitle"
import { AdDimension, AdUnit, ArticleData } from "Components/Publishing/Typings"
import { isEditorialSponsored } from "Components/Publishing/utils/Sponsored"
import React, { Component } from "react"
import styled from "styled-components"
import { DisplayAd } from "../Display/DisplayAd"

interface Props {
  areHostedAdsEnabled?: boolean
  article?: ArticleData
  backgroundColor?: string
  color?: string
  relatedArticles?: any
  isMobile?: boolean
}

export class SeriesLayout extends Component<Props, null> {
  public static defaultProps: Partial<Props>

  render() {
    const {
      article,
      backgroundColor,
      relatedArticles,
      isMobile,
      areHostedAdsEnabled,
    } = this.props

    const { hero_section, sponsor } = article
    const isSponsored = isEditorialSponsored(sponsor)
    const backgroundUrl =
      hero_section && hero_section.url ? hero_section.url : ""
    const adDimension = isMobile
      ? AdDimension.Mobile_SponsoredSeriesLandingPageAndVideoPage_Bottom
      : AdDimension.Desktop_SponsoredSeriesLandingPageAndVideoPage_LeaderboardBottom

    return (
      <SeriesContainer
        color={this.props.color}
        backgroundColor={backgroundColor}
      >
        <Nav transparent sponsor={sponsor} canFix={false} />

        <FixedBackground
          backgroundColor={backgroundColor}
          backgroundUrl={backgroundUrl}
        />

        <SeriesContent sponsor={sponsor}>
          <SeriesTitle article={article} color={this.props.color} />

          {relatedArticles && (
            <ArticleCards
              relatedArticles={relatedArticles}
              series={article}
              color={this.props.color}
            />
          )}
          <Box maxWidth={1200} mx="auto" pt={[40, 40, 60]}>
            <SeriesAbout article={article} color={this.props.color} />
          </Box>
        </SeriesContent>
        {areHostedAdsEnabled && (
          <DisplayAd
            pt={is300x50AdUnit(adDimension) ? 2 : 4} // add 20px to mobile leaderboard ads until this component is converted to <DisplayAd />
            adUnit={
              isMobile
                ? AdUnit.Mobile_SponsoredSeriesLandingPageAndVideoPage_Bottom
                : AdUnit.Desktop_SponsoredSeriesLandingPageAndVideoPage_LeaderboardBottom
            }
            adDimension={adDimension}
            displayNewAds={areHostedAdsEnabled}
            targetingData={targetingData(
              article.id,
              isSponsored ? "sponsorlanding" : "standardseries"
            )}
            isSeries
          />
        )}
      </SeriesContainer>
    )
  }
}

SeriesLayout.defaultProps = {
  backgroundColor: color("black100"),
  color: "white",
}

interface ContainerProps {
  backgroundUrl?: string
  sponsor?: any
}

export const SeriesContent = styled.div<Props & ContainerProps>`<commit_msg>Remove explicit padding-top since it's covered by DisplayAd<commit_after>import { Box, color } from "@artsy/palette"
import { targetingData } from "Components/Publishing/Display/DisplayTargeting"
import { Nav } from "Components/Publishing/Nav/Nav"
import { ArticleCards } from "Components/Publishing/RelatedArticles/ArticleCards/ArticleCards"
import { FixedBackground } from "Components/Publishing/Series/FixedBackground"
import { SeriesAbout } from "Components/Publishing/Series/SeriesAbout"
import {
  SeriesTitle,
  SeriesTitleContainer,
} from "Components/Publishing/Series/SeriesTitle"
import { AdDimension, AdUnit, ArticleData } from "Components/Publishing/Typings"
import { isEditorialSponsored } from "Components/Publishing/utils/Sponsored"
import React, { Component } from "react"
import styled from "styled-components"
import { DisplayAd } from "../Display/DisplayAd"

interface Props {
  areHostedAdsEnabled?: boolean
  article?: ArticleData
  backgroundColor?: string
  color?: string
  relatedArticles?: any
  isMobile?: boolean
}

export class SeriesLayout extends Component<Props, null> {
  public static defaultProps: Partial<Props>

  render() {
    const {
      article,
      backgroundColor,
      relatedArticles,
      isMobile,
      areHostedAdsEnabled,
    } = this.props

    const { hero_section, sponsor } = article
    const isSponsored = isEditorialSponsored(sponsor)
    const backgroundUrl =
      hero_section && hero_section.url ? hero_section.url : ""
    const adDimension = isMobile
      ? AdDimension.Mobile_SponsoredSeriesLandingPageAndVideoPage_Bottom
      : AdDimension.Desktop_SponsoredSeriesLandingPageAndVideoPage_LeaderboardBottom

    return (
      <SeriesContainer
        color={this.props.color}
        backgroundColor={backgroundColor}
      >
        <Nav transparent sponsor={sponsor} canFix={false} />

        <FixedBackground
          backgroundColor={backgroundColor}
          backgroundUrl={backgroundUrl}
        />

        <SeriesContent sponsor={sponsor}>
          <SeriesTitle article={article} color={this.props.color} />

          {relatedArticles && (
            <ArticleCards
              relatedArticles={relatedArticles}
              series={article}
              color={this.props.color}
            />
          )}
          <Box maxWidth={1200} mx="auto" pt={[40, 40, 60]}>
            <SeriesAbout article={article} color={this.props.color} />
          </Box>
        </SeriesContent>
        {areHostedAdsEnabled && (
          <DisplayAd
            adUnit={
              isMobile
                ? AdUnit.Mobile_SponsoredSeriesLandingPageAndVideoPage_Bottom
                : AdUnit.Desktop_SponsoredSeriesLandingPageAndVideoPage_LeaderboardBottom
            }
            adDimension={adDimension}
            displayNewAds={areHostedAdsEnabled}
            targetingData={targetingData(
              article.id,
              isSponsored ? "sponsorlanding" : "standardseries"
            )}
            isSeries
          />
        )}
      </SeriesContainer>
    )
  }
}

SeriesLayout.defaultProps = {
  backgroundColor: color("black100"),
  color: "white",
}

interface ContainerProps {
  backgroundUrl?: string
  sponsor?: any
}

export const SeriesContent = styled.div<Props & ContainerProps>`
{'fraction_non_alphanumeric': 0.09312042978659901, 'fraction_numerical': 0.005969258319653783, 'mean_word_length': 2.9261862917398944, 'pattern_counts': {'":': 0, '<': 34, '<?xml version=': 0, '>': 34, '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': '4435134', 'n_tokens_mistral': 1892, 'n_tokens_neox': 1806, 'n_words': 353}