diff --git a/src/registrar/assets/src/js/getgov/helpers.js b/src/registrar/assets/src/js/getgov/helpers.js index 7d1449bac..08be011c2 100644 --- a/src/registrar/assets/src/js/getgov/helpers.js +++ b/src/registrar/assets/src/js/getgov/helpers.js @@ -96,3 +96,14 @@ export function submitForm(form_id) { console.error("Form '" + form_id + "' not found."); } } + +/** + * Helper function to strip HTML tags + * THIS IS NOT SUITABLE FOR SANITIZING DANGEROUS STRINGS + */ +export function unsafeStripHtmlTags(input) { + const tempDiv = document.createElement("div"); + // NOTE: THIS IS NOT SUITABLE FOR SANITIZING DANGEROUS STRINGS + tempDiv.innerHTML = input; + return tempDiv.textContent || tempDiv.innerText || ""; +} diff --git a/src/registrar/assets/src/js/getgov/portfolio-member-page.js b/src/registrar/assets/src/js/getgov/portfolio-member-page.js index 95723fc7e..96961e5dc 100644 --- a/src/registrar/assets/src/js/getgov/portfolio-member-page.js +++ b/src/registrar/assets/src/js/getgov/portfolio-member-page.js @@ -18,7 +18,7 @@ export function initPortfolioNewMemberPageToggle() { const unique_id = `${member_type}-${member_id}`; let cancelInvitationButton = member_type === "invitedmember" ? "Cancel invitation" : "Remove member"; - wrapperDeleteAction.innerHTML = generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `More Options for ${member_name}`); + wrapperDeleteAction.innerHTML = generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `More Options for ${member_name}`, "usa-icon--large"); // This easter egg is only for fixtures that dont have names as we are displaying their emails // All prod users will have emails linked to their account @@ -100,8 +100,8 @@ export function initAddNewMemberPageListeners() { const permissionSections = document.querySelectorAll(`#${permission_details_div_id} > h3`); permissionSections.forEach(section => { - // Find the

element text - const sectionTitle = section.textContent; + // Find the

element text, strip out the '*' + const sectionTitle = section.textContent.trim().replace(/\*$/, "") + ": "; // Find the associated radio buttons container (next fieldset) const fieldset = section.nextElementSibling; @@ -128,25 +128,29 @@ export function initAddNewMemberPageListeners() { }); } else { // for admin users, the permissions are always the same - appendPermissionInContainer('Domains', 'Viewer', permissionDetailsContainer); - appendPermissionInContainer('Domain requests', 'Creator', permissionDetailsContainer); - appendPermissionInContainer('Members', 'Manager', permissionDetailsContainer); + appendPermissionInContainer('Domains: ', 'Viewer', permissionDetailsContainer); + appendPermissionInContainer('Domain requests: ', 'Creator', permissionDetailsContainer); + appendPermissionInContainer('Members: ', 'Manager', permissionDetailsContainer); } } function appendPermissionInContainer(sectionTitle, permissionDisplay, permissionContainer) { // Create new elements for the content - const titleElement = document.createElement("h4"); + const elementContainer = document.createElement("p"); + elementContainer.classList.add("margin-top-0", "margin-bottom-1"); + + const titleElement = document.createElement("strong"); titleElement.textContent = sectionTitle; - titleElement.classList.add("text-primary", "margin-bottom-0"); + titleElement.classList.add("text-primary-darker"); - const permissionElement = document.createElement("p"); + const permissionElement = document.createElement("span"); permissionElement.textContent = permissionDisplay; - permissionElement.classList.add("margin-top-0"); // Append to the content container - permissionContainer.appendChild(titleElement); - permissionContainer.appendChild(permissionElement); + elementContainer.appendChild(titleElement); + elementContainer.appendChild(permissionElement); + + permissionContainer.appendChild(elementContainer); } /* diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js index ce4397887..bf561fa1f 100644 --- a/src/registrar/assets/src/js/getgov/table-base.js +++ b/src/registrar/assets/src/js/getgov/table-base.js @@ -79,13 +79,13 @@ export function addModal(id, ariaLabelledby, ariaDescribedby, modalHeading, moda * @param {string} modal_button_text - The action button's text * @param {string} screen_reader_text - A screen reader helper */ -export function generateKebabHTML(action, unique_id, modal_button_text, screen_reader_text) { +export function generateKebabHTML(action, unique_id, modal_button_text, screen_reader_text, icon_class) { const generateModalButton = (mobileOnly = false) => ` @@ -99,7 +99,7 @@ export function generateKebabHTML(action, unique_id, modal_button_text, screen_r // Main kebab structure const kebab = ` ${generateModalButton(true)} -
+
-