{"version":3,"sources":["webpack:///./domain/constants/dimension.ts","webpack:///./presentation/components/ribbons/centerfold/Image.tsx","webpack:///./presentation/components/ribbons/centerfold/Image.stylesheet.ts","webpack:///./presentation/components/ribbons/centerfold/Centerfold.tsx","webpack:///./presentation/components/ribbons/centerfold/Centerfold.stylesheet.ts","webpack:///./presentation/components/ribbons/centerfold/index.ts"],"names":["Dimension","PureImage","image","layout","styles","theme","useTheme","aspect","preserveDimension","HEIGHT","flipped","constrainImage","isMinSm","useBreakpoints","spacing","useStyles","default","position","fullBackground","width","maxWidth","minSmFullBackground","root","paddingTop","top","right","bottom","left","height","objectFit","objectPosition","focus","flippedFullBackground","constrained","constrainedXs","gu2px","useStylesheet","currentLanguage","useSelector","getCurrentLanguage","alt","createImageAlt","imageUrl","url","imgSrc","urlLanguageParse","style","loading","src","displayName","visibilitySet","errorBoundary","id","name","text","colorway","hBaseline","title","body","ctas","breakpoints","isMinMd","isMinLg","isMinXl","activeImage","findResponsiveItem","activeAnchor","flexAnchors","Anchor","CENTER","anchor","supportNull","flowDirection","Direction","ROW","ROW_REVERSE","setDirection","offset","needsOffset","setOffset","hasTitle","isNilOrEmpty","hasBody","hasCta","typography","alignment","activeHeight","array","getActiveFromArray","transitionHeight","flex","flexBasis","paddingBottom","minHeight","color","getTitleColor","content","getBodyColor","marginTop","overflow","ribbonPadding","heightAnchor","display","marginRight","flippedSm","marginLeft","flippedLg","multipleCtas","action","modifier","Alignment","textAlign","justifyContent","Array","isArray","length","Ribbon","flush","type","vblock","direction","xs","sm","offsetXs","align","depth","Shortcode","code","against","map","cta","i","key","CallToAction","getAgainst","ribbonId","index","block","Centerfold"],"mappings":"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","file":"pex-static/29/20.bb57fe8fc44d8dfc44b4.chunk.js","sourcesContent":["export enum Dimension {\n WIDTH = 'WIDTH',\n HEIGHT = 'HEIGHT',\n}\n\nexport default null;","import React from 'react';\nimport createImageAlt from 'presentation/utils/createImageAlt';\nimport useStylesheet from './Image.stylesheet';\nimport urlLanguageParse from 'presentation/utils/urlLanguageParse';\nimport { Layout } from 'domain/constants/layout';\nimport { Image } from './Centerfold';\nimport { getCurrentLanguage } from 'domain/selectors/ribbons';\nimport { useSelector } from 'react-redux';\n\nexport interface OuterProps {\n image: Image;\n layout: Layout;\n}\n\nexport const PureImage = ({ image, layout }: OuterProps) => {\n const { styles } = useStylesheet({\n image,\n layout,\n });\n\n const currentLanguage = useSelector(getCurrentLanguage);\n\n const alt = createImageAlt({ imageUrl: image.url });\n\n const imgSrc = urlLanguageParse(image.url, currentLanguage);\n\n return (\n
\n \n
\n );\n};\n\nPureImage.displayName = 'CenterfoldImage';\n\nexport default PureImage;\n","import { useStyles } from '@team-griffin/stylr';\nimport { Dimension } from 'domain/constants/dimension';\nimport { gu2px, useTheme } from '@ux/theme-utils';\nimport { OuterProps } from './Image';\nimport { useBreakpoints } from '@ux/responsive';\n\nexport default ({ image, layout }: OuterProps) => {\n const { theme } = useTheme();\n // preserving image height uses contain, so the image always fits in\n // otherwise fill available width with cover\n const aspect = image.preserveDimension === Dimension.HEIGHT ? 'contain' : 'cover';\n\n // calcuate as proportion of a 12 col grid\n // const imageOffset = percentage(100 - (proportions[1] / 12) * 100);\n const imageOffset = '50%';\n const { flipped, constrainImage } = layout;\n const { isMinSm } = useBreakpoints();\n const { spacing } = theme;\n return useStyles(\n {\n default: {\n image: {\n position: 'static',\n },\n },\n fullBackground: {\n image: {\n width: '100%',\n maxWidth: '100%',\n },\n },\n minSmFullBackground: {\n root: {\n paddingTop: 0,\n position: 'static',\n },\n image: {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: imageOffset,\n width: `calc(100% - ${imageOffset})`,\n height: '100%',\n objectFit: aspect,\n objectPosition: image.focus,\n },\n },\n\n flippedFullBackground: {\n image: {\n right: imageOffset,\n left: 0,\n },\n },\n\n constrained: {\n root: {\n height: '100%',\n },\n image: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n objectFit: aspect,\n objectPosition: image.focus,\n },\n },\n\n constrainedXs: {\n image: {\n position: 'static',\n },\n root: {\n paddingTop: gu2px(1, spacing),\n },\n },\n },\n [\n { fullBackground: !constrainImage },\n { minSmFullBackground: isMinSm && !constrainImage },\n { flippedFullBackground: flipped && isMinSm && !constrainImage },\n { constrained: constrainImage },\n { constrainedXs: constrainImage && !isMinSm },\n //memoisation bypass\n { image },\n ],\n );\n};\n","import React, { ComponentType } from 'react';\nimport { Container, Row, Column, Direction } from '@ux/grid';\nimport { Heading02, BodyCopy01 } from '@ux/typography';\nimport Shortcode, { ShortcodeProps } from 'components/Shortcode';\nimport Ribbon from 'components/ribbons/Ribbon';\nimport CallToAction from 'components/common/CallToAction';\nimport PaddingBox from '@ux/padding-box';\nimport CenterfoldImage from './Image';\nimport { useBreakpoints } from '@ux/responsive';\nimport findResponsiveItem from 'presentation/utils/findResponsiveItem';\nimport visibilitySet from 'presentation/hocs/visibilitySet';\nimport errorBoundary from 'presentation/hocs/errorBoundary';\nimport { getAgainst } from 'presentation/utils/colorway';\nimport flexAnchors from 'presentation/utils/flexAnchors';\nimport { Anchor } from 'domain/constants/anchor';\nimport useStylesheet from './Centerfold.stylesheet';\nimport { RibbonProps } from 'domain/constants/ribbons';\nimport { Dimension } from 'domain/constants/dimension';\nimport { CTA } from 'core/ribbons/cta';\nimport { isNilOrEmpty } from 'presentation/utils/generalUtils';\nimport { Layout } from 'domain/constants/layout';\n\nconst setDirection = (layout: Layout) => {\n if (layout.constrainImage) {\n if (layout.flipped) {\n return Direction.ROW;\n }\n return Direction.ROW_REVERSE;\n }\n return null;\n};\n\nconst needsOffset = (layout: Layout, isMinSm: boolean) => layout.flipped && isMinSm;\n\nconst setOffset = (layout: Layout) => layout.constrainImage ? 0 : 6;\n\ntype text = {\n title: ShortcodeProps,\n body: ShortcodeProps,\n ctas: CTA[],\n};\n\nexport type Image = {\n url: string,\n focus: string,\n preserveDimension?: Dimension,\n};\n\nexport interface OuterProps extends RibbonProps {\n text: text,\n image: Image[],\n}\n\nexport const PureCenterfold = ({\n id,\n theme,\n loading,\n name,\n text,\n layout,\n colorway,\n hBaseline = 1,\n image,\n}: OuterProps) => {\n const {\n title,\n body,\n ctas,\n } = text || {};\n\n const {\n constrainImage,\n } = layout;\n\n const breakpoints = useBreakpoints();\n\n const {\n isMinSm,\n isMinMd,\n isMinLg,\n isMinXl,\n } = breakpoints;\n\n const activeImage = findResponsiveItem(\n breakpoints,\n image,\n ) as Image;\n\n const activeAnchor = findResponsiveItem(\n breakpoints,\n flexAnchors([ Anchor.CENTER, null, null ], layout.anchor),\n {\n supportNull: true,\n },\n );\n\n const flowDirection = isMinSm === true ? setDirection(layout) : null;\n\n const offset = needsOffset(layout, isMinSm) ? setOffset(layout) : null;\n\n const hasTitle = !isNilOrEmpty(title);\n const hasBody = !isNilOrEmpty(body);\n const hasCta = !isNilOrEmpty(ctas);\n\n const {\n styles,\n } = useStylesheet({\n theme,\n colorway,\n layout,\n isMinSm,\n isMinMd,\n isMinLg,\n isMinXl,\n hasCta,\n text,\n });\n return (\n \n
\n {!constrainImage && (\n \n )}\n
\n \n \n {constrainImage && (\n \n \n \n )}\n \n \n {hasTitle && (\n \n \n \n )}\n {hasBody && (\n \n \n \n )}\n {hasCta && (\n
\n {ctas.map((cta, i) => (\n \n \n
\n ))}\n
\n )}\n \n \n \n \n
\n \n \n );\n};\n\nexport default visibilitySet(errorBoundary(PureCenterfold)) as ComponentType;\n","import { useStyles } from '@team-griffin/stylr';\nimport findResponsiveItem from 'presentation/utils/findResponsiveItem';\nimport ribbonPadding from 'presentation/utils/ribbonPadding';\nimport { content } from '@ux/type-size';\nimport { getTitleColor, getBodyColor } from 'presentation/utils/colorway';\nimport { modifier } from '@ux/style-utils';\nimport { Alignment } from 'domain/constants/alignment';\nimport { Colorway, gu2px, Theme } from '@ux/theme-utils';\nimport { ResponsiveSet } from 'core/ribbons/primitives';\nimport { Layout } from 'domain/constants/layout';\nimport { BreakpointProps } from '@ux/responsive';\nimport { CTA } from 'core/ribbons/cta';\nimport { ShortcodeProps } from 'presentation/components/Shortcode';\n\ninterface StyleProps extends BreakpointProps {\n theme: Theme;\n colorway: Colorway;\n layout: Layout;\n hasCta: boolean;\n text: {\n title: ShortcodeProps;\n body: ShortcodeProps;\n ctas: CTA[];\n };\n}\nexport default ({\n theme,\n colorway,\n layout,\n isMinSm,\n isMinMd,\n isMinLg,\n isMinXl,\n hasCta,\n text,\n}: StyleProps) => {\n const { spacing, typography } = theme;\n\n const { alignment, flipped } = layout;\n\n const getActiveFromArray = (array: ResponsiveSet) =>\n findResponsiveItem(\n {\n isMinSm,\n isMinMd,\n isMinLg,\n isMinXl,\n },\n array,\n );\n\n const height = layout.height ?? ([ 'auto', 'auto', 'auto' ] as ResponsiveSet);\n\n const activeHeight = getActiveFromArray(height);\n const transitionHeight = activeHeight === 'auto' ? 200 : activeHeight;\n\n return useStyles(\n {\n default: {\n root: {\n position: 'relative',\n flex: 1,\n flexBasis: 'auto',\n paddingBottom: gu2px(4, spacing),\n minHeight: transitionHeight,\n },\n title: {\n color: getTitleColor(theme, colorway),\n },\n text: {\n ...content(typography),\n color: getBodyColor(theme, colorway),\n marginTop: gu2px(2, spacing),\n },\n // 3GU between text and ctas\n ctas: {\n marginTop: gu2px(3, spacing),\n overflow: 'hidden',\n },\n },\n\n isMinSm: {\n root: {\n height: '100%',\n ...ribbonPadding({\n isMinSm,\n isMinLg,\n layout,\n spacing,\n }),\n },\n heightAnchor: {\n minHeight: activeHeight,\n display: 'flex',\n height: '100%',\n },\n content: {\n // 2GU between text and image (2 + 1 from Column)\n marginRight: gu2px(1, spacing),\n },\n ctas: {\n display: 'flex',\n },\n },\n\n flippedSm: {\n content: {\n marginRight: 0,\n // 2GU between text and image (2 + 1 from Column)\n marginLeft: gu2px(1, spacing),\n },\n },\n\n isMinLg: {\n content: {\n // 3GU between text and image (2 + 1 from Column)\n marginRight: gu2px(2, spacing),\n },\n },\n\n flippedLg: {\n content: {\n marginRight: 0,\n // 3GU between text and image (2 + 1 from Column)\n marginLeft: gu2px(2, spacing),\n },\n },\n multipleCtas: {\n ctas: {\n marginTop: gu2px(2, spacing),\n },\n action: {\n marginTop: gu2px(1, spacing),\n ...(isMinSm ? {\n marginRight: gu2px(1, spacing),\n }: {}),\n },\n },\n\n [modifier('alignment', Alignment.CENTER)]: {\n content: {\n textAlign: 'center',\n },\n ctas: {\n justifyContent: 'center',\n },\n },\n },\n [\n { isMinSm },\n { isMinLg },\n { alignment },\n { hasCta },\n { flippedSm: isMinSm && flipped },\n { flippedLg: isMinLg && flipped },\n {\n multipleCtas: Array.isArray(text.ctas) && text.ctas.length > 1,\n },\n ],\n );\n};\n","import Centerfold from './Centerfold';\n\nexport default Centerfold;\n"],"sourceRoot":""}