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.

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
Show file tree
Hide file tree
Changes from 9 commits
Commits
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
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
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
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
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
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
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
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
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
129 changes: 72 additions & 57 deletions libs/deps/mas/mas.js
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