wvuweb/wvu-design-system-v2

`i` and `item` in accordion component are the same

Closed this issue · 2 comments

{% assign i = 1 %}
<div class="accordion my-4" id="{{ component.name }}-accordion">
{% for item in (1..numberOfTabs) %}

In the code above, i and item have the same value (1, 2, 3, ...etc).

  1. Since i === item, it would be best to remove lines: 28 & 47.
  2. Then, on line 30, change item to i.

This way, you don't do any extra / unnecessary logic.

Test on staging to verify my logic 😉.

It occurs to me that, since {% assign i %} is outside of the for loop, this might be beneficial for people who want to loop over the partial (like I'm doing, ha!, live page).

assign i Loop Explanation

So, i is set to one, it goes through each loop and ends at a different number—let's say 5.

If we're looping over the partial, i starts at 5 on the second round, and continues up from there—I believe this is good / a smart default for how the editable region names are named currently.

If we used item, AFAIK, item would reset to 0 or 1 after each loop iteration. I think the editable regions would have duplicate names—and that would not be desirable.

That said, the best way to know is to test this, which I have not done. 🤷‍♂️😇

I suppose some testing would need to happen if you wanted to nuke {% assign i %}.

Closing this since it's not inconceivable to use many instances of the FAQ component on a single page.