diff --git a/libs/blocks/notification/notification.css b/libs/blocks/notification/notification.css index 182ca31ced..7131cc89eb 100644 --- a/libs/blocks/notification/notification.css +++ b/libs/blocks/notification/notification.css @@ -16,7 +16,7 @@ --icon-size: 56px; --icon-size-xl: 64px; --pill-radius: 16px; - --pill-shadow: 0 3px 6px #707070; + --pill-shadow: 0 3px 6px #00000029; display: flex; inline-size: 100%; @@ -310,11 +310,20 @@ justify-content: flex-end; } +.notification.flexible { + background: unset; +} + .notification .flexible-inner { inline-size: 100%; box-shadow: var(--pill-shadow); } +.notification.pill.no-shadow, +.notification.pill.no-shadow.flexible .flexible-inner { + box-shadow: unset; +} + .notification .foreground > :is(.tablet-up, .desktop-up) { display: none; } @@ -328,6 +337,12 @@ margin-block-end: var(--spacing-xxs); } +.notification.pill.max-width-6 { max-width: 600px; } +.notification.pill.max-width-8 { max-width: 800px; } +.notification.pill.max-width-10 { max-width: 1000px; } +.notification.pill.max-width-12 { max-width: 1200px; } +.notification.pill.max-width-auto { max-width: unset; } + @media screen and (min-width: 600px) { .notification { --max-inline-size-image: 188px; @@ -468,6 +483,12 @@ padding-inline-end: unset; inline-size: unset; } + + .notification.pill.max-width-6-tablet { max-width: 600px; } + .notification.pill.max-width-8-tablet { max-width: 800px; } + .notification.pill.max-width-10-tablet { max-width: 1000px; } + .notification.pill.max-width-12-tablet { max-width: 1200px; } + .notification.pill.max-width-auto-tablet { max-width: unset; } } @media screen and (min-width: 1200px) { @@ -632,4 +653,10 @@ .notification.pill .copy-wrap p:first-child:not(:only-child) { margin-block-end: 0; } + + .notification.pill.max-width-6-desktop { max-width: 600px; } + .notification.pill.max-width-8-desktop { max-width: 800px; } + .notification.pill.max-width-10-desktop { max-width: 1000px; } + .notification.pill.max-width-12-desktop { max-width: 1200px; } + .notification.pill.max-width-auto-desktop { max-width: unset; } } diff --git a/libs/blocks/region-nav/region-nav.js b/libs/blocks/region-nav/region-nav.js index 7c626978ef..109051ffcd 100644 --- a/libs/blocks/region-nav/region-nav.js +++ b/libs/blocks/region-nav/region-nav.js @@ -3,7 +3,8 @@ import { getConfig } from '../../utils/utils.js'; /* c8 ignore next 11 */ function handleEvent(prefix, link) { const domain = window.location.host.endsWith('.adobe.com') ? 'domain=adobe.com' : ''; - document.cookie = `international=${prefix};path=/;${domain}`; + const maxAge = 365 * 24 * 60 * 60; // max-age in seconds for 365 days + document.cookie = `international=${prefix};max-age=${maxAge};path=/;${domain}`; sessionStorage.setItem('international', prefix); fetch(link.href, { method: 'HEAD' }).then((resp) => { if (!resp.ok) throw new Error('request failed'); diff --git a/libs/blocks/table/table.css b/libs/blocks/table/table.css index f1aab48c79..391c70fb1a 100644 --- a/libs/blocks/table/table.css +++ b/libs/blocks/table/table.css @@ -614,6 +614,14 @@ header.global-navigation { right: initial; } + .table .row-heading .col-heading .pricing { + overflow-wrap: anywhere; + } + + .table .row-heading .col-heading span[is='inline-price'] { + display: inline; + } + .table .row-heading .col:nth-child(n+1) { padding: 20px; } diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css index 8ed19d150b..6242f50132 100644 --- a/libs/blocks/text/text.css +++ b/libs/blocks/text/text.css @@ -1,4 +1,6 @@ .text-block { + --accent-height: 10px; + position: relative; } @@ -16,6 +18,8 @@ .text-block [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; } +.text-block [class^="detail"] strong { font-weight: unset; } /* bugfix for FF */ + .text-block .cta-container, .text-block p.action-area { margin-top: var(--spacing-s); } @@ -72,6 +76,25 @@ margin: var(--spacing-m) 0; } +.text-block .title-l { + font-size: var(--type-body-m-size); + line-height: var(--type-body-m-lh); + font-weight: 700; + text-transform: none; + margin-bottom: var(--spacing-xs); +} + +.text-block :is(.image, .lockup-area) { + margin-block-end: var(--spacing-m); +} + +.text-block .image em { + display: block; + font-size: var(--type-body-s-size); + line-height: var(--type-body-s-lh); + margin-block-start: var(--spacing-xs); +} + .text-block .icon-list-item { list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); /* Must not be `none` for accessibility */ position: relative; @@ -82,17 +105,68 @@ inset: 0 100% auto auto; } +.text-block.accent-bar { + inline-size: 100%; + block-size: var(--accent-height); +} + +.text-block .lockup-area img { + width: auto; +} + /* Alignment */ .text-block.center { text-align: center; align-items: center; } +.text-block .icon-area { + display: flex; + column-gap: var(--spacing-xs); +} + +.text-block p.icon-area { /* NOT tags with icons in them */ + margin-block-end: var(--spacing-m); +} + +.text-block.xxs-icon .icon-area { + height: var(--icon-size-xxs); +} + +.text-block.xs-icon .icon-area { + height: var(--icon-size-xs); +} + +.text-block.s-icon .icon-area { + height: var(--icon-size-s); +} + +.text-block.m-icon .icon-area { + height: var(--icon-size-m); +} + +.text-block.l-icon .icon-area { + height: var(--icon-size-l); +} + +.text-block.xl-icon .icon-area { + height: var(--icon-size-xl); +} + +.text-block.xxl-icon .icon-area { + height: var(--icon-size-xxl); +} + +.text-block .icon-area img { + max-height: 100%; + width: auto; +} + .text-block.center .action-area, .text-block.center .icon-area { justify-content: center; } .text-block.right { - text-align: right; + text-align: end; align-items: end; } @@ -144,17 +218,25 @@ max-width: unset; } -.text-block .icon-area { - display: flex; - column-gap: var(--spacing-xxs); -} - .text-block .icon-area.con-button { column-gap: unset; } .text-block .icon-area picture { line-height: 0em; + height: inherit; /* Safari + FF bug fix */ +} + +.text-block .image picture { + display: flex; +} + +.text-block.center .image picture { + justify-content: center; +} + +.text-block.right .image picture { + justify-content: flex-end; } /* icon inline */ diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index 5886a8f23b..947922b312 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -24,9 +24,8 @@ const blockTypeSizes = { }, }; -function decorateMultiViewport(el) { +function decorateMultiViewport(foreground) { const viewports = ['mobile-up', 'tablet-up', 'desktop-up']; - const foreground = el.querySelector('.foreground'); if (foreground.childElementCount === 2 || foreground.childElementCount === 3) { [...foreground.children].forEach((child, index) => { child.className = viewports[index]; @@ -36,8 +35,13 @@ function decorateMultiViewport(el) { return foreground; } -function decorateBlockIconArea(el) { - const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6'); +function decorateBlockIconArea(content, el) { + const first = content.children[0]; + if (first?.querySelector('img')) { + const areaClass = el.className.match(/-(lockup|icon)/); + first.classList.add(areaClass ? `${areaClass[1]}-area` : 'image'); + } + const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); if (!headings) return; headings.forEach((h) => { const hPrevElem = h.previousElementSibling; @@ -76,14 +80,20 @@ function decorateLinkFarms(el) { }); } +function addStyle(filename) { + const { miloLibs, codeRoot } = getConfig(); + const base = miloLibs || codeRoot; + loadStyle(`${base}/styles/${filename}.css`); +} + export default async function init(el) { el.classList.add('text-block', 'con-block'); let rows = el.querySelectorAll(':scope > div'); - if (rows.length > 1) { + if (rows.length > 1 || el.matches('.accent-bar')) { if (rows[0].textContent !== '') el.classList.add('has-bg'); const [head, ...tail] = rows; decorateBlockBg(el, head); - rows = tail; + rows = tail || rows; } const helperClasses = []; let blockType = 'text'; @@ -97,8 +107,11 @@ export default async function init(el) { const hasLinkFarm = el.classList.contains('link-farm'); rows.forEach((row) => { row.classList.add('foreground'); - if (!hasLinkFarm) decorateBlockText(row, blockTypeSizes[blockType][size]); - decorateBlockIconArea(row); + if (!hasLinkFarm) { + [...row.children].forEach((c) => decorateBlockText(c, blockTypeSizes[blockType][size])); + decorateMultiViewport(row); + } + [...row.children].forEach((c) => decorateBlockIconArea(c, el)); }); if (el.classList.contains('full-width')) helperClasses.push('max-width-8-desktop', 'center', 'xxl-spacing'); if (el.classList.contains('intro')) helperClasses.push('max-width-8-desktop', 'xxl-spacing-top', 'xl-spacing-bottom'); @@ -109,7 +122,6 @@ export default async function init(el) { if (hasLinkFarm) decorateLinkFarms(el); el.classList.add(...helperClasses); decorateTextOverrides(el); - if (!hasLinkFarm) decorateMultiViewport(el); const lastActionArea = el.querySelector('.action-area:last-of-type'); if (lastActionArea) { @@ -124,4 +136,10 @@ export default async function init(el) { mnemonicList.querySelectorAll('p').forEach((product) => product.removeAttribute('class')); await loadBlock(mnemonicList); } + if (el.matches('[class*="rounded-corners"]')) addStyle('rounded-corners'); + if (el.matches('[class*="-lockup"]')) addStyle('iconography'); + // Override Detail with Title L style if class exists - Temporary solution until Spectrum 2 + if (el.classList.contains('l-title')) { + el.querySelectorAll('[class*="detail-"]')?.forEach((detail) => detail.classList.add('title-l')); + } } diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js index fcb8bc6f97..69410cd17b 100644 --- a/libs/features/personalization/personalization.js +++ b/libs/features/personalization/personalization.js @@ -360,10 +360,13 @@ function modifySelectorTerm(termParam) { 'secondary-cta': 'em a', 'action-area': '*:has(> em a, > strong a)', 'any-marquee': '[class*="marquee"]', - header: ':is(h1, h2, h3, h4, h5, h6)', + 'any-header': ':is(h1, h2, h3, h4, h5, h6)', }; const otherSelectors = ['row', 'col']; - const htmlEls = ['main', 'div', 'a', 'p', 'strong', 'em', 'picture', 'source', 'img', 'h']; + const htmlEls = [ + 'html', 'body', 'header', 'footer', 'main', + 'div', 'a', 'p', 'strong', 'em', 'picture', 'source', 'img', 'h', + ]; const startTextMatch = term.match(/^[a-zA-Z/./-]*/); const startText = startTextMatch ? startTextMatch[0].toLowerCase() : ''; const startTextPart1 = startText.split(/\.|:/)[0]; @@ -890,8 +893,6 @@ export function cleanAndSortManifestList(manifests) { freshManifest = manifestObj[manifest.manifestPath]; } freshManifest.name = fullManifest.name; - freshManifest.selectedVariantName = fullManifest.selectedVariantName; - freshManifest.selectedVariant = freshManifest.variants[freshManifest.selectedVariantName]; manifestObj[manifest.manifestPath] = freshManifest; } else { manifestObj[manifest.manifestPath] = manifest; diff --git a/test/blocks/text/mocks/body.html b/test/blocks/text/mocks/body.html index 2db780be10..bfb7a5a52f 100644 --- a/test/blocks/text/mocks/body.html +++ b/test/blocks/text/mocks/body.html @@ -144,7 +144,9 @@

How to...

- Adobe General Terms of Use Lorem ipsum dolor sit amet. Vel nobis quidem At dolores ratione qui vero molestiae est veritatis sint aut voluptates natus. Rem quidem quasi ut omnis cupiditate aut fugiat nulla. Sed nihil corporis ab sint dolor ut voluptates omnis sed aliquid voluptas nam vitae sunt in omnis assumenda ea voluptatem autem. Quo amet pariatur ut dolorum recusandae a perspiciatis iste quo repudiandae atque sit amet suscipit sed ipsam enim. Ex beatae dolores et eius architecto ut reiciendis sunt vel quaerat temporibus qui omnis optio et rerum magnam id praesentium recusandae. Qui perspiciatis doloribus qui tempora galisum non ipsam enim ad consequatur consequuntur et galisum commodi aut alias dolor. Sit reprehenderit illum id molestiae odio ex quae consectetur aut rerum officia et galisum iure rem perspiciatis maxime. Non natus autem qui officiis voluptatem ea quia facilis non autem sint ea facilis quos. Ex beatae dolores et eius architecto ut reiciendis sunt vel quaerat temporibus qui omnis optio et rerum magnam id praesentium recusandae. Qui perspiciatis doloribus qui tempora galisum non ipsam enim ad consequatur consequuntur et galisum commodi aut alias dolor. Sit reprehenderit illum id molestiae odio ex quae consectetur aut rerum officia et galisum. Qui perspiciatis doloribus qui tempora galisum non ipsam enim ad consequatur consequuntur et galisum commodi aut alias dolor. Sit reprehenderit illum id molestiae odio ex quae consectetur. +

+ Adobe General Terms of Use Lorem ipsum dolor sit amet. Vel nobis quidem At dolores ratione qui vero molestiae est veritatis sint aut voluptates natus. Rem quidem quasi ut omnis cupiditate aut fugiat nulla. Sed nihil corporis ab sint dolor ut voluptates omnis sed aliquid voluptas nam vitae sunt in omnis assumenda ea voluptatem autem. Quo amet pariatur ut dolorum recusandae a perspiciatis iste quo repudiandae atque sit amet suscipit sed ipsam enim. Ex beatae dolores et eius architecto ut reiciendis sunt vel quaerat temporibus qui omnis optio et rerum magnam id praesentium recusandae. Qui perspiciatis doloribus qui tempora galisum non ipsam enim ad consequatur consequuntur et galisum commodi aut alias dolor. Sit reprehenderit illum id molestiae odio ex quae consectetur aut rerum officia et galisum iure rem perspiciatis maxime. Non natus autem qui officiis voluptatem ea quia facilis non autem sint ea facilis quos. Ex beatae dolores et eius architecto ut reiciendis sunt vel quaerat temporibus qui omnis optio et rerum magnam id praesentium recusandae. Qui perspiciatis doloribus qui tempora galisum non ipsam enim ad consequatur consequuntur et galisum commodi aut alias dolor. Sit reprehenderit illum id molestiae odio ex quae consectetur aut rerum officia et galisum. Qui perspiciatis doloribus qui tempora galisum non ipsam enim ad consequatur consequuntur et galisum commodi aut alias dolor. Sit reprehenderit illum id molestiae odio ex quae consectetur. +

@@ -221,6 +223,103 @@

+
+
+

+ + + mock + This is a caption? +

+

Membership plans

+

Mobile Content

+

Start with a single app or a multi-app plan — the choice is yours.

+

Learn more Learn moreLearn more

+
+
+

+ + + mock + This is a caption? +

+

Membership plans

+

Tablet Content

+

Start with a single app or a multi-app plan — the choice is yours.

+

Learn more Learn moreLearn more

+
+
+

+ + + mock + This is a caption? +

+

Membership plans

+

Desktop Content

+

Start with a single app or a multi-app plan — the choice is yours. Start with a single app or a multi-app plan — the choice is yours.

+

Learn more Learn moreLearn more

+
+
+ +
+
+
red
+
blue
+
linear-gradient(90deg, #FA0F00 0%, #E9740A 15.42%, #FFCE2E 39.44%, #009C3B 67.99%, #2799F6 85.76%, #6349E0 95.42%, #9999FC 100%)
+
+
+ + +
+
+
+

+ + + + + + + + + + + + Lockup +

+

Membership plans

+

Get started with photo editing apps.

+

Start with a single app or a multi-app plan — the choice is yours.

+
+
+
+ +
+
+
+

+ + + + + + + + + + + + +

+

Membership plans

+

Get started with photo editing apps.

+

Start with a single app or a multi-app plan — the choice is yours.

+
+
+
diff --git a/test/features/personalization/modifyNonFragmentSelector.test.js b/test/features/personalization/modifyNonFragmentSelector.test.js index 302e75cc47..f9345c3eb1 100644 --- a/test/features/personalization/modifyNonFragmentSelector.test.js +++ b/test/features/personalization/modifyNonFragmentSelector.test.js @@ -2,6 +2,18 @@ import { expect } from '@esm-bundle/chai'; import { modifyNonFragmentSelector } from '../../../libs/features/personalization/personalization.js'; const values = [ + { + b: 'body > main > div', + a: 'body > main > div', + }, + { + b: 'main header', + a: 'main header', + }, + { + b: 'main footer', + a: 'main footer', + }, { b: 'any-marquee action-area', a: '[class*="marquee"] *:has(> em a, > strong a)', @@ -23,7 +35,7 @@ const values = [ a: '.marquee.light:nth-child(2) h2', }, { - b: 'marquee.light:nth-child(2) header', + b: 'marquee.light:nth-child(2) any-header', a: '.marquee.light:nth-child(2) :is(h1, h2, h3, h4, h5, h6)', }, {