feat: allow to use `x-tagGroups` extension to define tree structure

[weyert]

Allow to use the x-tagGroups and x-displayName vendor extensions to define the structure of table of contents

fixes #1390

Elements Default PR Template

In general, make sure you have: (check the boxes to acknowledge you've followed this template)

• [X] Read CONTRIBUTING.md

[netlify[bot]]

✅ Deploy Preview for stoplight-elements ready!

Name	Link
🔨 Latest commit	fc7b9ac2acb1b5afbe079377a0a9081b0acff401
🔍 Latest deploy log	https://app.netlify.com/sites/stoplight-elements/deploys/66be1eec5cfb930008a82def
😎 Deploy Preview	https://deploy-preview-2603--stoplight-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for stoplight-elements-demo ready!

Name	Link
🔨 Latest commit	fc7b9ac2acb1b5afbe079377a0a9081b0acff401
🔍 Latest deploy log	https://app.netlify.com/sites/stoplight-elements-demo/deploys/66be1eec431f8e0008c39411
😎 Deploy Preview	https://deploy-preview-2603--stoplight-elements-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mnaumanali94]

@weyert Can you provide an explanation of what this does and some documentation please.

[weyert]

@weyert Can you provide an explanation of what this does and some documentation please.

@mnaumanali94 If the x-tagGroups-extension exists in the specification it will go to a different code path which uses the extension as defined by Redocly to generate the structure. This should fix issue #1390

See screenshot:

or see: https://deploy-preview-2603--stoplight-elements.netlify.app/?path=/story/public-api--with-tag-groups

The relevant vendor extension definition in the spec:

{
"tags": [
     {
       name: 'Todos',
       'x-displayName': 'To-dos',
     },
     {
       name: 'Retrieval',
       'x-displayName': 'Retrieve To-do Items',
     },
     {
       name: 'Management',
       'x-displayName': 'Add/remove To-do Items',
     },
],
'x-tagGroups': [
     {
       name: 'Todos',
       tags: ['Retrieval', 'Management'],
     },
]
}

[mnaumanali94]

This doesn't solve the problem of showing description for tags? Did you intend to add that too?

[weyert]

@mnaumanali94 It allows you use a different text for a tag in the site navigation.

I am not sure what intended use case of showing a description alongside the tag name is.

[Roshboy]

Any update on this PR because I would like this to be a feature on stoplight elements as I am trying to group tags underneath another tag. So what I mean is I have an endpoint title named Order and underneath that I want subtags that say IN PROD, IN DEV, etc. This PR does exactly what I am looking for. So if this can be implemented into stoplight, that would be great.

[mnaumanali94]

@weyert Storybook shows me this. I'm guessing something broke?

[weyert]

@weyert Storybook shows me this. I'm guessing something broke?

Sorry, I missed your comment. I will have a look when I am back from the office

[mnaumanali94]

@weyert Were you able to take a look?

[weyert]

@weyert Storybook shows me this. I'm guessing something broke?

Sorry missed this. What do you consider broken?