From ba45ba255c0fc146a4801e334bdef16c6f52ee64 Mon Sep 17 00:00:00 2001 From: AP <116002914+VWSCoronaDashboard28@users.noreply.github.com> Date: Wed, 7 Dec 2022 10:09:25 +0100 Subject: [PATCH] Feature/COR-1178: Change trend icons kpi tile (#4527) * feat(theme-tiles): Adds a new field to select the intensity for the trend icon. * feat(theme-tiles): Adds a new field to the topical structure query and changes double quotes to single quotes. * feat(KPI-tiles): Adjusts the trend icon component to render out a new icon for the homepage which takes intensity level into consideration. Co-authored-by: VWSCoronaDashboard26 VWSCoronaDashboard26@users.noreply.github.com * feat(KPI-tiles): Updates component name, adjusts styling, adds a comment. * feat(KPI-tiles): PR feedback: Added a comment, refactored styling, changed sanity labels. * feat(KPI-tiles): Remove no stroke comment and remove stroke property from intensity level 3. --- packages/app/schema/topical/icon.json | 1 + packages/app/src/components/trend-icon.tsx | 65 ++++++++++++++++--- .../topical/components/topical-tile.tsx | 15 +---- packages/app/src/domain/topical/types.ts | 1 + .../queries/get-topical-structure-query.ts | 27 ++++---- .../cms/src/schemas/topical/trend-icon.ts | 15 +++++ packages/icons/icons.md | 1 + packages/icons/src/icon-name2filename.ts | 2 + .../icons/src/svg/arrow_with_intensity.svg | 27 ++++++++ 9 files changed, 120 insertions(+), 34 deletions(-) create mode 100644 packages/icons/src/svg/arrow_with_intensity.svg diff --git a/packages/app/schema/topical/icon.json b/packages/app/schema/topical/icon.json index 9af0334a15..36b96d0c0e 100644 --- a/packages/app/schema/topical/icon.json +++ b/packages/app/schema/topical/icon.json @@ -7,6 +7,7 @@ "AlcoholVerkoop", "Archive", "Arrow", + "ArrowWithIntensity", "Arts", "Avondklok", "BarChart", diff --git a/packages/app/src/components/trend-icon.tsx b/packages/app/src/components/trend-icon.tsx index 27d430de4b..fb51f19d53 100644 --- a/packages/app/src/components/trend-icon.tsx +++ b/packages/app/src/components/trend-icon.tsx @@ -1,33 +1,82 @@ +import { colors } from '@corona-dashboard/common'; +import { Down, Dot, Up, ArrowWithIntensity } from '@corona-dashboard/icons'; +import styled from 'styled-components'; import { useIntl } from '~/intl'; -import { Down, Dot, Up } from '@corona-dashboard/icons'; +import { space } from '~/style/theme'; export enum TrendDirection { UP, DOWN, NEUTRAL, } + interface TrendIconProps { trendDirection: TrendDirection; + intensity?: number | null; + color?: string | null; ariaLabel?: string; } -export const TrendIcon = ({ trendDirection, ariaLabel }: TrendIconProps) => { +export const TrendIcon = ({ trendDirection, ariaLabel, intensity = null, color = null }: TrendIconProps) => { const { commonTexts } = useIntl(); - const TrendLabelUp = ariaLabel || commonTexts.accessibility.visual_context_labels.up_trend_label; - const TrendLabelDown = ariaLabel || commonTexts.accessibility.visual_context_labels.down_trend_label; - const TrendLabelNeutral = ariaLabel || commonTexts.accessibility.visual_context_labels.neutral_trend_label; + const trendLabels: { [key: string]: string } = { + up: ariaLabel || commonTexts.accessibility.visual_context_labels.up_trend_label, + down: ariaLabel || commonTexts.accessibility.visual_context_labels.down_trend_label, + neutral: ariaLabel || commonTexts.accessibility.visual_context_labels.neutral_trend_label, + }; + + const ariaLabelText = trendLabels[TrendDirection[trendDirection].toLowerCase()]; + + // Icon with intensity is used only on the homepage at the moment, for all other trend icons the default (below) are used. + if (intensity && color && TrendDirection[trendDirection]) { + return ; + } switch (trendDirection) { case TrendDirection.UP: - return ; + return ; case TrendDirection.DOWN: - return ; + return ; case TrendDirection.NEUTRAL: - return ; + return ; default: { const exhaustiveCheck: never = trendDirection; throw new Error(`Unhandled TrendDirection case: ${exhaustiveCheck}`); } } }; + +const intensitySelectors: { [key: number]: { fill: string; stroke?: string } } = { + 1: { + fill: '.one-arrow', + stroke: '.two-stroke, .three-stroke', + }, + 2: { + fill: '.one-arrow, .two-arrows', + stroke: '.three-stroke', + }, + 3: { + fill: '.one-arrow, .two-arrows, .three-arrows', + }, +}; + +interface TrendIconWithIntensityProps { + color: string; + direction: TrendDirection; + intensity: number; +} + +const TrendIconWithIntensity = styled(ArrowWithIntensity)` + flex-shrink: 0; + margin-left: ${space[2]}; + transform: ${({ direction }) => (direction === TrendDirection.DOWN ? 'scaleY(-1)' : undefined)}; + + ${({ intensity, color }): string => + `${intensitySelectors[intensity].fill} { + fill: ${color}; + } + ${intensitySelectors[intensity].stroke} { + stroke: ${colors.gray7}; + }`} +`; diff --git a/packages/app/src/domain/topical/components/topical-tile.tsx b/packages/app/src/domain/topical/components/topical-tile.tsx index 8a1859a384..8dce26d17f 100644 --- a/packages/app/src/domain/topical/components/topical-tile.tsx +++ b/packages/app/src/domain/topical/components/topical-tile.tsx @@ -84,18 +84,14 @@ export function TopicalTile({ title, tileIcon, trendIcon, description, kpiValue, > {title} {!formattedKpiValue && trendIcon.direction && trendIcon.color && ( - - - + )} {formattedKpiValue && ( {trendIcon.direction && trendIcon.color && ( - - - + )} )} @@ -135,13 +131,6 @@ export function TopicalTile({ title, tileIcon, trendIcon, description, kpiValue, ); } -const TrendIconWrapper = styled.span` - color: ${({ color }) => color}; - flex-shrink: 0; - margin-left: ${space[2]}; - width: 20px; -`; - const TileIcon = styled.span` background-color: ${colors.blue8}; border-bottom-left-radius: ${space[1]}; diff --git a/packages/app/src/domain/topical/types.ts b/packages/app/src/domain/topical/types.ts index 2d8dbf2d6e..ca1f7cbd62 100644 --- a/packages/app/src/domain/topical/types.ts +++ b/packages/app/src/domain/topical/types.ts @@ -6,4 +6,5 @@ export type TrendIconDirection = typeof ICON_DIRECTION_UP | typeof ICON_DIRECTIO export type TrendIcon = { direction: TrendIconDirection | null; color: TrendIconColor | null; + intensity: 1 | 2 | 3 | null; }; diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts index 0249248a93..4667bd0d37 100644 --- a/packages/app/src/queries/get-topical-structure-query.ts +++ b/packages/app/src/queries/get-topical-structure-query.ts @@ -5,13 +5,13 @@ export function getTopicalStructureQuery(locale: string) { const query = `// groq { 'topicalConfig': *[ - _type == 'topicalPageConfig' && !(_id in path("drafts.**")) + _type == 'topicalPageConfig' && !(_id in path('drafts.**')) ][0]{ 'title': title.${locale}, 'description': description.${locale} }, 'weeklySummary': *[ - _type == 'weeklySummary' && !(_id in path("drafts.**")) + _type == 'weeklySummary' && !(_id in path('drafts.**')) ][0]{ 'title': title.${locale}, 'items': items[]->{ @@ -21,30 +21,31 @@ export function getTopicalStructureQuery(locale: string) { }, }, 'kpiThemes': *[ - _type == 'themeCollection' && !(_id in path("drafts.**")) + _type == 'themeCollection' && !(_id in path('drafts.**')) ][0]{ 'themes': themes[]->{ - "title":title.${locale}, - "subTitle":subTitle.${locale}, + 'title':title.${locale}, + 'subTitle':subTitle.${locale}, themeIcon, 'linksLabelMobile': labelMobile.${locale}, 'linksLabelDesktop': labelDesktop.${locale}, - "links":links[]->{ + 'links':links[]->{ 'cta': { 'title': cta.title.${locale}, 'href': cta.href }, }, - "tiles":tiles[]->{ - "description":description.${locale}, + 'tiles':tiles[]->{ + 'description':description.${locale}, tileIcon, - "title":title.${locale}, - "sourceLabel":sourceLabel.${locale}, + 'title':title.${locale}, + 'sourceLabel':sourceLabel.${locale}, 'kpiValue': kpiValue.${locale}, 'trendIcon': { 'color': trendIcon.color, 'direction': trendIcon.direction, + 'intensity': trendIcon.intensity, }, 'cta': { 'title': cta.title.${locale}, @@ -54,7 +55,7 @@ export function getTopicalStructureQuery(locale: string) { }, }, 'measureTheme': *[ - _type == 'measureTheme' && !(_id in path("drafts.**")) + _type == 'measureTheme' && !(_id in path('drafts.**')) ][0]{ 'title': title.${locale}, themeIcon, @@ -65,12 +66,12 @@ export function getTopicalStructureQuery(locale: string) { }, }, 'thermometer': *[ - _type == 'thermometer' && !(_id in path("drafts.**")) + _type == 'thermometer' && !(_id in path('drafts.**')) ][0]{ icon, 'title': title.${locale}, 'subTitle': subTitle.${locale}, - "tileTitle":tileTitle.${locale}, + 'tileTitle':tileTitle.${locale}, currentLevel, 'thermometerLevels': thermometerLevels[]->{ 'level': level, diff --git a/packages/cms/src/schemas/topical/trend-icon.ts b/packages/cms/src/schemas/topical/trend-icon.ts index 645ef52946..170e75659f 100644 --- a/packages/cms/src/schemas/topical/trend-icon.ts +++ b/packages/cms/src/schemas/topical/trend-icon.ts @@ -31,5 +31,20 @@ export const trendIcon = { }, validation: REQUIRED, }, + { + title: 'Intensiteit', + name: 'intensity', + description: 'Beschrijft de intensiteit van relatieve verandering ten opzichte van de vorige meeting.', + type: 'number', + options: { + list: [ + { value: 1, title: '1 pijltje gekleurd' }, + { value: 2, title: '2 pijltjes gekleurd' }, + { value: 3, title: '3 pijltjes gekleurd' }, + ], + layout: 'dropdown', + }, + validation: REQUIRED, + }, ], }; diff --git a/packages/icons/icons.md b/packages/icons/icons.md index ede4332b51..2d10992f0c 100644 --- a/packages/icons/icons.md +++ b/packages/icons/icons.md @@ -8,6 +8,7 @@ See below an overview of all the available icons in this package. This file is g | AlcoholVerkoop |
AlcoholVerkoop
| | Archive |
Archive
| | Arrow |
Arrow
| +| ArrowWithIntensity |
ArrowWithIntensity
| | Arts |
Arts
| | Avondklok |
Avondklok
| | BarChart |
BarChart
| diff --git a/packages/icons/src/icon-name2filename.ts b/packages/icons/src/icon-name2filename.ts index 37d0b3dc65..b772ce9ff4 100644 --- a/packages/icons/src/icon-name2filename.ts +++ b/packages/icons/src/icon-name2filename.ts @@ -3,6 +3,7 @@ export type IconName = | 'AlcoholVerkoop' | 'Archive' | 'Arrow' + | 'ArrowWithIntensity' | 'Arts' | 'Avondklok' | 'BarChart' @@ -135,6 +136,7 @@ export const iconName2filename: Record = { AlcoholVerkoop: 'alcohol_verkoop.svg', Archive: 'archive.svg', Arrow: 'arrow.svg', + ArrowWithIntensity: 'arrow_with_intensity.svg', Arts: 'arts.svg', Avondklok: 'avondklok.svg', BarChart: 'bar_chart.svg', diff --git a/packages/icons/src/svg/arrow_with_intensity.svg b/packages/icons/src/svg/arrow_with_intensity.svg new file mode 100644 index 0000000000..956a73bc49 --- /dev/null +++ b/packages/icons/src/svg/arrow_with_intensity.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + \ No newline at end of file