Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

release/2.63.0 #4529

Merged
merged 17 commits into from
Dec 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4293098
Feature/COR-1088-archive-button-styling (#4508)
Amber-Taal-Work Nov 28, 2022
4d38aa1
Feature/COR-1068-change-border-color-measure-tile (#4509)
Amber-Taal-Work Nov 28, 2022
af34b2f
chore: update and cleanup keys and data structure (#4515)
hasan-ozaynaci Nov 28, 2022
d6bfed6
Bugfix/cor 1067 fullscreen modal close button is not aligned properly…
APW26 Nov 29, 2022
0902704
bugfix(general): updated CollapsibleSection component styles so that …
VWSCoronaDashboard26 Nov 29, 2022
3d31bcb
fix: correct mobile icon size (#4518)
Amber-Taal-Work Nov 30, 2022
56cdee0
bugfix(general): updated general typography styles to always make anc…
VWSCoronaDashboard26 Nov 30, 2022
288cd30
feat: Add new Sanity field for collection title (#4521)
hasan-ozaynaci Nov 30, 2022
dfb6511
feat(README) update and reorder docs (#4520)
hasan-ozaynaci Nov 30, 2022
16d9c5c
feature/COR-694-choropleth-clickable-tooltip (#4519)
VWSCoronaDashboard26 Dec 1, 2022
88f5b49
feat: COR-1087: Applied a new button design (#4511)
DariaKwork Dec 1, 2022
5f8fa6f
Added middelOfDay integration (#4524)
Jorrik-Klijnsma-Work Dec 5, 2022
2d77492
bugfix/COR-1001-scaling-tooltip-width (#4523)
Amber-Taal-Work Dec 5, 2022
855e52c
Feature/COR-1149 adjust hoverstate styling of choropleth (#4522)
APW26 Dec 6, 2022
ba45ba2
Feature/COR-1178: Change trend icons kpi tile (#4527)
APW26 Dec 7, 2022
e36e85b
Merge branch 'develop' into release/2.63.0
VWSCoronaDashboard26 Dec 8, 2022
dc6331b
feat(release): updated TrendIconWithIntensity to have an aria-label;
VWSCoronaDashboard26 Dec 8, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ documentation of the [app](/packages/app/README.md) and (optionally the)
Without describing in detail all the rules we tend to follow here are some worth
noting:

#### General

- All filenames are written in kebab-case.
- We use named exports where possible. They improve typing and help refactoring.
- We aim to stop using barrel files (using an index file in a folder to bundle exports for the consuming code).
Expand Down Expand Up @@ -91,12 +93,21 @@ noting:
- We avoid using `boolean && doSomething();` inside the component's JavaScript logic, but do use it inside the component's JSX (`{boolean && ( ... )}`) to conditionally render (parts of) the component.
- We avoid unnecessary short-hand variable names like
`arr` for array or `i` for index or `acc` for a `reduce` accumulator.

- Completely separate Javascript logic from HTML/JSX. This means also remove maps from the JSX. Additionally, if you have nested maps extract them into components passing the required data to map to the component.
- We prefer early returns. If statements should be on multiple lines, so no single line if statements.

#### Styling
- We write Styled Components using its OOTB tagged template literal functions instead of using an additional layer of the Styled System's `css()` method. This method improves readability, makes code easier to understand and sticks to the fundamentals of CSS. This method still allows for usage of Styled System's theme definitions, yet removes a dependency on the actual package.
- We included a `Styled`-prefix when creating Styled Components. This makes them easily distinguishable from other components. Examples would be `StyledInput` or `StyledTile`.
- We avoid using magic numbers in code, be it logic, JSX or styles. Magic numbers are often derived from the theme defined by Styled System and resolve to properties such as spacing and font-sizes, but are unclear on its own. Instead, we import the desired property and refer to the index in that properties array. An example would be `padding: 3` (undesired) vs `padding: space[3]` (desired).

#### GIT

- We do not have a hard preference or requirement for using `git rebase` or `git merge`. Developers should follow what works best for them, but it should be noted that both methods are allowed and actively used in this project.
- We do not have a hard preference or requirement for squashing a multitude of git commits, but it can be useful to apply this when creating a pull request. This action should be used on an 'as-needed basis': if a pull request grows large due to a large amount of commits, it might improve reviewability when multiple commits are squashed. It should be noted that pull requests are squashed when merged, aside from pull requests to `master`. This is to keep a clear view of features and fixes that were merged as part of a release.
- Continuing on the above: we should write a comprehensive commit message when squash merging a pull request. This message should be a (filtered) summary of the commits on the branch.

- We use the following branch names:
- `feature/COR-XXX-descriptive-name-of-ticket-branch` for features
- `bugfix/COR-XXX-descriptive-name-of-ticket-branch` for bug fixes
Expand Down
1 change: 1 addition & 0 deletions packages/app/schema/topical/icon.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"AlcoholVerkoop",
"Archive",
"Arrow",
"ArrowWithIntensity",
"Arts",
"Avondklok",
"BarChart",
Expand Down
75 changes: 29 additions & 46 deletions packages/app/src/components/article-detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from 'styled-components';
import { ArrowIconLeft } from '~/components/arrow-icon';
import { Box } from '~/components/base';
import { ContentBlock } from '~/components/cms/content-block';
import { Heading, InlineText } from '~/components/typography';
import { Heading, InlineText, Anchor } from '~/components/typography';
import { ArticleCategoryType } from '~/domain/topical/common/categories';
import { useIntl } from '~/intl';
import { SiteText } from '~/locale';
Expand All @@ -15,6 +15,8 @@ import { RichContent } from './cms/rich-content';
import { LinkWithIcon } from './link-with-icon';
import { PublicationDate } from './publication-date';
import { useBreakpoints } from '~/utils/use-breakpoints';
import { colors } from '@corona-dashboard/common';
import { space } from '~/style/theme';
interface ArticleDetailProps {
article: Article;
text: SiteText['pages']['topical_page']['shared'];
Expand Down Expand Up @@ -50,29 +52,17 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
<RichContent blocks={article.intro} contentWrapper={ContentBlock} />
</Box>

<ContentImage
node={article.cover}
contentWrapper={ContentBlock}
sizes={imageSizes}
/>
<ContentImage node={article.cover} contentWrapper={ContentBlock} sizes={imageSizes} />
</ContentBlock>
{!breakpoints.xs
? article.imageMobile && (
<Box mt={4}>
<ContentImage
node={article.imageMobile}
contentWrapper={ContentBlock}
sizes={imageSizes}
/>
<ContentImage node={article.imageMobile} contentWrapper={ContentBlock} sizes={imageSizes} />
</Box>
)
: article.imageDesktop && (
<Box mt={4}>
<ContentImage
node={article.imageDesktop}
contentWrapper={ContentBlock}
sizes={imageSizes}
/>
<ContentImage node={article.imageDesktop} contentWrapper={ContentBlock} sizes={imageSizes} />
</Box>
)}
{!!article.content?.length && (
Expand All @@ -93,9 +83,7 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
{article.categories && (
<ContentBlock>
<Box pb={2} pt={4}>
<InlineText color="gray7">
{text.secties.artikelen.tags}
</InlineText>
<InlineText color="gray7">{text.secties.artikelen.tags}</InlineText>
</Box>
<Box
as="ul"
Expand All @@ -117,13 +105,7 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
}}
passHref={true}
>
<TagAnchor>
{
text.secties.artikelen.categorie_filters[
item as ArticleCategoryType
]
}
</TagAnchor>
<StyledTagAnchor>{text.secties.artikelen.categorie_filters[item as ArticleCategoryType]}</StyledTagAnchor>
</Link>
</li>
))}
Expand All @@ -134,25 +116,26 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
);
}

const TagAnchor = styled.a(
css({
display: 'block',
border: '2px solid transparent',
mb: 3,
px: 3,
py: 2,
backgroundColor: 'blue3',
color: 'blue8',
textDecoration: 'none',
transition: '0.1s border-color',
const StyledTagAnchor = styled(Anchor)`
border-radius: 5px;
border: 2px solid ${colors.gray4};
color: ${colors.black};
display: block;
margin-bottom: ${space[3]};
padding: ${space[2]} ${space[3]};

'&:hover': {
borderColor: 'blue8',
},
&:focus:focus-visible {
outline: 2px dotted ${colors.blue8};
}

'&:focus': {
outline: '2px dotted',
outlineColor: 'blue8',
},
})
);
&:hover {
background: ${colors.blue8};
border: 2px solid ${colors.blue8};
color: ${colors.white};
text-shadow: 0.5px 0px 0px ${colors.white}, -0.5px 0px 0px ${colors.white};

&:focus-visible {
outline: 2px dotted ${colors.magenta3};
}
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import type { AnchorEventHandler } from './choropleth-map';

Konva.pixelRatio = typeof window !== 'undefined' ? Math.min(window.devicePixelRatio, 2) : 1;

export type CanvasChoroplethMapProps = {
export interface CanvasChoroplethMapProps {
anchorEventHandlers: AnchorEventHandler;
annotations: AccessibilityAnnotations;
choroplethFeatures: ChoroplethFeatures;
Expand All @@ -33,7 +33,7 @@ export type CanvasChoroplethMapProps = {
mapProjection: () => GeoProjection;
tooltipTrigger: ChoroplethTooltipHandlers[2];
width: number;
};
}

/**
* This is one transparent pixel encoded in a dataUrl. This is used for the image overlay on top of the canvas that
Expand Down Expand Up @@ -181,12 +181,12 @@ export const CanvasChoroplethMap = (props: CanvasChoroplethMapProps) => {
);
};

type HighlightedFeatureProps = {
interface HighlightedFeatureProps {
feature: [number, number][][] | undefined;
featureProps: FeatureProps;
code: string | undefined;
hoverCode: string | undefined;
};
}

const HighlightedFeature = memo((props: HighlightedFeatureProps) => {
const { feature, featureProps, code, hoverCode } = props;
Expand All @@ -212,13 +212,13 @@ const HighlightedFeature = memo((props: HighlightedFeatureProps) => {
);
});

type HoveredFeatureProps = {
interface HoveredFeatureProps {
hoveredRef: RefObject<Konva.Group>;
hover: [number, number][][] | undefined;
hoverCode: string | undefined;
featureProps: FeatureProps;
isKeyboardActive?: boolean;
};
}

const HoveredFeature = memo((props: HoveredFeatureProps) => {
const { hoveredRef, hover, hoverCode, featureProps, isKeyboardActive } = props;
Expand All @@ -227,30 +227,58 @@ const HoveredFeature = memo((props: HoveredFeatureProps) => {
return null;
}

/**
* The code in the condition below is a workaround.
*
* This is required as for some reason, the water bodies also get rendered as a Feature (you can see another fix for this in the
* Features component below). As a consequence, when making the fix introduced in COR-1149 which required adding an additional
* line to the HoveredFeature, the water bodies ended up receiving the same fill colour as the land around them and thereby masking
* the white water body.
*
* To fix this, there are now two maps iterating over two arrays for Zeeland. One represents land and the other, water.
*/
let landCoords: [number, number][][] = [...hover];
let waterCoords: [number, number][][] | undefined;
if (hoverCode === 'VR19') {
landCoords = hover.filter((_, index) => index === 0 || index === 5);
waterCoords = hover.filter((_, index) => !(index === 0 || index === 5));
}

return (
<Layer listening={false}>
<Group ref={hoveredRef} listening={false}>
{hover.map((x, i) => (
<Line
listening={false}
key={i}
x={0}
y={0}
points={x.flat()}
strokeWidth={featureProps.hover.strokeWidth(hoverCode, true)}
closed
stroke={featureProps.hover.stroke(hoverCode, true, isKeyboardActive)}
/>
{landCoords.map((coordinates, index) => (
<>
<Line
listening={false}
key={index}
x={0}
y={0}
points={coordinates.flat()}
strokeWidth={featureProps.hover.strokeWidth(hoverCode, true)}
closed
stroke={featureProps.hover.stroke(hoverCode, true, isKeyboardActive)}
shadowColor={colors.black}
shadowOpacity={0.5}
shadowBlur={6}
shadowOffset={{ x: 0, y: 3 }}
/>
{/* The additional line is used as an overlay on the original to make it seem like the stroke on the original line is on the outside */}
<Line key={`hover-${index}`} x={0} y={0} points={coordinates.flat()} closed fill={featureProps.hover.fill(hoverCode, true)} />
</>
))}
{waterCoords?.map((coordinates, index) => (
<Line listening={false} key={index} x={0} y={0} points={coordinates.flat()} closed stroke={colors.transparent} fill={colors.white} />
))}
</Group>
</Layer>
);
});

type OutlinesProps = {
interface OutlinesProps {
geoInfo: ProjectedGeoInfo[];
featureProps: FeatureProps;
};
}

const Outlines = memo((props: OutlinesProps) => {
const { geoInfo, featureProps } = props;
Expand All @@ -276,11 +304,11 @@ const Outlines = memo((props: OutlinesProps) => {
);
});

type FeaturesProps = {
interface FeaturesProps {
geoInfo: ProjectedGeoInfo[];
featureProps: FeatureProps;
children: React.ReactNode;
};
}

const Features = memo((props: FeaturesProps) => {
const { geoInfo, featureProps, children } = props;
Expand Down Expand Up @@ -336,7 +364,7 @@ const Features = memo((props: FeaturesProps) => {
);
});

type AreaMapProps = {
interface AreaMapProps {
isTabInteractive: boolean;
geoInfo: ProjectedGeoInfo[];
getLink?: (code: string) => string;
Expand All @@ -347,7 +375,7 @@ type AreaMapProps = {
handleMouseOver: (event: MouseEvent<HTMLElement>) => void;
height: number;
width: number;
};
}

type GeoInfoGroup = {
code: string;
Expand Down Expand Up @@ -383,6 +411,7 @@ function AreaMap(props: AreaMapProps) {
<area
style={{
cursor: isDefined(getLink) ? 'pointer' : undefined,
outline: 'none',
}}
tabIndex={index === 0 ? 2 : -1}
aria-label={getFeatureName(geoInfoGroup.code)}
Expand Down
Loading