COR-990 the topical page component (#4363)

* the topical page component * Restore old topical-tile component * Fixed data input instead of static mockup * fixed width and height * set right padding for kpiIcon * Update packages/app/src/domain/topical/components/topical-tile/index.ts Thanks for noticing Co-authored-by: MN <[email protected]> * Update packages/app/src/domain/topical/components/topical-tile/topical-tile.tsx Nice, I bet it's from some old mockup. Co-authored-by: MN <[email protected]> Co-authored-by: MN <[email protected]>
minvws · Aug 18, 2022 · 84c51e9 · 84c51e9
1 parent a5c39fd
commit 84c51e9
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 6 deletions.
diff --git a/packages/app/src/domain/topical/components/topical-tile/index.ts b/packages/app/src/domain/topical/components/topical-tile/index.ts
@@ -0,0 +1 @@
+export * from './topical-tile';
diff --git a/packages/app/src/domain/topical/components/topical-tile/topical-tile.tsx b/packages/app/src/domain/topical/components/topical-tile/topical-tile.tsx
@@ -0,0 +1,137 @@
+import { Box } from '~/components/base';
+import css from '@styled-system/css';
+import styled from 'styled-components';
+import { Heading } from '~/components/typography';
+import { LinkWithIcon } from '~/components/link-with-icon';
+import { asResponsiveArray } from '~/style/utils';
+import { colors } from '@corona-dashboard/common';
+import DynamicIcon from '~/components/get-icon-by-name';
+import { Chevron, Down, Up } from '@corona-dashboard/icons';
+import { Markdown } from '~/components/markdown';
+import { TopicalIcon } from '@corona-dashboard/common/src/types';
+import { isDefined } from 'ts-is-present';
+
+interface IconWrapperProps {
+  iconColor: string;
+}
+
+type TrendIcon = {
+  direction: 'UP' | 'DOWN';
+  color: 'GREEN' | 'RED';
+} | null;
+
+type Cta = {
+  label: string;
+  href: string;
+} | null;
+
+interface TopicalTileProps {
+  title: string;
+  tileIcon: TopicalIcon;
+  trendIcon?: TrendIcon;
+  dynamicDescription: string;
+  cta?: Cta;
+}
+
+export function TopicalTile({
+  title,
+  tileIcon,
+  trendIcon,
+  dynamicDescription,
+  cta,
+}: TopicalTileProps) {
+  return (
+    <Box
+      spacing={3}
+      borderColor={colors.gray}
+      borderWidth="1px"
+      borderStyle="solid"
+      position="relative"
+      display="flex"
+      flexDirection={'column'}
+      justifyContent={'space-between'}
+    >
+      <Box
+        display="flex"
+        flexDirection={'column'}
+        justifyContent={'start'}
+        textAlign={'left'}
+        p={{ _: 3, xs: 4 }}
+      >
+        <KpiIcon>
+          <DynamicIcon name={tileIcon} />
+        </KpiIcon>
+
+        <Box
+          display="block"
+          fontSize={{ _: 6, xs: 7 }}
+          paddingRight={5}
+          marginBottom={3}
+        >
+          <Heading
+            level={3}
+            color={colors.blue}
+            css={css({
+              display: 'flex',
+              alignItems: 'center',
+            })}
+          >
+            {title}
+            {isDefined(trendIcon) && trendIcon !== null && (
+              <IconWrapper iconColor={trendIcon.color}>
+                {trendIcon.direction === 'DOWN' && <Down />}
+                {trendIcon.direction === 'UP' && <Up />}
+              </IconWrapper>
+            )}
+          </Heading>
+        </Box>
+
+        <Box display="flex" alignItems={'center'}>
+          <Markdown content={dynamicDescription} />
+        </Box>
+      </Box>
+
+      <Box
+        display="flex"
+        justifyContent={'center'}
+        bg={colors.lightBlue}
+        color={colors.blue}
+        padding={3}
+      >
+        {isDefined(cta) && cta !== null && (
+          <LinkWithIcon
+            href={cta.href}
+            icon={<Chevron />}
+            iconPlacement="right"
+          >
+            {cta.label}
+          </LinkWithIcon>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+const IconWrapper = styled.span<IconWrapperProps>((x) =>
+  css({
+    color: x.iconColor,
+    display: 'inline-flex',
+    alignItems: 'center',
+    width: '20px',
+    marginLeft: '15px;',
+  })
+);
+
+const KpiIcon = styled.span(
+  css({
+    color: colors.white,
+    backgroundColor: colors.blue,
+    position: 'absolute',
+    display: 'block',
+    width: asResponsiveArray({ _: 40, sm: 50 }),
+    height: asResponsiveArray({ _: 40, sm: 50 }),
+    right: 0,
+    top: 0,
+    padding: asResponsiveArray(2),
+  })
+);
diff --git a/packages/app/src/pages/nieuw-actueel.tsx b/packages/app/src/pages/nieuw-actueel.tsx
@@ -4,8 +4,8 @@ import { Layout } from '~/domain/layout';
 import { ArticleList, TopicalSectionHeader } from '~/domain/topical';
 import { isPresent } from 'ts-is-present';
 import { Search } from '~/domain/topical/components/search';
+import { TopicalTile } from '~/domain/topical/components/topical-tile';
 import { Languages, SiteText } from '~/locale';
-import DynamicIcon from '~/components/get-icon-by-name';
 import {
   createGetStaticProps,
   StaticProps,
@@ -17,6 +17,7 @@ import {
   selectTopicalData,
 } from '~/static-props/get-data';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
+import { colors } from '@corona-dashboard/common';
 
 const selectLokalizeTexts = (siteText: SiteText) => ({
   hospitalText: siteText.pages.hospital_page.nl,
@@ -55,17 +56,46 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
 
   return (
     <Layout {...metadata} lastGenerated={lastGenerated}>
-      <Box>{selectedTopicalData.title}</Box>
-      <Box bg="white">
+      <Box bg={colors.white}>
+        {selectedTopicalData.title}
         <MaxWidth id="content">
           <Box
             spacing={{ _: 4, md: 5 }}
             pt={{ _: 3, md: 5 }}
             px={{ _: 3, sm: 4 }}
           >
-            <Box py={4}>
-              <DynamicIcon name={selectedTopicalData.themes[0].icon} />
-            </Box>
+            {selectedTopicalData.themes
+              .sort((a, b) => a.index - b.index)
+              .map((theme) => {
+                return (
+                  <Box
+                    py={4}
+                    display="grid"
+                    gridTemplateColumns={{
+                      _: 'repeat(1, 1fr)',
+                      xs: 'repeat(3, 1fr)',
+                    }}
+                    gridColumnGap={{ _: 4, md: 5 }}
+                    gridRowGap={{ _: 4, md: 5 }}
+                    key={theme.index}
+                  >
+                    {theme.themeTiles
+                      .sort((a, b) => a.index - b.index)
+                      .map((themeTile) => {
+                        return (
+                          <TopicalTile
+                            trendIcon={themeTile.trendIcon}
+                            title={themeTile.title}
+                            tileIcon={themeTile.tileIcon}
+                            dynamicDescription={themeTile.dynamicDescription}
+                            cta={themeTile.cta}
+                            key={themeTile.index}
+                          />
+                        );
+                      })}
+                  </Box>
+                );
+              })}
             <Box py={4}>
               <Search title={textShared.secties.search.title.nl} />
             </Box>