feat: horizontal rule

[saashapina]

Summary of changes

• adds horizontal rule
• adds horizontal rule tests

Relevant Links

• Designs: Figma
• Story: ADB-200

Test URLs:

• Before: https://main--adobe-design-website--adobe.aem.page/pattern-library/
• After: https://adb-200-hr--adobe-design-website--adobe.aem.page/pattern-library/

Checklist

• This PR has visual changes, and has been reviewed by a designer.
• This PR has code changes, and our linters still pass.
• This PR has new code, so new tests were added or updated, and they pass.

Validation

1. Make sure all PR checks have passed.
2. Pull down all related branches.
3. Verify horizontal rule aligns with mockups
4. Verify all tests are passing

---

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Windows

• Firefox
• Chrome
• Edge

MacOS

• Firefox
• Chrome
• Safari
• Edge

Android

• Firefox
• Chrome
• Edge

iOS

• Safari

---

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• ad9508b ✅ (latest)
• 52744c4 ✅
• b53135c ✅
• f759a70 ✅
• f291e83 ✅
• 00ca913 ✅
• 75806d2 ✅
• c7098a0 ✅
• 6bb23a1 ✅
• a926708 ✅
• e7b251d ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/pattern-library/
🖥️	/pattern-library/

[catheraaine]

Okay I like how this is set up.

The ticket says we need to solve for both full-width and contained-width versions.

I think what I would like for us to do is make the contained-width version the default, so we can remove the 150vw css from there. This would apply for the majority of use-cases, say, blog post content.

The full-width version is used pretty rarely, but I like your solution and I want to keep it. Let's move those styles to a .horizontal-rule--full modifier class, and if we need to use them in another component we will solve that later (potentially by applying the class in the document in those few cases? this would prevent the content entry team from using the wrong one without design approval).

Should be a small change then we can merge.

[saashapina]

The full-width version is used pretty rarely, but I like your solution and I want to keep it. Let's move those styles to a .horizontal-rule--full modifier class, and if we need to use them in another component we will solve that later (potentially by applying the class in the document in those few cases? this would prevent the content entry team from using the wrong one without design approval).

Should be a small change then we can merge.

Updated! I added the <hr-fw> tag as an identifier for full-width horizontal rules

[arnest00]

Great work on this!!

[arnest00]

🏆, by the way.

Changes requested were implemented!