Merge branch 'main' into skms-integration

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   rules: {
     'chai-friendly/no-unused-expressions': 2,
     'import/extensions': ['error', { js: 'always' }],
+    'import/no-cycle': 1,
     'linebreak-style': ['error', 'unix'],
     'no-await-in-loop': 0,
     'no-param-reassign': [2, { props: false }],
@@ -40,7 +41,10 @@ module.exports = {
     }],
   },
   overrides: [
-    { files: ['test/**/*.js'] },
+    {
+      files: ['test/**/*.js'],
+      rules: { 'no-console': 0 },
+    },
   ],
   ignorePatterns: [
     '/libs/deps/*',

.github/workflows/code-compatibility.yaml

@@ -5,8 +5,6 @@ on:
     branches:
       - main
   pull_request:
-    branches:
-      - main
 
 jobs:
   check:

.github/workflows/codeql.yml

@@ -15,8 +15,6 @@ on:
   push:
     branches: [ "main" ]
   pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "main" ]
   schedule:
     - cron: '18 6 * * 5'
 

.github/workflows/run-lint.yaml

@@ -0,0 +1,27 @@
+name: Lint
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths:
+      - '**.js'
+
+jobs:
+  run-lint:
+    name: Running eslint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run eslint on changed files
+        uses: tj-actions/eslint-changed-files@v20
+        with:
+          config_path: ".eslintrc.js"
+          # ignore_path: "/path/to/.eslintignore"
+          # extra_args: "--max-warnings=0"

.github/workflows/run-tests.yaml

@@ -5,8 +5,6 @@ on:
       - main
   pull_request:
     types: [opened, synchronize, reopened]
-    branches:
-      - main
 jobs:
   run-tests:
     name: Running tests

libs/blocks/aside/aside.css

@@ -106,14 +106,10 @@
 
 .aside .foreground.container .text .action-area {
   margin-bottom: 0;
-}
-
-.aside .foreground.container .text .action-area > a {
-  margin-right: var(--spacing-s);
-}
-
-.aside .foreground.container .text .action-area > a:last-child {
-  margin-right: 0;
+  display: flex;
+  gap: var(--spacing-s);
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .aside .foreground.container > div {

libs/blocks/caas-config/caas-config.js

@@ -191,6 +191,10 @@ const defaultOptions = {
     dark: 'Dark Theme',
     darkest: 'Darkest Theme',
   },
+  detailsTextOption: {
+    default: 'Default',
+    modifiedDate: 'Modified Date',
+  },
 };
 
 const getTagList = (root) => Object.entries(root).reduce((options, [, tag]) => {
@@ -338,6 +342,7 @@ const UiPanel = () => html`
   <${Select} label="Layout Type" prop="layoutType" options=${defaultOptions.layoutType} />
   <${Select} label="Grid Gap (Gutter)" prop="gutter" options=${defaultOptions.gutter} />
   <${Select} label="Theme" prop="theme" options=${defaultOptions.theme} />
+  <${Select} label="Details Text" prop="detailsTextOption" options=${defaultOptions.detailsTextOption} />
   <${Select}
     label="Collection Button Style"
     prop="collectionBtnStyle"

libs/blocks/caas/utils.js

@@ -254,11 +254,10 @@ const getFilterArray = async (state, country, lang) => {
 
 export function getCountryAndLang({ autoCountryLang, country, language }) {
   if (autoCountryLang) {
-    const htmlLang = pageConfigHelper()?.locale?.ietf?.toLowerCase() || 'en-us';
-    const [lang, cntry] = htmlLang.split('-');
+    const locale = pageConfigHelper()?.locale;
     return {
-      country: cntry,
-      language: lang,
+      country: locale.region?.toLowerCase() || 'us',
+      language: locale.ietf?.toLowerCase() || 'en-us',
     };
   }
   return {
@@ -337,7 +336,9 @@ export const getConfig = async (originalState, strs = {}) => {
         onErrorTitle: strs.onErrorTitle || 'Sorry there was a system error.',
         onErrorDescription: strs.onErrorDesc
           || 'Please try reloading the page or try coming back to the page another time.',
+        lastModified: strs.lastModified || 'Last modified {date}',
       },
+      detailsTextOption: state.detailsTextOption,
       setCardBorders: state.setCardBorders,
       useOverlayLinks: state.useOverlayLinks,
       collectionButtonStyle: state.collectionBtnStyle,
@@ -573,6 +574,7 @@ export const defaultState = {
   targetActivity: '',
   targetEnabled: false,
   theme: 'lightest',
+  detailsTextOption: 'default',
   titleHeadingLevel: 'h3',
   totalCardsToShow: 10,
   useLightText: false,

libs/blocks/card/card.js

@@ -1,6 +1,7 @@
 import { decorateButtons } from '../../utils/decorate.js';
 import { loadStyle, getConfig, createTag } from '../../utils/utils.js';
 import { getMetadata } from '../section-metadata/section-metadata.js';
+import { decorateLinkAnalytics } from '../../martech/attributes.js';
 
 const HALF = 'OneHalfCard';
 const HALF_HEIGHT = 'HalfHeightCard';
@@ -35,10 +36,10 @@ const addWrapper = (el, section, cardType) => {
   let upClass = getUpFromSectionMetadata(section);
   // Authored w/ a typed out number reference... 'two-up' vs. '2-up'
   const list = ['two-up', 'three-up', 'four-up', 'five-up'];
-  const ixd = list.findIndex((i) => i.includes(upClass));
-  if (ixd > -1) {
-    upClass = `${ixd + 2}-up`;
-    section.classList.remove(list[ixd]);
+  const idx = list.findIndex((i) => i.includes(upClass));
+  if (idx > -1) {
+    upClass = `${idx + 2}-up`;
+    section.classList.remove(list[idx]);
   }
   const up = upClass?.replace('-', '') || '3up';
   const gridClass = `${gridCl} ${gridCl}--${up} ${gridCl}--with4xGutter${cardType === DOUBLE_WIDE ? ` ${gridCl}--doubleWideCards` : ''}`;
@@ -115,6 +116,8 @@ const addFooter = (links, container, merch) => {
 };
 
 const init = (el) => {
+  const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  decorateLinkAnalytics(el, headings);
   const { miloLibs, codeRoot } = getConfig();
   const base = miloLibs || codeRoot;
   loadStyle(`${base}/deps/caas.css`);

libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js

@@ -69,7 +69,8 @@ const createBreadcrumbs = (element) => {
   return breadcrumbs;
 };
 
-const createWithBase = async (element = toFragment`<div><ul></ul></div>`) => {
+const createWithBase = async (el) => {
+  const element = el || toFragment`<div><ul></ul></div>`;
   const url = getMetadata(metadata.base);
   if (!url) return null;
   try {
@@ -78,7 +79,8 @@ const createWithBase = async (element = toFragment`<div><ul></ul></div>`) => {
     const base = new DOMParser().parseFromString(text, 'text/html').body;
     element.querySelector('ul')?.prepend(...base.querySelectorAll('li'));
     return createBreadcrumbs(element);
-  } catch (error) {
+  } catch (e) {
+    lanaLog({ e, message: 'Breadcrumbs failed fetching base' });
     return null;
   }
 };
@@ -99,7 +101,7 @@ const fromUrl = () => {
 
 export default async function init(el) {
   try {
-    const breadcrumbsEl = (await createWithBase(el)) || createBreadcrumbs(el) || fromUrl();
+    const breadcrumbsEl = await createWithBase(el) || createBreadcrumbs(el) || fromUrl();
     setBreadcrumbSEO(breadcrumbsEl);
     return breadcrumbsEl;
   } catch (e) {

libs/blocks/global-navigation/global-navigation.css

@@ -320,14 +320,23 @@ header.global-navigation {
   flex-shrink: 0;
 }
 
+.feds-breadcrumbs li:last-child:not(:first-child) {
+  padding-right: 12px;
+}
+
+[dir = "rtl"] .feds-breadcrumbs li:last-child:not(:first-child) {
+  padding-right: 0;
+  padding-left: 12px;
+}
+
 /* Hide all breadcrumbs except the first and last two */
 .feds-breadcrumbs li:nth-last-child(n+3):not(:first-child) {
   display: none;
 }
 
 /* If first breadcrumb is not third to last, add ellipsis after it */
 .feds-breadcrumbs li:first-child:not(:nth-last-child(-n+3)):after {
-  content: '/\2003...';
+  content: '/\3000…';
   padding: 0 0 0 12px;
 }
 

libs/blocks/global-navigation/global-navigation.js

@@ -86,6 +86,8 @@ const decorateSignIn = async ({ rawElem, decoratedElem }) => {
         e.preventDefault();
         signIn();
       });
+    } else {
+      lanaLog({ message: 'Sign in link not found in dropdown.' });
     }
 
     decoratedElem.append(dropdownElem);
@@ -377,17 +379,6 @@ class Gnav {
     decorationTimeout = setTimeout(decorateDropdown, CONFIG.delays.loadDelayed);
   };
 
-  decorateAppLauncher = () => {
-    // const appLauncherBlock = this.body.querySelector('.app-launcher');
-    // if (appLauncherBlock) {
-    //   await this.loadDelayed();
-    //   this.appLauncher(
-    //     decoratedElem,
-    //     appLauncherBlock,
-    //   );
-    // }
-  };
-
   loadSearch = () => {
     if (this.blocks?.search?.instance) return null;
 
@@ -486,7 +477,7 @@ class Gnav {
 
     // Create final template
     const decoratedElem = toFragment`
-      <a href="${link.getAttribute('href')}" class="${classPrefix}" daa-ll="${analyticsValue}">
+      <a href="${localizeLink(link.getAttribute('href'))}" class="${classPrefix}" daa-ll="${analyticsValue}">
         ${imageEl}
         ${labelEl}
       </a>`;
@@ -514,7 +505,7 @@ class Gnav {
     const breadcrumbs = isDesktop.matches ? '' : await this.decorateBreadcrumbs();
     this.elements.mainNav = toFragment`<div class="feds-nav"></div>`;
     this.elements.navWrapper = toFragment`
-      <div class="feds-nav-wrapper id="feds-nav-wrapper"">
+      <div class="feds-nav-wrapper" id="feds-nav-wrapper">
         ${breadcrumbs}
         ${isDesktop.matches ? '' : this.decorateSearch()}
         ${this.elements.mainNav}

libs/blocks/how-to/how-to.css

@@ -1,40 +1,41 @@
-.how-to {
-  display: grid;
+.how-to .foreground {
+  max-width: var(--grid-container-width);
   margin: 0 auto;
-  max-width: 700px;
-  padding: 80px 24px;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-rows: min-content;
+  padding: var(--spacing-xxl) 0;
+  display: grid;
+  grid-template-rows: 1fr;
   grid-template-areas:
-    "heading image"
-    "list list"
+    "heading"
+    "list"
+    "image"
 }
 
-.how-to > ol {
+.how-to ol {
   list-style-type: none;
   padding: 0;
+  grid-area: list;
 }
 
-.how-to > ol > li:first-of-type {
-  border-top: 1px solid #DDDDDD;
-}
-
-.how-to > ol > li {
+.how-to ol > li {
   counter-increment: step-counter;
   display: flex;
   align-items: center;
   padding: 24px 0;
   font-size: 18px;
   line-height: 27px;
-  border-bottom: 1px solid #DDDDDD;
+  border-bottom: 1px solid var(--color-gray-300);
+}
+
+.how-to ol > li:first-of-type {
+  border-top: 1px solid var(--color-gray-300);
 }
 
-.how-to > ol > li > picture {
+.how-to ol > li > picture {
   margin-right: 20px;
   max-width: 25%;
 }
 
-.how-to > ol > li::before {
+.how-to ol > li::before {
   content: counter(step-counter);
   margin-right: 20px;
   font-size: 28px;
@@ -45,16 +46,12 @@
   grid-area: heading;
 }
 
-.how-to > ol {
-  grid-area: list;
-}
-
 .how-to-image {
   grid-area: image;
   align-self: center;
   justify-self: center;
-  height: 0;
   min-height: 100%;
+  order: 3;
 }
 
 .how-to-image-large {
@@ -66,13 +63,30 @@
   max-height: 100%;
 }
 
-.how-to.large-image {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
-  grid-template-areas:
-    "heading image"
-    "list image"
-}
+/* tablet up */
+@media screen and (min-width: 600px) {
+  .how-to .foreground {
+    column-gap: var(--spacing-m);
+    grid-template-rows: 1fr;
+    grid-template-areas:
+      "heading image"
+      "list list"
+  }
 
+  .how-to.large-image .foreground {
+    grid-template-rows: 1fr;
+    grid-auto-rows: min-content;
+    grid-template-areas:
+      "heading image"
+      "list image"
+  }
 
+  .how-to-image {
+    order: unset;
+    height: 0;
+  }
+
+  .how-to.large-image .how-to-image {
+    height: auto;
+  }
+}