Merge pull request #4981 from minvws/release/2.87.0

release/2.87.0
minvws · Feb 13, 2024 · d3033ab · d3033ab
2 parents ee71e0b + 9cad253
commit d3033ab
Show file tree

Hide file tree

Showing 19 changed files with 492 additions and 159 deletions.
diff --git a/packages/app/src/components/age-demographic/age-demographic-chart.tsx b/packages/app/src/components/age-demographic/age-demographic-chart.tsx
@@ -1,20 +1,20 @@
-import { Color, colors } from '@corona-dashboard/common';
+import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
+import { AgeDemographicChartText, AgeDemographicDefaultValue } from './types';
+import { AgeDemographicCoordinates } from './age-demographic-coordinates';
 import { AxisBottom, TickRendererProps } from '@visx/axis';
+import { Bar } from '@visx/shape';
+import { Box } from '~/components/base';
+import { Color, colors } from '@corona-dashboard/common';
+import { fontSizes, fontWeights, space } from '~/style/theme';
+import { formatAgeGroupRange } from './utils';
 import { GridColumns } from '@visx/grid';
 import { Group } from '@visx/group';
+import { KeyboardEvent, MouseEvent } from 'react';
 import { PatternLines } from '@visx/pattern';
-import { Bar } from '@visx/shape';
+import { replaceVariablesInText } from '~/utils';
+import { Text } from '~/components/typography';
 import { Text as VisxText } from '@visx/text';
-import { KeyboardEvent, MouseEvent } from 'react';
 import styled from 'styled-components';
-import { Box } from '~/components/base';
-import { Text } from '~/components/typography';
-import { fontSizes, fontWeights, space } from '~/style/theme';
-import { replaceVariablesInText } from '~/utils';
-import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
-import { AgeDemographicCoordinates } from './age-demographic-coordinates';
-import { AgeDemographicChartText, AgeDemographicDefaultValue } from './types';
-import { formatAgeGroupRange } from './utils';
 
 export const AGE_GROUP_TOOLTIP_WIDTH = 340;
 
@@ -168,8 +168,8 @@ export function AgeDemographicChart<T extends AgeDemographicDefaultValue>({
           numTicks={numTicks}
           tickFormat={formatValue}
           tickComponent={TickValue}
-          hideTicks
           hideAxisLine
+          tickStroke={colors.gray3}
         />
 
         <AxisBottom
@@ -179,8 +179,8 @@ export function AgeDemographicChart<T extends AgeDemographicDefaultValue>({
           numTicks={numTicks}
           tickFormat={formatValue}
           tickComponent={TickValue}
-          hideTicks
           hideAxisLine
+          tickStroke={colors.gray3}
         />
       </StyledSVG>
 

diff --git a/packages/app/src/components/aside/components/CategoryDropdown.tsx b/packages/app/src/components/aside/components/CategoryDropdown.tsx
@@ -0,0 +1,84 @@
+import { Box } from '~/components/base';
+import { colors } from '@corona-dashboard/common';
+import { mediaQueries, radii, space } from '~/style/theme';
+import styled from 'styled-components';
+
+export const CategoryDropdownRoot = styled(Box)`
+  @media ${mediaQueries.xl} {
+    margin: 0;
+  }
+  position: relative;
+  box-shadow: ${space[1]} 0 0 ${space[4]} ${colors.white};
+  margin: 0 ${space[2]};
+`;
+
+export const CategoryDropdown = styled(Box)`
+  @media ${mediaQueries.xl} {  
+    padding: ${space[2]} ${space[3]} ${space[2]} ${space[2]};
+    margin: 0;
+  }
+  &:hover {
+    cursor: pointer;
+    border-color: ${colors.blue8};
+  },
+  &:focus {
+    background: ${colors.white};
+    color: ${colors.black};
+  }
+  &:hover, &:focus {
+      background: ${colors.gray1};
+  },
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: ${space[2]};
+  padding: ${space[2]} ${space[1]} ${space[2]} ${space[1]};
+  border-color: ${colors.gray3};
+  border-style: solid;
+  border-width: 1px;
+  border-radius: ${radii[1]}px;
+  user-select: none;
+  transition: 0.1s background-color;
+  &[aria-expanded=true] {
+    background: ${colors.white};
+    color: ${colors.black};
+    border-radius: ${radii[1]}px ${radii[1]}px 0 0;
+    border-color: ${colors.blue8};
+    border-bottom-color: ${colors.white};
+    &:hover, &:focus {
+      border-bottom-color: ${colors.white};
+    },
+  }
+`;
+
+export const CategorySelectBox = styled(Box)`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+export const CategoryListBox = styled(Box)`
+  background: white;
+  width: 100%;
+  overflow-y: clip;
+  border-color: ${colors.blue8};
+  border-style: solid;
+  border-width: 1px;
+  border-top-width: 0;
+  display: none;
+  ${CategoryDropdown}[aria-expanded=true] + & {
+    display: block;
+    border-radius: 0 0 ${radii[1]}px ${radii[1]}px;
+  }
+`;
+
+export const CategoryListBoxOption = styled(Box)`
+  cursor: default;
+  a {
+    @media ${mediaQueries.xl} {
+      padding: ${space[2]} ${space[2]} ${space[2]} 3rem;
+    }
+    padding: ${space[2]} 0 ${space[2]} ${space[4]};
+  }
+`;
diff --git a/packages/app/src/components/aside/menu.tsx b/packages/app/src/components/aside/menu.tsx
@@ -1,21 +1,22 @@
 import { Anchor, Heading } from '~/components/typography';
+import { ArchivedPath, useArchivedPaths } from '~/utils/use-archived-paths';
 import { AsideTitle } from './title';
 import { asResponsiveArray } from '~/style/utils';
 import { Box } from '~/components/base';
+import chevronUrl from '~/assets/chevron.svg';
+import css from '@styled-system/css';
+import { CategoryDropdown, CategoryDropdownRoot, CategoryListBox, CategoryListBoxOption, CategorySelectBox } from '~/components/aside/components/CategoryDropdown';
 import { colors } from '@corona-dashboard/common';
 import { ExpandedSidebarMap, Layout } from '~/domain/layout/logic/types';
 import { Link } from '~/utils/link';
 import { NextRouter, useRouter } from 'next/router';
 import { ReactNode } from 'react';
 import { resolveHref } from 'next/dist/shared/lib/router/router';
 import { space, SpaceValue } from '~/style/theme';
+import styled from 'styled-components';
 import { UrlObject } from 'url';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { useCollapsible } from '~/utils/use-collapsible';
-import chevronUrl from '~/assets/chevron.svg';
-import css from '@styled-system/css';
-import styled from 'styled-components';
-import { ArchivedPath, useArchivedPaths } from '~/utils/use-archived-paths';
 
 type Url = UrlObject | string;
 
@@ -58,25 +59,24 @@ export function Menu({ children, spacing }: { children: ReactNode; spacing?: Spa
 export function CollapsibleCategoryMenu({ title, children, icon }: { children: ReactNode; title?: string; icon: ReactNode; key: string }) {
   const router = useRouter();
   const archivedPaths = useArchivedPaths();
-  const collapsible = useCollapsible({ isOpen: isCurrentRouteArchivedPage(router, archivedPaths) });
+  const { button: collapsibleButton, content: collapsibleContent, chevron: collapseChevron } = useCollapsible({ isOpen: isCurrentRouteArchivedPage(router, archivedPaths) });
+
   return (
-    <Box as="li" spacing={2} borderTop={`1px solid ${colors.gray2}`}>
-      {title && icon && (
-        <>
-          <Box display="flex" flexDirection="row" flexWrap="nowrap" alignItems="center">
-            <Box width="100%">
-              <Box paddingX={space[2]} paddingTop={space[3]} display="flex" justifyContent="space-between" alignItems="center">
-                <Box display="flex" alignItems="center">
-                  <Icon>{icon}</Icon>
-                  <Heading level={5}>{title}</Heading>
-                </Box>
-                <Box pr={space[1]}>{collapsible.button()}</Box>
-              </Box>
-            </Box>
-          </Box>
-          {collapsible.content(<Menu>{children}</Menu>)}
-        </>
-      )}
+    <Box as="li" mt={space[4]} mb={space[4]}>
+      <CategoryDropdownRoot>
+        {title &&
+          icon &&
+          collapsibleButton(
+            <CategoryDropdown>
+              <CategorySelectBox>
+                <Icon>{icon}</Icon>
+                <Heading level={5}>{title}</Heading>
+              </CategorySelectBox>
+              {collapseChevron}
+            </CategoryDropdown>
+          )}
+        <CategoryListBox as="ul">{collapsibleContent(<CategoryListBoxOption>{children}</CategoryListBoxOption>)}</CategoryListBox>
+      </CategoryDropdownRoot>
     </Box>
   );
 }

diff --git a/packages/app/src/components/stacked-chart/stacked-chart.tsx b/packages/app/src/components/stacked-chart/stacked-chart.tsx
@@ -2,36 +2,36 @@
  * Code loosely based on
  * https://codesandbox.io/s/github/airbnb/visx/tree/master/packages/visx-demo/src/sandboxes/visx-barstack
  */
-import { colors, getValuesInTimeframe, TimeframeOption, TimestampedValue } from '@corona-dashboard/common';
-import css from '@styled-system/css';
 import { AxisBottom, AxisLeft, TickFormatter } from '@visx/axis';
+import { BarStack, Line } from '@visx/shape';
+import { colors, getValuesInTimeframe, TimeframeOption, TimestampedValue } from '@corona-dashboard/common';
 import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { BarStack, Line } from '@visx/shape';
 import { Text } from '@visx/text';
+import css from '@styled-system/css';
 /**
  * useTooltipInPortal will not work for IE11 at the moment. See this issue
  * https://github.com/airbnb/visx/issues/904
  */
-import { useTooltip } from '@visx/tooltip';
-import { isEmpty } from 'lodash';
-import { MouseEvent, TouchEvent, useCallback, useMemo } from 'react';
-import { isDefined } from 'ts-is-present';
+import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
 import { Box, Spacer } from '~/components/base';
+import { calculateSeriesMaximum, getSeriesData, getWeekInfo, SeriesValue } from './logic';
+import { DateSpanMarker, Overlay, Tooltip, TooltipData, TooltipFormatter } from '../time-series-chart/components';
+import { isDefined } from 'ts-is-present';
+import { isEmpty } from 'lodash';
 import { Legend } from '~/components/legend';
-import { ValueAnnotation } from '~/components/value-annotation';
-import { useIntl } from '~/intl';
+import { MouseEvent, TouchEvent, useCallback, useMemo } from 'react';
 import { space } from '~/style/theme';
-import { useCurrentDate } from '~/utils/current-date-context';
-import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
+import { TooltipSeriesList } from '../time-series-chart/components/tooltip/tooltip-series-list';
 import { useBreakpoints } from '~/utils/use-breakpoints';
+import { useCurrentDate } from '~/utils/current-date-context';
+import { useIntl } from '~/intl';
 import { useIsMountedRef } from '~/utils/use-is-mounted-ref';
 import { useResizeObserver } from '~/utils/use-resize-observer';
 import { useResponsiveContainer } from '~/utils/use-responsive-container';
-import { DateSpanMarker, Overlay, Tooltip, TooltipData, TooltipFormatter } from '../time-series-chart/components';
-import { TooltipSeriesList } from '../time-series-chart/components/tooltip/tooltip-series-list';
-import { calculateSeriesMaximum, getSeriesData, getWeekInfo, SeriesValue } from './logic';
+import { useTooltip } from '@visx/tooltip';
+import { ValueAnnotation } from '~/components/value-annotation';
 
 type AnyTickFormatter = (value: any) => string;
 
@@ -374,7 +374,7 @@ export function StackedChart<T extends TimestampedValue>(props: StackedChartProp
                       </>
                     )
                   }
-                  hideTicks
+                  tickStroke={colors.gray3}
                 />
                 <g ref={yAxisRef}>
                   <AxisLeft