added overview options slot to docs aspect

scopes/docs/docs/docs.ui.runtime.tsx

@@ -8,10 +8,10 @@ import { OverviewCompare } from '@teambit/docs.ui.overview-compare';
 import { OverviewCompareSection } from '@teambit/docs.ui.overview-compare-section';
 import { DocsAspect } from './docs.aspect';
 import { OverviewSection } from './overview.section';
-import type { TitleBadgeSlot, TitleBadge } from './overview';
+import type { TitleBadgeSlot, TitleBadge, OverviewOptionsSlot, OverviewOptions } from './overview';
 
 export class DocsUI {
-  constructor(readonly titleBadgeSlot: TitleBadgeSlot) {}
+  constructor(readonly titleBadgeSlot: TitleBadgeSlot, readonly overviewOptionsSlot: OverviewOptionsSlot) {}
 
   /**
    * register a new title badge into the overview section of a component.
@@ -30,22 +30,26 @@ export class DocsUI {
   }
 
   getDocsCompare() {
-    return <OverviewCompare titleBadges={this.titleBadgeSlot} />;
+    return <OverviewCompare titleBadges={this.titleBadgeSlot} overviewOptions={this.overviewOptionsSlot} />;
+  }
+
+  registerOverviewOptions(options: OverviewOptions) {
+    this.overviewOptionsSlot.register(options);
   }
 
   static dependencies = [ComponentAspect, ComponentCompareAspect];
 
   static runtime = UIRuntime;
 
-  static slots = [Slot.withType<TitleBadge>()];
+  static slots = [Slot.withType<TitleBadge>(), Slot.withType<OverviewOptions>()];
 
   static async provider(
     [component, componentCompare]: [ComponentUI, ComponentCompareUI],
     config,
-    [titleBadgeSlot]: [TitleBadgeSlot]
+    [titleBadgeSlot, overviewOptionsSlot]: [TitleBadgeSlot, OverviewOptionsSlot]
   ) {
-    const docs = new DocsUI(titleBadgeSlot);
-    const section = new OverviewSection(titleBadgeSlot);
+    const docs = new DocsUI(titleBadgeSlot, overviewOptionsSlot);
+    const section = new OverviewSection(titleBadgeSlot, overviewOptionsSlot);
     const compareSection = new OverviewCompareSection(docs);
 
     component.registerRoute(section.route);

scopes/docs/docs/index.ts

@@ -13,7 +13,7 @@ export type { DocReader } from './doc-reader';
 export type { Docs, Example } from './docs';
 export { defaultDocs } from './docs';
 
-export type { TitleBadgeSlot, TitleBadge } from './overview';
+export type { TitleBadgeSlot, TitleBadge, OverviewOptionsSlot, OverviewOptions } from './overview';
 export { Overview, BadgePosition } from './overview';
 
 export { DocsAspect };

scopes/docs/docs/overview.section.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Section } from '@teambit/component';
-import { Overview, TitleBadgeSlot } from './overview';
+import { Overview, TitleBadgeSlot, OverviewOptionsSlot } from './overview';
 
 export class OverviewSection implements Section {
   constructor(
     /**
      * title badge slot.
      */
-    private titleBadgeSlot: TitleBadgeSlot
+    private titleBadgeSlot: TitleBadgeSlot,
+    private overviewOptionsSlot: OverviewOptionsSlot
   ) {}
 
   navigationLink = {
@@ -18,7 +19,7 @@ export class OverviewSection implements Section {
 
   route = {
     index: true,
-    element: <Overview titleBadges={this.titleBadgeSlot} />,
+    element: <Overview titleBadges={this.titleBadgeSlot} overviewOptions={this.overviewOptionsSlot} />,
   };
 
   order = 10;

scopes/docs/docs/overview/index.ts

@@ -1,2 +1,2 @@
 export { Overview, BadgePosition } from './overview';
-export type { TitleBadgeSlot, TitleBadge } from './overview';
+export type { TitleBadgeSlot, TitleBadge, OverviewOptionsSlot, OverviewOptions } from './overview';

scopes/docs/docs/overview/overview.tsx

@@ -28,14 +28,19 @@ export type TitleBadge = {
 
 export type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;
 
+export type OverviewOptions = () => { queryParams?: string };
+
+export type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;
+
 export type OverviewProps = {
   titleBadges: TitleBadgeSlot;
+  overviewOptions: OverviewOptionsSlot;
 };
 
-export function Overview({ titleBadges }: OverviewProps) {
+export function Overview({ titleBadges, overviewOptions }: OverviewProps) {
   const component = useContext(ComponentContext);
   const componentDescriptor = useComponentDescriptor();
-
+  const overviewProps = flatten(overviewOptions.values())[0];
   const showHeader = !component.preview?.legacyHeader;
   const [isLoading, setLoading] = useState(true);
 
@@ -53,6 +58,8 @@ export function Overview({ titleBadges }: OverviewProps) {
 
   const iframeQueryParams = `skipIncludes=${component.preview?.skipIncludes || 'false'}`;
 
+  const overviewPropsValues = overviewProps && overviewProps();
+
   return (
     <div className={styles.overviewWrapper}>
       {showHeader && (
@@ -82,7 +89,7 @@ export function Overview({ titleBadges }: OverviewProps) {
           style={{ width: '100%', height: '100%' }}
           previewName="overview"
           pubsub={true}
-          queryParams={[iframeQueryParams]}
+          queryParams={[iframeQueryParams, overviewPropsValues?.queryParams || '']}
           viewport={null}
           fullContentHeight
           disableScroll={true}

scopes/docs/ui/overview-compare/overview-compare.module.scss

@@ -5,7 +5,7 @@
 
 .subView {
   height: 100%;
-  background-color: white;
+  background-color: var(--bit-bg-color, #fff);
   overflow: auto;
 }
 

scopes/docs/ui/overview-compare/overview-compare.tsx

@@ -4,18 +4,19 @@ import { useComponentCompare } from '@teambit/component.ui.component-compare.con
 import { Toggle } from '@teambit/design.inputs.toggle-switch';
 import { RoundLoader } from '@teambit/design.ui.round-loader';
 import { Overview } from '@teambit/docs';
-import type { TitleBadgeSlot } from '@teambit/docs';
+import type { TitleBadgeSlot, OverviewOptionsSlot } from '@teambit/docs';
 import React, { UIEvent, useMemo, useRef, useState } from 'react';
 import { useLanes, LanesContext, LanesContextModel } from '@teambit/lanes.hooks.use-lanes';
 
 import styles from './overview-compare.module.scss';
 
 export type OverviewCompareProps = {
   titleBadges: TitleBadgeSlot;
+  overviewOptions: OverviewOptionsSlot;
 };
 
 export function OverviewCompare(props: OverviewCompareProps) {
-  const { titleBadges } = props;
+  const { titleBadges, overviewOptions } = props;
   const componentCompare = useComponentCompare();
   const [isScrollingSynced, setIsScrollingSynced] = useState<boolean>(true);
 
@@ -58,7 +59,7 @@ export function OverviewCompare(props: OverviewCompareProps) {
       <div className={styles.subView} ref={leftPanelRef} onScroll={handleLeftPanelScroll}>
         <LanesContext.Provider value={lanesContext}>
           <ComponentProvider component={componentCompare.base.model}>
-            <Overview titleBadges={titleBadges} />
+            <Overview titleBadges={titleBadges} overviewOptions={overviewOptions} />
           </ComponentProvider>
         </LanesContext.Provider>
       </div>
@@ -80,7 +81,7 @@ export function OverviewCompare(props: OverviewCompareProps) {
       <div className={styles.subView} ref={rightPanelRef} onScroll={handleRightPanelScroll}>
         <LanesContext.Provider value={lanesContext}>
           <ComponentProvider component={componentCompare.compare.model}>
-            <Overview titleBadges={titleBadges} />
+            <Overview titleBadges={titleBadges} overviewOptions={overviewOptions} />
           </ComponentProvider>
         </LanesContext.Provider>
       </div>

scopes/preview/ui/component-preview/preview.module.scss

@@ -1,5 +1,5 @@
 .preview {
   // preview background should always be white to avoid collisions with themes.
-  background-color: #fff;
+  background-color: var(--bit-bg-color, #fff);
   // height: 100%;
 }