@cdc/dashboard 1.1.1 → 1.1.4

package/src/components/EditorPanel.js

@@ -0,0 +1,354 @@
+import React, { useState, useEffect, memo, useContext } from 'react'
+import ReactTooltip from 'react-tooltip'
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton,
+} from 'react-accessible-accordion';
+import { useDebounce } from 'use-debounce';
+
+import Context from '../context';
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+import QuestionIcon from '@cdc/core/assets/question-circle.svg';
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const Helper = ({text}) => {
+  return (
+    <span className='tooltip helper' data-tip={text}>
+      <QuestionIcon />
+    </span>
+  )
+}
+
+// IE11 Custom Event polyfill
+(function () {
+
+  if ( typeof window.CustomEvent === "function" ) return false;
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: null };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+   }
+
+  window.CustomEvent = CustomEvent;
+})();
+
+const TextField = memo(({label, section = null, subsection = null, fieldName, updateField, value: stateValue, tooltip, type = "input", i = null, min = null, ...attributes}) => {
+  const [ value, setValue ] = useState(stateValue);
+
+  const [ debouncedValue ] = useDebounce(value, 500);
+
+  useEffect(() => {
+    if('string' === typeof debouncedValue && stateValue !== debouncedValue ) {
+      updateField(section, subsection, fieldName, debouncedValue, i)
+    }
+  }, [debouncedValue])
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`;
+
+  const onChange = (e) => {
+    if('number' !== type || min === null){
+      setValue(e.target.value);
+    } else {
+      if(!e.target.value || min <= parseFloat(e.target.value)){
+        setValue(e.target.value);
+      } else {
+        setValue(min.toString());
+      }
+    }
+  };
+
+  let formElement = <input type="text" name={name} onChange={onChange} {...attributes} value={value} />
+
+  if('textarea' === type) {
+    formElement = (
+      <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+    )
+  }
+
+  if('number' === type) {
+    formElement = <input type="number" name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  return (
+    <label>
+      <span className="edit-label column-heading">{label}{tooltip}</span>
+      {formElement}
+    </label>
+  )
+})
+
+const CheckBox = memo(({label, value, fieldName, section = null, subsection = null, 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>
+    {section === 'table' && fieldName === 'show' && <Helper text=" Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement." />}
+  </label>
+))
+
+const Select = memo(({label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes}) => {
+  let optionsJsx = options.map(optionName => <option value={optionName} key={optionName}>{optionName}</option>)
+
+  if(initialValue) {
+    optionsJsx.unshift(<option value="" key="initial">{initialValue}</option>)
+  }
+
+  return (
+    <label>
+      <span className="edit-label">{label}</span>
+      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={(event) => { updateField(section, subsection, fieldName, event.target.value) }} {...attributes}>
+        {optionsJsx}
+      </select>
+    </label>
+  )
+})
+
+const EditorPanel = memo(() => {
+  const {
+    config,
+    updateConfig,
+    loading,
+    rawData,
+    setParentConfig,
+    setEditing
+  } = useContext(Context);
+
+  const enforceRestrictions = (updatedConfig) => {
+    // TODO
+  };
+
+  const updateField = (section, subsection, fieldName, newValue) => {
+    // Top level
+    if( null === section && null === subsection) {
+      let dashboardConfig = config.dashboard;
+
+      dashboardConfig[fieldName] = newValue;
+
+      let updatedConfig = {...config, dashboard: dashboardConfig};
+
+      enforceRestrictions(updatedConfig);
+
+      updateConfig(updatedConfig);
+      return
+    }
+
+    const isArray = Array.isArray(config[section]);
+
+    let sectionValue = isArray ? [...config[section], newValue] : {...config[section], [fieldName]: newValue};
+
+    if(null !== subsection) {
+      if(isArray) {
+        sectionValue = [...config[section]]
+        sectionValue[subsection] = {...sectionValue[subsection], [fieldName]: newValue}
+      } else if(typeof newValue === "string") {
+        sectionValue[subsection] = newValue
+      } else {
+        sectionValue = {...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue}}
+      }
+    }
+
+    let updatedConfig = {...config, [section]: sectionValue};
+
+    enforceRestrictions(updatedConfig);
+
+    updateConfig(updatedConfig)
+  }
+
+  const missingRequiredSections = () => {
+    //TODO
+
+    return false;
+  };
+
+  const [ displayPanel, setDisplayPanel ] = useState(true);
+
+  // Used to pipe a JSON version of the config you are creating out
+  const [ configData, setConfigData ] = useState({})
+
+  if(loading) {
+    return null
+  }
+
+  const getColumns = (filter = true) => {
+    let columns = {}
+
+    rawData.map(row => {
+      Object.keys(row).forEach(columnName => columns[columnName] = true)
+    })
+
+    if(filter) {
+      Object.keys(columns).forEach(key => {
+        if((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key)) ) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  const Error = () => {
+    return (
+      <section className="waiting">
+        <section className="waiting-container">
+          <h3>Error With Configuration</h3>
+          <p>{config.runtime.editorErrorMessage}</p>
+        </section>
+      </section>
+    );
+  }
+
+  const convertStateToConfig = (type = "JSON") => {
+    let strippedState = JSON.parse(JSON.stringify(config))
+    if(false === missingRequiredSections()) {
+      delete strippedState.newViz
+    }
+    delete strippedState.runtime
+
+    if(type === "JSON") {
+      return JSON.stringify( strippedState )
+    }
+
+    return strippedState
+  }
+
+  useEffect(() => {
+    const parsedData = convertStateToConfig()
+
+    const formattedData = JSON.stringify(JSON.parse(parsedData), undefined, 2);
+
+    setConfigData(formattedData)
+
+    // Emit the data in a regular JS event so it can be consumed by anything.
+    const event = new CustomEvent('updateVizConfig', { detail: parsedData})
+
+    window.dispatchEvent(event)
+
+    // Pass up to Editor if needed
+    if(setParentConfig) {
+      const newConfig = convertStateToConfig("object")
+      setParentConfig(newConfig)
+    }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  const removeFilter = (index) => {
+    let dashboardConfig = config.dashboard;
+
+    dashboardConfig.filters.splice(index, 1);
+
+    updateConfig({...config, dashboard: dashboardConfig});
+  }
+
+  const updateFilterProp = (name, index, value) => {
+    let dashboardConfig = config.dashboard;
+
+    dashboardConfig.filters[index][name] = value;
+
+    updateConfig({...config, dashboard: dashboardConfig});
+  }
+
+  const addNewFilter = () => {
+    let dashboardConfig = config.dashboard;
+
+    dashboardConfig.filters = dashboardConfig.filters || [];
+
+    dashboardConfig.filters.push({values: []});
+
+    updateConfig({...config, dashboard: dashboardConfig});
+  }
+
+  return (
+    <ErrorBoundary component="EditorPanel">
+      {config.runtime && config.runtime.editorErrorMessage && <Error /> }
+      <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={() => setDisplayPanel(!displayPanel) }></button>
+      <section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}>
+        <div className="heading-2">Configure</div>
+        <section className="form-container">
+          <form>
+            <Accordion allowZeroExpanded={true}>
+              <AccordionItem> {/* General */}
+                <AccordionItemHeading>
+                  <AccordionItemButton>
+                    General
+                  </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <TextField value={config.dashboard.title} section="dashboard" fieldName="title" label="Title" updateField={updateField} />
+                  <TextField type="textarea" value={config.dashboard.description} section="dashboard" fieldName="description" label="Description" 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>
+                  }/>
+                </AccordionItemPanel>
+              </AccordionItem>
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>
+                    Filters
+                  </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <ul className="filters-list">
+                    {config.dashboard.filters && config.dashboard.filters.map((filter, index) => (
+                        <fieldset className="edit-block" key={filter.columnName + index}>
+                          <button type="button" className="remove-column" onClick={() => {removeFilter(index)}}>Remove</button>
+                          <label>
+                            <span className="edit-label column-heading">Filter</span>
+                            <select value={filter.columnName} onChange={(e) => {updateFilterProp('columnName', index, e.target.value)}}>
+                              <option value="">- Select Option -</option>
+                              {getColumns().map((dataKey) => (
+                                <option value={dataKey} key={dataKey}>{dataKey}</option>
+                              ))}
+                            </select>
+                          </label>
+                          <label>
+                            <span className="edit-label column-heading">Label</span>
+                            <input type="text" value={filter.label} onChange={(e) => {updateFilterProp('label', index, e.target.value)}}/>
+                          </label>
+                        </fieldset>
+                      )
+                    )}
+                  </ul>
+
+                  <button type="button" onClick={addNewFilter} className="btn btn-primary">Add Filter</button>
+                </AccordionItemPanel>
+              </AccordionItem>
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>
+                    Data Table
+                  </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <CheckBox value={config.table.show} section="table" fieldName="show" label="Show Table" updateField={updateField}  />
+                  <CheckBox value={config.table.expanded} section="table" fieldName="expanded" label="Expanded by Default" updateField={updateField} />
+                  <CheckBox value={config.table.download} section="table" fieldName="download" label="Display Download Button" updateField={updateField} />
+                  <TextField value={config.table.label} section="table" fieldName="label" label="Label" updateField={updateField} />
+                </AccordionItemPanel>
+              </AccordionItem>
+           </Accordion>
+          </form>
+        </section>
+        <ReactTooltip
+            html={true}
+            multiline={true}
+            className="helper-tooltip"
+          />
+      </section>
+    </ErrorBoundary>
+  )
+})
+
+export default EditorPanel;

package/src/components/Grid.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import Row from './Row'
+
+import Context from '../context'
+
+const Grid = () => {
+  const { rows, config, updateConfig } = useContext(Context)
+
+  const addRow = () => {
+    updateConfig({
+      ...config,
+      rows: [
+        ...rows,
+        [{width: 12}, {}, {}]
+      ],
+      uuid: Date.now()
+    })
+  }
+
+  return (
+    <div className="builder-grid">
+      {rows.map((row, idx) => <Row row={row} idx={idx} uuid={row.uuid} key={idx}/>)}
+      <button className="btn add-row" onClick={addRow}>Add Row</button>
+    </div>
+  )
+}
+
+export default Grid

package/src/components/Header.js

@@ -0,0 +1,15 @@
+import React, { useContext, memo } from 'react'
+
+const Header = ({preview, setPreview, back, subEditor = null}) => {
+  return (
+    <div aria-level="2" role="heading" className="editor-heading">
+      {subEditor ? <div className="heading-1 back-to" onClick={back} style={{cursor: 'pointer'}}><span>&#8592;</span> Back to Dashboard</div> : <div className="heading-1">Dashboard Editor</div>}
+      {!subEditor && <ul className="toggle-bar">
+        <li className={preview ? 'inactive' : 'active'} onClick={() => {setPreview(false)}}>Build Layout</li>
+        <li className={preview ? 'active' : 'inactive'} onClick={() => {setPreview(true)}}>Preview &amp; Configure</li>
+      </ul>}
+    </div>
+  )
+}
+
+export default Header

package/src/components/Row.js

@@ -0,0 +1,137 @@
+import React, { useContext, useState } from 'react'
+import Column from './Column'
+import Context from '../context'
+import CloseIcon from '../images/icon-close.svg'
+import RowUp from '../images/icon-up.svg'
+import RowDown from '../images/icon-down.svg'
+import OneColIcon from '../images/icon-col-12.svg'
+import TwoColIcon from '../images/icon-col-6.svg'
+import ThreeColIcon from '../images/icon-col-4.svg'
+import FourEightColIcon from '../images/icon-col-4-8.svg'
+import EightFourColIcon from '../images/icon-col-8-4.svg'
+
+const RowMenu = ({ rowIdx, row }) => {
+  const { rows, config, updateConfig } = useContext(Context)
+
+  const getCurr = () => {
+    let res = []
+
+    for (let i = 0; i < row.length; i++) {
+      if(row[i].width) res.push(row[i].width)
+    }
+
+    return res.join('')
+  }
+
+  const [curr, setCurr] = useState(getCurr())
+
+  const setRowLayout = (layout) => {
+    const newRows = [...rows]
+    const r = newRows[rowIdx]
+
+    for (let i = 0; i < r.length; i++) {
+      r[i].width = layout[i] ?? null
+    }
+
+    updateConfig({ ...config, rows: newRows})
+    setCurr(layout.join(''))
+  }
+
+  const moveRow = (dir = 'down') => {
+    if (rowIdx === rows.length - 1 && dir === 'down') return
+
+    let newIdx = dir === 'down' ? rowIdx + 1 : rowIdx - 1
+
+    // Swap
+    const temp = rows[newIdx]
+
+    rows[newIdx] = row
+    rows[rowIdx] = temp
+
+    rows[newIdx].uuid = Date.now();
+    rows[rowIdx].uuid = Date.now();
+
+    updateConfig({...config, rows})
+
+    // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
+    let calcRowMove = dir === 'down' ? 202 : -202
+    let calcRowMove2 = dir === 'down' ? -202 : 202
+
+    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
+    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+
+    rowEle.style.pointerEvents = 'none'
+    rowNewEle.style.pointerEvents = 'none'
+    rowEle.style.top = calcRowMove + 'px'
+    rowNewEle.style.top = calcRowMove2 + 'px'
+
+    setTimeout(() => {
+      rowEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowNewEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowEle.style.top = '0'
+      rowNewEle.style.top = '0'
+    }, 0)
+
+    setTimeout(() => {
+      rowEle.style = null
+      rowNewEle.style = null
+    }, 500)
+  }
+  
+  const deleteRow = () => {
+    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+
+    updateConfig({...config, rows})
+  }
+
+  const layoutList = [
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
+      <OneColIcon />
+    </li>,
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
+      <TwoColIcon />
+    </li>,
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
+      <ThreeColIcon />
+    </li>,
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
+      <FourEightColIcon />
+    </li>,
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
+      <EightFourColIcon />
+    </li>
+  ]
+
+  return (
+    <nav className="row-menu">
+      <div className="row-menu__btn">
+        <ul className="row-menu__flyout">
+          {layoutList}
+        </ul>
+      </div>
+      <div className="spacer"></div>
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up" onClick={() => moveRow('up')}>
+        <RowUp />
+      </button>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Down" onClick={() => moveRow('down')}>
+        <RowDown />
+      </button>
+      <button className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'} title="Delete Row" onClick={deleteRow}>
+        <CloseIcon />
+      </button>
+    </nav>
+  )
+}
+
+const Row = ({ row, idx: rowIdx, uuid}) => {
+  return (
+    <div className="builder-row" data-row-id={rowIdx}>
+      <RowMenu rowIdx={rowIdx} row={row} />
+      <div className="column-container">
+        {row.filter(column => column.width).map((column, colIdx) => <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />)}
+      </div>
+    </div>
+  )
+}
+
+export default Row

package/src/components/Widget.js

@@ -0,0 +1,112 @@
+import React, { useContext } from 'react';
+import { useDrag } from 'react-dnd';
+import CloseIcon from '../images/icon-close.svg';
+import GridIcon from '../images/icon-grid.svg';
+import CodeIcon from '../images/icon-code.svg';
+import EditIcon from '../images/icon-edit.svg';
+import MoveIcon from '../images/icon-move.svg';
+import BiteIcon from '@cdc/core/assets/data-bite-graphic.svg';
+import BarIcon from '@cdc/core/assets/chart-bar-solid.svg';
+import LineIcon from '@cdc/core/assets/chart-line-solid.svg';
+import PieIcon from '@cdc/core/assets/chart-pie-solid.svg';
+import UsaIcon from '@cdc/core/assets/usa-graphic.svg';
+import WorldIcon from '@cdc/core/assets/world-graphic.svg';
+import AlabamaIcon from '@cdc/core/assets/alabama-graphic.svg';
+
+import Context from '../context';
+
+const iconHash = {
+  'data-bite' : <BiteIcon />,
+  'Bar': <BarIcon />,
+  'Spark Line': <LineIcon />,
+  'waffle-chart' : <GridIcon />,
+  'markup-include' : <CodeIcon />,
+  'Line' : <LineIcon />,
+  'Pie' : <PieIcon />,
+  'us' : <UsaIcon />,
+  'us-county': <UsaIcon />,
+  'world' : <WorldIcon />,
+  'single-state': <AlabamaIcon />
+}
+
+const labelHash = {
+  'data-bite': 'Data Bite',
+  'waffle-chart' : 'Waffle Chart',
+  'markup-include' : 'Markup Include',
+  'Bar' : 'Bar',
+  'Line' : 'Line',
+  'Pie' : 'Pie',
+  'Spark Line' : 'Spark Line',
+  'us': 'United States (State- or County-Level)',
+  'us-county': 'United States (State- or County-Level)',
+  'world' : 'World',
+  'single-state': 'U.S. State'
+}
+
+const Widget = ({ data = {}, addVisualization, type }) => {
+  const { rows, visualizations, config, updateConfig } = useContext(Context)
+
+  console.log('type', type)
+
+  const handleWidgetMove = (item, monitor) => {
+      let result = monitor.getDropResult()
+
+      if(!result) return null
+
+      const { rowIdx, colIdx } = result
+
+      if(undefined !== data.rowIdx) {
+        rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+
+        rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+      } else {
+        // Item does not exist, instantiate a new one
+        const newViz = addVisualization()
+        visualizations[newViz.uid] = newViz // Add to widgets collection
+        rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+      }
+
+      updateConfig({...config, rows, visualizations})
+  }
+
+  const [ { isDragging, ...collected }, drag ] = useDrag({
+    type: 'vis-widget',
+    end: handleWidgetMove,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  })
+
+  const deleteWidget = () => {
+    rows[data.rowIdx][data.colIdx].widget = null
+
+    delete visualizations[data.uid]
+
+    updateConfig({...config, rows, visualizations})
+  }
+
+  const editWidget = () => {
+    visualizations[data.uid].editing = true;
+
+    updateConfig({...config, visualizations});
+  }
+
+  return (
+    <div className="widget" ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
+      <MoveIcon className="drag-icon" />
+      <div className="widget__content">
+        {data.rowIdx !== undefined && (
+          <div className="widget-menu">
+            <div className="widget-menu-item" onClick={editWidget}><EditIcon /></div>
+            <div className="widget-menu-item" onClick={deleteWidget}><CloseIcon /></div>
+          </div>
+        )}
+        {iconHash[type]}
+        <span>{labelHash[type]}</span>
+        {data.newViz && <span onClick={editWidget} className="config-needed">Configuration needed</span>}
+      </div>
+    </div>
+  )
+}
+
+export default Widget

package/src/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ConfigContext = createContext({});
+
+export default ConfigContext;

package/src/data/initial-state.js

@@ -0,0 +1,17 @@
+export default {
+  dashboard: {
+      theme: 'theme-blue'
+  },
+  rows: [
+    [
+      {width: 12},
+      {},
+      {}
+    ]
+  ],
+  visualizations: {},
+  table: {
+    label: 'Data Table',
+    show: true
+  }
+}

package/src/images/icon-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

package/src/images/icon-code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z"/>
+</svg>

package/src/images/icon-col-12.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M2,16 L22,16 L22,14 L2,14 L2,16 Z M2,11 L22,11 L22,9 L2,9 L2,11 Z M2,4 L2,6 L22,6 L22,4 L2,4 Z"/>
+</svg>