Implement Basic Section pattern

[jmuzina]

Done

Implements Basic section pattern.

TODO

• Features not yet implemented
  • Support variable subtitle heading level
  • Support the optional label (muted heading) subcomponent (ref)
• Outstanding questions for design
  • Should the embedded linked logo section should allow a title (conflicting h2 with the section title) - see figma comment
  • Should the embedded linked logo section include its top HR - see figma comment
• Documentation
  • Add examples for various combinations of input
  • add docs to the linked logo section explaining that image_attrs can be used instead of image_html.
  • Build docs for the basic section pattern
    • Note that jinja2 2.10 or later is required for namespace() to work - required by the code block subcomponent
• Code cleanup (after design approval)
  • Trim whitespace / whitespace control for clean look in docs
  • Remove TODO notices from the macro
  • If needed, split this into a few feature PRs
• Basic section examples should be snapshotted responsively (at medium breakpoint) as well (they have responsive behavior at medium breakpoint)

Fixes WD-22546
Fixes WD-23191

QA

• Review basic section docs
• Review 4.29.0 release notes
• Review combined examples and verify the pattern is structured as expected, per the Figma and spec

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro 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 existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[kim-isaac]

Hi @jmuzina , thanks so much for organizing and building out this complex pattern!
I’ve listed a few comments below:

• Overall, the default rule at the top of each section is missing. Could you please add that?
• Label: Please remove the top & bottom padding.
• Would it be okay to add an extra note at the 'pattern level' docs?: Deep padding is applied to the final section at the bottom of the page to create sufficient spacing from the page footer. Shallow padding is used when a related full-width element (e.g., an image or table) is placed directly below the section.
• Logo section: Currently, two separate logo sections are used across different lines. Would it be possible to consolidate them into a single component? Also, the spacing around the Lenovo logo on the second row seems off.

also, I'll add @eliman11 for the UX review!

[eliman11]

Thank you @jmuzina and @kim-isaac this looks great! Sorry this is super minor and annoying, but could we change all the headings to use sentence case so that we're consistent with the other patterns (although I also just noticed "Quote Wrapper" is in title case) - so Basic section, Basic section / Mixed content, Basic section / Linked title, etc

Also could we have an h3 HTML tag for the label instead of an h4 to avoid skipping levles in the heading hierarchy? Everything else looks good to me!

[jmuzina]

Thanks for your reviews @eliman11 and @kim-isaac - I've adjusted per your feedback. Have another look and let me know what you think!

[kim-isaac]

Thanks @jmuzina ! I have two comments below:

• It seems like there's still bottom padding left on the label, even when I set top and bottom padding to none. Is this something that can't be changed within the pattern?
• I had a chat with Elaine, and a title like "default padding" at the pattern level might be misinterpreted as a built-in part of the pattern. Since you’ve already included a link to the documentation that I asked to add, I believe the codepen sample could be omitted. What are your thoughts?

Besides that all looks great! Thanks again.

[jmuzina]

@kim-isaac

It seems like there's still bottom padding left on the label, even when I set top and bottom padding to none. Is this something that can't be changed within the pattern?

This is bottom margin, not padding:

If you like, we can add u-no-margin--bottom to reduce (but not remove) the bottom margin from 10px to 2px. The 2px is kept to maintain baseline alignment.

Removing the dev tools overlay so you can see what that would look like:

Split:

Stacked:

Would that work for you?

a title like "default padding" at the pattern level might be misinterpreted as a built-in part of the pattern. Since you’ve already included a link to the documentation that I asked to add, I believe the codepen sample could be omitted. What are your thoughts?

Yes, that's workable, and won't have negative effects for visual regression coverage because there are other examples that use the "default padding". I'll push that in a moment

[kim-isaac]

Hi @jmuzina

If you like, we can add u-no-margin--bottom to reduce (but not remove) the bottom margin from 10px to 2px. The 2px is kept to maintain baseline alignment.

Yes, that would be great!

[eliman11]

Thanks Julie! Looks good :) Also very minor but can we also have the "Basic Section" heading on the page itself in sentence case? Will +1 for UX though, thanks both!

[kim-isaac]

Hi @jmuzina , I've checked that the bottom margin on the label has been reduced - thank you!
What I meant by “pattern level” was the entire Codepen sample. (Similarly, there's a chance that “deep padding” and “shallow padding” could also be misread as part of the pattern) Would it be possible to remove those? Just a suggestion though - feel free to keep them if you think they’re still helpful!

[jmuzina]

@eliman11

Can we also have the "Basic Section" heading on the page itself in sentence case?

Done, thanks!

@kim-isaac

there's a chance that “deep padding” and “shallow padding” could also be misread as part of the pattern

Good point, I removed those bits of text that were outside of the patterns and instead am relying on the text inside the examples themselves to demonstrate which padding is being used.

What I meant by “pattern level” was the entire Codepen sample.

I think it's important we keep the example embed in some form - it helps developers to quickly get started using the pattern with a given configuration (in this case different padding settings) by copy-pasting. I've reworded the documentation here to make these things clear :

1. Section padding is being applied by the pattern itself (the user doesn't have to apply p-section themselves)
2. To request a different padding type, the padding parameter can be used
3. Guidance on when to use which padding level is available in the section docs (with a link)

With these changes and the removal of the misleading out-of-pattern titles in the example, do you think the page is okay now?

[kim-isaac]

Hi @jmuzina , thanks, all looks good to me!
I'll add +1 as well :)

[Copilot]

Pull Request Overview

This PR implements a new Basic Section pattern that provides a flexible content structure with title, subtitle, and various content blocks. The pattern supports multiple content types including text, images, videos, lists, code blocks, logos, and call-to-action elements with responsive layout options.

• Introduces a comprehensive basic section pattern with configurable padding and layout options
• Enhances the linked logo section pattern to support attribute forwarding and optional elements
• Adds extensive documentation and examples demonstrating various configuration options

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
templates/_macros/vf_basic-section.jinja	Core macro implementing the basic section pattern with support for multiple content block types
templates/_macros/vf_linked-logo-section.jinja	Updated to support attribute forwarding, optional title, and configurable top rule
templates/_macros/shared/vf_dedent.jinja	New utility macro for removing leading whitespace from multi-line text blocks
templates/docs/patterns/basic-section/index.md	Comprehensive documentation for the new basic section pattern
templates/docs/building-vanilla.md	Added documentation for attribute forwarding feature
templates/docs/examples/patterns/basic-section/*	Multiple example files demonstrating various basic section configurations
tests/snapshots.test.js	Added basic section to responsive snapshot testing
releases.yml	Added changelog entries for version 4.28.0

Comments suppressed due to low confidence (1)

templates/_macros/shared/vf_dedent.jinja:31

• The condition not loop.first and not loop.last will prevent line breaks from being added between the first-second and second-last-last lines. This should be not loop.last to add line breaks between all lines except after the last one.

      {{- line[ns.min_indent:] -}}{%- if not loop.last and not loop.first %}<br/>{% endif -%}

[jmuzina]

@muhammad-ali-pk I've updated this PR per this comment to make the approach to the top rule and padding more consistent with your work on the pricing block - can you have a final look please?

[mattea-turic]

@jmuzina

So, I'll need to update this PR to support more granular control of linked logo section top rule & padding, to align with Pricing Block - then we should be good to go.

This sounds good, thanks so much!