@cdc/core 4.25.7 → 4.25.10

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 (128) hide show
  1. package/components/AdvancedEditor/AdvancedEditor.tsx +29 -8
  2. package/components/DataTable/DataTable.tsx +63 -11
  3. package/components/DataTable/DataTableStandAlone.tsx +4 -1
  4. package/components/DataTable/components/ChartHeader.tsx +58 -9
  5. package/components/DataTable/components/ExpandCollapse.tsx +21 -1
  6. package/components/DataTable/components/MapHeader.tsx +35 -7
  7. package/components/DataTable/data-table.css +6 -0
  8. package/components/DataTable/helpers/chartCellMatrix.tsx +11 -8
  9. package/components/DataTable/helpers/mapCellMatrix.tsx +19 -1
  10. package/components/DownloadButton.tsx +42 -13
  11. package/components/EditorPanel/DataTableEditor.tsx +10 -1
  12. package/components/EditorPanel/components/MarkupHighlightedTextField.tsx +227 -0
  13. package/components/EditorPanel/components/MarkupVariablesEditor.tsx +411 -0
  14. package/components/EditorPanel/components/PanelMarkup.tsx +59 -0
  15. package/components/ErrorBoundary.jsx +3 -1
  16. package/components/Filters/Filters.tsx +35 -11
  17. package/components/Filters/components/Tabs.tsx +1 -0
  18. package/components/Footnotes/FootnotesStandAlone.tsx +2 -1
  19. package/components/Legend/Legend.Gradient.tsx +3 -6
  20. package/components/LegendShape.tsx +121 -3
  21. package/components/{MediaControls.jsx → MediaControls.tsx} +80 -16
  22. package/components/PaletteConversionModal.tsx +87 -0
  23. package/components/PaletteSelector/DeveloperPaletteRollback.tsx +114 -0
  24. package/components/PaletteSelector/PaletteSelector.css +51 -0
  25. package/components/PaletteSelector/PaletteSelector.tsx +112 -0
  26. package/components/PaletteSelector/index.ts +2 -0
  27. package/components/RichTooltip/RichTooltip.tsx +1 -0
  28. package/components/Table/Table.tsx +3 -1
  29. package/components/_stories/BlurStrokeTest.stories.tsx +1 -1
  30. package/components/_stories/DataTable.stories.tsx +1 -1
  31. package/components/_stories/Filters.stories.tsx +1 -1
  32. package/components/_stories/Footnotes.stories.tsx +1 -1
  33. package/components/_stories/Inputs.stories.tsx +1 -1
  34. package/components/_stories/MultiSelect.stories.tsx +3 -3
  35. package/components/_stories/NestedDropdown.stories.tsx +1 -1
  36. package/components/_stories/Table.stories.tsx +1 -1
  37. package/components/elements/_stories/Button.stories.tsx +1 -1
  38. package/components/elements/_stories/Card.stories.tsx +1 -1
  39. package/components/inputs/InputToggle.tsx +2 -0
  40. package/components/managers/DataDesigner.tsx +10 -9
  41. package/components/managers/_stories/DataDesigner.stories.tsx +1 -1
  42. package/components/ui/Tooltip.tsx +2 -1
  43. package/components/ui/_stories/Accordion.stories.tsx +1 -1
  44. package/components/ui/_stories/ColorPaletteMigration.stories.mdx +275 -0
  45. package/components/ui/_stories/Colors.stories.tsx +330 -0
  46. package/components/ui/_stories/IconGallery.stories.tsx +316 -0
  47. package/components/ui/_stories/Title.stories.tsx +1 -1
  48. package/contexts/EditorContext.ts +18 -0
  49. package/contexts/editor.actions.ts +28 -0
  50. package/contexts/editor.reducer.ts +94 -0
  51. package/data/chartColorPalettes.ts +118 -0
  52. package/data/colorPalettes.ts +9 -0
  53. package/data/mapColorPalettes.ts +45 -0
  54. package/data/sharedPalettes.ts +50 -0
  55. package/dist/cove-main.css +14 -13
  56. package/dist/cove-main.css.map +1 -1
  57. package/generateViteConfig.js +80 -0
  58. package/helpers/addValuesToFilters.ts +2 -3
  59. package/helpers/cloneConfig.ts +31 -0
  60. package/helpers/configDataHelpers.ts +128 -0
  61. package/helpers/configHelpers.ts +27 -0
  62. package/helpers/constants.ts +5 -2
  63. package/helpers/cove/number.ts +6 -2
  64. package/helpers/coveUpdateWorker.ts +15 -3
  65. package/helpers/events.ts +32 -0
  66. package/helpers/filterColorPalettes.ts +152 -0
  67. package/helpers/generateColorsArray.ts +13 -0
  68. package/helpers/getColorPaletteVersion.ts +33 -0
  69. package/helpers/getPaletteAccessor.ts +18 -0
  70. package/helpers/markupProcessor.ts +205 -0
  71. package/helpers/metrics/helpers.ts +75 -0
  72. package/helpers/metrics/types.ts +82 -0
  73. package/helpers/metrics/utils.ts +34 -0
  74. package/helpers/palettes/colorDistributions.ts +56 -0
  75. package/helpers/palettes/migratePaletteName.ts +150 -0
  76. package/helpers/palettes/standardizePaletteNames.ts +77 -0
  77. package/helpers/palettes/utils.ts +267 -0
  78. package/helpers/queryStringUtils.ts +13 -0
  79. package/helpers/testing.ts +345 -0
  80. package/helpers/tests/addValuesToFilters.test.ts +1 -2
  81. package/helpers/tests/generateColorsArray.test.ts +24 -0
  82. package/helpers/tests/markupProcessor.test.ts +538 -0
  83. package/helpers/tests/testStandaloneBuild.ts +44 -0
  84. package/helpers/useMarkupVariables.ts +31 -0
  85. package/helpers/vegaConfig.ts +0 -1
  86. package/helpers/ver/4.24.10.ts +2 -1
  87. package/helpers/ver/4.24.11.ts +2 -1
  88. package/helpers/ver/4.24.3.ts +2 -1
  89. package/helpers/ver/4.24.4.ts +2 -1
  90. package/helpers/ver/4.24.5.ts +2 -1
  91. package/helpers/ver/4.24.7.ts +2 -1
  92. package/helpers/ver/4.24.9.ts +2 -1
  93. package/helpers/ver/4.25.1.ts +2 -1
  94. package/helpers/ver/4.25.10.ts +36 -0
  95. package/helpers/ver/4.25.3.ts +2 -1
  96. package/helpers/ver/4.25.4.ts +2 -1
  97. package/helpers/ver/4.25.6.ts +2 -1
  98. package/helpers/ver/4.25.7.ts +2 -1
  99. package/helpers/ver/4.25.8.ts +62 -0
  100. package/helpers/ver/4.25.9.ts +293 -0
  101. package/helpers/ver/tests/4.25.10.test.ts +204 -0
  102. package/helpers/ver/tests/4.25.8.test.ts +86 -0
  103. package/helpers/ver/tests/4.25.9.test.ts +51 -0
  104. package/helpers/viewports.ts +2 -0
  105. package/hooks/useColorPalette.ts +79 -0
  106. package/package.json +12 -4
  107. package/styles/_button-section.scss +0 -2
  108. package/styles/_global.scss +7 -5
  109. package/styles/base.scss +8 -5
  110. package/styles/v2/components/button.scss +4 -3
  111. package/styles/v2/components/editor.scss +2 -1
  112. package/styles/v2/layout/_data-table.scss +3 -2
  113. package/styles/v2/themes/_color-definitions.scss +18 -17
  114. package/testBuild.js +0 -0
  115. package/testing-setup.js +32 -0
  116. package/types/ForecastingSeriesKey.ts +0 -1
  117. package/types/MarkupInclude.ts +6 -1
  118. package/types/MarkupVariable.ts +19 -0
  119. package/types/Series.ts +4 -0
  120. package/types/Table.ts +1 -0
  121. package/types/VizFilter.ts +1 -0
  122. package/vitest.config.ts +16 -0
  123. package/components/ui/_stories/Colors.stories.mdx +0 -220
  124. package/components/ui/_stories/IconGallery.stories.mdx +0 -14
  125. package/data/colorPalettes.js +0 -171
  126. package/helpers/events.js +0 -14
  127. package/helpers/formatConfigBeforeSave.ts +0 -135
  128. package/helpers/tests/formatConfigBeforeSave.test.ts +0 -68
@@ -1,4 +1,5 @@
1
1
  @use 'sass:string';
2
+ @use 'sass:list';
2
3
  @import './../../variables';
3
4
 
4
5
  $theme: (
@@ -82,8 +83,8 @@ $theme: (
82
83
  @each $theme-name, $theme-colors in $theme {
83
84
  // Header
84
85
  .theme-#{$theme-name} {
85
- background-color: string.unquote(nth($theme-colors, 1));
86
- border-color: string.unquote(nth($theme-colors, 2));
86
+ background-color: string.unquote(list.nth($theme-colors, 1));
87
+ border-color: string.unquote(list.nth($theme-colors, 2));
87
88
  border-bottom-style: solid;
88
89
  border-bottom-width: 4px;
89
90
  }
@@ -95,7 +96,7 @@ $theme: (
95
96
  &:not(.no-borders) {
96
97
  /// borders are the theme color
97
98
  &.component--has-borderColorTheme {
98
- border: 1px solid string.unquote(nth($theme-colors, 1));
99
+ border: 1px solid string.unquote(list.nth($theme-colors, 1));
99
100
  }
100
101
  /// using default border color to draw borders
101
102
  &:not(.component--has-borderColorTheme) {
@@ -108,23 +109,23 @@ $theme: (
108
109
 
109
110
  /// left accent bar
110
111
  &.component--has-accent {
111
- border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
112
+ border-left: 0.5rem solid string.unquote(list.nth($theme-colors, 1)) !important;
112
113
  }
113
114
 
114
115
  /// Apply a background color
115
116
  &.component--has-background:not(.component--hideBackgroundColor) {
116
- background: string.unquote(nth($theme-colors, 3));
117
+ background: string.unquote(list.nth($theme-colors, 3));
117
118
  }
118
119
  }
119
120
 
120
121
  .cove-component__header {
121
- border-color: string.unquote(nth($theme-colors, 2));
122
+ border-color: string.unquote(list.nth($theme-colors, 2));
122
123
  }
123
124
  }
124
125
 
125
126
  &.theme-#{$theme-name} {
126
127
  .cove-component__header {
127
- border-color: string.unquote(nth($theme-colors, 2));
128
+ border-color: string.unquote(list.nth($theme-colors, 2));
128
129
  }
129
130
  }
130
131
  }
@@ -135,42 +136,42 @@ $theme: (
135
136
  @each $theme-name, $theme-colors in $theme {
136
137
  &.theme-#{$theme-name} {
137
138
  .single-filters--tab .tab--active:not(.tab--simple) {
138
- border: 1px solid string.unquote(nth($theme-colors, 1));
139
- border-top: 3px solid string.unquote(nth($theme-colors, 1));
139
+ border: 1px solid string.unquote(list.nth($theme-colors, 1));
140
+ border-top: 3px solid string.unquote(list.nth($theme-colors, 1));
140
141
  border-bottom: none;
141
142
  }
142
143
 
143
144
  .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
144
- border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
145
+ border-bottom: 1px solid string.unquote(list.nth($theme-colors, 1));
145
146
  }
146
147
 
147
148
  .single-filters--pill .pill--active {
148
- background-color: string.unquote(nth($theme-colors, 1));
149
+ background-color: string.unquote(list.nth($theme-colors, 1));
149
150
  color: #fff;
150
151
  }
151
152
  }
152
153
 
153
154
  .theme-#{$theme-name} {
154
155
  .single-filters--tab .tab--active:not(.tab--simple) {
155
- border: 1px solid string.unquote(nth($theme-colors, 1));
156
- border-top: 3px solid string.unquote(nth($theme-colors, 1));
156
+ border: 1px solid string.unquote(list.nth($theme-colors, 1));
157
+ border-top: 3px solid string.unquote(list.nth($theme-colors, 1));
157
158
  border-bottom: none;
158
159
  }
159
160
 
160
161
  .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
161
- border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
162
+ border-bottom: 1px solid string.unquote(list.nth($theme-colors, 1));
162
163
  }
163
164
 
164
165
  .single-filters--pill .pill--active {
165
- background-color: string.unquote(nth($theme-colors, 1));
166
+ background-color: string.unquote(list.nth($theme-colors, 1));
166
167
  color: #fff;
167
168
  }
168
169
 
169
170
  .button__tab-bar--active {
170
- outline: 2px solid string.unquote(nth($theme-colors, 1));
171
+ outline: 2px solid string.unquote(list.nth($theme-colors, 1));
171
172
  }
172
173
  .apply:not([disabled]) {
173
- background-color: string.unquote(nth($theme-colors, 1));
174
+ background-color: string.unquote(list.nth($theme-colors, 1));
174
175
  }
175
176
  }
176
177
  }
package/testBuild.js ADDED
File without changes
@@ -0,0 +1,32 @@
1
+ import { expect, afterEach, describe, it } from 'vitest'
2
+ import { cleanup } from '@testing-library/react'
3
+ import matchers from '@testing-library/jest-dom/matchers'
4
+ import '@testing-library/jest-dom'
5
+ import '@testing-library/jest-dom/extend-expect'
6
+
7
+ // extends Vitest's expect method with methods from react-testing-library
8
+ expect.extend(matchers)
9
+
10
+ // Needed for globals
11
+ window.URL.createObjectURL = function () {}
12
+
13
+ // needed to get past watchMedia error.
14
+ // https://github.com/vitest-dev/vitest/issues/821
15
+ Object.defineProperty(window, 'matchMedia', {
16
+ writable: true,
17
+ value: vi.fn().mockImplementation(query => ({
18
+ matches: false,
19
+ media: query,
20
+ onchange: null,
21
+ addListener: vi.fn(), // deprecated
22
+ removeListener: vi.fn(), // deprecated
23
+ addEventListener: vi.fn(),
24
+ removeEventListener: vi.fn(),
25
+ dispatchEvent: vi.fn()
26
+ }))
27
+ })
28
+
29
+ // runs a cleanup after each test case (e.g. clearing jsdom)
30
+ afterEach(() => {
31
+ cleanup()
32
+ })
@@ -6,7 +6,6 @@ export type ForecastingSeriesKey = {
6
6
  confidenceIntervals: {
7
7
  high: string
8
8
  low: string
9
- showInTooltip: boolean
10
9
  }[]
11
10
  stageColumn: string
12
11
  stages: {
@@ -1,20 +1,25 @@
1
1
  import { Runtime } from '@cdc/core/types/Runtime'
2
2
  import { Variable } from '@cdc/markup-include/src/types/Variable'
3
3
  import { Visualization } from './Visualization'
4
+ import { VizFilter } from './VizFilter'
4
5
 
5
6
  export type MarkupIncludeConfig = Visualization & {
6
7
  contentEditor: {
7
8
  // Changing the base config object creates an infinite loop, nesting it is a workaround
8
9
  allowHideSection?: boolean
9
10
  inlineHTML: string
10
- markupVariables: Variable[]
11
+ markupVariables?: Variable[]
11
12
  showHeader: boolean
13
+ showNoDataMessage?: boolean
14
+ noDataMessageText?: string
12
15
  srcUrl: string
13
16
  title: string
14
17
  useInlineHTML: boolean
15
18
  }
16
19
  data?: Object[]
20
+ filters?: VizFilter[]
17
21
  formattedData: {}
22
+ markupVariables?: Variable[] // Support markupVariables at root level for backwards compatibility
18
23
  newViz?: boolean
19
24
  runtime?: Runtime
20
25
  visual: {
@@ -0,0 +1,19 @@
1
+ export type MarkupCondition = {
2
+ columnName: string
3
+ isOrIsNotEqualTo: 'is' | 'is not'
4
+ value: string
5
+ }
6
+
7
+ export type MarkupVariable = {
8
+ columnName: string
9
+ conditions: MarkupCondition[]
10
+ name: string
11
+ tag: string
12
+ addCommas?: boolean
13
+ hideOnNull?: boolean
14
+ }
15
+
16
+ export type MarkupConfig = {
17
+ markupVariables?: MarkupVariable[]
18
+ enableMarkupVariables?: boolean
19
+ }
package/types/Series.ts CHANGED
@@ -5,4 +5,8 @@ export type Series = {
5
5
  type: string
6
6
  tooltip: boolean
7
7
  dynamicCategory?: string
8
+ confidenceIntervals?: {
9
+ high: string
10
+ low: string
11
+ }[]
8
12
  }[]
package/types/Table.ts CHANGED
@@ -23,6 +23,7 @@ export type Table = {
23
23
  pivot?: Pivot
24
24
  show?: boolean
25
25
  sharedFilterColumns?: string[] // added at runtime by Dashboard
26
+ showBottomCollapse?: boolean // if true, the table will have a button to collapse at bottom of the expanded table
26
27
  showDataTableLink?: boolean
27
28
  showDownloadImgButton?: boolean
28
29
  showDownloadLinkBelow?: boolean
@@ -46,6 +46,7 @@ export type SubGrouping = {
46
46
  setByQueryParameter: string
47
47
  order?: OrderBy
48
48
  valuesLookup: Record<string, { orderedValues?: string[]; values: string[] }>
49
+ defaultValue?: string
49
50
  }
50
51
 
51
52
  export type VizFilter = GeneralFilter | MultiSelectFilter
@@ -0,0 +1,16 @@
1
+ import { defineConfig } from 'vitest/config'
2
+
3
+ export default defineConfig({
4
+ test: {
5
+ environment: 'jsdom',
6
+ globals: true,
7
+ setupFiles: ['../../vitest.setup.ts'],
8
+ exclude: [
9
+ '**/node_modules/**',
10
+ '**/dist/**',
11
+ '**/.storybook/**',
12
+ '**/*.stories.*',
13
+ '**/storybook-static/**'
14
+ ]
15
+ }
16
+ })
@@ -1,220 +0,0 @@
1
- import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
2
- import colorPalettes from '@cdc/core/data/colorPalettes'
3
-
4
- export const orderedPalettes = Object.keys(colorPalettes)
5
- .sort()
6
- .reduce((acc, key) => {
7
- acc[key] = colorPalettes[key]
8
- return acc
9
- }, {})
10
-
11
- export const paletteFriendlyNames = {
12
- 'yelloworangered': 'Yellow Orange Red',
13
- 'yelloworangebrown': 'Yellow Orange Brown',
14
- 'pinkpurple': 'Pink Purple',
15
- 'bluegreen': 'Blue Green',
16
- 'orangered': 'Orange Red',
17
- 'red': 'Red Scale',
18
- 'greenblue': 'Green Blue',
19
- 'yellowpurple': 'Yellow Purple',
20
- 'qualitative-bold': 'Bold Multi-Color',
21
- 'qualitative-soft': 'Soft Multi-Color',
22
- 'qualitative1': 'Multi-Color Set 1',
23
- 'qualitative2': 'Multi-Color Set 2',
24
- 'qualitative3': 'Multi-Color Set 3',
25
- 'qualitative4': 'Multi-Color Set 4',
26
- 'sequential-blue': 'Blue Sequential',
27
- 'sequential-blue-2-(MPX)': 'Blue Sequential Alt',
28
- 'sequential-blue-2(MPX)': 'Blue Sequential Alt',
29
- 'sequential-orange-(MPX)': 'Orange Sequential',
30
- 'sequential-orange(MPX)': 'Orange Sequential',
31
- 'sequential-green': 'Green Sequential',
32
- 'Sequential Blue': 'Blue Sequential',
33
- 'Sequential Blue Two': 'Blue Sequential Alt',
34
- 'Sequential Blue Three': 'Blue Sequential Extended',
35
- 'Sequential Orange': 'Orange Sequential',
36
- 'Sequential Orange Two': 'Orange Sequential Extended',
37
- 'Sequential Green': 'Green Sequential',
38
- 'monochrome-1': 'Blue Mono',
39
- 'monochrome-2': 'Purple Mono',
40
- 'monochrome-3': 'Lavender Mono',
41
- 'monochrome-4': 'Violet Mono',
42
- 'monochrome-5': 'Brown Mono',
43
- 'cool-1': 'Cool Green Blue',
44
- 'cool-2': 'Cool Blue Green',
45
- 'cool-3': 'Cool Purple Blue',
46
- 'cool-4': 'Cool Green Purple',
47
- 'cool-5': 'Cool Blue Purple',
48
- 'warm-1': 'Warm Red Peach',
49
- 'complementary-1': 'Blue Gold',
50
- 'complementary-2': 'Blue Orange',
51
- 'complementary-3': 'Purple Orange',
52
- 'complementary-4': 'Purple Gold',
53
- 'complementary-5': 'Pink Teal',
54
- 'colorblindsafe': 'Colorblind Safe',
55
- }
56
-
57
- export const getPaletteName = (paletteName) => {
58
- const isReversed = paletteName.endsWith('reverse');
59
- const baseName = isReversed ? paletteName.slice(0, -7) : paletteName; // Remove 'reverse' suffix
60
- const normalizedKey = baseName
61
- .toLowerCase()
62
- .replace(/\s+/g, '-')
63
- .replace(/-/g, ' ')
64
- .replace(/\(mpx\)/gi, ' (MonkeyPox)');
65
- const friendlyName = paletteFriendlyNames[normalizedKey] || baseName
66
- .replace(/-/g, ' ')
67
- .replace(/\(mpx\)/gi, ' (MonkeyPox)');
68
-
69
- const capitalizeWords = (str) => str.replace(/\b\w/g, (char) => char.toUpperCase());
70
- const formattedName = capitalizeWords(friendlyName);
71
-
72
- return isReversed ? `${formattedName} (Reversed)` : formattedName;
73
- };
74
-
75
- <Meta title="Design Systems/Colors" />
76
-
77
- # Visualization Color Palettes
78
- The color palettes are predefined sets of colors organized into categories like sequential, qualitative, and complementary groups. These groups are designed with visual clarity in mind to ensure a cohesive and effective representation of data. The palettes are listed alphabetically, with reversed versions placed directly next to their original counterparts to maintain consistency across the application. In the codebase, these palettes are dynamically applied to generate and display color schemes in various UI components, such as charts and visualizations.
79
-
80
- <ColorPalette>
81
- {Object.entries(orderedPalettes).map(([paletteName, colors]) => {
82
-
83
-
84
- return (
85
- <ColorItem
86
- key={paletteName}
87
- title={getPaletteName(paletteName)}
88
- colors={colors}
89
- />
90
- )}
91
- )}
92
- </ColorPalette>
93
-
94
- # CDC Specific & Additional Colors
95
- These are additional color palettes that can be used for various UI components. When using these consult CDC Level documentation.
96
-
97
-
98
- <ColorPalette>
99
- {[
100
- {
101
- title: 'Blue',
102
- colors: {
103
- Primary: '#005eaa',
104
- Secondary: '#88c3ea',
105
- Tertiary: '#c0e9ff',
106
- Quaternary: '#edf9ff'
107
- }
108
- },
109
- {
110
- title: 'Purple',
111
- colors: {
112
- Primary: '#712177',
113
- Secondary: '#b890bb',
114
- Tertiary: '#e3d3e4',
115
- Quaternary: '#f7f2f7'
116
- }
117
- },
118
- {
119
- title: 'Brown',
120
- colors: {
121
- Primary: '#705043',
122
- Secondary: '#ad907b',
123
- Tertiary: '#d7ccc8',
124
- Quaternary: '#f2ebe8'
125
- }
126
- },
127
- {
128
- title: 'Teal',
129
- colors: {
130
- Primary: '#00695c',
131
- Secondary: '#4ebaaa',
132
- Tertiary: '#ceece7',
133
- Quaternary: '#ebf7f5'
134
- }
135
- },
136
- {
137
- title: 'Pink',
138
- colors: {
139
- Primary: '#af4448',
140
- Secondary: '#e57373',
141
- Tertiary: '#ffc2c2',
142
- Quaternary: '#ffe7e7'
143
- }
144
- },
145
- {
146
- title: 'Orange',
147
- colors: {
148
- Primary: '#bb4d00',
149
- Secondary: '#ffad42',
150
- Tertiary: '#ffe97d',
151
- Quaternary: '#fff4cf'
152
- }
153
- },
154
- {
155
- title: 'Slate',
156
- colors: {
157
- Primary: '#29434e',
158
- Secondary: '#7e9ba5',
159
- Tertiary: '#b6c6d2',
160
- Quaternary: '#e2e8ed'
161
- }
162
- },
163
- {
164
- title: 'Indigo',
165
- colors: {
166
- Primary: '#26418f',
167
- Secondary: '#92a6dd',
168
- Tertiary: '#dee8ff',
169
- Quaternary: '#f2f6ff'
170
- }
171
- },
172
- {
173
- title: 'Cyan',
174
- colors: {
175
- Primary: '#006778',
176
- Secondary: '#65b0bd',
177
- Tertiary: '#cce5e9',
178
- Quaternary: '#ebf5f6'
179
- }
180
- },
181
- {
182
- title: 'Green',
183
- colors: {
184
- Primary: '#4b830d',
185
- Secondary: '#84bc49',
186
- Tertiary: '#dcedc8',
187
- Quaternary: '#f1f8e9'
188
- }
189
- },
190
- {
191
- title: 'Amber',
192
- colors: {
193
- Primary: '#fbab18',
194
- Secondary: '#ffd54f',
195
- Tertiary: '#ffecb3',
196
- Quaternary: '#fff7e1'
197
- }
198
- },
199
- {
200
- title: 'Grayscale',
201
- colors: {
202
- 'Base Color': '#333',
203
- 'Lightest Gray': '#f2f2f2',
204
- 'Light Gray': '#c7c7c7',
205
- 'Medium Gray': '#565656',
206
- 'Dark Gray': '#333',
207
- }
208
- },
209
- {
210
- title: 'White',
211
- colors: ['#FFF']
212
- },
213
- {
214
- title: 'Red',
215
- colors: ['#d8000c']
216
- }
217
- ].map(({ title, colors }) => (
218
- <ColorItem key={title} title={title} colors={colors} subtitle={'test'} />
219
- ))}
220
- </ColorPalette>
@@ -1,14 +0,0 @@
1
- import { Meta, IconGallery, IconItem } from '@storybook/blocks';
2
- import Icon, { ICON_TYPES } from '../Icon'
3
-
4
- <Meta title="Design Systems/Iconography" />
5
-
6
- # Iconography
7
-
8
- <IconGallery>
9
- {ICON_TYPES.map((name) => (
10
- <IconItem name={name}>
11
- <Icon display={name} />
12
- </IconItem>
13
- ))}
14
- </IconGallery>
@@ -1,171 +0,0 @@
1
- import { updatePaletteNames } from '../helpers/updatePaletteNames'
2
-
3
- const colorPalettesMap = {
4
- yelloworangered: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
5
- yelloworangebrown: [
6
- '#ffffe5',
7
- '#fff7bc',
8
- '#fee391',
9
- '#fec44f',
10
- '#fe9929',
11
- '#ec7014',
12
- '#cc4c02',
13
- '#993404',
14
- '#662506'
15
- ],
16
- pinkpurple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
17
- bluegreen: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
18
- orangered: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
19
- red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
20
- greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
21
- yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
22
- qualitative1: [
23
- '#a6cee3',
24
- '#1f78b4',
25
- '#b2df8a',
26
- '#33a02c',
27
- '#fb9a99',
28
- '#e31a1c',
29
- '#6a3d9a',
30
- '#cab2d6',
31
- '#E31A90',
32
- '#15017A',
33
- '#C2C0FC'
34
- ],
35
- qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
36
- qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
37
- qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
38
- // qualitative9 doesn't appear to be used anywhere...
39
- qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
40
- 'sequential-blue-2(MPX)': [
41
- '#F5FEFF',
42
- '#E1FBFF',
43
- '#C0F2FD',
44
- '#94E2ED',
45
- '#5EBAD4',
46
- '#3695BE',
47
- '#2273A0',
48
- '#0E5181',
49
- '#093460'
50
- ],
51
- 'sequential-orange(MPX)': [
52
- '#FFFDF0',
53
- '#FFF7DC',
54
- '#FFE9C2',
55
- '#FFD097',
56
- '#F7A866',
57
- '#EB7723',
58
- '#B95117',
59
- '#853209',
60
- '#661F00'
61
- ],
62
- colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
63
- }
64
-
65
- // * ============= Palettes for Chart project ========== * //
66
-
67
- const colorPalettes2 = {
68
- 'qualitative-bold': [
69
- '#377eb8',
70
- '#ff7f00',
71
- '#4daf4a',
72
- '#984ea3',
73
- '#e41a1c',
74
- '#ffff33',
75
- '#a65628',
76
- '#f781bf',
77
- '#3399CC'
78
- ],
79
-
80
- 'qualitative-soft': [
81
- '#A6CEE3',
82
- '#1F78B4',
83
- '#B2DF8A',
84
- '#33A02C',
85
- '#FB9A99',
86
- '#E31A1C',
87
- '#FDBF6F',
88
- '#FF7F00',
89
- '#ACA9EB'
90
- ],
91
- qualitative1: [
92
- '#a6cee3',
93
- '#1f78b4',
94
- '#b2df8a',
95
- '#33a02c',
96
- '#fb9a99',
97
- '#e31a1c',
98
- '#6a3d9a',
99
- '#cab2d6',
100
- '#E31A90',
101
- '#15017A',
102
- '#C2C0FC'
103
- ],
104
-
105
- qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
106
-
107
- qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
108
-
109
- qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
110
-
111
- 'sequential-blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
112
- 'sequential-blue-2-(MPX)': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
113
- 'sequential-orange-(MPX)': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
114
- 'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32'],
115
-
116
- colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
117
- }
118
- // * ============= Palettes for Paired bar Chart ========== * //
119
- export const colorPalettes3 = {
120
- 'monochrome-1': ['#A6CEE3', '#15017A'],
121
- 'monochrome-2': ['#C2C0FC', '#15017A'],
122
- 'monochrome-3': ['#cab2d6', '#6a3d9a'],
123
- 'monochrome-4': ['#C2C0FC', '#6a3d9a'],
124
- 'monochrome-5': ['#fedab8', '#bf5b17'],
125
- 'cool-1': ['#b2df8a', '#1f78b4'],
126
- 'cool-2': ['#a6cee3', '#72D66B'],
127
- 'cool-3': ['#C2C0FC', '#386cb0'],
128
- 'cool-4': ['#72D66B', '#6a3d9a'],
129
- 'cool-5': ['#a6cee3', '#6a3d9a'],
130
- 'warm-1': ['#e31a1c', '#fedab8'],
131
- 'complementary-1': ['#1f78b4', '#e6ab02'],
132
- 'complementary-2': ['#1f78b4', '#ff7f00'],
133
- 'complementary-3': ['#6a3d9a', '#ff7f00'],
134
- 'complementary-4': ['#6a3d9a', '#e6ab02'],
135
- 'complementary-5': ['#df168c', '#1EB386']
136
- }
137
-
138
- const sequentialColors = {
139
- 'Sequential Blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
140
- 'Sequential Blue Two': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
141
- 'Sequential Blue Three': [
142
- '#F5FEFF',
143
- '#E1FBFF',
144
- '#C0F2FD',
145
- '#94E2ED',
146
- '#5EBAD4',
147
- '#3695BE',
148
- '#2273A0',
149
- '#0E5181',
150
- '#093460'
151
- ],
152
- 'Sequential Orange': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
153
- 'Sequential Orange Two': [
154
- '#FFFDF0',
155
- '#FFF7DC',
156
- '#FFE9C2',
157
- '#FFD097',
158
- '#F7A866',
159
- '#EB7723',
160
- '#B95117',
161
- '#853209',
162
- '#661F00'
163
- ],
164
- 'Sequential Green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
165
- }
166
-
167
- export const sequentialPalettes = sequentialColors
168
- export const colorPalettesChart = updatePaletteNames(colorPalettes2)
169
- const colorPalettes = updatePaletteNames(colorPalettesMap)
170
- export const twoColorPalette = updatePaletteNames(colorPalettes3)
171
- export default colorPalettes
package/helpers/events.js DELETED
@@ -1,14 +0,0 @@
1
- function subscribe(eventName, listener) {
2
- document.addEventListener(eventName, listener)
3
- }
4
-
5
- function unsubscribe(eventName, listener) {
6
- document.removeEventListener(eventName, listener)
7
- }
8
-
9
- function publish(eventName, data) {
10
- const event = new CustomEvent(eventName, { detail: data })
11
- document.dispatchEvent(event)
12
- }
13
-
14
- export { publish, subscribe, unsubscribe }