docs: redesign footer (#8651)

www/apps/api-reference/app/_mdx/admin.mdx

@@ -24,6 +24,8 @@ All API Routes are prefixed with `/admin`. So, during development, the API Route
   }}
   reportLink={formatReportLink("admin", "Introduction")}
   pathName="/api/admin"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -166,6 +168,8 @@ fetch(`<BACKEND_URL>/admin/products`, {
   }}
   reportLink={formatReportLink("admin", "Authentication - Cookie Session ID")}
   pathName="/api/admin"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -190,6 +194,8 @@ x-no-compression: true
   }}
   reportLink={formatReportLink("admin", "Authentication - Cookie Session ID")}
   pathName="/api/admin"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -394,6 +400,8 @@ curl -g "http://localhost:9000/admin/products?created_at[$lt]=2023-02-17&created
   }}
   reportLink={formatReportLink("admin", "Query Parameter Types")}
   pathName="/api/admin"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -472,6 +480,8 @@ This sorts the products by their `created_at` field in the descending order.
   }}
   reportLink={formatReportLink("admin", "Pagination")}
   pathName="/api/admin"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>

www/apps/api-reference/app/_mdx/store.mdx

@@ -25,6 +25,8 @@ All API Routes are prefixed with `/store`. So, during development, the API Route
   }}
   reportLink={formatReportLink("store", "Introduction")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -136,6 +138,8 @@ fetch(`<BACKEND_URL>/store/products`, {
   }}
   reportLink={formatReportLink("store", "Authentication - Cookie Session ID")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -180,6 +184,8 @@ x-publishable-api-key: {your_publishable_api_key}
   }}
   reportLink={formatReportLink("store", "Publishable API Key")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -204,6 +210,8 @@ x-no-compression: true
   }}
   reportLink={formatReportLink("store", "HTTP Compression")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -266,6 +274,8 @@ This returns the variants of each product, but the variants only have their `id`
   }}
   reportLink={formatReportLink("store", "Selecting Fields")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -407,6 +417,8 @@ curl -g "http://localhost:9000/store/products?created_at[$lt]=2023-02-17&created
   }}
   reportLink={formatReportLink("store", "Query Parameter Types")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>
@@ -483,6 +495,8 @@ This sorts the products by their `created_at` field in the descending order.
   }}
   reportLink={formatReportLink("store", "Pagination")}
   pathName="/api/store"
+  question="Was this section helpful?"
+  vertical={true}
 />
 
 </SectionContainer>

www/apps/book/app/layout.tsx

@@ -43,10 +43,10 @@ export default function RootLayout({
       }}
       showPagination={true}
       bodyClassName={clsx(inter.variable, robotoMono.variable)}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
     >
       {children}
-      <Feedback className="my-2" />
-      <EditButton />
     </TightLayout>
   )
 }

www/apps/resources/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import { Inter, Roboto_Mono } from "next/font/google"
 import Providers from "@/providers"
 import "./globals.css"
-import { Breadcrumbs, TightLayout } from "docs-ui"
+import { TightLayout } from "docs-ui"
 import { config } from "@/config"
 import clsx from "clsx"
 import { Feedback } from "@/components/Feedback"
@@ -43,10 +43,10 @@ export default function RootLayout({
         expandItems: true,
       }}
       bodyClassName={clsx(inter.variable, robotoMono.variable)}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
     >
       {children}
-      <Feedback className="my-2" />
-      <EditButton />
     </TightLayout>
   )
 }

www/packages/docs-ui/src/components/DottedSeparator/index.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import clsx from "clsx"
+import React from "react"
+
+export type DottedSeparatorProps = {
+  wrapperClassName?: string
+  className?: string
+}
+
+export const DottedSeparator = ({
+  className,
+  wrapperClassName,
+}: DottedSeparatorProps) => {
+  return (
+    <div className={clsx("px-docs_0.75 my-docs_0.75", wrapperClassName)}>
+      <span
+        className={clsx(
+          "block w-full h-px relative bg-border-dotted",
+          "bg-[length:4px_1px] bg-repeat-x bg-bottom",
+          className
+        )}
+      ></span>
+    </div>
+  )
+}

www/packages/docs-ui/src/components/EditButton/index.tsx

@@ -1,5 +1,7 @@
 import React from "react"
-import { Button } from "../.."
+import Link from "next/link"
+import clsx from "clsx"
+import { ArrowUpRightOnBox } from "@medusajs/icons"
 
 type EditButtonProps = {
   filePath: string
@@ -7,10 +9,15 @@ type EditButtonProps = {
 
 export const EditButton = ({ filePath }: EditButtonProps) => {
   return (
-    <Button variant="secondary" className="mb-docs_1">
-      <a href={`https://github.com/medusajs/medusa/edit/develop${filePath}`}>
-        Edit this page
-      </a>
-    </Button>
+    <Link
+      href={`https://github.com/medusajs/medusa/edit/develop${filePath}`}
+      className={clsx(
+        "flex w-fit gap-docs_0.25 my-docs_2 items-center",
+        "text-medusa-fg-muted hover:text-medusa-fg-subtle"
+      )}
+    >
+      <span>Edit this page</span>
+      <ArrowUpRightOnBox />
+    </Link>
   )
 }

www/packages/docs-ui/src/components/Feedback/index.tsx

@@ -5,7 +5,16 @@ import { CSSTransition, SwitchTransition } from "react-transition-group"
 import { Solutions } from "./Solutions"
 import { ExtraData, useAnalytics } from "@/providers/Analytics"
 import clsx from "clsx"
-import { Button, TextArea, Label, Details, InputText } from "@/components"
+import {
+  Button,
+  TextArea,
+  Label,
+  Details,
+  InputText,
+  DottedSeparator,
+} from "@/components"
+import { ChatBubbleLeftRight, ThumbDown, ThumbUp } from "@medusajs/icons"
+import Link from "next/link"
 
 export type FeedbackProps = {
   event: string
@@ -29,9 +38,9 @@ export const Feedback = ({
   event,
   pathName,
   reportLink,
-  question = "Was this section helpful?",
-  positiveBtn = "Yes",
-  negativeBtn = "No",
+  question = "Was this page helpful?",
+  positiveBtn = "It was helpful",
+  negativeBtn = "It wasn't helpful",
   positiveQuestion = "What was most helpful?",
   negativeQuestion = "What can we improve?",
   submitBtn = "Submit",
@@ -111,7 +120,8 @@ export const Feedback = ({
   }
 
   return (
-    <div className={clsx("mt-docs_3", className)}>
+    <div className={clsx(className)}>
+      <DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
       <SwitchTransition mode="out-in">
         <CSSTransition
           key={
@@ -135,33 +145,62 @@ export const Feedback = ({
             {!showForm && !submittedFeedback && (
               <div
                 className={clsx(
-                  "flex",
-                  !vertical && "flex-row items-center",
-                  vertical && "flex-col justify-center gap-docs_1"
+                  "flex gap-docs_0.5",
+                  !vertical && "flex-col md:flex-row md:items-center",
+                  vertical && "flex-col justify-center"
                 )}
                 ref={inlineFeedbackRef}
               >
-                <Label className="mr-docs_1.5">{question}</Label>
+                <Label>{question}</Label>
                 <div
-                  className={clsx("flex flex-row items-center gap-docs_0.5")}
+                  className={clsx(
+                    "flex gap-docs_0.5",
+                    "flex-col md:flex-row md:items-center"
+                  )}
                 >
                   <Button
                     onClick={handleFeedback}
-                    className="positive w-fit"
-                    variant="secondary"
+                    className={clsx(
+                      "positive gap-[6px] !justify-start md:!justify-center",
+                      "!px-docs_0.5 !py-docs_0.25"
+                    )}
+                    variant="transparent-clear"
                   >
-                    {positiveBtn}
+                    <ThumbUp className="text-medusa-fg-subtle" />
+                    <span className="text-medusa-fg-base text-compact-small-plus flex-1">
+                      {positiveBtn}
+                    </span>
                   </Button>
                   <Button
                     onClick={handleFeedback}
-                    className="w-fit"
-                    variant="secondary"
+                    className={clsx(
+                      "gap-[6px] !justify-start md:!justify-center",
+                      "!px-docs_0.5 !py-docs_0.25"
+                    )}
+                    variant="transparent-clear"
                   >
-                    {negativeBtn}
+                    <ThumbDown className="text-medusa-fg-subtle" />
+                    <span className="text-medusa-fg-base text-compact-small-plus flex-1">
+                      {negativeBtn}
+                    </span>
                   </Button>
                   {reportLink && (
-                    <Button variant="secondary">
-                      <a href={reportLink}>Report Issue</a>
+                    <Button
+                      variant="transparent-clear"
+                      className={clsx(
+                        "gap-[6px] relative",
+                        "!px-docs_0.5 !py-docs_0.25",
+                        "!justify-start md:!justify-center"
+                      )}
+                    >
+                      <ChatBubbleLeftRight className="text-medusa-fg-subtle" />
+                      <span className="text-medusa-fg-base text-compact-small-plus flex-1">
+                        Report Issue
+                      </span>
+                      <Link
+                        href={reportLink}
+                        className="absolute left-0 top-0 w-full h-full"
+                      ></Link>
                     </Button>
                   )}
                 </div>
@@ -259,6 +298,7 @@ export const Feedback = ({
           </>
         </CSSTransition>
       </SwitchTransition>
+      <DottedSeparator wrapperClassName="!px-0 !my-docs_2" />
     </div>
   )
 }

www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx

@@ -6,7 +6,7 @@ import Link from "next/link"
 import clsx from "clsx"
 import { EllipseMiniSolid } from "@medusajs/icons"
 import { MainNavigationDropdownIcon } from "../../Icon"
-import { SidebarSeparator } from "../../../../Sidebar/Separator"
+import { DottedSeparator } from "../../../.."
 
 export type MainNavigationDropdownMenuItemProps = {
   item: NavigationDropdownItem
@@ -19,7 +19,7 @@ export const MainNavigationDropdownMenuItem = ({
 }: MainNavigationDropdownMenuItemProps) => {
   switch (item.type) {
     case "divider":
-      return <SidebarSeparator className="my-docs_0.25" />
+      return <DottedSeparator className="my-docs_0.25" />
     case "link":
       return (
         <Link

www/packages/docs-ui/src/components/Sidebar/Item/index.tsx

@@ -5,7 +5,7 @@ import { SidebarItem as SidebarItemType } from "types"
 import { SidebarItemCategory } from "./Category"
 import { SidebarItemLink } from "./Link"
 import { SidebarItemSubCategory } from "./SubCategory"
-import { SidebarSeparator } from "../Separator"
+import { DottedSeparator } from "../.."
 
 export type SidebarItemProps = {
   item: SidebarItemType
@@ -24,7 +24,7 @@ export const SidebarItem = ({
       return (
         <>
           <SidebarItemCategory item={item} {...props} />
-          {hasNextItems && <SidebarSeparator />}
+          {hasNextItems && <DottedSeparator />}
         </>
       )
     case "sub-category":
@@ -32,6 +32,6 @@ export const SidebarItem = ({
     case "link":
       return <SidebarItemLink item={item} {...props} />
     case "separator":
-      return <SidebarSeparator />
+      return <DottedSeparator />
   }
 }

www/packages/docs-ui/src/components/Sidebar/Separator/index.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import clsx from "clsx"
-import React from "react"
-
-export type SidebarSeparatorProps = {
-  className?: string
-}
-
-export const SidebarSeparator = ({ className }: SidebarSeparatorProps) => {
-  return (
-    <div className="px-docs_0.75">
-      <span
-        className={clsx(
-          "block w-full h-px relative my-docs_0.75 bg-border-dotted",
-          "bg-[length:4px_1px] bg-repeat-x bg-bottom",
-          className
-        )}
-      ></span>
-    </div>
-  )
-}

www/packages/docs-ui/src/components/Sidebar/Top/index.tsx

@@ -3,9 +3,9 @@
 import React from "react"
 import { SidebarChild } from "../Child"
 import { InteractiveSidebarItem } from "types"
-import { SidebarSeparator } from "../Separator"
 import { SidebarTopMobileClose } from "./MobileClose"
 import { SidebarTopMedusaMenu } from "./MedusaMenu"
+import { DottedSeparator } from "../../.."
 
 export type SidebarTopProps = {
   parentItem?: InteractiveSidebarItem
@@ -20,11 +20,11 @@ export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
           <SidebarTopMedusaMenu />
           {parentItem && (
             <>
-              <SidebarSeparator />
+              <DottedSeparator />
               <SidebarChild item={parentItem} />
             </>
           )}
-          <SidebarSeparator className="!my-0" />
+          <DottedSeparator className="!my-0" />
         </div>
       </div>
     )

www/packages/docs-ui/src/components/Sidebar/index.tsx

@@ -3,12 +3,11 @@
 import React, { useMemo, useRef } from "react"
 import { useSidebar } from "@/providers"
 import clsx from "clsx"
-import { Loading } from "@/components"
+import { DottedSeparator, Loading } from "@/components"
 import { SidebarItem } from "./Item"
 import { CSSTransition, SwitchTransition } from "react-transition-group"
 import { SidebarTop, SidebarTopProps } from "./Top"
 import useResizeObserver from "@react-hook/resize-observer"
-import { SidebarSeparator } from "./Separator"
 import { useClickOutside, useKeyboardShortcut } from "@/hooks"
 
 export type SidebarProps = {
@@ -131,7 +130,7 @@ export const Sidebar = ({
                       hasNextItems={index !== sidebarItems.default.length - 1}
                     />
                   ))}
-                  <SidebarSeparator />
+                  <DottedSeparator />
                 </div>
                 {/* DESKTOP SIDEBAR */}
                 <div className="mt-docs_0.75 lg:mt-0">

www/packages/docs-ui/src/components/index.ts

@@ -18,6 +18,7 @@ export * from "./CopyButton"
 export * from "./Details"
 export * from "./Details/Summary"
 export * from "./DetailsList"
+export * from "./DottedSeparator"
 export * from "./EditButton"
 export * from "./ExpandableNotice"
 export * from "./FeatureFlagNotice"

www/packages/docs-ui/src/layouts/root.tsx

@@ -12,6 +12,8 @@ export type RootLayoutProps = {
   htmlClassName?: string
   bodyClassName?: string
   showPagination?: boolean
+  feedbackComponent?: React.ReactNode
+  editComponent?: React.ReactNode
 } & MainContentLayoutProps
 
 export const RootLayout = ({

www/packages/docs-ui/src/layouts/tight.tsx

@@ -6,6 +6,8 @@ import { Pagination } from ".."
 export const TightLayout = ({
   children,
   showPagination,
+  feedbackComponent,
+  editComponent,
   ...props
 }: RootLayoutProps) => {
   return (
@@ -19,7 +21,9 @@ export const TightLayout = ({
         )}
       >
         {children}
+        {feedbackComponent}
         {showPagination && <Pagination />}
+        {editComponent}
       </div>
     </RootLayout>
   )

www/packages/docs-ui/src/layouts/wide.tsx

@@ -6,6 +6,8 @@ import { Pagination } from ".."
 export const WideLayout = ({
   children,
   showPagination,
+  feedbackComponent,
+  editComponent,
   ...props
 }: RootLayoutProps) => {
   return (
@@ -16,11 +18,13 @@ export const WideLayout = ({
       <main
         className={clsx(
           "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
-          "lg:max-w-wide-content relative mt-4 w-full flex-1 lg:mt-7"
+          "lg:max-w-lg-wide-content xl:max-w-xl-wide-content relative mt-4 w-full flex-1 lg:mt-7"
         )}
       >
         {children}
+        {feedbackComponent}
         {showPagination && <Pagination />}
+        {editComponent}
       </main>
     </RootLayout>
   )

www/packages/tailwind/base.tailwind.config.js

@@ -309,7 +309,8 @@ module.exports = {
         "inner-content-xxl": "640px",
         "inner-content-xxxl": "640px",
         // wide layout
-        "wide-content": "1112px",
+        "xl-wide-content": "1112px",
+        "lg-wide-content": "800px",
       },
       minWidth: {
         xl: "1419px",