Add category styles (#18)

* add classes to tabs and list

pass whole category to list component and update values accordingly

* add styles to page if any are found in category

components/marketplace/index.js

@@ -80,6 +80,7 @@ import { default as MarketplaceIsLoading } from '../marketplaceIsLoading/';
 				}
 			}
 			setIsLoading( false );
+			applyStyles();
 		}
 	}, [ marketplaceCategories ] );
 
@@ -97,6 +98,7 @@ import { default as MarketplaceIsLoading } from '../marketplaceIsLoading/';
 		let thecategories = [];
 		categories.forEach((cat)=>{
 			cat.currentCount = constants.perPage;
+			cat.className = 'newfold-marketplace-tab-'+cat.name;
 
 			if ( cat.products_count > 0 ) {
 				thecategories.push(cat);
@@ -114,14 +116,33 @@ import { default as MarketplaceIsLoading } from '../marketplaceIsLoading/';
 	const saveCategoryDisplayCount = (categoryName, newCount) => {
 		let updatedMarketplaceCategories = [...marketplaceCategories];
 		// find matching cat, and update perPage amount
-		updatedMarketplaceCategories.forEach((cat)=>{
+		updatedMarketplaceCategories.forEach( (cat) => {
 			if (cat.name === categoryName ) {
 				cat.currentCount = newCount;
 			}
 		});
 		setMarketplaceCategories( updatedMarketplaceCategories );
 	};
 
+	/**
+	 * Apply styles if they exist
+	 */
+	 const applyStyles = () => {
+		if ( marketplaceCategories ) {
+			marketplaceCategories.forEach( (category) => {
+				if( 
+					category.styles && // category has styles
+					!document.querySelector('[data-styleid="' + category.className + '"]') // not already added
+				) {
+					const style = document.createElement("style")
+					style.textContent = category.styles;
+					style.dataset.styleid = category.className;
+					document.head.appendChild(style);
+				}
+			});
+		}
+	};
+
 	/**
 	 * render marketplace preloader
 	 * 
@@ -145,14 +166,14 @@ import { default as MarketplaceIsLoading } from '../marketplaceIsLoading/';
 				<Components.TabPanel
 					className="newfold-marketplace-tabs"
 					activeClass="current-tab"
-					orientation="vertical"
+					orientation="horizontal"
 					initialTabName={ initialTab }
 					onSelect={ onTabNavigate }
 					tabs={ marketplaceCategories }
 				>
 					{ ( tab ) => <MarketplaceList
 						marketplaceItems={marketplaceItems}
-						category={tab.title}
+						category={tab}
 						Components={Components}
 						methods={methods}
 						constants={constants}

components/marketplaceList/index.js

@@ -21,7 +21,7 @@ const MarketplaceList = ({ marketplaceItems, currentCount, category, Components,
 	 */
 	const filterProductsByCategory = (items, category) => {
 		return items.filter((item) => {
-			return item.categories.includes( category );
+			return item.categories.includes( category.title );
 		});
 	};
 
@@ -65,11 +65,11 @@ const MarketplaceList = ({ marketplaceItems, currentCount, category, Components,
 	 * this is so users don't need to load more every time they click back into a category
 	 */
 	methods.useEffect(() => {
-		saveCategoryDisplayCount( category, itemsCount );
+		saveCategoryDisplayCount( category.name, itemsCount );
 	}, [ itemsCount ] );
 
 	return (
-		<div className="marketplaceList">
+		<div className={ `marketplace-list marketplace-list-${ category.name }` }>
 			<div className="grid col2">
 				{ activeItems.length > 0 && activeItems.map((item) => (
 						<MarketplaceItem