mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-10-22 13:03:52 -07:00
Style TractDemo component
This commit is contained in:
Vim USDS
parent
d0ff171ee6
commit
432bb65cae
12 changed files with 130 additions and 165 deletions
|
|
@ -6,7 +6,7 @@ import {Accordion, Button} from '@trussworks/react-uswds';
|
|||
|
||||
// Components:
|
||||
import Category from '../Category';
|
||||
import Demographics from '../Demographics';
|
||||
import TractDemographics from '../TractDemographics';
|
||||
import DisadvantageDot from '../DisadvantageDot';
|
||||
import ExceedBurden from '../ExceedBurden';
|
||||
import Indicator from '../Indicator';
|
||||
|
|
@ -584,7 +584,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
|
|||
/>
|
||||
|
||||
{/* Demographics */}
|
||||
<Demographics />
|
||||
<TractDemographics />
|
||||
|
||||
{/* Disadvantaged? */}
|
||||
<div className={styles.categorization}>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.demographicsContainer{
|
||||
padding: 1.2rem 1rem 0 1.2rem;
|
||||
|
||||
.demographicItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
font-size: .8rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.customDemographicHeading {
|
||||
@include u-margin(1.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
declare namespace DemographicsNamespace {
|
||||
export interface IDemographicsScss {
|
||||
demographicsContainer: string;
|
||||
demographicItem: string;
|
||||
customDemographicItemToggle: string;
|
||||
customDemographicHeading: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const DemographicsScssModule: DemographicsNamespace.IDemographicsScss & {
|
||||
/** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
|
||||
locals: DemographicsNamespace.IDemographicsScss;
|
||||
};
|
||||
|
||||
export = DemographicsScssModule;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import {LocalizedComponent} from '../../test/testHelpers';
|
||||
import Demographics from './Demographics';
|
||||
|
||||
describe('rendering of Demographics Component', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<Demographics />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
it('checks if component renders', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
import React, {useState} from 'react';
|
||||
|
||||
import * as styles from './Demographics.module.scss';
|
||||
|
||||
type IDemographicsData = {
|
||||
racial: [string, number][],
|
||||
age: [string, number][]
|
||||
}
|
||||
|
||||
// Mock backend data
|
||||
const demographicsData:IDemographicsData = {
|
||||
racial: [
|
||||
['White', 61.4],
|
||||
['Black or African Americon', 10.3],
|
||||
['American Indian and Alaska Native', 10.3],
|
||||
['American Indian and Alaska Native', 0.3],
|
||||
['Asian', 7.2],
|
||||
['Native Hawiian or Pacific Islander', 4.2],
|
||||
['Other', 2.5],
|
||||
['Two or more races', 6.7],
|
||||
['Hispanic or Latino', 10.4],
|
||||
],
|
||||
age: [
|
||||
['Children under 10', 1.4],
|
||||
['Ages 10 - 64', 80.3],
|
||||
['Elderly over 65', 7.2],
|
||||
],
|
||||
};
|
||||
|
||||
/*
|
||||
* Generate the demographic item based the input
|
||||
* // TODO: Update after actual data is created
|
||||
*
|
||||
*/
|
||||
const demographicItemGen = (demographicData: any[]) => {
|
||||
return demographicData.map((el, index) => {
|
||||
return (
|
||||
<div key={index} className={styles.demographicItem}>
|
||||
<span>{ el[0] }</span>
|
||||
<span>{`${el[1]}%`}</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
interface IJ40AccordionItem {
|
||||
id: string,
|
||||
title: string,
|
||||
children: React.ElementType
|
||||
}
|
||||
|
||||
const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
return (
|
||||
|
||||
<>
|
||||
<h6 className={styles.customDemographicHeading}>
|
||||
{title}
|
||||
<button
|
||||
id={`${id}-expand-control`}
|
||||
type="button"
|
||||
className="usa-accordion__button usa-banner__button"
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls={`${id}-expand-content`}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<span className="usa-banner__button-text">{isExpanded ? `hide` : 'show'}</span>
|
||||
</button>
|
||||
</h6>
|
||||
|
||||
<div
|
||||
id={`${id}-expand-content`}
|
||||
className="usa-banner__content usa-accordion__content"
|
||||
aria-labelledby={`${id}-expand-control`}
|
||||
hidden={!isExpanded}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Demographics = () => {
|
||||
return (
|
||||
<div className={styles.demographicsContainer}>
|
||||
<div>Tract demographics</div>
|
||||
<>
|
||||
<J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
|
||||
{demographicItemGen(demographicsData.racial)}
|
||||
</J40AccordionItem>
|
||||
<J40AccordionItem id={'age'} title={`Age`}>
|
||||
{demographicItemGen(demographicsData.age)}
|
||||
</J40AccordionItem>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demographics;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Demographics from './Demographics';
|
||||
export default Demographics;
|
||||
|
|
@ -1,5 +1,30 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
@import "../utils.scss";
|
||||
|
||||
.tractDemographicsContainer{
|
||||
.demographicsContainer{
|
||||
padding: 1.2rem 1rem 0 1.2rem;
|
||||
|
||||
.demographicsLabel {
|
||||
@include sidePanelLabelStyle;
|
||||
}
|
||||
|
||||
[id*='expand-content']{
|
||||
padding: .5rem 0;
|
||||
|
||||
}
|
||||
|
||||
.demographicItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: .5rem;
|
||||
|
||||
span {
|
||||
font-size: .8rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.customDemographicHeading {
|
||||
@include u-margin-top(.5);
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
declare namespace TractDemographicsNamespace {
|
||||
export interface ITractDemographicsScss {
|
||||
tractDemographicsContainer: string;
|
||||
demographicsContainer: string;
|
||||
demographicItem: string;
|
||||
demographicsLabel: strring;
|
||||
customDemographicItemToggle: string;
|
||||
customDemographicHeading: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,97 @@
|
|||
import React from 'react';
|
||||
import React, {useState} from 'react';
|
||||
|
||||
import * as styles from './TractDemographics.module.scss';
|
||||
|
||||
export interface ITractDemographicsProps {}
|
||||
export interface ITractDemographicsProps {
|
||||
racial: [string, number][],
|
||||
age: [string, number][]
|
||||
}
|
||||
|
||||
// Mock backend data
|
||||
const demographicsData:ITractDemographicsProps = {
|
||||
racial: [
|
||||
['White', 61.4],
|
||||
['Black or African Americon', 10.3],
|
||||
['American Indian and Alaska Native', 10.3],
|
||||
['American Indian and Alaska Native', 0.3],
|
||||
['Asian', 7.2],
|
||||
['Native Hawiian or Pacific Islander', 4.2],
|
||||
['Other', 2.5],
|
||||
['Two or more races', 6.7],
|
||||
['Hispanic or Latino', 10.4],
|
||||
],
|
||||
age: [
|
||||
['Children under 10', 1.4],
|
||||
['Ages 10 - 64', 80.3],
|
||||
['Elderly over 65', 7.2],
|
||||
],
|
||||
};
|
||||
|
||||
/*
|
||||
* Generate the demographic item based the input
|
||||
* // TODO: Update after actual data is created
|
||||
*
|
||||
*/
|
||||
const demographicItemGen = (demographicData: any[]) => {
|
||||
return demographicData.map((el, index) => {
|
||||
return (
|
||||
<div key={index} className={styles.demographicItem}>
|
||||
<span>{ el[0] }</span>
|
||||
<span>{`${el[1]}%`}</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
interface IJ40AccordionItem {
|
||||
id: string,
|
||||
title: string,
|
||||
children: React.ElementType
|
||||
}
|
||||
|
||||
const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
return (
|
||||
|
||||
<>
|
||||
<h6 className={styles.customDemographicHeading}>
|
||||
{title}
|
||||
<button
|
||||
id={`${id}-expand-control`}
|
||||
type="button"
|
||||
className="usa-accordion__button usa-banner__button"
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls={`${id}-expand-content`}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<span className="usa-banner__button-text">{isExpanded ? `hide` : 'show'}</span>
|
||||
</button>
|
||||
</h6>
|
||||
|
||||
<div
|
||||
id={`${id}-expand-content`}
|
||||
className="usa-banner__content usa-accordion__content"
|
||||
aria-labelledby={`${id}-expand-control`}
|
||||
hidden={!isExpanded}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TractDemographics = ({}: ITractDemographicsProps) => {
|
||||
return (
|
||||
<div className={styles.tractDemographicsContainer}>
|
||||
Hello 👋, I am a TractDemographics component.
|
||||
<div className={styles.demographicsContainer}>
|
||||
<div className={styles.demographicsLabel}>Tract demographics</div>
|
||||
<>
|
||||
<J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
|
||||
{demographicItemGen(demographicsData.racial)}
|
||||
</J40AccordionItem>
|
||||
<J40AccordionItem id={'age'} title={`Age`}>
|
||||
{demographicItemGen(demographicsData.age)}
|
||||
</J40AccordionItem>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of Demographics Component checks if component renders 1`] = `
|
||||
exports[`rendering of TractDemographics Component checks if component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -1,13 +1,6 @@
|
|||
@use "../../styles/design-system.scss" as *;
|
||||
@import "../utils.scss";
|
||||
|
||||
$sidePanelLabelFontColor: #171716;
|
||||
|
||||
@mixin sidePanelLabelStyle {
|
||||
font-size: medium;
|
||||
color: $sidePanelLabelFontColor;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tractInfoContainer {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,14 @@ $sidePanelBorder: 2px solid $sidePanelBorderColor;
|
|||
$mobileBreakpoint: 400px;
|
||||
$featureSelectBorderColor: #00bde3;
|
||||
$additionalCardsBGColor: #FAFAFA;
|
||||
$sidePanelLabelFontColor: #171716;
|
||||
|
||||
@mixin sidePanelLabelStyle {
|
||||
font-size: medium;
|
||||
color: $sidePanelLabelFontColor;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
//Styles with Dataset container
|
||||
$datasetContainerColor: #eef6fb;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue