{"version":3,"file":"8004-1e06d8d90654ec070347.js","mappings":"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","sources":["webpack://eploy/./src/helpers/aspectRatio.ts","webpack://eploy/./src/stories/Components/Cards/CaseStudyCard/CaseStudyCard.styles.ts","webpack://eploy/./src/stories/Components/Cards/CaseStudyCard/CaseStudyCard.tsx","webpack://eploy/./src/stories/Widgets/CaseStudyListing/CaseStudyListing.styles.ts","webpack://eploy/./src/stories/Widgets/CaseStudyListing/CaseStudyListing.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\n/**\r\n * Returns the aspect ratio of the given width and height as a percentage.\r\n */\r\nexport function aspectRatio(width, height) {\r\n return (height / width) * 100;\r\n}\r\n/**\r\n * Re-usable styles for image container where the\r\n * image needs to maintain it's aspect ratio\r\n *\r\n * @param width\r\n * @param height\r\n * @returns\r\n */\r\nexport function imageWrapperPreserveRatio(width, height) {\r\n if (!width && !height) {\r\n return null;\r\n }\r\n return css `\r\n position: relative;\r\n overflow: hidden;\r\n overflow: clip;\r\n width: 100%;\r\n aspect-ratio: ${width / height};\r\n `;\r\n}\r\n/**\r\n * Calculates the percentage bottom padding\r\n * required to maintain a certain ratio.\r\n *\r\n * To be used in cases where the image ratio\r\n * changes based on viewport.\r\n *\r\n * @param width\r\n * @param height\r\n * @returns padding-bottom: {ratioPercentage}%\r\n */\r\nexport function imageWrapperRatioPadding(width, height) {\r\n if (!width && !height) {\r\n return '';\r\n }\r\n const ratioPercentage = aspectRatio(width, height).toFixed(2);\r\n return `padding-bottom: ${ratioPercentage}%`;\r\n}\r\n/**\r\n * Re-usable styles for an image placed within\r\n * a container maintaining aspect ratio\r\n */\r\nexport const imageCoverContainer = (relative) => css `\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n ${!relative && 'position: absolute; top: 0;left: 0;'}\r\n`;\r\n","import { imageCoverContainer, imageWrapperPreserveRatio } from '@helpers/aspectRatio';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { Device, from } from '@helpers/media';\r\nimport { h5 } from '@helpers/typography';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport { rgba } from 'polished';\r\nimport styled from 'styled-components';\r\nconst Container = styled.a `\r\n ${imageWrapperPreserveRatio(284, 284)};\r\n\r\n --spacing: ${fluid(16, 24)};\r\n\r\n z-index: 1;\r\n display: flex;\r\n flex-direction: column;\r\n text-decoration: none;\r\n border-radius: 16px;\r\n color: ${brand.primary.white};\r\n padding: var(--spacing);\r\n gap: var(--spacing);\r\n\r\n /* Gradient overlay */\r\n &::before {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 100%;\r\n z-index: -1;\r\n background: linear-gradient(\r\n 180deg,\r\n ${rgba(brand.grey.g500, 0.25)} 0%,\r\n ${rgba(brand.grey.g500, 0.44)} 45%,\r\n ${rgba(brand.grey.g500, 0.95)} 90%\r\n );\r\n mix-blend-mode: multiply;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n aspect-ratio: 504 / 400;\r\n }\r\n\r\n ${ButtonStyles.Container} {\r\n --borderRadius: 4px;\r\n --borderWidth: 2px;\r\n --buttonHeight: ${fluid(32, 40)};\r\n }\r\n`;\r\nconst Image = styled.img `\r\n ${imageCoverContainer()};\r\n\r\n z-index: -2;\r\n`;\r\nconst Name = styled.h3 `\r\n ${h5};\r\n\r\n margin: auto 0 0;\r\n`;\r\nconst Bottom = styled.div `\r\n display: flex;\r\n gap: var(--spacing);\r\n justify-content: space-between;\r\n align-items: center;\r\n`;\r\nconst CompanyLogo = styled.img `\r\n max-height: 24px;\r\n max-width: 85px;\r\n`;\r\nconst CaseStudyCardStyles = {\r\n Container,\r\n Image,\r\n Name,\r\n Bottom,\r\n CompanyLogo,\r\n};\r\nexport default CaseStudyCardStyles;\r\n","import { getSrcs, imageUrl } from '@helpers/image';\r\nimport { FakeButton } from '@stories/Components/Buttons/Button/Button';\r\nimport CategoryTags from '@stories/Components/Misc/CategoryTags/CategoryTags';\r\nimport * as React from 'react';\r\nimport S from './CaseStudyCard.styles';\r\nimport { Device, until } from '@helpers/media';\r\nconst CaseStudyCard = (props) => {\r\n const srcs = getSrcs(props.image, 678, 400, 4, 1);\r\n const sizes = props.sizes ??\r\n `${until(Device.TabletSmall)} 100vw, ${until(Device.Desktop)} 50vw, ${until(Device.ActualDesktop)} 33vw, 528px`;\r\n return (React.createElement(S.Container, { href: props.url, target: props.target },\r\n React.createElement(S.Image, { alt: props.image.altText, loading: \"lazy\", role: !props.image.altText ? 'presentation' : undefined, sizes: sizes, src: srcs.src, srcSet: srcs.srcSet }),\r\n props.categories && React.createElement(CategoryTags, { items: props.categories }),\r\n React.createElement(S.Name, null, props.name),\r\n React.createElement(S.Bottom, null,\r\n React.createElement(FakeButton, { buttonType: \"solid-white\", iconOnly: true }),\r\n props.companyLogo && (React.createElement(S.CompanyLogo, { src: imageUrl(props.companyLogo, { width: 85 }), alt: props.companyLogo.altText, loading: \"lazy\", role: \"presentation\" })))));\r\n};\r\nexport default CaseStudyCard;\r\n","import { fluid } from '@helpers/fluid';\r\nimport { baseGrid } from '@helpers/grid';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport SectionWrapper from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport SectionWrapperStyles from '@stories/Components/Misc/SectionWrapper/SectionWrapper.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n ${SectionWrapperStyles.Inner} {\r\n ${baseGrid}\r\n }\r\n`;\r\nconst Listing = styled.div `\r\n grid-column: 1 / -1;\r\n @media ${from(Device.TabletLarge)} {\r\n grid-column: 5 / -1;\r\n }\r\n\r\n display: flex;\r\n flex-direction: column;\r\n gap: 44px;\r\n`;\r\nconst ListingGrid = styled.div `\r\n position: relative;\r\n overflow: hidden;\r\n\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n @media ${from(Device.Tablet)} {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n @media ${until(Device.TabletLarge)} {\r\n padding-top: 24px;\r\n }\r\n\r\n row-gap: 24px;\r\n column-gap: ${fluid(24, 32)};\r\n`;\r\nconst Filters = styled.div `\r\n grid-column: 1 / -1;\r\n @media ${from(Device.TabletLarge)} {\r\n grid-column: 1 / span 4;\r\n }\r\n`;\r\nexport const CaseStudyListingStyles = {\r\n Container,\r\n Filters,\r\n Listing,\r\n ListingGrid,\r\n};\r\n","import { API_URLS } from '@helpers/api';\r\nimport { withMotionMax } from '@hoc/withMotionMax';\r\nimport { withQueryParams } from '@hoc/withQueryParams';\r\nimport { useApi } from '@hooks/useApi';\r\nimport CaseStudyCard from '@stories/Components/Cards/CaseStudyCard/CaseStudyCard';\r\nimport Filters from '@stories/Components/Misc/Filters/Filters';\r\nimport LoadingIndicator from '@stories/Components/Misc/LoadingIndicator/LoadingIndicator';\r\nimport Pagination from '@stories/Components/Misc/Pagination/Pagination';\r\nimport qs from 'query-string';\r\nimport React from 'react';\r\nimport { ArrayParam, NumberParam, useQueryParams, withDefault } from 'use-query-params';\r\nimport { CaseStudyListingStyles as S } from './CaseStudyListing.styles';\r\nconst CaseStudyListing = ({ initialData, translations, searchPath }) => {\r\n const resultsRef = React.useRef(null);\r\n const [params, setParams] = useQueryParams(Object.assign({\r\n pageIndex: withDefault(NumberParam, 1),\r\n pageSize: withDefault(NumberParam, 10),\r\n }, ...initialData.filters.map((f) => ({\r\n [f.id]: withDefault(ArrayParam, []),\r\n }))));\r\n const api = useApi({\r\n initialData,\r\n url: `${API_URLS.caseStudyListing}?${qs.stringify(params)}&searchPath=${searchPath}`,\r\n });\r\n const filters = React.useMemo(() => {\r\n return api.data?.filters\r\n .filter((f) => f.options.length > 0)\r\n .map((f) => ({\r\n ...f,\r\n value: params[f.id],\r\n onChange: (value) => {\r\n if (value === 'all') {\r\n setParams({ [f.id]: [value], pageIndex: 1 }, 'pushIn');\r\n }\r\n else {\r\n const values = params[f.id].filter((v) => v !== 'all');\r\n if (values.includes(value)) {\r\n setParams({ [f.id]: values.filter((v) => v !== value), pageIndex: 1 }, 'pushIn');\r\n }\r\n else {\r\n setParams({ [f.id]: [...values, value], pageIndex: 1 }, 'pushIn');\r\n }\r\n }\r\n },\r\n hideMobile: false,\r\n type: 'multi',\r\n }));\r\n }, [api.data?.filters]);\r\n return (React.createElement(S.Container, { ref: resultsRef, \"data-loading\": api.status === 'loading' },\r\n React.createElement(S.Filters, null,\r\n React.createElement(Filters, { data: api, filters: filters ?? [], translations: translations })),\r\n React.createElement(S.Listing, null,\r\n React.createElement(S.ListingGrid, null, api.data?.items.map((item) => (React.createElement(CaseStudyCard, { key: `CaseStudyListing_${item.id}`, ...item })))),\r\n api.data && Math.ceil(api.data?.totalItems / params.pageSize) > 0 && (React.createElement(Pagination, { disabled: api.status === 'loading', currentPage: params.pageIndex, pageCount: Math.ceil(api.data?.totalItems / params.pageSize), onChange: (p) => {\r\n setParams({ pageIndex: p }, 'pushIn');\r\n /** timeout required to ensure scrolling occurs on prev/next buttons */\r\n setTimeout(() => resultsRef.current?.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start',\r\n inline: 'start',\r\n }), 50);\r\n }, translations: translations }))),\r\n api.status === 'loading' && (React.createElement(LoadingIndicator, { label: translations?.['listings.loading'] ?? 'Loading…', layout: \"fixed\" }))));\r\n};\r\nexport default withQueryParams(withMotionMax(CaseStudyListing));\r\n"],"names":["imageWrapperPreserveRatio","width","height","css","imageCoverContainer","relative","Container","styled","a","withConfig","displayName","componentId","fluid","brand","primary","white","rgba","grey","g500","from","Device","TabletLarge","ButtonStyles","Image","img","Name","h3","h5","Bottom","div","CompanyLogo","props","_props$sizes","srcs","getSrcs","image","sizes","until","TabletSmall","Desktop","ActualDesktop","React","S","href","url","target","alt","altText","loading","role","undefined","src","srcSet","categories","CategoryTags","items","name","FakeButton","buttonType","iconOnly","companyLogo","imageUrl","SectionWrapper","SectionWrapperStyles","Inner","baseGrid","Listing","ListingGrid","Tablet","CaseStudyListingStyles","Filters","withQueryParams","withMotionMax","_ref","_api$data2","_api$data3","_api$data4","_api$data5","_translations$listing","initialData","translations","searchPath","resultsRef","params","setParams","useQueryParams","Object","assign","pageIndex","withDefault","NumberParam","pageSize","filters","map","f","id","ArrayParam","api","useApi","API_URLS","caseStudyListing","qs","_api$data","data","filter","options","length","value","onChange","values","v","includes","hideMobile","type","ref","status","item","CaseStudyCard","key","Math","ceil","totalItems","Pagination","disabled","currentPage","pageCount","p","setTimeout","_resultsRef$current","current","scrollIntoView","behavior","block","inline","LoadingIndicator","label","layout"],"sourceRoot":""}