feat: Quote Wrapper Pattern

[jmuzina]

Done

• Implements Quote Wrapper pattern per design and spec
• Drive-bys:
  • Adds notes to all patterns docs pages about the patterns being a recent/in-flux addition

Fixes WD-13881

QA

• Review all quote wrapper examples
  • Large
    • All elements
    • Without signpost
    • Without citation
    • Without header
    • Without signpost and without header
    • Without CTA or image
    • Without CTA, image, or citation
    • Minimal
  • Medium
    • All elements
    • Without signpost
    • Without citation
    • Without header
  • Small
    • All elements
    • Without signpost
    • Without citation
    • Without header
• Review combined quote wrapper example and verify all above examples are rendered as expected.
• Review Quote Wrapper docs
• Review updated 4.18.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:

• 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 release (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.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[pastelcyborg]

There appears to be something going on here with the width of the hr/divider - at some screen sizes, it doesn't stretch all the way to horizontally align with the image below:

[jmuzina]

There appears to be something going on here with the width of the hr/divider - at some screen sizes, it doesn't stretch all the way

@pastelcyborg Good catch, I think I've fixed that by moving the highlighted rule to outside of the grid, so it covers the full width of the whole pattern

[jmuzina]

Made some changes after meeting with @lyubomir-popov to discuss c.com PR 1380.

• Design change: Changed the medium layout design: it now uses a 33/66 split with the signpost (or a gap if no signpost is provided) on the left, rest of the content on the right. The header's grid was also adjusted to use 33/66 on medium to line up with the signpost/quote grid.
• Wrapping the quote text and the signpost logo in a shallow section
• Slightly reduced spacing between the header row and rest of the quote
• Fixed some broken grid usage for the signpost logo
• Switched from using base hr to p-rule component
• Show the HR above the quote text on all breakpoints instead of only on large

[jmuzina]

Spec has been approved, putting this PR back into consideration.

Updated this to follow the same naming and documentation standards we set with hero and tiered list, and bumped the version to 4.18.0.

Review when you can @bartaz @advl - hoping we can merge this next week :)

[bartaz]

I guess it could be worth updating the pattern to use new 8 col grid? But also, doesn't need to be in scope of this PR. We could address it as follow up (could be done for all patterns I suppose).

[bartaz]

Looks good. We could consider updating this (and other?) patterns to new grid, but this can be a follow up.