From e69a9aac977cc39b7b834ea142a60dca7f112dca Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 29 Nov 2024 15:45:12 -0500
Subject: [PATCH] fix(footer): adjustments to adjunct links visibility (#12136)

### Related Ticket(s)

[ADCMS-7082](https://jsw.ibm.com/browse/ADCMS-7082)

### Description

Make some adjustments to the logic inside the legal-nav component for adjunct-links visibility. Before the fix here, the `@slotchange` event was not firing as expected when there were no adjunct links to hide them. Further, once the `hidden` class got correctly set on the `adjunct-links` wrapper, needed to fix some Sass to actually hide it.

### Changelog

**Changed**

- Hide adjunct-links container when there are no adjunct links.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../scss/components/footer/_footer.scss       |  2 +-
 .../src/components/footer/legal-nav.ts        | 46 +++++++++++--------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
index 2ba91c6d17c..5fefa9a188f 100644
--- a/packages/styles/scss/components/footer/_footer.scss
+++ b/packages/styles/scss/components/footer/_footer.scss
@@ -226,7 +226,7 @@
         @include make-container;
       }
     }
-    .#{$prefix}--adjunct-links__container--hidden {
+    .#{$c4d-prefix}--adjunct-links__container--hidden {
       display: none;
     }
   }
diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts
index 23b8b93ee6e..e4c5d433418 100644
--- a/packages/web-components/src/components/footer/legal-nav.ts
+++ b/packages/web-components/src/components/footer/legal-nav.ts
@@ -8,7 +8,7 @@
  */
 
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
@@ -17,7 +17,7 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 
-const { prefix, stablePrefix: c4dPrefix } = settings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Legal nav.
@@ -37,17 +37,12 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
    */
   @property()
   size = FOOTER_SIZE.REGULAR;
+
   /**
    * Navigation label for accessibility.
    */
   @property()
   navLabel = 'Legal Navigation';
-  /**
-   * The adjunct links container
-   */
-
-  @query(`.${c4dPrefix}--adjunct-links__container`)
-  private _adjunctLinksContainer?: HTMLDivElement;
 
   /**
    * The adjunct links slot
@@ -55,6 +50,9 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
   @query('[name="adjunct-links"]')
   private _adjunctLinksSlot?: HTMLSlotElement;
 
+  @state()
+  protected _hasAdjunctLinks = false;
+
   /**
    * Returns a class-name based on the type parameter type
    */
@@ -65,16 +63,16 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
     });
   }
 
-  protected _handleAdjunctLinksVisibility() {
-    const {
-      _adjunctLinksContainer: adjunctLinksContainer,
-      _adjunctLinksSlot: adjunctLinksSlot,
-    } = this;
+  /**
+   * Handles slot change event of adjunct-links slot to track if there are any.
+   */
+  protected _handleAdjunctLinksVisibility = () => {
+    const { _adjunctLinksSlot: adjunctLinksSlot } = this;
+
+    this._hasAdjunctLinks =
+      (adjunctLinksSlot?.assignedNodes().length || 0) !== 0;
+  };
 
-    const hiddenClass = `${prefix}--adjunct-links__container--hidden`;
-    const isEmpty = (adjunctLinksSlot?.assignedNodes().length || 0) === 0;
-    adjunctLinksContainer?.classList.toggle(hiddenClass, isEmpty);
-  }
   /**
    * The shadow slot this legal nav should be in.
    */
@@ -88,8 +86,14 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
     super.connectedCallback();
   }
 
+  firstUpdated() {
+    const { _adjunctLinksSlot: adjunctLinksSlot } = this;
+    this._hasAdjunctLinks =
+      (adjunctLinksSlot?.assignedNodes().length || 0) !== 0;
+  }
+
   render() {
-    const { navLabel } = this;
+    const { navLabel, _hasAdjunctLinks: hasAdjunctLinks } = this;
     return this.size !== FOOTER_SIZE.MICRO
       ? html`
           <nav
@@ -106,8 +110,10 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
             </div>
             <div
               part="adjunct-links-container"
-              class="${c4dPrefix}--adjunct-links__container">
-              <ul part="adjunct-links-list">
+              class="${c4dPrefix}--adjunct-links__container${hasAdjunctLinks
+                ? ''
+                : ` ${c4dPrefix}--adjunct-links__container--hidden`}">
+              <ul part="adjunct-links-list adjunct-links-list">
                 <slot
                   name="adjunct-links"
                   @slotchange="${this._handleAdjunctLinksVisibility}"></slot>