Merge pull request #49 from brainstormforce/STAR-993

STAR-993 - MegaMenu adjust based on screen resolution & dependancies updated And Previous UI updated

.eslintrc

@@ -53,6 +53,7 @@
 		"react/jsx-no-literals": "off", // Should be enabled.
 		"react/jsx-no-useless-fragment": "off", // Should be enabled.
 		"import/order": [ "error", { "groups": [ "builtin", [ "external", "unknown" ], "internal", "parent", "sibling", "index" ] } ],
-		"func-style": ["error", "expression"]
+		"func-style": ["error", "expression"],
+		"jsdoc/newline-after-description": "off"
 	}
 }

.github/workflows/ci.yml

@@ -22,10 +22,10 @@ jobs:
         token: ${{ secrets.PRIVATE_ACCESS_TOKEN }}
         ref: ${{ github.event.pull_request.head.ref }}
 
-    - name: Use Node.js 12.x
+    - name: Use Node.js 18.x
       uses: actions/[email protected]
       with:
-        node-version: 12.x
+        node-version: 18.x
         cache: 'npm'
 
     - name: Set composer token

.gitignore

@@ -1,3 +1,5 @@
 /node_modules
 
 /vendor/
+.DS_Store
+src/.DS_Store

package.json

@@ -4,6 +4,13 @@
   "author": "Brainstorm Force",
   "description": "Starter Templates Component Library.",
   "main": "./build/index.js",
+  "engines": {
+    "npm": ">=9.5.0 <10.3.0",
+    "node": ">=18.15.0 <19.0.0"
+  },
+  "volta": {
+    "node": "18.15.0"
+  },
   "scripts": {
     "start": "webpack --watch --mode development",
     "build": "webpack --mode production",
@@ -20,25 +27,27 @@
   ],
   "license": "ISC",
   "devDependencies": {
-    "@wordpress/scripts": "^14.1.0",
     "@babel/core": "^7.7.5",
     "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.4",
+    "@wordpress/scripts": "^26.19.0",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.3.0",
     "sass": "^1.32.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^1.0.1",
     "svg-url-loader": "^7.1.1",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "prettier": "npm:wp-prettier@^2.2.1-beta-1"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "@wordpress/eslint-plugin": "^9.3.0",
+    "prettier": "npm:wp-prettier@^2.8.5",
+    "wp-prettier": "^2.8.5"
   },
   "dependencies": {
     "@wordpress/html-entities": "^3.2.3",
     "@wordpress/i18n": "^4.2.4",
-    "react": "^16.12.0",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.0.8",
     "use-debounce": "^7.0.1"
   }
 }

src/grid/index.js

@@ -33,7 +33,6 @@ const Grid = ( {
 				grid-${ column || '3' }
 				${ className ?? '' }
 			` }
-			column={ column }
 		>
 			{ options.map( ( item, index ) => {
 				const isFavorite =
@@ -48,6 +47,11 @@ const Grid = ( {
 						key={ index }
 					>
 						<div className="stc-grid-item-inner">
+							{ ! enableNewUi &&
+								( item.badge ? (
+									<PremiumBadge badge={ item.badge } />
+								) : null ) }
+
 							{ enableNewUi ? (
 								<div className="stc-grid-item-screenshot-wrap">
 									<a href={ item.link } rel="noreferrer">
@@ -77,9 +81,12 @@ const Grid = ( {
 							<div className="stc-grid-item-header">
 								<div className="stc-grid-item-title">
 									{ decodeEntities( item.title ) }
-									{ item.badge ? (
-										<PremiumBadge badge={ item.badge } />
-									) : null }
+									{ enableNewUi &&
+										( item.badge ? (
+											<PremiumBadge
+												badge={ item.badge }
+											/>
+										) : null ) }
 								</div>
 
 								{ item.desc ? (

src/grid/style.scss

@@ -88,28 +88,34 @@
 
 .stc-grid-item-inner {
 	margin: 0;
-    position: relative;
-    box-sizing: border-box;
-    background: var(--stc-color-white);
-    border-radius: var(--stc-border-radius-5);
-    border: 1px solid var(--stc-color-light-gray);
-    transition: opacity .25s ease-in-out;
     max-height: 100%;
     overflow: hidden;
+	position: relative;
+	transition: all 0.15s;
+	box-sizing: border-box;
+	background: var( --stc-color-white );
+	border-radius: var( --stc-border-radius-5 );
+	border: 1px solid var( --stc-color-light-gray );
 	&:hover {
-		box-shadow: 0px 15px 20px -10px rgba(0, 0, 0, 0.25);		
-		.stc-grid-item-hover-button-wrapper {
-			animation: stc-visible 0.2s linear forwards;
-		}
-		.stc-grid-item-blur{
-			opacity: 1;
-		}
-		.stc-grid-site-screenshot {
-			filter: blur(2px);
-		}
+		box-shadow: 0 6px 14px rgb(0 0 0 / 12%);
 	}
 }
 
+.stc-grid-item-badge {
+	background: #FFC107;
+	color: #000;
+	padding: 4px 12px;
+	font-size: var( --stc-font-size-xxs );
+	top: 0px;
+	right: 0px;
+	text-transform: uppercase;
+    position: absolute;
+    z-index: 1;
+    border-radius: var(--stc-border-radius-2);
+    font-weight: var(--stc-font-weight-extra-bold);
+    letter-spacing: 0.3px;
+}
+
 .stc-grid-favorite {
 	svg {
 		width: 16px;

src/icons.js

@@ -70,7 +70,6 @@ export const ICONS = {
 	),
 	error: (
 		<svg
-			x-description="Heroicon name: solid/x-circle"
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 20 20"
 			fill="currentColor"

src/mega-menu/index.js

@@ -1,16 +1,47 @@
 // External Dependencies.
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 // Internal Dependencies.
 import { ICONS } from '../icons';
 import './style.scss';
 
 const MegaMenu = ( { options, parent, menu, onClick } ) => {
 	const [ toggle, setToggle ] = useState( false );
+	const [ visibleOptions, setVisibleOptions ] = useState( [] );
 
-	if ( ! options ) {
-		return '';
-	}
+	useEffect( () => {
+		if ( ! options ) {
+			return;
+		}
+
+		const updateVisibleOptions = () => {
+			const width = window.innerWidth;
+
+			if ( width >= 1116 ) {
+				setVisibleOptions( options.slice( 0, 9 ) );
+			} else if ( width < 1116 && width >= 1025 ) {
+				setVisibleOptions( options.slice( 0, 6 ) );
+			} else if ( width < 1025 && width >= 950 ) {
+				setVisibleOptions( options.slice( 0, 5 ) );
+			} else if ( width < 950 && width >= 751 ) {
+				setVisibleOptions( options.slice( 0, 4 ) );
+			} else if ( width < 751 && width >= 451 ) {
+				setVisibleOptions( options.slice( 0, 3 ) );
+			}
+		};
+
+		updateVisibleOptions();
+
+		const handleResize = () => {
+			updateVisibleOptions();
+		};
+
+		window.addEventListener( 'resize', handleResize );
+
+		return () => {
+			window.removeEventListener( 'resize', handleResize );
+		};
+	}, [ options ] );
 
 	return (
 		<div
@@ -29,7 +60,7 @@ const MegaMenu = ( { options, parent, menu, onClick } ) => {
 
 			<div className="stc-mega-menu-container">
 				<div className="stc-mega-menu">
-					{ options.map( ( option ) => {
+					{ visibleOptions.map( ( option ) => {
 						return (
 							<div
 								key={ option.ID }

src/search/index.js

@@ -1,7 +1,7 @@
 // External Dependencies.
 import React, { memo, useEffect, useCallback, useRef } from 'react';
-import { __ } from '@wordpress/i18n';
 import { useDebouncedCallback } from 'use-debounce';
+import { __ } from '@wordpress/i18n';
 
 // Internal Dependencies.
 import './style.scss';