@cdc/data-bite 1.1.2 → 1.1.3

package/src/components/EditorPanel.js

@@ -1,20 +1,22 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
+import React, { memo, useContext, useEffect, useState } from 'react'
 
 import {
   Accordion,
   AccordionItem,
+  AccordionItemButton,
   AccordionItemHeading,
   AccordionItemPanel,
-  AccordionItemButton,
-} from 'react-accessible-accordion';
+} from 'react-accessible-accordion'
 
-import { useDebounce } from 'use-debounce';
-import Context from '../context';
-import WarningImage from '../images/warning.svg';
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
-import { IMAGE_POSITIONS, BITE_LOCATIONS, DATA_FUNCTIONS } from '../CdcDataBite'
+import { useDebounce } from 'use-debounce'
+import Context from '../context'
+import WarningImage from '../images/warning.svg'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { BITE_LOCATIONS, DATA_FUNCTIONS, IMAGE_POSITIONS, DATA_OPERATORS } from '../CdcDataBite'
 
-const TextField = memo(({label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = "input", i = null, min = null, max = null, ...attributes}) => {
+const TextField = memo(({label, section = null, subsection = null, fieldName, updateField, value: stateValue, tooltip, type = "input", i = null, min = null, max = null, ...attributes}) => {
   const [ value, setValue ] = useState(stateValue);
 
   const [ debouncedValue ] = useDebounce(value, 500);
@@ -53,17 +55,22 @@ const TextField = memo(({label, section = null, subsection = null, fieldName, up
   }
 
   return (
-    <label>
-      <span className="edit-label column-heading">{label}</span>
-      {formElement}
-    </label>
+    <>
+      {label && label.length > 0 &&
+        <label>
+          <span className="edit-label column-heading">{label}{tooltip}</span>
+          {formElement}
+        </label>
+      }
+      {(!label || label.length === 0) && formElement}
+    </>
   )
 })
 
-const CheckBox = memo(({label, value, fieldName, section = null, subsection = null, updateField, ...attributes}) => (
+const CheckBox = memo(({label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes}) => (
   <label className="checkbox">
     <input type="checkbox" name={fieldName} checked={ value } onChange={() => { updateField(section, subsection, fieldName, !value) }} {...attributes}/>
-    <span className="edit-label">{label}</span>
+    <span className="edit-label column-heading">{label}</span><span className="cove-icon">{tooltip}</span>
   </label>
 ))
 
@@ -190,14 +197,15 @@ const EditorPanel = memo(() => {
 
   const convertStateToConfig = () => {
     let strippedState = JSON.parse(JSON.stringify(config))
-    if(false === missingRequiredSections()) {
-      delete strippedState.newViz
-    }
+    //if(false === missingRequiredSections()) {
+      //strippedState.newViz
+    //}
     delete strippedState.runtime
 
     return strippedState
   }
 
+  // Filters -----------------------------------------------
   const removeFilter = (index) => {
     let filters = [...config.filters];
 
@@ -224,10 +232,12 @@ const EditorPanel = memo(() => {
 
   const getColumns = (filter = true) => {
     let columns = {}
+      if(data.length){
+        data.map(row => {
+          return Object.keys(row).forEach(columnName => columns[columnName] = true)
+         })
+      }
 
-    data.map(row => {
-      Object.keys(row).forEach(columnName => columns[columnName] = true)
-    })
 
     return Object.keys(columns)
   }
@@ -246,6 +256,54 @@ const EditorPanel = memo(() => {
     return filterDataOptions;
   }
 
+  // Dynamic Images ----------------------------------------
+  const updateDynamicImage = (name, index, subindex = null, value) => {
+    let imageOptions = [...config.imageData.options];
+    null === subindex ? imageOptions[index][name] = value : imageOptions[index].arguments[subindex][name] = value
+
+    let payload = {...config.imageData, options: imageOptions}
+    updateConfig({...config, imageData: payload});
+  }
+
+  const setDynamicArgument = (optionIndex, name, value) => {
+    let imageArguments = [...config.imageData.options[optionIndex].arguments]
+        imageArguments[1] = {...imageArguments[1], [name]: value }
+    let argumentsPayload = {...config.imageData.options[optionIndex], arguments: imageArguments}
+    let optionsPayload = [...config.imageData.options]
+        optionsPayload[optionIndex] = argumentsPayload
+    let payload = {...config.imageData, options: optionsPayload}
+    updateConfig({...config, imageData: payload})
+  }
+
+  const removeDynamicArgument = (optionIndex) => {
+    if (config.imageData.options[optionIndex].arguments.length > 1) {
+      let imageArguments = [...config.imageData.options[optionIndex].arguments]
+          imageArguments.pop()
+      let argumentsPayload = {...config.imageData.options[optionIndex], arguments: imageArguments}
+      let optionsPayload = [...config.imageData.options]
+          optionsPayload[optionIndex] = argumentsPayload
+      let payload = {...config.imageData, options: optionsPayload}
+      updateConfig({...config, imageData: payload})
+    }
+  }
+
+  const addDynamicImage = () => {
+    let imageOptions = config.imageData.options ? [ ...config.imageData.options ] : []
+    imageOptions.push({ source: '', arguments: [{ operator: '', threshold: ''}], alt: '', secondArgument: false })
+
+    let payload = {...config.imageData, options: imageOptions}
+    updateConfig({...config, imageData: payload})
+  }
+
+  const removeDynamicImage = (index) => {
+    let imageOptions = [...config.imageData.options];
+    imageOptions.splice(index, 1);
+
+    let payload = {...config.imageData, options: imageOptions}
+    updateConfig({...config, imageData: payload});
+  }
+
+  // General -----------------------------------------------
   if(loading) {
     return null
   }
@@ -254,8 +312,8 @@ const EditorPanel = memo(() => {
     <ErrorBoundary component="EditorPanel">
       {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error /> }
       {(!config.dataColumn || !config.dataFunction) && <Confirm />}
-      <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
-      <section className={displayPanel ? 'editor-panel' : 'hidden editor-panel'}>
+      <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
+      <section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}>
         <div className="heading-2">Configure Data Bite</div>
         <section className="form-container">
           <form>
@@ -269,12 +327,35 @@ const EditorPanel = memo(() => {
                 <AccordionItemPanel>
                   <Select value={config.biteStyle} fieldName="biteStyle" label="Data Bite Style" updateField={updateField} options={BITE_LOCATIONS} initial="Select" />
                   <TextField value={config.title} fieldName="title" label="Title" placeholder="Data Bite Title" updateField={updateField} />
-                  <TextField type="textarea" value={config.biteBody} fieldName="biteBody" label="Message" updateField={updateField} />
-                  <TextField value={config.subtext} fieldName="subtext" label="Subtext/Citation" placeholder="Data Bite Subtext or Citation" updateField={updateField} />
+                  <TextField type="textarea" value={config.biteBody} fieldName="biteBody" label="Message" updateField={updateField} tooltip={
+                    <Tooltip style={{textTransform: 'none'}}>
+                      <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }/>
+                  <TextField value={config.subtext} fieldName="subtext" label="Subtext/Citation" placeholder="Data Bite Subtext or Citation" updateField={updateField} tooltip={
+                    <Tooltip style={{textTransform: 'none'}}>
+                      <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }/>
+                  <CheckBox value={config.general.isCompactStyle} section="general" fieldName="isCompactStyle" label="Compact Style" updateField={updateField} tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }} /></Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>Simple data bite style that formats certain elements for a more compact view.</p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  } />
                 </AccordionItemPanel>
               </AccordionItem>
 
-              <AccordionItem>
+              <AccordionItem> {/*Data*/}
                 <AccordionItemHeading>
                   <AccordionItemButton>
                     Data {(!config.dataColumn || !config.dataFunction) && <WarningImage width="25" className="warning-icon" />}
@@ -292,23 +373,37 @@ const EditorPanel = memo(() => {
                     <li className="three-col">
                       <TextField value={config.dataFormat.prefix} section="dataFormat" fieldName="prefix" label="Prefix" updateField={updateField} />
                       <TextField value={config.dataFormat.suffix} section="dataFormat" fieldName="suffix" label="Suffix" updateField={updateField} />
-                      <TextField type="number" value={config.dataFormat.roundToPlace} section="dataFormat" fieldName="roundToPlace" label="Round" updateField={updateField} />
+                      <TextField  type="number" value={config.dataFormat.roundToPlace} section="dataFormat" fieldName="roundToPlace" label="Round" updateField={updateField} min='0' max='99'  />
                     </li>
                   </ul>
                   <CheckBox value={config.dataFormat.commas} section="dataFormat" fieldName="commas" label="Add commas" updateField={updateField} />
+                  <CheckBox value={config.dataFormat.ignoreZeros} section="dataFormat" fieldName="ignoreZeros" label="Ignore Zeros" updateField={updateField} />
                   <hr className="accordion__divider" />
+
+                  <label style={{marginBottom: '1rem'}}>
+                    <span className="edit-label">
+                      Data Point Filters
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>To refine the highlighted data point, specify one or more filters (e.g., "Male" and
+                            "Female" for a column called "Sex").</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
+                  </label>
                   {
                     config.filters &&
                     <ul className="filters-list">
                       {config.filters.map((filter, index) => (
-                        <fieldset className="edit-block">
+                        <fieldset className="edit-block" key={index}>
                           <button type="button" className="remove-column" onClick={() => {removeFilter(index)}}>Remove</button>
                           <label>
                             <span className="edit-label column-heading">Column</span>
-                            <select value={filter.columnName} onChange={(e) => {updateFilterProp('columnName', index, e.target.value)}}>
+                            <select value={filter.columnName ? filter.columnName : ''} onChange={(e) => {updateFilterProp('columnName', index, e.target.value)}}>
                               <option value="">- Select Option -</option>
-                              {getColumns().map((dataKey) => (
-                                <option value={dataKey}>{dataKey}</option>
+                              {getColumns().map((dataKey, index) => (
+                                <option value={dataKey} key={index}>{dataKey}</option>
                               ))}
                             </select>
                           </label>
@@ -316,8 +411,8 @@ const EditorPanel = memo(() => {
                             <span className="edit-label column-heading">Column Value</span>
                             <select value={filter.columnValue} onChange={(e) => {updateFilterProp('columnValue', index, e.target.value)}}>
                               <option value="">- Select Option -</option>
-                              {getFilterColumnValues(index).map((dataKey) => (
-                                <option value={dataKey}>{dataKey}</option>
+                              {getFilterColumnValues(index).map((dataKey, index) => (
+                                <option value={dataKey} key={index}>{dataKey}</option>
                               ))}
                             </select>
                           </label>
@@ -325,23 +420,24 @@ const EditorPanel = memo(() => {
                       ))}
                     </ul>
                   }
-                  {(!config.filters || config.filters.length === 0) && <p style={{textAlign: "center"}}>There are currently no filters.</p>}
+                  {(!config.filters || config.filters.length === 0) &&
+                    <div>
+                      <fieldset className="edit-block">
+                        <p style={{textAlign: "center"}}>There are currently no filters.</p>
+                      </fieldset>
+                    </div>
+                  }
                   <button type="button" onClick={addNewFilter} className="btn full-width">Add Filter</button>
                 </AccordionItemPanel>
               </AccordionItem>
 
-              <AccordionItem>
+              <AccordionItem> {/*Visual*/}
                 <AccordionItemHeading>
                   <AccordionItemButton>
                     Visual
                   </AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-
-                  {['title', 'body'].includes(config.biteStyle) &&
-                    <TextField value={config.imageUrl} fieldName="imageUrl" label="Image URL" updateField={updateField} />
-                  }
-                  <Select value={config.bitePosition || ""} fieldName="bitePosition" label="Image/Graphic Position" updateField={updateField} initial="Select" options={IMAGE_POSITIONS} />
                   <TextField type="number" value={config.biteFontSize} fieldName="biteFontSize" label="Bite Font Size" updateField={updateField} min="16" max="65" />
                   <Select value={config.fontSize} fieldName="fontSize" label="Overall Font Size" updateField={updateField} options={['small', 'medium', 'large']} />
                   <CheckBox value={config.shadow} fieldName="shadow" label="Display Shadow" updateField={updateField} />
@@ -349,13 +445,140 @@ const EditorPanel = memo(() => {
                     <span className="edit-label">Theme</span>
                     <ul className="color-palette">
                       {headerColors.map( (palette) => (
-                        <li title={ palette } key={ palette } onClick={ () => { updateConfig({...config, theme: palette})}} className={ config.theme === palette ? "selected " + palette : palette}>
-                        </li>
+                        <li title={ palette } key={ palette } onClick={ () => { updateConfig({...config, theme: palette})}} className={ config.theme === palette ? "selected " + palette : palette} />
                       ))}
                     </ul>
                   </label>
+                  {/* <div className="cove-accordion__panel-section">
+                    <CheckBox value={config.visual.border} section="visual" fieldName="border" label="Display Border" updateField={updateField} />
+                    <CheckBox value={config.visual.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use Border Color Theme" updateField={updateField} />
+                    <CheckBox value={config.visual.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
+                    <CheckBox value={config.visual.background} section="visual" fieldName="background" label="Use Theme Background Color" updateField={updateField} />
+                    <CheckBox value={config.visual.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
+                  </div> */}
                 </AccordionItemPanel>
               </AccordionItem>
+
+              {['title', 'body', 'graphic'].includes(config.biteStyle) &&
+                <AccordionItem> {/*Image & Dynamic Images*/}
+                  <AccordionItemHeading>
+                    <AccordionItemButton>
+                      Image{[ 'dynamic' ].includes(config.imageData.display) && 's'}
+                    </AccordionItemButton>
+                  </AccordionItemHeading>
+
+                  <AccordionItemPanel>
+                    <Select value={config.imageData.display || ""} section="imageData" fieldName="display" label="Image Display Type" updateField={updateField} options={['none', 'static', 'dynamic']} />
+                    <Select value={config.bitePosition || ""} fieldName="bitePosition" label="Image/Graphic Position" updateField={updateField} initial="Select" options={IMAGE_POSITIONS} />
+                    {['static'].includes(config.imageData.display) &&
+                      <>
+                        <TextField value={config.imageData.url} section="imageData" fieldName="url" label="Image URL" updateField={updateField} />
+                        <TextField value={config.imageData.alt} section="imageData" fieldName="alt" label="Alt Text" updateField={updateField} />
+                      </>
+                    }
+
+                    {[ 'dynamic' ].includes(config.imageData.display) &&
+                      <>
+                        <TextField value={config.imageData.url || ""} section="imageData" fieldName="url" label="Image URL (default)" updateField={updateField} />
+                        <TextField value={config.imageData.alt} section="imageData" fieldName="alt" label="Alt Text (default)" updateField={updateField} />
+
+                        <hr className="accordion__divider" />
+
+                        {(!config.imageData.options || config.imageData.options.length === 0) && <p style={{textAlign: "center"}}>There are currently no dynamic images.</p>}
+                        {config.imageData.options && config.imageData.options.length > 0 &&
+                          <>
+                            <ul>
+                              {config.imageData.options.map((option, index) => (
+                                <fieldset className="edit-block" key={index}>
+                                  <button type="button" className="remove-column" onClick={() => {removeDynamicImage(index)}}>Remove</button>
+                                  <label>
+                                    <span className="edit-label column-heading"><strong>{'Image #' + (index + 1)}</strong></span>
+
+                                    <div className="accordion__panel-row align-center">
+                                      <div className="accordion__panel-col flex-auto">
+                                        If Value
+                                      </div>
+                                      <div className="accordion__panel-col flex-auto">
+                                        <select value={option.arguments[0]?.operator || ""} onChange={(e) => {updateDynamicImage('operator', index, 0, e.target.value)}}>
+                                          <option value="" disabled/>
+                                          {DATA_OPERATORS.map((operator, index) => (
+                                            <option value={operator} key={index}>{operator}</option>
+                                          ))}
+                                        </select>
+                                      </div>
+                                      <div className="accordion__panel-col flex-grow flex-shrink">
+                                        <input type="number" value={option.arguments[0]?.threshold || ""} onChange={(e) => {updateDynamicImage('threshold', index, 0, e.target.value)}} />
+                                      </div>
+                                    </div>
+
+                                    <div className="accordion__panel-row mb-2 align-center">
+                                      <div className="accordion__panel-col flex-grow">
+                                        <select className='border-dashed text-center' value={option.secondArgument ? 'and' : 'then'} onChange={(e) => {
+                                          if ('then' === e.target.value) {updateDynamicImage('secondArgument', index, null,false); removeDynamicArgument(index)}
+                                          if ('and' === e.target.value) {updateDynamicImage('secondArgument', index, null,true)}
+                                        }}>
+                                          <option value={'then'}>Then</option>
+                                          <option value={'and'}>And</option>
+                                        </select>
+                                      </div>
+                                    </div>
+
+                                    {option.secondArgument && true === option.secondArgument &&
+                                      <>
+                                        <div className="accordion__panel-row align-center">
+                                          <div className="accordion__panel-col flex-auto">
+                                            If Value
+                                          </div>
+                                          <div className="accordion__panel-col flex-auto">
+                                            <select value={option.arguments[1]?.operator || ""} onChange={(e) => {setDynamicArgument(index, 'operator', e.target.value)}}>
+                                              <option value="" disabled/>
+                                              {DATA_OPERATORS.map((operator, index) => (
+                                                <option value={operator} key={index}>{operator}</option>
+                                              ))}
+                                            </select>
+                                          </div>
+                                          <div className="accordion__panel-col flex-grow flex-shrink">
+                                            <input type="number" value={option.arguments[1]?.threshold || ""} onChange={(e) => {setDynamicArgument(index, 'threshold', e.target.value)}} />
+                                          </div>
+                                        </div>
+                                        <div className="accordion__panel-row mb-2 align-center text-center text-capitalize">
+                                          <div className="accordion__panel-col flex-grow">
+                                            Then
+                                          </div>
+                                        </div>
+                                      </>
+                                    }
+
+                                    <div className="accordion__panel-row mb-2 align-center">
+                                      <div className="accordion__panel-col flex-auto">
+                                        Show
+                                      </div>
+                                      <div className="accordion__panel-col flex-grow">
+                                        <input type="text" value={option.source || ""} onChange={(e) => {updateDynamicImage('source', index, null, e.target.value)}} />
+                                      </div>
+                                    </div>
+
+                                    <div className="accordion__panel-row mb-2 align-center">
+                                      <div className="accordion__panel-col flex-auto">
+                                        Alt Text
+                                      </div>
+                                      <div className="accordion__panel-col flex-grow">
+                                        <input type="text" value={option.alt || ""} onChange={(e) => {updateDynamicImage('alt', index, null, e.target.value)}} />
+                                      </div>
+                                    </div>
+                                  </label>
+                                </fieldset>
+                              ))}
+                            </ul>
+                          </>
+                        }
+                        <button type="button" onClick={addDynamicImage} className="btn full-width">Add Dynamic Image</button>
+                      </>
+                    }
+                  </AccordionItemPanel>
+                </AccordionItem>
+              }
+
             </Accordion>
           </form>
         </section>

package/src/data/initial-state.js

@@ -7,10 +7,13 @@ export default {
     bitePosition: "Left",
     biteFontSize: 24,
     fontSize: "medium",
-    imageUrl: "",
     biteBody: "",
-    prefix: "",
-    suffix: "",
+    imageData: {
+      display: "none",
+      url: "",
+      alt: "",
+      options: []
+    },
     dataFormat: {
         roundToPlace: 0,
         commas: true,
@@ -23,4 +26,14 @@ export default {
     title: "",
     theme: "theme-blue",
     shadow: false,
-}
+    visual: {
+      border: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      borderColorTheme: false
+    },
+    general: {
+      isCompactStyle: false
+    }
+}

package/src/scss/bite.scss

@@ -110,8 +110,9 @@
   padding: 0 1em;
   left: 0;
   top: 0;
-  line-height: 2.2em;
+  padding: 0.6rem 0.8rem;
   color: white;
+  font-size:1.1em;
   &:empty {
     min-height: 5px;
   }
@@ -127,6 +128,17 @@
     border-top: none;
     background: $lightestGray;
     border: solid 1px $lightGray;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    &-header {
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+    }
+
+    &.no-borders {
+      border: none;
+    }
 
     &.shadow {
       box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
@@ -265,7 +277,6 @@
 
         .bite-text {
           margin-bottom: 15px;
-          font-size: 0.9em;
           color: #222;
           flex: 1 0 auto;
         }
@@ -345,5 +356,19 @@
         }
       }
     }
+
+    // General: Compact View
+    &.bite--isCompactStyle .bite .cove-component__content .bite-content {
+      align-items: center;
+      p.bite-text {
+        margin-bottom: 0;
+      }
+    }
+
+    &.bite--isCompactStyle .bite .cove-component__content {
+      align-items: center;
+    }
+
+    .cove-component__header + .bite { border-top: 0; }
   }
 }

package/src/scss/editor-panel.scss

@@ -7,6 +7,17 @@
 }
 
 .editor-panel {
+  //TODO: Remove after COVE refactor
+  &.cove {
+    @import "@cdc/core/styles/v2/layout/tooltip.scss";
+  }
+
+  .text-center {
+    text-align: center;
+  }
+  .text-capitalize {
+    text-transform: capitalize;
+  }
   .two-col-inputs {
     display: flex;
     margin-top: 1em;
@@ -144,6 +155,45 @@
     h5 {
       font-size: .8em;
     }
+
+    .accordion__panel-row {
+      display: flex;
+      justify-content: flex-start;
+      margin-left: -4px;
+      margin-right: -4px;
+      margin-bottom: 0.75em
+    }
+
+    .accordion__panel-col {
+      flex: 0 0 0;
+      padding-left: 4px;
+      padding-right: 4px;
+
+      select {
+        padding: 0.425em 0.5em;
+      }
+
+      select.border-dashed {
+        border: rgba(0, 0, 0, 0.3) 1px dashed !important;
+        border-radius: 0.25rem;
+      }
+    }
+
+    .d-flex {
+      display: flex;
+    }
+
+    .align-center {
+      align-items: center;
+    }
+
+    .justify-end {
+      justify-content: flex-end;
+    }
+
+    .flex-grow { flex-grow: 1; }
+    .flex-shrink { flex-shrink: 1; }
+    .flex-auto { flex-basis: auto; }
   }
 
   .advanced {

package/src/scss/main.scss

@@ -1,5 +1,6 @@
 @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 {
@@ -39,9 +40,12 @@
   }
 
   .warning-icon {
+    position: relative;
+    top: 2px;
     width: 15px;
     height: 15px;
-    margin-top: 7px;
+    margin-left: 5px;
+
     path {
       fill: #d8000c;
     }
@@ -65,4 +69,4 @@
     font-size: 1.1em !important;
   }
   // Medium is just the default
-}
+}