chore: fix 'replaced by' rule list (#16007)

eslint · Jun 17, 2022 · f6e2e63 · f6e2e63
1 parent c1d0240
commit f6e2e63
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/docs/src/_includes/components/rule-list.macro.html 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
@@ -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
@@ -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
@@ -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'] }) }}