diff --git a/.storybook/coreStyles_storybook.scss b/.storybook/coreStyles_storybook.scss new file mode 100644 index 000000000..d90e9c24f --- /dev/null +++ b/.storybook/coreStyles_storybook.scss @@ -0,0 +1,6 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/heading-colors'; +@import '@cdc/core/styles/v2/themes/color-definitions'; +@import '@cdc/core/styles/variables'; +@import '@cdc/core/styles/v2/components/ui/tooltip'; +@import '@cdc/core/styles/v2/main.scss' \ No newline at end of file diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 624c0f8db..cd4080db7 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,5 +1,6 @@ import { previewTheme } from './coveSbThemes' import * as React from 'react' +import './coreStyles_storybook.scss' export const parameters = { options: { diff --git a/packages/chart/src/components/EditorPanel/components/panels.scss b/packages/chart/src/components/EditorPanel/components/panels.scss index e5c154f67..10d5da7eb 100644 --- a/packages/chart/src/components/EditorPanel/components/panels.scss +++ b/packages/chart/src/components/EditorPanel/components/panels.scss @@ -1,9 +1,7 @@ -@import '@cdc/core/styles/v2/themes/color-definitions'; - .date-highlight { select, input { - background: $lightestGray; + background: var(--lightestGray); } &__day-selection { @@ -15,17 +13,17 @@ .week-button { margin-bottom: 0; border-radius: 50%; - color: $darkGray; + color: var(--darkGray); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; - background: $lightestGray; + background: var(--lightestGray); margin: 5px 2px 0; &--active { - background: $primary; + background: var(--primary); color: white; } } diff --git a/packages/chart/src/components/EditorPanel/editor-panel.scss b/packages/chart/src/components/EditorPanel/editor-panel.scss index 0f209e8fc..ec2e20e96 100644 --- a/packages/chart/src/components/EditorPanel/editor-panel.scss +++ b/packages/chart/src/components/EditorPanel/editor-panel.scss @@ -1,11 +1,3 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/v2/themes/color-definitions'; - -//TODO: Remove after COVE refactor -.cove { - @import '@cdc/core/styles/v2/layout/tooltip.scss'; -} - .cdc-open-viz-module.type-chart { .viewport-overrides { button { diff --git a/packages/chart/src/coreStyles_chart.scss b/packages/chart/src/coreStyles_chart.scss new file mode 100644 index 000000000..2eb7f09bf --- /dev/null +++ b/packages/chart/src/coreStyles_chart.scss @@ -0,0 +1,3 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/heading-colors'; +@import '@cdc/core/styles/v2/themes/color-definitions'; \ No newline at end of file diff --git a/packages/chart/src/index.jsx b/packages/chart/src/index.jsx index 27c9c4d29..b3a672864 100644 --- a/packages/chart/src/index.jsx +++ b/packages/chart/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import CdcChart from './CdcChart' +import './coreStyles_chart.scss' import 'react-tooltip/dist/react-tooltip.css' diff --git a/packages/chart/src/scss/main.scss b/packages/chart/src/scss/main.scss index 564138675..17e16a9b6 100644 --- a/packages/chart/src/scss/main.scss +++ b/packages/chart/src/scss/main.scss @@ -1,6 +1,50 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/heading-colors'; -@import '@cdc/core/styles/v2/themes/color-definitions'; +@mixin breakpoint($class) { + @if $class == xs { + @media (max-width: 767px) { + @content; + } + } @else if $class == sm { + @media (min-width: 768px) { + @content; + } + } @else if $class == md { + @media (min-width: 960px) { + @content; + } + } @else if $class == lg { + @media (min-width: 1300px) { + @content; + } + } @else { + @warn "Breakpoint mixin supports: xs, sm, md, lg"; + } +} + +@mixin breakpointClass($class) { + @if $class == xs { + &.xs, + &.xxs { + @content; + } + } @else if $class == sm { + &.sm, + &.md, + &.lg { + @content; + } + } @else if $class == md { + &.md, + &.lg { + @content; + } + } @else if $class == lg { + &.lg { + @content; + } + } @else { + @warn "Breakpoint Class mixin supports: xs, sm, md, lg"; + } +} .form-container { overflow-y: auto; @@ -129,7 +173,7 @@ padding: 15px; vertical-align: top; text-align: left; - border: 1px solid $lightGray; + border: 1px solid var(--lightGray); position: relative; &__inner { diff --git a/packages/core/components/Layout/components/Sidebar/components/sidebar.styles.scss b/packages/core/components/Layout/components/Sidebar/components/sidebar.styles.scss index 1b8c1330d..246b1f651 100644 --- a/packages/core/components/Layout/components/Sidebar/components/sidebar.styles.scss +++ b/packages/core/components/Layout/components/Sidebar/components/sidebar.styles.scss @@ -1,5 +1,3 @@ -@import '@cdc/core/styles/v2/themes/_color-definitions.scss'; - .cdc-editor .configure .type-dashboard .sidebar { top: 0; } @@ -210,7 +208,7 @@ svg { width: 60px; - color: $blue; + color: var(--blue); margin-right: 1rem; height: 60px; // IE11 path { diff --git a/packages/core/styles/_global-variables.scss b/packages/core/styles/_global-variables.scss index 8af268329..bcfed7754 100644 --- a/packages/core/styles/_global-variables.scss +++ b/packages/core/styles/_global-variables.scss @@ -69,6 +69,7 @@ $colors: ( @each $key, $value in $colors { --#{$key}: #{$value}; } + --editorWidth: 350px; } } diff --git a/packages/core/styles/_reset.scss b/packages/core/styles/_reset.scss index a40b9e316..d3280a9af 100644 --- a/packages/core/styles/_reset.scss +++ b/packages/core/styles/_reset.scss @@ -146,11 +146,4 @@ half as far down as the superscript moved up */ bottom: -0.25em; } - - ul > li:first-child { - margin-top: auto; - } - ul > li:last-of-type { - margin-bottom: auto; - } } diff --git a/packages/dashboard/src/CdcDashboardComponent.tsx b/packages/dashboard/src/CdcDashboardComponent.tsx index 6d1172ccb..d327d2854 100644 --- a/packages/dashboard/src/CdcDashboardComponent.tsx +++ b/packages/dashboard/src/CdcDashboardComponent.tsx @@ -19,12 +19,12 @@ import Loading from '@cdc/core/components/Loading' import { DataTransform } from '@cdc/core/helpers/DataTransform' import getViewport from '@cdc/core/helpers/getViewport' -import CdcMap from '@cdc/map' -import CdcChart from '@cdc/chart' -import CdcDataBite from '@cdc/data-bite' -import CdcWaffleChart from '@cdc/waffle-chart' -import CdcMarkupInclude from '@cdc/markup-include' -import CdcFilteredText from '@cdc/filtered-text' +import CdcChart from '@cdc/chart/src/CdcChart' +import CdcDataBite from '@cdc/data-bite/src/CdcDataBite' +import CdcMap from '@cdc/map/src/CdcMap' +import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart' +import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude' +import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText' import Grid from './components/Grid' import Header from './components/Header/Header' @@ -32,7 +32,6 @@ import DataTable from '@cdc/core/components/DataTable' import MediaControls from '@cdc/core/components/MediaControls' import './scss/main.scss' -import '@cdc/core/styles/v2/main.scss' import VisualizationsPanel from './components/VisualizationsPanel' import dashboardReducer from './store/dashboard.reducer' diff --git a/packages/dashboard/src/components/VisualizationRow.tsx b/packages/dashboard/src/components/VisualizationRow.tsx index f4c17c3b9..85f055c5f 100644 --- a/packages/dashboard/src/components/VisualizationRow.tsx +++ b/packages/dashboard/src/components/VisualizationRow.tsx @@ -3,12 +3,12 @@ import React, { useContext, useMemo } from 'react' import Toggle from './Toggle' import _ from 'lodash' import { ConfigRow } from '../types/ConfigRow' -import CdcChart from '@cdc/chart' -import CdcDataBite from '@cdc/data-bite' -import CdcMap from '@cdc/map' -import CdcWaffleChart from '@cdc/waffle-chart' -import CdcMarkupInclude from '@cdc/markup-include' -import CdcFilteredText from '@cdc/filtered-text' +import CdcChart from '@cdc/chart/src/CdcChart' +import CdcDataBite from '@cdc/data-bite/src/CdcDataBite' +import CdcMap from '@cdc/map/src/CdcMap' +import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart' +import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude' +import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText' import DashboardSharedFilters, { APIFilterDropdowns } from './DashboardFilters' import { DashboardContext } from '../DashboardContext' import { ViewPort } from '@cdc/core/types/ViewPort' @@ -27,10 +27,21 @@ type VisualizationWrapperProps = { row: ConfigRow } -const VisualizationWrapper: React.FC = ({ allExpanded, currentViewport, groupName, row, children }) => { +const VisualizationWrapper: React.FC = ({ + allExpanded, + currentViewport, + groupName, + row, + children +}) => { return row.expandCollapseAllButtons ? (
- + {children}
@@ -54,7 +65,17 @@ type VizRowProps = { currentViewport: ViewPort } -const VisualizationRow: React.FC = ({ allExpanded, filteredDataOverride, groupName, row, rowIndex: index, setSharedFilter, updateChildConfig, apiFilterDropdowns, currentViewport }) => { +const VisualizationRow: React.FC = ({ + allExpanded, + filteredDataOverride, + groupName, + row, + rowIndex: index, + setSharedFilter, + updateChildConfig, + apiFilterDropdowns, + currentViewport +}) => { const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext) const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0)) const setToggled = (colIndex: number) => { @@ -81,7 +102,9 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver }, [config, row, rawData, dashboardFilteredData]) const applyButtonNotClicked = (vizConfig: DashboardFilters): boolean => { - const dashboardFilters = Object.values(config.visualizations).filter(v => v.type === 'dashboardFilters') as DashboardFilters[] + const dashboardFilters = Object.values(config.visualizations).filter( + v => v.type === 'dashboardFilters' + ) as DashboardFilters[] const applyFilters = dashboardFilters.filter(v => !v.autoLoad).flatMap(v => v.sharedFilterIndexes) if (hasDashboardApplyBehavior(config.visualizations) && vizConfig.autoLoad) { return applyFilters.some(index => { @@ -94,8 +117,13 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver return false } return ( -
- {row.toggle && } +
+ {row.toggle && ( + + )} {row.columns.map((col, colIndex) => { if (col.width) { if (!col.widget) return
@@ -108,14 +136,21 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver } } - const setsSharedFilter = config.dashboard.sharedFilters && config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0 - const setSharedFilterValue = setsSharedFilter ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active : undefined + const setsSharedFilter = + config.dashboard.sharedFilters && + config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0 + const setSharedFilterValue = setsSharedFilter + ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active + : undefined const tableLink = ( {visualizationConfig.dataKey} (Go to Table) ) - const hideFilter = inNoDataState && visualizationConfig.type === 'dashboardFilters' && applyButtonNotClicked(visualizationConfig) + const hideFilter = + inNoDataState && + visualizationConfig.type === 'dashboardFilters' && + applyButtonNotClicked(visualizationConfig) const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex]) @@ -123,7 +158,12 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver return (
- + {visualizationConfig.type === 'chart' && ( = ({ allExpanded, filteredDataOver }} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} isDashboard={true} - link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined} + link={ + config.table && + config.table.show && + config.datasets && + visualizationConfig.table && + visualizationConfig.table.showDataTableLink + ? tableLink + : undefined + } configUrl={undefined} setEditing={undefined} hostname={undefined} @@ -154,7 +202,15 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} setSharedFilterValue={setSharedFilterValue} isDashboard={true} - link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined} + link={ + config.table && + config.table.show && + config.datasets && + visualizationConfig.table && + visualizationConfig.table.showDataTableLink + ? tableLink + : undefined + } /> )} {visualizationConfig.type === 'data-bite' && ( @@ -177,7 +233,15 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver updateChildConfig(col.widget, newConfig) }} isDashboard={true} - configUrl={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined} + configUrl={ + config.table && + config.table.show && + config.datasets && + visualizationConfig.table && + visualizationConfig.table.showDataTableLink + ? tableLink + : undefined + } /> )} {visualizationConfig.type === 'markup-include' && ( @@ -226,14 +290,28 @@ const VisualizationRow: React.FC = ({ allExpanded, filteredDataOver viewport={currentViewport} /> )} - {visualizationConfig.type === 'footnotes' && } + {visualizationConfig.type === 'footnotes' && ( + + )}
) } return })} - {row.footnotesId ? : null} + {row.footnotesId ? ( + + ) : null}
) } diff --git a/packages/dashboard/src/coreStyles_dashboard.scss b/packages/dashboard/src/coreStyles_dashboard.scss new file mode 100644 index 000000000..9762f35e1 --- /dev/null +++ b/packages/dashboard/src/coreStyles_dashboard.scss @@ -0,0 +1,3 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/heading-colors'; +@import '@cdc/core/styles/v2/main.scss' \ No newline at end of file diff --git a/packages/dashboard/src/index.tsx b/packages/dashboard/src/index.tsx index b12201448..b0e8fec25 100644 --- a/packages/dashboard/src/index.tsx +++ b/packages/dashboard/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import MultiDashboardWrapper from './CdcDashboard' +import './coreStyles_dashboard.scss' let isEditor = window.location.href.includes('editor=true') let isDebug = window.location.href.includes('debug=true') @@ -10,6 +11,10 @@ let domContainer = document.getElementsByClassName('react-container')[0] ReactDOM.createRoot(domContainer).render( - + ) diff --git a/packages/dashboard/src/scss/editor-panel.scss b/packages/dashboard/src/scss/editor-panel.scss index fb601e547..548e8730f 100644 --- a/packages/dashboard/src/scss/editor-panel.scss +++ b/packages/dashboard/src/scss/editor-panel.scss @@ -17,10 +17,6 @@ } .editor-panel { - //TODO: Remove after COVE refactor - &.cove { - @import '@cdc/core/styles/v2/layout/tooltip.scss'; - } .two-col-inputs { display: flex; @@ -61,7 +57,7 @@ } .series-list { list-style: none; - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; &:empty { border: none !important; } @@ -72,7 +68,7 @@ justify-content: space-between; font-size: 0.9em; &:hover { - background-color: $lightestGray; + background-color: var(--lightestGray); } span { font-size: 0.8em; @@ -80,12 +76,12 @@ cursor: pointer; } + li { - border-top: $lightGray 1px solid; + border-top: var(--lightGray) 1px solid; } } } background: #fff; - width: $editorWidth; + width: var(--editorWidth); overflow-y: overlay; position: absolute; z-index: 8; @@ -95,7 +91,7 @@ top: 0; bottom: 0; .accordion__heading { - background: $lightestGray; + background: var(--lightestGray); } .accordion__item { select { @@ -107,7 +103,7 @@ } } .form-container { - border-right: $lightGray 1px solid; + border-right: var(--lightGray) 1px solid; flex-grow: 1; } .guidance-link { @@ -115,7 +111,7 @@ padding: 0.75em 1em; svg { width: 60px; - color: $blue; + color: var(--blue); margin-right: 1rem; height: 60px; // IE11 path { @@ -619,7 +615,7 @@ } .editor-panel:not(.hidden) + .cdc-dashboard-inner-container { - padding-left: $editorWidth; + padding-left: var(--editorWidth); } .subheading-3 { diff --git a/packages/dashboard/src/scss/grid.scss b/packages/dashboard/src/scss/grid.scss index 7e72fea81..30789e558 100644 --- a/packages/dashboard/src/scss/grid.scss +++ b/packages/dashboard/src/scss/grid.scss @@ -4,7 +4,7 @@ $red: #f74242; .layout-container { display: flex; margin-top: -80vh; - margin-left: calc($editorWidth + 1em); + margin-left: calc(var(--editorWidth) + 1em); } .hidden.editor-panel + .builder-grid { @@ -140,7 +140,7 @@ $red: #f74242; .column--drop { background-color: #e8f4ff; - border: 2px dashed $blue-light; + border: 2px dashed var(--blue)-light; background-image: none; } @@ -167,13 +167,13 @@ $red: #f74242; font-style: normal; font-size: 13px; line-height: 19px; - color: $mediumGray; + color: var(--mediumGray); } .widget { display: flex; height: 100%; - border: 1px solid $lightGray; + border: 1px solid var(--lightGray); background-color: #fff; text-align: center; border-radius: 2px; @@ -185,6 +185,8 @@ $red: #f74242; cursor: move; &:hover { + $lightGray: #c7c7c7; + $mediumGray: #565656; border-color: darken($lightGray, 20%); .widget-menu-item svg { @@ -205,7 +207,7 @@ $red: #f74242; .drag-icon, .drag-icon svg { - fill: $lightGray; + fill: var(--lightGray); } .drag-icon { @@ -239,7 +241,7 @@ $red: #f74242; font-family: sans-serif; font-weight: 400; font-style: normal; - color: $darkGray; + color: var(--darkGray); flex-grow: 1; max-height: 100%; display: flex; @@ -288,7 +290,7 @@ $red: #f74242; margin-top: 5px; svg { - fill: $mediumGray; + fill: var(--mediumGray); } } @@ -322,8 +324,8 @@ $red: #f74242; transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1); background-color: #c2c2c2; &:hover { - border-color: $blue; - background-color: $blue; + border-color: var(--blue); + background-color: var(--blue); } } @@ -357,8 +359,8 @@ $red: #f74242; &:hover { .row-menu .row-menu__btn { - background-color: $blue; - + background-color: var(--blue); + $blue: #005eaa; &:hover { background-color: lighten($blue, 8%); } @@ -373,8 +375,8 @@ $red: #f74242; } .column-container { - border-color: $blue; + border-color: var(--blue); } - border-color: $blue; + border-color: var(--blue); } } diff --git a/packages/dashboard/src/scss/main.scss b/packages/dashboard/src/scss/main.scss index cfbabbc48..0357a1ebf 100644 --- a/packages/dashboard/src/scss/main.scss +++ b/packages/dashboard/src/scss/main.scss @@ -1,7 +1,4 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/heading-colors'; @import 'mixins'; -@import 'variables'; .cdc-open-viz-module.type-dashboard { @import 'editor-panel'; @@ -88,20 +85,20 @@ border-bottom: #c7c7c7 1px solid; li { padding: 0.3em 1.5em; - color: $mediumGray; + color: var(--mediumGray); cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; &.active { - border-bottom-color: $mediumGray; + border-bottom-color: var(--mediumGray); border-bottom-style: inherit; border-bottom-width: 5px; - color: $darkGray; + color: var(--darkGray); } &:hover { - border-bottom-color: $darkGray; - color: $darkGray; + border-bottom-color: var(--darkGray); + color: var(--darkGray); } } @@ -190,7 +187,7 @@ .collapsable-multiviz-container { position: relative; - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; clear: both; margin-bottom: 20px; .multi-visualiation-heading { @@ -211,6 +208,7 @@ position: relative; } @include breakpoint(xs) { + $font-small: 0.7em; font-size: $font-small + 0.2em; } } diff --git a/packages/dashboard/src/scss/mixins.scss b/packages/dashboard/src/scss/mixins.scss index e69de29bb..747bfdbe4 100644 --- a/packages/dashboard/src/scss/mixins.scss +++ b/packages/dashboard/src/scss/mixins.scss @@ -0,0 +1,47 @@ +@mixin breakpoint($class) { + @if $class == xs { + @media (max-width: 767px) { + @content; + } + } @else if $class == sm { + @media (min-width: 768px) { + @content; + } + } @else if $class == md { + @media (min-width: 960px) { + @content; + } + } @else if $class == lg { + @media (min-width: 1300px) { + @content; + } + } @else { + @warn "Breakpoint mixin supports: xs, sm, md, lg"; + } +} + +@mixin breakpointClass($class) { + @if $class == xs { + &.xs, + &.xxs { + @content; + } + } @else if $class == sm { + &.sm, + &.md, + &.lg { + @content; + } + } @else if $class == md { + &.md, + &.lg { + @content; + } + } @else if $class == lg { + &.lg { + @content; + } + } @else { + @warn "Breakpoint Class mixin supports: xs, sm, md, lg"; + } +} \ No newline at end of file diff --git a/packages/data-bite/src/coreStyles_databite.scss b/packages/data-bite/src/coreStyles_databite.scss new file mode 100644 index 000000000..2eb7f09bf --- /dev/null +++ b/packages/data-bite/src/coreStyles_databite.scss @@ -0,0 +1,3 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/heading-colors'; +@import '@cdc/core/styles/v2/themes/color-definitions'; \ No newline at end of file diff --git a/packages/data-bite/src/index.jsx b/packages/data-bite/src/index.jsx index 1feea8e2a..d95c32e07 100644 --- a/packages/data-bite/src/index.jsx +++ b/packages/data-bite/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import CdcDataBite from './CdcDataBite' +import './coreStyles_databite.scss' let isEditor = window.location.href.includes('editor=true') @@ -10,5 +11,5 @@ let domContainer = document.getElementsByClassName('react-container')[0] ReactDOM.createRoot(domContainer).render( - , + ) diff --git a/packages/data-bite/src/scss/bite.scss b/packages/data-bite/src/scss/bite.scss index 212252180..8e7a08621 100644 --- a/packages/data-bite/src/scss/bite.scss +++ b/packages/data-bite/src/scss/bite.scss @@ -1,68 +1,67 @@ -@import '../../../core/styles/variables'; &.theme-blue { .bite-value { - color: $primary; + color: var(--primary); } } &.theme-purple { .bite-value { - color: $purple-primary; + color: var(--purple-primary); } } &.theme-amber { .bite-value { - color: $amber-primary; + color: var(--amber-primary); } } &.theme-orange { .bite-value { - color: $orange-primary; + color: var(--orange-primary); } } &.theme-brown { .bite-value { - color: $brown-primary; + color: var(--brown-primary); } } &.theme-teal { .bite-value { - color: $teal-primary; + color: var(--teal-primary); } } &.theme-pink { .bite-value { - color: $pink-primary; + color: var(--pink-primary); } } &.theme-slate { .bite-value { - color: $slate-primary; + color: var(--slate-primary); } } &.theme-indigo { .bite-value { - color: $indigo-primary; + color: var(--indigo-primary); } } &.theme-cyan { .bite-value { - color: $cyan-primary; + color: var(--cyan-primary); } } &.theme-green { .bite-value { - color: $green-primary; + color: var(--green-primary); } } @@ -160,67 +159,67 @@ &.theme-blue { .bite-value { - color: $primary; + color: var(--primary); } } &.theme-purple { .bite-value { - color: $purple-primary; + color: var(--purple-primary); } } &.theme-amber { .bite-value { - color: $amber-primary; + color: var(--amber-primary); } } &.theme-orange { .bite-value { - color: $orange-primary; + color: var(--orange-primary); } } &.theme-brown { .bite-value { - color: $brown-primary; + color: var(--brown-primary); } } &.theme-teal { .bite-value { - color: $teal-primary; + color: var(--teal-primary); } } &.theme-pink { .bite-value { - color: $pink-primary; + color: var(--pink-primary); } } &.theme-slate { .bite-value { - color: $slate-primary; + color: var(--slate-primary); } } &.theme-indigo { .bite-value { - color: $indigo-primary; + color: var(--indigo-primary); } } &.theme-cyan { .bite-value { - color: $cyan-primary; + color: var(--cyan-primary); } } &.theme-green { .bite-value { - color: $green-primary; + color: var(--green-primary); } } @@ -359,10 +358,10 @@ } .cove-component__content { - background: $lightestGray; + background: var(--lightestGray); &:not(.no-borders) { - border-color: $lightGray; + border-color: var(--lightGray); border-width: 1px; border-style: solid; } diff --git a/packages/data-bite/src/scss/editor-panel.scss b/packages/data-bite/src/scss/editor-panel.scss index 87c87ca0c..76f1f7c64 100644 --- a/packages/data-bite/src/scss/editor-panel.scss +++ b/packages/data-bite/src/scss/editor-panel.scss @@ -7,11 +7,6 @@ } .editor-panel { - //TODO: Remove after COVE refactor - &.cove { - @import '@cdc/core/styles/v2/layout/tooltip.scss'; - } - .text-center { text-align: center; } diff --git a/packages/data-bite/src/scss/main.scss b/packages/data-bite/src/scss/main.scss index 90e83aef4..3053391ff 100644 --- a/packages/data-bite/src/scss/main.scss +++ b/packages/data-bite/src/scss/main.scss @@ -1,11 +1,7 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/heading-colors'; -@import '@cdc/core/styles/v2/themes/color-definitions'; @import 'variables'; .cdc-open-viz-module.type-data-bite { @import 'bite'; - // @import 'editor-panel'; .visually-hidden { position: fixed; left: -10000px; diff --git a/packages/editor/src/components/ConfigureTab.tsx b/packages/editor/src/components/ConfigureTab.tsx index 8eeba313f..f32ba687e 100644 --- a/packages/editor/src/components/ConfigureTab.tsx +++ b/packages/editor/src/components/ConfigureTab.tsx @@ -1,12 +1,10 @@ import React, { useContext } from 'react' -import CdcMap from '@cdc/map' // TODO: Lazy load this -import CdcChart from '@cdc/chart' // TODO: Lazy load this -import CdcDataBite from '@cdc/data-bite' -import CdcWaffleChart from '@cdc/waffle-chart' -import CdcMarkupInclude from '@cdc/markup-include' - -import '../scss/configure-tab.scss' +import CdcMap from '@cdc/map/src/CdcMap' // TODO: Lazy load this +import CdcChart from '@cdc/chart/src/CdcChart' // TODO: Lazy load this +import CdcDataBite from '@cdc/data-bite/src/CdcDataBite' +import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart' +import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude' import ErrorBoundary from '@cdc/core/components/ErrorBoundary' import ConfigContext from '../ConfigContext' @@ -21,7 +19,14 @@ export default function ConfigureTab({ containerEl }) { case 'map': return ( - + ) case 'waffle-chart': diff --git a/packages/editor/src/coreStyles_editor.scss b/packages/editor/src/coreStyles_editor.scss new file mode 100644 index 000000000..4af5a086f --- /dev/null +++ b/packages/editor/src/coreStyles_editor.scss @@ -0,0 +1,2 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/variables'; \ No newline at end of file diff --git a/packages/editor/src/index.jsx b/packages/editor/src/index.jsx index 08714c12b..6cc98d97e 100644 --- a/packages/editor/src/index.jsx +++ b/packages/editor/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import CdcEditor from './CdcEditor' +import './coreStyles_editor.scss' // Allow URL query to preselect a tab in standalone mode const standaloneParams = new URLSearchParams(window.location.search) diff --git a/packages/editor/src/scss/_variables.scss b/packages/editor/src/scss/_variables.scss index 1ead6739c..d77d958e9 100644 --- a/packages/editor/src/scss/_variables.scss +++ b/packages/editor/src/scss/_variables.scss @@ -1,5 +1,3 @@ -@import '@cdc/core/styles/variables'; - $xxs: 350px; $xs: 576px; $sm: 768px; diff --git a/packages/editor/src/scss/choose-vis-tab.scss b/packages/editor/src/scss/choose-vis-tab.scss index 26ea822c2..6ad8bb03b 100644 --- a/packages/editor/src/scss/choose-vis-tab.scss +++ b/packages/editor/src/scss/choose-vis-tab.scss @@ -19,14 +19,14 @@ } button { background-color: #fff; - color: $baseColor; + color: var(--baseColor); border: solid 1px; border-color: rgb(199, 199, 199); padding: 1.3em $gbl-padding; height: 100%; align-items: center; display: flex; - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; margin-right: 1em; cursor: pointer; transition: 0.1s all; diff --git a/packages/editor/src/scss/configure-tab.scss b/packages/editor/src/scss/configure-tab.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/editor/src/scss/data-import.scss b/packages/editor/src/scss/data-import.scss index 4bc56081f..a81fdf0fb 100644 --- a/packages/editor/src/scss/data-import.scss +++ b/packages/editor/src/scss/data-import.scss @@ -7,7 +7,7 @@ background: #fff; padding: $gbl-padding; width: 50%; - border-right: $lightGray 1px solid; + border-right: var(--lightGray) 1px solid; position: fixed; bottom: 0; left: 0; @@ -36,25 +36,25 @@ list-style: none; padding: 0.6rem 0; flex-grow: 1; - border-bottom: $lightGray 1px solid; - color: $mediumGray; + border-bottom: var(--lightGray) 1px solid; + color: var(--mediumGray); align-items: center; svg { margin-right: 0.3em; } &:hover { - border-bottom-color: $mediumGray; + border-bottom-color: var(--mediumGray); } &.active { border-bottom-width: 5px; - border-bottom-color: $mediumGray; - color: $darkGray; + border-bottom-color: var(--mediumGray); + color: var(--darkGray); } } .tab-content { padding-top: $gbl-padding; - border-top: 1px solid $baseColor; + border-top: 1px solid var(--baseColor); } } table { @@ -82,16 +82,16 @@ .cdcdataviz-file-selector { padding: 1rem 3rem; text-align: center; - border: $lightGray 2px dashed; + border: var(--lightGray) 2px dashed; border-radius: 0.2rem; cursor: pointer; font-size: 1em; - color: $mediumGray; + color: var(--mediumGray); transition: 0.1s all; svg { max-width: 35px; margin: 0 auto 0.5em; - color: $baseColor; + color: var(--baseColor); transition: 0.1s all; path { fill: currentColor; @@ -106,7 +106,7 @@ } span { white-space: pre; - color: $blue; + color: var(--blue); text-decoration: underline; } } @@ -114,13 +114,14 @@ font-size: 0.8rem; font-style: italic; margin: 1em 0 2em 0; - color: $mediumGray; + color: var(--mediumGray); } .btn { display: inline-block; margin: 1em 0; } .btn.active { + $primary: #005eaa; background: darken($primary, 15%); } .input-group { @@ -134,7 +135,7 @@ .keep-url { font-size: 0.8rem; - color: $mediumGray; + color: var(--mediumGray); } .sample-data-list { @@ -142,7 +143,7 @@ list-style: none; li { margin-top: 0.3rem; - color: $blue; + color: var(--blue); text-decoration: underline; cursor: pointer; } diff --git a/packages/editor/src/scss/main.scss b/packages/editor/src/scss/main.scss index 24f33fef7..b275722b3 100644 --- a/packages/editor/src/scss/main.scss +++ b/packages/editor/src/scss/main.scss @@ -1,4 +1,3 @@ -@import '@cdc/core/styles/base'; @import 'variables'; .cdc-open-viz-module.cdc-editor { @@ -31,12 +30,12 @@ li { background: #f2f2f2; line-height: 3rem; - border-bottom: 1px solid $lightGray; + border-bottom: 1px solid var(--lightGray); color: #333; flex-grow: 1; flex-shrink: 0; width: 25%; - border-right: 1px solid $lightGray; + border-right: 1px solid var(--lightGray); text-align: center; &:last-child { border-right: none; @@ -70,7 +69,7 @@ } } .info-box { - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; padding: 1rem; font-size: 0.9rem; h4 { @@ -213,11 +212,6 @@ } } -//TODO: Remove after refactor to wizard -.cdc-open-viz-module .cove-temp { - @import '@cdc/core/styles/v2/layout/_tooltip.scss'; -} - section.introText { padding: 15px; } diff --git a/packages/filtered-text/src/coreStyles_filteredtext.scss b/packages/filtered-text/src/coreStyles_filteredtext.scss new file mode 100644 index 000000000..8ba218f74 --- /dev/null +++ b/packages/filtered-text/src/coreStyles_filteredtext.scss @@ -0,0 +1 @@ +@import '@cdc/core/styles/base'; \ No newline at end of file diff --git a/packages/filtered-text/src/index.jsx b/packages/filtered-text/src/index.jsx index 36c5b4b53..3085845eb 100644 --- a/packages/filtered-text/src/index.jsx +++ b/packages/filtered-text/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import CdcFilteredText from './CdcFilteredText' +import './coreStyles_filteredtext.scss' //@ts-ignore let isEditor = window.location.href.includes('editor=true') @@ -11,5 +12,5 @@ let domContainer = document.getElementsByClassName('react-container')[0] ReactDOM.createRoot(domContainer).render( - , + ) diff --git a/packages/filtered-text/src/scss/main.scss b/packages/filtered-text/src/scss/main.scss index 0e0a74120..49d634f8d 100644 --- a/packages/filtered-text/src/scss/main.scss +++ b/packages/filtered-text/src/scss/main.scss @@ -1,5 +1,3 @@ -@import '@cdc/core/styles/base'; - .cdc-open-viz-module.isEditor { background: transparent; } diff --git a/packages/map/src/components/Legend/components/index.scss b/packages/map/src/components/Legend/components/index.scss index 9515ea996..32ae753ef 100644 --- a/packages/map/src/components/Legend/components/index.scss +++ b/packages/map/src/components/Legend/components/index.scss @@ -1,5 +1,4 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/heading-colors'; +@import '../../../scss/mixins'; .cdc-map-inner-container { .map-container.world aside.side { @@ -7,7 +6,7 @@ } @include breakpointClass(md) { .map-container.world aside.side { - border-top: $lightGray 1px solid; + border-top: var(--lightGray) 1px solid; position: absolute; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px; } @@ -16,10 +15,10 @@ aside { background-color: #fff; z-index: 6; - border-top: $lightGray 1px solid; + border-top: var(--lightGray) 1px solid; @include breakpointClass(md) { &.bottom { - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; } &.side { z-index: 1; @@ -30,7 +29,7 @@ align-self: flex-start; z-index: 4; right: 1em; - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; top: 2em; right: 1em; diff --git a/packages/map/src/coreStyles_map.scss b/packages/map/src/coreStyles_map.scss new file mode 100644 index 000000000..14857919a --- /dev/null +++ b/packages/map/src/coreStyles_map.scss @@ -0,0 +1,3 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/heading-colors'; +@import '@cdc/core/styles/v2/components/ui/tooltip'; diff --git a/packages/map/src/index.jsx b/packages/map/src/index.jsx index 5eb38e9e7..820ab4e7b 100644 --- a/packages/map/src/index.jsx +++ b/packages/map/src/index.jsx @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client' import CdcMap from './CdcMap' import 'react-tooltip/dist/react-tooltip.css' +import './coreStyles_map.scss' let isEditor = window.location.href.includes('editor=true') let isDebug = window.location.href.includes('debug=true') @@ -11,6 +12,11 @@ let domContainer = document.getElementsByClassName('react-container')[0] ReactDOM.createRoot(domContainer).render( - + ) diff --git a/packages/map/src/scss/editor-panel.scss b/packages/map/src/scss/editor-panel.scss index 4136a4877..1542df976 100644 --- a/packages/map/src/scss/editor-panel.scss +++ b/packages/map/src/scss/editor-panel.scss @@ -18,7 +18,7 @@ .geo-buttons { list-style: none; display: flex; - color: $mediumGray; + color: var(--mediumGray); svg { display: block; max-width: 80px; @@ -33,7 +33,7 @@ background: transparent; padding: 0.3em 0.75em; display: flex; - border: $lightGray 1px solid; + border: var(--lightGray) 1px solid; width: 40%; align-items: center; margin-right: 1em; @@ -110,11 +110,6 @@ } .editor-panel { - //TODO: Remove after COVE refactor - &.cove { - @import '@cdc/core/styles/v2/layout/tooltip.scss'; - } - .cove-input-group, .cove-accordion__small-inputs { position: relative; @@ -191,10 +186,10 @@ } .accordion__heading { - background: $lightestGray; + background: var(--lightestGray); } .form-container { - border-right: $lightGray 1px solid; + border-right: var(--lightGray) 1px solid; flex-grow: 1; } .guidance-link { @@ -207,7 +202,7 @@ } svg { width: 60px; - color: $blue; + color: var(--blue); margin-right: 1rem; height: 60px; // IE11 path { diff --git a/packages/map/src/scss/main.scss b/packages/map/src/scss/main.scss index 3fc92fcea..ab9b03348 100644 --- a/packages/map/src/scss/main.scss +++ b/packages/map/src/scss/main.scss @@ -1,9 +1,8 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/heading-colors'; +@import 'mixins'; + @import 'variables'; @import 'editor-panel'; @import 'filters'; -@import '@cdc/core/styles/v2/components/ui/tooltip'; .type-map--has-error { overflow: hidden !important; @@ -39,7 +38,7 @@ @include breakpointClass(md) { .map-container.modal-background::before { - border-bottom: $lightGray 1px solid; + border-bottom: var(--lightGray) 1px solid; margin-bottom: -1px; bottom: 1px; } @@ -194,7 +193,7 @@ padding: 1em; z-index: 6; width: 100%; - border-top: $lightGray 1px solid; + border-top: var(--lightGray) 1px solid; label { flex-grow: 1; > div.select-heading { diff --git a/packages/map/src/scss/map.scss b/packages/map/src/scss/map.scss index b15e54da6..8829af2fb 100644 --- a/packages/map/src/scss/map.scss +++ b/packages/map/src/scss/map.scss @@ -31,7 +31,7 @@ header + .map-container.full-border { // World Specific Styles .map-container.world { &.data .geography-container { - border-bottom: $lightGray 1px solid; + border-bottom: var(--lightGray) 1px solid; } .geography-container { cursor: move; diff --git a/packages/map/src/scss/mixins.scss b/packages/map/src/scss/mixins.scss new file mode 100644 index 000000000..747bfdbe4 --- /dev/null +++ b/packages/map/src/scss/mixins.scss @@ -0,0 +1,47 @@ +@mixin breakpoint($class) { + @if $class == xs { + @media (max-width: 767px) { + @content; + } + } @else if $class == sm { + @media (min-width: 768px) { + @content; + } + } @else if $class == md { + @media (min-width: 960px) { + @content; + } + } @else if $class == lg { + @media (min-width: 1300px) { + @content; + } + } @else { + @warn "Breakpoint mixin supports: xs, sm, md, lg"; + } +} + +@mixin breakpointClass($class) { + @if $class == xs { + &.xs, + &.xxs { + @content; + } + } @else if $class == sm { + &.sm, + &.md, + &.lg { + @content; + } + } @else if $class == md { + &.md, + &.lg { + @content; + } + } @else if $class == lg { + &.lg { + @content; + } + } @else { + @warn "Breakpoint Class mixin supports: xs, sm, md, lg"; + } +} \ No newline at end of file diff --git a/packages/markup-include/src/coreStyles_markupinclude.scss b/packages/markup-include/src/coreStyles_markupinclude.scss new file mode 100644 index 000000000..8ba218f74 --- /dev/null +++ b/packages/markup-include/src/coreStyles_markupinclude.scss @@ -0,0 +1 @@ +@import '@cdc/core/styles/base'; \ No newline at end of file diff --git a/packages/markup-include/src/index.jsx b/packages/markup-include/src/index.jsx index 92816821c..e7f2f6e5e 100644 --- a/packages/markup-include/src/index.jsx +++ b/packages/markup-include/src/index.jsx @@ -5,6 +5,8 @@ import { GlobalContextProvider } from '@cdc/core/components/GlobalContext' import CdcMarkupInclude from './CdcMarkupInclude' +import './coreStyles_markupinclude.scss' + let isEditor = window.location.href.includes('editor=true') let domContainer = document.getElementsByClassName('react-container')[0] @@ -14,5 +16,5 @@ ReactDOM.createRoot(domContainer).render( - , + ) diff --git a/packages/markup-include/src/scss/main.scss b/packages/markup-include/src/scss/main.scss index 149401b85..61f1d3b30 100644 --- a/packages/markup-include/src/scss/main.scss +++ b/packages/markup-include/src/scss/main.scss @@ -1,5 +1,3 @@ -@import '@cdc/core/styles/base'; - .markup-include { .checkbox-group { padding: 16px; diff --git a/packages/waffle-chart/src/coreStyles_wafflechart.scss b/packages/waffle-chart/src/coreStyles_wafflechart.scss new file mode 100644 index 000000000..2eb7f09bf --- /dev/null +++ b/packages/waffle-chart/src/coreStyles_wafflechart.scss @@ -0,0 +1,3 @@ +@import '@cdc/core/styles/base'; +@import '@cdc/core/styles/heading-colors'; +@import '@cdc/core/styles/v2/themes/color-definitions'; \ No newline at end of file diff --git a/packages/waffle-chart/src/index.jsx b/packages/waffle-chart/src/index.jsx index 35f1a707b..755520980 100644 --- a/packages/waffle-chart/src/index.jsx +++ b/packages/waffle-chart/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import CdcWaffleChart from './CdcWaffleChart' +import './coreStyles_wafflechart.scss' let isEditor = window.location.href.includes('editor=true') @@ -10,5 +11,5 @@ let domContainer = document.getElementsByClassName('react-container')[0] ReactDOM.createRoot(domContainer).render( - , + ) diff --git a/packages/waffle-chart/src/scss/main.scss b/packages/waffle-chart/src/scss/main.scss index 495408272..9072f6d52 100644 --- a/packages/waffle-chart/src/scss/main.scss +++ b/packages/waffle-chart/src/scss/main.scss @@ -1,6 +1,3 @@ -@import '@cdc/core/styles/base'; -@import '@cdc/core/styles/heading-colors'; -@import '@cdc/core/styles/v2/themes/color-definitions'; @import 'waffle-chart'; .cdc-open-viz-module.type-waffle-chart {