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-141785] Implement custom link actions #2324

Merged
merged 6 commits into from
Jun 4, 2024
Merged

[MWPW-141785] Implement custom link actions #2324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89b9a27
[MWPW-141785] Implement custom link actions
narcis-radu May 16, 2024
2afb54e
Merge branch 'stage' into login
narcis-radu May 16, 2024
b10b19a
Merge branch 'stage' into login
narcis-radu May 21, 2024
c219ae1
Merge branch 'stage' into login
narcis-radu May 22, 2024
d74597f
Merge branch 'stage' into login
mokimo May 22, 2024
a75d162
Merge branch 'stage' into login
narcis-radu May 23, 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
19 changes: 9 additions & 10 deletions libs/blocks/card/cardUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,18 @@ export const addFooter = (links, container, merch) => {
const linksArr = Array.from(links);
const linksLeng = linksArr.length;
const hrTag = merch ? '<hr>' : '';
let footer = `<div class="consonant-CardFooter">${hrTag}<div class="consonant-CardFooter-row" data-cells="1">`;
footer = linksArr.reduce(
(combined, link, index) => (
`${combined}<div class="consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}">${link.outerHTML}</div>`),
footer,
);
footer += '</div></div>';

container.insertAdjacentHTML('beforeend', footer);
links.forEach((link) => {
const footer = createTag('div', { class: 'consonant-CardFooter' }, hrTag);
mokimo marked this conversation as resolved.
Show resolved Hide resolved
const row = createTag('div', { class: 'consonant-CardFooter-row', 'data-cells': '1' });
linksArr.forEach((link, index) => {
const { parentElement } = link;
if (parentElement && document.body.contains(parentElement)) parentElement.remove();
const holder = createTag('div', { class: `consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}` });
holder.append(link);
row.append(holder);
});

footer.append(row);
container.insertAdjacentElement('beforeend', footer);
};

export const addWrapper = (el, section, cardType) => {
Expand Down
9 changes: 9 additions & 0 deletions libs/utils/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,15 @@ export function decorateLinks(el) {
rdx.push(a);
}
}
// Custom action links
const loginEvent = '#_evt-login';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also have a unit test for this?

if (a.href.includes(loginEvent)) {
a.href = a.href.replace(loginEvent, '');
a.addEventListener('click', (e) => {
e.preventDefault();
window.adobeIMS?.signIn();
});
}
return rdx;
}, []);
}
Expand Down
2 changes: 2 additions & 0 deletions test/utils/mocks/body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
<p><a class="disable-autoblock" href="https://www.instagram.com/#_dnb">Disable Autoblock</a></p>
<!-- Auto Block -->
<p><a class="autoblock" href="https://twitter.com/Adobe#_dnb">Auto Block</a></p>
<!-- Custom actions -->
<p><a class="login-action" href="https://www.adobe.com/#_evt-login"></a></p>
</div>
<div class="quote borders contained hide-block">
<div>
Expand Down
9 changes: 9 additions & 0 deletions test/utils/utils.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,15 @@ describe('Utils', () => {
});
});

describe('Custom Link Actions', () => {
it('Implements a login action', async () => {
await waitForElement('.login-action');
const login = document.querySelector('.login-action');
utils.decorateLinks(login);
expect(login.href).to.equal('https://www.adobe.com/');
});
});

describe('Fragments', () => {
it('fully unwraps a fragment', () => {
const fragments = document.querySelectorAll('.link-block.fragment');
Expand Down
Loading