{"version":3,"sources":["webpack://switch-website/./src/components/common/Clickables.js"],"names":["GrowableArrowWrapper","StyledEmbeddedElement","Overlay","StyledVideoOverlay","colors","X","breakpoints","Clickable","BaseButtonStyles","css","fonts","fontWeights","PrimaryButtonStyles","SecondaryButtonStyles","StyledArrowCircleButton","ctaWrapperCss","CTA","to","target","state","colored","invertedDirection","children","useState","isHovering","setIsHovering","LinkElement","CTALink","CTALinkDark","classNames","classInvertedDirection","arrow","CTAArrow","onClick","onMouseEnter","onMouseLeave","className","defaultProps","undefined","svgCss","PrimaryButton","SecondaryButton","LinkAsPrimaryButton","Link","LinkAsSecondaryButton","ContactSalesButton","navigate","useI18next","Trans","EmbeddedVideo","iframeSource","title","src","frameBorder","allow","allowFullScreen","EmbeddedPodcast","scrolling","WatchVideoOverlay","videoUrl","opened","setOpened","hidden","setHidden","setIframeSource","overlayClasses","push","join","setTimeout","WatchVideoButton","gaLabel","sendGoogleAnalyticsEvent","StyledEndOfPageCTA","ContentContainer","EndOfPageCTA","link","linkText","cssStyles","ArrowCircleButton","disabled","t","useTranslation","label","classes","type"],"mappings":"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","file":"041cc39a-a3a424aed3dc3f34453a.js","sourcesContent":["/** @jsx jsx */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, {useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {css, jsx} from '@emotion/react';\nimport {Trans, useI18next, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport ArrowSVG from '../../images/clickables/cta_arrow.svg';\nimport GrowableArrowSVG from '../../images/clickables/cta_arrow_growable.svg';\nimport {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport {CTALink, CTALinkDark, Link} from './Typography';\nimport X from '../../images/clickables/x.png';\nimport sendGoogleAnalyticsEvent from '../../helpers/utils/google-analytics';\n\n\n/*\n * Constants\n */\nconst overlayAnimationTime = 400; // milliseconds\n\n\n/*\n * Private Elements\n */\n\n// CTA Arrow\nconst GrowableArrowWrapper = styled.span`\n cursor: pointer;\n \n // NOTE: the \"arrow head\" is designed to work on 20px base width\n svg {\n width: 20px;\n height: 20px;\n transition: width 0.3s ease-in-out;\n }\n\n &:hover,\n &.hover {\n svg {\n width: 44px;\n }\n }\n`;\n\n\n// Embedded Element\nconst StyledEmbeddedElement = styled.div`\n &.embedded-video {\n position: relative;\n padding-bottom: 56.25%;\n /* 16:9 */\n height: 0;\n\n iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n }\n\n &.embedded-podcast {\n iframe {\n width: 100%;\n height: 100%;\n }\n }\n`;\n\n\n// Video Overlay\nconst Overlay = styled.div`\n opacity: 0;\n transition: opacity ${overlayAnimationTime}ms ease-in;\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background: rgba(0, 0, 0, .7);\n z-index: 100;\n\n &.active {\n opacity: 1;\n }\n\n &.hidden {\n visibility: hidden;\n z-index: -999999;\n }\n`;\n\nconst StyledVideoOverlay = styled(Overlay)`\n .video-overlay-wrapper {\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 982px;\n padding: 0 20px;\n\n .close {\n background: ${colors.transparent} url(${X}) no-repeat scroll center center;\n position: absolute;\n top: -50px;\n right: 0;\n cursor: pointer;\n z-index: 9999;\n height: 40px;\n width: 40px;\n background-size: 24px;\n }\n }\n\n @media (max-width: ${breakpoints.md}) and (orientation: landscape) {\n .video-overlay-wrapper {\n .video-wrapper {\n .close {\n display: none;\n }\n }\n }\n }\n`;\n\n\n// Clickable element\nconst Clickable = styled.button`\n height: 100%;\n width: 100%;\n padding: 0;\n margin: 0;\n border: 0;\n outline: 0;\n background-color: ${colors.transparent};\n align-items: center;\n display: flex;\n\n &:focus,\n &:active {\n border: 0;\n outline: 0;\n }\n`;\n\n// Base Button\nconst BaseButtonStyles = css`\n height: fit-content;\n min-height: 48px;\n border-radius: 48px;\n padding: 15px 24px;\n border: 0;\n\n font-size: 14px;\n line-height: 18px;\n font-family: ${fonts.sansSerif};\n font-weight: ${fontWeights.semiBold};\n letter-spacing: 0.5px;\n text-align: center;\n display: inline-block;\n\n &:focus {\n outline: 0;\n }\n`;\n\n// Primary Button Styles\nconst PrimaryButtonStyles = css`\n position: relative;\n color: ${colors.white};\n background-color: ${colors.darkPurple};\n z-index: 1;\n\n &::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n min-height: 48px;\n border-radius: 48px;\n padding: 15px 24px;\n background-image: linear-gradient(to right, #8286ED, ${colors.darkPurple});\n opacity: 0;\n transition: opacity 0.3s linear;\n z-index: -1;\n }\n\n &:hover,\n &:focus {\n color: ${colors.white};\n text-decoration: none;\n\n &::before {\n opacity: 1;\n }\n }\n`;\n\n// Secondary Button Styles\nconst SecondaryButtonStyles = css`\n position: relative;\n color: ${colors.white};\n background-color: ${colors.transparent};\n border: 1px solid ${colors.white};\n transition: all 0.2s linear;\n\n &:hover,\n &:focus {\n color: ${colors.darkPurple};\n background-color: ${colors.white};\n border: 1px solid ${colors.darkPurple};\n text-decoration: none;\n\n &::before {\n // Cancel the animation of the primary button\n opacity: 0;\n }\n }\n`;\n\n// Arrow Circle Button\nconst StyledArrowCircleButton = styled.button`\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: ${colors.white};\n box-shadow: 0 2px 7px 0 rgb(0, 0, 0, 0.3);\n display: flex;\n align-content: center;\n border: 0;\n padding: 0;\n transition: background-color 0.2s linear;\n\n &:active {\n outline: 0;\n }\n\n &:hover {\n &:not(.arrow-disabled) {\n background-color: ${colors.darkPurple};\n\n svg {\n path {\n stroke: ${colors.white};\n }\n }\n }\n }\n\n &.arrow-prev {\n svg {\n transform: scale(-1, 1);\n }\n }\n\n &.arrow-disabled {\n opacity: 0.5;\n }\n\n svg {\n margin: auto;\n transition: stroke 0.2s linear;\n\n path {\n stroke: ${colors.darkPurple};\n }\n }\n`;\n\n// CSS for link element that wraps the CTA element\nconst ctaWrapperCss = css`\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n max-width: 100%;\n\n .cta-content {\n padding-right: 15px;\n }\n\n .cta-arrow {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 45px;\n }\n \n &.inverted {\n flex-direction: row-reverse;\n justify-content: flex-end;\n\n .cta-content {\n padding-right: 0;\n padding-left: 10px;\n }\n }\n`;\n\n/*\n * Public Elements\n */\n\n/**\n * Generate a CTA\n *\n * @param {string} to - the url of the link\n * @param {string} target - the target of the link\n * @param {object} state - location state to pass with link\n * @param {boolean} colored - whether the CTA is colored (purple) or white\n * @param {node} children - content of the CTA\n * @param {boolean} invertedDirection - whether the CTA is point right (default) or left\n */\nconst CTA = ({to, target = '_self', state = null, colored = false, invertedDirection = false, children}) => {\n const [isHovering, setIsHovering] = useState(false);\n\n // Get the correct arrow element depending on the colored setting\n const LinkElement = colored ? CTALink : CTALinkDark;\n\n // Define the classes to use depending on whether the element is being hovered or not\n const classNames = isHovering ? 'hover' : '';\n\n const classInvertedDirection = invertedDirection ? 'inverted' : '';\n\n // CTA arrow with the generated ID. No onClick action, since the outer element is a simple link\n const arrow = (\n {}} colored={colored} invertedDirection={invertedDirection} />\n );\n\n // Activate/deactivate the CTA Arrow when hovering the outer element\n const onMouseEnter = () => setIsHovering(true);\n const onMouseLeave = () => setIsHovering(false);\n\n // Return\n return (\n \n {children}\n {arrow}\n \n );\n};\n\nCTA.propTypes = {\n to: PropTypes.string,\n target: PropTypes.string,\n state: PropTypes.object,\n colored: PropTypes.bool,\n children: PropTypes.node.isRequired,\n invertedDirection: PropTypes.bool,\n};\n\nCTA.defaultProps = {\n to: undefined,\n target: '_self',\n state: null,\n colored: false,\n invertedDirection: false,\n};\n\n/**\n * Generate a clickable arrow used in CTA's\n *\n * @param {function} onClick - function to be executed when the element is clicked\n * @param {string} classNames - additional classes to add to the clickable element\n * @param {boolean} colored - whether the CTA is colored (purple) or white\n * @param {boolean} invertedDirection - whether the Arrow is point right (default) or left\n */\nconst CTAArrow = ({onClick = () => {}, classNames = '', colored = false, invertedDirection = false}) => {\n /* eslint-disable i18next/no-literal-string */\n const svgCss = css`\n stroke: ${colored ? colors.darkPurple : colors.white};\n // The SVG image is pointing left, we mainly want to point right. Right is considered the normal direction.\n // We apply a rotation to get the normal direction; when inverted direction, just don't apply it.\n transform: ${invertedDirection ? 'scale(1)' : 'scale(-1)'};\n `;\n /* eslint-enable i18next/no-literal-string */\n\n return (\n \n \n \n );\n};\n\nCTAArrow.propTypes = {\n onClick: PropTypes.func,\n classNames: PropTypes.string,\n colored: PropTypes.bool,\n invertedDirection: PropTypes.bool,\n};\n\nCTAArrow.defaultProps = {\n onClick: () => {},\n classNames: '',\n colored: false,\n invertedDirection: false,\n};\n\n\n// Primary Button\nconst PrimaryButton = styled.button`\n ${BaseButtonStyles};\n ${PrimaryButtonStyles};\n`;\n\n\n// Secondary Button\nconst SecondaryButton = styled(PrimaryButton)`\n ${SecondaryButtonStyles};\n`;\n\n\n// Link styled as Primary Button\nconst LinkAsPrimaryButton = styled(Link)`\n ${BaseButtonStyles};\n ${PrimaryButtonStyles};\n`;\n\n\n// Link styled as Secondary Button\nconst LinkAsSecondaryButton = styled(LinkAsPrimaryButton)`\n ${SecondaryButtonStyles};\n`;\n\n\n// Contact Sales Button\nconst ContactSalesButton = () => {\n const {navigate} = useI18next();\n\n return (\n navigate('/about/contact-sales')}>Contact Sales\n );\n};\n\n\n// Embedded Video\nconst EmbeddedVideo = ({iframeSource = null}) => (\n \n \n \n);\n\nEmbeddedVideo.propTypes = {\n iframeSource: PropTypes.string,\n};\n\nEmbeddedVideo.defaultProps = {\n iframeSource: null,\n};\n\n\n// Embedded Podcast\nconst EmbeddedPodcast = ({iframeSource = null}) => (\n \n \n \n);\n\nEmbeddedPodcast.propTypes = {\n iframeSource: PropTypes.string,\n};\n\nEmbeddedPodcast.defaultProps = {\n iframeSource: null,\n};\n\n\n// Video Overlay\nconst WatchVideoOverlay = ({videoUrl, opened, setOpened}) => {\n const [hidden, setHidden] = useState(true);\n const [iframeSource, setIframeSource] = useState(videoUrl);\n\n const closeVideo = () => {\n // Set \"opened\" as false, which will trigger the fade out animation\n setOpened(false);\n\n setTimeout(() => {\n // After the animation is over, actually hide the element, and set the iframe source to null (which will\n // remove the video from the DOM, essentially stopping it, otherwise it would keep playing in the\n // background).\n setHidden(true);\n setIframeSource(null);\n\n // After removing the video, we want to load it again, so that it is ready for next time it is opened.\n setTimeout(() => setIframeSource(videoUrl), 100);\n }, overlayAnimationTime);\n };\n\n const overlayClasses = [];\n\n // If the video should be opened, add the correct opened class to trigger the fade in animation\n if (opened) {\n /* eslint-disable-next-line i18next/no-literal-string */\n overlayClasses.push('active');\n\n // If it is still hidden, remove the hidden class which will make the video visible (and thus allowing the fade\n // in animation to be seen).\n if (hidden) {\n setHidden(false);\n }\n } else {\n // In case the video is not opened AND is hidden, add the correct hidden class to it.\n // NOTE: don't forget the video may be closed but NOT hidden. This happens when we close the video and are still\n // waiting for the fade out animation to finish, after which we actually hide the component.\n if (hidden) { // eslint-disable-line no-lonely-if\n /* eslint-disable-next-line i18next/no-literal-string */\n overlayClasses.push('hidden');\n }\n }\n\n return (\n \n
\n
\n \n
\n \n );\n};\n\nWatchVideoOverlay.propTypes = {\n videoUrl: PropTypes.string.isRequired,\n opened: PropTypes.bool.isRequired,\n setOpened: PropTypes.func.isRequired,\n};\n\n\n/**\n * Button to display a video on top of an overlay\n *\n * @param {string} videoUrl - URL of the embedded video to show (Vimeo, Youtube, ...)\n * @param {string} gaLabel - Video Label to send to Google Analytics\n */\nconst WatchVideoButton = ({videoUrl, gaLabel}) => {\n const [opened, setOpened] = useState(false);\n\n const WatchVideoClick = () => {\n setOpened(true);\n\n // Send custom event to Google Analytics if we have gaLabel\n if (gaLabel) {\n /* eslint-disable-next-line i18next/no-literal-string */\n sendGoogleAnalyticsEvent('videos', 'play', gaLabel);\n }\n };\n\n return (\n <>\n Watch Video\n \n \n );\n};\n\nWatchVideoButton.propTypes = {\n videoUrl: PropTypes.string.isRequired,\n gaLabel: PropTypes.string,\n};\n\nWatchVideoButton.defaultProps = {\n gaLabel: undefined,\n};\n\n\n// End of Page CTA\nconst StyledEndOfPageCTA = styled.div`\n ${ContentContainer} {\n padding-left: 20px;\n padding-right: 20px;\n\n .cta {\n width: 100%;\n max-width: 1100px;\n margin-left: auto;\n margin-right: auto;\n padding: 50px 8% 35px;\n margin-bottom: -55px;\n position: relative;\n\n background: linear-gradient(180deg, #EEEEFF 0%, #FFFFFF 100%);\n\n .cta-btn {\n display: flex;\n align-items: center;\n\n ${LinkAsPrimaryButton} {\n margin-left: 0;\n margin-top: 40px;\n }\n }\n }\n }\n\n .cta-bottom-background {\n height: 35px;\n background-color: ${colors.black};\n }\n\n\n @media (min-width: ${breakpoints.md}) {\n ${ContentContainer} {\n padding-left: 10%;\n padding-right: 10%;\n\n .cta {\n margin-bottom: -35px;\n\n .cta-btn {\n ${LinkAsPrimaryButton} {\n margin-left: auto;\n margin-top: 0;\n }\n }\n }\n }\n }\n`;\n\nconst EndOfPageCTA = ({link, linkText, cssStyles = null, children}) => (\n \n \n
\n
\n
\n {children}\n
\n\n
\n {linkText}\n
\n
\n
\n \n\n
\n \n);\n\nEndOfPageCTA.propTypes = {\n link: PropTypes.string.isRequired,\n linkText: PropTypes.string.isRequired,\n cssStyles: PropTypes.object,\n children: PropTypes.node.isRequired,\n};\n\nEndOfPageCTA.defaultProps = {\n cssStyles: null,\n};\n\nconst ArrowCircleButton = ({className = '', invertedDirection = false, disabled = false, onClick = () => {}}) => {\n const {t} = useTranslation();\n\n const label = invertedDirection ? t('Previous') : t('Next');\n const classes = [className];\n\n /* eslint-disable i18next/no-literal-string */\n if (!!disabled) classes.push('arrow-disabled');\n if (!!invertedDirection) classes.push('arrow-prev');\n /* eslint-enable i18next/no-literal-string */\n\n return (\n \n \n \n );\n};\n\nArrowCircleButton.propTypes = {\n className: PropTypes.string,\n invertedDirection: PropTypes.bool,\n disabled: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nArrowCircleButton.defaultProps = {\n className: '',\n invertedDirection: false,\n disabled: false,\n onClick: () => {},\n};\n\n\n/*\n * Exports\n */\nexport {\n ArrowCircleButton,\n Clickable,\n ContactSalesButton,\n CTA,\n CTAArrow,\n EndOfPageCTA,\n BaseButtonStyles,\n PrimaryButton,\n SecondaryButton,\n LinkAsPrimaryButton,\n LinkAsSecondaryButton,\n EmbeddedVideo,\n EmbeddedPodcast,\n Overlay,\n overlayAnimationTime,\n WatchVideoButton,\n WatchVideoOverlay,\n};\n"],"sourceRoot":""}