@cdc/core 4.24.12-2 → 4.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.12-2",
+  "version": "4.25.1",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a60edf1148396309eb473ac9f65426ee40797ddf",
+  "gitHead": "c32d727f516fe3525178e3a6480abbe70b2a20d6",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_button-section.scss

@@ -17,6 +17,7 @@
   display: flex;
   justify-content: flex-end;
   width: 100%;
+  line-height: 1;
   &.brush-active {
     margin-top: 2em;
   }
@@ -24,11 +25,7 @@
     margin-right: 10px;
   }
   & a {
-    font-size: 16px;
-  }
-  margin-top: 20px;
-  &.below-table {
-    margin-top: 5px;
+    font-size: var(--download-link-font-size);
   }
 }
 

package/styles/_global-variables.scss

@@ -81,18 +81,28 @@ $colors: (
 @include theme();
 
 :root {
+  // Spacing
   --editorContentPadding: 30px;
   --editorWidth: 350px;
+  --space-between-legend-item-rows: 1rem;
+  --space-between-legend-item-columns: 1.5rem;
+  // Breakpoints
   --breakpoint-xs: 480px;
   --breakpoint-sm: 768px;
   --breakpoint-md: 960px;
   --breakpoint-lg: 1170px;
   --breakpoint-xl: 1280px;
-  --font-size: 17px;
-}
-
-@media (max-width: 576px) {
-  :root {
-    --font-size: 13px;
-  }
+  // Font
+  --app-font-main: 'Nunito', sans-serif;
+  --app-font-secondary: 'Poppins', sans-serif;
+  // Font sizes
+  --legend-title-font-size: 1rem;
+  --legend-description-font-size: 1rem;
+  --legend-item-font-size: 0.889rem;
+  --download-link-font-size: 0.772rem;
+  --filter-select-font-size: 0.833rem;
+  --filter-label-font-size: 0.889rem;
+  --filter-buttons-font-size: 0.889rem;
+  --superTitle-font-size: 0.833rem;
+  --title-font-size: 1.222rem;
 }

package/styles/_global.scss

@@ -156,17 +156,11 @@ textarea {
 
 section.introText {
   width: 100%;
-  margin-bottom: 25px;
 }
 
 section.footnotes {
-  border-top: 1px solid #ddd;
-  margin-top: 20px;
-  padding: 15px;
-}
-
-.cdc-chart-inner-container .subtext {
-  margin-top: 20px;
+  border-top: 1px solid var(--cool-gray-10);
+  width: 100%;
 }
 
 .margin-left-href {
@@ -182,14 +176,16 @@ section.footnotes {
   }
 }
 
-
 // after migration to TP5 this declaration should be removed and all references
 // to it should be replaced with .form-select
 .cove-form-select {
+  font-family: var(--app-font-secondary);
+  font-weight: 300;
+  font-size: var(--filter-select-font-size);
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
   border-radius: 0.25rem;
-  border: 1px solid var(--lightGray);
-  color: var(--darkGray);
-}
+  border: 1px solid var(--cool-gray-10);
+  color: var(--cool-gray-90);
+}

package/styles/_reset.scss

@@ -1,12 +1,11 @@
 .cdc-open-viz-module {
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans,
-    Helvetica Neue, Fira Sans, sans-serif;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
   font-weight: 400;
   font-style: normal;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  color: #111;
 
   // match cdc site outline
   :focus,
@@ -90,7 +89,7 @@
     margin: 0;
     padding: 0;
     border: 0;
-    font-family: sans-serif;
+    font-family: var(--app-font-main);
     font-weight: normal;
     vertical-align: baseline;
   }

package/styles/_typography.scss

@@ -1,20 +0,0 @@
-&.font-small {
-  .chart-container {
-    font-size: 0.9em !important;
-  }
-}
-
-&.font-medium {
-  font-size: 1em !important;
-}
-
-&.font-large {
-  .chart-container {
-    font-size: 1.1em !important;
-  }
-}
-
-.subtext {
-  font-style: italic;
-  font-size: 0.9em !important;
-}

package/styles/_variables.scss

@@ -61,6 +61,3 @@ $amber-primary: #fbab18 !default;
 $amber-secondary: #ffd54f !default;
 $amber-tertiary: #ffecb3 !default;
 $amber-quaternary: #fff7e1 !default;
-
-/// Fonts
-$font-small: 0.7em;

package/styles/base.scss

@@ -65,12 +65,7 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
 
 .cdc-open-viz-module {
   position: relative;
-  color: $baseColor;
-  font-size: 14px !important;
   line-height: 1.4;
-  @include breakpointClass(md) {
-    font-size: 16px !important;
-  }
   @import 'global';
   @import 'button-section';
   @import 'series-list';
@@ -153,4 +148,48 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
       '#ebf7f5'
     )
   );
+
+  // These are required because Chronic has pages that still use TP4 and these Bootstrap5 margin classes aren't defined on those pages
+  .me-0 {
+    margin-right: 0 !important;
+  }
+  .me-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-3 {
+    margin-right: 1rem !important;
+  }
+  .me-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-5 {
+    margin-right: 3rem !important;
+  }
+  .me-auto {
+    margin-right: auto !important;
+  }
+  .ms-0 {
+    margin-left: 0 !important;
+  }
+  .ms-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-auto {
+    margin-left: auto !important;
+  }
 }

package/styles/cove-main.scss

@@ -3,4 +3,4 @@
 @import 'v2/themes/color-definitions';
 @import 'variables';
 @import 'v2/components/ui/tooltip';
-@import 'v2/main.scss'
+@import 'v2/main.scss';

package/styles/filters.scss

@@ -2,14 +2,12 @@
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
-    gap: 7px 15px;
-    margin-top: 15px;
-    margin-bottom: 15px;
+    gap: 18px 27px;
     label {
       display: inherit;
       margin-bottom: 5px;
-      font-weight: 600;
-      font-size: 16px;
+      font-weight: 700;
+      font-size: var(--filter-label-font-size);
     }
   }
 
@@ -20,6 +18,7 @@
 
   &__buttons {
     width: 100%;
+    font-size: var(--filter-buttons-font-size);
     .apply {
       margin-right: 10px;
     }
@@ -27,9 +26,9 @@
 }
 
 div.single-filters {
-
   label {
     width: 100%;
+    font-weight: 700;
   }
 
   &__tab-bar {

package/styles/v2/base/_general.scss

@@ -2,13 +2,14 @@
 
 .cove {
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
   font-weight: 400;
   font-style: normal;
   line-height: 1.4;
   color: $baseColor;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
 
   small {
     display: block;

package/styles/v2/components/button.scss

@@ -16,7 +16,6 @@
   position: relative;
   min-height: 2.125rem;
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;

package/styles/v2/main.scss

@@ -3,7 +3,6 @@
 
 .cove {
   @import 'base';
-  color: $baseColor;
   font-size: 16px;
   line-height: 1.4;
 
@@ -13,12 +12,12 @@
   }
 
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
   font-weight: 400;
   font-style: normal;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  color: #111;
 
   strong {
     font-weight: 600;

package/styles/v2/utils/index.scss

@@ -6,4 +6,3 @@
 @import 'breakpoints';
 @import 'functions';
 @import 'grid';
-@import 'spacers';

package/types/BoxPlot.ts

@@ -15,6 +15,7 @@ export type BoxPlot = {
     upperBounds: string
   }
   plotNonOutlierValues: boolean
+  plotOutlierValues: boolean
   plots: [{ columnOutliers: []; columnLowerBounds: number; columnUpperBounds: number }]
   categories: string[]
   geoType: string

package/types/Runtime.ts

@@ -10,6 +10,7 @@ export type ForecastingSeriesKey = {
 
 export type Runtime = {
   barSeriesKeys?: string[]
+  areaSeriesKeys: object[]
   forecastingSeriesKeys?: ForecastingSeriesKey[]
   originalXAxis: {
     dataKey: string

package/types/Table.ts

@@ -13,7 +13,6 @@ export type Table = {
   downloadPdfButton?: boolean
   excludeColumns?: string[]
   expanded?: boolean
-  fontSize: 'small' | 'medium' | 'large'
   groupBy?: string
   height?: number
   indexLabel?: string

package/types/Version.ts

@@ -1 +1 @@
-export type version = `${number}.${number}.${number}`
+export type Version = `${number}.${number}.${number}` | `${number}.${number}.${number}-${string}`

package/styles/v2/utils/_spacers.scss

@@ -1,31 +0,0 @@
-// Content Spacer Classes
-$cove-spacers-offset: 8;
-$cove-spacers-max: 64;
-
-@mixin spacers($className, $styleNameCollection) {
-  $i: 0;
-  @while ($i * $cove-spacers-offset) <= $cove-spacers-max {
-    #{$className + $i} {
-      @each $styleName in $styleNameCollection {
-        #{$styleName}: #{($i * $cove-spacers-offset) + 'px'} !important;
-      }
-    }
-    $i: $i + 1;
-  }
-}
-
-@include spacers('.p-', 'padding');
-@include spacers('.pt-', 'padding-top');
-@include spacers('.pr-', 'padding-right');
-@include spacers('.pb-', 'padding-bottom');
-@include spacers('.pl-', 'padding-left');
-@include spacers('.px-', ('padding-left', 'padding-right'));
-@include spacers('.py-', ('padding-top', 'padding-bottom'));
-
-@include spacers('.m-', 'margin');
-@include spacers('.mt-', 'margin-top');
-@include spacers('.mr-', 'margin-right');
-@include spacers('.mb-', 'margin-bottom');
-@include spacers('.ml-', 'margin-left');
-@include spacers('.mx-', ('margin-left', 'margin-right'));
-@include spacers('.mx-', ('margin-top', 'margin-bottom'));