Open accordion

[andreeeabb]

Describe the problem

---

Bug report identity: Please do not edit

Task path: WRqbNjeh3JQJI2q3UWHJ/2y0Lg6UBhOeKch64Kys9/lp6xq8tz85g0

[muryoh]

Hi @andreeeabb,

Quoting your previous comment on #164:

I have for example also design for whole pages, for example product detail page. I have also there some accordions and want to show them open. (issue 165)
If I choose from variants tap true it does not happen anything, so I suppose I have to use the advanced variants?

Yes indeed! Because the page contains a lot of elements, story.to.design does not know what element to interact with.

---

TLDR

I realize I've provided a lot of information you may not want 😄 Here's a summary!

You can use the following configuration:

{
  "initArgs": {
    ":actionSelector": "#\\#main > section > div.main__content > div.ids-product-detail.container > div.ids-pdp__description > div > div.description.--border > div.button-wrapper > button"
  },
  "variantProperties": [
    ":tap"
  ]
}

---

Why your current configuration does not work

I see your configuration here:

The problem is the following: there are many buttons matching that selector. We can see that by going to the developer tools while on your Storybook component:

Then, in the Console tab, inputing document.querySelectorAll('.ids-button-link--ghost') + Enter:

Since there are 12, story.to.design cannot choose the correct one here, you need to help it a bit

---

How to find the proper selector value

Here's a quick howto for the :actionSelector:

In the browser (I'm using Chrome here), right click on the element you want to interact with, and choose Inspect:

You should then see something like this:

(sometimes the browser will not select exactly the element you are interested in. It is best to try and select element that can be interacted with, like buttons)

You can then right click in the tree and choose Copy selector:

And finally, you just need to paste that value into the :actionSelector, giving (the # character has to be escaped, it is not very common to use one in element IDs):

{
  "initArgs": {
    ":actionSelector": "#\\#main > section > div.main__content > div.ids-product-detail.container > div.ids-pdp__description > div > div.description.--border > div.button-wrapper > button"
  },
  "variantProperties": [
    ":tap"
  ]
}

Importing your component should now expand the accordion (I imagine that was the one):