Style TractDemo component

client/src/components/AreaDetail/AreaDetail.tsx

@@ -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}>

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

@@ -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);
-    }
-}

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

@@ -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;

client/src/components/Demographics/Demographics.test.tsx

@@ -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();
-  });
-});

client/src/components/Demographics/Demographics.tsx

@@ -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;

client/src/components/Demographics/index.ts

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

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

@@ -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;
+    }
+}

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

@@ -1,6 +1,10 @@
 declare namespace TractDemographicsNamespace {
     export interface ITractDemographicsScss {
-      tractDemographicsContainer: string;
+      demographicsContainer: string;
+      demographicItem: string;
+      demographicsLabel: strring;
+      customDemographicItemToggle: string;
+      customDemographicHeading: string;
     }
   }
 

client/src/components/TractDemographics/TractDemographics.tsx

@@ -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}>
+    <div className={styles.demographicsContainer}>
-      Hello 👋, I am a TractDemographics component.
+      <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>
   );
 };

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

@@ -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>

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

@@ -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;

client/src/components/utils.scss

@@ -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;