Merge pull request liferay#3694 from matuzalemsteles/issue-2822

feat(@clayui/nav): Adds support for Decorator variation in ClayVerticalNav
bryceosterhaus · Sep 11, 2020 · 5c0ca8b · 5c0ca8b
2 parents b4b7bba + a0bf0a2
commit 5c0ca8b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 77 deletions.
diff --git a/packages/clay-nav/src/Vertical.tsx b/packages/clay-nav/src/Vertical.tsx
@@ -53,6 +53,11 @@ interface IProps {
 	 */
 	activeLabel?: string;
 
+	/**
+	 * Flag to activate the Decorator variation.
+	 */
+	decorated?: boolean;
+
 	/**
 	 * Label of the button that appears on smaller resolutions to open the vertical navigation.
 	 */
@@ -167,6 +172,7 @@ const ClayVerticalNav: React.FunctionComponent<IProps> & {
 	Trigger: typeof Trigger;
 } = ({
 	activeLabel,
+	decorated,
 	items,
 	large,
 	spritemap,
@@ -185,6 +191,7 @@ const ClayVerticalNav: React.FunctionComponent<IProps> & {
 		<nav
 			{...otherProps}
 			className={classNames('menubar menubar-transparent', {
+				['menubar-decorated']: decorated,
 				['menubar-vertical-expand-lg']: large,
 				['menubar-vertical-expand-md']: !large,
 			})}

diff --git a/packages/clay-nav/stories/index.tsx b/packages/clay-nav/stories/index.tsx
@@ -12,6 +12,45 @@ import React from 'react';
 
 import ClayNav, {ClayVerticalNav} from '../src';
 
+const items = [
+	{
+		initialExpanded: true,
+		items: [
+			{
+				href: '#',
+				label: 'Nested1',
+			},
+		],
+		label: 'Home',
+	},
+	{
+		href: '#',
+		label: 'About',
+	},
+	{
+		href: '#',
+		label: 'Contact',
+	},
+	{
+		items: [
+			{
+				active: true,
+				href: '#',
+				label: 'Five',
+			},
+			{
+				href: '#',
+				label: 'Six',
+			},
+		],
+		label: 'Projects',
+	},
+	{
+		href: '#',
+		label: 'Seven',
+	},
+];
+
 storiesOf('Components|ClayNav', module)
 	.add('default', () => {
 		return (
@@ -35,44 +74,7 @@ storiesOf('Components|ClayNav', module)
 	.add('ClayVerticalNav', () => {
 		return (
 			<ClayVerticalNav
-				items={[
-					{
-						initialExpanded: true,
-						items: [
-							{
-								href: '#',
-								label: 'Nested1',
-							},
-						],
-						label: 'Home',
-					},
-					{
-						href: '#',
-						label: 'About',
-					},
-					{
-						href: '#',
-						label: 'Contact',
-					},
-					{
-						items: [
-							{
-								active: true,
-								href: '#',
-								label: 'Five',
-							},
-							{
-								href: '#',
-								label: 'Six',
-							},
-						],
-						label: 'Projects',
-					},
-					{
-						href: '#',
-						label: 'Seven',
-					},
-				]}
+				items={items}
 				large={boolean('large: ', false)}
 				spritemap={spritemap}
 			/>
@@ -81,44 +83,7 @@ storiesOf('Components|ClayNav', module)
 	.add('ClayVerticalNav w/ custom trigger', () => {
 		return (
 			<ClayVerticalNav
-				items={[
-					{
-						initialExpanded: true,
-						items: [
-							{
-								href: '#',
-								label: 'Nested1',
-							},
-						],
-						label: 'Home',
-					},
-					{
-						href: '#',
-						label: 'About',
-					},
-					{
-						href: '#',
-						label: 'Contact',
-					},
-					{
-						items: [
-							{
-								active: true,
-								href: '#',
-								label: 'Five',
-							},
-							{
-								href: '#',
-								label: 'Six',
-							},
-						],
-						label: 'Projects',
-					},
-					{
-						href: '#',
-						label: 'Seven',
-					},
-				]}
+				items={items}
 				large={boolean('large: ', false)}
 				spritemap={spritemap}
 				trigger={(props) => (
@@ -133,4 +98,12 @@ storiesOf('Components|ClayNav', module)
 				)}
 			/>
 		);
-	});
+	})
+	.add('ClayVerticalNav w/ Decorator', () => (
+		<ClayVerticalNav
+			decorated
+			items={items}
+			large={boolean('large: ', false)}
+			spritemap={spritemap}
+		/>
+	));