@cdc/core 1.1.4 → 4.22.11

package/helpers/validateFipsCodeLength.js

@@ -1,67 +1,52 @@
 /**
  * validateFipsCodeLength
- * 
+ *
  * When stateOrData is an object...
- * This is used for validating maps fips codes during runtime where we 
+ * This is used for validating maps fips codes during runtime where we
  * In this scenario a user is able to choose the column their Fips Codes are in.
- * 
+ *
  * When stateOrData is an array...
  * The user hasn't chose which column has their FIPS codes in it. We still
  * want to present the FIPS Codes in a friendly format so we attempt to add leading zeros.
- * 
- * @param {object|array} stateOrData 
+ *
+ * @param {object|array} stateOrData
  * @returns {object|array} stateOrData
  */
 export default function validateFipsCodeLength(stateOrData) {
-
-	// FIPS are within obj.
-	if (!Array.isArray(stateOrData)) {
-		if (stateOrData.general.geoType === 'us-county' || stateOrData.general.geoType === 'single-state' || stateOrData.general.geoType === 'us' && stateOrData?.data) {
-
-			stateOrData?.data.forEach(dataPiece => {
-				if (dataPiece[stateOrData.columns.geo.name]) {
-
-					if (!isNaN(parseInt(dataPiece[stateOrData.columns.geo.name])) && dataPiece[stateOrData.columns.geo.name].length === 4) {
-						dataPiece[stateOrData.columns.geo.name] = 0 + dataPiece[stateOrData.columns.geo.name]
-					}
-					dataPiece[stateOrData.columns.geo.name] = dataPiece[stateOrData.columns.geo.name].toString()
-				}
-			})
-		}
-	}
-
-	// Only includes data - get column name from somewhere else
-	if (Array.isArray(stateOrData)) {
-
-		let columns = Object.keys(stateOrData[0])
-
-		let potentialColumnNames = [
-			'fips',
-			'FIPS',
-			'fips codes',
-			'FIPS CODES',
-			'Fips Codes',
-			'fips Codes',
-			'Fips codes',
-			'FIPS Codes'
-		]
-
-		const fipsCol = columns.filter(columnName => potentialColumnNames.includes(columnName));
-
-		if (!fipsCol.length) return; // no column name to reference, leave the fips alone.
-
-		stateOrData?.forEach(dataPiece => {
-
-			if (dataPiece[fipsCol]) {
-
-				// specific to county fips codes.
-				if (!isNaN(parseInt(dataPiece[fipsCol])) && dataPiece[fipsCol].length === 4) {
-					dataPiece[fipsCol] = 0 + dataPiece[fipsCol]
-				}
-				dataPiece[fipsCol] = dataPiece[fipsCol].toString()
-			}
-		})
-	}
-
-	return stateOrData;
+  // FIPS are within obj.
+  if (!Array.isArray(stateOrData)) {
+    if (stateOrData.general.geoType === 'us-county' || stateOrData.general.geoType === 'single-state' || (stateOrData.general.geoType === 'us' && stateOrData?.data)) {
+      stateOrData?.data.forEach(dataPiece => {
+        if (dataPiece[stateOrData.columns.geo.name]) {
+          if (!isNaN(parseInt(dataPiece[stateOrData.columns.geo.name])) && dataPiece[stateOrData.columns.geo.name].length === 4) {
+            dataPiece[stateOrData.columns.geo.name] = 0 + dataPiece[stateOrData.columns.geo.name]
+          }
+          dataPiece[stateOrData.columns.geo.name] = dataPiece[stateOrData.columns.geo.name].toString()
+        }
+      })
+    }
+  }
+
+  // Only includes data - get column name from somewhere else
+  if (Array.isArray(stateOrData)) {
+    let columns = Object.keys(stateOrData[0])
+
+    let potentialColumnNames = ['fips', 'FIPS', 'fips codes', 'FIPS CODES', 'Fips Codes', 'fips Codes', 'Fips codes', 'FIPS Codes']
+
+    const fipsCol = columns.filter(columnName => potentialColumnNames.includes(columnName))
+
+    if (!fipsCol.length) return // no column name to reference, leave the fips alone.
+
+    stateOrData?.forEach(dataPiece => {
+      if (dataPiece[fipsCol]) {
+        // specific to county fips codes.
+        if (!isNaN(parseInt(dataPiece[fipsCol])) && dataPiece[fipsCol].length === 4) {
+          dataPiece[fipsCol] = 0 + dataPiece[fipsCol]
+        }
+        dataPiece[fipsCol] = dataPiece[fipsCol].toString()
+      }
+    })
+  }
+
+  return stateOrData
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "1.1.4",
+  "version": "4.22.11",
   "description": "Core elements of the CDC Open Visualization project",
   "author": "Daniel Immke <npm@daniel.do>",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
@@ -20,6 +20,7 @@
     "react-dom": ">=16"
   },
   "dependencies": {
+    "papaparse": "^5.3.0",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^3.3.4",
     "react-select": "^5.3.1",
@@ -29,5 +30,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
+  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
 }

package/styles/_data-table.scss

@@ -1,4 +1,6 @@
-.collapsed + .table-container { border-bottom: none; }
+.collapsed + .table-container {
+  border-bottom: none;
+}
 .table-container {
   overflow-x: auto;
   border-right: 1px solid $lightGray;
@@ -8,22 +10,22 @@
 
 div.data-table-heading {
   background: rgba(0, 0, 0, 0.05);
-  padding: .5em .7em;
+  padding: 0.5em 0.7em;
   border: $lightGray 1px solid;
   border-bottom: 0;
   cursor: pointer;
-  background-image: url(~@cdc/core/assets/minus.svg);
+  background-image: url(~@cdc/core/assets/icon-minus.svg);
   background-size: 15px 15px; // Need to define both for IE11
-  background-position: right .7em center;
+  background-position: right 0.7em center;
   background-repeat: no-repeat;
   &:focus {
     z-index: 2;
     position: relative;
   }
   &.collapsed {
-    background-image: url(~@cdc/core/assets/plus.svg);
+    background-image: url(~@cdc/core/assets/icon-plus.svg);
     background-size: 15px 15px; // Need to define both for IE11
-    background-position: right .7em center;
+    background-position: right 0.7em center;
     background-repeat: no-repeat;
     border-bottom: $lightGray 1px solid;
   }
@@ -39,7 +41,7 @@ table.data-table {
   overflow: auto;
   appearance: none;
   * {
-    box-sizing: border-box
+    box-sizing: border-box;
   }
 
   thead {
@@ -67,14 +69,14 @@ table.data-table {
       top: 0;
       bottom: 0;
       right: 0;
-      touch-action:none;
+      touch-action: none;
     }
     tr {
       text-align: left;
     }
     th,
     td {
-      padding: .5em 1.3em .5em .7em;
+      padding: 0.5em 1.3em 0.5em 0.7em;
       line-height: normal;
       position: relative;
       text-align: left;
@@ -84,52 +86,52 @@ table.data-table {
         margin-left: 1rem;
       }
     }
-    
+
     th.sort {
       background-color: darken($mediumGray, 10%);
       background-repeat: no-repeat;
-      background-position: right .5em center;
+      background-position: right 0.5em center;
       background-size: 10px 5px;
     }
 
     th.sort-asc,
     td.sort-asc {
-      background-image: url(~@cdc/core/assets/asc.svg);
+      background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
     }
-    
+
     th.sort-desc,
     td.sort-desc {
-      background-image: url(~@cdc/core/assets/desc.svg);
+      background-image: url(~@cdc/core/assets/icon-caret-filled-down.svg);
     }
-    
+
     th:last-child,
     td:last-child {
-      border-right: 0
+      border-right: 0;
     }
   }
-  
+
   tbody {
     tr {
       width: 100%;
       &:hover {
-        background: rgba(0, 0, 0, 0.05)
+        background: rgba(0, 0, 0, 0.05);
       }
     }
   }
 
   tr {
-    border-bottom: solid 1px #E5E5E5;
+    border-bottom: solid 1px #e5e5e5;
     min-width: 100%; // Needed to fill content up
     &:last-child {
-      border-bottom: 0
+      border-bottom: 0;
     }
   }
-  
+
   td {
-    padding: .3em .7em;
+    padding: 0.3em 0.7em;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
-  
+
   th,
   td {
     white-space: nowrap;
@@ -138,17 +140,19 @@ table.data-table {
     &:last-child {
       border-right: 0 !important;
     }
-    &:first-child {
-      flex-grow: 1;
-    }
+  }
+
+  th {
+    flex-grow: 1;
   }
 
   td {
     position: relative;
+    flex-grow: 1;
   }
 
   td a {
-    padding: .3em .7em;
+    padding: 0.3em 0.7em;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -158,7 +162,7 @@ table.data-table {
     color: inherit;
     text-decoration: none;
   }
-  
+
   td span.table-link {
     text-decoration: underline;
     cursor: pointer;
@@ -178,16 +182,17 @@ table.data-table {
     h3 {
       font-size: 1.3rem;
       font-weight: 600;
-      margin-bottom: .3rem;
+      margin-bottom: 0.3rem;
     }
   }
   tr:hover {
     background: #fff;
   }
-  th, td {
+  th,
+  td {
     width: 50%;
     &::before {
-      content: "\00a0";
+      content: '\00a0';
     }
   }
 }
@@ -201,19 +206,19 @@ table.data-table {
     margin: 0 1rem 0 0;
     display: flex;
     li + li {
-      margin-left: .3rem;
+      margin-left: 0.3rem;
     }
     button {
       background: $mediumGray;
-      padding: .6rem .8rem;
+      padding: 0.6rem 0.8rem;
       &:hover {
         background: lighten($mediumGray, 5%);
       }
     }
     button.btn-next {
       &::before {
-        content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
+        content: ' ';
+        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;
@@ -223,8 +228,8 @@ table.data-table {
     }
     button.btn-prev {
       &::before {
-        content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
+        content: ' ';
+        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;
@@ -234,7 +239,7 @@ table.data-table {
     }
     button[disabled] {
       background: $mediumGray;
-      opacity: .3;
+      opacity: 0.3;
       cursor: default;
       &:hover {
         background: $mediumGray;
@@ -247,9 +252,9 @@ table.data-table {
   color: #fff;
   float: right;
   text-decoration: none;
-  transition: .3s all;
+  transition: 0.3s all;
   margin: 1em 0;
   &:hover {
-    transition: .3s all;
+    transition: 0.3s all;
   }
 }

package/styles/_global.scss

@@ -7,11 +7,11 @@ strong {
 }
 
 .error-box {
-  background: #FFC2C2;
+  background: #ffc2c2;
   display: flex;
   justify-content: space-between;
-  padding: .3rem 1rem;
-  font-size: .9rem;
+  padding: 0.3rem 1rem;
+  font-size: 0.9rem;
   strong {
     font-weight: 600;
   }
@@ -20,7 +20,7 @@ strong {
   }
   .dismiss-error {
     flex-shrink: 0;
-    font-size: .8rem;
+    font-size: 0.8rem;
     cursor: pointer;
   }
 }
@@ -42,7 +42,7 @@ strong {
 .inline-icon {
   width: 1em !important;
   height: auto !important;
-  @media all and (-ms-high-contrast:none) {
+  @media all and (-ms-high-contrast: none) {
     height: 30px !important;
   }
   font-size: 1rem;
@@ -56,26 +56,26 @@ strong {
   background: #005eaa;
   color: #fff;
   border: 0;
-  padding: .4em .8em;
+  padding: 0.4em 0.8em;
   font-size: 1em;
   display: block;
-  border-radius: .3em;
-  transition: .1s background-color;
+  border-radius: 0.3em;
+  transition: 0.1s background-color;
   cursor: pointer;
   &.full-width {
     width: 100%;
   }
   &:hover {
-    transition: .1s background-color;
+    transition: 0.1s background-color;
   }
   &.secondary {
-    font-size: .8em;
-    padding: .3em 1em;
+    font-size: 0.8em;
+    padding: 0.3em 1em;
     background: rgba(0, 0, 0, 0.3);
     display: inline-block;
     margin-bottom: 1em;
     &:hover {
-      background: rgba(0,0,0,.5);
+      background: rgba(0, 0, 0, 0.5);
     }
   }
   &.danger {
@@ -87,7 +87,7 @@ strong {
   }
 
   &:hover {
-    transition: .1s all;
+    transition: 0.1s all;
     background: lighten(#005eaa, 5%);
   }
 
@@ -100,14 +100,19 @@ strong {
   }
 }
 
-input[type="text"], input[type="date"], input[role="combobox"], input[type="number"], input[type="search"], textarea {
-  padding: .5em .5em;
+input[type='text'],
+input[type='date'],
+input[role='combobox'],
+input[type='number'],
+input[type='search'],
+textarea {
+  padding: 0.5em 0.5em;
   font-size: 1em;
   font-weight: normal;
   font-family: sans-serif;
-  border: rgba(0,0,0,.3) 1px solid !important;
+  border: rgba(0, 0, 0, 0.3) 1px solid !important;
   &:focus {
-    border: rgba(0,0,0,.7) 1px solid !important;
+    border: rgba(0, 0, 0, 0.7) 1px solid !important;
     outline: 0;
   }
 }
@@ -129,16 +134,16 @@ select {
 
 .guidance-link {
   margin: 2em 0 1em;
-  padding: .75em 1em;
+  padding: 0.75em 1em;
   display: flex;
   text-decoration: none;
   color: #444;
   border: $lightGray 1px solid;
   position: relative;
-  transition: .2s all;
+  transition: 0.2s all;
   font-size: 1em;
   &:before {
-    content: " ";
+    content: ' ';
     width: 5px;
     background: $blue;
     left: -1px;
@@ -148,11 +153,11 @@ select {
   }
   &:hover {
     background: $lightestGray;
-    transition: .2s all;
+    transition: 0.2s all;
     color: #444;
   }
   > div {
-    font-size: .9em;
+    font-size: 0.9em;
   }
   svg {
     width: 60px;
@@ -167,3 +172,17 @@ select {
     font-size: 1.2rem;
   }
 }
+
+section.introText {
+  padding: 15px;
+}
+
+section.footnotes {
+  border-top: 1px solid #ddd;
+  margin-top: 20px;
+  padding: 15px;
+}
+
+.cdc-chart-inner-container .subtext {
+  padding: 15px;
+}

package/styles/_mixins.scss

@@ -1,13 +1,13 @@
 @mixin emptyState {
-    background: rgba(255, 255, 255, 0.5);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 7;
-}
+  background: rgba(255, 255, 255, 0.5);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 7;
+}

package/styles/_reset.scss

@@ -6,21 +6,97 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   color: #111;
+
+  // match cdc site outline
+  :focus,
+  [tabindex]:focus-visible {
+    outline: 2px solid rgba(255, 102, 1, 0.9) !important;
+  }
+
+  .outline-none {
+    outline: none !important;
+  }
 }
 .cdc-open-viz-module {
-  div, span, applet, object, iframe,
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-  a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, img, ins, kbd, q, s, samp,
-  small, strike, strong, sub, sup, tt, var,
-  b, u, i, center,
-  dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td,
-  article, aside, canvas, details, embed,
-  figure, figcaption, footer, header, hgroup,
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video {
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
     margin: 0;
     padding: 0;
     border: 0;
@@ -37,9 +113,12 @@
     }
   }
 
-  * {box-sizing: border-box}
+  * {
+    box-sizing: border-box;
+  }
 
-  sub, sup {
+  sub,
+  sup {
     /* Specified in % so that the sup/sup is the
       right size relative to the surrounding text */
     font-size: 75%;
@@ -67,4 +146,4 @@
       half as far down as the superscript moved up */
     bottom: -0.25em;
   }
-}
+}

package/styles/_variables.scss

@@ -1,15 +1,15 @@
 $baseColor: #333;
-$blue: #005EAA;
-$lightestGray: #F2F2F2;
-$lightGray: #C7C7C7;
+$blue: #005eaa;
+$lightestGray: #f2f2f2;
+$lightGray: #c7c7c7;
 $mediumGray: #565656;
 $darkGray: #333;
 $red: #d8000c;
 $white: #fff;
 
-$primary: 	#005eaa !default;
+$primary: #005eaa !default;
 $secondary: #88c3ea !default;
-$tertiary: 	#c0e9ff !default;
+$tertiary: #c0e9ff !default;
 $quaternary: #edf9ff !default;
 
 $purple-primary: #712177 !default;