@cdc/core 4.23.9 → 4.23.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 (29) hide show
  1. package/components/AdvancedEditor.jsx +1 -1
  2. package/components/DataTable.jsx +242 -201
  3. package/components/Filters.jsx +7 -5
  4. package/components/{GlobalContext.jsx → GlobalContext.tsx} +16 -5
  5. package/components/MediaControls.jsx +7 -6
  6. package/components/elements/_stories/Button.stories.tsx +28 -0
  7. package/components/elements/_stories/Card.stories.tsx +21 -0
  8. package/components/managers/_stories/DataDesigner.stories.tsx +26 -0
  9. package/components/ui/Accordion.jsx +1 -1
  10. package/components/ui/Icon.jsx +3 -1
  11. package/components/ui/Modal.jsx +1 -1
  12. package/components/ui/Select.jsx +30 -0
  13. package/components/ui/Tooltip.jsx +3 -2
  14. package/components/ui/_stories/Accordion.stories.tsx +36 -0
  15. package/components/ui/_stories/Icon.stories.tsx +22 -0
  16. package/data/colorPalettes.js +11 -0
  17. package/helpers/{DataTransform.js → DataTransform.ts} +26 -18
  18. package/helpers/fetchRemoteData.js +3 -9
  19. package/helpers/gatherQueryParams.ts +7 -0
  20. package/helpers/getFileExtension.ts +5 -0
  21. package/helpers/lineChartHelpers.js +7 -0
  22. package/helpers/useDataVizClasses.js +9 -3
  23. package/package.json +2 -2
  24. package/styles/_data-table.scss +25 -9
  25. package/styles/_reset.scss +6 -0
  26. package/styles/_typography.scss +20 -0
  27. package/styles/base.scss +1 -0
  28. package/styles/v2/layout/_component.scss +3 -3
  29. package/styles/v2/themes/_color-definitions.scss +27 -45
package/styles/v2/themes/_color-definitions.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:string';
2
+ @import './../../variables';
2
3
 
3
4
  $theme: (
4
5
  'amber': (
@@ -87,62 +88,43 @@ $theme: (
87
88
  }
88
89
 
89
90
  &.theme-#{$theme-name} {
90
- .cove-component__content:not(.no-borders).component--has-borderColorTheme {
91
- border-left: 1px solid string.unquote(nth($theme-colors, 1));
92
- border-right: 1px solid string.unquote(nth($theme-colors, 1));
93
- border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
94
- }
95
-
96
- // when component doesn't have a title add border top
97
- .cove-component__inner:not(.component--has-title) .cove-component__content.component--has-borderColorTheme:not(.no-borders) {
98
- border-top: 1px solid string.unquote(nth($theme-colors, 1));
99
- }
100
-
101
- .cove-component__inner:not(.component--has-title) .cove-component__content {
102
- border-top: 1px solid #ccc;
91
+ /// area that appears underneath the title of the component.
92
+ .cove-component__content {
93
+ /// when there are borders on a component
94
+ &:not(.no-borders) {
95
+ /// borders are the theme color
96
+ &.component--has-borderColorTheme {
97
+ border: 1px solid string.unquote(nth($theme-colors, 1));
98
+ }
99
+ /// using default border color to draw borders
100
+ &:not(.component--has-borderColorTheme) {
101
+ border: 1px solid $lightGray;
102
+ }
103
+ &.component--has-title {
104
+ border-top: none !important;
105
+ }
106
+ }
107
+
108
+ /// left accent bar
109
+ &.component--has-accent {
110
+ border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
111
+ }
112
+
113
+ /// Apply a background color
114
+ &.component--has-background:not(.component--hideBackgroundColor) {
115
+ background: string.unquote(nth($theme-colors, 3));
116
+ }
103
117
  }
104
118
 
105
119
  .cove-component__header {
106
120
  border-color: string.unquote(nth($theme-colors, 2));
107
121
  }
108
-
109
- .cove-component__content.component--has-accent {
110
- border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
111
- }
112
-
113
- .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
114
- background: string.unquote(nth($theme-colors, 3));
115
- }
116
122
  }
117
123
 
118
124
  &.theme-#{$theme-name} {
119
- .cove-component__content:not(.no-borders).component--has-borderColorTheme {
120
- border-left: 1px solid string.unquote(nth($theme-colors, 1));
121
- border-right: 1px solid string.unquote(nth($theme-colors, 1));
122
- border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
123
- }
124
-
125
- // when component doesn't have a title add border top
126
- .cove-component__inner:not(.component--has-title) .cove-component__content.component--has-borderColorTheme:not(.no-borders) {
127
- border-top: 1px solid string.unquote(nth($theme-colors, 1));
128
- }
129
-
130
- // should probably be in color definitions but logically makes sense here.
131
- .cove-component__inner:not(.component--has-title) .cove-component__content {
132
- border-top: 1px solid #ccc;
133
- }
134
-
135
125
  .cove-component__header {
136
126
  border-color: string.unquote(nth($theme-colors, 2));
137
127
  }
138
-
139
- .cove-component__content.component--has-accent {
140
- border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
141
- }
142
-
143
- .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
144
- background: string.unquote(nth($theme-colors, 3));
145
- }
146
128
  }
147
129
  }
148
130
  }