feat: add css color var input to editorial card for testing

coopdigital · Jul 12, 2024 · 4742c0f · 4742c0f
1 parent 35b7d1b
commit 4742c0f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/workbench/components/EditorialCard/EditorialCard.jsx b/workbench/components/EditorialCard/EditorialCard.jsx
@@ -18,11 +18,18 @@ const EditorialCardLink = ({ href, title, dataContentParent, children }) => {
   return children;
 };
 
-const EditorialCard = ({ title, label, href, children, dataContentParent, isHorizontal }) => {
+const isValidCSSVar = (variable) => {
+  return /^--[a-zA-Z0-9-]+$/.test(variable);
+};
+
+const EditorialCard = ({ title, label, href, color,
+  children, dataContentParent, isHorizontal }) => {
   const classes = classNames('coop-c-editorialcard', [
     isHorizontal ? 'coop-c-editorialcard--horizontal' : null,
   ]);
 
+  const backgroundColor = isValidCSSVar(color) ? `var(${color})` : 'transparent';
+
   return (
     <article className={classes}>
       <EditorialCardLink href={href} dataContentParent={dataContentParent} title={title}>
@@ -45,7 +52,7 @@ const EditorialCard = ({ title, label, href, children, dataContentParent, isHori
               />
             </picture>
           </figure>
-          <div className="coop-c-editorialcard__content">
+          <div className="coop-c-editorialcard__content" style={{ background: backgroundColor }}>
             <header className="coop-c-editorialcard__header">
               {label ? <p className="coop-c-editorialcard__subtitle">{label}</p> : null}
               <h3 className="coop-c-editorialcard__title">{title}</h3>

diff --git a/workbench/pages/components/editorial-card/index.jsx b/workbench/pages/components/editorial-card/index.jsx
@@ -16,6 +16,7 @@ const config = [
     type: 'text',
   },
   { name: 'href', value: '#', type: 'text' },
+  { name: 'color', value: '--color-white', type: 'text' },
   { name: 'isHorizontal', value: false, type: 'checkbox' },
 ];