@cdc/core 4.25.2-25 → 4.25.3

package/components/Filters/Filters.tsx

@@ -26,6 +26,8 @@ export const VIZ_FILTER_STYLE = {
   multiSelect: 'multi-select'
 } as const
 
+export const DROPDOWN_STYLES = 'py-2 ps-2 w-100 d-block'
+
 export type VizFilterStyle = (typeof VIZ_FILTER_STYLE)[keyof typeof VIZ_FILTER_STYLE]
 
 export const filterStyleOptions = Object.values(VIZ_FILTER_STYLE)
@@ -49,7 +51,7 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
-  // Desconstructing: notice, adding more descriptive visualizationConfig name over config
+  // Deconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
   const {
     config: visualizationConfig,
@@ -250,8 +252,8 @@ export const useFilters = props => {
   }
 
   const filterConstants = {
-    buttonText: 'Apply Filters',
-    resetText: 'Reset All'
+    buttonText: 'Apply',
+    resetText: 'Clear Filters'
   }
 
   // prettier-ignore
@@ -285,6 +287,16 @@ const Filters = (props: FilterProps) => {
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const [wrappingFilters, setWrappingFilters] = useState({})
+  const [initialActiveFilters, setInitialActiveFilters] = useState([])
+
+  useEffect(() => {
+    if (!filteredData) return
+
+    setInitialActiveFilters(filters.map(filter => filter.active))
+  }, [])
+
+  const activeFilters = filters.map(filter => filter.active)
+  const initialFiltersActive = initialActiveFilters.every((filter, i) => activeFilters.includes(filter))
   const id = useId()
 
   const wrappingFilterRefs = useRef({})
@@ -378,7 +390,7 @@ const Filters = (props: FilterProps) => {
         id={`filter-${outerIndex}`}
         name={label}
         aria-label={`Filter by ${label}`}
-        className='cove-form-select'
+        className={`cove-form-select ${DROPDOWN_STYLES}`}
         data-index='0'
         value={active}
         onChange={e => {
@@ -547,7 +559,7 @@ const Filters = (props: FilterProps) => {
       {visualizationConfig.filterIntro && (
         <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
       )}
-      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper align-items-end'>
+      <div className='d-flex flex-wrap w-100 filters-section__wrapper align-items-end'>
         {' '}
         <>
           <Style />
@@ -558,13 +570,13 @@ const Filters = (props: FilterProps) => {
                   handleApplyButton(filters)
                 }}
                 disabled={!showApplyButton}
-                className={[general?.headerColor ? general.headerColor : theme, 'apply'].join(' ')}
+                className={[general?.headerColor ? general.headerColor : theme, 'apply', 'me-2'].join(' ')}
               >
                 {filterConstants.buttonText}
               </Button>
-              <a href='#!' role='button' onClick={handleReset}>
+              <Button secondary disabled={initialFiltersActive} onClick={handleReset}>
                 {filterConstants.resetText}
-              </a>
+              </Button>
             </div>
           ) : (
             <></>

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 0 15px 27px 0 !important;
+    padding: 0 0 27px 0 !important;
   }
   &.isEditor {
     overflow: auto;

package/components/MediaControls.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 // import html2pdf from 'html2pdf.js'
-import html2canvas from 'html2canvas'
 
 const buttonText = {
   pdf: 'Download PDF',
@@ -76,12 +75,20 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg, {
-        ignoreElements: el =>
-          el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1
-      }).then(canvas => {
-        saveImageAs(canvas.toDataURL(), filename + '.png')
-      })
+      const downloadImage = async () => {
+        import(/* webpackChunkName: "html2canvas" */ 'html2canvas').then(mod => {
+          mod
+            .default(baseSvg, {
+              ignoreElements: el =>
+                el.className?.indexOf &&
+                el.className.search(/download-buttons|download-links|data-table-container/) !== -1
+            })
+            .then(canvas => {
+              saveImageAs(canvas.toDataURL(), filename + '.png')
+            })
+        })
+      }
+      downloadImage()
       return
     case 'pdf':
       // let opt = {

package/components/NestedDropdown/NestedDropdown.tsx

@@ -283,7 +283,11 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             onFocus={() => setInputHasFocus(true)}
           />
           <span className='list-arrow' aria-hidden={true}>
-            <Icon display='caretDown' />
+            {isListOpened ? (
+              <Icon display='caretUp' alt='arrow pointing up' />
+            ) : (
+              <Icon display='caretDown' alt='arrow pointing down' />
+            )}
           </span>
         </div>
         {loading && <Loader spinnerType={'text-secondary'} />}

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -29,11 +29,14 @@
     }
   }
 
+  [class^='main-nested-dropdown-container-'] {
+    cursor: pointer;
+  }
+
   [class^='main-nested-dropdown-container-'],
   .nested-dropdown-input-container {
     border: 1px solid var(--cool-gray-10);
     min-width: 200px;
-    cursor: pointer;
     padding: 0.4rem 0.75rem;
     font-size: 1em;
   }
@@ -57,14 +60,15 @@
 
   .nested-dropdown-input-container {
     display: block;
-    width: 100%;
+    width: calc(100% + 7px);
     border-radius: 0.25rem;
     position: relative;
     & > span.list-arrow {
       position: absolute;
       top: 9px;
-      right: 1px;
+      right: 9px;
       float: right;
+      pointer-events: none;
     }
 
     &.disabled {
@@ -77,7 +81,7 @@
 
   & [class^='main-nested-dropdown-container-'] {
     max-height: 375px;
-    overflow-y: scroll;
+    overflow-y: auto;
     position: absolute;
     z-index: 3;
     min-width: 200px;

package/components/elements/Button.jsx

@@ -16,6 +16,7 @@ const Button = ({
   active = false,
   onClick,
   children,
+  secondary,
   ...attributes
 }) => {
   const buttonRef = useRef(null)
@@ -33,7 +34,8 @@ const Button = ({
       (flexCenter || 'loader' === role ? ' cove-button--flex-center' : '') +
       (fluid ? ' fluid' : '') +
       (loading ? ' loading' : '') +
-      (attributes.className ? ' ' + attributes.className : ''),
+      (attributes.className ? ' ' + attributes.className : '') +
+      (secondary ? ' secondary' : ''),
     onMouseOver: () => setButtonState('in'),
     onMouseOut: () => setButtonState('out'),
     onFocus: () => setButtonState('in'),
@@ -89,7 +91,7 @@ const Button = ({
       {...attributesObj}
       onClick={e => {
         e.preventDefault()
-        return loading || onClick()
+        return loading || onClick(e)
       }}
       disabled={loading || attributesObj.disabled}
       ref={buttonRef}