{"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","withBreakpointsHook","isMinSm","layout","theme","aspect","r","HEIGHT","imageOffset","percentage","flipped","constrainImage","spacing","useStyles","fullBackground","imageWrapper","position","width","maxWidth","minSmFullBackground","root","paddingTop","top","right","bottom","left","height","objectFit","objectPosition","focus","flippedFullBackground","constrained","constrainedXs","gu2px","styles","currentLanguage","style","loading","src","urlLanguageParse","setDirection","Direction","ROW","ROW_REVERSE","capra","needsOffset","setOffset","errorBoundary","visibilitySet","defaultProps","hBaseline","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","default","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/20.528cc5869aeeaf72309c.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 { BreakpointProps, withBreakpointsHook } from '@ux/responsive';\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 InnerProps extends OuterProps, BreakpointProps {\n  styles: Styles,\n  currentLanguage: string,\n  alt: string,\n}\nexport const PureImage = ({\n  styles,\n  image,\n  alt,\n  currentLanguage,\n}: InnerProps) => (\n  <div style={styles.root}>\n    <img\n      loading=\"lazy\"\n      src={urlLanguageParse(image.url, currentLanguage)}\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: OuterProps) => ({\n        alt: createImageAlt({ imageUrl: ownerProps.image.url }),\n      })),\n      withBreakpointsHook,\n      withProps(stylesheet),\n    ],\n  }\n\n);\n\nexport default enhance(PureImage);\n","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 * as r from 'ramda';\n\nexport interface Styles {\n  image: CSSProperties,\n  root: CSSProperties,\n}\nexport default ({\n  isMinSm,\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 = r.ifElse(\n    r.propEq('preserveDimension', Dimension.HEIGHT),\n    r.always('contain'),\n    r.always('cover'),\n  )(image);\n\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\n  const {\n    spacing,\n  } = theme;\n\n  return useStyles({\n    fullBackground: {\n      imageWrapper: {\n        position: 'relative',\n      },\n      image: {\n        width: percentage(100),\n        maxWidth: percentage(100),\n      },\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        width: percentage(100),\n        height: percentage(100),\n        objectFit: aspect,\n        objectPosition: image.focus,\n      },\n    },\n\n    constrainedXs: {\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":""}