feat(docs): add ContentRoutingTabs component

packages/docs/components/ContentRoutingTabs/ContentRoutingTabs.tsx

@@ -0,0 +1,24 @@
+import { Box, PillTabs } from '@bigcommerce/big-design';
+import React from 'react';
+
+import { ContentRoutingTabsProps } from './types';
+import { useContentRoutingTabs } from './useContentRoutingTabs';
+
+const RawContentRoutingTabs: React.FC<ContentRoutingTabsProps> = ({ routes, id }) => {
+  const { activeContent, activePills, pills, handlePillClick } = useContentRoutingTabs(routes, id);
+
+  return (
+    <>
+      <PillTabs activePills={activePills} items={pills} onPillClick={handlePillClick} />
+      <Box marginTop="xSmall">{activeContent?.render()}</Box>
+    </>
+  );
+};
+
+export const ContentRoutingTabs: React.FC<ContentRoutingTabsProps> = (props) => {
+  if (props.routes.length === 0) {
+    return null;
+  }
+
+  return <RawContentRoutingTabs {...props} />;
+};

packages/docs/components/ContentRoutingTabs/index.ts

@@ -0,0 +1 @@
+export * from './ContentRoutingTabs';

packages/docs/components/ContentRoutingTabs/types.ts

@@ -0,0 +1,10 @@
+import { PillTabItem } from '@bigcommerce/big-design';
+
+export interface Route extends PillTabItem {
+  render(): JSX.Element;
+}
+
+export interface ContentRoutingTabsProps {
+  routes: Route[];
+  id: string;
+}

packages/docs/components/ContentRoutingTabs/useContentRoutingTabs.ts

@@ -0,0 +1,22 @@
+import { useRouter } from 'next/router';
+
+import { Route } from './types';
+
+export const useContentRoutingTabs = (routes: Route[], id: string) => {
+  const { query, push } = useRouter();
+  const pills = routes.map(({ render, ...pill }) => pill);
+  const queryValue = query[id];
+  const activePill = queryValue && !Array.isArray(queryValue) ? queryValue : routes[0].id;
+  const activeContent = routes.find((content) => content.id === activePill);
+
+  const handlePillClick = (pillId: string) => {
+    push({ query: { ...query, [id]: pillId } }, undefined, { shallow: true });
+  };
+
+  return {
+    activeContent,
+    activePills: activePill ? [activePill] : [],
+    pills,
+    handlePillClick,
+  };
+};

packages/docs/components/index.tsx

@@ -3,6 +3,7 @@ export * from './Code';
 export * from './CodePreview';
 export * from './CodeSnippet';
 export * from './Collapsible';
+export * from './ContentRoutingTabs';
 export * from './List';
 export * from './MethodBadge';
 export * from './MethodList';