possibility to add class for each menu-item item

CHANGELOG.md

@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.35.3] - 2023-06-08
+
 ## [2.35.2] - 2023-04-25
 
 ### Fixed

docs/README.md

@@ -42,6 +42,7 @@ _Example:_
     "id": "menu-item-shop",
     "type": "custom",
     "highlight": false,
+    "blockClassItem": "custom-class"
     "itemProps": {
       "type": "internal",
       "href": "#",
@@ -136,6 +137,7 @@ The available `menu-item` block props are as follows:
 | Prop name         | Type                           | Description                                                                                                                                                                                                                                                           | Default value |
 | ----------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
 | `type`            | `string`                       | Menu item type, either `category` or `custom`                                                                                                                                                                                                                         | `category`    |
+| `blockClassItem`            | `string`                       | you can pass a class for each  menu item                                                                                                                                                                                                                         | `undefined`    |
 | `id`              | `string`                       | Menu item ID                                                                                                                                                                                                                                                          | `undefined`   |
 | `highlight`       | `boolean`                      | Whether the item has a highlight                                                                                                                                                                                                                                      | `undefined`   |
 | `iconPosition`    | `string`                       | Icon position relative to the menu item text. Either to the `left` or `right`.                                                                                                                                                                                        | `left`        |

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "menu",
   "vendor": "vtex",
-  "version": "2.35.2",
+  "version": "2.35.3",
   "title": "VTEX Menu",
   "description": "A Menu Component",
   "mustUpdateAt": "2019-04-03",

react/Menu.tsx

@@ -19,6 +19,7 @@ interface MenuSchema {
   title?: MenuItemSchema
   additionalDef?: string
   blockClass?: string
+
   items?: MenuItemSchema[]
   experimentalOptimizeRendering?: boolean
   classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
@@ -74,8 +75,13 @@ const Menu: StorefrontFunctionComponent<MenuSchema> = ({
 
   const menuItems = itemsProps
     .filter(item => item.itemProps)
-    .map(({ itemProps: { text }, itemProps, ...rest }) => (
-      <MenuItem key={text} itemProps={itemProps} {...rest} />
+    .map(({ itemProps: { text }, itemProps, blockClassItem, ...rest }) => (
+      <MenuItem
+        key={text}
+        itemProps={itemProps}
+        blockClassItem={blockClassItem}
+        {...rest}
+      />
     ))
 
   return (

react/MenuItem.tsx

@@ -35,7 +35,7 @@ export interface MenuItemSchema {
   highlight: boolean
   itemProps: CategoryItemSchema | CustomItemSchema
   onMountBehavior?: 'open' | 'closed'
-  blockClass?: string
+  blockClassItem?: string
   experimentalOptimizeRendering?: boolean
   classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
 }
@@ -79,6 +79,7 @@ const submenuReducer: Reducer<SubmenuState, SubmenuAction> = (
 const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
   children,
   onMountBehavior = 'closed',
+  blockClassItem,
   ...props
 }) => {
   const { experimentalOptimizeRendering } = useContext(MenuContext)
@@ -168,7 +169,12 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
             event.stopPropagation()
           }}
         >
-          <Item {...props} accordion active={isActive} />
+          <Item
+            blockClassItem={blockClassItem}
+            accordion
+            active={isActive}
+            {...props}
+          />
         </div>
         {(hasBeenActive || !experimentalOptimizeRendering) && (
           /* Collapsible menus need to still persist after being open,
@@ -195,7 +201,8 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
         setHovered(false)
       }}
     >
-      <Item {...props} active={isActive} />
+      <Item blockClassItem={blockClassItem} {...props} active={isActive} />
+
       {(isActive || !experimentalOptimizeRendering) && (
         <>
           <ExtensionPoint id="submenu" isOpen={isActive} />

react/components/CustomItem.tsx

@@ -7,10 +7,20 @@ import StyledLink, { StyledLinkProps } from './StyledLink'
 const CustomItem: FunctionComponent<
   CustomItemProps & { intl: any }
 > = props => {
-  const { type, noFollow, tagTitle, text, href, intl, ...rest } = props
+  const {
+    type,
+    noFollow,
+    tagTitle,
+    text,
+    href,
+    intl,
+    blockClassItem,
+    ...rest
+  } = props
 
   return (
     <StyledLink
+      blockClassItem={blockClassItem}
       {...rest}
       to={href}
       title={formatIOMessage({ id: tagTitle, intl })}
@@ -30,6 +40,7 @@ export interface CustomItemSchema {
   noFollow: boolean
   tagTitle: string
   text: string
+  blockClassItem?: string
 }
 
 export default injectIntl(CustomItem)

react/components/Item.tsx

@@ -15,7 +15,7 @@ const menuItemTypes = {
 }
 
 const Item: FunctionComponent<ItemProps> = props => {
-  const { type, itemProps, ...rest } = props
+  const { type, itemProps, blockClassItem, ...rest } = props
 
   // TODO: fix
   const Component = menuItemTypes[type] as any
@@ -24,13 +24,14 @@ const Item: FunctionComponent<ItemProps> = props => {
     return null
   }
 
-  return <Component {...rest} {...itemProps} />
+  return <Component blockClassItem={blockClassItem} {...rest} {...itemProps} />
 }
 
 interface ItemProps extends StyledLinkProps {
   type: 'category' | 'custom'
   accordion?: boolean
   itemProps: CategoryItemSchema | CustomItemSchema
+  blockClassItem?: string
 }
 
 export default Item

react/components/StyledLink.tsx

@@ -13,6 +13,7 @@ const CSS_HANDLES = [
   'styledLinkContainer',
   'styledLinkContent',
   'accordionIcon',
+  'styledLink-custom',
 ] as const
 
 const defaultTypography: Record<number, string> = {
@@ -40,14 +41,18 @@ const StyledLink: FunctionComponent<StyledLinkProps> = props => {
     iconProps,
     iconPosition,
     treePath,
+    blockClass,
+    blockClassItem,
     ...rest
   } = props
 
   const hasLink = to && to !== '#'
 
   const linkClassNames = classNames(
     withModifiers('styledLink', highlight ? 'highlight' : ''),
+    withModifiers('styledLink-custom', blockClassItem ?? ''),
     'no-underline pointer',
+
     {
       [typography]: true,
       'c-emphasis': highlight,
@@ -119,6 +124,8 @@ export interface StyledLinkProps extends LinkProps {
   treePath?: string
   iconId?: string
   iconProps?: IconProps
+  blockClass?: string
+  blockClassItem?: string
   iconPosition?: 'left' | 'right'
 }