From 3fa114a3a6f4f2109054e6a08ca026627b9a0e4a Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 14 May 2021 13:23:27 -0700
Subject: [PATCH] fix(@clayui/css): Mixins `clay-nav-variant` convert to use
 new (easier to remember) Sass map keys. The old keys will still work and win
 over new keys.

- Adds option `enabled` to prevent styles from being output
- Adds option `nav-item` to style `.nav-item` class in the mixin
- Adds option `nav-link` to style `.nav-link` class in the mixin, replaces `link-*-*` option

fixes #4071
---
 packages/clay-css/src/scss/mixins/_nav.scss | 172 +++++++++++++++-----
 1 file changed, 129 insertions(+), 43 deletions(-)

diff --git a/packages/clay-css/src/scss/mixins/_nav.scss b/packages/clay-css/src/scss/mixins/_nav.scss
index 972984f859..c5935e735c 100644
--- a/packages/clay-css/src/scss/mixins/_nav.scss
+++ b/packages/clay-css/src/scss/mixins/_nav.scss
@@ -29,78 +29,164 @@
 /// A mixin to create a `.nav` color variant.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
+/// // `bg` is deprecated use `background-color` instead
 /// bg: {Color | String | Null},
+/// // `link-bg` is deprecated use Sass map `nav-link` instead
 /// link-bg: {Color | String | Null},
+/// // `link-border-radius` is deprecated use Sass map `nav-link` instead
 /// link-border-radius: {Number | String | List | Null},
+/// // `link-color` is deprecated use Sass map `nav-link` instead
 /// link-color: {Color | String | Null},
+/// // `link-font-weight` is deprecated use Sass map `nav-link` instead
 /// link-font-weight: {Number | String | Null},
+/// // `link-hover-bg` is deprecated use Sass map `nav-link: ( hover: () )` instead
 /// link-hover-bg: {Color | String | Null},
+/// // `link-hover-color` is deprecated use Sass map `nav-link: ( hover: () )` instead
 /// link-hover-color: {Color | String | Null},
+/// // `link-focus-bg` is deprecated use Sass map `nav-link: ( focus: () )` instead
 /// link-focus-bg: {Color | String | Null},
+/// // `link-focus-color` is deprecated use Sass map `nav-link: ( focus: () )` instead
 /// link-focus-color: {Color | String | Null},
+/// // `link-disabled-bg` is deprecated use Sass map `nav-link: ( disabled: () )` instead
 /// link-disabled-bg: {Color | String}, // Default: transparent
+/// // `link-disabled-color` is deprecated use Sass map `nav-link: ( disabled: () )` instead
 /// link-disabled-color: {Color | String}, // Default: $nav-link-disabled-color
+/// // `link-disabled-opacity` is deprecated use Sass map `nav-link: ( disabled: () )` instead
 /// link-disabled-opacity: {Number | String | Null},
+/// // `link-active-bg` is deprecated use Sass map `nav-link: ( active-class: () )` instead
 /// link-active-bg: {Color | String | Null},
+/// // `link-active-color` is deprecated use Sass map `nav-link: ( active-class: () )` instead
 /// link-active-color: {Color | String | Null},
+/// // `link-active-font-weight` is deprecated use Sass map `nav-link: ( active-class: () )` instead
 /// link-active-font-weight: {Number | String | Null},
 /// @todo
 /// - Add @example
 /// - Add @link to documentation
 
 @mixin clay-nav-variant($map) {
-	$bg: map-get($map, bg);
-	$link-bg: map-get($map, link-bg);
-	$link-border-radius: map-get($map, link-border-radius);
-	$link-color: map-get($map, link-color);
-	$link-font-weight: map-get($map, link-font-weight);
-	$link-hover-bg: map-get($map, link-hover-bg);
-	$link-hover-color: map-get($map, link-hover-color);
-	$link-focus-bg: map-get($map, link-focus-bg);
-	$link-focus-color: map-get($map, link-focus-color);
-	$link-disabled-bg: setter(map-get($map, link-disabled-bg), transparent);
-	$link-disabled-color: setter(
-		map-get($map, link-disabled-color),
-		$nav-link-disabled-color
+	$enabled: setter(map-get($map, enabled), true);
+
+	$base: setter($map, ());
+	$base: map-merge(
+		$base,
+		(
+			background-color:
+				setter(map-get($map, bg), map-get($base, background-color)),
+		)
 	);
-	$link-disabled-opacity: map-get($map, link-disabled-opacity);
-	$link-active-bg: map-get($map, link-active-bg);
-	$link-active-color: map-get($map, link-active-color);
-	$link-active-font-weight: map-get($map, link-active-font-weight);
 
-	background-color: $bg;
+	$nav-link: setter(map-get($map, nav-link), ());
 
-	.nav-btn.btn-unstyled,
-	.nav-link {
-		background-color: $link-bg;
+	$nav-link-hover: setter(map-get($nav-link, hover), ());
+	$nav-link-hover: map-merge(
+		$nav-link-hover,
+		(
+			background-color:
+				setter(
+					map-get($map, link-hover-bg),
+					map-get($nav-link-hover, background-color)
+				),
+			color:
+				setter(
+					map-get($map, link-hover-color),
+					map-get($nav-link-hover, color)
+				),
+		)
+	);
 
-		@include border-radius($link-border-radius);
+	$nav-link-focus: setter(map-get($nav-link, focus), ());
+	$nav-link-focus: map-merge(
+		$nav-link-focus,
+		(
+			background-color:
+				setter(
+					map-get($map, link-focus-bg),
+					map-get($nav-link-focus, background-color)
+				),
+			color:
+				setter(
+					map-get($map, link-focus-color),
+					map-get($nav-link-focus, color)
+				),
+		)
+	);
 
-		color: $link-color;
-		font-weight: $link-font-weight;
+	$nav-link-active-class: setter(map-get($nav-link, active-class), ());
+	$nav-link-active-class: map-merge(
+		$nav-link-active-class,
+		(
+			background-color:
+				setter(
+					map-get($map, link-active-bg),
+					map-get($nav-link-active-class, background-color)
+				),
+			color:
+				setter(
+					map-get($map, link-active-color),
+					map-get($nav-link-active-class, color)
+				),
+			font-weight:
+				setter(
+					map-get($map, link-active-font-weight),
+					map-get($nav-link-active-class, font-weight)
+				),
+		)
+	);
 
-		&:hover {
-			background-color: $link-hover-bg;
-			color: $link-hover-color;
-		}
+	$nav-link-disabled: setter(map-get($nav-link, disabled), ());
+	$nav-link-disabled: map-merge(
+		$nav-link-disabled,
+		(
+			background-color:
+				setter(
+					map-get($map, link-disabled-bg),
+					map-get($nav-link-disabled, background-color)
+				),
+			color:
+				setter(
+					map-get($map, link-disabled-color),
+					map-get($nav-link-disabled, color)
+				),
+			opacity:
+				setter(
+					map-get($map, link-disabled-opacity),
+					map-get($nav-link-disabled, opacity)
+				),
+		)
+	);
 
-		&:focus,
-		&.focus {
-			background-color: $link-focus-bg;
-			color: $link-focus-color;
-		}
+	$nav-link: map-deep-merge(
+		$nav-link,
+		(
+			background-color:
+				setter(
+					map-get($map, link-bg),
+					map-get($nav-link, background-color)
+				),
+			border-radius:
+				setter(
+					map-get($map, link-border-radius),
+					map-get($nav-link, border-radius)
+				),
+			color: setter(map-get($map, link-color), map-get($nav-link, color)),
+			font-weight:
+				setter(
+					map-get($map, link-font-weight),
+					map-get($nav-link, font-weight)
+				),
+			hover: $nav-link-hover,
+			focus: $nav-link-focus,
+			active-class: $nav-link-active-class,
+			disabled: $nav-link-disabled,
+		)
+	);
 
-		&:disabled,
-		&.disabled {
-			background-color: $link-disabled-bg;
-			color: $link-disabled-color;
-			opacity: $link-disabled-opacity;
-		}
+	@if ($enabled) {
+		@include clay-css($base);
 
-		&.active {
-			background-color: $link-active-bg;
-			color: $link-active-color;
-			font-weight: $link-active-font-weight;
+		.nav-btn.btn-unstyled,
+		.nav-link {
+			@include clay-link($nav-link);
 		}
 	}
 }