{"version":3,"file":"component---src-pages-role-index-js-538122de4e7cca200ff2.js","mappings":"uNAeAA,EAAAA,EAAQC,UAAY,CAClBC,SAAUC,IAAAA,KAAeC,YAG3B,MAAMC,EAAU,CACdC,MAAO,CAAC,QACRC,OAAQ,CAAC,OAAQ,QACjBC,MAAO,CAAC,OAAQ,QAChBC,OAAQ,CAAC,OAAQ,SAGbC,EAAO,CACXJ,MAAO,CAAC,OAAQ,QAChBC,OAAQ,CAAC,OAAQ,QACjBC,MAAO,CAAC,QACRC,OAAQ,CAAC,SA4FX,UAzFA,SAAaE,GAAsB,IAArB,KAAEC,EAAI,SAAEC,GAAUF,EAC9B,MAAMG,EAAQF,EAAKG,kBAAkBC,MAE/BC,GADeC,EAAAA,EAAAA,KACUC,MAmB/B,OAjBAC,EAAAA,EAAAA,YAAU,KACJP,EAASQ,OAASR,EAASQ,MAAMC,2BACnCC,EAAAA,EAAAA,UAAS,SAAU,CAAEC,SAAS,IAC9BC,aAAaC,WAAW,gBAC1B,GACC,CAACb,KAEJO,EAAAA,EAAAA,YAAU,KACR,MAAMO,EAAiBC,KAAKC,MAAMJ,aAAaK,QAAQ,iBAEnDH,GACFI,YAAW,KACTC,OAAOC,SAAS,CAAEC,IAAKP,EAAgBQ,KAAM,EAAGC,SAAU,UAAW,GACpE,IACL,GACC,IAGDC,EAAAA,cAACC,EAAAA,GAAM,CAACnB,MAAOF,GACboB,EAAAA,cAACE,EAAAA,GAAG,CAACpB,MAAM,qBACXkB,EAAAA,cAACG,EAAAA,GAAe,CACdC,MAAM,gCACNtB,MAAM,oBACNuB,IAAI,8BAEJL,EAAAA,cAACM,EAAAA,EAAS,CAACC,KAAK,SAAQ,+OAO1BP,EAAAA,cAACQ,EAAAA,GAAa,KACZR,EAAAA,cAACS,EAAAA,GAAc,CAACpC,KAAMA,EAAML,QAASA,GAClCS,EAAMiC,KAAIC,IAAA,IAAC,KAAEC,GAAMD,EAAA,OAClBX,EAAAA,cAACa,EAAAA,GAAY,CACXC,IAAKF,EAAKG,GACVjC,MAAO8B,EAAKI,YAAYlC,MACxBmC,YAAaL,EAAKI,YAAYC,YAC9BC,KAAI,IAAMN,EAAKO,OAAOC,mBAAqBR,EAAKO,OAAOE,KACvDjB,MAAOQ,EAAKI,YAAYZ,MACxBkB,SAAUV,EAAKI,YAAYM,SAC3BC,MAAI,GACJ,MAMd,C","sources":["webpack://hpe-dev-portal/./src/pages/role/index.js"],"sourcesContent":["import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql, navigate } from 'gatsby';\nimport { Heading, Paragraph } from 'grommet';\n\nimport {\n  PlatformCard,\n  Layout,\n  SEO,\n  PageDescription,\n  ResponsiveGrid,\n  SectionHeader,\n} from '../../components';\nimport { useSiteMetadata } from '../../hooks/use-site-metadata';\n\nHeading.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nconst columns = {\n  small: ['auto'],\n  medium: ['auto', 'auto'],\n  large: ['auto', 'auto'],\n  xlarge: ['auto', 'auto'],\n};\n\nconst rows = {\n  small: ['auto', 'auto'],\n  medium: ['auto', 'auto'],\n  large: ['auto'],\n  xlarge: ['auto'],\n};\n\nfunction Role({ data, location }) {\n  const roles = data.allMarkdownRemark.edges;\n  const siteMetadata = useSiteMetadata();\n  const siteTitle = siteMetadata.title;\n\n  useEffect(() => {\n    if (location.state && location.state.isPlatformHeaderClicked) {\n      navigate('/roles', { replace: true });\n      localStorage.removeItem('rolePosition');\n    }\n  }, [location]);\n\n  useEffect(() => {\n    const scrollPosition = JSON.parse(localStorage.getItem('rolePosition'));\n\n    if (scrollPosition) {\n      setTimeout(() => {\n        window.scrollTo({ top: scrollPosition, left: 0, behavior: 'smooth' });\n      }, 100);\n    }\n  }, []);\n\n  return (\n    <Layout title={siteTitle}>\n      <SEO title=\"What's Your Role\" />\n      <PageDescription\n        image=\"/img/role/roles-main-teal.png\"\n        title=\"What's Your Role?\"\n        alt=\"What's Your Role page logo\"\n      >\n        <Paragraph size=\"large\">\n          Software is at the heart of everything we do. No matter your role,\n          you’ll find resources and tools to assist you in building the best\n          possible experience for your customers – from edge to cloud. Click on\n          the cards below to learn more.\n        </Paragraph>\n      </PageDescription>\n      <SectionHeader>\n        <ResponsiveGrid rows={rows} columns={columns}>\n          {roles.map(({ node }) => (\n            <PlatformCard\n              key={node.id}\n              title={node.frontmatter.title}\n              description={node.frontmatter.description}\n              link={`/${node.fields.sourceInstanceName}${node.fields.slug}`}\n              image={node.frontmatter.image}\n              category={node.frontmatter.category}\n              flex\n            />\n          ))}\n        </ResponsiveGrid>\n      </SectionHeader>\n    </Layout>\n  );\n}\n\nRole.propTypes = {\n  data: PropTypes.shape({\n    allMarkdownRemark: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            id: PropTypes.string,\n            frontmatter: PropTypes.shape({\n              title: PropTypes.string.isRequired,\n              version: PropTypes.string.isRequired,\n              description: PropTypes.string.isRequired,\n              image: PropTypes.string,\n              frontpage: PropTypes.bool,\n              priority: PropTypes.number,\n              active: PropTypes.bool,\n            }).isRequired,\n            excerpt: PropTypes.string.isRequired,\n            fields: PropTypes.shape({\n              slug: PropTypes.string.isRequired,\n              sourceInstanceName: PropTypes.string.isRequired,\n            }),\n          }).isRequired,\n        }).isRequired,\n      ).isRequired,\n    }).isRequired,\n  }).isRequired,\n  location: PropTypes.shape({\n    state: PropTypes.shape({\n      isPlatformHeaderClicked: PropTypes.bool,\n    }),\n  }),\n};\n\nexport default Role;\n\nexport const pageQuery = graphql`\n  query {\n    allMarkdownRemark(\n      filter: {\n        fields: {\n          sourceInstanceName: { eq: \"role\" }\n          slug: { regex: \"//home/$/\" }\n        }\n        frontmatter: { isAside: { ne: true }, active: { eq: true } }\n      }\n      sort: {frontmatter: {priority: ASC}}\n    ) {\n      edges {\n        node {\n          id\n          rawMarkdownBody\n          fields {\n            slug\n            sourceInstanceName\n          }\n          excerpt\n          frontmatter {\n            title\n            version\n            description\n            image\n            frontpage\n            active\n            priority\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":["Heading","propTypes","children","PropTypes","isRequired","columns","small","medium","large","xlarge","rows","_ref","data","location","roles","allMarkdownRemark","edges","siteTitle","useSiteMetadata","title","useEffect","state","isPlatformHeaderClicked","navigate","replace","localStorage","removeItem","scrollPosition","JSON","parse","getItem","setTimeout","window","scrollTo","top","left","behavior","React","Layout","SEO","PageDescription","image","alt","Paragraph","size","SectionHeader","ResponsiveGrid","map","_ref2","node","PlatformCard","key","id","frontmatter","description","link","fields","sourceInstanceName","slug","category","flex"],"sourceRoot":""}