chore(atomic): migrate tab guard (#6197)

Author: fpbrault

packages/atomic/src/components/common/tabs/tab-guard.tsx renamed to packages/atomic/src/components/common/tabs/stencil-tab-guard.tsx

@@ -0,0 +1,85 @@
+import {html, nothing, render, type TemplateResult} from 'lit';
+import {describe, expect, it} from 'vitest';
+import {renderTabWrapper} from './tab-wrapper';
+
+describe('renderTabWrapper', () => {
+  const renderTabWrapperWithChildren = (
+    props: {
+      tabsIncluded?: string | string[];
+      tabsExcluded?: string | string[];
+      activeTab: string;
+    },
+    children: TemplateResult | typeof nothing = nothing
+  ) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    render(
+      renderTabWrapper({
+        props: {
+          tabsIncluded: props.tabsIncluded ?? [],
+          tabsExcluded: props.tabsExcluded ?? [],
+          activeTab: props.activeTab,
+        },
+      })(children),
+      container
+    );
+
+    return container;
+  };
+
+  const testChild = html`<div class="child">Test Child</div>`;
+
+  it.each([
+    {
+      description: 'no tabs are specified',
+      props: {activeTab: 'products'},
+    },
+    {
+      description: 'activeTab is included in tabsIncluded',
+      props: {tabsIncluded: ['products', 'services'], activeTab: 'products'},
+    },
+    {
+      description: 'tabsIncluded is empty',
+      props: {tabsIncluded: [], activeTab: 'products'},
+    },
+    {
+      description: 'activeTab is empty and tabsIncluded is specified',
+      props: {tabsIncluded: ['products'], activeTab: ''},
+    },
+  ])('should render children when $description', ({props}) => {
+    const container = renderTabWrapperWithChildren(props, testChild);
+    const child = container.querySelector('.child');
+
+    expect(child).toBeInTheDocument();
+    expect(child?.textContent).toBe('Test Child');
+
+    container.remove();
+  });
+
+  it.each([
+    {
+      description: 'activeTab is excluded in tabsExcluded',
+      props: {tabsExcluded: ['products', 'services'], activeTab: 'products'},
+    },
+    {
+      description: 'activeTab is not included in tabsIncluded',
+      props: {tabsIncluded: ['services', 'support'], activeTab: 'products'},
+    },
+    {
+      description: 'activeTab is excluded even if also included',
+      props: {
+        tabsIncluded: ['products'],
+        tabsExcluded: ['products'],
+        activeTab: 'products',
+      },
+    },
+  ])('should not render children when $description', ({props}) => {
+    const container = renderTabWrapperWithChildren(props, testChild);
+    const child = container.querySelector('.child');
+
+    expect(child).not.toBeInTheDocument();
+
+    container.remove();
+  });
+});

packages/atomic/src/components/common/tabs/tab-wrapper.spec.ts

@@ -0,0 +1,29 @@
+import {nothing} from 'lit';
+import type {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
+import {shouldDisplayOnCurrentTab} from '@/src/utils/tab-utils';
+
+interface TabWrapperProps {
+  tabsIncluded: string | string[];
+  tabsExcluded: string | string[];
+  activeTab: string;
+}
+
+export const renderTabWrapper: FunctionalComponentWithChildren<
+  TabWrapperProps
+> =
+  ({props}) =>
+  (children) => {
+    const {tabsIncluded, tabsExcluded, activeTab} = props;
+
+    if (
+      !shouldDisplayOnCurrentTab(
+        [...tabsIncluded],
+        [...tabsExcluded],
+        activeTab
+      )
+    ) {
+      return nothing;
+    }
+
+    return children;
+  };

packages/atomic/src/components/common/tabs/tab-wrapper.ts

@@ -42,7 +42,7 @@ import {
   ItemDisplayLayout,
   getItemListDisplayClasses,
 } from '../../../common/layout/display-options';
-import {TabGuard} from '../../../common/tabs/tab-guard';
+import {TabGuard} from '../../../common/tabs/stencil-tab-guard';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**