Add USWDS expand to demographics side panel

client/src/components/Demographics/Demographics.module.scss

@@ -1,7 +1,7 @@
 @use '../../styles/design-system.scss' as *;
 
 .demographicsContainer{
-    @include u-padding(2);
+    padding: 1.2rem 1rem 0 1.2rem;
 
     .demographicItem {
         display: flex;
@@ -13,18 +13,6 @@
         }
     }
     .customDemographicHeading {
-        @include u-margin(1);
+        @include u-margin(1.5);
-    }
-    .customDemographicItemToggle {
-        //remove styling of button
-        border: none;
-        background-color: white;
-
-        //emulate a link
-        cursor:pointer;
-        color:blue;
-        text-decoration:underline;
-
-        min-width: 45px;
     }
 }

client/src/components/Demographics/Demographics.tsx

@@ -1,8 +1,6 @@
 import React, {useState} from 'react';
-import {Accordion} from '@trussworks/react-uswds';
 
 import * as styles from './Demographics.module.scss';
-import {useFlags} from '../../contexts/FlagContext';
 
 type IDemographicsData = {
   racial: [string, number][],
@@ -54,57 +52,38 @@ interface IJ40AccordionItem {
 const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
   const [isExpanded, setIsExpanded] = useState(false);
   return (
+
     <>
       <h6 className={styles.customDemographicHeading}>
         {title}
-        {' ( '}
         <button
-          className={styles.customDemographicItemToggle}
+          id={`${id}-expand-control`}
-          id={`${id}-header`}
+          type="button"
-          aria-controls={`${id}-panel`}
+          className="usa-accordion__button usa-banner__button"
           aria-expanded={isExpanded}
+          aria-controls={`${id}-expand-content`}
           onClick={() => setIsExpanded(!isExpanded)}
-          tabIndex={0}
         >
-          {isExpanded ? 'hide' : 'show'}
+          <span className="usa-banner__button-text">{isExpanded ? `hide` : 'show'}</span>
         </button>
-        { isExpanded ? <span>&#9650;</span> : <span>&#9660;</span>}
-        {' )'}
       </h6>
 
-      <section
+      <div
-        id={`${id}-panel`}
+        id={`${id}-expand-content`}
-        aria-labelledby={`${id}-header`}
+        className="usa-banner__content usa-accordion__content"
+        aria-labelledby={`${id}-expand-control`}
         hidden={!isExpanded}
-      >{children}</section>
+      >
+        {children}
+      </div>
     </>
   );
 };
 
 const Demographics = () => {
-  const flags = useFlags();
-
-  const demographicSections = [
-    {
-      title: `Racial Ethnographic`,
-      content: demographicItemGen(demographicsData.racial),
-      expanded: false,
-      id: '123',
-      headingLevel: 'h4',
-    },
-    {
-      title: `Age`,
-      content: demographicItemGen(demographicsData.age),
-      expanded: false,
-      id: 'abc',
-      headingLevel: 'h4',
-    },
-  ];
-
   return (
     <div className={styles.demographicsContainer}>
       <div>Tract demographics</div>
-      {'cdc' in flags ? (
       <>
         <J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
           {demographicItemGen(demographicsData.racial)}
@@ -113,9 +92,6 @@ const Demographics = () => {
           {demographicItemGen(demographicsData.age)}
         </J40AccordionItem>
       </>
-      ) :
-      <Accordion items={demographicSections} multiselectable={true}/>
-      }
     </div>
   );
 };

client/src/components/TractDemographics/TractDemographics.module.scss

@@ -0,0 +1,5 @@
+@use '../../styles/design-system.scss' as *;
+
+.tractDemographicsContainer{
+
+}

client/src/components/TractDemographics/TractDemographics.module.scss.d.ts

@@ -0,0 +1,12 @@
+declare namespace TractDemographicsNamespace {
+    export interface ITractDemographicsScss {
+      tractDemographicsContainer: string;
+    }
+  }
+
+declare const TractDemographicsScssModule: TractDemographicsNamespace.ITractDemographicsScss & {
+    /** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
+    locals: TractDemographicsNamespace.ITractDemographicsScss;
+  };
+
+  export = TractDemographicsScssModule;

client/src/components/TractDemographics/TractDemographics.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import TractDemographics from './TractDemographics';
+
+describe('rendering of TractDemographics Component', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <TractDemographics />
+        </LocalizedComponent>,
+    );
+    it('checks if component renders', () => {
+      expect(asFragment()).toMatchSnapshot();
+    });
+});

client/src/components/TractDemographics/TractDemographics.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import * as styles from './TractDemographics.module.scss';
+
+export interface ITractDemographicsProps {}
+
+const TractDemographics = ({}: ITractDemographicsProps) => {
+  return (
+    <div className={styles.tractDemographicsContainer}>
+      Hello 👋, I am a TractDemographics component.
+    </div>
+  );
+};
+
+export default TractDemographics;

client/src/components/TractDemographics/index.ts

@@ -0,0 +1,2 @@
+import TractDemographics from './TractDemographics';
+export default TractDemographics;

client/src/components/TractInfo/TractInfo.module.scss

@@ -0,0 +1,5 @@
+@use '../../styles/design-system.scss' as *;
+
+.tractInfoContainer{
+
+}

client/src/components/TractInfo/TractInfo.module.scss.d.ts

@@ -0,0 +1,12 @@
+declare namespace TractInfoNamespace {
+    export interface ITractInfoScss {
+      tractInfoContainer: string;
+    }
+  }
+
+declare const TractInfoScssModule: TractInfoNamespace.ITractInfoScss & {
+    /** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
+    locals: TractInfoNamespace.ITractInfoScss;
+  };
+
+  export = TractInfoScssModule;

client/src/components/TractInfo/TractInfo.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import TractInfo from './TractInfo';
+
+describe('rendering of TractInfo Component', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <TractInfo />
+        </LocalizedComponent>,
+    );
+    it('checks if component renders', () => {
+      expect(asFragment()).toMatchSnapshot();
+    });
+});

client/src/components/TractInfo/TractInfo.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import * as styles from './TractInfo.module.scss';
+
+export interface ITractInfoProps {}
+
+const TractInfo = ({}: ITractInfoProps) => {
+  return (
+    <div className={styles.tractInfoContainer}>
+      Hello 👋, I am a TractInfo component.
+    </div>
+  );
+};
+
+export default TractInfo;

client/src/components/TractInfo/index.ts

@@ -0,0 +1,2 @@
+import TractInfo from './TractInfo';
+export default TractInfo;