Add 'theme' prop for SidebarMenuItem to support css variables (#192)

* Add 'theme' prop for SidebarMenuItem  to support css variables

* bumped version

Co-authored-by: Irina Borozan <anirib@gmail.com>

Author: cipick

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "private": false,
   "dependencies": {
     "bulma": "^0.8.0",

package.json

@@ -3,8 +3,16 @@ import PropTypes from "prop-types";
 import "./sidebar-menu-item.scss";
 import classNames from "classnames";
 import { onEnterOrSpace } from "../../a11y";
+import { useCssVars } from "../../hooks/useCssVars";
 
-export const SidebarMenuItem = ({ active, isTitle, children, onClick }) => {
+export const SidebarMenuItem = ({
+  active,
+  isTitle,
+  children,
+  onClick,
+  theme
+}) => {
+  const style = useCssVars(theme);
   const onClickCb = () => {
     if (onClick) {
       onClick();
@@ -21,6 +29,7 @@ export const SidebarMenuItem = ({ active, isTitle, children, onClick }) => {
       })}
       onClick={onClickCb}
       onKeyPress={onEnterOrSpace(onClickCb)}
+      style={style}
     >
       {children}
     </li>
@@ -31,10 +40,12 @@ SidebarMenuItem.propTypes = {
   active: PropTypes.bool,
   isTitle: PropTypes.bool,
   onClick: PropTypes.func,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  theme: PropTypes.object
 };
 
 SidebarMenuItem.SidebarMenuItem = {
   active: false,
-  isTitle: false
+  isTitle: false,
+  theme: false
 };

src/components/sidebar-menu-item/sidebar-menu-item.js

@@ -1,14 +1,17 @@
 .__sidebar-menu-item {
+  --highlightColor: #b6cadb;
+  --backgroundColor: #f5f5f5;
+
   list-style-type: none;
-  border-left: 40px solid #b6cadb;
-  background: #f5f5f5;
+  border-left: 40px solid var(--highlightColor);
+  background: var(--backgroundColor);
   margin: 5px 0;
   padding: 5px 10px;
 }
 
 .__sidebar-menu-item:hover,
 .__sidebar-menu-item.active {
-  background: #b6cadb;
+  background: var(--highlightColor);
   cursor: pointer;
 }
 

src/components/sidebar-menu-item/sidebar-menu-item.scss

@@ -23,6 +23,35 @@ export const activeSubSection = () => (
   <SidebarMenuItem active>Transmitere și simptome</SidebarMenuItem>
 );
 
+export const withTheme = () => (
+  <>
+    <SidebarMenuItem
+      isTitle
+      theme={{ highlightColor: "#F6DD62", backgroundColor: "#F6F9FC" }}
+    >
+      Transmitere și simptome
+    </SidebarMenuItem>
+    <SidebarMenuItem
+      isTitle
+      active
+      theme={{ highlightColor: "#F6DD62", backgroundColor: "#F6F9FC" }}
+    >
+      Transmitere și simptome
+    </SidebarMenuItem>
+    <SidebarMenuItem
+      theme={{ highlightColor: "#F6DD62", backgroundColor: "#F6F9FC" }}
+    >
+      Transmitere și simptome
+    </SidebarMenuItem>
+    <SidebarMenuItem
+      active
+      theme={{ highlightColor: "#F6DD62", backgroundColor: "#F6F9FC" }}
+    >
+      Transmitere și simptome
+    </SidebarMenuItem>
+  </>
+);
+
 export const sectionTitleWithCallback = () => {
   const [data, setData] = useState({});
   const documentExample = {

src/components/sidebar-menu-item/sidebar-menu-item.stories.js

@@ -0,0 +1,6 @@
+import { transform } from "lodash";
+
+export const useCssVars = theme =>
+  transform(theme, (result, cssValue, cssKey) => {
+    result[`--${cssKey}`] = cssValue;
+  });