desy-html 5.3.0 → 6.0.0

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -0,0 +1,356 @@
+{% set exampleComponent = "accordion-history" %}
+{% set examples =  [
+  {
+    "name": "default",
+    "description": "Assumes allowMultiple and allowToggle are both false",
+    "data": {
+      "idPrefix": "accordion-example",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with status",
+    "description": "Set status to each item: past, current and pending",
+    "data": {
+      "idPrefix": "accordion-status",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerText": "Accordion Item muted",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "status": "muted"
+        },
+        {
+          "headerText": "Accordion Item currentmuted",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "status": "currentmuted"
+        },
+        {
+          "headerText": "Accordion Item past",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "status": "past"
+        },
+        {
+          "headerText": "Accordion Item current",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "status": "current"
+        },
+        {
+          "headerText": "Accordion Item pending",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "status": "pending"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Allow multiple",
+    "description": "allowMultiple = true. Assumes allowToggle is true",
+    "data": {
+      "idPrefix": "allowmultiple-example",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Allow toggle",
+    "description": "allowToggle = true. Assumes allowMultiple is false",
+    "data": {
+      "idPrefix": "allowtoggle-example",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "With one item opened",
+    "data": {
+      "idPrefix": "with-one-item-opened-example",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "open": true
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "With 2 items opened",
+    "data": {
+      "idPrefix": "with-2-items-opened-example",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "open": true
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "open": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "disabled and allowToggle and allowMultiple",
+    "description": "will hide the show/hide info and disable click in items",
+    "data": {
+      "idPrefix": "accordion-disabled",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item not disabled",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item disabled",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "disabled": true
+        },
+        {
+          "headerText": "Accordion Item disabled and open",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "disabled": true,
+          "open": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "With heading",
+    "data": {
+      "idPrefix": "heading-example",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Accordion example"
+      },
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "With heading level 4",
+    "description": "headingLevel is 4 in this example. The headings in this component start with h4 in this example. h4 for the heading and h5 inside the buttons.",
+    "data": {
+      "idPrefix": "accordion-heading-level-example",
+      "headingLevel": 4,
+      "heading": {
+        "text": "This header starts with h4"
+      },
+      "items": [
+        {
+          "headerText": "This is Item 1 with h5",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "This is Item 2 with h5",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "This is Item 3 with h5",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "With heading and show controls",
+    "data": {
+      "idPrefix": "heading-and-show-controls-example",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Accordion example"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "open": true
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with custom show/hide info",
+    "description": "The last item has empty strings to don't show any info",
+    "data": {
+      "idPrefix": "accordion-show-hide",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "show": {
+            "text": "Expandir detalles"
+          },
+          "hide": {
+            "text": "Contraer"
+          }
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "show": {
+            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
+          },
+          "hide": {
+            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
+          }
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "show": {
+            "text": ""
+          },
+          "hide": {
+            "text": ""
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "With classes applied",
+    "description": "Show code to display the classes applied in html",
+    "data": {
+      "idPrefix": "classes-example",
+      "headingLevel": 3,
+      "classes": "px-lg pt-base border-t border-b border-neutral-base",
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "classes": "py-sm bg-neutral-light border-neutral-base rounded-lg",
+          "open": true
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "With attributes applied",
+    "description": "Show code to display the attributes applied in html",
+    "data": {
+      "idPrefix": "attributes-example",
+      "headingLevel": 3,
+      "attributes": {
+        "id": "accordion-test"
+      },
+      "items": [
+        {
+          "headerText": "Accordion Item 1",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "attributes": {
+            "data-attr": "accordion-item-test-a"
+          }
+        },
+        {
+          "headerText": "Accordion Item 2",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "attributes": {
+            "data-attr": "accordion-item-test-b"
+          }
+        },
+        {
+          "headerText": "Accordion Item 3",
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "attributes": {
+            "data-attr": "accordion-item-test-c"
+          }
+        }
+      ]
+    }
+  }
+] %}

package/src/templates/components/accordion-history/_macro.accordion-history.njk

@@ -0,0 +1,3 @@
+{% macro componentAccordionHistory(params) %}
+{% include "./_template.accordion-history.njk" %}
+{% endmacro %}

package/src/templates/components/accordion-history/_template.accordion-history.njk

@@ -0,0 +1,209 @@
+{% set idPrefix = params.idPrefix %}
+{% set conditionalValue = false %}
+{% for item in params.items %}
+  {% if item %}
+    {%- if item.id -%}
+      {%- set id = item.id -%}
+    {%- else -%}
+      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+      {%- if loop.first -%}
+        {%- set id = idPrefix %}
+      {%- else -%}
+        {%- set id = idPrefix + "-" + loop.index0 -%}
+      {%- endif -%}
+    {%- endif -%}
+    {%- if item.open -%}
+      {%- set conditionalValue = id -%}
+    {%- endif -%}
+  {% endif %}
+{% endfor %}
+
+{#- This solution must be redone well because it has bugs:
+    1. If there are multiple opened items at init, it will only open the last one. It should open all of them marked as open.
+    2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
+-#}
+<!-- accordion-history -->
+<div
+x-ref="accordion"
+x-data="{
+  showAll: true,
+  buttonText: 'Mostrar todo',
+  toggleShow: function(){
+    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
+    buttons.forEach((button) => {
+      if(this.showAll == true){
+        if(button.getAttribute('aria-expanded') == 'false'){
+          button.click();
+        }
+      } else {
+        if(button.getAttribute('aria-expanded') == 'true'){
+          button.click();
+        }
+      }
+    });
+    this.showAll = !this.showAll;
+    if(this.showAll) {
+      this.buttonText = 'Mostrar todo';
+    } else {
+      this.buttonText = 'Ocultar todo';
+    }
+  }
+}"
+{%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div class="flex justify-between">
+  {% if params.heading.html or params.heading.text %}
+    {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
+    {% set headingContent %}{{ params.heading.html | safe if params.heading.html else params.heading.text }}{% endset %}
+    {% if params.headingLevel == "1" %}
+      <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
+    {% elseif params.headingLevel == "2" %}
+      <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+    {% elseif params.headingLevel == "3" %}
+      <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
+    {% elseif params.headingLevel == "4" %}
+      <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
+    {% elseif params.headingLevel == "5" %}
+      <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
+    {% else %}
+      <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+    {% endif %}
+  {% endif %}
+  {% if params.showControl %}
+    <button
+    x-ref="button"
+    @click="toggleShow"
+    x-text="buttonText"
+    class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
+      Mostrar todo
+    </button>
+  {% endif %}
+  </div>
+  <div class="Accordion pl-lg" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+    {% for item in params.items %}
+      {% if item %}
+      {%- if item.id -%}
+        {%- set id = item.id -%}
+      {%- else -%}
+        {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+        {%- if loop.first -%}
+          {%- set id = idPrefix %}
+        {%- else -%}
+          {%- set id = idPrefix + "-" + loop.index0 -%}
+        {%- endif -%}
+      {%- endif -%}
+
+      <div class="relative -my-px px-xs py-sm border-t border-b border-neutral-base">
+        {% set insideContent %}
+          <button
+          id="{{ id }}-title"
+          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
+          aria-controls="{{ id }}"
+          {% if item.open %}
+            aria-expanded = "true"
+          {% else %}
+            aria-expanded = "false"
+          {% endif %}
+          {% if item.disabled %} disabled{% endif %}
+          >
+            {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
+            <span
+              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
+                <span class="Accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                  {% if item.show %}
+                    {{ item.show.html | safe if item.show.html else item.show.text }}
+                  {% else %}
+                    Mostrar
+                  {% endif %}
+                </span>
+                <span class="Accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                  {% if item.hide %}
+                    {{ item.hide.html | safe if item.hide.html else item.hide.text }}
+                  {% else %}
+                    Ocultar
+                  {% endif %}
+                </span>
+              </span>
+          </button>
+        {% endset %}
+        {% if params.headingLevel == "1" %}
+          <h2>{{ insideContent | safe }}</h2>
+        {% elseif params.headingLevel == "2" %}
+          <h3>{{ insideContent | safe }}</h3>
+        {% elseif params.headingLevel == "3" %}
+          <h4>{{ insideContent | safe }}</h4>
+        {% elseif params.headingLevel == "4" %}
+          <h5>{{ insideContent | safe }}</h5>
+        {% elseif params.headingLevel == "5" %}
+          <h6>{{ insideContent | safe }}</h6>
+        {% else %}
+          <h3>{{ insideContent | safe }}</h3>
+        {% endif %}
+        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
+        {% if not loop.first %}
+          {% if item.status == 'current' %}
+            <div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
+          {% elseif item.status == 'pending' %}
+            <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-light"></div>
+          {% elseif item.status == 'muted' %}
+            <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
+           {% elseif item.status == 'currentmuted' %}
+            <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
+          {% else %}
+            <div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
+          {% endif %}
+        {% endif %}
+        {% if not loop.last %}
+          {% if item.status == 'current' %}
+            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
+          {% elseif item.status == 'pending' %}
+            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
+          {% elseif item.status == 'muted' %}
+            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base"></div>
+          {% elseif item.status == 'currentmuted' %}
+            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
+          {% else %}
+            <div class="absolute top-6 bottom-0 -left-5 border-2 border-primary-base"></div>
+          {% endif %}
+        {% endif %}
+        {% if item.status == 'current' %}
+          <div class="absolute top-5 -left-6 w-3 h-3 bg-white ring-2 ring-primary-base rounded-full" role="img"><p class="sr-only">Estado: actual</p></div>
+        {% elseif item.status == 'pending' %}
+          <div class="absolute top-5 -left-6 w-3 h-3 bg-white border-2 border-neutral-base rounded-full" role="img"><p class="sr-only">Estado: pendiente</p></div>
+        {% elseif item.status == 'muted' %}
+          <div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base border-2 border-neutral-base rounded-full" role="img"><p class="sr-only">Estado: pasado</p></div>
+        {% elseif item.status == 'currentmuted' %}
+          <div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base ring-2 ring-neutral-base rounded-full" role="img"><p class="sr-only">Estado: actual</p></div>
+        {% else %}
+          <div class="absolute top-5 -left-6 w-3 h-3 bg-primary-base border-2 border-primary-base rounded-full" role="img"><p class="sr-only">Estado: pasado</p></div>
+        {% endif %}
+        <div
+        {% if not item.open %}
+          hidden = ""
+        {% endif %}
+        {%- if id %}
+          id="{{ id }}"
+        {% endif %}
+        class="Accordion-panel relative {%- if item.classes %} {{ item.classes }}{% endif %}"
+        {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+          {% if not loop.last %}
+            {% if item.status == 'current' %}
+              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
+            {% elseif item.status == 'pending' %}
+              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
+            {% elseif item.status == 'muted' %}
+              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base"></div>
+            {% elseif item.status == 'currentmuted' %}
+              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
+            {% else %}
+              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-primary-base"></div>
+            {% endif %}
+          {% endif %}
+          {{ item.html | safe if item.html else item.text }}
+        </div>
+      </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>
+<!-- /accordion-history -->