CTA Block component

[jmuzina]

Done

Creates CTA block component. This will be used in many of our future "higher order components". The need for a separately styled CTA block component arose from this comment in the Hero PR and MM message.

See Figma

• Fixes WD-12900
• Unblocks #5189, #5204

QA

• Review example
  • Verify that the CTA block link wraps as a whole / is not broken in the middle of the link as you shrink page width.
• Review CTA block docs. Note that these have been added to a new side-nav section, "Patterns".
• Review 4.15.0 release notes

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:

• [x] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [x] 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
• [x] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

We have it in such cases as well, in 25/75: https://vanillaframework.io/docs/examples/patterns/hero/hero-rules https://vanillaframework.io/docs/examples/patterns/hero/hero-signpost

And the top line does not span the whole width here:

To me, this kind of placement in the center is odd, and should be an exception, not the default:

[bartaz]

As discussed with @lyubomir-popov, lets for now implement it as the most common use case that is used in hero and other places, so a simple component with button, link and a line on top. No layout within. Just making sure it wraps as needed.

[jmuzina]

Should this be a "component" or a "pattern"?

[bartaz]

It fits more as a component that we use inside bigger patterns.

[bartaz]

We are holding off on merging this, as we are experimenting with implementing patterns in CSS which may mean this component is not really needed on it's own.

[jmuzina]

Rebased and made a change to remove the __link class from the link inside the example, since the flex implementation doesn't require the link to have its own class.