publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

update side panel styling for 1.0

Browse source
This commit is contained in:
Vim USDS 2022-09-13 14:16:41 -07:00
parent 5ed00f603c
commit dec3305834
4 changed files with 15 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -8,7 +8,6 @@ import {Accordion, Button} from '@trussworks/react-uswds';
import Category from '../Category'; import Category from '../Category';
import TractDemographics from '../TractDemographics'; import TractDemographics from '../TractDemographics';
import DisadvantageDot from '../DisadvantageDot'; import DisadvantageDot from '../DisadvantageDot';
import ExceedBurden from '../ExceedBurden';
import Indicator from '../Indicator'; import Indicator from '../Indicator';
import TractInfo from '../TractInfo'; import TractInfo from '../TractInfo';
@ -745,12 +744,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />, title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
content: ( content: (
<> <>
{/* Exceeds one or more burdens */}
<ExceedBurden
text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_ONE_OR_MORE}
isBurdened={category.isExceed1MoreBurden}
/>
{/* Indicators - filters then map */} {/* Indicators - filters then map */}
{category.indicators {category.indicators
.filter(indicatorFilter(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST)) .filter(indicatorFilter(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST))

9
client/src/components/AreaDetail/areaDetail.module.scss
View file

@ -113,14 +113,11 @@ $sidePanelLabelFontColor: #171716;
} }
.categorySpacer { .categorySpacer {
@include u-bg('gray-cool-3');
@include typeset('sans', '2xs', 2); @include typeset('sans', '2xs', 2);
@include u-text('bold'); @include u-text('bold');
margin: 0 -20px 1rem -20px; margin-left: -20px;
@include u-padding-top(2); @include u-padding-top(1);
@include u-padding-bottom(2); @include u-padding-bottom(1);
@include u-padding-left(2.5); @include u-padding-left(2.5);
} }

112
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -258,14 +258,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
hidden="" hidden=""
id="work-dev" id="work-dev"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -677,14 +669,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="climate-change" id="climate-change"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -890,14 +874,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="clean-energy" id="clean-energy"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -1019,14 +995,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="health-burdens" id="health-burdens"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -1202,14 +1170,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="sustain-house" id="sustain-house"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -1397,14 +1357,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="leg-pollute" id="leg-pollute"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -1604,14 +1556,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="clean-transport" id="clean-transport"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -1759,14 +1703,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="clean-water" id="clean-water"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -1889,14 +1825,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="work-dev" id="work-dev"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -2102,14 +2030,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden="" hidden=""
id="test" id="test"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -2436,14 +2356,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden="" hidden=""
id="clean-energy" id="clean-energy"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -2565,14 +2477,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden="" hidden=""
id="sustain-house" id="sustain-house"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -2680,14 +2584,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden="" hidden=""
id="leg-pollute" id="leg-pollute"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"
@ -2887,14 +2783,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden="" hidden=""
id="work-dev" id="work-dev"
> >
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"

21
client/src/components/Indicator/Indicator.module.scss
View file

@ -2,8 +2,8 @@
@import "../utils.scss"; @import "../utils.scss";
@mixin indicatorPadding { @mixin indicatorPadding {
@include u-padding-left(1); @include u-padding-left("05");
@include u-padding-right(1); @include u-padding-right("05");
} }
@mixin indicator { @mixin indicator {
@ -24,12 +24,11 @@
} }
.indicatorName { .indicatorName {
// flex: 0 1 77%; flex-basis: 55%;
flex-basis: 60%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include typeset('sans', '2xs', 2); @include typeset('sans', '2xs', 2);
@include u-text('medium'); @include u-text('bold');
.indicatorDesc { .indicatorDesc {
@include typeset('sans', '3xs', 2); @include typeset('sans', '3xs', 2);
@ -45,6 +44,9 @@
.indicatorValueCol { .indicatorValueCol {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include typeset('sans', '2xs', 2);
@include u-text('bold');
width: 40%;
.indicatorValueRow { .indicatorValueRow {
display: flex; display: flex;
@ -76,11 +78,11 @@
} }
.indicatorValueSubText{ .indicatorValueSubText{
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-self: flex-end; // align-self: flex-start;
text-align: right; text-align: right;
@include u-width(8); // @include u-width(8);
@include typeset('sans', 'micro', 2); @include typeset('sans', 'micro', 2);
@include u-text('thin'); @include u-text('thin');
} }
@ -92,4 +94,5 @@
//Indicator box styles //Indicator box styles
.indicatorBoxMain { .indicatorBoxMain {
@include indicator; @include indicator;
@include u-color('gray-warm-90');
} }