This repository has been archived by the owner on Nov 4, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Coronathermometer component extension with collapsible (#4470)
* COR-1135: dynamic-thermometer (#4464) * feat: new descriptions added to thermometer * feat: fixed color mapping and changes some logic * feat: add icon direction function and type Co-authored-by: VWSCoronaDashboard27 <[email protected]> Co-authored-by: VWSCoronaDashboard19 <[email protected]> * Feature/cor 1159 collapsible thermometer description (#4468) * imported CollapsibleSection and imported IndicatorLevelDescription component * Sanity keys added for this ticket * added component structure and elements * Responsive and sizes * Adjusted to the right colors * Update packages/app/src/components/collapsible/collapsible-section.tsx Co-authored-by: VWSCoronaDashboard25 <[email protected]> * Update packages/app/src/domain/topical/components/indicator-level-description.tsx Co-authored-by: VWSCoronaDashboard25 <[email protected]> * fix: resolve review feedback * fix: solved PR feedback * chore: fix single character variable Co-authored-by: VWSCoronaDashboard21 <[email protected]> Co-authored-by: VWSCoronaDashboard25 <[email protected]> * Merging sanity changes from both branches * sanity changes * Fix: fixing stuck focus-state * FIX: Fixing breakpoint glitching * FIX: no user selecting * FEAT: Move the article link outside the collapsible * FIX: variable typo Co-authored-by: VWSCoronaDashboard27 <[email protected]> Co-authored-by: VWSCoronaDashboard27 <[email protected]> Co-authored-by: J <[email protected]> Co-authored-by: VWSCoronaDashboard21 <[email protected]> Co-authored-by: VWSCoronaDashboard25 <[email protected]>
- Loading branch information
1 parent
9647e20
commit 69f24fe
Showing
29 changed files
with
1,250 additions
and
944 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,6 +34,7 @@ | |
"Close", | ||
"CloseThick", | ||
"ContactBeroepen", | ||
"Coronathermometer", | ||
"Coronavirus", | ||
"Cross", | ||
"Database", | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/app/src/components/severity-indicator-tile/constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
export const TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH = 930; | ||
export const SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH = 250; | ||
export const SEVERITY_LEVELS_LIST = ['1', '2', '3', '4']; | ||
export const THERMOMETER_ICON_NAME = 'Stopwatch'; | ||
export const THERMOMETER_ICON_NAME = 'Coronathermometer'; |
15 changes: 15 additions & 0 deletions
15
packages/app/src/components/severity-indicator-tile/logic/map-string-to-colors.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { colors } from "@corona-dashboard/common"; | ||
import { ICON_COLOR_GREEN, ICON_COLOR_RED } from "~/domain/topical/common"; | ||
|
||
/** | ||
* Match strings from Sanity to certain color codes | ||
*/ | ||
|
||
export const mapStringToColors = (color: string | undefined) => { | ||
switch (color) { | ||
case ICON_COLOR_RED: | ||
return colors.red2; | ||
case ICON_COLOR_GREEN: | ||
return colors.green3; | ||
} | ||
}; |
11 changes: 11 additions & 0 deletions
11
packages/app/src/components/severity-indicator-tile/logic/set-trend-icon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { Down, Up } from '@corona-dashboard/icons'; | ||
import { ICON_DIRECTION_DOWN } from '~/domain/topical/common'; | ||
|
||
/** | ||
* Set the correction icon for specific direction that is beign passed. | ||
* */ | ||
|
||
export const setTrendIcon = (direction: string) => { | ||
if (direction === ICON_DIRECTION_DOWN) return <Down />; | ||
return <Up />; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
packages/app/src/components/timeline/timeline-bar-part.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { transparentize } from 'polished'; | ||
import { Box } from '../base'; | ||
import { getSeverityColor } from '../severity-indicator-tile/logic/get-severity-color'; | ||
import { SeverityLevel, SeverityLevels } from '../severity-indicator-tile/types'; | ||
import { TimelineEvent } from './timeline-event'; | ||
|
||
interface TimelineBarPartsProps { | ||
level: SeverityLevel; | ||
size: number; | ||
width: string; | ||
isLast?: boolean; | ||
} | ||
|
||
export const TimelineBarPart = ({ level, size = 10, width, isLast }: TimelineBarPartsProps) => { | ||
return ( | ||
<Box backgroundColor={transparentize(0.7, getSeverityColor(level as SeverityLevels))} width={width}> | ||
<TimelineEvent level={level} isLast={isLast} size={size} /> | ||
</Box> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { colors } from '@corona-dashboard/common'; | ||
import { ReactNode } from 'react'; | ||
import { Box } from '../base'; | ||
|
||
interface TimelineBarProps { | ||
height: number; | ||
children?: ReactNode; | ||
} | ||
|
||
export const TimelineBar = ({ children, height }: TimelineBarProps) => { | ||
return ( | ||
<Box | ||
position="relative" | ||
// bg={transparentize(0.8, colors.primary)} | ||
style={{ height }} | ||
display="flex" | ||
alignItems="center" | ||
> | ||
<Box borderTop="1px solid" borderTopColor={colors.primary} /> | ||
<Box position="absolute" top={0} right={0} bottom={0} left={0} display="flex" justifyContent="space-between"> | ||
{children} | ||
</Box> | ||
</Box> | ||
); | ||
}; |
Oops, something went wrong.