npm - @cdc/editor - Versions diffs - 1.4.3 → 9.22.9 - Mend

@cdc/editor 1.4.3 → 9.22.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/cdceditor.js +70 -52
package/example/private/map.csv +60 -0
package/example/private/test.html +1 -0
package/example/valid-data-map.csv +4 -3
package/package.json +9 -9
package/src/CdcEditor.js +84 -16
package/src/components/ChooseTab.js +225 -85
package/src/components/DataImport.js +289 -297
package/src/scss/configure-tab.scss +4 -1
package/src/scss/data-import.scss +32 -55
package/src/scss/main.scss +16 -1
package/src/assets/icons/dashboard.svg +0 -8

package/example/private/map.csv ADDED Viewed

@@ -0,0 +1,60 @@
+State,Activity Level,Funding Status,URL,
+AL,Very High,*,https://www.cdc.gov/flu/,
+AK,High,Current,https://www.cdc.gov/mmwr/,
+AS,Moderate,Current,https://www.cdc.gov/flu/,
+AZ,Low,Current,https://www.cdc.gov/flu/,
+AR,Minimal,Current,https://www.cdc.gov/mmwr/,
+CA,Very High,NA,https://www.cdc.gov/flu/,
+CO,High,Current,https://www.cdc.gov/flu/,
+CT,Moderate,Current,https://www.cdc.gov/mmwr/,
+DE,Low,Current,https://www.cdc.gov/flu/,
+DC,Minimal,Current,https://www.cdc.gov/flu/,
+FL,Very High,Current,https://www.cdc.gov/mmwr/,
+GA,High,Current,https://www.cdc.gov/flu/,
+GU,Moderate,*,https://www.cdc.gov/flu/,
+HI,Low,Current,https://www.cdc.gov/mmwr/,
+ID,Minimal,Current,https://www.cdc.gov/flu/,
+IL,Very High,Current,https://www.cdc.gov/flu/,
+IN,High,Current,https://www.cdc.gov/mmwr/,
+IA,Moderate,Current,https://www.cdc.gov/flu/,
+KS,Low,Current,https://www.cdc.gov/flu/,
+KY,Minimal,Current,https://www.cdc.gov/mmwr/,
+LA,Very High,*,https://www.cdc.gov/flu/,
+ME,High,Current,https://www.cdc.gov/flu/,
+MH,Moderate,Current,https://www.cdc.gov/mmwr/,
+MD,Low,Current,https://www.cdc.gov/flu/,
+MA,Minimal,Current,https://www.cdc.gov/flu/,
+MI,Very High,Current,https://www.cdc.gov/mmwr/,
+FM,High,Current,https://www.cdc.gov/flu/,
+MN,Moderate,NA,https://www.cdc.gov/flu/,
+MS,Low,Current,https://www.cdc.gov/mmwr/,
+MO,Minimal,Current,https://www.cdc.gov/flu/,
+MT,Very High,Current,https://www.cdc.gov/flu/,
+NE,High,Current,https://www.cdc.gov/mmwr/,
+NV,Moderate,Current,https://www.cdc.gov/flu/,
+NH,Low,Current,https://www.cdc.gov/flu/,
+NJ,Minimal,Current,https://www.cdc.gov/mmwr/,
+NM,Very High,NA,https://www.cdc.gov/flu/,
+NY,High,Current,https://www.cdc.gov/flu/,
+NC,Moderate,Current,https://www.cdc.gov/mmwr/,
+ND,Low,Current,https://www.cdc.gov/flu/,
+MP,Minimal,Current,https://www.cdc.gov/flu/,
+OH,Very High,Current,https://www.cdc.gov/mmwr/,
+OK,High,Current,https://www.cdc.gov/flu/,
+OR,Moderate,Current,https://www.cdc.gov/flu/,
+PW,Low,Current,https://www.cdc.gov/mmwr/,
+PA,Minimal,Current,https://www.cdc.gov/flu/,
+PR,Very High,Current,https://www.cdc.gov/flu/,
+RI,High,Current,https://www.cdc.gov/mmwr/,
+SC,Moderate,Current,https://www.cdc.gov/flu/,
+SD,Low,Current,https://www.cdc.gov/flu/,
+TN,Minimal,Current,https://www.cdc.gov/mmwr/,
+TX,Very High,Current,https://www.cdc.gov/flu/,
+UT,High,Current,https://www.cdc.gov/flu/,
+VT,Moderate,Current,https://www.cdc.gov/mmwr/,
+VI,Low,Current,https://www.cdc.gov/flu/,
+VA,Minimal,Current,https://www.cdc.gov/flu/,
+WA,Very High,Current,https://www.cdc.gov/mmwr/,
+WV,High,Current,https://www.cdc.gov/flu/,
+WI,Moderate,Current,https://www.cdc.gov/flu/,
+WY,Low,Current,https://www.cdc.gov/mmwr/,

package/example/private/test.html ADDED Viewed

@@ -0,0 +1 @@

+ <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Header</h1> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> <br> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. </p><br><p>She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek.</p></body></html>

package/example/valid-data-map.csv CHANGED Viewed

@@ -1,5 +1,6 @@
-STATE,Rate,Location,URL
-Alabama,30,Vehicle,https://www.cdc.gov/
+STATE,Rate,Location,URL
+Overall,55,Vehicle,https://www.cdc.gov
+Alabama,130,Vehicle,https://www.cdc.gov/
 Alaska,40,Work,https://www.cdc.gov/
 American Samoa,55,Home,https://www.cdc.gov/
 Arizona,57,School,https://www.cdc.gov/
@@ -56,4 +57,4 @@ Virgin Islands,55,School,https://www.cdc.gov/
 Virginia,57,School,https://www.cdc.gov/
 Washington,62,Work,https://www.cdc.gov/
 West Virginia,25,Vehicle,https://www.cdc.gov/
-Wyoming,43,Vehicle,https://www.cdc.gov/
+Wyoming,43,Vehicle,https://www.cdc.gov/

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "1.4.3",
+  "version": "9.22.9",
   "main": "dist/cdceditor",
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
@@ -18,13 +18,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@cdc/chart": "^1.3.2",
-    "@cdc/core": "^1.1.2",
-    "@cdc/dashboard": "^1.1.2",
-    "@cdc/data-bite": "^1.1.2",
-    "@cdc/waffle-chart": "^1.0.0",
-    "@cdc/markup-include": "^1.0.0",
-    "@cdc/map": "^2.6.2",
+    "@cdc/chart": "^9.22.9",
+    "@cdc/core": "^9.22.9",
+    "@cdc/dashboard": "^9.22.9",
+    "@cdc/data-bite": "^9.22.9",
+    "@cdc/map": "^9.22.9",
+    "@cdc/markup-include": "^9.22.9",
+    "@cdc/waffle-chart": "^9.22.9",
     "axios": "^0.21.1",
     "d3": "^7.0.0",
     "html-react-parser": "1.4.9",
@@ -40,5 +40,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "170845062bcbb93f31270104688f69c4148935d8"
+  "gitHead": "90faf22c91ca0062432607e4599598f9e67c848a"
 }

package/src/CdcEditor.js CHANGED Viewed

@@ -6,7 +6,11 @@ import ResizeObserver from 'resize-observer-polyfill'
 import getViewport from '@cdc/core/helpers/getViewport';
+import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
 import GlobalState from './context';
+import OverlayFrame from '@cdc/core/components/ui/OverlayFrame'
 import DataImport from './components/DataImport';
 import ChooseTab from './components/ChooseTab';
 import ConfigureTab from './components/ConfigureTab';
@@ -29,6 +33,54 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     startingTab = 2
   }
+  // Legacy support - dashboards using a single dataset
+  if(config.type === 'dashboard'){
+    let legacyUpdateNeeded = false;
+    let newConfig;
+    if(config.data || config.dataUrl){
+      legacyUpdateNeeded = true;
+      newConfig = {...config};
+      newConfig.datasets = {};
+      newConfig.datasets[config.dataFileName || 'dataset-1'] = {
+        data: config.data,
+        dataUrl: config.dataUrl,
+        dataFileName: config.dataFileName || 'dataset-1',
+        dataFileSourceType: config.dataFileSourceType
+      };
+      Object.keys(newConfig.visualizations).forEach(vizKey => {
+        newConfig.visualizations[vizKey].dataKey = config.dataFileName || 'dataset-1';
+        newConfig.visualizations[vizKey].dataDescription = newConfig.dataDescription;
+        newConfig.visualizations[vizKey].formattedData = newConfig.formattedData;
+      });
+      delete newConfig.data;
+      delete newConfig.dataUrl,
+      delete newConfig.dataFileName;
+      delete newConfig.dataFileSourceType;
+      delete newConfig.dataDescription;
+      delete newConfig.formattedData;
+    }
+    if(config.dashboard && config.dashboard.filters){
+      legacyUpdateNeeded = true;
+      newConfig = {...config};
+      newConfig.dashboard.sharedFilters = newConfig.dashboard.sharedFilters || [];
+      newConfig.dashboard.filters.forEach(filter => {
+        newConfig.dashboard.sharedFilters.push({...filter, key: filter.label, showDropdown: true, usedBy: Object.keys(newConfig.visualizations)});
+      });
+      delete newConfig.dashboard.filters;
+    }
+    if(legacyUpdateNeeded){
+      setConfig(newConfig);
+    }
+  }
   const [globalActive, setGlobalActive] = useState(startingTab);
   const resizeObserver = new ResizeObserver(([ container ]) => {
@@ -50,7 +102,7 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     if(null !== tempConfig) {
       const parsedData = JSON.stringify(tempConfig)
       // Emit the data in a regular JS event so it can be consumed by anything.
-      const event = new CustomEvent('updateVizConfig', { detail: parsedData})
+      const event = new CustomEvent('updateVizConfig', { detail: parsedData, bubbles: true })
       window.dispatchEvent(event)
     }
   }, [tempConfig])
@@ -97,21 +149,37 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     sharepath
   }
+  let configureDisabled = true;
+  if(config.type !== 'dashboard'){
+    if(config.formattedData){
+      configureDisabled = false;
+    }
+  } else {
+    if(config.datasets && Object.keys(config.datasets).length > 0){
+      configureDisabled = false;
+    }
+  }
   return (
-    <GlobalState.Provider value={state}>
-      <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef} >
-        <Tabs className="top-level" startingTab={globalActive}>
-          <TabPane title="1. Import Data" className="data-designer">
-            <DataImport />
-          </TabPane>
-          <TabPane title="2. Choose Visualization Type" className="choose-type" disableRule={!config.data && !config.formattedData}>
-            <ChooseTab />
-          </TabPane>
-          <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
-            <ConfigureTab containerEl={containerEl }/>
-          </TabPane>
-        </Tabs>
-      </div>
-    </GlobalState.Provider>
+    <GlobalContextProvider>
+      <GlobalState.Provider value={state}>
+        <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef}>
+          <Tabs className="top-level" startingTab={globalActive}>
+            <TabPane title="1. Choose Visualization Type" className="choose-type">
+              <ChooseTab />
+            </TabPane>
+            <TabPane title="2. Import Data" className="data-designer" disableRule={!config.type}>
+              <DataImport />
+            </TabPane>
+            <TabPane title="3. Configure" className="configure" disableRule={configureDisabled}>
+              <ConfigureTab containerEl={containerEl }/>
+            </TabPane>
+          </Tabs>
+        </div>
+      </GlobalState.Provider>
+      <OverlayFrame/>
+    </GlobalContextProvider>
   );
 }

package/src/components/ChooseTab.js CHANGED Viewed

@@ -1,103 +1,243 @@
-import React, { useContext, useEffect } from 'react';
-import '../scss/choose-vis-tab.scss';
-import GlobalState from '../context';
-import DashboardIcon from '../assets/icons/dashboard.svg';
-import BarIcon from '@cdc/core/assets/chart-bar-solid.svg';
-import LineIcon from '@cdc/core/assets/chart-line-solid.svg';
-import PieIcon from '@cdc/core/assets/chart-pie-solid.svg';
-import GlobeIcon from '@cdc/core/assets/world-graphic.svg';
-import UsaIcon from '@cdc/core/assets/usa-graphic.svg';
-import DataBiteIcon from '@cdc/core/assets/data-bite-graphic.svg';
-import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg';
-import MarkupIncludeIcon from '@cdc/core/assets/icon-code.svg';
-import AlabamaGraphic from '@cdc/core/assets/alabama-graphic.svg';
-import PairedBarIcon from '@cdc/core/assets/paired-bar.svg';
+import React, { useContext, useEffect } from 'react'
+import '../scss/choose-vis-tab.scss'
+import GlobalState from '../context'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
+import BarIcon from '@cdc/core/assets/icon-chart-bar.svg'
+import LineIcon from '@cdc/core/assets/icon-chart-line.svg'
+import PieIcon from '@cdc/core/assets/icon-chart-pie.svg'
+import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
+import UsaIcon from '@cdc/core/assets/icon-map-usa.svg'
+import UsaRegionIcon from '@cdc/core/assets/usa-region-graphic.svg'
+import DataBiteIcon from '@cdc/core/assets/icon-databite.svg'
+import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg'
+import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
+import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
+import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
 export default function ChooseTab() {
-    const {config, setConfig, setGlobalActive, tempConfig, setTempConfig} = useContext(GlobalState);
+  const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(GlobalState)
-    useEffect(() => {
-        if(tempConfig !== null) {
-            setConfig(tempConfig)
-            setTempConfig(null)
-        }
-    })
+  useEffect(() => {
+    if (tempConfig !== null) {
+      setConfig(tempConfig)
+      setTempConfig(null)
+    }
+  })
-    /**
-     * IconButton component
-     */
-    const IconButton = ({icon, label, type, subType, barType}) => {
-        let isSubType = false
+  /**
+   * IconButton component
+   */
+  const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false }) => {
+    let isSubType = false
+    let isHorizontalStackedChart = false
+    let classNames;
-        if(type === 'map' && config.general) {
-            let geoType = config.general.geoType
-            isSubType = (subType === geoType)
-        }
+    if (type === 'map' && config.general) {
+      let geoType = config.general.geoType
+      isSubType = (subType === geoType)
+    }
-        if(type === 'chart') {
-            isSubType = (subType === config.visualizationType)
-        }
+    if (type === 'chart') {
+      isSubType = (subType === config.visualizationType)
+      isHorizontalStackedChart = (orientation === config.orientation && stacked === true)
+    }
-        if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true;
+    if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true;
-        let classNames = (config.type === type && isSubType) ? 'active' : ''
+    // TODO: sorry, we should refactor this at some point.
+    // trying to get this out for 4.22.5 - this is so stacked horizontal and bar charts aren't highlighted at the same time.
+    // this functionality appears to be working but is admittedly confusing.
+    if(type === 'chart' && stacked) {
+      classNames = (config.type === type && isSubType && config.visualizationSubType === 'stacked') ? 'active' : ''
+    } else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
+      classNames = (config.type === type && isSubType ) ? 'active' : ''
+    }
-        let setTypes = () => {
-            // Only take the data/data source properties from existing config. Covers case of selecting a new visualization.
-            let newConfig = {
-                data: [...config.data],
-                dataFileName: config.dataFileName,
-                dataFileSourceType: config.dataFileSourceType,
-                dataDescription: config.dataDescription,
-                dataUrl: config.dataUrl,
-                newViz: true,
-                type
-            }
+    if(type !== 'chart') {
+      classNames = (config.type === type && isSubType && !isHorizontalStackedChart) ? 'active' : ''
+    }
-            if(config.formattedData) {
-                newConfig.formattedData = config.formattedData
-            }
-            if(type === 'map') {
-                newConfig.general = {
-                    ...newConfig.general,
-                    geoType: subType
-                }
-            } else {
-                newConfig.visualizationType = subType
+    let setTypes = () => {
+      if(type === config.type){
+        if(subType !== config.visualizationType){
+          setConfig({...config, newViz: true, visualizationType: subType})
+        }
+        setGlobalActive(1)
+      } else {
+        let confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?');
+        if(confirmation){
+          let newConfig = {
+            newViz: true,
+            datasets: {},
+            type
+          }
+          if(type === 'map') {
+            newConfig.general = {
+              ...newConfig.general,
+              geoType: subType
             }
+          } else {
+            newConfig.visualizationType = subType
+          }
-            setConfig(newConfig)
-            setGlobalActive(2)
+          setConfig(newConfig);
+          setGlobalActive(1)
         }
-        return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span className="mt-1">{label}</span></button>)
+      }
     }
-    return (
-        <div className="choose-vis">
-            <div className="heading-2">General</div>
-            <ul className="grid">
-                <li><IconButton label="Dashboard" type="dashboard" icon={ <DashboardIcon /> } /></li>
-                <li><IconButton label="Data Bite" type="data-bite" icon={<DataBiteIcon />} /></li>
-                <li><IconButton label="Waffle Chart" type="waffle-chart" icon={ <WaffleChartIcon /> } /></li>
-                <li><IconButton label="Markup Include" type="markup-include" icon={ <MarkupIncludeIcon /> } /></li>
-            </ul>
-            <div className="heading-2">Charts</div>
-            <ul className="grid">
-                <li><IconButton label="Bar" type="chart" subType="Bar" icon={ <BarIcon /> } /></li>
-                <li><IconButton label="Line" type="chart" subType="Line" icon={ <LineIcon /> } /></li>
-                <li><IconButton label="Pie" type="chart" subType="Pie" icon={ <PieIcon /> } /></li>
-                <li><IconButton label="Paired Bar" type="chart" subType="Paired Bar" icon={ <PairedBarIcon /> } /></li>
-            </ul>
-            <div className="heading-2">Maps</div>
-            <ul className="grid">
-                <li><IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={ <UsaIcon /> } /></li>
-                <li><IconButton label="World" type="map" subType="world" icon={ <GlobeIcon /> } /></li>
-                <li><IconButton label="U.S. State" type="map" subType="single-state" icon={ <AlabamaGraphic /> } /></li>
-            </ul>
+    return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span
+      className="mt-1">{label}</span></button>)
+  }
+  return (
+    <div className="choose-vis">
+      <a href="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html" target="_blank"
+         rel="noopener noreferrer" className="guidance-link" style={{marginTop: 0, marginBottom: "2rem"}}>
+        <div>
+          <p>For more information on the types of data visualizations in the WCMS, including examples and best practices, <u>see the WCMS Features Gallery</u>.</p>
         </div>
-    )
+      </a>
+      <div className="heading-2">General</div>
+      <ul className="grid cove-temp"> {/*TODO: Remove cove class during refactor to Wizard*/}
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <IconButton label="Dashboard" type="dashboard" icon={<DashboardIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present multiple data visualizations with shared filter controls.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="Data Bite" type="data-bite" icon={<DataBiteIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Highlight a single aggregated value (e.g., sum or median).
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="Waffle Chart" type="waffle-chart" icon={<WaffleChartIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Highlight a piece of data in relationship to a data set.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+      </ul>
+      <div className="heading-2">Charts</div>
+      <ul className="grid cove-temp">
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <IconButton label="Bar" type="chart" subType="Bar" orientation="vertical" icon={<BarIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Use bars to show comparisons between data categories.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="Line" type="chart" subType="Line" orientation="vertical" icon={<LineIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present one or more data trends over time.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="Pie" type="chart" subType="Pie" orientation="vertical" icon={<PieIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present the numerical proportions of a data series.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="Paired Bar" type="chart" subType="Paired Bar" orientation="horizontal" icon={<PairedBarIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Use paired bars to show comparisons between two different data categories.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="Horizontal Bar (Stacked)" type="chart" subType="Bar" orientation="horizontal" stacked={true}
+                          icon={<HorizontalStackIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Use bars to show comparisons between data categories.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+      </ul>
+      <div className="heading-2">Maps</div>
+      <ul className="grid cove-temp">
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={<UsaIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present a U.S. choropleth map at state or county level.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <IconButton label="United States (HHS Regions)" type="map" subType="us-region" icon={<UsaRegionIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present a U.S. choropleth map at state or county level.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="World" type="map" subType="world" icon={<GlobeIcon/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present a choropleth map of the world.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="U.S. State" type="map" subType="single-state" icon={<AlabamaGraphic/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present a choropleth map of an individual U.S. state.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+      </ul>
+    </div>
+  )
 }