Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5144840
feat(@clayui/css): LPD-40160 Adds menubar-primary for CMS Product Men…
pat270 Nov 27, 2024
8cbefc8
feat(@clayui/core): LPD-40160 Add displayType primary for VerticalNav…
pat270 Dec 4, 2024
a0626c1
chore(@clayui/core): LPD-40160 Add storybook example of CMS Product M…
pat270 Dec 4, 2024
3c43c64
chore(@clayui/core): fixes typing error and deduplicates code
matuzalemsteles Dec 5, 2024
bba9e6b
chore(@clayui/core): fixes typescript errors
matuzalemsteles Dec 6, 2024
310626c
chore(@clayui/core): sf
matuzalemsteles Dec 6, 2024
e282613
chore(@clayui/core): LPD-40160 Update snapshot
pat270 Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 39 additions & 23 deletions packages/clay-core/src/nav/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
}

export const Link = React.forwardRef<
HTMLButtonElement | HTMLAnchorElement,
HTMLButtonElement | HTMLAnchorElement | HTMLDivElement,
IProps
>(
(
Expand All @@ -52,6 +52,44 @@ export const Link = React.forwardRef<
},
ref
) => {
if (showIcon) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change here will probably break tests in DXP due to button being changed to div.

return (
<div
{...(otherProps as Omit<
IProps,
keyof React.AnchorHTMLAttributes<HTMLAnchorElement>
> &
React.HTMLAttributes<HTMLDivElement>)}
className={classNames('nav-link', className, {
active,
['collapse-icon']: showIcon,
collapsed,
disabled,
})}
ref={ref as React.Ref<HTMLDivElement>}
>
{children}
<span className="collapse-icon-closed">
<Icon
focusable="false"
role="presentation"
spritemap={spritemap}
symbol="angle-right-small"
/>
</span>

<span className="collapse-icon-open">
<Icon
focusable="false"
role="presentation"
spritemap={spritemap}
symbol="angle-down-small"
/>
</span>
</div>
);
}

return (
<LinkOrButton
{...otherProps}
Expand All @@ -66,28 +104,6 @@ export const Link = React.forwardRef<
ref={ref}
>
{children}

{showIcon && (
<>
<span className="collapse-icon-closed">
<Icon
focusable="false"
role="presentation"
spritemap={spritemap}
symbol="caret-right"
/>
</span>

<span className="collapse-icon-open">
<Icon
focusable="false"
role="presentation"
spritemap={spritemap}
symbol="caret-bottom"
/>
</span>
</>
)}
</LinkOrButton>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-core/src/vertical-nav/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ 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,
Expand Down
104 changes: 61 additions & 43 deletions packages/clay-core/src/vertical-nav/VerticalNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -238,57 +244,69 @@ function VerticalNav<T extends Record<string, any> | string>({
return depthActive(items as Array<Record<string, any>>);
}, [active, items]);

const content = (
<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,
}}
>
<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
{...navigationProps}
className={classNames('collapse menubar-collapse', {
show: isOpen,
})}
ref={containerRef}
>
<Collection<T> collection={collection} />
</VerticalNavContext.Provider>
</Nav>
</div>
{content}
</div>
</>
)}

{displayType === 'primary' && content}
</nav>
);
}
Expand Down
15 changes: 7 additions & 8 deletions packages/clay-core/src/vertical-nav/__tests__/__snapshots__/BasicRendering.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,41 +36,40 @@ exports[`VerticalNav basic rendering render dynamic content 1`] = `
class="nav-item"
role="none"
>
<button
<div
aria-controls="clay-id-6"
aria-expanded="false"
class="nav-link collapse-icon collapsed btn btn-unstyled"
class="nav-link collapse-icon collapsed"
role="menuitem"
type="button"
>
Home
<span
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>
</button>
</div>
</li>
<li
class="nav-item"
Expand Down
Loading
Loading