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

Add custom expand / collapse component

Browse source 
- adds a11y
- adds chevron from USWDS icons
This commit is contained in:
Vim USDS 2022-08-01 14:56:48 -07:00
parent 0dbc550f85
commit 7817d41a59
5 changed files with 167 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,24 +51,22 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
<h6> <h6>
Racial Ethnographic Racial Ethnographic
<button <button
aria-controls="race-expand-content" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="race-header"
id="race-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="race-expand-control" aria-labelledby="race-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="race-expand-content" id="race-panel"
> >
<div> <div>
<span> <span>
@ -142,28 +140,26 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
10.4% 10.4%
</span> </span>
</div> </div>
</div> </section>
<h6> <h6>
Age Age
<button <button
aria-controls="age-expand-content" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="age-header"
id="age-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="age-expand-control" aria-labelledby="age-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="age-expand-content" id="age-panel"
> >
<div> <div>
<span> <span>
@ -189,7 +185,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
7.2% 7.2%
</span> </span>
</div> </div>
</div> </section>
</div> </div>
<div> <div>
<div> <div>
@ -564,24 +560,22 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<h6> <h6>
Racial Ethnographic Racial Ethnographic
<button <button
aria-controls="race-expand-content" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="race-header"
id="race-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="race-expand-control" aria-labelledby="race-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="race-expand-content" id="race-panel"
> >
<div> <div>
<span> <span>
@ -655,28 +649,26 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
10.4% 10.4%
</span> </span>
</div> </div>
</div> </section>
<h6> <h6>
Age Age
<button <button
aria-controls="age-expand-content" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="age-header"
id="age-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="age-expand-control" aria-labelledby="age-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="age-expand-content" id="age-panel"
> >
<div> <div>
<span> <span>
@ -702,7 +694,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
7.2% 7.2%
</span> </span>
</div> </div>
</div> </section>
</div> </div>
<div> <div>
<div> <div>
@ -2452,24 +2444,22 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
<h6> <h6>
Racial Ethnographic Racial Ethnographic
<button <button
aria-controls="race-expand-content" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="race-header"
id="race-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="race-expand-control" aria-labelledby="race-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="race-expand-content" id="race-panel"
> >
<div> <div>
<span> <span>
@ -2543,28 +2533,26 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
10.4% 10.4%
</span> </span>
</div> </div>
</div> </section>
<h6> <h6>
Age Age
<button <button
aria-controls="age-expand-content" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="age-header"
id="age-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="age-expand-control" aria-labelledby="age-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="age-expand-content" id="age-panel"
> >
<div> <div>
<span> <span>
@ -2590,7 +2578,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
7.2% 7.2%
</span> </span>
</div> </div>
</div> </section>
</div> </div>
<div> <div>
<div> <div>

44
client/src/components/TractDemographics/TractDemographics.module.scss
View file

@ -4,15 +4,10 @@
.demographicsContainer{ .demographicsContainer{
padding: 1.2rem 1rem 0 1.2rem; padding: 1.2rem 1rem 0 1.2rem;
.demographicsLabel { .demographicsTitle {
@include sidePanelLabelStyle; @include sidePanelLabelStyle;
} }
[id*='expand-content']{
padding: .5rem 0;
}
.demographicItem { .demographicItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -23,8 +18,41 @@
margin-top: 0; margin-top: 0;
} }
} }
.customDemographicHeading {
.demographicItem:first-child {
@include u-margin-top(.5); @include u-margin-top(.5);
font-size: medium; }
.demographicHeading {
@include u-margin-top(.5);
font-size: .875rem;
.showHideText {
//remove styling of button
border: none;
background-color: white;
//emulate a link
cursor:pointer;
color:blue;
text-decoration:underline;
min-width: 45px;
padding-left: 0;
padding-right: 0;
margin-left: 6px;
}
.showHideIcon{
vertical-align: middle;
height: 1rem;
margin-left: -8px;
filter: invert(8%) sepia(90%) saturate(7490%) hue-rotate(247deg) brightness(105%) contrast(143%);
&:hover{
cursor: pointer;
}
}
} }
} }

7
client/src/components/TractDemographics/TractDemographics.module.scss.d.ts vendored
View file

@ -1,10 +1,11 @@
declare namespace TractDemographicsNamespace { declare namespace TractDemographicsNamespace {
export interface ITractDemographicsScss { export interface ITractDemographicsScss {
demographicsContainer: string; demographicsContainer: string;
demographicsTitle: string;
demographicHeading: string;
showHideText: string;
showHideIcon: string;
demographicItem: string; demographicItem: string;
demographicsLabel: strring;
customDemographicItemToggle: string;
customDemographicHeading: string;
} }
} }

46
client/src/components/TractDemographics/TractDemographics.tsx
View file

@ -1,5 +1,10 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
// @ts-ignore
import expandIcon from '/node_modules/uswds/dist/img/usa-icons/expand_more.svg';
// @ts-ignore
import collapseIcon from '/node_modules/uswds/dist/img/usa-icons/expand_less.svg';
import * as styles from './TractDemographics.module.scss'; import * as styles from './TractDemographics.module.scss';
// Mock interface // Mock interface
@ -53,30 +58,39 @@ interface IJ40AccordionItem {
const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => { const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
return ( return (
<> <>
<h6 className={styles.customDemographicHeading}> <h6 className={styles.demographicHeading}>
{title} {title}
<button <button
id={`${id}-expand-control`} className={styles.showHideText}
type="button" id={`${id}-header`}
className="usa-accordion__button usa-banner__button" aria-controls={`${id}-panel`}
aria-expanded={isExpanded} aria-expanded={isExpanded}
aria-controls={`${id}-expand-content`}
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
tabIndex={0}
> >
<span className="usa-banner__button-text">{isExpanded ? `hide` : 'show'}</span> {isExpanded ? 'hide' : 'show'}
</button> </button>
{ isExpanded ?
<img
className={styles.showHideIcon}
src={expandIcon}
alt={'expand icon'}
onClick={() => setIsExpanded(!isExpanded)}
/> :
<img
className={styles.showHideIcon}
src={collapseIcon}
alt={'collapse icon'}
onClick={() => setIsExpanded(!isExpanded)}
/>}
</h6> </h6>
<div <section
id={`${id}-expand-content`} id={`${id}-panel`}
className="usa-banner__content usa-accordion__content" aria-labelledby={`${id}-header`}
aria-labelledby={`${id}-expand-control`}
hidden={!isExpanded} hidden={!isExpanded}
> >{children}</section>
{children}
</div>
</> </>
); );
}; };
@ -84,7 +98,9 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
const TractDemographics = () => { const TractDemographics = () => {
return ( return (
<div className={styles.demographicsContainer}> <div className={styles.demographicsContainer}>
<div className={styles.demographicsLabel}>Tract demographics</div> <div className={styles.demographicsTitle}>
Tract demographics
</div>
<> <>
<J40AccordionItem id={'race'} title={`Racial Ethnographic`}> <J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
{demographicItemGen(demographicsData.racial)} {demographicItemGen(demographicsData.racial)}

48
client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
View file

@ -9,24 +9,22 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
<h6> <h6>
Racial Ethnographic Racial Ethnographic
<button <button
aria-controls="race-expand-content" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="race-header"
id="race-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="race-expand-control" aria-labelledby="race-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="race-expand-content" id="race-panel"
> >
<div> <div>
<span> <span>
@ -100,28 +98,26 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
10.4% 10.4%
</span> </span>
</div> </div>
</div> </section>
<h6> <h6>
Age Age
<button <button
aria-controls="age-expand-content" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-accordion__button usa-banner__button" id="age-header"
id="age-expand-control" tabindex="0"
type="button"
>
<span
class="usa-banner__button-text"
> >
show show
</span>
</button> </button>
<img
alt="collapse icon"
src="test-file-stub"
/>
</h6> </h6>
<div <section
aria-labelledby="age-expand-control" aria-labelledby="age-header"
class="usa-banner__content usa-accordion__content"
hidden="" hidden=""
id="age-expand-content" id="age-panel"
> >
<div> <div>
<span> <span>
@ -147,7 +143,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
7.2% 7.2%
</span> </span>
</div> </div>
</div> </section>
</div> </div>
</DocumentFragment> </DocumentFragment>
`; `;