Adds demographics v1

- This uses the built-in accordion component

client/src/components/AreaDetail/AreaDetail.tsx

@@ -6,6 +6,7 @@ import {Accordion, Button} from '@trussworks/react-uswds';
 
 // Components:
 import Category from '../Category';
+import Demographics from '../Demographics';
 import DisadvantageDot from '../DisadvantageDot';
 import ExceedBurden from '../ExceedBurden';
 import Indicator from '../Indicator';
@@ -574,6 +575,9 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
         </li>
       </ul>
 
+      {/* Demographics */}
+      <Demographics />
+
       {/* Disadvantaged? */}
       <div className={styles.categorization}>
 

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

@@ -0,0 +1,15 @@
+@use '../../styles/design-system.scss' as *;
+
+.demographicsContainer{
+    @include u-padding(2);
+
+    .demographicItem {
+        display: flex;
+        justify-content: space-between;
+        
+        span {
+            font-size: .8rem;
+            margin-top: 0;
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+declare namespace DemographicsNamespace {
+    export interface IDemographicsScss {
+      demographicsContainer: string;
+      demographicItem: 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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,70 @@
+import React from 'react';
+import {Accordion} from '@trussworks/react-uswds';
+
+import * as styles from './Demographics.module.scss';
+
+// export interface IDemographicsProps {}
+
+type IDemographicsData = {
+  racial: [string, number][],
+  age: [string, number][]
+}
+
+// Temporary while backend is developed
+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],
+  ],
+};
+
+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>
+    );
+  });
+};
+
+const Demographics = () => {
+  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>
+      <Accordion items={demographicSections} multiselectable={true}/>
+    </div>
+  );
+};
+
+export default Demographics;

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

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of Demographics Component checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      Tract demographics
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="usa-accordion"
+      data-testid="accordion"
+    >
+      <h4
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="123"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_123"
+          type="button"
+        >
+          Racial Ethnographic
+        </button>
+      </h4>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_123"
+        hidden=""
+        id="123"
+      >
+        <div>
+          <span>
+            White
+          </span>
+          <span>
+            61.4%
+          </span>
+        </div>
+        <div>
+          <span>
+            Black or African Americon
+          </span>
+          <span>
+            10.3%
+          </span>
+        </div>
+        <div>
+          <span>
+            American Indian and Alaska Native
+          </span>
+          <span>
+            10.3%
+          </span>
+        </div>
+        <div>
+          <span>
+            American Indian and Alaska Native
+          </span>
+          <span>
+            0.3%
+          </span>
+        </div>
+        <div>
+          <span>
+            Asian
+          </span>
+          <span>
+            7.2%
+          </span>
+        </div>
+        <div>
+          <span>
+            Native Hawiian or Pacific Islander
+          </span>
+          <span>
+            4.2%
+          </span>
+        </div>
+        <div>
+          <span>
+            Other
+          </span>
+          <span>
+            2.5%
+          </span>
+        </div>
+        <div>
+          <span>
+            Two or more races
+          </span>
+          <span>
+            6.7%
+          </span>
+        </div>
+        <div>
+          <span>
+            Hispanic or Latino
+          </span>
+          <span>
+            10.4%
+          </span>
+        </div>
+      </div>
+      <h4
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="abc"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_abc"
+          type="button"
+        >
+          Age
+        </button>
+      </h4>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_abc"
+        hidden=""
+        id="abc"
+      >
+        <div>
+          <span>
+            Children under 10
+          </span>
+          <span>
+            1.4%
+          </span>
+        </div>
+        <div>
+          <span>
+            Ages 10 - 64
+          </span>
+          <span>
+            80.3%
+          </span>
+        </div>
+        <div>
+          <span>
+            Elderly over 65
+          </span>
+          <span>
+            7.2%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

client/src/components/Demographics/index.ts

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

client/src/styles/global.scss

@@ -24,6 +24,7 @@ There are 3 things that should be included in this file:
     -- Footer styles
   - Component styles
     -- Map styles
+    -- Demographics styles
     -- Public Event styles
     -- About styles
     -- Summary box
@@ -313,6 +314,29 @@ a.mapboxgl-ctrl-logo {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(/studio-manual/assets/%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(/studio-manual/assets/%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E") !important;
 };
 
+
+/* 
+******************************
+*      DEMOGRAPHICS STYLES
+****************************** 
+*/
+
+[class*="demographicsContainer"]{
+
+  .usa-accordion__heading {
+      font-size: .8rem;
+
+      .usa-accordion__button{
+        background-color: white;
+        padding: .6rem;
+      }
+  }
+
+  .usa-accordion__content {
+    padding-top: 0;
+  }
+}
+
 /* 
 ***************************************
 *      PUBLIC EVENT STYLES