{"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","enhance","pureEnhance","hocs","withLanguage","hooks","withProps","ownerProps","alt","createImageAlt","imageUrl","image","url","imgSrc","urlLanguageParse","currentLanguage","layout","theme","aspect","preserveDimension","HEIGHT","imageOffset","percentage","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","styles","style","loading","src","setDirection","r","Direction","ROW","ROW_REVERSE","capra","needsOffset","setOffset","errorBoundary","visibilitySet","defaultProps","hBaseline","withBreakpointsHook","activeImage","findResponsiveItem","getBreakpoints","activeAnchor","flexAnchors","Anchor","CENTER","anchor","supportNull","hasTitle","isNotNilOrEmpty","hasBody","hasCta","offset","flowDirection","colorway","isMinMd","isMinLg","isMinXl","text","typography","alignment","activeHeight","array","getActiveFromArray","transitionHeight","flex","flexBasis","paddingBottom","minHeight","title","color","getTitleColor","content","getBodyColor","marginTop","ctas","overflow","ribbonPadding","heightAnchor","display","marginRight","flippedSm","marginLeft","flippedLg","mutipleCtas","action","modifier","Alignment","textAlign","justifyContent","id","name","body","Ribbon","flush","type","vblock","direction","xs","sm","offsetXs","align","depth","Shortcode","code","against","key","i","CallToAction","getAgainst","ribbonId","index","block","cta","Centerfold"],"mappings":"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","file":"pex-static/10/19.66c5835a515eaaea7f93.chunk.js","sourcesContent":["export enum Dimension {\n  WIDTH = 'WIDTH',\n  HEIGHT = 'HEIGHT',\n}\n\nexport default null;","import React from 'react';\nimport {\n  withProps,\n} from '@team-griffin/rehook';\nimport pureEnhance from '@ux/pure-enhance';\nimport createImageAlt from 'presentation/utils/createImageAlt';\nimport stylesheet, { Styles } from './Image.stylesheet';\nimport urlLanguageParse from 'presentation/utils/urlLanguageParse';\nimport withLanguage from 'presentation/hocs/withLanguage';\nimport { Layout } from 'domain/constants/layout';\nimport { Theme } from '@ux/theme-utils';\nimport { Dimension } from 'domain/constants/dimension';\n\ninterface OuterProps {\n  image: {\n    url: string,\n    focus: string,\n    preserveDimension?: Dimension,\n  },\n  layout: Layout,\n  theme: Theme,\n}\nexport interface MiddleProps extends OuterProps {\n  currentLanguage: string,\n}\nexport interface InnerProps extends MiddleProps {\n  styles: Styles,\n  alt: string,\n  imgSrc: string,\n}\n\nexport const PureImage = ({\n  styles,\n  alt,\n  imgSrc,\n}: InnerProps) => (\n  <div style={styles.root}>\n    <img\n      loading=\"lazy\"\n      src={imgSrc}\n      style={styles.image}\n      alt={alt}\n    />\n  </div>\n);\n\nexport const enhance = pureEnhance<InnerProps, OuterProps>(\n  'CenterfoldImage', {\n    hocs: [\n      withLanguage,\n    ],\n    hooks: [\n      withProps((ownerProps: MiddleProps) => ({\n        alt: createImageAlt({ imageUrl: ownerProps.image.url }),\n        imgSrc: urlLanguageParse(ownerProps.image.url, ownerProps.currentLanguage),\n      })),\n      withProps(stylesheet),\n    ],\n  }\n);\n\nexport default enhance(PureImage);","import { useStyles } from '@team-griffin/stylr';\nimport { percentage } from '@ux/style-utils';\nimport { Dimension } from 'domain/constants/dimension';\nimport { gu2px } from '@ux/theme-utils';\nimport { InnerProps } from './Image';\nimport { CSSProperties } from 'react';\nimport { useBreakpoints } from '@ux/responsive';\n\nexport interface Styles {\n  image: CSSProperties,\n  root: CSSProperties,\n}\nexport default ({\n  image,\n  layout,\n  theme,\n}: InnerProps) => {\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  // calcuate as proportion of a 12 col grid\n  // const imageOffset = percentage(100 - (proportions[1] / 12) * 100);\n  const imageOffset = percentage(50);\n  const {\n    flipped,\n    constrainImage,\n  } = layout;\n  const { isMinSm } = useBreakpoints();\n  const {\n    spacing,\n  } = theme;\n\n  return useStyles({\n    default: {\n      image: {\n        position: 'static',\n      },\n    },\n    fullBackground: {\n      image: {\n        width: percentage(100),\n        maxWidth: percentage(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: percentage(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: percentage(100),\n      },\n      image: {\n        position: 'absolute',\n        width: percentage(100),\n        height: percentage(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    { fullBackground: !constrainImage },\n    { minSmFullBackground: isMinSm && !constrainImage },\n    { flippedFullBackground: flipped && isMinSm && !constrainImage },\n    { constrained: constrainImage },\n    { constrainedXs: constrainImage && !isMinSm },\n  ]);\n};","import React from 'react';\nimport {\n  withProps,\n  defaultProps,\n} from '@team-griffin/rehook';\nimport { Container, Row, Column, Direction, Align } 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 { BreakpointProps, withBreakpointsHook } 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 getBreakpoints from 'presentation/utils/getBreakpoints';\nimport { isNotNilOrEmpty } from 'crosscutting/ramda';\nimport { Anchor } from 'domain/constants/anchor';\nimport * as r from 'ramda';\nimport stylesheet, { Styles } from './Centerfold.stylesheet';\nimport * as capra from '@team-griffin/capra';\nimport { RibbonProps } from 'domain/constants/ribbons';\nimport { Dimension } from 'domain/constants/dimension';\nimport pureEnhance from '@ux/pure-enhance';\nimport { CTA } from 'core/ribbons/cta';\n\nconst setDirection = r.ifElse(\n  r.path([ 'layout', 'constrainImage' ]),\n  r.ifElse(\n    r.path([ 'layout', 'flipped' ]),\n    r.always(Direction.ROW),\n    r.always(Direction.ROW_REVERSE),\n  ),\n  capra.nuller,\n);\n\nconst needsOffset = r.both(\n  r.path([ 'layout', 'flipped' ]),\n  r.prop('isMinSm'),\n);\n\nconst setOffset = r.ifElse(\n  r.path([ 'layout', 'constrainImage' ]),\n  r.always(0),\n  r.always(6),\n);\n\ntype text = {\n  title: ShortcodeProps,\n  body: ShortcodeProps,\n  ctas: CTA[],\n};\ninterface OuterProps extends RibbonProps {\n  text: text,\n  image: {\n    url: string,\n    focus: string,\n    preserveDimension?: Dimension,\n  }[],\n}\ninterface DefaultProps extends OuterProps {\n  hBaseline: number,\n}\ninterface MiddleProps extends DefaultProps, BreakpointProps {}\nexport interface InnerProps extends MiddleProps {\n  styles: Styles,\n  activeImage: {\n    url: string,\n    focus: string,\n    preserveDimension?: Dimension,\n  },\n  activeAnchor: Align,\n  hasTitle: boolean,\n  hasBody: boolean,\n  hasCta: boolean,\n  offset: number,\n  flowDirection: Direction,\n}\n\ndeclare const i: number;\ndeclare const cta: CTA;\n\nexport const PureCenterfold = ({\n  id,\n  styles,\n  theme,\n  loading,\n  name,\n  text,\n  layout,\n  activeImage,\n  activeAnchor,\n  colorway,\n  hasTitle,\n  hasBody,\n  hasCta,\n  offset,\n  isMinSm,\n  flowDirection,\n  hBaseline,\n}: InnerProps) => {\n  const {\n    title,\n    body,\n    ctas,\n  } = r.defaultTo({} as text, text);\n  const {\n    constrainImage,\n  } = layout;\n  return (\n    <Ribbon\n      id={id}\n      theme={theme}\n      colorway={colorway}\n      layout={layout}\n      loading={loading}\n      flush={true}\n      name={name}\n      type=\"Centerfold\"\n    >\n      <div style={styles.root}>\n        <If condition={!constrainImage}>\n          <CenterfoldImage\n            theme={theme}\n            image={activeImage}\n            layout={layout}\n          />\n        </If>\n        <div style={styles.heightAnchor}>\n          <Container\n            vblock={true}\n          >\n            <Row\n              vblock={true}\n              direction={flowDirection}\n            >\n              <If condition={constrainImage}>\n                <Column\n                  xs={12}\n                  sm={6}\n                >\n                  <CenterfoldImage\n                    theme={theme}\n                    image={activeImage}\n                    layout={layout}\n                  />\n                </Column>\n              </If>\n              <Column\n                xs={12}\n                sm={6}\n                offsetXs={offset}\n                align={activeAnchor}\n              >\n                <PaddingBox\n                  theme={theme}\n                  style={styles.content}\n                >\n                  <If condition={hasTitle}>\n                    <Heading02\n                      depth={hBaseline}\n                      theme={theme}\n                      style={styles.title}\n                    >\n                      <Shortcode\n                        theme={theme}\n                        code={title}\n                        against={colorway}\n                      />\n                    </Heading02>\n                  </If>\n                  <If condition={hasBody}>\n                    <BodyCopy01\n                      theme={theme}\n                      style={styles.text}\n                    >\n                      <Shortcode\n                        theme={theme}\n                        code={body}\n                        against={colorway}\n                      />\n                    </BodyCopy01>\n                  </If>\n                  <If condition={hasCta}>\n                    <div style={styles.ctas}>\n                      <For\n                        each=\"cta\"\n                        of={ctas}\n                        index=\"i\"\n                      >\n                        <div\n                          style={styles.action}\n                          key={i}\n                        >\n                          <CallToAction\n                            theme={theme}\n                            against={getAgainst(colorway)}\n                            ribbonId={id}\n                            index={i}\n                            block={r.not(isMinSm)}\n                            {...cta}\n                          />\n                        </div>\n                      </For>\n                    </div>\n                  </If>\n                </PaddingBox>\n              </Column>\n            </Row>\n          </Container>\n        </div>\n      </div>\n    </Ribbon>\n  );\n};\n\nexport const enhance = pureEnhance<InnerProps, OuterProps>(\n  'Centerfold', {\n    hocs: [\n      errorBoundary,\n      visibilitySet,\n    ],\n    hooks: [\n      defaultProps({\n        hBaseline: 1,\n      }),\n      withBreakpointsHook,\n      withProps((ownerProps: MiddleProps) => ({\n        activeImage: findResponsiveItem(\n          getBreakpoints(ownerProps),\n          ownerProps.image\n        ),\n        activeAnchor: findResponsiveItem(\n          getBreakpoints(ownerProps),\n          flexAnchors([ Anchor.CENTER, null, null ], ownerProps.layout.anchor),\n          {\n            supportNull: true,\n          },\n        ),\n        hasTitle: r.pathSatisfies(isNotNilOrEmpty, [ 'text', 'title' ], ownerProps),\n        hasBody: r.pathSatisfies(isNotNilOrEmpty, [ 'text', 'body' ], ownerProps),\n        hasCta: r.pathSatisfies(isNotNilOrEmpty, [ 'text', 'ctas' ], ownerProps),\n        offset: r.ifElse(\n          needsOffset,\n          setOffset, // defaults to [6,6] layout proportions\n          capra.nuller,\n        )(ownerProps),\n        flowDirection: r.ifElse(\n          r.propEq('isMinSm', true),\n          setDirection,\n          capra.nuller,\n        )(ownerProps),\n      })),\n      withProps(stylesheet),\n    ],\n  },\n);\n\nexport default enhance(PureCenterfold);\n","\nimport { 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 { percentage, modifier } from '@ux/style-utils';\nimport { Alignment } from 'domain/constants/alignment';\nimport { gu2px } from '@ux/theme-utils';\nimport * as r from 'ramda';\nimport { InnerProps } from './Centerfold';\nimport { ResponsiveSet } from 'core/ribbons/primitives';\nimport { CSSProperties } from 'react';\n\nexport interface Styles {\n  root: CSSProperties,\n  title: CSSProperties,\n  text: CSSProperties,\n  ctas: CSSProperties,\n  heightAnchor: CSSProperties,\n  content: CSSProperties,\n  action: CSSProperties,\n}\n\nexport default ({\n  theme,\n  colorway,\n  layout,\n  isMinSm,\n  isMinMd,\n  isMinLg,\n  isMinXl,\n  hasCta,\n  text,\n}: InnerProps) => {\n  const {\n    spacing,\n    typography,\n  } = theme;\n\n  const {\n    alignment,\n    flipped,\n  } = layout;\n\n  const getActiveFromArray = (array: ResponsiveSet<any>) => findResponsiveItem({\n    isMinSm,\n    isMinMd,\n    isMinLg,\n    isMinXl,\n  }, array);\n\n  const height = r.propOr([ 'auto', 'auto', 'auto' ], 'height', layout) as ResponsiveSet<any>;\n\n  const activeHeight = getActiveFromArray(height);\n  const transitionHeight = (activeHeight === 'auto') ? 200 : activeHeight;\n\n  return useStyles({\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: percentage(100),\n        ...ribbonPadding({\n          isMinSm,\n          isMinLg,\n          layout,\n          spacing,\n        }),\n      },\n      heightAnchor: {\n        minHeight: activeHeight,\n        display: 'flex',\n        height: percentage(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    mutipleCtas: {\n      ctas: {\n        marginTop: gu2px(2, spacing),\n      },\n      action: {\n        marginTop: gu2px(1, spacing),\n        ...r.ifElse(\n          r.equals(true),\n          r.always({\n            marginRight: gu2px(1, spacing),\n          }),\n          r.always({})\n        )(isMinSm),\n      },\n    },\n\n    [modifier('alignment', Alignment.CENTER)]: {\n      content: {\n        textAlign: 'center',\n      },\n      ctas: {\n        justifyContent: 'center',\n      },\n    },\n  }, [\n    { isMinSm },\n    { isMinLg },\n    { alignment },\n    { hasCta },\n    { flippedSm: r.and(flipped, isMinSm) },\n    { flippedLg: r.and(flipped, isMinLg) },\n    {\n      mutipleCtas: r.pipe(\n        r.prop('ctas'),\n        // @ts-ignore\n        r.length,\n        r.gt(r.__, 1),\n        // @ts-ignore\n      )(text),\n    },\n  ]);\n};\n","import Centerfold from './Centerfold';\n\nexport default Centerfold;\n"],"sourceRoot":""}