mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-05 20:04:19 -07:00
Updated side panel for score L launch (#1022)
* Remove un-needed state and useEffect vars * Add initial Accordion UI to side panel - abstract out Indicators to separate component - add snapshot test - define new indicators in EXPLORE copy - intl copy to AreaDetail component * Make side panel indicators styling match design * Rename export IndicatorCategory -> CategoryCard * Add disadvangted dots to category and indicators - add new Category component - add new DisadvantageDot component - make copy corrections - comment out send feedback link in side panel * Integrate MapLegend's dot into component - change color to 'blue-warm-70v' - update map stroke to 'blue-warm-70v' * Add new indicator names from BE - add abbreviations and use key in json file to decode
This commit is contained in:
parent
9709d08ca3
commit
8a0e3a1293
31 changed files with 1780 additions and 825 deletions
59
client/src/components/Indicator/Indicator.module.scss
Normal file
59
client/src/components/Indicator/Indicator.module.scss
Normal file
|
@ -0,0 +1,59 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
@import "../utils.scss";
|
||||
|
||||
@mixin indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include u-padding-bottom(3);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
@include u-padding-bottom(0);
|
||||
}
|
||||
|
||||
.indicatorRow {
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: $mobileBreakpoint) {
|
||||
flex: 1 0 40%;
|
||||
align-self: inherit;
|
||||
padding-left: 3rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.indicatorName {
|
||||
flex: 0 1 77%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include typeset('sans', '2xs', 2);
|
||||
@include u-text('bold');
|
||||
|
||||
.indicatorDesc {
|
||||
@include typeset('sans', '3xs', 2);
|
||||
@include u-text('normal');
|
||||
max-width: 12rem;
|
||||
@include u-margin-top(0);
|
||||
@media screen and (max-width: 1024px) {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicatorValue {
|
||||
margin-left: 2.2rem;
|
||||
|
||||
.indicatorSuperscript {
|
||||
top: -0.2em
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Indicator box styles
|
||||
.indicatorBoxMain {
|
||||
@include indicator;
|
||||
}
|
||||
|
||||
.disadvantagedIndicator {
|
||||
@include indicator;
|
||||
@include u-text('blue-warm-70v');
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue