From cefef181fc8c4c1aa9d67314a93ffee9109a5bf7 Mon Sep 17 00:00:00 2001
From: "Elain T." <elain.tsai@graycore.io>
Date: Wed, 15 Jan 2025 17:55:44 -0500
Subject: [PATCH] style(all): add custom stylelint rule to suggest usage of the
 `clickable` mixin over setting `cursor: pointer;` (#3402)

---
 .stylelintrc                                  |  4 +++-
 .../cart-item/cart-item.component.scss        |  4 ++--
 .../containers/sidebar/sidebar.component.scss |  2 +-
 .../product-card/product-card.component.scss  |  2 +-
 .../no-direct-cursor-pointer.js               | 24 +++++++++++++++++++
 .../scss/interactions/mouse/_clickable.scss   |  1 +
 6 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 custom-stylelint-plugins/no-direct-cursor-pointer.js

diff --git a/.stylelintrc b/.stylelintrc
index ccc225223b..b322a1fa01 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,10 +1,12 @@
 {
   "plugins": [
     "stylelint-selector-bem-pattern",
-    "@stylistic/stylelint-plugin"
+    "@stylistic/stylelint-plugin",
+    "./custom-stylelint-plugins/no-direct-cursor-pointer"
   ],
   "extends": "stylelint-config-recommended-scss",
   "rules": {
+    "daffodil/no-direct-cursor-pointer": true,
     "color-hex-length": "long",
     "color-no-invalid-hex": true,
     "color-named": "never",
diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss b/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss
index da6ee26ac2..612a9daf60 100644
--- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss
+++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss
@@ -9,7 +9,7 @@
 	grid-template-columns: 1fr 3fr;
 
 	&__image {
-		cursor: pointer;
+		@include clickable();
 		display: block;
 		max-width: 100%;
 	}
@@ -19,7 +19,7 @@
 	}
 
 	&__name {
-		cursor: pointer;
+		@include clickable();
 		font-size: 1rem;
 		font-weight: bold;
 
diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss
index 37bd72b4c7..81a71b18a0 100644
--- a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss
+++ b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss
@@ -5,7 +5,7 @@
 	padding: 75px 25px 0;
 
 	&__close {
-		cursor: pointer;
+		@include clickable();
 		font-size: $medium-font-size;
 		position: absolute;
 		right: 25px;
diff --git a/apps/demo/src/app/product/components/product-card/product-card.component.scss b/apps/demo/src/app/product/components/product-card/product-card.component.scss
index 8b88224477..ef7574aff4 100644
--- a/apps/demo/src/app/product/components/product-card/product-card.component.scss
+++ b/apps/demo/src/app/product/components/product-card/product-card.component.scss
@@ -1,8 +1,8 @@
 @use 'utilities' as *;
 
 .demo-product-card {
+	@include clickable();
 	border: none;
-	cursor: pointer;
 
 	&__details {
 		padding: 15px 15px 0;
diff --git a/custom-stylelint-plugins/no-direct-cursor-pointer.js b/custom-stylelint-plugins/no-direct-cursor-pointer.js
new file mode 100644
index 0000000000..cd7adc98fb
--- /dev/null
+++ b/custom-stylelint-plugins/no-direct-cursor-pointer.js
@@ -0,0 +1,24 @@
+const stylelint = require('stylelint');
+
+const ruleName = 'daffodil/no-direct-cursor-pointer';
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: 'Use the `clickable()` mixin instead of directly setting `cursor: pointer;`.',
+});
+
+module.exports = stylelint.createPlugin(ruleName, (primaryOption) => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkDecls((decl) => {
+      if (decl.prop === 'cursor' && decl.value === 'pointer') {
+        stylelint.utils.report({
+          message: messages.rejected,
+          node: decl,
+          result: postcssResult,
+          ruleName,
+        });
+      }
+    });
+  };
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;
\ No newline at end of file
diff --git a/libs/design/scss/interactions/mouse/_clickable.scss b/libs/design/scss/interactions/mouse/_clickable.scss
index 19f345b75e..ed292d7f7b 100644
--- a/libs/design/scss/interactions/mouse/_clickable.scss
+++ b/libs/design/scss/interactions/mouse/_clickable.scss
@@ -11,6 +11,7 @@
 // @include clickable();
 // ```
 @mixin clickable() {
+	// stylelint-disable daffodil/no-direct-cursor-pointer
 	cursor: pointer;
 	-webkit-user-select: none;
 	/// Chrome all / Safari all ///