Feature/cor 959 topical page redesign (#4376)

* Made a base file for a new topicalPage to work on in this ticket. * COR-995 Topical page redesign schema (#4355) * feat: setup schema for topical themes * feat: first version of topcial page schema * feat: support for new topical.json * feat: implement multilang, cleanup schemas * feat: extend schema with translations and indices * feat: add valid icon values * feat: implement loading of TOPICAL json file data * feat: implement selectTopcialData * feat: extend iconset * fix: remove anys Co-authored-by: VWSCoronaDashboard24 <[email protected]> * Feature/cor 959/dynamic icons (#4361) * Get an icon dynamically * feat: make dynamic icon work including typings * fix: code cleanup * feat: extend type info in icon build * feat: add eye icon Co-authored-by: VWSCoronaDashboard18 <[email protected]> Co-authored-by: VWSCoronaDashboard24 <[email protected]> * 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]> * COR-993 measurement tile (#4364) * New measurement tile because of rebase issues * Fixed data input instead of static mokup * feat: redirect to vr/gm page instead of topical vr/gm * fix: redirect topical GM/VR pages * fix: layout of searchbox and footer * Update eye.svg and generate script after rebase (on develop with the icon PR) * Fix typing issues on icon cahnges * Feature/cor 959/subjects-list (#4354) * Feature/cor 959/page header (#4356) * add topical-header * Updated schema for index of dynamicDescription * Combining components and setting the right spaces Co-authored-by: VWSCoronaDashboard21 <[email protected]> Co-authored-by: VWSCoronaDashboard18 <[email protected]> * remove access import * Added currentColor to all icons (#4370) * added theme header * Fixing issues. * Remove replaced Component props * all topical tile hover and link * (responsive) spacing * updated trend color, Updated Topical Footer, use consistant link and hover color, add alignment to measurement tile * Fix hover state bug in link on topical tile * icon size and alignment * finetuning and set non link tile * Feature/cor 959/dynamic icons (#4361) * Get an icon dynamically * feat: make dynamic icon work including typings * fix: code cleanup * feat: extend type info in icon build * feat: add eye icon Co-authored-by: VWSCoronaDashboard18 <[email protected]> Co-authored-by: VWSCoronaDashboard24 <[email protected]> * 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]> * link fix * rounded corner for icon square, spacing finetuning * Rename menu's from 'actueel' to 'maatregelen' * update variants icon * added menu name * update uppercase typo name * removed old topical page and cleaned up after * updated grid and removed icon from other branch * Rename menu's from 'maatregelen' to 'samenvatting' * Generate icons.md + add IntensiveCareOpnames icon (#4374) * feat: add new intensive-care-opnames icon and icon documentation * feat: add documentation about all icons * feat: add support for new IntensiveCareOpnames icon in schemas * fix: svg configuration for IntensiveCareOpnames * fix: use correct filename for icon * fix: use white bg for icons in icons.md * fix: use white bg for icons in icons.md Co-authored-by: VWSCoronaDashboard24 <[email protected]> * bring removed components back for typechecking * Add menu name change to mutations file * fix: make icons visible on safari * reset grid settings, nice word wrap, bring icon's back * Measurement tile safari fix * Restore minWidth * navigation icon size fix Co-authored-by: MN <[email protected]> Co-authored-by: VWSCoronaDashboard24 <[email protected]> Co-authored-by: AT <[email protected]> Co-authored-by: VWSCoronaDashboard21 <[email protected]>
minvws · Aug 31, 2022 · becd756 · becd756
2 parents 931fe52 + dfa1d26
commit becd756
Show file tree

Hide file tree

Showing 65 changed files with 721 additions and 586 deletions.
diff --git a/packages/app/src/components/anchor-tile.tsx b/packages/app/src/components/anchor-tile.tsx
@@ -3,6 +3,7 @@ import { External as ExternalLinkIcon } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import styled from 'styled-components';
 import { Anchor, Heading } from '~/components/typography';
+import { Box } from '~/components/base';
 import { asResponsiveArray } from '~/style/utils';
 import { Link } from '~/utils/link';
 import { ExternalLink } from './external-link';
@@ -31,26 +32,34 @@ export function AnchorTile({
       </Content>
 
       <LinkContainer>
-        {!external && (
+        {external ? (
+          <ExternalLink href={href}>
+            <Box display="flex" alignItems="center">
+              <IconWrapper>
+                <ExternalLinkIcon />
+              </IconWrapper>
+              {label}
+            </Box>
+          </ExternalLink>
+        ) : (
           <Link href={href} passHref>
             <StyledAnchor>
               <span>{label}</span>
             </StyledAnchor>
           </Link>
         )}
-        {external && (
-          <>
-            <IconContainer>
-              <ExternalLinkIcon />
-            </IconContainer>
-            <ExternalLink href={href}>{label}</ExternalLink>
-          </>
-        )}
       </LinkContainer>
     </Container>
   );
 }
 
+export const IconWrapper = styled.span(
+  css({
+    mr: 2,
+    svg: { width: 24, height: 11, display: 'block', maxWidth: 'initial' },
+  })
+);
+
 const Container = styled.article(
   css({
     display: 'flex',
@@ -74,13 +83,6 @@ const StyledAnchor = styled(Anchor)(
   })
 );
 
-const IconContainer = styled.span(
-  css({
-    mr: 2,
-    svg: { width: 24, height: 24, display: 'block', maxWidth: 'initial' },
-  })
-);
-
 const LinkContainer = styled.div(
   css({
     flexShrink: 1,

diff --git a/packages/app/src/components/aside/menu.tsx b/packages/app/src/components/aside/menu.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { UrlObject } from 'url';
 import chevronUrl from '~/assets/chevron.svg';
 import { Box } from '~/components/base';
-import { Anchor, Heading, Text } from '~/components/typography';
+import { Anchor, Heading } from '~/components/typography';
 import { ExpandedSidebarMap, Layout } from '~/domain/layout/logic/types';
 import { SpaceValue } from '~/style/theme';
 import { asResponsiveArray } from '~/style/utils';
@@ -52,33 +52,19 @@ export function Menu({
 
 export function CategoryMenu({
   title,
-  description,
   children,
+  icon,
 }: {
   children: ReactNode;
   title?: string;
-  description?: string;
+  icon: ReactNode;
 }) {
   return (
     <Box as="li" spacing={2}>
-      {title && (
-        <Box px={3} pt={3}>
-          <Heading
-            level={4}
-            variant="subtitle2"
-            css={css({
-              fontSize: 1,
-            })}
-          >
-            {title}
-          </Heading>
-        </Box>
-      )}
-      {description && (
-        <Box px={3}>
-          <Text css={css({ fontSize: 1, color: 'bodyLight' })}>
-            {description}
-          </Text>
+      {title && icon && (
+        <Box px={2} pt={3} display="flex" alignItems="center">
+          <Icon>{icon}</Icon>
+          <Heading level={5}>{title}</Heading>
         </Box>
       )}
       <Menu>{children}</Menu>
@@ -93,15 +79,15 @@ interface MenuItemLinkProps {
   showArrow?: boolean;
 }
 
-export function MenuItemLink({ href, icon, title }: MenuItemLinkProps) {
+export function MenuItemLink({ href, title }: MenuItemLinkProps) {
   const router = useRouter();
   const breakpoints = useBreakpoints(true);
 
   if (!href) {
     return (
       <li>
         <Unavailable>
-          <AsideTitle icon={icon} title={title} />
+          <AsideTitle title={title} />
         </Unavailable>
       </li>
     );
@@ -116,11 +102,7 @@ export function MenuItemLink({ href, icon, title }: MenuItemLinkProps) {
           isActive={breakpoints.md && isActive}
           aria-current={isActive ? 'page' : undefined}
         >
-          <AsideTitle
-            icon={icon}
-            title={title}
-            showArrow={!breakpoints.md || !isActive}
-          />
+          <AsideTitle title={title} showArrow={!breakpoints.md || !isActive} />
         </StyledAnchor>
       </Link>
     </li>
@@ -145,26 +127,28 @@ const Unavailable = styled.span(
   })
 );
 
-const StyledAnchor = styled(Anchor)<{ isActive: boolean }>((x) =>
+const StyledAnchor = styled(Anchor)<{ isActive: boolean }>((anchorProps) =>
   css({
     p: 2,
+    pl: '3rem',
     display: 'block',
     borderRight: '5px solid transparent',
-    color: x.isActive ? 'blue' : 'black',
+    color: anchorProps.isActive ? 'blue' : 'black',
+    fontWeight: anchorProps.isActive ? 'bold' : 'normal',
     position: 'relative',
-    bg: x.isActive ? 'lightBlue' : 'transparent',
-    borderRightColor: x.isActive ? 'sidebarLinkBorder' : 'transparent',
-
-    '&:hover': {
-      bg: 'offWhite',
-    },
-
-    '&:focus': {
-      bg: '#ebebeb',
+    bg: anchorProps.isActive ? 'lightBlue' : 'transparent',
+    borderRightColor: anchorProps.isActive
+      ? 'sidebarLinkBorder'
+      : 'transparent',
+
+    '&:hover, &:focus': {
+      bg: 'blue',
+      color: 'white',
+      fontWeight: 'bold',
     },
 
     '&::after': {
-      content: x.isActive
+      content: anchorProps.isActive
         ? 'none'
         : asResponsiveArray({ _: 'none', xs: undefined }),
       backgroundImage: `url('${chevronUrl}')`,
@@ -179,3 +163,31 @@ const StyledAnchor = styled(Anchor)<{ isActive: boolean }>((x) =>
     },
   })
 );
+
+const Icon = ({ children }: { children: ReactNode }) => {
+  return (
+    <Box
+      role="img"
+      aria-hidden="true"
+      flex="0 0 auto"
+      display="flex"
+      flexDirection="row"
+      flexWrap="nowrap"
+      justifyContent="center"
+      alignItems="center"
+      padding={0}
+      mr={0}
+      mt="-3px"
+      css={css({
+        width: '2.5rem',
+        height: '2.5rem',
+        svg: {
+          height: '2.25rem',
+          fill: 'currentColor',
+        },
+      })}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/packages/app/src/components/aside/title.tsx b/packages/app/src/components/aside/title.tsx
@@ -18,7 +18,7 @@ type TitleProps = {
  * @param props
  */
 export function AsideTitle(props: TitleProps) {
-  const { icon, title, subtitle, showArrow } = props;
+  const { title, subtitle, showArrow } = props;
 
   return (
     <Box
@@ -28,10 +28,8 @@ export function AsideTitle(props: TitleProps) {
       flexWrap="nowrap"
       alignItems="center"
     >
-      {icon && <Icon>{icon}</Icon>}
-
       <Box width="100%">
-        <Text variant="h5">
+        <Text>
           <span
             css={css({
               display: 'flex',
@@ -43,8 +41,8 @@ export function AsideTitle(props: TitleProps) {
             {title}
             {showArrow && (
               <ChevronRight
-                width={10}
-                height={14}
+                width={16}
+                height={20}
                 css={css({ color: 'blue' })}
               />
             )}
@@ -55,31 +53,3 @@ export function AsideTitle(props: TitleProps) {
     </Box>
   );
 }
-
-function Icon({ children }: { children: ReactNode }) {
-  return (
-    <Box
-      role="img"
-      aria-hidden="true"
-      flex="0 0 auto"
-      display="flex"
-      flexDirection="row"
-      flexWrap="nowrap"
-      justifyContent="center"
-      alignItems="center"
-      padding={0}
-      mr={0}
-      mt="-3px"
-      css={css({
-        width: '2.5rem',
-        height: '2.5rem',
-        svg: {
-          height: '2.25rem',
-          fill: 'currentColor',
-        },
-      })}
-    >
-      {children}
-    </Box>
-  );
-}