feat(atomic): add atomic-tab-manager component

packages/atomic/src/components.d.ts

@@ -3266,6 +3266,26 @@ export namespace Components {
          */
         "label": string;
     }
+    interface AtomicTab {
+        /**
+          * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
+         */
+        "expression": string;
+        /**
+          * The label to display on the tab.
+         */
+        "label": string;
+        /**
+          * The internal name of the atomic tab.
+         */
+        "name": string;
+    }
+    interface AtomicTabManager {
+        /**
+          * Whether to clear the filters when the active tab changes.
+         */
+        "clearFiltersOnTabChange"?: boolean;
+    }
     /**
      * The `atomic-table-element` element defines a table column in a result list.
      */
@@ -5351,6 +5371,18 @@ declare global {
         prototype: HTMLAtomicSortExpressionElement;
         new (): HTMLAtomicSortExpressionElement;
     };
+    interface HTMLAtomicTabElement extends Components.AtomicTab, HTMLStencilElement {
+    }
+    var HTMLAtomicTabElement: {
+        prototype: HTMLAtomicTabElement;
+        new (): HTMLAtomicTabElement;
+    };
+    interface HTMLAtomicTabManagerElement extends Components.AtomicTabManager, HTMLStencilElement {
+    }
+    var HTMLAtomicTabManagerElement: {
+        prototype: HTMLAtomicTabManagerElement;
+        new (): HTMLAtomicTabManagerElement;
+    };
     /**
      * The `atomic-table-element` element defines a table column in a result list.
      */
@@ -5584,6 +5616,8 @@ declare global {
         "atomic-smart-snippet-suggestions": HTMLAtomicSmartSnippetSuggestionsElement;
         "atomic-sort-dropdown": HTMLAtomicSortDropdownElement;
         "atomic-sort-expression": HTMLAtomicSortExpressionElement;
+        "atomic-tab": HTMLAtomicTabElement;
+        "atomic-tab-manager": HTMLAtomicTabManagerElement;
         "atomic-table-element": HTMLAtomicTableElementElement;
         "atomic-text": HTMLAtomicTextElement;
         "atomic-timeframe": HTMLAtomicTimeframeElement;
@@ -8640,6 +8674,26 @@ declare namespace LocalJSX {
          */
         "label": string;
     }
+    interface AtomicTab {
+        /**
+          * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
+         */
+        "expression"?: string;
+        /**
+          * The label to display on the tab.
+         */
+        "label": string;
+        /**
+          * The internal name of the atomic tab.
+         */
+        "name": string;
+    }
+    interface AtomicTabManager {
+        /**
+          * Whether to clear the filters when the active tab changes.
+         */
+        "clearFiltersOnTabChange"?: boolean;
+    }
     /**
      * The `atomic-table-element` element defines a table column in a result list.
      */
@@ -8925,6 +8979,8 @@ declare namespace LocalJSX {
         "atomic-smart-snippet-suggestions": AtomicSmartSnippetSuggestions;
         "atomic-sort-dropdown": AtomicSortDropdown;
         "atomic-sort-expression": AtomicSortExpression;
+        "atomic-tab": AtomicTab;
+        "atomic-tab-manager": AtomicTabManager;
         "atomic-table-element": AtomicTableElement;
         "atomic-text": AtomicText;
         "atomic-timeframe": AtomicTimeframe;
@@ -9651,6 +9707,8 @@ declare module "@stencil/core" {
              * The `atomic-sort-expression` component defines a sort expression. This component must be inside an `atomic-sort-dropdown` component.
              */
             "atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
+            "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
+            "atomic-tab-manager": LocalJSX.AtomicTabManager & JSXBase.HTMLAttributes<HTMLAtomicTabManagerElement>;
             /**
              * The `atomic-table-element` element defines a table column in a result list.
              */

packages/atomic/src/components/common/tab-manager/tab-button.tsx

@@ -0,0 +1,26 @@
+import {FunctionalComponent, h} from '@stencil/core';
+import {Button} from '../button';
+
+export interface TabButtonProps {
+  label: string | undefined;
+  handleClick: () => void;
+  isActive: boolean;
+}
+
+export const TabButton: FunctionalComponent<TabButtonProps> = (props) => {
+  const activeTabClass = props.isActive
+    ? "relative after:content-[''] after:block after:w-full after:h-1 after:absolute after:-bottom-0.5 after:bg-primary after:rounded"
+    : '';
+  const activeTabTextClass = props.isActive ? '' : 'text-neutral-dark';
+  return (
+    <div part="button-container" class={activeTabClass}>
+      <Button
+        style="text-transparent"
+        class={`px-6 pb-1 w-full text-xl ${activeTabTextClass}`}
+        text={props.label}
+        part="button"
+        onClick={props.handleClick}
+      ></Button>
+    </div>
+  );
+};

packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx

@@ -0,0 +1,17 @@
+import {FunctionalComponent, h} from '@stencil/core';
+
+interface TabDropdownOptionProps {
+  value: string;
+  label: string;
+  isSelected: boolean;
+}
+
+export const TabDropdownOption: FunctionalComponent<TabDropdownOptionProps> = (
+  props
+) => {
+  return (
+    <option key={props.value} value={props.value} selected={props.isSelected}>
+      {props.label}
+    </option>
+  );
+};

packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx

@@ -0,0 +1,25 @@
+import {FunctionalComponent, h} from '@stencil/core';
+
+export interface TabDropdownProps {
+  tabs: Array<{name: string; label: string}>;
+  activeTab: string;
+  onTabChange: (tabName: string) => void;
+}
+
+export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
+  props,
+  children
+) => {
+  return (
+    <div class="hidden pb-1 border-b dropdown-area">
+      <select
+        class="py-2 text-xl font-bold cursor-pointer btn-text-primary"
+        onChange={(e) =>
+          props.onTabChange((e.target as HTMLSelectElement).value)
+        }
+      >
+        {children}
+      </select>
+    </div>
+  );
+};

packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss

@@ -0,0 +1,11 @@
+@import '../../../../global/global.pcss';
+
+@media (max-width: 768px) {
+  .dropdown-area {
+    display: block;
+  }
+
+  .tabs-area {
+    display: none;
+  }
+}

packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx

@@ -0,0 +1,116 @@
+import {
+  TabManager,
+  TabManagerState,
+  buildTabManager,
+  Tab,
+  buildTab,
+} from '@coveo/headless';
+import {Component, h, Element, State, Prop} from '@stencil/core';
+import {
+  BindStateToController,
+  InitializeBindings,
+} from '../../../../utils/initialization-utils';
+import {TabButton} from '../../../common/tab-manager/tab-button';
+import {TabDropdown} from '../../../common/tab-manager/tab-dropdown';
+import {TabDropdownOption} from '../../../common/tab-manager/tab-dropdown-option';
+import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
+
+/**
+ * @internal
+ *
+ * @part button-container - The container for the tab button.
+ * @part button - The tab button.
+ */
+@Component({
+  tag: 'atomic-tab-manager',
+  styleUrl: 'atomic-tab-manager.pcss',
+  shadow: true,
+})
+export class AtomicTabManager {
+  @InitializeBindings() public bindings!: Bindings;
+  @BindStateToController('tabManager')
+  @State()
+  private tabManagerState!: TabManagerState;
+  @Element()
+  private host!: HTMLElement;
+  public tabManager!: TabManager;
+
+  private tabs: {label: string; name: string; tabController: Tab}[] = [];
+
+  /**
+   * Whether to clear the filters when the active tab changes.
+   */
+  @Prop() clearFiltersOnTabChange?: boolean = false;
+
+  @State() public error!: Error;
+
+  public initialize() {
+    this.tabManager = buildTabManager(this.bindings.engine);
+
+    const tabElements = Array.from(this.host.querySelectorAll('atomic-tab'));
+
+    if (tabElements.length === 0) {
+      this.error = new Error(
+        'The "atomic-tab-manager" element requires at least one "atomic-tab" child.'
+      );
+      return;
+    }
+
+    tabElements.forEach((tabElement, index) => {
+      const tabController = buildTab(this.bindings.engine, {
+        options: {
+          expression: tabElement.expression,
+          id: tabElement.name,
+          clearFiltersOnTabChange: this.clearFiltersOnTabChange,
+        },
+        initialState: {isActive: index === 0 ? true : false},
+      });
+
+      this.tabs.push({
+        label: tabElement.label,
+        name: tabElement.name,
+        tabController,
+      });
+    });
+  }
+
+  public render() {
+    return (
+      <div class="mb-2 overflow-x-auto">
+        <div class="flex flex-row w-full mb-2 border-b tabs-area">
+          {this.tabs.map((tab) => (
+            <TabButton
+              isActive={tab.tabController.state.isActive}
+              label={tab.label}
+              handleClick={() => {
+                if (!tab.tabController.state.isActive) {
+                  tab.tabController.select();
+                }
+              }}
+            ></TabButton>
+          ))}
+        </div>
+        <TabDropdown
+          tabs={this.tabs}
+          activeTab={this.tabManagerState.activeTab}
+          onTabChange={(e) => {
+            const selectedTab = this.tabs.find(
+              (tab) => tab.name === (e as string)
+            );
+            if (selectedTab) {
+              selectedTab.tabController.select();
+            }
+          }}
+        >
+          {this.tabs.map((tab) => (
+            <TabDropdownOption
+              value={tab.name}
+              label={tab.label}
+              isSelected={tab.name === this.tabManagerState.activeTab}
+            />
+          ))}
+        </TabDropdown>
+      </div>
+    );
+  }
+}

packages/atomic/src/components/search/tabs/atomic-tab/atomic-tab.tsx

@@ -0,0 +1,25 @@
+import {Component, Prop, Element} from '@stencil/core';
+
+/**
+ * @internal
+ */
+@Component({
+  tag: 'atomic-tab',
+  shadow: false,
+})
+export class AtomicTab {
+  @Element() public host!: HTMLElement;
+
+  /**
+   * The label to display on the tab.
+   */
+  @Prop() label!: string;
+  /**
+   * The internal name of the atomic tab.
+   */
+  @Prop() name!: string;
+  /**
+   * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
+   */
+  @Prop() public expression: string = '';
+}