From bae67bde04434d9d5f970b4210034540994c5dd2 Mon Sep 17 00:00:00 2001 From: J <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Sat, 25 Feb 2023 11:27:43 +0100 Subject: [PATCH] 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 --- packages/app/src/components/anchor-tile.tsx | 124 +++++++++--------- packages/app/src/components/index.ts | 1 - packages/app/src/components/max-width.tsx | 4 +- .../src/components/notification-banner.tsx | 4 +- packages/app/src/pages/index.tsx | 2 +- packages/app/src/style/theme.ts | 3 +- 6 files changed, 71 insertions(+), 67 deletions(-) diff --git a/packages/app/src/components/anchor-tile.tsx b/packages/app/src/components/anchor-tile.tsx index 9bccd2ca86..888312ca69 100644 --- 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} - - {external ? ( - - - - - - {label} - - - ) : ( - - - {label} - - - )} - + {href && ( + + {external ? ( + + + + + + {label} + + + ) : ( + + + {label} + + + )} + + )} ); } -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` + 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 index 05245893f6..8bd43492a6 100644 --- 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 index 0c7c6dd47c..d0e146e15d 100644 --- 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 index 6cd65df57b..080adc7bc3 100644 --- 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 ( - + diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index e442eb47ab..2365cd5e6c 100644 --- 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 index 36764083f5..a34fa242a3 100644 --- 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;