feat(@clayui/css): Update clay-text-typography maps to use the `hre…

…f` key - List Group, Links, Tables, and Sidebar
liferay · Feb 14, 2022 · 9c99628 · 9c99628
1 parent 1a428df
commit 9c99628
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 47 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_list-group.scss b/packages/clay-css/src/scss/atlas/variables/_list-group.scss
@@ -32,9 +32,13 @@ $list-group-title-link: map-deep-merge(
 		border-radius: 1px,
 		display: inline-block,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$list-group-title-link
 );
@@ -58,9 +62,13 @@ $list-group-subtitle-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$list-group-subtitle-link
 );
@@ -74,9 +82,13 @@ $list-group-text-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$list-group-text-link
 );
@@ -98,9 +110,13 @@ $list-group-subtext-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$list-group-subtext-link
 );

diff --git a/packages/clay-css/src/scss/components/_links.scss b/packages/clay-css/src/scss/components/_links.scss
@@ -48,26 +48,18 @@ button.link-outline {
 
 .component-title {
 	@include clay-text-typography($component-title);
-
-	a {
-		@include clay-link($component-title-link);
-	}
 }
 
 .component-subtitle {
 	@include clay-text-typography($component-subtitle);
-
-	a {
-		@include clay-link($component-subtitle-link);
-	}
 }
 
 .component-action {
 	@include clay-link($component-action);
 }
 
 .component-text {
-	@include clay-css($component-text);
+	@include clay-text-typography($component-text);
 }
 
 .component-icon {

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -362,10 +362,6 @@ caption {
 	@include clay-text-typography($table-title);
 }
 
-.table-title a {
-	@include clay-link($table-title-link);
-}
-
 // Table Link
 
 .table-link {
@@ -663,10 +659,6 @@ caption {
 	@include clay-text-typography($table-list-title);
 }
 
-.table-list-title a {
-	@include clay-link($table-list-title-link);
-}
-
 // Table List Link
 
 .table-list-link {

diff --git a/packages/clay-css/src/scss/variables/_links.scss b/packages/clay-css/src/scss/variables/_links.scss
@@ -183,7 +183,7 @@ $link-monospaced: map-deep-merge(
 	$link-monospaced
 );
 
-// Component Title
+// .component-title
 
 $component-title: () !default;
 $component-title: map-deep-merge(
@@ -219,7 +219,14 @@ $component-title-link: map-deep-merge(
 	$component-title-link
 );
 
-// Component Subtitle
+$component-title: map-deep-merge(
+	$component-title,
+	(
+		href: $component-title-link,
+	)
+);
+
+// .component-subtitle
 
 $component-subtitle: () !default;
 $component-subtitle: map-deep-merge(
@@ -241,7 +248,14 @@ $component-subtitle-link: map-deep-merge(
 	$component-subtitle-link
 );
 
-// Component Action
+$component-subtitle: map-deep-merge(
+	$component-subtitle,
+	(
+		href: $component-subtitle-link,
+	)
+);
+
+// .component-action
 
 $component-action: () !default;
 $component-action: map-deep-merge(
@@ -286,8 +300,12 @@ $component-action: map-deep-merge(
 	$component-action
 );
 
+// .component-text
+
 $component-text: () !default;
 
+// .component-icon
+
 $component-icon: () !default;
 $component-icon: map-deep-merge(
 	(

diff --git a/packages/clay-css/src/scss/variables/_list-group.scss b/packages/clay-css/src/scss/variables/_list-group.scss
@@ -47,6 +47,8 @@ $list-group-header-bg: $list-group-bg !default;
 $list-group-header-padding-x: $list-group-item-padding-x !default;
 $list-group-header-padding-y: $list-group-item-padding-y !default;
 
+// .list-group-header-title
+
 $list-group-header-title: () !default;
 $list-group-header-title: map-deep-merge(
 	(
@@ -58,14 +60,16 @@ $list-group-header-title: map-deep-merge(
 	$list-group-header-title
 );
 
-// List Group Title
+// .list-group-title
 
 $list-group-title-link: () !default;
 $list-group-title-link: map-deep-merge(
 	(
 		color: $gray-900,
 		max-width: 100%,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-title-link
 );
@@ -79,20 +83,22 @@ $list-group-title: map-deep-merge(
 		line-height: $line-height-base,
 		margin-bottom: 0,
 		margin-top: $list-group-item-flex-list-group-title-offset-top,
-		clay-link: $list-group-title-link
+		href: $list-group-title-link
 	),
 	$list-group-title
 );
 
 $list-group-title-active-color: $list-group-active-color !default;
 
-// List Group Subtitle
+// .list-group-subtitle
 
 $list-group-subtitle-link: () !default;
 $list-group-subtitle-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtitle-link
 );
@@ -102,18 +108,20 @@ $list-group-subtitle: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtitle-link,
+		href: $list-group-subtitle-link,
 	),
 	$list-group-subtitle
 );
 
-// List Group Text
+// .list-group-text
 
 $list-group-text-link: () !default;
 $list-group-text-link: map-deep-merge(
 	(
 		color: $gray-900,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-text-link
 );
@@ -123,20 +131,22 @@ $list-group-text: map-deep-merge(
 	(
 		color: $gray-900,
 		margin-bottom: 0,
-		clay-link: $list-group-text-link,
+		href: $list-group-text-link,
 	),
 	$list-group-text
 );
 
 $list-group-text-active-color: $list-group-active-color !default;
 
-// List Group Subtext
+// .list-group-subtext
 
 $list-group-subtext-link: () !default;
 $list-group-subtext-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtext-link
 );
@@ -146,7 +156,7 @@ $list-group-subtext: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtext-link,
+		href: $list-group-subtext-link,
 	),
 	$list-group-subtext
 );

diff --git a/packages/clay-css/src/scss/variables/_sidebar.scss b/packages/clay-css/src/scss/variables/_sidebar.scss
@@ -3,21 +3,21 @@ $sidebar-padding-left: 1rem !default; // 16px
 $sidebar-padding-right: 1rem !default; // 16px
 $sidebar-padding-top: 1rem !default; // 16px
 
-// Sidebar Header Title
+// .sidebar-header .component-title
 
 $sidebar-header-component-title: () !default;
 $sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 1.5rem,
 		font-weight: $font-weight-semi-bold,
-		clay-link: (
+		href: (
 			color: $gray-900,
 		),
 	),
 	$sidebar-header-component-title
 );
 
-// Sidebar Header Subtitle
+// .sidebar-header .component-subtitle
 
 $sidebar-header-component-subtitle: () !default;
 $sidebar-header-component-subtitle: map-deep-merge(

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -177,6 +177,13 @@ $table-title-link: map-deep-merge(
 	$table-title-link
 );
 
+$table-title: map-deep-merge(
+	$table-title,
+	(
+		href: $table-title-link,
+	)
+);
+
 // Table Link
 
 $table-link: () !default;
@@ -386,6 +393,13 @@ $table-list-title-link: map-deep-merge(
 	$table-list-title-link
 );
 
+$table-list-title: map-deep-merge(
+	$table-list-title,
+	(
+		href: $table-list-title-link,
+	)
+);
+
 // Table List Link
 
 $table-list-link: () !default;