COR-1312 make link optional and remove right side (#4670)

* fix: make the link optional. * feat: added max text width * fix: PR feedback * fix: PR Feedback * fix: right css value
minvws · Feb 25, 2023 · bae67bd · bae67bd
1 parent 45bbdd6
commit bae67bd
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 67 deletions.
diff --git a/packages/app/src/components/anchor-tile.tsx b/packages/app/src/components/anchor-tile.tsx
@@ -1,13 +1,11 @@
 import { colors } from '@corona-dashboard/common';
 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 { AnchorProps, Heading } from '~/components/typography';
 import { Box } from '~/components/base';
-import { asResponsiveArray } from '~/style/utils';
 import { Link } from '~/utils/link';
 import { ExternalLink } from './external-link';
-import { mediaQueries, space } from '~/style/theme';
+import { mediaQueries, space, sizes } from '~/style/theme';
 
 interface AnchorTileProps {
   title: string;
@@ -26,34 +24,40 @@ export function AnchorTile({ title, href, label, children, external = false }: A
         {children}
       </Content>
 
-      <LinkContainer>
-        {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>
-        )}
-      </LinkContainer>
+      {href && (
+        <LinkContainer>
+          {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>
+          )}
+        </LinkContainer>
+      )}
     </Container>
   );
 }
 
-export const IconWrapper = styled.span(
-  css({
-    marginRight: space[2],
-    svg: { width: '24px', height: '11px', display: 'block', maxWidth: 'initial' },
-  })
-);
+export const IconWrapper = styled.span`
+  margin-right: ${space[2]};
+
+  svg {
+    width: 24px;
+    height: 11px;
+    display: block;
+    max-width: initial;
+  }
+`;
 
 const Container = styled.article`
   border-top: 2px solid ${colors.gray2};
@@ -70,36 +74,38 @@ const Container = styled.article`
   }
 `;
 
-const Content = styled.div(
-  css({
-    flexGrow: 1,
-    flex: '1 1 70%',
-  })
-);
+const Content = styled.div`
+  flex-grow: 1;
+  flex: 1 1 70%;
+  max-width: ${sizes.maxWidthText}px;
+`;
 
-const StyledAnchor = styled(Anchor)(
-  css({
-    display: 'flex',
-  })
-);
+const StyledAnchor = styled.a<AnchorProps>`
+  display: flex;
+`;
 
-const LinkContainer = styled.div(
-  css({
-    flexShrink: 1,
-    flex: '1 1 30%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: asResponsiveArray({ _: 'center', md: undefined }),
-    border: 0,
-    borderTop: asResponsiveArray({
-      _: `1px solid ${colors.gray3}`,
-      lg: 'none',
-    }),
-    borderLeft: asResponsiveArray({ lg: '1px solid' }),
-    borderLeftColor: asResponsiveArray({ lg: colors.gray3 }),
-    paddingTop: asResponsiveArray({ _: space[3], lg: '0' }),
-    paddingLeft: asResponsiveArray({ lg: space[4] }),
-    marginLeft: asResponsiveArray({ lg: space[4] }),
-    marginTop: asResponsiveArray({ _: space[3], md: '0' }),
-  })
-);
+const LinkContainer = styled.div`
+  flex-shrink: 1;
+  flex: 1 1 30%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-top: 1px solid ${colors.gray3};
+  margin-top: ${space[3]};
+  padding-top: ${space[3]};
+
+  @media ${mediaQueries.md} {
+    margin-top: 0;
+    justify-content: normal;
+  }
+
+  @media ${mediaQueries.lg} {
+    border-top: none;
+    border-left: 1px solid;
+    border-left-color: ${colors.gray3};
+    padding-top: 0;
+    padding-left: ${space[4]};
+    margin-left: ${space[4]};
+  }
+`;
diff --git a/packages/app/src/components/index.ts b/packages/app/src/components/index.ts
@@ -22,7 +22,6 @@ export { KpiTile } from './kpi-tile';
 export { KpiValue } from './kpi-value';
 export { TwoKpiSection } from './two-kpi-section';
 export { LinkWithIcon } from './link-with-icon';
-export { MaxWidth } from './max-width';
 export { ChoroplethLegenda } from './choropleth-legenda';
 export { SEOHead } from './seo-head';
 export { PageKpi } from './page-kpi';

diff --git a/packages/app/src/components/max-width.tsx b/packages/app/src/components/max-width.tsx
@@ -1,11 +1,11 @@
 import css from '@styled-system/css';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
-import theme from '~/style/theme';
+import { sizes } from '~/style/theme';
 
 export const MaxWidth = styled(Box)(
   css({
-    maxWidth: theme.sizes.maxWidth,
+    maxWidth: sizes.maxWidth,
     margin: '0 auto',
   })
 );
diff --git a/packages/app/src/components/notification-banner.tsx b/packages/app/src/components/notification-banner.tsx
@@ -6,7 +6,7 @@ import { MaxWidth } from '~/components/max-width';
 import { useCollapsible } from '~/utils/use-collapsible';
 import { InlineText, BoldText } from './typography';
 import { colors } from '@corona-dashboard/common';
-import theme, { space } from '~/style/theme';
+import { space, sizes } from '~/style/theme';
 
 interface NotificationBannerProps {
   title: string;
@@ -23,7 +23,7 @@ export function NotificationBanner({ title, description }: NotificationBannerPro
   return (
     <Box width="100%" backgroundColor={colors.gray2}>
       <MaxWidth paddingY={space[3]}>
-        <Box paddingX={{ _: space[3], sm: space[4] }} maxWidth={theme.sizes.maxWidthSiteWarning} display="flex" alignItems="flex-start" spacingHorizontal={3}>
+        <Box paddingX={{ _: space[3], sm: space[4] }} maxWidth={sizes.maxWidthSiteWarning} display="flex" alignItems="flex-start" spacingHorizontal={3}>
           <Box display="flex" minWidth="1.6rem" minHeight="1.6rem">
             <Warning />
           </Box>

diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -4,7 +4,7 @@ import { css } from '@styled-system/css';
 import { GetStaticPropsContext } from 'next';
 import styled from 'styled-components';
 import { isPresent } from 'ts-is-present';
-import { MaxWidth } from '~/components';
+import { MaxWidth } from '~/components/max-width';
 import { Box, Spacer } from '~/components/base';
 import { RichContent } from '~/components/cms/rich-content';
 import { CollapsibleSection } from '~/components/collapsible';

diff --git a/packages/app/src/style/theme.ts b/packages/app/src/style/theme.ts
@@ -94,7 +94,7 @@ export const shadows = {
   tooltip: '0px 2px 12px rgba(0, 0, 0, 0.1)',
 } as const;
 
-const sizes = {
+export const sizes = {
   maxWidth: 1400,
   infoWidth: 1000,
   maxWidthSiteWarning: 930,
@@ -113,7 +113,6 @@ const theme = {
   colors,
   radii,
   shadows,
-  sizes,
 } as const;
 
 type Theme = typeof theme;