-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcfc86df3-4bef4546054bf2fdd441.js.map
1 lines (1 loc) · 13 KB
/
cfc86df3-4bef4546054bf2fdd441.js.map
1
{"version":3,"sources":["webpack:///./node_modules/@narative/gatsby-theme-novela/src/sections/articles/Articles.List.tsx"],"names":["ArticlesList","articles","alwaysShowAllDetails","hasOnlyOneArticle","length","useContext","GridLayoutContext","gridLayout","hasSetGridLayout","getGridLayout","articlePairs","reduce","result","value","index","array","push","slice","useEffect","ArticlesListContainer","style","opacity","map","ap","isEven","isOdd","List","key","reverse","ListItem","article","narrow","hasOverflow","title","imageSource","hero","regular","hasHeroImage","Object","keys","constructor","ArticleLink","to","slug","data-a11y","Item","ImageContainer","src","Title","dark","Excerpt","excerpt","MetaData","date","timeToRead","limitToTwoLines","css","mediaqueries","phablet","showDetails","p","listTile","wide","desktop_medium","tablet","listItemRow","desktop","theme","colors","card","listItemTile","listRow","Headings","h2","fonts","serif","grey","Link","accent"],"mappings":"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","file":"cfc86df3-4bef4546054bf2fdd441.js","sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { Link } from 'gatsby';\n\nimport Headings from '@components/Headings';\nimport Image, { ImagePlaceholder } from '@components/Image';\n\nimport mediaqueries from '@styles/media';\nimport { IArticle } from '@types';\n\nimport { GridLayoutContext } from './Articles.List.Context';\n\n/**\n * Tiles\n * [LONG], [SHORT]\n * [SHORT], [LONG]\n * [SHORT], [LONG]\n *\n * or ------------\n *\n * Rows\n * [LONG]\n * [LONG]\n * [LONG]\n */\n\ninterface ArticlesListProps {\n articles: IArticle[];\n alwaysShowAllDetails?: boolean;\n}\n\ninterface ArticlesListItemProps {\n article: IArticle;\n narrow?: boolean;\n}\n\nconst ArticlesList: React.FC<ArticlesListProps> = ({\n articles,\n alwaysShowAllDetails,\n}) => {\n if (!articles) return null;\n\n const hasOnlyOneArticle = articles.length === 1;\n const { gridLayout = 'tiles', hasSetGridLayout, getGridLayout } = useContext(\n GridLayoutContext,\n );\n\n /**\n * We're taking the flat array of articles [{}, {}, {}...]\n * and turning it into an array of pairs of articles [[{}, {}], [{}, {}], [{}, {}]...]\n * This makes it simpler to create the grid we want\n */\n const articlePairs = articles.reduce((result, value, index, array) => {\n if (index % 2 === 0) {\n result.push(array.slice(index, index + 2));\n }\n return result;\n }, []);\n\n useEffect(() => getGridLayout(), []);\n\n return (\n <ArticlesListContainer\n style={{ opacity: hasSetGridLayout ? 1 : 0 }}\n alwaysShowAllDetails={alwaysShowAllDetails}\n >\n {articlePairs.map((ap, index) => {\n const isEven = index % 2 !== 0;\n const isOdd = index % 2 !== 1;\n\n return (\n <List\n key={index}\n gridLayout={gridLayout}\n hasOnlyOneArticle={hasOnlyOneArticle}\n reverse={isEven}\n >\n <ListItem article={ap[0]} narrow={isEven} />\n <ListItem article={ap[1]} narrow={isOdd} />\n </List>\n );\n })}\n </ArticlesListContainer>\n );\n};\n\nexport default ArticlesList;\n\nconst ListItem: React.FC<ArticlesListItemProps> = ({ article, narrow }) => {\n if (!article) return null;\n\n const { gridLayout } = useContext(GridLayoutContext);\n const hasOverflow = narrow && article.title.length > 35;\n const imageSource = narrow ? article.hero.narrow : article.hero.regular;\n const hasHeroImage =\n imageSource &&\n Object.keys(imageSource).length !== 0 &&\n imageSource.constructor === Object;\n\n return (\n <ArticleLink to={article.slug} data-a11y=\"false\">\n <Item gridLayout={gridLayout}>\n <ImageContainer narrow={narrow} gridLayout={gridLayout}>\n {hasHeroImage ? <Image src={imageSource} /> : <ImagePlaceholder />}\n </ImageContainer>\n <div>\n <Title dark hasOverflow={hasOverflow} gridLayout={gridLayout}>\n {article.title}\n </Title>\n <Excerpt\n narrow={narrow}\n hasOverflow={hasOverflow}\n gridLayout={gridLayout}\n >\n {article.excerpt}\n </Excerpt>\n <MetaData>\n {article.date} · {article.timeToRead} min read\n </MetaData>\n </div>\n </Item>\n </ArticleLink>\n );\n};\n\nconst wide = '1fr';\nconst narrow = '457px';\n\nconst limitToTwoLines = css`\n text-overflow: ellipsis;\n overflow-wrap: normal;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n white-space: normal;\n overflow: hidden;\n\n ${mediaqueries.phablet`\n -webkit-line-clamp: 3;\n `}\n`;\n\nconst showDetails = css`\n p {\n display: -webkit-box;\n }\n\n h2 {\n margin-bottom: 10px;\n }\n`;\n\nconst ArticlesListContainer = styled.div<{ alwaysShowAllDetails?: boolean }>`\n transition: opacity 0.25s;\n ${p => p.alwaysShowAllDetails && showDetails}\n`;\n\nconst listTile = p => css`\n position: relative;\n display: grid;\n grid-template-columns: ${p.reverse\n ? `${narrow} ${wide}`\n : `${wide} ${narrow}`};\n grid-template-rows: 2;\n column-gap: 30px;\n\n &:not(:last-child) {\n margin-bottom: 75px;\n }\n\n ${mediaqueries.desktop_medium`\n grid-template-columns: 1fr 1fr;\n `}\n\n ${mediaqueries.tablet`\n grid-template-columns: 1fr;\n \n &:not(:last-child) {\n margin-bottom: 0;\n }\n `}\n`;\n\nconst listItemRow = p => css`\n display: grid;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr 488px;\n grid-column-gap: 96px;\n grid-template-rows: 1;\n align-items: center;\n position: relative;\n margin-bottom: 50px;\n\n ${mediaqueries.desktop`\n grid-column-gap: 24px;\n grid-template-columns: 1fr 380px;\n `}\n\n ${mediaqueries.tablet`\n grid-template-columns: 1fr;\n `}\n\n @media (max-width: 540px) {\n background: ${p.theme.colors.card};\n }\n\n ${mediaqueries.phablet`\n box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n `}\n`;\n\nconst listItemTile = p => css`\n position: relative;\n\n ${mediaqueries.tablet`\n margin-bottom: 60px;\n `}\n\n @media (max-width: 540px) {\n background: ${p.theme.colors.card};\n }\n\n ${mediaqueries.phablet`\n margin-bottom: 40px;\n box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n `}\n`;\n\n// If only 1 article, dont create 2 rows.\nconst listRow = p => css`\n display: grid;\n grid-template-rows: ${p.hasOnlyOneArticle ? '1fr' : '1fr 1fr'};\n`;\n\nconst List = styled.div<{\n reverse: boolean;\n gridLayout: string;\n hasOnlyOneArticle: boolean;\n}>`\n ${p => (p.gridLayout === 'tiles' ? listTile : listRow)}\n`;\n\nconst Item = styled.div<{ gridLayout: string }>`\n ${p => (p.gridLayout === 'rows' ? listItemRow : listItemTile)}\n`;\n\nconst ImageContainer = styled.div<{ narrow: boolean; gridLayout: string }>`\n position: relative;\n height: ${p => (p.gridLayout === 'tiles' ? '280px' : '220px')};\n box-shadow: 0 30px 60px -10px rgba(0, 0, 0, ${p => (p.narrow ? 0.22 : 0.3)}),\n 0 18px 36px -18px rgba(0, 0, 0, ${p => (p.narrow ? 0.25 : 0.33)});\n margin-bottom: ${p => (p.gridLayout === 'tiles' ? '30px' : 0)};\n transition: transform 0.3s var(--ease-out-quad),\n box-shadow 0.3s var(--ease-out-quad);\n\n & > div {\n height: 100%;\n }\n\n ${mediaqueries.tablet`\n height: 200px;\n margin-bottom: 35px;\n `}\n\n ${mediaqueries.phablet`\n overflow: hidden;\n margin-bottom: 0;\n box-shadow: none;\n border-top-right-radius: 5px;\n border-top-left-radius: 5px;\n `}\n`;\n\nconst Title = styled(Headings.h2)`\n font-size: 21px;\n font-family: ${p => p.theme.fonts.serif};\n margin-bottom: ${p =>\n p.hasOverflow && p.gridLayout === 'tiles' ? '35px' : '10px'};\n transition: color 0.3s ease-in-out;\n ${limitToTwoLines};\n\n ${mediaqueries.desktop`\n margin-bottom: 15px;\n `}\n\n ${mediaqueries.tablet`\n font-size: 24px; \n `}\n\n ${mediaqueries.phablet`\n font-size: 22px; \n padding: 30px 20px 0;\n margin-bottom: 10px;\n -webkit-line-clamp: 3;\n `}\n`;\n\nconst Excerpt = styled.p<{\n hasOverflow: boolean;\n narrow: boolean;\n gridLayout: string;\n}>`\n ${limitToTwoLines};\n font-size: 16px;\n margin-bottom: 10px;\n color: ${p => p.theme.colors.grey};\n display: ${p => (p.hasOverflow && p.gridLayout === 'tiles' ? 'none' : 'box')};\n max-width: ${p => (p.narrow ? '415px' : '515px')};\n\n ${mediaqueries.desktop`\n display: -webkit-box;\n `}\n\n ${mediaqueries.phablet`\n margin-bottom: 15px;\n `}\n\n ${mediaqueries.phablet`\n max-width: 100%;\n padding: 0 20px;\n margin-bottom: 20px;\n -webkit-line-clamp: 3;\n `}\n`;\n\nconst MetaData = styled.div`\n font-weight: 600;\n font-size: 16px;\n color: ${p => p.theme.colors.grey};\n opacity: 0.33;\n\n ${mediaqueries.phablet`\n max-width: 100%;\n padding: 0 20px 30px;\n `}\n`;\n\nconst ArticleLink = styled(Link)`\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 5px;\n z-index: 1;\n transition: transform 0.33s var(--ease-out-quart);\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n\n &:hover ${ImageContainer}, &:focus ${ImageContainer} {\n transform: translateY(-1px);\n box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27),\n 0 30px 50px -30px rgba(0, 0, 0, 0.3);\n }\n\n &:hover h2,\n &:focus h2 {\n color: ${p => p.theme.colors.accent};\n }\n\n &[data-a11y='true']:focus::after {\n content: '';\n position: absolute;\n left: -1.5%;\n top: -2%;\n width: 103%;\n height: 104%;\n border: 3px solid ${p => p.theme.colors.accent};\n background: rgba(255, 255, 255, 0.01);\n border-radius: 5px;\n }\n\n ${mediaqueries.phablet`\n &:hover ${ImageContainer} {\n transform: none;\n box-shadow: initial;\n }\n\n &:active {\n transform: scale(0.97) translateY(3px);\n }\n `}\n`;\n"],"sourceRoot":""}