{"version":3,"file":"4303-e620f5ea3f878d51a6b2.js","mappings":"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","sources":["webpack://gears-of-war-website/./src/components/templates/box.js","webpack://gears-of-war-website/./src/templates/components/heroSimplifiedSwap.js","webpack://gears-of-war-website/./src/templates/components/heroSwap.js"],"sourcesContent":["import React from 'react'\r\nimport pipe from 'lodash/fp/pipe'\r\nimport { makeStyles } from '@material-ui/styles'\r\nimport { domToReact } from 'html-react-parser'\r\nimport Section from 'tcweb-material-components/core/section'\r\nimport keys from 'tcweb-material-components/core/poly/keys'\r\nimport reduce from 'tcweb-material-components/core/poly/reduce'\r\nimport camelCase from 'tcweb-material-components/core/poly/camelCase'\r\nimport get from 'tcweb-material-components/core/poly/get'\r\nimport classnames from 'classnames'\r\n\r\nimport { cleanWPValue } from '../../utilities/wpOptions'\r\n\r\nconst getFlexStyle = (data) => ({\r\n flexDirection: data.direction,\r\n justifyContent: data.justifyContent,\r\n alignItems: data.alignItems\r\n})\r\n\r\nconst getSpacingStyle = (prefix, path, data) => pipe(\r\n keys,\r\n reduce((styles, key) => ({\r\n ...styles,\r\n [camelCase([prefix, key])]: cleanWPValue(get(data, [prefix, path, key]))\r\n }), {})\r\n)(get(data, [prefix, path], {}))\r\n\r\nconst useClasses = makeStyles(theme => ({\r\n boxSwap: ({ data, backgroundColor }) => ({\r\n backgroundColor: !!backgroundColor ? backgroundColor : 'initial',\r\n display: 'flex',\r\n width: cleanWPValue(get(data, 'size.mobile.width')),\r\n height: cleanWPValue(get(data, 'size.mobile.height')),\r\n ...getFlexStyle(get(data, 'flex.mobile', {})),\r\n ...getSpacingStyle('padding', 'mobile', data),\r\n ...getSpacingStyle('margin', 'mobile', data),\r\n [theme.breakpoints.up('sm')]: {\r\n width: cleanWPValue(get(data, 'size.tablet.width')),\r\n height: cleanWPValue(get(data, 'size.tablet.height')),\r\n ...getFlexStyle(get(data, 'flex.tablet', {})),\r\n ...getSpacingStyle('padding', 'tablet', data),\r\n ...getSpacingStyle('margin', 'tablet', data),\r\n },\r\n [theme.breakpoints.up('md')]: {\r\n width: cleanWPValue(get(data, 'size.desktop.width')),\r\n height: cleanWPValue(get(data, 'size.desktop.height')),\r\n ...getFlexStyle(get(data, 'flex.desktop', {})),\r\n ...getSpacingStyle('padding', 'desktop', data),\r\n ...getSpacingStyle('margin', 'desktop', data),\r\n }\r\n })\r\n}))\r\n\r\nconst BoxSwap = ({ attribs, children, options, data, classes = {}, className, itemMargins, ...rest }) => {\r\n const _classes = useClasses({ data, backgroundColor: get(attribs, \"data-background-color\") })\r\n\r\n const hasCustomGradient = attribs?.style ? `${attribs.style.toString().split(':')[1]}`: null\r\n\r\n return (\r\n <Section\r\n {...rest}\r\n itemMargins={{\r\n ...itemMargins,\r\n mobile: get(data, 'space.mobile.between'),\r\n tablet: get(data, 'space.tablet.between'),\r\n desktop: get(data, 'space.desktop.between')\r\n }}\r\n className={classnames(\r\n 'box-swap',\r\n _classes.boxSwap,\r\n classes.root,\r\n className,\r\n `bg-${get(data, 'background.mobile.type')}`,\r\n get(attribs, 'class')\r\n )}\r\n style={{background: hasCustomGradient}}\r\n >\r\n {rest.isSubSection ? children : domToReact(children, options)}\r\n </Section>\r\n )\r\n}\r\n\r\n\r\nexport default BoxSwap\r\n","import React from 'react'\r\nimport map from 'tcweb-material-components/core/poly/map'\r\nimport get from 'tcweb-material-components/core/poly/get'\r\nimport { makeStyles, useTheme } from '@material-ui/core/styles'\r\nimport { fade } from '@material-ui/core/styles/colorManipulator'\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery'\r\nimport HeroSwap from './heroSwap'\r\nimport classnames from 'classnames'\r\n\r\nconst GRADIENT_MULTIPLIER = 8\r\n\r\nconst useClasses = makeStyles( ({ breakpoints, gutters, palette }) => ({\r\n root: ({hasPadding}) => ({\r\n // Stack on mobile\r\n flexDirection: 'column',\r\n [breakpoints.up('md')]: {\r\n flexDirection: 'row'\r\n },\r\n [breakpoints.down('sm')]: { minHeight: 'auto' },\r\n padding: !hasPadding ? '0px' : null\r\n }),\r\n contentContainer: {\r\n position: 'relative',\r\n [breakpoints.up('md')]: {\r\n position: ({ heightType }) => heightType === 'auto' ? 'absolute !important' : 'initial !important'\r\n }\r\n },\r\n mediaContainer: {\r\n position: 'relative',\r\n [breakpoints.up('md')]: {\r\n position: ({ heightType }) => heightType === 'auto' ? 'relative' : 'absolute'\r\n }\r\n },\r\n overlay: {\r\n '& > *': { zIndex: 2 },\r\n '&::before': {\r\n content: '\" \"',\r\n [breakpoints.up('md')]: {\r\n position: 'absolute',\r\n top: `calc(-${gutters.page.md} * ${GRADIENT_MULTIPLIER / 2})`,\r\n left: `calc(-${gutters.page.md} * ${GRADIENT_MULTIPLIER / 2})`,\r\n width: `calc(100% + (${gutters.page.md} * ${GRADIENT_MULTIPLIER}))`,\r\n height: `calc(100% + (${gutters.page.md} * ${GRADIENT_MULTIPLIER}))`,\r\n background: ({overlayColor}) => `radial-gradient(farthest-side at center center, ${fade(overlayColor, 0.8)} 42%, ${fade(overlayColor, 0.6)} 78%, transparent 100%)`,\r\n }\r\n }\r\n },\r\n boxChildren: {\r\n // Force primary text color on mobile (stacked onto default bg)\r\n [breakpoints.down('sm')]: {\r\n color: `${palette.text.primary} !important`\r\n }\r\n },\r\n heroContent: {\r\n [breakpoints.down('sm')]: {\r\n // Overwrite Hero's 'has-text-align-x' class\r\n \"& [class*='has-text-align-left'], & [class*='has-text-align-right']\": { textAlign: 'left' },\r\n \"& [class*='has-text-align-center']\": { textAlign: 'center' }\r\n },\r\n },\r\n isDarkMobile: {\r\n [breakpoints.down('sm')]: {\r\n backgroundColor: `${palette.common.black} !important`\r\n }\r\n },\r\n box: ({backgroundColor}) => (!!backgroundColor ? {\r\n backgroundColor: backgroundColor,\r\n [breakpoints.up('md')]: {\r\n padding: gutters.page.md\r\n }\r\n } : {})\r\n}))\r\n\r\nconst HeroSimplifiedSwap = props => {\r\n const { data, box } = props\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n const isDarkMobile = get(box, 'attribs.class', []).includes('hero-simple-dark-theme-mobile')\r\n const hasPadding = get(data, \"padding.has.['']\")\r\n const _classes = useClasses({\r\n flex: data.flex,\r\n overlayColor: get(data, 'overlay.mobile.color'),\r\n heightType: get(data, 'size.mobile.height'),\r\n backgroundColor: get(box.attribs, \"data-background-color\"),\r\n hasPadding\r\n })\r\n\r\n // Replace text color to text.primary of innerblocks on mobile\r\n const _boxChildren = (isMobile && !isDarkMobile) ?\r\n map((child) => ({\r\n ...child,\r\n attribs: {\r\n ...child.attribs,\r\n class: classnames(_classes.box, get(child, 'attribs.class', ''), _classes.boxChildren)\r\n }})\r\n , box.children) :\r\n box.children\r\n\r\n\r\n // Use Desktop media if no mobile is defined\r\n const mobileMedia = get(data, 'media.mobile')\r\n const desktopMedia = get(data, 'media.desktop')\r\n const media = {\r\n ...data.media,\r\n mobile: !!mobileMedia && !!mobileMedia.url ? mobileMedia : desktopMedia,\r\n desktop: desktopMedia\r\n }\r\n\r\n // Disable overlay on mobile\r\n const enableOverlay = isMobile ? false : get(data, 'overlay.mobile.visible')\r\n\r\n return (\r\n <HeroSwap\r\n {...props}\r\n classes={{\r\n root: _classes.root,\r\n overlay: classnames({[_classes.overlay]: enableOverlay}),\r\n contentContainer: _classes.contentContainer,\r\n heroContent: classnames(_classes.heroContent, {[_classes.isDarkMobile]: isDarkMobile}),\r\n mediaContainer: _classes.mediaContainer\r\n }}\r\n box={{\r\n ...box,\r\n children: _boxChildren,\r\n attribs: { class: !!isDarkMobile ? get(box, 'attribs.class', '').replace('hero-simple-dark-theme-mobile', '') : get(box, 'attribs.class', '')},\r\n classes: {\r\n root: classnames(_classes.box)\r\n }\r\n }}\r\n data={{\r\n ...data,\r\n media: media,\r\n overlay: { mobile: { visible: enableOverlay }}\r\n }}\r\n stackOnMobile={true}\r\n />\r\n )\r\n}\r\n\r\nexport default HeroSimplifiedSwap\r\n","import React from 'react'\r\nimport { useTranslation } from 'react-i18next'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport Hero from 'tcweb-material-components/core/hero'\r\nimport HeroMedia from 'tcweb-material-components/core/heroMedia'\r\nimport HeroContent from 'tcweb-material-components/core/heroContent'\r\nimport get from 'tcweb-material-components/core/poly/get'\r\nimport { domToReact } from 'html-react-parser'\r\nimport useZoomPercentage from 'tcweb-material-components/core/hooks/useZoomPercentage'\r\n\r\nimport Box from '../../components/templates/box'\r\nimport options from './index'\r\nimport classnames from 'classnames'\r\n\r\nconst WP_ALIGNMENT_CLASS_PREFIX = 'has-text-align'\r\n\r\nconst useClasses = makeStyles(({ breakpoints, gutters, hasPadding }) => ({\r\n contentRoot: ({ flex, hasInnerAlignment, hasPadding }) => ({\r\n ...get(flex, 'mobile', {}),\r\n [breakpoints.down('sm')]: {\r\n // Keep vertical centering, and Change horizontal centering\r\n justifyContent: 'center'\r\n },\r\n [breakpoints.only('sm')]: {\r\n ...get(flex, 'tablet', {}),\r\n },\r\n [breakpoints.up('md')]: {\r\n ...get(flex, 'desktop', {}),\r\n },\r\n // Allow inner content to algin itself\r\n ...() => {\r\n if(hasInnerAlignment) {\r\n return { justifyContent: 'unset' }\r\n }\r\n },\r\n padding: !hasPadding ? '0px' : null\r\n // padding: 0\r\n }),\r\n contentContainer:{\r\n '& .wp-block-image img' : { height: 'auto' }\r\n },\r\n contentMinWidth: {\r\n [breakpoints.down('sm')]: { width: 'auto' },\r\n [breakpoints.up('md')]: { minWidth: '500px' }\r\n },\r\n box: ({backgroundColor}) => (!!backgroundColor ? {\r\n backgroundColor: backgroundColor,\r\n [breakpoints.up('md')]: {\r\n padding: gutters.page.md\r\n }\r\n } : {})\r\n}))\r\n\r\n\r\n\r\nconst HeroSwap = ({ data, box, boxData, className, stackOnMobile=false, classes, heroProps={}, mediaProps={}, contentProps={} })=> {\r\n const hasInnerAlignment = get(box, 'children', []).some(child => get(child, 'attribs.class', '').includes(WP_ALIGNMENT_CLASS_PREFIX))\r\n const hasPadding = get(data, \"padding.has.['']\")\r\n const _classes = useClasses({ flex: data.flex, hasInnerAlignment, backgroundColor: get(boxData, 'color.background[\"\"]'), hasPadding })\r\n const { t } = useTranslation()\r\n const useContentHeight = ['full', 'extended'].includes(get(data, 'size.mobile.height'))\r\n const zoomPercentage = useZoomPercentage()\r\n\r\n return (\r\n <Hero\r\n classes={classes}\r\n useContentHeight={zoomPercentage > 150 ? true : useContentHeight}\r\n heightType={get(data, 'size.mobile.height')}\r\n enableCaret={get(data, 'caret.mobile.visible')}\r\n stackOnMobile={stackOnMobile}\r\n {...heroProps}\r\n >\r\n <HeroMedia\r\n mobileMedia={get(data, 'media.mobile')}\r\n desktopMedia={get(data, 'media.desktop')}\r\n mediaControlLabels={{\r\n play: t('Play'),\r\n pause: t('Pause')\r\n }}\r\n {...mediaProps}\r\n />\r\n <HeroContent\r\n BoxProps={{\r\n component: Box,\r\n isSubSection: true,\r\n data: boxData,\r\n attribs: get(box, 'attribs'),\r\n classes: {\r\n root: classnames(_classes.box, {\r\n [_classes.contentMinWidth]: !!className && (className.includes('alignfull') || className.includes('alignwide'))\r\n })\r\n }\r\n }}\r\n classes={{ root: classnames(_classes.contentRoot, get(classes, 'heroContent')), container: classnames(_classes.contentContainer, get(classes, 'overlay')) }}\r\n enableOverlay={get(data, 'overlay.mobile.visible')}\r\n overlayColor={get(data, 'overlay.mobile.color')}\r\n {...contentProps}\r\n >\r\n {domToReact(get(box, 'children', ''), options)}\r\n </HeroContent>\r\n </Hero>\r\n )\r\n}\r\n\r\nexport default HeroSwap\r\n"],"names":["getFlexStyle","data","flexDirection","direction","justifyContent","alignItems","getSpacingStyle","prefix","path","pipe","keys","reduce","styles","key","_objectSpread","camelCase","cleanWPValue","get","useClasses","makeStyles","theme","boxSwap","backgroundColor","display","width","height","breakpoints","up","_ref","attribs","children","options","classes","className","itemMargins","rest","_objectWithoutProperties","_excluded","_classes","hasCustomGradient","style","toString","split","React","Section","_extends","mobile","tablet","desktop","classnames","root","background","isSubSection","domToReact","gutters","palette","hasPadding","down","minHeight","padding","contentContainer","position","heightType","mediaContainer","overlay","zIndex","content","top","page","md","left","overlayColor","fade","boxChildren","color","text","primary","heroContent","textAlign","isDarkMobile","common","black","box","props","useTheme","isMobile","useMediaQuery","includes","flex","_boxChildren","map","child","class","mobileMedia","desktopMedia","media","url","enableOverlay","HeroSwap","replace","visible","stackOnMobile","contentRoot","hasInnerAlignment","only","contentMinWidth","minWidth","boxData","heroProps","mediaProps","contentProps","some","t","useTranslation","useContentHeight","zoomPercentage","useZoomPercentage","Hero","enableCaret","HeroMedia","mediaControlLabels","play","pause","HeroContent","BoxProps","component","Box","container"],"sourceRoot":""}