Added empty state - 1st variant

[ilayda21]

Done

• Variant 1 empty state is added.
• Empty state is added to docs.

Fixes #1010

QA

• Open empty state example
• Verify its implemented according to design
• Open docs
• Verify empty state's no content variant is documented correctly.
• Open whats new section.
• Verify "empty state" is added.

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.

[webteam-app]

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

[bethcollins92]

The examples look great! I've spoken to Scott and we both aren't sure of the placement in the base section. I'm sure Bartek has a reason for this but we will wait until he's back to check his reasoning. Nice work :)

[lyubomir-popov]

Hi, 2 comments from me:

1. Could you please add u-no-margin--bottom to all h4 headings, and change the small text to regular paragraphs please?
   Should look like this:

Before:

After:

2. The documentation page shows one left-aligned example (as per the brief and benchmarking, and consistent with everything else we do), and 2 central alignment examples (not consistent with anything else we do, but strongly favoured in the original design).

Unless there's a section of the documentation explaining when to use which, I'd suggest dropping the central alignment examples. cc @spencerbygraves

[spencerbygraves]

I'd agree it seems unnecessary to have the centred version.

[bethcollins92]

Looking great! - as we discussed if you could move the example into the layout section, and I'll double check with @bartaz on Monday this is an appropriate place for it. Thanks!

[bethcollins92]

@lyubomir-popov could you take another look please and design +1 if you're happy

[bethcollins92]

LGTM but let's wait for Bartek to check it's ok in the layout section

[bartaz]

Thanks for implementing this. I tried to clean up this PR from unnecessary duplicated commits from main branch, hopefully I didn't mess up something.

As for the placement of the Empty State page - we don't seem to have a good place for it at the moment. "Empty state" is a design pattern, built out of Vanilla components. It's definitely not a layout, it's also not a base element, and technically not a component (but probably closest to be one). So I guess for now we either put it in "Components" or create a new section "Patterns" for it (but this means we only have Empty State there for a while).

[bartaz]

I moved the empty state page to components section.

LGTM now, thanks!