feat: Add ProductSidebar and Breadcrumbs [MDS-907}

docs/app/client/accordion/itemProps.ts

@@ -0,0 +1,19 @@
+import { PropsTableProp } from "@/types";
+
+const Props: PropsTableProp[] = [
+  {
+    name: "value",
+    type: ["string"],
+    required: true,
+    description: "The accordion item value",
+  },
+  {
+    name: "disabled",
+    type: ["boolean"],
+    required: false,
+    defaultState: "false",
+    description: "Set disabled/non-disabled",
+  },
+];
+
+export default Props;

docs/app/client/accordion/page.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import Image from "next/image";
+import dynamic from "next/dynamic";
+import { Loader } from "@heathmont/moon-base-tw";
 import { getExamples } from "@/utils/getExamples";
-import { MDX } from "@/components/MDX";
 import { ExampleSectionData } from "@/components/exampleSection/ExampleSection";
 import { MainLayout } from "@/components/MainLayout";
-import dynamic from "next/dynamic";
-import TitleTags from "@/components/TitleTags";
+import { PageHeadComponent } from "@/components/PageHeadComponent";
+import { PropsTable } from "@/components/propsTable";
 
+import props from "./props";
+import itemProps from "./itemProps";
 import image from "./accordion.webp";
-import { Loader } from "@heathmont/moon-base-tw";
-import { PageHeadComponent } from "@/components/PageHeadComponent";
 
 const TITLE = "Accordion";
 
@@ -23,12 +23,13 @@ export default async function AccordionPage(request: {
   } = await getExamples();
   const ordered = [
     "Default",
-    "ControlOutside",
-    "Customization",
-    "Disabled",
-    "HeaderContent",
     "OpenByDefault",
     "SingleOpen",
+    "Disabled",
+    "HeaderContent",
+    "Sizes",
+    "Customization",
+    "ControlOutside",
   ];
   const searchParam = request?.searchParams?.raw;
   const isMockup = !!searchParam && Object.keys(examples).includes(searchParam);
@@ -49,8 +50,12 @@ export default async function AccordionPage(request: {
   }
 
   return (
-    <MainLayout isMockup={isMockup}>
-      <div className="flex flex-col gap-4 text-moon-14 pb-20">
+    <MainLayout
+      isMockup={isMockup}
+      componentName="accordion"
+      contentSidebar={ordered}
+    >
+      <div className="flex flex-col gap-12 text-moon-14 pb-20">
         <PageHeadComponent
           title={TITLE}
           description={description}
@@ -67,7 +72,26 @@ export default async function AccordionPage(request: {
           }}
           data={ordered}
         />
-        {/* TODO: Props table/s */}
+        <PropsTable
+          title="Accordion props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">Accordion</span> component:
+            </p>
+          }
+          data={props}
+        />
+        <PropsTable
+          title="Accordion.Item props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">Accordion.Item</span> component:
+            </p>
+          }
+          data={itemProps}
+        />
       </div>
     </MainLayout>
   );

docs/app/client/accordion/props.ts

@@ -0,0 +1,39 @@
+import { PropsTableProp } from "@/types";
+
+const Props: PropsTableProp[] = [
+  {
+    name: "itemSize",
+    type: ["sm | md | lg | xl"],
+    required: false,
+    defaultState: "md",
+    description: "Size of accordion item",
+  },
+  {
+    name: "singleOpen",
+    type: ["boolean"],
+    required: false,
+    defaultState: "false",
+    description: "Whether only one item can be opened at a time",
+  },
+  {
+    name: "defaultValue",
+    type: ["string"],
+    required: false,
+    description: "The value of the item to expand",
+  },
+  {
+    name: "value",
+    type: ["string[]"],
+    required: false,
+    description: "The accordion items value",
+  },
+  {
+    name: "onValueChange",
+    type: ["(value: string[]) => void"],
+    required: false,
+    description:
+      "Event handler called when the expanded state of an item changes and prop singleOpen in false state",
+  },
+];
+
+export default Props;

docs/app/client/authcode/page.tsx

@@ -51,8 +51,12 @@ export default async function AuthCodePage(request: {
   }
 
   return (
-    <MainLayout isMockup={isMockup}>
-      <div className="flex flex-col gap-4 text-moon-14 pb-20">
+    <MainLayout
+      isMockup={isMockup}
+      componentName="authcode"
+      contentSidebar={ordered}
+    >
+      <div className="flex flex-col gap-12 text-moon-14 pb-20">
         <PageHeadComponent
           title={"AuthCode"}
           description={description}

docs/app/layout.tsx

@@ -18,10 +18,10 @@ export default async function RootLayout({
 }) {
   const actions = await useSearchActions();
   return (
-    <html lang="en" dir="ltr">
+    <html lang="en" dir="ltr" className="scroll-pt-20">
       <SearchProvider actions={actions}>
         <RtlProvider>
-          <body className="theme-moon-light bg-gohan">{children}</body>
+          <body className="theme-moon-light bg-goku">{children}</body>
         </RtlProvider>
       </SearchProvider>
     </html>

docs/components/HeaderSection.tsx

@@ -5,15 +5,16 @@ type Props = {
   title?: string;
   description?: string | JSX.Element;
   className?: string;
+  href?: string;
 };
-const HeaderSection = ({ title, description, className }: Props) => (
+const HeaderSection = ({ title, description, className, href }: Props) => (
   <>
     <h2
-      id={title}
+      id={href || title}
       className={mergeClassnames("text-moon-20 font-medium", className)}
     >
       <a
-        href={`#${title}`}
+        href={`#${href || title}`}
         className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
       >
         {title}

docs/components/MainLayout.tsx

@@ -3,21 +3,37 @@ import { ReactNode } from "react";
 import Sidebar from "@/components/sidebar/Sidebar";
 import Footer from "@/components/footer/Footer";
 import Settings from "@/components/settings/Settings";
+import ProductSidebar from "./productSidebar/ProductSidebar";
+import { Header } from "./header/Header";
+import Breadcrumbs from "./breadcrumbs/Breadcrumbs";
 
 interface MainLayoutProps {
   children: ReactNode;
   isMockup?: boolean;
+  componentName?: string;
+  contentSidebar?: string[];
 }
 
-export const MainLayout = ({ children, isMockup = false }: MainLayoutProps) => {
+export const MainLayout = ({
+  children,
+  isMockup = false,
+  componentName,
+  contentSidebar,
+}: MainLayoutProps) => {
   return isMockup ? (
     children
   ) : (
     <>
+      <Header>
+        <Breadcrumbs />
+      </Header>
       <Sidebar />
-      <main className="min-h-screen ms-80 bg-goku flex-1 flex flex-col rounded-ss-3xl px-5 xl:px-20 2xl:px-32 pt-12 xl:pb-52">
+      <main className="min-h-screen ms-80 me-0 lg:me-72 bg-goku flex-1 flex flex-col px-5 xl:px-20 2xl:px-32 pt-12 xl:pb-52">
         {children}
       </main>
+      {componentName && contentSidebar && (
+        <ProductSidebar name={componentName} contents={contentSidebar} />
+      )}
       <Settings />
       <Footer />
     </>

docs/components/PageHeadComponent.tsx

@@ -21,6 +21,6 @@ export const PageHeadComponent = ({
       {description && <MDX markdown={description} />}
     </div>
 
-    {image && <Image src={image} width={500} alt="AuthCode Image" />}
+    {image && <Image src={image} width={500} alt={`${title} image`} />}
   </div>
 );

docs/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Breadcrumb } from "@heathmont/moon-core-tw";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const Breadcrumbs = () => {
+  const pathname = usePathname();
+  const [_, ...pages] = pathname === "/" ? [] : pathname.split("/");
+  if (pathname === "/") {
+    return null;
+  }
+
+  const HomeLink = <Link href="/">Home</Link>;
+
+  const formatPageLink = (page: string) => (page === "client" ? "#" : page);
+
+  const restPages = pathname
+    .split("/")
+    .filter((page) => page !== "")
+    .map((page, index) => (
+      <Link href={formatPageLink(page)} key={index}>
+        {page && page[0].toUpperCase() + page.slice(1)}
+      </Link>
+    ));
+
+  return <Breadcrumb divider="/" breadcrumbs={[HomeLink, ...restPages]} />;
+};
+
+export default Breadcrumbs;

docs/components/exampleSection/ExampleSection.tsx

@@ -13,16 +13,18 @@ type Props = {
   description?: JSX.Element;
   component: JSX.Element;
   code: string;
+  href?: string;
 };
 
 export const ExampleSection = async ({
   title,
   description,
   component,
   code,
+  href,
 }: Props) => (
   <div className="flex flex-col gap-4 relative">
-    <HeaderSection title={title} description={description} />
+    <HeaderSection title={title} description={description} href={href} />
     <div className="bg-gohan rounded-moon-i-sm overflow-hidden mt-2">
       <ComponentPreview component={component} />
       <CodePreview code={code} />
@@ -63,6 +65,7 @@ export async function withExamples(
     return (
       <WrappedComponent
         key={ex}
+        href={ex}
         title={(title as string | undefined) || formatTitle(ex)}
         component={<Component />}
         description={

docs/components/header/Header.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import Logo from "./Logo";
+
+export const Header = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <header className="sticky top-0 z-20">
+      <div className=" h-[4.5rem] flex flex-row text-bulma bg-goku border-b border-beerus">
+        <div className="h-full w-72 border-e border-beerus flex items-center ps-6">
+          <Link href="/" aria-label="Home page">
+            <Logo />
+          </Link>
+        </div>
+        <div className="p-6 h-full flex items-center hidden lg:block">
+          {children}
+        </div>
+      </div>
+    </header>
+  );
+};

docs/components/header/Logo.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+type Props = {
+  color?: string;
+  height?: number;
+};
+
+const Logo: React.FC<Props> = ({ color }) => (
+  <svg
+    width="70"
+    height="40"
+    viewBox="0 0 70 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4061_3084)">
+      <path
+        d="M4.19298 27.8885H0V12.2242H4.19298V14.2744H4.22499C5.47328 12.7688 7.16967 12 8.89808 12C10.9466 12 12.5789 12.7688 13.5072 14.4666H13.5712C14.8515 12.8329 16.8039 12 19.0444 12C22.4052 12 24.5497 14.0181 24.5497 18.8231V27.8885H20.3568V19.8161C20.3568 17.3175 19.5886 15.7479 17.6361 15.7479C15.8757 15.7479 14.4354 17.2535 14.4354 20.0724V27.8885H10.2424V19.8161C10.2424 17.3175 9.4102 15.7479 7.48975 15.7479C5.60131 15.7479 4.19298 17.2535 4.19298 20.0724V27.8885Z"
+        fill={color ? color : "currentColor"}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.4547 20.2753C44.4547 24.6627 40.8899 28.2195 36.4926 28.2195C32.0953 28.2195 28.5305 24.6627 28.5305 20.2753C28.5305 15.8878 32.0953 12.331 36.4926 12.331C40.8899 12.331 44.4547 15.8878 44.4547 20.2753ZM39.1466 20.2753C39.1466 21.7378 37.9584 22.9233 36.4926 22.9233C35.0268 22.9233 33.8386 21.7378 33.8386 20.2753C33.8386 18.8128 35.0268 17.6272 36.4926 17.6272C37.9584 17.6272 39.1466 18.8128 39.1466 20.2753Z"
+        fill={color ? color : "currentColor"}
+      />
+      <path
+        d="M51.0898 14.9791C51.0898 16.4416 49.9016 17.6272 48.4358 17.6272C46.97 17.6272 45.7817 16.4416 45.7817 14.9791C45.7817 13.5166 46.97 12.331 48.4358 12.331C49.9016 12.331 51.0898 13.5166 51.0898 14.9791Z"
+        fill={color ? color : "currentColor"}
+      />
+      <path
+        d="M59.2679 27.8885H55.0711V12.2242H59.2679V14.2423H59.3319C60.5813 12.7688 62.3754 12 64.3296 12C67.6614 12 70 13.7939 70 18.5989V27.8885H65.8033V19.656C65.8033 16.6769 64.7461 15.7479 62.7918 15.7479C60.6775 15.7479 59.2679 17.2214 59.2679 20.0404V27.8885Z"
+        fill={color ? color : "currentColor"}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4061_3084">
+        <rect
+          width="70"
+          height="16.2195"
+          fill="white"
+          transform="translate(0 12)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Logo;