New vanilla website

[albertkol]

Done

• Remove old "Design" section from docs
• Extract Accessibility docs into their own file
• Rename Tab buttons to segmented control
• Add tab menu on the docs pages for accessibility and design guidelines.
• Docs tab menu settings are set on component_tabs.yaml file.

QA

• Code has already been reviewed for each PR separately - this PR is the final QA
• Go to /docs check the tab menus for each pattern and layout

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-4430.demos.haus

[bethcollins92]

Noticed in QA - on the design guidelines page, the subtitles don't appear in the side nav

[bethcollins92]

Hi @lyubomir-popov - I added the p-strip to the titles. The spacing looked quite big so I also added the is-shallow class. Let me know what you think - I can always remove it. Thanks!

https://vanilla-framework-4430.demos.haus/docs/patterns/accordion

Shallow:

Regular:

[lyubomir-popov]

Hi @bethcollins92, my proposal here was to decrease the space above, increase the space between the heading, to create a more deliberate look:

[bethcollins92]

Thanks @lyubomir-popov - made those changes

[lyubomir-popov]

Thanks @bethcollins92, looks good.

[bethcollins92]

Woop. @bartaz this is ready for final QA check now

It was approved

[bartaz]

There are some pages with missing title:
https://vanilla-framework-4430.demos.haus/docs/patterns/contextual-menu
https://vanilla-framework-4430.demos.haus/docs/patterns/icons

maybe others as well.

We need to find out why and fix it.

[bartaz]

Segmented control page has missing <hr> under the title

[bartaz]

It feels weird to have more spacing on pages with tabs and no spacing on old docs without tabs. I think we should add the space to old templates as well. I guess it may end up a bigger change, not sure if we need to put it in this PR if it's too large.

Edit: on a second look, it doesn't look terribly broken, so I guess we don't need to block this PR on that. But would be nice to fix that later.

[bethcollins92]

I've fixed:

• Pages with missing titles
• <hr> added under segmentel control
• An issue is created here about the spacing under headings issue

[bartaz]

LGTM, thanks!