Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-153372 - Add ability to further customize buttons #2776

Merged
merged 8 commits into from
Sep 2, 2024
Merged

MWPW-153372 - Add ability to further customize buttons #2776

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
94442f3
update button decorator to handle custom classes
elan-tbx Aug 21, 2024
d14fabe
add dash character to regex
elan-tbx Aug 21, 2024
6f8f6bc
add coverage
elan-tbx Aug 21, 2024
851d5f1
add safeguard for href-less buttons
elan-tbx Aug 22, 2024
5950658
account for modals
elan-tbx Aug 22, 2024
b1a3948
Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)" (#2777)
elan-tbx Aug 22, 2024
1301d5e
add modal coverage
elan-tbx Aug 22, 2024
0c8cfae
Revert "Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)" …
elan-tbx Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions libs/utils/decorate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,24 @@ export function decorateButtons(el, size) {
if (buttons.length === 0) return;
const buttonTypeMap = { STRONG: 'blue', EM: 'outline', A: 'blue' };
buttons.forEach((button) => {
let target = button;
const parent = button.parentElement;
const buttonType = buttonTypeMap[parent.nodeName] || 'outline';
if (button.nodeName === 'STRONG') {
parent.classList.add('con-button', buttonType);
if (size) parent.classList.add(size); /* button-l, button-xl */
target = parent;
} else {
button.classList.add('con-button', buttonType);
if (size) button.classList.add(size); /* button-l, button-xl */
parent.insertAdjacentElement('afterend', button);
parent.remove();
}
target.classList.add('con-button', buttonType);
if (size) target.classList.add(size); /* button-l, button-xl */
const customClasses = [...target.href.matchAll(/#_button-([a-zA-Z-]+)/g)];
if (customClasses) {
customClasses.forEach((match) => {
target.href = target.href.replace(match[0], '');
target.classList.add(match[1]);
});
}
const actionArea = button.closest('p, div');
if (actionArea) {
actionArea.classList.add('action-area');
Expand Down
2 changes: 1 addition & 1 deletion test/blocks/text/mocks/body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div>
<h3 id="text--full-width-medium">Text – Full-Width, Medium</h3>
<p>Featuring over 600,000 hand-picked stock photos and graphics, curated from the world’s leading photographers, illustrators, and agencies. Our Premium collection is perfect for organizations looking for authentic, high-quality commercial content, and easy licensing plans.</p>
<p><a href="#explore">Explore the Premium collection</a></p>
<p><em><a href="#explore#_button-fill">Explore the Premium collection</a></em></p>
</div>
</div>
</div>
Expand Down
Loading