search

divriots / story-to-design

Keep your Figma libraries true-to-code in a single click.
https://story.to.design
25 stars 0 forks source link

Open accordion #165

Open andreeeabb opened 2 months ago

andreeeabb commented 2 months ago

Describe the problem

Bug report identity: Please do not edit

Task path: WRqbNjeh3JQJI2q3UWHJ/2y0Lg6UBhOeKch64Kys9/lp6xq8tz85g0

muryoh commented 2 months ago

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: image

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: image

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

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: image

You should then see something like this: image

(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: image

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):

image