Statuses

docs/_includes/status.njk

@@ -0,0 +1,25 @@
+{% if since -%}
+	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
+{%- endif %}
+
+{% if status -%}
+	{%- if status == "wip" %}
+	<wa-badge variant="danger">
+		<wa-icon name="pickaxe"></wa-icon>
+		Work In Progress
+	</wa-badge>
+	{%- elif status == "experimental" -%}
+	<wa-badge variant="warning">
+		<wa-icon name="flask"></wa-icon>
+		Experimental
+	</wa-badge>
+	{%- elif status == "stable" -%}
+	<wa-badge variant="brand">Stable</wa-badge>
+	{%- else %}
+	<wa-badge>{{ status}}</wa-badge>
+	{%- endif %}
+{%- endif %}
+
+{% if isPro -%}
+	<wa-badge class="pro">PRO</wa-badge>
+{%- endif %}

docs/_layouts/component.njk

@@ -2,6 +2,8 @@
 {% set hasOutline = true %}
 {% set component = components[page.fileSlug] %}
 {% set description = component.summary %}
+{% set status = component.status %}
+{% set since = component.since %}
 
 {% extends '../_includes/base.njk' %}
 
@@ -10,15 +12,8 @@
   <h1 class="title">{{ title }}</h1>
   <div class="component-info">
     <code class="tag">&lt;{{ component.tagName }}&gt;</code>
-    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
-    <wa-badge
-      {% if component.status == 'stable' %}variant="brand"{% endif %}
-      {% if component.status == 'experimental' %}variant="warning"{% endif %}
-    >
-      {{ component.status }}
-    </wa-badge>
 
-    {% if isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+    {% include '../_includes/status.njk' %}
   </div>
   <p class="summary">
     {{ component.summary | inlineMarkdown | safe }}

docs/_layouts/element.njk

@@ -10,19 +10,7 @@
     {% for tag, url in elements %}
       <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
     {% endfor %}
-    {% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
-    {% if status %}
-      <wa-badge
-        {% if status == 'stable' %}variant="brand"{% endif %}
-        {% if status == 'experimental' %}variant="warning"{% endif %}
-      >
-        {{ status }}
-      </wa-badge>
-    {% endif %}
-
-    {% if isPro %}
-      <wa-badge class="pro">PRO</wa-badge>
-    {% endif %}
+    {% include '../_includes/status.njk' %}
   </div>
   {% if description -%}
     <p class="summary">{{ description | inlineMarkdown | safe }}</p>