{"version":3,"sources":["webpack:///./presentation/components/ribbons/tiers/Tiers.tsx","webpack:///./presentation/components/ribbons/tiers/ConnectedTiers.ts","webpack:///./presentation/components/ribbons/tiers/index.ts","webpack:///./presentation/utils/ribbonPadding.ts","webpack:///./presentation/hocs/errorBoundary.tsx","webpack:///./presentation/hocs/withRibbonImpression.ts","webpack:///./presentation/utils/ribbonWidth.ts","webpack:///./presentation/hocs/deepLink.tsx","webpack:///./presentation/components/ribbons/Ribbon/Ribbon.tsx","webpack:///./presentation/components/ribbons/Ribbon/ConnectedRibbon.ts","webpack:///./presentation/components/ribbons/Ribbon/index.ts","webpack:///./presentation/hocs/visibilitySet.tsx"],"names":["DesktopTiers","lazy","MobileTiers","enhance","pureEnhance","hocs","errorBoundary","visibilitySet","hooks","defaultProps","links","withBreakpointsHook","theme","loading","colorway","layout","isMinSm","name","props","Ribbon","id","flush","type","fallback","withRouter","withProps","connect","state","location","window","currentUrl","origin","pathname","selected","r","hash","isVisibilitySetActive","getSelected","externalRoutes","getExternalRoutes","Tiers","spacing","isMinLg","shrinkLeading","shrinkTrailing","getPaddingSize","shrinkSide","isFlush","leading","Flush","LEADING","trailing","TRAILING","paddingTop","gu2px","paddingBottom","stylesheet","isMinMd","useStyles","default","root","backgroundColor","getBackgroundColor","color","getTitleColor","ribbonPadding","cssSides","Side","X","textAlign","WrappedComponent","ErrorBoundary","styles","style","compose","withState","lifecycle","componentDidCatch","this","setHasErrored","hooksA","pipe","mapProps","selector","useMemo","getRibbonAnalytics","analytics","useSelector","dispatch","useDispatch","actions","bindActionCreators","sendImpression","withHandlers","onImpression","ribbonName","ribbonType","hooksB","isFullyInViewport","stopWatcher","useEffect","mapPropsHoc","branch","Watch","deepLink","componentDidMount","scrollWhenReady","animationComplete","setTimeout","scroller","scrollTo","duration","delay","smooth","mapFit","fit","Fit","FULLSCREEN","minHeight","FILL","flex","flexBasis","AUTO","height","isFinite","targetRef","useRef","palette","duoLayout","activeFit","findResponsiveItem","getBreakpoints","padding","duoLayoutFlex","flexSize","percentage","duoRibbonWidth","position","display","flexDirection","width","inner","ribbon","modifier","Colorway","PRIMARY_GRADIENT","backgroundImage","primary","primaryGradient","children","ref","withRibbonImpression","BaseComponent"],"mappings":"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","file":"pex-static/12/56.60075573482c8111bc0d.chunk.js","sourcesContent":["import React, { lazy, Suspense } from 'react';\nimport {\n  defaultProps,\n} from '@team-griffin/rehook';\n// import { fastCompare } from '@ux/perf';\nimport Ribbon from 'components/ribbons/Ribbon';\nimport { withBreakpointsHook, BreakpointProps } from '@ux/responsive';\nimport errorBoundary from 'presentation/hocs/errorBoundary';\nimport visibilitySet from 'presentation/hocs/visibilitySet';\nimport pureEnhance from '@ux/pure-enhance';\nimport { RibbonProps } from 'domain/constants/ribbons';\n\nconst DesktopTiers = lazy(() => import('./Desktop'));\nconst MobileTiers = lazy(() => import('./Mobile'));\n\nexport type Link = {\n  href?: string,\n  first?: boolean,\n  behavior: {\n    goto: string,\n  },\n};\n\nexport interface OuterProps extends RibbonProps {\n  selected: number,\n  externalRoutes: string[],\n  links?: Link[],\n}\ninterface DefaultProps extends OuterProps {\n  links: Link[],\n}\ninterface InnerProps extends DefaultProps, BreakpointProps {}\n\nexport const PureTiers = ({\n  theme,\n  loading,\n  colorway,\n  layout,\n  isMinSm,\n  name,\n  ...props\n}: InnerProps) => (\n  <Ribbon\n    id={props.id}\n    theme={theme}\n    layout={layout}\n    colorway={colorway}\n    flush={true}\n    loading={loading}\n    name={name}\n    type=\"Tiers\"\n  >\n    <Choose>\n      <When condition={isMinSm}>\n        <Suspense fallback={<div/>}>\n          <DesktopTiers\n            theme={theme}\n            colorway={colorway}\n            layout={layout}\n            {...props}\n          />\n        </Suspense>\n      </When>\n      <Otherwise>\n        <Suspense fallback={<div/>}>\n          <MobileTiers\n            theme={theme}\n            colorway={colorway}\n            {...props}\n          />\n        </Suspense>\n      </Otherwise>\n    </Choose>\n  </Ribbon>\n);\n\nexport const enhance = pureEnhance<InnerProps, OuterProps>(\n  'Tiers', {\n    hocs: [\n      errorBoundary,\n      visibilitySet,\n    ],\n    hooks: [\n      defaultProps({\n        links: [],\n      }),\n      withBreakpointsHook,\n    ],\n  },\n);\n\nexport default enhance(PureTiers);\n","import { connect } from '@ux/fabric';\nimport { withRouter } from 'react-router';\nimport * as r from 'ramda';\nimport {\n  isVisibilitySetActive,\n} from 'domain/selectors/ribbons';\nimport { getExternalRoutes } from 'domain/selectors/common';\nimport Tiers, { OuterProps as PureProps } from './Tiers';\nimport pureEnhance from '@ux/pure-enhance';\nimport { withProps } from '@team-griffin/rehook';\n\ninterface ConnectedProps {\n  selected: number,\n}\ninterface InnerProps extends PureProps {}\ninterface OuterProps extends Omit<InnerProps, keyof ConnectedProps> {}\n\nconst enhance = pureEnhance<InnerProps, OuterProps>(\n  'ConnectedTiers', {\n    hocs: [\n      withRouter,\n    ],\n    hooks: [\n      withProps((props: OuterProps) => {\n        const mapState = (state: any) => {\n          const { links } = props;\n          const location = window.location;\n          const currentUrl = location.origin + location.pathname;\n          const getSelected = r.pipe(\n            r.defaultTo([]),\n            r.findIndex(\n              r.either(\n                r.anyPass([\n                  r.pathEq([ 'behavior', 'goto' ], location.pathname),\n                  r.pathEq([ 'behavior', 'goto' ], location.hash),\n                  r.pathEq([ 'behavior', 'goto' ], currentUrl),\n                ]),\n                r.allPass([\n                  r.propSatisfies(r.has('visibilitySet'), 'behavior'),\n                  r.pipe(\n                    r.pathOr([], [ 'behavior', 'visibilitySet' ]),\n                    isVisibilitySetActive,\n                    //@ts-ignore\n                    r.apply(r.__, [ state ]),\n                  ),\n                ]),\n              ),\n            ),\n          );\n\n          const selected = getSelected(links);\n          const externalRoutes = getExternalRoutes(state);\n\n          return {\n            selected,\n            externalRoutes,\n          };\n        };\n        return connect(mapState)();\n      }),\n    ],\n  },\n);\n\nexport default enhance(Tiers);\n","import Tiers from './ConnectedTiers';\n\nexport default Tiers;\n","import { Flush } from 'domain/constants/ribbons';\nimport { gu2px } from '@ux/theme-utils';\nimport * as r from 'ramda';\nimport { Layout } from 'domain/constants/layout';\n\nexport default ({\n  spacing,\n  isMinSm,\n  isMinLg,\n  layout,\n  flush,\n}: {\n  spacing: number,\n  isMinSm: boolean,\n  isMinLg: boolean,\n  layout?: Layout,\n  flush?: Flush|boolean,\n}) => {\n\n  if (r.equals(flush, true)) {\n    // Component will handle all padding, used on full bleed image ribbons\n    return {};\n  }\n\n  const {\n    //@ts-ignore\n    shrinkLeading,\n    //@ts-ignore\n    shrinkTrailing,\n  } = r.defaultTo({}, layout);\n\n  /*\n    shrinkSide:\n      shrink[Leading/Trailing] prop is true then return a reduced padding\n      depending on screen size\n    isFlush:\n      leading or trailing edge has been designated as flush, no padding\n  */\n  const getPaddingSize = (shrinkSide: string, isFlush: boolean) => {\n\n    if (isFlush) {\n      return 0;\n    }\n\n    return r.cond([\n      [ r.propEq(shrinkSide, true), () => r.ifElse(\n        r.equals(true),\n        r.always(1),\n        r.always(0.5),\n      )(isMinSm) ],\n      [ r.propEq('isMinLg', true), r.always(6) ],\n      [ r.propEq('isMinSm', true), r.always(5) ],\n      [ r.T, r.always(4) ],\n    ])({\n      isMinLg,\n      isMinSm,\n      shrinkLeading,\n      shrinkTrailing,\n    });\n  };\n\n  const leading = getPaddingSize('shrinkLeading', flush === Flush.LEADING);\n  const trailing = getPaddingSize('shrinkTrailing', flush === Flush.TRAILING);\n\n  return {\n    paddingTop: gu2px(leading, spacing),\n    paddingBottom: gu2px(trailing, spacing),\n  };\n};\n","import React, { CSSProperties } from 'react';\nimport {\n  compose,\n  lifecycle,\n  withState,\n  withProps,\n} from 'recompose';\nimport Message from '@ux/message';\nimport { Container } from '@ux/grid';\nimport * as r from 'ramda';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport {\n  getBackgroundColor,\n  getTitleColor,\n} from 'presentation/utils/colorway';\nimport { gu2px, Theme } from '@ux/theme-utils';\nimport ribbonPadding from 'presentation/utils/ribbonPadding';\nimport { useStyles } from '@team-griffin/stylr';\nimport { Colorway } from 'domain/constants/colorway';\nimport { Layout } from 'domain/constants/layout';\nimport { Flush } from 'domain/constants/ribbons';\nimport { BreakpointProps } from '@ux/responsive';\ninterface OuterProps extends BreakpointProps {\n  theme: Theme,\n  colorway: Colorway,\n  layout: Layout,\n  flush?: Flush|boolean,\n}\n\ninterface InnerProps extends OuterProps {\n  styles: {\n    root: CSSProperties,\n  }\n  hasErrored: boolean,\n}\nconst stylesheet = ({\n  theme,\n  colorway,\n  isMinSm,\n  isMinMd,\n  isMinLg,\n  layout,\n  flush,\n}: InnerProps) => {\n  const {\n    spacing,\n  } = theme;\n\n  return useStyles({\n    default: {\n      root: {\n        backgroundColor: getBackgroundColor(theme, colorway),\n        color: getTitleColor(theme, colorway),\n        ...ribbonPadding({\n          spacing,\n          isMinSm,\n          isMinLg,\n          layout,\n          flush,\n        }),\n        ...cssSides('Side', Side.X, gu2px(3, spacing)),\n        textAlign: 'center',\n      },\n    },\n    isMinSm: {\n      root: {\n        ...cssSides('Side', Side.X, gu2px(4, spacing)),\n      },\n    },\n  }, [\n    { colorway },\n    { isMinSm },\n    { isMinMd },\n  ]);\n};\n\nexport default (WrappedComponent: any) => {\n  const ErrorBoundary = r.ifElse(\n    r.propEq('hasErrored', true),\n    ({ styles }) => (\n      <div style={styles.root}>\n        <Container>\n          <Message id=\"usf.ribbons.error.text\"/>\n        </Container>\n      </div>\n    ),\n    (props: InnerProps) => (\n      <WrappedComponent {...props}/>\n    ),\n  );\n\n  return compose(\n    withState('hasErrored', 'setHasErrored', false),\n    lifecycle({\n      componentDidCatch: function() {\n        //@ts-ignore\n        this.props.setHasErrored(true);\n      },\n    }),\n    withProps(stylesheet),\n  )(ErrorBoundary);\n};\n","import { useMemo, useEffect } from 'react';\nimport { branch, mapProps as mapPropsHoc } from 'recompose';\nimport pureEnhance from '@ux/pure-enhance';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { pipe, withProps, mapProps, withHandlers } from '@team-griffin/rehook';\nimport { Watch } from 'scrollmonitor-react';\nimport * as r from 'ramda';\nimport { sendImpression } from 'application/signals/ribbons';\nimport { getRibbonAnalytics } from 'domain/selectors/ribbons';\nimport { Type } from 'domain/constants/ribbons';\n\nconst hooksA = pipe(\n  mapProps((props: any) => {\n    const { id } = props;\n    const selector = useMemo(() => getRibbonAnalytics(id), [ id ]);\n    const analytics = useSelector(selector);\n    const dispatch = useDispatch();\n    const actions = bindActionCreators({ sendImpression }, dispatch);\n\n    return r.mergeDeepLeft(props, {\n      analytics,\n      actions,\n    });\n  }),\n  withHandlers({\n    onImpression: ({\n      name,\n      type,\n      analytics,\n      actions: {\n        sendImpression,\n      },\n    }: {\n      name: string,\n      type: Type,\n      analytics: any,\n      actions: {\n        sendImpression: Function,\n      }\n    }) => () => sendImpression({\n      ...analytics,\n      ribbonName: name,\n      ribbonType: type,\n    }),\n  }),\n);\n\nconst hooksB = pipe(\n  withProps(({\n    isFullyInViewport,\n    stopWatcher,\n    onImpression,\n    analytics,\n  }: {\n    isFullyInViewport: boolean,\n    stopWatcher: () => void,\n    onImpression: (a: any) => void,\n    analytics: any,\n  }) => {\n    useEffect(() => {\n      if (isFullyInViewport) {\n        stopWatcher();\n        onImpression(analytics);\n      }\n    }, [ isFullyInViewport ]);\n  }),\n);\n\nexport default pureEnhance('RibbonImpression', {\n  hocs: [\n    mapPropsHoc(hooksA),\n    branch(\n      r.propSatisfies(r.complement(r.isNil), 'analytics'),\n      Watch,\n    ),\n    mapPropsHoc(hooksB),\n  ],\n});\n","import { percentage } from '@ux/style-utils';\n\nexport const duoRibbonWidth = ({\n  isMinMd,\n  duoLayout,\n}: {\n  isMinMd: boolean,\n  duoLayout?: boolean,\n}) => {\n  if (!isMinMd || duoLayout == null) {\n    return {};\n  }\n\n  const flexSize = (isMinMd && duoLayout) ? 50 : 100;\n  return {\n    flex: percentage(flexSize),\n  };\n};\n\nexport default null;","import React, { Fragment } from 'react';\nimport {\n  compose,\n  lifecycle,\n} from 'recompose';\nimport { withRouter } from 'react-router';\nimport { Element, scroller } from 'react-scroll';\n\nconst deepLink = compose(\n  withRouter,\n  lifecycle({\n    componentDidMount: function() {\n      //Adding some ts-ignores here so it doesn't throw not recognizing\n      //this.props\n\n      //@ts-ignore\n      if (this.props.location.hash === `#${this.props.name}`) {\n        const scrollWhenReady = () => {\n          // we can't scroll to eagerly or we'll end up in the wrong place\n          //@ts-ignore\n          if (this.props.loading || !this.props.animationComplete) {\n            return setTimeout(scrollWhenReady, 100);\n          }\n          //@ts-ignore\n          scroller.scrollTo(this.props.name, {\n            duration: 500,\n            delay: 100,\n            smooth: true,\n          });\n        };\n        setTimeout(scrollWhenReady, 100);\n      }\n    },\n  }),\n  (WrappedComponent: any) => {\n    return (props: any) => (\n      <Fragment>\n        <Element name={props.name}/>\n        <WrappedComponent {...props}/>\n      </Fragment>\n    );\n  },\n);\n\nexport default deepLink;\n","import React, { useRef, useLayoutEffect, CSSProperties, ReactNode, Ref } from 'react';\nimport { withProps } from '@team-griffin/rehook';\nimport pureEnhance from '@ux/pure-enhance';\nimport { withBreakpointsHook, BreakpointProps } from '@ux/responsive';\nimport findResponsiveItem from 'presentation/utils/findResponsiveItem';\nimport getBreakpoints from 'presentation/utils/getBreakpoints';\nimport ribbonPadding from 'presentation/utils/ribbonPadding';\nimport { duoRibbonWidth } from 'presentation/utils/ribbonWidth';\nimport { percentage, modifier } from '@ux/style-utils';\nimport deepLink from 'presentation/hocs/deepLink';\nimport { getBackgroundColor } from 'presentation/utils/colorway';\nimport { useStyles } from '@team-griffin/stylr';\nimport { Colorway } from 'domain/constants/colorway';\nimport { Fit, Flush, RibbonProps } from 'domain/constants/ribbons';\nimport * as r from 'ramda';\n\nexport {\n  Flush,\n};\n\ninterface OuterProps extends RibbonProps {\n  children?: ReactNode,\n}\ninterface WithHandlerProps extends OuterProps {\n  setAnimationComplete: Function,\n  setRibbonHeight: Function,\n  setHeight: Function,\n  onAnimationEnd: (props: {\n    newHeight: number;\n  }) => void,\n}\n\ninterface InnerProps extends WithHandlerProps, BreakpointProps {\n  rendered: boolean,\n  targetRef: Ref<any>,\n  duration: number,\n  styles: {\n    root: CSSProperties,\n    inner: CSSProperties,\n    ribbon: CSSProperties,\n  }\n}\n\nconst mapFit = (fit: Fit) => r.cond([\n  [ r.equals(Fit.FULLSCREEN), r.always({\n    minHeight: '100vh',\n  }) ],\n  [ r.equals(Fit.FILL), r.always({\n    flex: 1,\n    flexBasis: 'auto',\n  }) ],\n  [ r.equals(Fit.AUTO), r.always({\n    height: 'auto',\n  }) ],\n  [ isFinite, r.always({\n    minHeight: fit,\n  }) ],\n  [ r.T, r.always({\n    height: 'auto',\n  }) ],\n])(fit);\n\nconst stylesheet = ({\n  theme,\n  colorway,\n  loading,\n  layout,\n  flush,\n  ...props\n}: InnerProps) => {\n  const {\n    palette,\n    spacing,\n  } = theme;\n  const {\n  //@ts-ignore\n    fit,\n  } = r.defaultTo({}, layout);\n\n  const {\n    isMinSm,\n    isMinMd,\n    isMinLg,\n    duoLayout,\n  } = props;\n\n  const activeFit = findResponsiveItem(\n    getBreakpoints(props),\n    fit,\n  );\n\n  const padding = ribbonPadding({\n    spacing,\n    isMinSm,\n    isMinLg,\n    layout,\n    flush,\n  });\n\n  const duoLayoutFlex = duoRibbonWidth({\n    isMinMd,\n    duoLayout,\n  });\n\n  return useStyles({\n    default: {\n      root: {\n        backgroundColor: getBackgroundColor(theme, colorway),\n        position: 'relative',\n        display: 'flex',\n        flexDirection: 'column',\n        width: percentage(100),\n        ...mapFit(activeFit),\n        ...padding,\n        ...duoLayoutFlex,\n      },\n      inner: {\n        flex: 1,\n        flexBasis: 'auto',\n        display: 'flex',\n        height: 'auto',\n      },\n      ribbon: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: percentage(100),\n      },\n    },\n\n    [modifier('colorway', Colorway.PRIMARY_GRADIENT)]: {\n      root: {\n        backgroundImage: `linear-gradient(to right, ${palette.primary}, ${palette.primaryGradient})`,\n      },\n    },\n  }, [\n    { loading },\n    { colorway },\n    { isMinSm },\n    { isMinMd },\n    { isMinLg },\n  ]);\n};\n\nexport const PureRibbon = ({\n  styles,\n  targetRef,\n  children,\n}: InnerProps) => (\n  <section style={styles.root}>\n    <div style={styles.inner}>\n      <div\n        style={styles.ribbon}\n        ref={targetRef}\n      >\n        {children}\n      </div>\n    </div>\n  </section>\n);\n\nexport const enhance = pureEnhance('Ribbon', {\n  hocs: [\n    deepLink,\n  ],\n  hooks: [\n    withProps(() => {\n      const targetRef = useRef({});\n\n      if (process.env.NODE_ENV !== 'production') {\n        useLayoutEffect(() => {\n        // when backstop runs on ribbons, this lets us filter out a lot of false\n        // positives and a lot of race condition fails by only initialising\n        // the snapshot once loading has finished + a delay to wait for fonts etc to load\n        // eslint-disable-next-line\n          setTimeout(() => {\n            // eslint-disable-next-line\n            console.log('BACKSTOP_RIBBON_READY');\n          }, 3000);\n        }, [ targetRef.current ]);\n      }\n\n      return {\n        targetRef,\n      };\n    }),\n    withBreakpointsHook,\n    withProps(stylesheet),\n  ],\n});\n\nexport default enhance(PureRibbon);\n","import pureEnhance from '@ux/pure-enhance';\nimport withRibbonImpression from 'presentation/hocs/withRibbonImpression';\n\nimport Ribbon from './Ribbon';\n\nconst enhance = pureEnhance('ConnectedRibbon', {\n  hocs: [ withRibbonImpression ],\n});\n\nexport default enhance(Ribbon);\n","import Ribbon from './ConnectedRibbon';\nimport { Flush } from './Ribbon';\n\nexport { Flush };\n\nexport default Ribbon;\n","import React from 'react';\nimport * as r from 'ramda';\n\nexport default (BaseComponent: any) => r.ifElse(\n  r.prop('visible'),\n  (props) => <BaseComponent {...props}/>,\n  (props) => (\n    <div style={{ display: 'none' }}>\n      <BaseComponent {...props}/>\n    </div>\n  ),\n);\n"],"sourceRoot":""}