feat(sbb-tab-group): tab titles redesign

[dauriamarco]

Closes #1907

[codecov-commenter]

Codecov Report

Merging #1975 (bd2668c) into master (ab917b0) will decrease coverage by 18.20%.
Report is 1709 commits behind head on master.
The diff coverage is 30.54%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

@@             Coverage Diff             @@
##           master    #1975       +/-   ##
===========================================
- Coverage   54.85%   36.66%   -18.20%     
===========================================
  Files          49      288      +239     
  Lines        1659    10905     +9246     
  Branches      406     2385     +1979     
===========================================
+ Hits          910     3998     +3088     
- Misses        671     6649     +5978     
- Partials       78      258      +180     

Files	Coverage Δ
...c/components/sbb-action-group/sbb-action-group.tsx	100.00% <100.00%> (ø)
...mponents/sbb-alert-group/sbb-alert-group.events.ts	100.00% <100.00%> (ø)
src/components/sbb-alert/sbb-alert.events.ts	100.00% <100.00%> (ø)
...onents/sbb-autocomplete/sbb-autocomplete.events.ts	100.00% <ø> (ø)
src/components/sbb-card-badge/sbb-card-badge.tsx	100.00% <100.00%> (+11.11%)	⬆️
src/components/sbb-card/sbb-card.stories.tsx	0.00% <ø> (ø)
src/components/sbb-card/sbb-card.tsx	90.00% <ø> (ø)
.../sbb-checkbox-group/sbb-checkbox-group.stories.tsx	0.00% <ø> (ø)
...mponents/sbb-checkbox-group/sbb-checkbox-group.tsx	33.33% <ø> (ø)
src/components/sbb-checkbox/sbb-checkbox.events.ts	0.00% <ø> (ø)
... and 55 more

... and 239 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[DavideMininni-Fincons]

I have to go deeper in code on Monday, however some notes:

• focus state in not drawn in Figma (now it's pretty squared)
• when pressed, title text should change position (as in the button)

I also noticed that the content panel can be focused and that a did-change event is triggered as soon as storybook loads the component, but it happens the same on master for both, so I assume it's ok.. :)

[mcilurzo]

ux review:
https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj?node-id=27931:203205&mode=design#554101799
https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj?node-id=27931:203199&mode=design#554103606

[dauriamarco]

I have to go deeper in code on Monday, however some notes:

• focus state in not drawn in Figma (now it's pretty squared)
• when pressed, title text should change position (as in the button)

I also noticed that the content panel can be focused and that a did-change event is triggered as soon as storybook loads the component, but it happens the same on master for both, so I assume it's ok.. :)

Hi @DavideMininni-Fincons, thanks for the feedback.

• The focus state should be present in Figma, it can be found by scrolling down a little and is indeed more squared off.
• I'm not sure if in the prototype we still have the text shifting, I see a little movement but it seems more like a Figma's small glitch. In his UI review Manuel didn't comment on it, but we can ask for confirmation.

[dauriamarco]

ux review: https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj?node-id=27931:203205&mode=design#554101799 https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj?node-id=27931:203199&mode=design#554103606

Hi @mcilurzo, thank you for the review. Here's the new link: https://lyne-components-preview-pr1975.app.sbb.ch/?path=/story/components-sbb-tab-sbb-tab-group--default-tabs-size-l

[DavideMininni-Fincons]

Looks good, just something to check in stories.

[mcilurzo]

@dauriamarco thank you for fixing the issues. everything is fine now.

[kyubisation]

Basically LGTM 👍
One issue about the header underline

[kyubisation]

LGTM 👍
Thanks! 😃

[DavideMininni-Fincons]

Looks good, thanks! :)