{"version":3,"sources":["webpack://switch-website/./src/pages/about/newsroom.js"],"names":["settings","require","iconCss","css","colors","NewsroomContentContainer","ContentContainer","LinkColored","fonts","fontWeights","breakpoints","SmallerNewsroomContentContainer","blogPostCardCss","BlogPostCard","title","text","image","postId","date","type","tags","link","className","postTypeFilters","icon","name","tag","horizontalCardCss","LinkAsPrimaryButton","HorizontalCard","Trans","eventCss","boxShadowPerformantCss","Event","location","stand","href","target","rel","G","getImage","childImageSharp","alt","defaultProps","backgroundImageCardCss","smallHorizontalCardCss","SmallHorizontalCard","Header","Noise","GeometricShapes","Slanted","GeometricShapesPattern","P","data","useContext","ContrastContext","setContrast","t","useTranslation","imageMediaResourcesLogo","imageMediaResourcesPhotos","imageMediaResourcesProduct","newsRoomData","strapiNewsroom","events","allStrapiNewsroomEvent","nodes","strapiFeaturedPosts","featuredTopBlogPost","newsroom_top","featuredEventsBlogPost","newsroom_events","blogPosts","newsroom_latest","pressKitLink","press_kit","localFile","publicURL","mediaResources","title_str","downloadText","media_resources_logo","media_resources_photos","media_resources_product","ogTitle","description","sub_title","preview_image","feature_image","id","publish_date","blog_tags","as","map","event","key","post","to","PR_TEAM_EMAIL","color","hovercolor","gaLabel","download","resource"],"mappings":"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","file":"9828829e-992f72d14e52cedf9130.js","sourcesContent":["/** @jsx jsx */\nimport React, {useContext} from 'react';\nimport PropTypes from 'prop-types';\n\nimport {css, jsx} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {graphql} from 'gatsby';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\nimport {GatsbyImage, getImage} from 'gatsby-plugin-image';\nimport {BgImage} from 'gbimage-bridge';\n\nimport {postTypeFilters} from '../../helpers/constants/learn';\nimport {ContrastContext} from '../../helpers/context';\nimport SEO from '../../components/common/SEO';\nimport {boxShadowPerformantCss, CardBase} from '../../components/common/CardBase';\nimport {CTALink, Hero, LinkColored, P} from '../../components/common/Typography';\nimport {LinkAsPrimaryButton} from '../../components/common/Clickables';\nimport {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport Noise from '../../images/noise.png';\nimport GeometricShapes from '../../images/geometric-shapes.png';\nimport GeometricShapesPattern from '../../images/geometric-pattern-bg.png';\nimport DownloadIcon from '../../images/download.svg';\n\nconst settings = require('../../../settings');\n\n\n/*\n * Private Elements\n */\nconst iconCss = css`\n    svg {\n        &.icon {\n            margin: 0.5rem 0.8rem;\n            \n            * {\n                stroke: ${colors.darkPurple};\n            }\n        }\n    }\n`;\n\n\nconst NewsroomContentContainer = styled(ContentContainer)`\n    margin-top: 3rem;\n\n    h2 {\n        margin-bottom: 2rem;\n    }\n\n    ${LinkColored} {\n        font-family: ${fonts.sansSerif};\n        font-weight: ${fontWeights.medium};\n    }\n    \n    ${iconCss};\n\n    @media (min-width: ${breakpoints.md}) {\n        padding-left: 65px;\n        padding-right: 65px;\n        margin-top: 4rem;\n\n        h2 {\n            margin-bottom: 3rem;\n        }\n    }\n`;\n\n\nconst SmallerNewsroomContentContainer = styled(NewsroomContentContainer)`\n    max-width: 1100px;\n`;\n\n\n\nconst blogPostCardCss = css`\n    height: clamp(350px, 50vw, 500px);\n\n    .top {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: auto;\n\n        color: ${colors.darkPurple};\n        font-family: ${fonts.monospace};\n        font-weight: ${fontWeights.semiBold};\n        font-size: 10px;\n        line-height: 19px;\n\n        .type {\n            line-height: 24px;\n\n            svg {\n                margin-right: 0.3rem;\n\n                * {\n                    stroke: ${colors.darkPurple};\n                }\n            }\n        }\n\n        .tag {\n            line-height: 24px;\n            text-align: right;\n        }\n    }\n\n    p {\n        margin: 0;\n    }\n\n    .date {\n        font-size: 10px;\n        line-height: 13px;\n    }\n\n    .title {\n        font-size: 20px;\n        font-weight: ${fontWeights.semiBold};\n        line-height: 27px;\n    }\n\n    .text {\n        font-size: 12px;\n        line-height: 19px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        .top {\n            font-size: clamp(10px, 1.5vw, 12px);\n            line-height: clamp(19px, 2vw, 22px);\n        }\n\n        .date {\n            font-size: clamp(10px, 2vw, 12px);\n            line-height: clamp(13px, 2vw, 15px);\n            margin-bottom: 1.2rem;\n        }\n\n        .title {\n            font-size: clamp(20px, 2vw, 24px);\n            line-height: clamp(27px, 2vw, 32px);\n            margin-bottom: 1rem;\n        }\n\n        .text {\n            font-size: clamp(12px, 1.5vw, 14px);\n            line-height: clamp(19px, 1.5vw, 22px);\n        }\n    }\n`;\n\nconst BlogPostCard = ({title, text, image, postId, date, type, tags}) => (\n    <CardBase image={image} link={`/learn/${postId}`} css={blogPostCardCss} className=\"blog-post-card\">\n        <div className=\"top\">\n            <div className=\"type\">\n                {postTypeFilters[type].icon}\n                <span>{postTypeFilters[type].name}</span>\n            </div>\n            <div className=\"tag\">{tags[0]?.tag}</div>\n        </div>\n        <div className=\"date\">{date}</div>\n        <p className=\"title\">{title}</p>\n        <p className=\"text\">{text}</p>\n    </CardBase>\n);\n\nBlogPostCard.propTypes = {\n    title: PropTypes.string.isRequired,\n    text: PropTypes.string.isRequired,\n    image: PropTypes.object.isRequired,\n    postId: PropTypes.string.isRequired,\n    date: PropTypes.string.isRequired,\n    type: PropTypes.string.isRequired,\n    tags: PropTypes.array.isRequired,\n};\n\n\nconst horizontalCardCss = css`\n    height: clamp(440px, 50vw, 500px);\n    width: 100%;\n    max-width: 980px;\n\n    .card__content {\n        height: 100%;\n        justify-content: space-between;\n    }\n\n    .top {\n        display: flex;\n        justify-content: space-between;\n\n        color: ${colors.darkPurple};\n        font-family: ${fonts.monospace};\n        font-weight: ${fontWeights.semiBold};\n        font-size: clamp(10px, 1.5vw, 12px);\n        line-height: clamp(19px, 2vw, 22px);\n\n        .type {\n            line-height: 24px;\n\n            svg {\n                margin-right: 0.3rem;\n\n                * {\n                    stroke: ${colors.darkPurple};\n                }\n            }\n        }\n        \n        .tag {\n            line-height: 24px;\n            text-align: right;\n        }\n    }\n\n    .bottom {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n        align-items: flex-end;\n\n        .texts {\n            flex-basis: 60ch;\n            flex-grow: 1;\n            padding-right: 1rem;\n\n            p {\n                margin: 0;\n            }\n\n            .date {\n                font-size: clamp(11px, 3vw, 18px);\n                line-height: clamp(13px, 3vw, 22px);\n                margin-bottom: 1.2rem;\n            }\n\n            .title {\n                font-size: clamp(25px, 3vw, 32px);\n                font-weight: ${fontWeights.semiBold};\n                line-height: clamp(34px, 3vw, 44px);\n                margin-bottom: 1rem;\n            }\n\n            .text {\n                font-size: clamp(12px, 3vw, 20px);\n                line-height: clamp(19px, 3vw, 30px);\n            }\n        }\n\n        ${LinkAsPrimaryButton} {\n            margin-top: 1rem;\n        }\n    }\n`;\n\nconst HorizontalCard = ({title, text, image, postId, date, type, tags}) => (\n    <CardBase image={image} link={`/learn/${postId}`} css={horizontalCardCss} className=\"horizontal-card\">\n        <div className=\"top\">\n            <div className=\"type\">\n                {postTypeFilters[type].icon}\n                <span>{postTypeFilters[type].name}</span>\n            </div>\n            <div className=\"tag\">{tags[0]?.tag}</div>\n        </div>\n        <div className=\"bottom\">\n            <div className=\"texts\">\n                <div className=\"date\">{date}</div>\n                <p className=\"title\">{title}</p>\n                <p className=\"text\">{text}</p>\n            </div>\n            <LinkAsPrimaryButton><Trans>View this article</Trans></LinkAsPrimaryButton>\n        </div>\n    </CardBase>\n);\n\nHorizontalCard.propTypes = {\n    title: PropTypes.string.isRequired,\n    text: PropTypes.string.isRequired,\n    image: PropTypes.object.isRequired,\n    postId: PropTypes.string.isRequired,\n    date: PropTypes.string.isRequired,\n    type: PropTypes.string.isRequired,\n    tags: PropTypes.array.isRequired,\n};\n\n\nconst eventCss = css`\n    width: 100%;\n    border-radius: 5px;\n\n    font-family: ${fonts.sansSerif};\n\n    background-color: rgba(75,78,214,0.05);\n    box-shadow: 0 2px 7px 0 ${colors.shadowGrey};\n\n    margin-bottom: 1rem;\n\n    a {\n        width: 100%;\n        height: 100%;\n        padding: 1rem;\n\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        text-decoration: none;\n        color: ${colors.black};\n    }\n  \n    .rounded-circle {\n        height: 54px;\n        width: 54px;\n    }\n\n    .event_text {\n        flex-grow: 1;\n        margin-left: 1rem;\n\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .event_text-main {\n        flex-grow: 1;\n        flex-basis: 30ch;\n        flex-shrink: 1;\n        margin-right: 1rem;\n    }\n\n    .event_date {\n        font-size: 14px;\n        color: ${colors.mediumGrey};\n    }\n\n    .event_name {\n        font-size: 20px;\n        font-weight: ${fontWeights.semiBold};\n        margin: 0;\n    }\n\n    .event_location {\n        flex-grow: 1;\n        flex-basis: 5ch;\n        font-size: 20px;\n    }\n\n    ${boxShadowPerformantCss}\n\n    ::after {\n        box-shadow: -7px 13px 17px 0 ${colors.shadowGrey};\n        opacity: 0;\n        transition: opacity 400ms ease-in-out;\n    }\n`;\n\nconst Event = ({name, date, image, location, stand = '', link = ''}) => (\n    <article css={eventCss}>\n        <a href={link} target=\"_blank\" rel=\"noreferrer\">\n            <GatsbyImage image={getImage(image.childImageSharp)} alt={name} className=\"rounded-circle\" />\n            <div className=\"event_text\">\n                <div className=\"event_text-main\">\n                    <div className=\"event_date\">\n                        {date}\n                        {stand && (` — ${stand}`)}\n                    </div>\n                    <div className=\"event_name\">{name}</div>\n                </div>\n                <div className=\"event_location\">{location}</div>\n            </div>\n        </a>\n    </article>\n);\n\nEvent.propTypes = {\n    name: PropTypes.string.isRequired,\n    date: PropTypes.string.isRequired,\n    image: PropTypes.object.isRequired,\n    location: PropTypes.string.isRequired,\n    stand: PropTypes.string,\n    link: PropTypes.string,\n};\n\nEvent.defaultProps = {\n    stand: '',\n    link: '',\n};\n\n\nconst backgroundImageCardCss = css`\n    &:before,\n    &:after {\n        border-radius: 5px;\n        overflow: hidden;\n    }\n`;\n\nconst smallHorizontalCardCss = css`\n    height: 220px;\n    padding: 1rem;\n    margin-bottom: 1rem;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n\n    color: ${colors.white};\n    font-family: ${fonts.sansSerif};\n    font-weight: ${fontWeights.semiBold};\n    font-size: clamp(18px, 5vw, 24px);\n    line-height: clamp(26px, 5vw, 32px);\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 2rem;\n    }\n`;\n\nconst SmallHorizontalCard = ({title, image}) => (\n    <BgImage\n        image={getImage(image)}\n        css={[backgroundImageCardCss, smallHorizontalCardCss]}\n        className=\"small-horizontal-card\"\n    >\n        <div className=\"title\">{title}</div>\n    </BgImage>\n);\n\nSmallHorizontalCard.propTypes = {\n    title: PropTypes.string.isRequired,\n    image: PropTypes.object.isRequired,\n};\n\n\nconst Header = styled.div`\n    padding-top: 5rem;\n    min-height: 10rem;\n\n    background: repeat url(${Noise}),\n                ${colors.black} radial-gradient(at bottom right, ${colors.darkPurple}, ${colors.black} 80%);\n\n    @media (min-width: ${breakpoints.md}) {\n        padding-top: 8rem;\n        min-height: 20rem;\n\n        background: no-repeat bottom left/540px url(${GeometricShapes}),\n                    linear-gradient(to top, ${colors.white}, ${colors.white} 104px, ${colors.transparent} 104px),\n                    repeat url(${Noise}),\n                    ${colors.black} radial-gradient(at bottom right, ${colors.darkPurple}, ${colors.black} 50%);\n    }\n\n    ${NewsroomContentContainer} {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        margin-top: 0;\n\n        .title {\n          margin-right: 1rem;\n          margin-bottom: 2rem;\n        }\n\n        .horizontal-card {\n          margin-left: auto;\n        }\n    }\n`;\n\n\nconst Slanted = styled.div`\n    padding: 10rem 25px;\n\n    color: ${colors.white};\n    background: ${colors.black} repeat center/cover url(${GeometricShapesPattern});\n    clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);\n\n    display: grid;\n    place-content: center;\n    text-align: center;\n\n    margin: 3rem 0;\n\n    div {\n        max-width: 695px;\n\n        ${P} {\n            margin: 2rem 0;\n        }\n\n        div.buttons {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            align-items: baseline;\n\n            > * {\n                margin: 1rem;\n            }\n          \n            ${LinkColored} {\n                font-family: ${fonts.sansSerif};\n                font-weight: ${fontWeights.medium};\n            }\n        }\n    }\n  \n    ${iconCss};\n`;\n\n\n\n/*\n * Public Elements\n */\nconst NewsroomPage = ({data}) => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n\n    // Get data from query\n    const {\n        imageMediaResourcesLogo,\n        imageMediaResourcesPhotos,\n        imageMediaResourcesProduct,\n        strapiNewsroom: newsRoomData,\n        allStrapiNewsroomEvent: {\n            nodes: events,\n        },\n        strapiFeaturedPosts: {\n            newsroom_top: featuredTopBlogPost,\n            newsroom_events: featuredEventsBlogPost,\n            newsroom_latest: blogPosts,\n        },\n    } = data;\n\n    const pressKitLink = newsRoomData.press_kit.localFile?.publicURL;\n\n    const mediaResources = [\n        {\n            title: t('Logo & Brandbook'),\n            // eslint-disable-next-line i18next/no-literal-string\n            title_str: 'Logo & Brandbook',\n            image: imageMediaResourcesLogo,\n            downloadText: t('Download Logo & Brandbook'),\n            link: newsRoomData.media_resources_logo.localFile?.publicURL,\n        },\n        {\n            title: t('Office & People'),\n            // eslint-disable-next-line i18next/no-literal-string\n            title_str: 'Office & People',\n            image: imageMediaResourcesPhotos,\n            downloadText: t('Download photos'),\n            link: newsRoomData.media_resources_photos.localFile?.publicURL,\n        },\n        {\n            title: t('Product'),\n            // eslint-disable-next-line i18next/no-literal-string\n            title_str: 'Product',\n            image: imageMediaResourcesProduct,\n            downloadText: t('Download screenshots'),\n            link: newsRoomData.media_resources_product.localFile?.publicURL,\n        },\n    ];\n\n    return (\n        <>\n            <SEO\n                title={t('Newsroom')}\n                ogTitle={t('Latest News - Switch')}\n                description={t('Follow the latest company updates. Find media and press contacts, Switch logo, brand '\n                    + 'guidelines, and office photos.')}\n                image=\"/website/metatags/about-newsroom.png\"\n            />\n\n            <Header>\n                <NewsroomContentContainer>\n                    <div className=\"title\">\n                        <CTALink><Trans>Newsroom</Trans></CTALink>\n                    </div>\n                    {featuredTopBlogPost && (\n                        <HorizontalCard\n                            title={featuredTopBlogPost.title}\n                            text={featuredTopBlogPost.sub_title}\n                            image={featuredTopBlogPost.preview_image\n                                ? featuredTopBlogPost.preview_image.localFile\n                                : featuredTopBlogPost.feature_image.localFile}\n                            postId={featuredTopBlogPost.id}\n                            date={featuredTopBlogPost.publish_date}\n                            type={featuredTopBlogPost.type}\n                            tags={featuredTopBlogPost.blog_tags}\n                        />\n                    )}\n                </NewsroomContentContainer>\n            </Header>\n\n            <NewsroomContentContainer>\n                <Hero as=\"h2\"><Trans>Events</Trans></Hero>\n                <div className=\"row\">\n                    <div className=\"col\">\n                        {events.map(event => (\n                            <Event\n                                key={event.name}\n                                name={event.name}\n                                date={event.date}\n                                image={event.image.localFile}\n                                location={event.location}\n                                stand={event.stand}\n                                link={event.link}\n                            />\n                        ))}\n                    </div>\n                    {featuredEventsBlogPost && (\n                        <div className=\"col-12 col-md-5 col-lg-4\">\n                            <BlogPostCard\n                                title={featuredEventsBlogPost.title}\n                                text={featuredEventsBlogPost.sub_title}\n                                image={featuredEventsBlogPost.preview_image\n                                    ? featuredEventsBlogPost.preview_image.localFile\n                                    : featuredEventsBlogPost.feature_image.localFile}\n                                postId={featuredEventsBlogPost.id}\n                                date={featuredEventsBlogPost.publish_date}\n                                type={featuredEventsBlogPost.type}\n                                tags={featuredEventsBlogPost.blog_tags}\n                            />\n                        </div>\n                    )}\n                </div>\n            </NewsroomContentContainer>\n\n            <SmallerNewsroomContentContainer>\n                <Hero as=\"h2\"><Trans>Latest News</Trans></Hero>\n                <div className=\"row\">\n                    {blogPosts.map(post => (\n                        <div className=\"col-12 col-md-6 col-lg-4 mb-4\" key={post.title}>\n                            <BlogPostCard\n                                title={post.title}\n                                text={post.sub_title}\n                                image={post.preview_image\n                                    ? post.preview_image.localFile\n                                    : post.feature_image.localFile}\n                                postId={post.id}\n                                date={post.publish_date}\n                                type={post.type}\n                                tags={post.blog_tags}\n                            />\n                        </div>\n                    ))}\n                </div>\n            </SmallerNewsroomContentContainer>\n\n            <Slanted>\n                <div>\n                    <Hero as=\"h2\"><Trans>Download our media kit</Trans></Hero>\n                    <P>\n                        <Trans>\n                            Get access to branding components like logotypes, platform screenshots, and company\n                            pictures through our media kit. It also includes useful files about Switch like articles,\n                            product descriptions, and press releases.\n                        </Trans>\n                    </P>\n                    <div className=\"buttons\">\n                        <LinkAsPrimaryButton to={`mailto:${settings.PR_TEAM_EMAIL}`}>\n                            <Trans>Contact PR Team</Trans>\n                        </LinkAsPrimaryButton>\n                        <LinkColored\n                            to={pressKitLink}\n                            color={colors.white}\n                            hovercolor={colors.purple}\n                            // eslint-disable-next-line i18next/no-literal-string\n                            gaLabel=\"Press Kit\"\n                            download\n                        >\n                            <Trans>Download press kit</Trans>\n                            <DownloadIcon className=\"icon\" />\n                        </LinkColored>\n                    </div>\n                </div>\n            </Slanted>\n\n            <SmallerNewsroomContentContainer>\n                <Hero as=\"h2\"><Trans>Media Resources</Trans></Hero>\n                <div className=\"row\">\n                    {mediaResources.map(resource => (\n                        <div className=\"col-12 col-md-6 col-lg-4 mb-4\" key={resource.title}>\n                            <LinkColored\n                                to={resource.link}\n                                download\n                                color={colors.darkPurple}\n                                hovercolor={colors.purple}\n                                gaLabel={resource.title_str}\n                            >\n                                <SmallHorizontalCard\n                                    title={resource.title}\n                                    image={resource.image}\n                                />\n                                {resource.downloadText}\n                                <DownloadIcon className=\"icon\" />\n                            </LinkColored>\n                        </div>\n                    ))}\n                </div>\n            </SmallerNewsroomContentContainer>\n        </>\n    );\n};\n\nNewsroomPage.propTypes = {\n    data: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\n\nexport default NewsroomPage;\n\nexport const query = graphql`\n    query {\n        # Images        \n        imageMediaResourcesLogo: file(relativePath: { eq: \"about/newsroom/media_resources_logo.png\" }) {\n            childImageSharp {\n                gatsbyImageData(\n                    placeholder: BLURRED\n                    width: 350\n                )\n            }\n        }\n        imageMediaResourcesPhotos: file(relativePath: { eq: \"about/newsroom/media_resources_office.png\" }) {\n            childImageSharp {\n                gatsbyImageData(\n                    placeholder: BLURRED\n                    width: 350\n                )\n            }\n        }\n        imageMediaResourcesProduct: file(relativePath: { eq: \"about/newsroom/media_resources_product.png\" }) {\n            childImageSharp {\n                gatsbyImageData(\n                    placeholder: BLURRED\n                    width: 350\n                )\n            }\n        }\n        \n        # Newsroom Events (only in future, limited to 5)\n        allStrapiNewsroomEvent(limit: 5, filter: {isFuture: {eq: true}}, sort: {order: ASC, fields: date}) {\n            nodes {\n                date\n                name\n                location\n                stand\n                link\n                image {\n                    localFile {\n                        childImageSharp {\n                            gatsbyImageData(\n                                placeholder: TRACED_SVG\n                                height: 54\n                            )\n                        }\n                    }\n                }\n            }\n        }\n        \n        # FeaturedPosts fields related to newsroom page\n        strapiFeaturedPosts {\n            newsroom_top {\n                ...FeaturedBlogPostCardImagesFragment\n                ...NewsroomBlogPostFragment\n            }\n            newsroom_events {\n                ...BlogPostCardImagesFragment\n                ...NewsroomBlogPostFragment\n            }\n            newsroom_latest {\n                ...BlogPostCardImagesFragment\n                ...NewsroomBlogPostFragment\n            }\n        } \n    \n        # Newsroom page data\n        strapiNewsroom {\n            press_kit {\n                localFile {\n                    publicURL\n                }\n            }\n            media_resources_logo {\n                localFile {\n                    publicURL\n                }\n            }\n            media_resources_photos {\n                localFile {\n                    publicURL\n                }\n            }\n            media_resources_product {\n                localFile {\n                    publicURL\n                }\n            }\n        }\n    }\n`;\n"],"sourceRoot":""}