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

[Release] Stage to Main #3531

Merged
merged 12 commits into from
Jan 27, 2025
Merged

[Release] Stage to Main #3531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
20c69b3
Fixing unit tests for branch-quick-links.js (#3515)
drashti1712 Jan 23, 2025
ae939e3
MWPW-165767 Apply ContentSquare data masking attribute to BACOM Accou…
sharmrj Jan 23, 2025
e1946bc
MWPW-146930 - Rollout Tool Plugin - environment specific miloLibs (#3…
sabyamon Jan 23, 2025
a366658
MWPW-152160 and MWPW-152155 card widths and gray divider (#3382)
bozojovicic Jan 23, 2025
4d69057
[MWPW-161923] tab nested focus (#3407)
DKos95 Jan 23, 2025
2fe3f8b
Tooltip icon to be tabbed and showing the tooltip (#3431)
seanchoi-dev Jan 23, 2025
b114709
MWPW-164871 Milo Products Catalog - A11Y - Elements must meet minimum…
bozojovicic Jan 23, 2025
13d8ef0
MWPW-165303: Fixed potential repetative API calls (#3493)
denlight Jan 23, 2025
7d4a28d
MWPW-164458: Fix - Breadcrumb has capital I in iPhone (#3499)
nishantka Jan 23, 2025
0a1793a
[Merge-to-stage worfklow] Increase Github APIs listReview per_page li…
mokimo Jan 23, 2025
cf48942
MWPW-156181: a11y merch-card-collection fix - cards reordering (#3507)
3ch023 Jan 23, 2025
6cb26a3
MWPW-165302: Calculate promo prices with duration (#3492)
yesil Jan 23, 2025
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
1 change: 1 addition & 0 deletions .github/workflows/helpers.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored by default. Use a negated ignore pattern (like "--ignore-pattern '!<relative/path/to/filename>'") to override.

Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ const getReviews = ({ pr, github, owner, repo }) =>
owner,
repo,
pull_number: pr.number,
per_page: 100,
})
.then(({ data }) => {
pr.reviews = data;
Expand Down
4 changes: 3 additions & 1 deletion libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,11 @@ const createBreadcrumbs = (element) => {
if (hiddenEntries.includes(li.innerText?.toLowerCase().trim())) li.remove();
});

const noTransform = element.classList.contains('no-transform') ? ' no-transform' : '';

const breadcrumbs = toFragment`
<div class="feds-breadcrumbs-wrapper">
<nav class="feds-breadcrumbs" aria-label="Breadcrumb">${ul}</nav>
<nav class="feds-breadcrumbs${noTransform}" aria-label="Breadcrumb">${ul}</nav>
</div>
`;
ul.querySelector('li:last-of-type')?.setAttribute('aria-current', 'page');
Expand Down
5 changes: 3 additions & 2 deletions libs/blocks/global-navigation/features/profile/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ class ProfileDropdown {
// the email had some special logic as well;
// for MVP, we took a simpler approach ("Some very long name, very l...")
this.avatarElem = toFragment`<img
data-cs-mask
class="feds-profile-img"
src="${this.avatar}"
tabindex="0"
Expand All @@ -117,8 +118,8 @@ class ProfileDropdown {
>
${this.avatarElem}
<div class="feds-profile-details">
<p class="feds-profile-name">${this.profileData.displayName}</p>
<p class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
<p data-cs-mask class="feds-profile-name">${this.profileData.displayName}</p>
<p data-cs-mask class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
<p class="feds-profile-account">${this.placeholders.viewAccount}</p>
</div>
</a>
Expand Down
5 changes: 5 additions & 0 deletions libs/blocks/global-navigation/global-navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,11 @@ header.global-navigation {
text-transform: capitalize;
}

.feds-breadcrumbs.no-transform a,
.feds-breadcrumbs.no-transform [aria-current] {
text-transform: none;
}

.feds-breadcrumbs a {
display: block;
color: var(--feds-color-link-breadcrumbs);
Expand Down
5 changes: 3 additions & 2 deletions libs/blocks/global-navigation/global-navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,14 +218,15 @@ const decorateProfileTrigger = async ({ avatar }) => {

const buttonElem = toFragment`
<button
data-cs-mask
class="feds-profile-button"
aria-expanded="false"
aria-controls="feds-profile-menu"
aria-label="${label}"
daa-ll="Account"
aria-haspopup="true"
>
<img class="feds-profile-img" src="${avatar}" alt="${profileAvatar}"></img>
<img data-cs-mask class="feds-profile-img" src="${avatar}" alt="${profileAvatar}"></img>
</button>
`;

Expand Down Expand Up @@ -301,7 +302,7 @@ class Gnav {
this.blocks = {
profile: {
rawElem: this.content.querySelector('.profile'),
decoratedElem: toFragment`<div class="feds-profile"></div>`,
decoratedElem: toFragment`<div data-cs-mask class="feds-profile"></div>`,
},
search: { config: { icon: CONFIG.icons.search } },
breadcrumbs: { wrapper: '' },
Expand Down
7 changes: 6 additions & 1 deletion libs/blocks/mmm/mmm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { fetchData, DATA_TYPE } from '../../features/personalization/personaliza
import { getMepPopup, API_URLS } from '../../features/personalization/preview.js';

const SEARCH_CRITERIA_CHANGE_EVENT = 'mmm-search-change';
let cachedSearchCriteria = '';
export const DEBOUNCE_TIME = 800;

async function toggleDrawer(target, dd, pageId) {
Expand Down Expand Up @@ -319,7 +320,11 @@ async function createPageList(el, search) {

function subscribeToSearchCriteriaChanges() {
document.addEventListener(SEARCH_CRITERIA_CHANGE_EVENT, (el) => {
createPageList(document.querySelector('.mmm').parentNode, el.detail);
const searchCriteria = JSON.stringify(el?.detail || {});
if (cachedSearchCriteria !== searchCriteria) {
createPageList(document.querySelector('.mmm').parentNode, el.detail);
cachedSearchCriteria = searchCriteria;
}
});
}

Expand Down
20 changes: 12 additions & 8 deletions libs/blocks/rollout/rollout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ const createRadioButton = (value, checked = false) => {
* @param {HTMLElement} el - Container element
* @param {string} previewUrl - Preview URL
*/
const buildUi = async (el, previewUrl) => {
const buildUi = async (el, previewUrl, overrideBranch) => {
try {
const modal = createTag('div', { class: 'modal' });
const radioGroup = createTag('div', { class: 'radio-group' });
Expand All @@ -113,13 +113,18 @@ const buildUi = async (el, previewUrl) => {
const selectedEnv = document.querySelector('input[name="deployTarget"]:checked')?.value;
if (!selectedEnv) return;

let branch = urlData.urlBranch;
if (overrideBranch) {
branch = selectedEnv === 'stage' ? `${overrideBranch}-stage` : overrideBranch;
}

const locV3ConfigUrl = new URL(
'tools/locui-create',
`https://${urlData.urlBranch}--${urlData.urlRepo}--${urlData.urlOwner}.hlx.page`,
`https://${branch}--${urlData.urlRepo}--${urlData.urlOwner}.hlx.page`,
);

const params = {
milolibs: 'milostudio-stage',
milolibs: selectedEnv === 'stage' ? 'milostudio-stage' : 'milostudio',
ref: urlData.urlBranch,
repo: urlData.urlRepo,
owner: urlData.urlOwner,
Expand Down Expand Up @@ -154,7 +159,7 @@ const buildUi = async (el, previewUrl) => {
* @param {HTMLElement} el - Container element
* @param {string} previewUrl - Preview URL
*/
const setup = async (el, previewUrl) => {
const setup = async (el, previewUrl, overrideBranch) => {
if (!el || !previewUrl) return;

const data = setUrlData(previewUrl, true);
Expand All @@ -163,7 +168,7 @@ const setup = async (el, previewUrl) => {
return;
}
el.innerHTML = '';
await buildUi(el, previewUrl);
await buildUi(el, previewUrl, overrideBranch);
};

/**
Expand All @@ -174,13 +179,12 @@ const setup = async (el, previewUrl) => {
*/
export default async function init(el, search = window.location.search) {
if (!el) return false;

try {
const params = new URLSearchParams(search);
const overrideBranch = params?.get('overrideBranch')?.trim();
const referrer = params?.get('referrer')?.trim();
const host = params?.get('host')?.trim();
const project = params?.get('project')?.trim();

if (!referrer || !host || !project) {
el.innerHTML = '<div class="modal">Missing required parameters</div>';
return false;
Expand All @@ -192,7 +196,7 @@ export default async function init(el, search = window.location.search) {
}

Object.assign(urlData, { referrer, host, project });
await setup(el, referrer);
await setup(el, referrer, overrideBranch);
return true;
} catch (err) {
el.innerHTML = '<div class="modal">Initialization failed</div>';
Expand Down
53 changes: 36 additions & 17 deletions libs/blocks/tabs/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,42 @@
padding: var(--spacing-xxl) 0;
}

.tabs.xxl-spacing .paddle {
top: var(--spacing-xxl);
}

.tabs.xl-spacing {
padding: var(--spacing-xl) 0;
}

.tabs.xl-spacing .paddle {
top: var(--spacing-xl);
}

.tabs.l-spacing {
padding: var(--spacing-l) 0;
}

.tabs.l-spacing .paddle {
top: var(--spacing-l);
}

.tabs.s-spacing {
padding: var(--spacing-s) 0;
}

.tabs.s-spacing .paddle {
top: var(--spacing-s);
}

.tabs.xs-spacing {
padding: var(--spacing-xs) 0;
}

.tabs.xs-spacing .paddle {
top: var(--spacing-xs);
}

.tabs div[role="tablist"] {
position: relative;
box-shadow: 0 -1px 0 inset var(--tabs-border-color);
Expand Down Expand Up @@ -161,12 +181,12 @@
z-index: 1;
}

.tabs .tab-paddles .paddle {
.tabs .paddle {
position: absolute;
cursor: pointer;
width: 32px;
height: 48px;
bottom: 0;
top: 0;
background: var(--tabs-active-bg-color);
border: 0;
border-bottom: 1px solid var(--tabs-border-color);
Expand All @@ -177,7 +197,7 @@

.tabs.radio div[role="tablist"],
.tabs.radio div[role="tablist"] button,
.tabs.radio .tab-paddles .paddle {
.tabs.radio .paddle {
box-shadow: none;
background: none;
border: none;
Expand Down Expand Up @@ -303,28 +323,27 @@
height: 24px;
}

.tabs .tab-paddles {
position: relative;
.tabs .paddle {
z-index: 3;
}

.tabs .tab-paddles .paddle:disabled {
.tabs .paddle:disabled {
cursor: default;
box-shadow: none;
background: var(--tabs-list-bg-gradient);
}

.tabs .tab-paddles .paddle-left {
.tabs .paddle-left {
box-shadow: 4px 0 4px -2px var(--tabs-paddle-bs-color);
left: 0;
}

.tabs .tab-paddles .paddle-right {
.tabs .paddle-right {
box-shadow: -4px 0 4px -2px var(--tabs-paddle-bs-color);
right: 0;
}

.tabs .tab-paddles .paddle svg {
.tabs .paddle svg {
opacity: 1;
width: 8px;
height: 14px;
Expand All @@ -333,19 +352,19 @@
color: var(--tabs-text-color);
}

.tabs .tab-paddles .paddle-left svg {
.tabs .paddle-left svg {
transform: rotate(180deg);
}

.tabs .tab-paddles .paddle:hover svg {
.tabs .paddle:hover svg {
color: var(--tabs-active-text-color);
}

.tabs .tab-paddles .paddle:disabled svg {
.tabs .paddle:disabled svg {
opacity: 0;
}

.tabs[class*='pill'] .tab-paddles .paddle {
.tabs[class*='pill'] .paddle {
background: unset;
border: none;
}
Expand All @@ -358,7 +377,7 @@
border: none;
}

.tabs.radio .tab-paddles {
.tabs.radio .paddle {
display: none;
}

Expand Down Expand Up @@ -417,7 +436,7 @@
.tabs-background-transparent .tabs,
.tabs-background-transparent .tabs div[role="tablist"],
.tabs-background-transparent .tabs div[role="tablist"] button[aria-selected="true"],
.tabs-background-transparent .tabs .tab-paddles .paddle {
.tabs-background-transparent .tabs .tabList .paddle {
background: transparent;
}

Expand Down Expand Up @@ -485,11 +504,11 @@
padding-bottom: 18px;
}

.tabs .tab-paddles .paddle {
.tabs .paddle {
height: 62px;
}

.tabs .tab-paddles .paddle svg {
.tabs .paddle svg {
top: 24px;
}
}
Expand Down
22 changes: 6 additions & 16 deletions libs/blocks/tabs/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* tabs - consonant v6
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
*/
import { debounce } from '../../utils/action.js';
import { createTag, MILO_EVENTS, getConfig } from '../../utils/utils.js';
import { processTrackingLabels } from '../../martech/attributes.js';

Expand Down Expand Up @@ -88,8 +87,9 @@ function configTabs(config, rootElem) {
function initTabs(elm, config, rootElem) {
const tabs = elm.querySelectorAll('[role="tab"]');
const tabLists = elm.querySelectorAll('[role="tablist"]');
let tabFocus = 0;

tabLists.forEach((tabList) => {
let tabFocus = 0;
tabList.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
if (e.key === 'ArrowRight') {
Expand Down Expand Up @@ -124,9 +124,7 @@ function nextTab(current, i, arr) {
return (previous && isTabInTabListView(previous) && !isTabInTabListView(current));
}

function initPaddles(tabList, tabPaddles) {
const left = tabPaddles.firstElementChild;
const right = tabPaddles.lastElementChild;
function initPaddles(tabList, left, right) {
const tabListItems = tabList.querySelectorAll('[role="tab"]');
const tabListItemsArray = [...tabListItems];
const firstTab = tabListItemsArray[0];
Expand All @@ -153,13 +151,6 @@ function initPaddles(tabList, tabPaddles) {
}
});

tabList.addEventListener('scroll', debounce(() => {
tabPaddles.setAttribute(
'aria-valuenow',
((tabList.scrollLeft / (tabList.scrollWidth - tabList.clientWidth)) * 100).toFixed(0),
);
}, 500));

const options = {
root: tabList,
rootMargin: '0px',
Expand Down Expand Up @@ -277,12 +268,11 @@ const init = (block) => {
}

// Tab Paddles
const tabPaddles = createTag('div', { class: 'tab-paddles', role: 'scrollbar', 'aria-valuenow': 0 });
const paddleLeft = createTag('button', { class: 'paddle paddle-left', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to left' }, PADDLE);
const paddleRight = createTag('button', { class: 'paddle paddle-right', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to right' }, PADDLE);
tabPaddles.append(paddleLeft, paddleRight);
tabList.after(tabPaddles);
initPaddles(tabList, tabPaddles);
tabList.insertAdjacentElement('afterend', paddleRight);
block.prepend(paddleLeft);
initPaddles(tabList, paddleLeft, paddleRight);

// Tab Sections
const allSections = Array.from(rootElem.querySelectorAll('div.section'));
Expand Down
4 changes: 2 additions & 2 deletions libs/deps/mas/commerce.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Large diffs are not rendered by default.

189 changes: 102 additions & 87 deletions libs/deps/mas/mas.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Large diffs are not rendered by default.

Loading
Loading