feat(@clayui/css): LPD-40160 Adds menubar-primary for CMS Product Menu variant

packages/clay-core/src/nav/Link.tsx

@@ -36,7 +36,7 @@ export interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 export const Link = React.forwardRef<
-	HTMLButtonElement | HTMLAnchorElement,
+	HTMLButtonElement | HTMLAnchorElement | HTMLDivElement,
 	IProps
 >(
 	(
@@ -74,7 +74,7 @@ export const Link = React.forwardRef<
 								focusable="false"
 								role="presentation"
 								spritemap={spritemap}
-								symbol="caret-right"
+								symbol="angle-right-small"
 							/>
 						</span>
 
@@ -83,7 +83,7 @@ export const Link = React.forwardRef<
 								focusable="false"
 								role="presentation"
 								spritemap={spritemap}
-								symbol="caret-bottom"
+								symbol="angle-down-small"
 							/>
 						</span>
 					</>

packages/clay-core/src/vertical-nav/Item.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import {ClayButtonWithIcon} from '@clayui/button';
 import {useProvider} from '@clayui/provider';
 import {Keys, setElementFullHeight, useId} from '@clayui/shared';
 import React, {useContext, useMemo, useRef, useState} from 'react';
@@ -41,6 +42,14 @@ interface IProps<T> extends React.HTMLAttributes<HTMLLIElement> {
 	 */
 	keyValue?: React.Key;
 
+	/**
+	 * Properties to pass to the menubar action
+	 */
+	menubarAction?: {
+		ariaLabel: string;
+		title: string;
+	};
+
 	/**
 	 * Internal property.
 	 * @ignore
@@ -81,14 +90,15 @@ const ParentContext = React.createContext<React.RefObject<
 	HTMLButtonElement | HTMLAnchorElement
 > | null>(null);
 
-export function Item<T extends object>({
+export function Item<T extends Record<string, any>>({
 	active: depreactedActive,
 	children,
 	href,
 	index: _,
 	initialExpanded,
 	items,
 	keyValue,
+	menubarAction,
 	onClick,
 	textValue: _textValue,
 	...otherProps
@@ -137,6 +147,7 @@ export function Item<T extends object>({
 				aria-controls={items ? ariaControlsId : undefined}
 				aria-current={active ? ariaCurrent ?? undefined : undefined}
 				aria-expanded={items ? isExpanded : undefined}
+				className={menubarAction ? 'menubar-action-1' : ''}
 				collapsed={!isExpanded}
 				href={href}
 				onClick={(event) => {
@@ -204,6 +215,18 @@ export function Item<T extends object>({
 				{children}
 			</Nav.Link>
 
+			{menubarAction && (
+				<ClayButtonWithIcon
+					aria-label={menubarAction.ariaLabel}
+					className="menubar-action"
+					displayType="secondary"
+					monospaced
+					size="xs"
+					symbol="plus"
+					title={menubarAction.title}
+				/>
+			)}
+
 			{items && (
 				<CSSTransition
 					className={isExpanded ? undefined : 'collapse'}

packages/clay-core/src/vertical-nav/VerticalNav.tsx

@@ -54,6 +54,11 @@ type Props<T extends Record<string, any> | string> = {
 	 */
 	children?: React.ReactNode | ChildrenFunction<T, null>;
 
+	/**
+	 * Determines the Vertical Nav variant to use.
+	 */
+	displayType?: null | 'primary';
+
 	/**
 	 * Flag to activate the Decorator variation.
 	 */
@@ -137,6 +142,7 @@ function VerticalNav<T extends Record<string, any> | string>({
 	activation = 'manual',
 	children,
 	decorated,
+	displayType,
 	defaultExpandedKeys = new Set(),
 	expandedKeys: externalExpandedKeys,
 	itemAriaCurrent: ariaCurrent = true,
@@ -149,7 +155,7 @@ function VerticalNav<T extends Record<string, any> | string>({
 }: Props<T>) {
 	const [isOpen, setIsOpen] = useState(false);
 
-	const containerRef = useRef<HTMLDivElement | null>(null);
+	const containerRef = useRef<HTMLUListElement | null>(null);
 
 	const [expandedKeys, setExpandedKeys] = useControlledState({
 		defaultName: 'defaultExpandedKeys',
@@ -238,57 +244,73 @@ function VerticalNav<T extends Record<string, any> | string>({
 		return depthActive(items as Array<Record<string, any>>);
 	}, [active, items]);
 
+	const content = (
+		<Nav
+			{...navigationProps}
+			aria-orientation="vertical"
+			nested
+			ref={containerRef}
+			role="menubar"
+		>
+			<VerticalNavContext.Provider
+				value={{
+					activeKey:
+						active && collection.hasItem(active)
+							? active
+							: hasDepthActive
+							? null
+							: undefined,
+					ariaCurrent: ariaCurrent ? 'page' : null,
+					childrenRoot: childrenRootRef,
+					close,
+					expandedKeys,
+					firstKey: collection.getFirstItem().key,
+					open,
+					spritemap,
+					toggle,
+				}}
+			>
+				<Collection collection={collection} />
+			</VerticalNavContext.Provider>
+		</Nav>
+	);
+
 	return (
 		<nav
 			className={classNames('menubar menubar-transparent', {
 				['menubar-decorated']: decorated,
+				['menubar-primary']: displayType === 'primary',
 				['menubar-vertical-expand-lg']: large,
-				['menubar-vertical-expand-md']: !large,
+				['menubar-vertical-expand-md']:
+					!large && displayType !== 'primary',
 			})}
 		>
-			<CustomTrigger onClick={() => setIsOpen(!isOpen)}>
-				<span className="inline-item inline-item-before">
-					{triggerLabel}
-				</span>
-
-				<Icon
-					focusable="false"
-					role="presentation"
-					spritemap={spritemap}
-					symbol="caret-bottom"
-				/>
-			</CustomTrigger>
-
-			<div
-				{...navigationProps}
-				className={classNames('collapse menubar-collapse', {
-					show: isOpen,
-				})}
-				ref={containerRef}
-			>
-				<Nav aria-orientation="vertical" nested role="menubar">
-					<VerticalNavContext.Provider
-						value={{
-							activeKey:
-								active && collection.hasItem(active)
-									? active
-									: hasDepthActive
-									? null
-									: undefined,
-							ariaCurrent: ariaCurrent ? 'page' : null,
-							childrenRoot: childrenRootRef,
-							close,
-							expandedKeys,
-							firstKey: collection.getFirstItem().key,
-							open,
-							spritemap,
-							toggle,
-						}}
+			{displayType !== 'primary' && (
+				<>
+					<CustomTrigger onClick={() => setIsOpen(!isOpen)}>
+						<span className="inline-item inline-item-before">
+							{triggerLabel}
+						</span>
+
+						<Icon
+							focusable="false"
+							role="presentation"
+							spritemap={spritemap}
+							symbol="caret-bottom"
+						/>
+					</CustomTrigger>
+
+					<div
+						className={classNames('collapse menubar-collapse', {
+							show: isOpen,
+						})}
 					>
-						<Collection<T> collection={collection} />
-					</VerticalNavContext.Provider>
-				</Nav>
-			</div>
+						{content}
+					</div>
+				</>
+			)}
+
+			{displayType === 'primary' && content}
 		</nav>
 	);
 }

packages/clay-core/src/vertical-nav/__tests__/__snapshots__/BasicRendering.tsx.snap

@@ -48,25 +48,25 @@ exports[`VerticalNav basic rendering render dynamic content 1`] = `
               class="collapse-icon-closed"
             >
               <svg
-                class="lexicon-icon lexicon-icon-caret-right"
+                class="lexicon-icon lexicon-icon-angle-right-small"
                 focusable="false"
                 role="presentation"
               >
                 <use
-                  href="#caret-right"
+                  href="#angle-right-small"
                 />
               </svg>
             </span>
             <span
               class="collapse-icon-open"
             >
               <svg
-                class="lexicon-icon lexicon-icon-caret-bottom"
+                class="lexicon-icon lexicon-icon-angle-down-small"
                 focusable="false"
                 role="presentation"
               >
                 <use
-                  href="#caret-bottom"
+                  href="#angle-down-small"
                 />
               </svg>
             </span>