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

remove missing icon and reduce subtext font size

Browse source
This commit is contained in:
Vim USDS 2022-09-09 15:46:11 -07:00
parent a49dbfdf90
commit 228aca0da5
5 changed files with 61 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -401,12 +401,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -707,12 +702,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -738,12 +728,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -771,12 +756,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -804,12 +784,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -837,12 +812,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -945,12 +915,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -976,12 +941,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1084,12 +1044,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1115,12 +1070,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1146,12 +1096,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1291,12 +1236,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1322,12 +1262,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1355,12 +1290,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1463,12 +1393,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1494,12 +1419,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1525,12 +1445,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1556,12 +1471,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1587,12 +1497,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1695,12 +1600,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1726,12 +1626,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1834,12 +1729,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1868,12 +1758,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1899,12 +1784,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -1930,12 +1810,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2077,12 +1952,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2259,12 +2129,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2295,12 +2160,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2601,12 +2461,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2632,12 +2487,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2854,12 +2704,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2885,12 +2730,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2916,12 +2756,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2947,12 +2782,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -2978,12 +2808,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -3086,12 +2911,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>

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

@ -81,7 +81,7 @@
align-self: flex-end;
text-align: right;
@include u-width(8);
@include typeset('sans', '3xs', 2);
@include typeset('sans', 'micro', 2);
@include u-text('thin');
}
}

26
client/src/components/Indicator/Indicator.test.tsx
View file

@ -46,19 +46,19 @@ describe('rendering of the Indicator', () => {
});
});
describe('test rendering of Indicator value icons', () => {
it('renders the unavailable icon when the value is null', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueIcon
value={null}
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
});
});
// describe('test rendering of Indicator value icons', () => {
// it('renders the unavailable icon when the value is null', () => {
// const {asFragment} = render(
// <LocalizedComponent>
// <IndicatorValueIcon
// value={null}
// />
// </LocalizedComponent>,
// );
// expect(asFragment()).toMatchSnapshot();
// screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
// });
// });
describe('test rendering of Indicator value sub-text', () => {
it('renders the "above 90 percentile"', () => {

19
client/src/components/Indicator/Indicator.tsx
View file

@ -8,7 +8,7 @@ import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore';
// @ts-ignore
import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg';
// import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg';
interface IIndicator {
indicator: indicatorInfo,
@ -31,21 +31,18 @@ interface IIndicatorValue {
}
/**
* This component will determine what indicator's icon should be. Either show the unavailable icon
* or show nothing.
* This component will determine what indicator's icon should be. ATM there are no icons to show, however
* this may change and so leaving a place holder function here for easy change in the future
*
* @param {number | null} value
* @return {JSX.Element}
*/
export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => {
const intl = useIntl();
return value === null ? (
<img className={styles.unavailable}
src={unAvailable}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
/>
) : <></>;
return value === null ? <></> : <></>;
// <img className={styles.unavailable}
// src={unAvailable}
// alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
// />
};
/**

30
client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap
View file

@ -92,12 +92,7 @@ exports[`renders value correctly for Former defense sites checks if it renders n
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -182,12 +177,7 @@ exports[`renders value correctly for abandoned land mines checks if it renders n
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -272,12 +262,7 @@ exports[`renders value correctly for historic underinvest. checks if it renders
<div>
--
</div>
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
<div />
</div>
<div>
<div>
@ -344,15 +329,6 @@ exports[`renders value correctly for historic underinvest. checks if it renders
</DocumentFragment>
`;
exports[`test rendering of Indicator value icons renders the unavailable icon when the value is null 1`] = `
<DocumentFragment>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</DocumentFragment>
`;
exports[`test rendering of Indicator value sub-text renders missing data 1`] = `
<DocumentFragment>
<div>