Added empty state - Variant 2

[ilayda21]

Should be merged after #4274

Done

• Variant 2 empty state is added.

Fixes #1010

QA

• Open second variant of the empty state
• Verify its implemented according to design
• Open docs.
• Verify empty state's second variant is documented correctly.

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-4276.demos.haus

[lyubomir-popov]

@ilayda21 the example I see is a 404, whereas the design shows a search with no results. Am I looking at the right thing?

[ilayda21]

I changed the url sorry about that @lyubomir-popov. I updated the url in the PR.

[lyubomir-popov]

Thanks. I know this is built on an existing design mockup, but can't help but notice a bit of a disconnect between text and layout.

The text contains suggestions that feel like consecutive steps but the layout presents those as equal alternatives - left choice or right choice. How about something like this:

    <div class="row">
        <div class="col-4 col-medium-3">
            <h4>Why not try widening your search?<br> You can do this by:</h4>
        </div><div class="col-4 col-medium-3">
            <ul class="p-list">
                <li class="p-list__item is-ticked">Adding alternative words or phrases</li>
                <li class="p-list__item is-ticked">Using individual words instead of phrases</li>
                <li class="p-list__item is-ticked">Trying a different spelling</li>
            </ul>
        </div>
    </div>
<div class="row">
        <hr>
    </div><div class="row">
        <div class="col-4 col-medium-3">
            <h4>Still no luck?</h4>
        </div>
    <div class="col-6 col-medium-3">
              <p class="u-no-margin--bottom">
                  <a href="#">Visit the Ubuntu homepage</a>
              </p>
              <p class="u-no-margin--bottom">
                  <a href="#">Contact us</a>
              </p>
        </div>
    </div>
</div>

The above should look end up looking like this:

[ilayda21]

@lyubomir-popov can you check it again?

[lyubomir-popov]

Thanks, looks good.

[bethcollins92]

Looking great Ilayda! I've left a few comments about the HTML. We need to try and use semantically correct elements where possible.

Please see the pastebin with my suggestion on how to structure it

[bartaz]

Rebased and cleaned up. LGTM.

[bethcollins92]

LGTM!