Styling child of ic-footer in a react app

[jonnorton]

React using the footer with nothing in the slot="link" how can we hide class footer-links.

Is it possible directly through styles or in-directly via the shadow root .shadowRoot?.querySelector('footer-links')?.setAttribute('style', 'visibility: hidden'); .

<ic-footer description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners." caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."> </ic-footer>

[github-actions]

Welcome 👋

Welcome to the ic-ui-kit repo, thank you for raising an issue!

How to contribute

Please read our CONTRIBUTING.md, which explains our ways of working and guidelines for contributions.

Code of Conduct

We'd appreciate it if you could read and abide by our Code of Conduct, as we wish to foster an inclusive and respectful community.

[jonnorton]

The problem was that even though the ic component had rendered it had not hydrated, used a MutationObserver() to write a custom hook below, with usage at the bottom.

import { useEffect } from 'react';

// To be used sparingly when the sis.govt child component in the shadow dom
// needs a tweak. Its preferable to request changes to sis.govt components.
export const useIcChildStyle = () => {
  const setIcStyle = (parentSelector: string, styles: Record<string, string>) => {
    useEffect(() => {
      const targetNodes = document.querySelectorAll(parentSelector);
      const callback = (targetNode: Element) => {
        Object.entries(styles).map(([selector, style])=>{
        targetNode?.shadowRoot?.querySelector(selector)
          ?.setAttribute("style", style);
        });
      };

      if (targetNodes) {
        targetNodes.forEach((targetNode) => {
          const observer = new MutationObserver(() => callback(targetNode));
          observer.observe(targetNode, {
            childList: true,
            attributes: true,
            subtree: true,
          });
        });
      };
    }, []);
  };

  return [setIcStyle] as const;
}

usage

 const [setFooterStyles] = useIcChildStyle();
 setFooterStyles('.page-footer', { 
   '.footer-description' : 'display: none;',
   '.footer-links': 'display: none;'
 });

 return (
   <IcFooter className='page-footer'>