Feature: Title and description for tabs

[Nevelito]

Description

• Refactor tab_groups to have title and description

Fixes # (issue) #3421

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works

Screenshots & recording

[codeclimate]

Code Climate has analyzed commit 45318a0 and detected 0 issues on this pull request.

View more on Code Climate.

[Nevelito]

I think I mede it as I should, but I do not know what can I put into title and description of tabs. Also I don't know why tab_group_component_spec and tab_swicher_component_spec are empty.

[Paul-Bob]

Looking good already, @Nevelito. Thank you!

Let's make two minor changes:

1. Use the instance variable directly in the component instead of defining a public reader. Instance variable access is faster than reader access.
2. In the tab header component, let's add the def render? method, and inside it, define the logic as (@title || @description).present?. This way, we avoid rendering an empty div if there is neither a title nor a description.

Otherwise, it's looking good! 👍

[Paul-Bob]

While manually testing this I noticed something, title and description would look nicer outside of the tabs border:

And let's try to extract the header section from app/components/avo/panel_component.html.erb and reuse it for tabs instead of creating a new component.

[Paul-Bob]

Seems a bit to much to render the whole Avo::PanelComponent when we only want to render the header section. Le'ts create a new component, extract the header section into that component and use the new Avo::PanelHeaderComponent