From f6e2e632fa3710cfa467b15350b08dea6e0e3dfc Mon Sep 17 00:00:00 2001
From: Milos Djermanovic <milos.djermanovic@gmail.com>
Date: Fri, 17 Jun 2022 21:49:44 +0200
Subject: [PATCH] chore: fix 'replaced by' rule list (#16007)

---
 .../_includes/components/rule-list.macro.html |  3 +++
 docs/src/_includes/components/rule.macro.html |  6 +++--
 docs/src/assets/scss/components/rules.scss    | 23 +++++++++++------
 docs/src/library/rule-list.md                 | 25 +++++++++++++++++++
 4 files changed, 47 insertions(+), 10 deletions(-)
 create mode 100644 docs/src/_includes/components/rule-list.macro.html
 create mode 100644 docs/src/library/rule-list.md

diff --git a/docs/src/_includes/components/rule-list.macro.html b/docs/src/_includes/components/rule-list.macro.html
new file mode 100644
index 00000000000..670a0a70be8
--- /dev/null
+++ b/docs/src/_includes/components/rule-list.macro.html
@@ -0,0 +1,3 @@
+{%- macro ruleList(params) -%}
+    {% for rule in params.rules %}<a href="{{ ['/rules/', rule] | join | url }}" class="rule-list-item"><code>{{ rule }}</code></a>{% endfor %}
+{%- endmacro -%}
diff --git a/docs/src/_includes/components/rule.macro.html b/docs/src/_includes/components/rule.macro.html
index bcb5c03a698..693be229eb8 100644
--- a/docs/src/_includes/components/rule.macro.html
+++ b/docs/src/_includes/components/rule.macro.html
@@ -1,3 +1,5 @@
+{% from 'components/rule-list.macro.html' import ruleList %}
+
 {%- macro rule(params) -%}
 <article class="rule {% if params.deprecated == true %}rule--deprecated{% endif %} {% if params.removed == true %}rule--removed{% endif %}">
     <div class="rule__content">
@@ -7,7 +9,7 @@
             <span class="rule__status">deprecated</span>
         </p>
         {%- if params.replacedBy|length -%}
-        <p class="rule__description">Replaced by <a href="{{ ['/rules/', params.replacedBy] | join | url }}"><code>{{ params.replacedBy }}</code></a></p>
+        <p class="rule__description">Replaced by {{ ruleList({ rules: params.replacedBy }) }}</p>
         {%- else -%}<p class="rule__description">{{ params.description }}</p>
         {%- endif -%}
         {%- elseif params.removed == true -%}
@@ -16,7 +18,7 @@
             <span class="rule__status">removed</span>
         </p>
         {%- if params.replacedBy -%}
-        <p class="rule__description">Replaced by <a href="{{ ['/rules/', params.replacedBy] | join | url }}"><code>{{ params.replacedBy }}</code></a></p>
+        <p class="rule__description">Replaced by {{ ruleList({ rules: params.replacedBy }) }}</p>
         {%- else -%}<p class="rule__description">{{ params.description }}</p>
         {%- endif -%}
         {%- else -%}
diff --git a/docs/src/assets/scss/components/rules.scss b/docs/src/assets/scss/components/rules.scss
index 27b1e492ad3..82ec099af10 100644
--- a/docs/src/assets/scss/components/rules.scss
+++ b/docs/src/assets/scss/components/rules.scss
@@ -67,6 +67,14 @@
     font-size: .875rem;
     margin-bottom: .25rem;
     margin-block-end: .25rem;
+}
+
+a.rule__name {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
 
     &::after {
         position: absolute;
@@ -80,14 +88,6 @@
     }
 }
 
-a.rule__name {
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
 .rule__description {
     font-size: var(--step--1);
 }
@@ -166,3 +166,10 @@ a.rule__name {
         }
     }
 }
+
+a.rule-list-item+a.rule-list-item::before {
+    content: ",";
+    display: inline-block;
+    margin-left: 5px;
+    margin-right: 5px;
+}
diff --git a/docs/src/library/rule-list.md b/docs/src/library/rule-list.md
new file mode 100644
index 00000000000..635e6b40023
--- /dev/null
+++ b/docs/src/library/rule-list.md
@@ -0,0 +1,25 @@
+---
+title: Rule list
+---
+
+The rule list is a macro defined in `components/rule-list.macro.html`. The macro accepts a list of rule names and renders comma-separated links.
+
+## Usage
+
+{% raw %}
+
+```html
+<!-- import the macro -->
+{% from 'components/rule-list.macro.html' import ruleList %}
+
+<!-- use the macro -->
+{{ ruleList({ rules: ['accessor-pairs', 'no-undef'] }) }}
+```
+
+{% endraw %}
+
+## Examples
+
+{% from 'components/rule-list.macro.html' import ruleList %}
+
+{{ ruleList({ rules: ['accessor-pairs', 'no-undef'] }) }}