import type { SerializedStyles } from "@emotion/react" ; import { css } from "@emotion/react" ; import { remSpace } from "@guardian/source-foundations" ; import { brandAltText , neutral , text } from "@guardian/source-foundations" ; import { textSans } from "@guardian/source-foundations" ; import type { ArticleFormat } from "@guardian/libs" ; import { ArticleDesign } from "@guardian/libs" ; import type { Option } from "@guardian/types" ; import { OptionKind } from "@guardian/types" ; import type { FC , ReactNode } from "react" ; import { fill } from "../editorialPalette" ; import { darkModeCss } from "../lib" ; interface TriangleProps { format : ArticleFormat ; supportsDarkMode : boolean ; } const triangleStyles = ( format , supportsDarkMode ) : SerializedStyles => css `
	fill: ${ fill . icon ( format ) };
	height: 0.8em;
	padding-right: ${ remSpace [ 1 ] };

	${ darkModeCss ( supportsDarkMode ) `
        fill: ${ fill . iconDark ( format ) };
    ` }
` ; const Triangle = ( { format , supportsDarkMode } ) => { switch ( format . design ) { case ArticleDesign . Media : return null ; default : return ( < svg css = { triangleStyles ( format , supportsDarkMode ) } viewBox = "0 0 10 9" xmlns = "http://www.w3.org/2000/svg" > < polygon points = "0,9 5,0 10,9" / > < /svg>); } } ; type Props = { format : ArticleFormat ; supportsDarkMode : boolean ; children : Option < ReactNode > ; } ; const styles = ( supportsDarkMode ) => css `
	${ textSans . xsmall ( ) }
	padding-top: ${ remSpace [ 2 ] };
	color: ${ text . supporting };

	${ darkModeCss ( supportsDarkMode ) `
    color: ${ brandAltText . supporting };
  ` }
` ; const mediaStyles = ( supportsDarkMode ) => css `
	color: ${ neutral [ 86 ] };

	${ darkModeCss ( supportsDarkMode ) `
    color: ${ neutral [ 86 ] };
  ` }
` ; const getStyles = ( format , supportsDarkMode ) : SerializedStyles => { switch ( format . design ) { case ArticleDesign . Media : return css ( styles ( supportsDarkMode ) , mediaStyles ( supportsDarkMode ) ) ; default : return styles ( supportsDarkMode ) ; } } ; const FigCaption = ( { format , supportsDarkMode , children } ) => { switch ( children . kind ) { case OptionKind . Some : return ( < figcaption css = { getStyles ( format , supportsDarkMode ) } > < Triangle format = { format } supportsDarkMode = { supportsDarkMode } / > { children . value } < /figcaption>); default : return null ; } } ; export default FigCaption ;