@cdc/map 4.25.10 → 4.26.1

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 (107) hide show
  1. package/.claude/agents/typescript-organizer.md +118 -0
  2. package/dist/{cdcmap-fce76882.es.js → cdcmap-BnB1QM5d.es.js} +6 -13
  3. package/dist/{cdcmap-c55ac1ea.es.js → cdcmap-D6CG2-Hb.es.js} +5 -12
  4. package/dist/{cdcmap-31a33da1.es.js → cdcmap-MXgURbdZ.es.js} +6 -13
  5. package/dist/{cdcmap-1a1724a1.es.js → cdcmap-dgT_1dIT.es.js} +136 -151
  6. package/dist/cdcmap.js +58397 -55987
  7. package/examples/example-city-state.json +9 -1
  8. package/examples/multi-country-centering.json +45 -0
  9. package/examples/private/city_styles_variable.json +877 -0
  10. package/examples/private/colors-2.json +221 -0
  11. package/examples/private/colors.json +221 -0
  12. package/examples/private/map-filter-issue.json +2260 -0
  13. package/examples/private/map-legend.json +5303 -0
  14. package/index.html +27 -36
  15. package/package.json +6 -5
  16. package/src/CdcMapComponent.tsx +86 -26
  17. package/src/_stories/CdcMap.ColumnWrap.stories.tsx +31 -0
  18. package/src/_stories/CdcMap.DistrictOfColumbia.stories.tsx +320 -0
  19. package/src/_stories/CdcMap.Editor.stories.tsx +3426 -0
  20. package/src/_stories/CdcMap.SmallMultiples.stories.tsx +35 -0
  21. package/src/_stories/CdcMap.stories.tsx +116 -4
  22. package/src/_stories/_mock/column-wrap-test.json +265 -0
  23. package/src/_stories/_mock/multi-country-hide.json +78 -0
  24. package/src/_stories/_mock/multi-country.json +95 -0
  25. package/src/_stories/_mock/multi-state.json +887 -20403
  26. package/src/_stories/_mock/small_multiples/multi-state-small-multiples.json +8399 -0
  27. package/src/_stories/_mock/small_multiples/region-small-multiples.json +657 -0
  28. package/src/_stories/_mock/small_multiples/wastewater-map-small-multiples.json +221 -0
  29. package/src/_stories/_mock/usa-state-gradient.json +3 -4
  30. package/src/components/BubbleList.tsx +1 -1
  31. package/src/components/CityList.tsx +24 -18
  32. package/src/components/EditorPanel/components/EditorPanel.tsx +2380 -2206
  33. package/src/components/EditorPanel/components/HexShapeSettings.tsx +55 -93
  34. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +0 -19
  35. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +27 -37
  36. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx +351 -0
  37. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  38. package/src/components/Geo.tsx +20 -3
  39. package/src/components/Legend/components/Legend.tsx +58 -75
  40. package/src/components/Legend/components/LegendGroup/Legend.Group.tsx +1 -1
  41. package/src/components/Legend/components/index.scss +23 -6
  42. package/src/components/NavigationMenu.tsx +16 -13
  43. package/src/components/SmallMultiples/SmallMultipleTile.tsx +163 -0
  44. package/src/components/SmallMultiples/SmallMultiples.css +32 -0
  45. package/src/components/SmallMultiples/SmallMultiples.tsx +150 -0
  46. package/src/components/SmallMultiples/SynchronizedTooltip.tsx +105 -0
  47. package/src/components/SmallMultiples/index.tsx +3 -0
  48. package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx +18 -3
  49. package/src/components/UsaMap/components/TerritoriesSection.tsx +26 -12
  50. package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx +30 -4
  51. package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx +29 -9
  52. package/src/components/UsaMap/components/Territory/TerritoryShape.ts +7 -0
  53. package/src/components/UsaMap/components/UsaMap.County.tsx +16 -4
  54. package/src/components/UsaMap/components/UsaMap.Region.tsx +14 -1
  55. package/src/components/UsaMap/components/UsaMap.SingleState.tsx +29 -12
  56. package/src/components/UsaMap/components/UsaMap.State.tsx +30 -5
  57. package/src/components/UsaMap/helpers/map.ts +2 -2
  58. package/src/components/UsaMap/helpers/shapes.ts +9 -6
  59. package/src/components/WorldMap/WorldMap.tsx +81 -11
  60. package/src/data/initial-state.js +11 -0
  61. package/src/data/supported-geos.js +8 -76
  62. package/src/helpers/addUIDs.ts +13 -2
  63. package/src/helpers/applyColorToLegend.ts +25 -1
  64. package/src/helpers/applyLegendToRow.ts +5 -3
  65. package/src/helpers/constants.ts +3 -15
  66. package/src/helpers/displayGeoName.ts +22 -4
  67. package/src/helpers/generateRuntimeFilters.ts +1 -1
  68. package/src/helpers/generateRuntimeLegend.ts +1 -3
  69. package/src/helpers/generateRuntimeLegendHash.ts +1 -1
  70. package/src/helpers/getCountriesPicked.ts +103 -0
  71. package/src/helpers/getMapContainerClasses.ts +7 -0
  72. package/src/helpers/getPatternForRow.ts +2 -5
  73. package/src/helpers/index.ts +2 -4
  74. package/src/helpers/isLegendItemDisabled.ts +2 -2
  75. package/src/helpers/resetLegendToggles.ts +1 -0
  76. package/src/helpers/smallMultiplesHelpers.ts +359 -0
  77. package/src/helpers/tests/hashObj.test.ts +1 -1
  78. package/src/helpers/tests/titleCase.test.ts +76 -0
  79. package/src/helpers/titleCase.ts +13 -13
  80. package/src/helpers/toggleLegendActive.ts +76 -8
  81. package/src/helpers/urlDataHelpers.ts +1 -1
  82. package/src/hooks/useCountryZoom.tsx +241 -0
  83. package/src/hooks/useGeoClickHandler.ts +1 -1
  84. package/src/hooks/useProgrammaticMapTooltip.ts +110 -0
  85. package/src/hooks/useResizeObserver.ts +8 -2
  86. package/src/hooks/useStateZoom.tsx +7 -4
  87. package/src/hooks/useSynchronizedGeographies.ts +56 -0
  88. package/src/index.jsx +1 -0
  89. package/src/scss/editor-panel.scss +4 -440
  90. package/src/scss/main.scss +1 -1
  91. package/src/scss/map.scss +12 -15
  92. package/src/store/map.actions.ts +7 -7
  93. package/src/test/CdcMap.test.jsx +1 -1
  94. package/src/types/MapConfig.ts +32 -11
  95. package/src/types/MapContext.ts +6 -0
  96. package/src/types/runtimeLegend.ts +2 -1
  97. package/LICENSE +0 -201
  98. package/src/components/DataTable.tsx +0 -413
  99. package/src/components/EditorPanel/components/Inputs.tsx +0 -59
  100. package/src/components/MapControls.tsx +0 -44
  101. package/src/helpers/getUniqueValues.ts +0 -19
  102. package/src/helpers/hashObj.ts +0 -25
  103. package/src/hooks/useActiveElement.ts +0 -19
  104. package/src/hooks/useLegendSeparators.ts +0 -26
  105. package/src/scss/mixins.scss +0 -47
  106. package/src/types/Annotations.ts +0 -24
  107. /package/dist/{cdcmap-548642e6.es.js → cdcmap-Ct2SB0vL.es.js} +0 -0
package/index.html CHANGED
@@ -1,41 +1,33 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
+ <style type="text/css">
7
+ body {
8
+ margin: 0;
9
+ border-top: none !important;
10
+ /* Force scrollbar so page stays consistent width */
11
+ min-height: calc(100vh + 1px);
12
+ }
3
13
 
4
- <head>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
- <style type="text/css">
8
- body {
9
- margin: 0;
10
- border-top: none !important;
11
- }
14
+ /* Add 1rem padding to mimic DFE when editor is not visible */
15
+ .cdc-open-viz-module:not(.isEditor) {
16
+ padding: 1rem;
17
+ }
18
+ </style>
19
+ <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
20
+ </head>
12
21
 
13
- .cdc-map-outer-container {
14
- min-height: 100vh;
15
- }
16
- </style>
17
- <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
22
+ <body>
23
+ <!-- DEFAULT EXAMPLES -->
24
+ <!-- <div class="react-container" data-config="/examples/example-city-state.json"></div> -->
25
+ <div class="react-container" data-config="/examples/default-single-state.json"></div>
18
26
 
19
- <!-- This is temporary and for testing until Nunito/900 is added to TP -->
20
- <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet" />
21
- <style type="text/css">
22
- @font-face {
23
- font-family: 'Nunito';
24
- font-weight: 900;
25
- font-display: swap;
26
- src: url('https://app.unpkg.com/@fontsource/nunito@5.0.18/files/files/nunito-latin-900-normal.woff2') format('woff2');
27
- }
28
- </style>
29
- </head>
30
-
31
- <body>
32
- <!-- DEFAULT EXAMPLES -->
33
- <div class="react-container" data-config="/examples/example-city-state.json"></div>
34
-
35
- <noscript>You need to enable JavaScript to run this app.</noscript>
36
- <script type="module" src="./src/index.jsx"></script>
37
- <!-- add cove_loaded listener -->
38
- <!-- <script>
27
+ <noscript>You need to enable JavaScript to run this app.</noscript>
28
+ <script type="module" src="./src/index.jsx"></script>
29
+ <!-- add cove_loaded listener -->
30
+ <!-- <script>
39
31
  document.addEventListener('cove_loaded', function () {
40
32
  // This is a temporary fix to ensure the map loads after Cove has loaded
41
33
  // and the cdc-map-outer-container is available.
@@ -43,6 +35,5 @@
43
35
  console.log('Cove has loaded, initializing map...');
44
36
  });
45
37
  </script> -->
46
- </body>
47
-
48
- </html>
38
+ </body>
39
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/map",
3
- "version": "4.25.10",
3
+ "version": "4.26.1",
4
4
  "description": "React component for visualizing tabular data on a map of the United States or the world.",
5
5
  "moduleName": "CdcMap",
6
6
  "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "license": "Apache-2.0",
27
27
  "dependencies": {
28
- "@cdc/core": "^4.25.10",
28
+ "@cdc/core": "^4.26.1",
29
29
  "@googlemaps/markerclusterer": "^2.5.3",
30
30
  "@hello-pangea/dnd": "^16.2.0",
31
31
  "@react-google-maps/api": "^2.20.6",
@@ -55,16 +55,17 @@
55
55
  "react-icons": "5.5.0",
56
56
  "react-tooltip": "5.8.2-beta.3",
57
57
  "resize-observer-polyfill": "^1.5.1",
58
+ "sass": "^1.89.2",
58
59
  "topojson-client": "^3.1.0",
59
60
  "use-debounce": "^10.0.5",
60
- "vite": "^4.4.11",
61
+ "vite": "^5.4.21",
61
62
  "vite-plugin-css-injected-by-js": "^2.4.0",
62
- "vite-plugin-svgr": "^2.4.0",
63
+ "vite-plugin-svgr": "^4.2.0",
63
64
  "whatwg-fetch": "3.6.20"
64
65
  },
65
66
  "peerDependencies": {
66
67
  "react": "^18.2.0",
67
68
  "react-dom": "^18.2.0"
68
69
  },
69
- "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
70
+ "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
70
71
  }
package/src/CdcMapComponent.tsx CHANGED
@@ -9,6 +9,7 @@ import 'react-tooltip/dist/react-tooltip.css'
9
9
  import DataTable from '@cdc/core/components/DataTable'
10
10
  import Filters from '@cdc/core/components/Filters'
11
11
  import Layout from '@cdc/core/components/Layout'
12
+ import MediaControls from '@cdc/core/components/MediaControls'
12
13
  import SkipTo from '@cdc/core/components/elements/SkipTo'
13
14
  import Title from '@cdc/core/components/ui/Title'
14
15
  import Waiting from '@cdc/core/components/Waiting'
@@ -23,7 +24,7 @@ import './scss/main.scss'
23
24
  import './cdcMapComponent.styles.css'
24
25
 
25
26
  // Core Helpers
26
- import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
27
+ import { getQueryStringFilterValue, isFilterHiddenByQuery } from '@cdc/core/helpers/queryStringUtils'
27
28
  import { generateRuntimeFilters } from './helpers/generateRuntimeFilters'
28
29
  import { type MapReducerType, MapState } from './store/map.reducer'
29
30
  import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
@@ -37,15 +38,18 @@ import {
37
38
  getMapContainerClasses,
38
39
  generateRuntimeLegendHash,
39
40
  handleMapTabbing,
40
- hashObj,
41
41
  navigationHandler
42
42
  } from './helpers'
43
- import generateRuntimeLegend from './helpers/generateRuntimeLegend'
43
+ import { hashObj } from '@cdc/core/helpers/hashObj'
44
+ import { applyLegendToRow } from './helpers/applyLegendToRow'
45
+ import { getPatternForRow } from './helpers/getPatternForRow'
46
+ import { generateRuntimeLegend } from './helpers/generateRuntimeLegend'
44
47
  import generateRuntimeData from './helpers/generateRuntimeData'
45
48
  import { reloadURLData } from './helpers/urlDataHelpers'
46
49
  import { observeMapSvgLoaded } from './helpers/mapObserverHelpers'
47
50
  import { buildSectionClassNames } from './helpers/componentHelpers'
48
51
  import { shouldShowDataTable } from './helpers/dataTableHelpers'
52
+ import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
49
53
 
50
54
  // Child Components
51
55
  import Annotation from './components/Annotation'
@@ -54,7 +58,6 @@ import EditorPanel from './components/EditorPanel'
54
58
  import Error from './components/EditorPanel/components/Error'
55
59
  import Legend from './components/Legend'
56
60
  import MapContainer from './components/MapContainer'
57
- import MapControls from './components/MapControls'
58
61
  import NavigationMenu from './components/NavigationMenu'
59
62
 
60
63
  // hooks
@@ -169,7 +172,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
169
172
  const tooltipId = 'tooltipId'
170
173
 
171
174
  // hooks
172
- const { currentViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
175
+ const { currentViewport, vizViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
173
176
 
174
177
  useEffect(() => {
175
178
  if (!mapSvg.current || coveLoadedHasRan) return
@@ -195,6 +198,9 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
195
198
  if (queryStringFilterValue) {
196
199
  filters[index].active = queryStringFilterValue
197
200
  }
201
+ if (isFilterHiddenByQuery(filter)) {
202
+ filters[index].showDropdown = false
203
+ }
198
204
  })
199
205
  dispatch({ type: 'SET_RUNTIME_FILTERS', payload: filters })
200
206
  }
@@ -229,7 +235,10 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
229
235
  } else {
230
236
  if (hashLegend !== runtimeLegend?.fromHash && undefined === runtimeData?.init) {
231
237
  const legend = generateRuntimeLegend(
232
- config,
238
+ {
239
+ ...config,
240
+ legend: { ...config.legend, unified: config.smallMultiples?.mode ? true : config.legend?.unified }
241
+ },
233
242
  runtimeData,
234
243
  hashLegend,
235
244
  setConfig,
@@ -245,7 +254,11 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
245
254
  useEffect(() => {
246
255
  const hashLegend = generateRuntimeLegendHash(config, runtimeFilters)
247
256
  const legend = generateRuntimeLegend(
248
- { ...config, data: configObj.data },
257
+ {
258
+ ...config,
259
+ data: configObj.data,
260
+ legend: { ...config.legend, unified: config.smallMultiples?.mode ? true : config.legend?.unified }
261
+ },
249
262
  runtimeData,
250
263
  hashLegend,
251
264
  setConfig,
@@ -327,6 +340,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
327
340
  container,
328
341
  content: modal,
329
342
  currentViewport,
343
+ vizViewport,
330
344
  customNavigationHandler,
331
345
  dimensions,
332
346
  filteredCountryCode,
@@ -379,6 +393,17 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
379
393
  </a>
380
394
  )
381
395
 
396
+ // Prepare data table props (pivot if small multiples mode is enabled)
397
+ let dataTableConfig = config
398
+ let dataTableColumns = columns
399
+ let dataTableRuntimeData = runtimeData
400
+ if (config.smallMultiples?.mode) {
401
+ const prepared = prepareSmallMultiplesDataTable(config, columns, runtimeData)
402
+ dataTableConfig = prepared.config
403
+ dataTableColumns = prepared.columns
404
+ dataTableRuntimeData = prepared.runtimeData
405
+ }
406
+
382
407
  return (
383
408
  <LegendMemoProvider legendMemo={legendMemo} legendSpecialClassLastMemo={legendSpecialClassLastMemo}>
384
409
  <ConfigContext.Provider value={mapProps}>
@@ -410,6 +435,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
410
435
  <Title
411
436
  title={title}
412
437
  superTitle={processedSuperTitle}
438
+ titleStyle={general.titleStyle}
439
+ showTitle={general.showTitle}
413
440
  config={config}
414
441
  classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${headerColor}`]}
415
442
  />
@@ -483,17 +510,16 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
483
510
 
484
511
  {processedSubtext.length > 0 && <p className='subtext mt-4'>{parse(processedSubtext)}</p>}
485
512
 
486
- <MapControls config={config} imageId={imageId} interactionLabel={interactionLabel} />
487
-
488
- {shouldShowDataTable(config, table, general, loading) && (
513
+ {/* Data Table or Download Links */}
514
+ {shouldShowDataTable(config, table, general, loading) ? (
489
515
  <DataTable
490
- columns={columns}
491
- config={config}
516
+ columns={dataTableColumns}
517
+ config={dataTableConfig}
492
518
  currentViewport={currentViewport}
493
519
  displayGeoName={displayGeoName}
494
520
  expandDataTable={table.expanded}
495
521
  formatLegendLocation={key =>
496
- formatLegendLocation(key, runtimeData?.[key]?.[config.columns.geo.name])
522
+ formatLegendLocation(key, dataTableRuntimeData?.[key]?.[config.columns.geo.name])
497
523
  }
498
524
  headerColor={general.headerColor}
499
525
  imageRef={imageId}
@@ -503,17 +529,47 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
503
529
  legendSpecialClassLastMemo={legendSpecialClassLastMemo}
504
530
  navigationHandler={navigationHandler}
505
531
  outerContainerRef={outerContainerRef}
506
- rawData={config.data}
507
- runtimeData={runtimeData}
532
+ rawData={dataTableConfig.data}
533
+ runtimeData={dataTableRuntimeData}
508
534
  runtimeLegend={runtimeLegend}
509
535
  showDownloadImgButton={showDownloadImgButton}
510
536
  showDownloadPdfButton={showDownloadPdfButton}
537
+ includeContextInDownload={config.general?.includeContextInDownload}
511
538
  tabbingId={tabId}
512
539
  tableTitle={table.label}
513
540
  vizTitle={general.title}
541
+ applyLegendToRow={applyLegendToRow}
542
+ getPatternForRow={getPatternForRow}
514
543
  wrapColumns={table.wrapColumns}
515
544
  interactionLabel={interactionLabel}
516
545
  />
546
+ ) : (
547
+ (showDownloadImgButton || showDownloadPdfButton) && (
548
+ <div className='w-100 d-flex justify-content-end'>
549
+ <MediaControls.Section classes={['download-links', 'mt-4', 'mb-2']}>
550
+ {showDownloadImgButton && (
551
+ <MediaControls.DownloadLink
552
+ type='image'
553
+ title='Download Map as Image'
554
+ state={config}
555
+ elementToCapture={imageId}
556
+ interactionLabel={interactionLabel}
557
+ includeContextInDownload={config.general?.includeContextInDownload}
558
+ />
559
+ )}
560
+ {showDownloadPdfButton && (
561
+ <MediaControls.DownloadLink
562
+ type='pdf'
563
+ title='Download Map as PDF'
564
+ state={config}
565
+ elementToCapture={imageId}
566
+ interactionLabel={interactionLabel}
567
+ includeContextInDownload={config.general?.includeContextInDownload}
568
+ />
569
+ )}
570
+ </MediaControls.Section>
571
+ </div>
572
+ )
517
573
  )}
518
574
 
519
575
  {config.annotations?.length > 0 && <Annotation.Dropdown />}
@@ -526,16 +582,14 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
526
582
  {accessibleStatus}
527
583
  </div>
528
584
 
529
- {!isDraggingAnnotation &&
530
- !window.matchMedia('(any-hover: none)').matches &&
531
- 'hover' === tooltips.appearanceType && (
532
- <ReactTooltip
533
- id={`tooltip__${tooltipId}`}
534
- float={true}
535
- className={`tooltip tooltip-test`}
536
- style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
537
- />
538
- )}
585
+ {!isDraggingAnnotation && 'hover' === tooltips.appearanceType && (
586
+ <ReactTooltip
587
+ id={`tooltip__${tooltipId}`}
588
+ float={true}
589
+ className={`tooltip tooltip-test`}
590
+ style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
591
+ />
592
+ )}
539
593
  <div
540
594
  ref={tooltipRef}
541
595
  id={`tooltip__${tooltipId}-canvas`}
@@ -547,7 +601,13 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
547
601
  display: 'none' // can't use d-none here
548
602
  }}
549
603
  ></div>
550
- <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
604
+ <FootnotesStandAlone
605
+ config={config.footnotes}
606
+ filters={config.filters?.filter(f => f.filterFootnotes)}
607
+ markupVariables={config.markupVariables}
608
+ enableMarkupVariables={config.enableMarkupVariables}
609
+ data={config.data}
610
+ />
551
611
  </Layout.Responsive>
552
612
  </Layout.VisualizationWrapper>
553
613
  </MapDispatchContext.Provider>
package/src/_stories/CdcMap.ColumnWrap.stories.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite'
2
+ import CdcMapComponent from '../CdcMapComponent'
3
+ import columnWrapTest from './_mock/column-wrap-test.json'
4
+ import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
5
+
6
+ const meta: Meta<typeof CdcMapComponent> = {
7
+ title: 'Components/Templates/Map/Column Wrapping',
8
+ component: CdcMapComponent
9
+ }
10
+
11
+ type Story = StoryObj<typeof CdcMapComponent>
12
+
13
+ export const Wrap_Columns_Enabled: Story = {
14
+ args: {
15
+ config: editConfigKeys(columnWrapTest, [
16
+ { path: ['table', 'wrapColumns'], value: true },
17
+ { path: ['table', 'expanded'], value: true }
18
+ ])
19
+ }
20
+ }
21
+
22
+ export const Wrap_Columns_Disabled: Story = {
23
+ args: {
24
+ config: editConfigKeys(columnWrapTest, [
25
+ { path: ['table', 'wrapColumns'], value: false },
26
+ { path: ['table', 'expanded'], value: true }
27
+ ])
28
+ }
29
+ }
30
+
31
+ export default meta