From d52ab5021c7cbc2f00e087009d288a24fa2b084a Mon Sep 17 00:00:00 2001
From: Akshat Patel <akshat@live.ca>
Date: Sat, 9 Nov 2024 18:28:13 -0500
Subject: [PATCH] feat: allow list to be expressive

Signed-off-by: Akshat Patel <akshat@live.ca>
---
 src/list/list.directive.ts | 12 +++++++++++-
 src/list/list.stories.ts   | 13 ++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/list/list.directive.ts b/src/list/list.directive.ts
index 616a2ca57c..d43a22feb4 100644
--- a/src/list/list.directive.ts
+++ b/src/list/list.directive.ts
@@ -1,4 +1,9 @@
-import { Directive, ElementRef, HostBinding } from "@angular/core";
+import {
+	Directive,
+	ElementRef,
+	HostBinding,
+	Input
+} from "@angular/core";
 
 /**
  * Applies either ordered or unordered styling to the list container it is applied to.
@@ -33,5 +38,10 @@ export class List {
 		return !!(this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement.tagName === "LI");
 	}
 
+	/**
+	 * Set to `true` to make list expressive
+	 */
+	@Input() @HostBinding("class.cds--list--expressive") isExpressive = false;
+
 	constructor(protected elementRef: ElementRef) {}
 }
diff --git a/src/list/list.stories.ts b/src/list/list.stories.ts
index d6cff11aba..85bff69ddb 100644
--- a/src/list/list.stories.ts
+++ b/src/list/list.stories.ts
@@ -13,6 +13,9 @@ export default {
 	parameters: {
 		layout: "centered"
 	},
+	args: {
+		isExpressive: false
+	},
 	component: List
 } as Meta;
 
@@ -20,13 +23,13 @@ const Template = (args) => ({
 	props: args,
 	template: `
 		<p>Ordered List</p>
-		<ol cdsList>
+		<ol cdsList [isExpressive]="isExpressive">
 			<li cdsListItem>One</li>
 			<li cdsListItem>Two</li>
 			<li cdsListItem>Three</li>
 		</ol>
 		<p>Unordered List</p>
-		<ul cdsList>
+		<ul cdsList [isExpressive]="isExpressive">
 			<li cdsListItem>One</li>
 			<li cdsListItem>Two</li>
 			<li cdsListItem>Three</li>
@@ -39,7 +42,7 @@ const NestingTemplate = (args) => ({
 	props: args,
 	template: `
 		<p>Ordered List</p>
-		<ol cdsList>
+		<ol cdsList [isExpressive]="isExpressive">
 			<li cdsListItem>
 				One
 				<ol cdsList>
@@ -52,10 +55,10 @@ const NestingTemplate = (args) => ({
 			<li cdsListItem>Three</li>
 		</ol>
 		<p>Unordered List</p>
-		<ul cdsList>
+		<ul cdsList [isExpressive]="isExpressive">
 			<li cdsListItem>
 				One
-				<ul cdsList>
+				<ul cdsList [isExpressive]="isExpressive">
 					<li cdsListItem>Nested one</li>
 					<li cdsListItem>Nested two</li>
 					<li cdsListItem>Nested three</li>