mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 17:44:20 -08:00
Add custom expand / collapse component
- adds a11y - adds chevron from USWDS icons
This commit is contained in:
Vim USDS
parent
0dbc550f85
commit
7817d41a59
5 changed files with 167 additions and 138 deletions
|
|
@ -51,24 +51,22 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
|
|||
<h6>
|
||||
Racial Ethnographic
|
||||
<button
|
||||
aria-controls="race-expand-content"
|
||||
aria-controls="race-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="race-expand-control"
|
||||
type="button"
|
||||
id="race-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="race-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="race-header"
|
||||
hidden=""
|
||||
id="race-expand-content"
|
||||
id="race-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -142,28 +140,26 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
|
|||
10.4%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h6>
|
||||
Age
|
||||
<button
|
||||
aria-controls="age-expand-content"
|
||||
aria-controls="age-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="age-expand-control"
|
||||
type="button"
|
||||
id="age-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="age-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="age-header"
|
||||
hidden=""
|
||||
id="age-expand-content"
|
||||
id="age-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -189,7 +185,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
|
|||
7.2%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -564,24 +560,22 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
|
|||
<h6>
|
||||
Racial Ethnographic
|
||||
<button
|
||||
aria-controls="race-expand-content"
|
||||
aria-controls="race-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="race-expand-control"
|
||||
type="button"
|
||||
id="race-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="race-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="race-header"
|
||||
hidden=""
|
||||
id="race-expand-content"
|
||||
id="race-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -655,28 +649,26 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
|
|||
10.4%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h6>
|
||||
Age
|
||||
<button
|
||||
aria-controls="age-expand-content"
|
||||
aria-controls="age-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="age-expand-control"
|
||||
type="button"
|
||||
id="age-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="age-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="age-header"
|
||||
hidden=""
|
||||
id="age-expand-content"
|
||||
id="age-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -702,7 +694,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
|
|||
7.2%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -2452,24 +2444,22 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
|
|||
<h6>
|
||||
Racial Ethnographic
|
||||
<button
|
||||
aria-controls="race-expand-content"
|
||||
aria-controls="race-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="race-expand-control"
|
||||
type="button"
|
||||
id="race-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="race-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="race-header"
|
||||
hidden=""
|
||||
id="race-expand-content"
|
||||
id="race-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -2543,28 +2533,26 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
|
|||
10.4%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h6>
|
||||
Age
|
||||
<button
|
||||
aria-controls="age-expand-content"
|
||||
aria-controls="age-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="age-expand-control"
|
||||
type="button"
|
||||
id="age-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="age-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="age-header"
|
||||
hidden=""
|
||||
id="age-expand-content"
|
||||
id="age-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -2590,7 +2578,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
|
|||
7.2%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,10 @@
|
|||
.demographicsContainer{
|
||||
padding: 1.2rem 1rem 0 1.2rem;
|
||||
|
||||
.demographicsLabel {
|
||||
.demographicsTitle {
|
||||
@include sidePanelLabelStyle;
|
||||
}
|
||||
|
||||
[id*='expand-content']{
|
||||
padding: .5rem 0;
|
||||
|
||||
}
|
||||
|
||||
.demographicItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -23,8 +18,41 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.customDemographicHeading {
|
||||
|
||||
.demographicItem:first-child {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
declare namespace TractDemographicsNamespace {
|
||||
export interface ITractDemographicsScss {
|
||||
demographicsContainer: string;
|
||||
demographicsTitle: string;
|
||||
demographicHeading: string;
|
||||
showHideText: string;
|
||||
showHideIcon: string;
|
||||
demographicItem: string;
|
||||
demographicsLabel: strring;
|
||||
customDemographicItemToggle: string;
|
||||
customDemographicHeading: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
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';
|
||||
|
||||
// Mock interface
|
||||
|
|
@ -53,30 +58,39 @@ interface IJ40AccordionItem {
|
|||
const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
return (
|
||||
|
||||
<>
|
||||
<h6 className={styles.customDemographicHeading}>
|
||||
<h6 className={styles.demographicHeading}>
|
||||
{title}
|
||||
<button
|
||||
id={`${id}-expand-control`}
|
||||
type="button"
|
||||
className="usa-accordion__button usa-banner__button"
|
||||
className={styles.showHideText}
|
||||
id={`${id}-header`}
|
||||
aria-controls={`${id}-panel`}
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls={`${id}-expand-content`}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
tabIndex={0}
|
||||
>
|
||||
<span className="usa-banner__button-text">{isExpanded ? `hide` : 'show'}</span>
|
||||
{isExpanded ? 'hide' : 'show'}
|
||||
</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>
|
||||
|
||||
<div
|
||||
id={`${id}-expand-content`}
|
||||
className="usa-banner__content usa-accordion__content"
|
||||
aria-labelledby={`${id}-expand-control`}
|
||||
<section
|
||||
id={`${id}-panel`}
|
||||
aria-labelledby={`${id}-header`}
|
||||
hidden={!isExpanded}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
>{children}</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -84,7 +98,9 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
|
|||
const TractDemographics = () => {
|
||||
return (
|
||||
<div className={styles.demographicsContainer}>
|
||||
<div className={styles.demographicsLabel}>Tract demographics</div>
|
||||
<div className={styles.demographicsTitle}>
|
||||
Tract demographics
|
||||
</div>
|
||||
<>
|
||||
<J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
|
||||
{demographicItemGen(demographicsData.racial)}
|
||||
|
|
|
|||
|
|
@ -9,24 +9,22 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
|
|||
<h6>
|
||||
Racial Ethnographic
|
||||
<button
|
||||
aria-controls="race-expand-content"
|
||||
aria-controls="race-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="race-expand-control"
|
||||
type="button"
|
||||
id="race-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="race-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="race-header"
|
||||
hidden=""
|
||||
id="race-expand-content"
|
||||
id="race-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -100,28 +98,26 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
|
|||
10.4%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h6>
|
||||
Age
|
||||
<button
|
||||
aria-controls="age-expand-content"
|
||||
aria-controls="age-panel"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
id="age-expand-control"
|
||||
type="button"
|
||||
id="age-header"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
show
|
||||
</span>
|
||||
show
|
||||
</button>
|
||||
<img
|
||||
alt="collapse icon"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</h6>
|
||||
<div
|
||||
aria-labelledby="age-expand-control"
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
<section
|
||||
aria-labelledby="age-header"
|
||||
hidden=""
|
||||
id="age-expand-content"
|
||||
id="age-panel"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
|
|
@ -147,7 +143,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
|
|||
7.2%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue