rule.macro.html

{% 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">
        {%- if params.deprecated == true -%}
        <p class="rule__name">
            {{ params.name }}
            <span class="rule__status">deprecated</span>
        </p>
        {%- if params.replacedBy|length -%}
        <p class="rule__description">Replaced by {{ ruleList({ rules: params.replacedBy }) }}</p>
        {%- else -%}<p class="rule__description">{{ params.description }}</p>
        {%- endif -%}
        {%- elseif params.removed == true -%}
        <p class="rule__name">
            {{ params.name }}
            <span class="rule__status">removed</span>
        </p>
        {%- if params.replacedBy -%}
        <p class="rule__description">Replaced by {{ ruleList({ rules: params.replacedBy }) }}</p>
        {%- else -%}<p class="rule__description">{{ params.description }}</p>
        {%- endif -%}
        {%- else -%}
        <a href="{{ ['/rules/', params.name] | join | url }}" class="rule__name">{{ params.name }}</a>
        <p class="rule__description">{{ params.description }}</p>
        {%- endif -%}
    </div>
    <div class="rule__categories">
        <span class="visually-hidden">Categories:</span>
        {%- if (params.deprecated) or (params.removed) -%}
            <p class="rule__categories__type">❌</p>
            {%- else -%}
            <p class="rule__categories__type" {% if params.categories.recommended == false %}aria-hidden="true" {%- endif -%}>
            ✅ <span class="visually-hidden">Extends</span>
        </p>
        {%- endif -%}

        <p class="rule__categories__type" {% if params.categories.fixable == false %}aria-hidden="true" {%- endif -%}>
            🛠 <span class="visually-hidden">Fix</span>
        </p>
        <p class="rule__categories__type" {% if params.categories.hasSuggestions == false %}aria-hidden="true" {%- endif -%}>
            💡 <span class="visually-hidden">Suggestions</span>
        </p>
    </div>
</article>
{%- endmacro -%}