From 43202dde0fa8b51d3dd8e184ce978018b0f888ca Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Tue, 20 Aug 2024 15:47:53 +0300 Subject: [PATCH] docs: redesign footer (#8651) --- www/apps/api-reference/app/_mdx/admin.mdx | 10 +++ www/apps/api-reference/app/_mdx/store.mdx | 14 ++++ www/apps/book/app/layout.tsx | 4 +- www/apps/resources/app/layout.tsx | 6 +- .../src/components/DottedSeparator/index.tsx | 26 +++++++ .../src/components/EditButton/index.tsx | 19 +++-- .../docs-ui/src/components/Feedback/index.tsx | 76 ++++++++++++++----- .../NavigationDropdown/Menu/Item/index.tsx | 4 +- .../src/components/Sidebar/Item/index.tsx | 6 +- .../components/Sidebar/Separator/index.tsx | 22 ------ .../src/components/Sidebar/Top/index.tsx | 6 +- .../docs-ui/src/components/Sidebar/index.tsx | 5 +- www/packages/docs-ui/src/components/index.ts | 1 + www/packages/docs-ui/src/layouts/root.tsx | 2 + www/packages/docs-ui/src/layouts/tight.tsx | 4 + www/packages/docs-ui/src/layouts/wide.tsx | 6 +- www/packages/tailwind/base.tailwind.config.js | 3 +- 17 files changed, 150 insertions(+), 64 deletions(-) create mode 100644 www/packages/docs-ui/src/components/DottedSeparator/index.tsx delete mode 100644 www/packages/docs-ui/src/components/Sidebar/Separator/index.tsx diff --git a/www/apps/api-reference/app/_mdx/admin.mdx b/www/apps/api-reference/app/_mdx/admin.mdx index 14ae72f9ea..8cdab71890 100644 --- a/www/apps/api-reference/app/_mdx/admin.mdx +++ b/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} /> @@ -166,6 +168,8 @@ fetch(`/admin/products`, { }} reportLink={formatReportLink("admin", "Authentication - Cookie Session ID")} pathName="/api/admin" + question="Was this section helpful?" + vertical={true} /> @@ -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} /> @@ -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} /> @@ -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} /> \ No newline at end of file diff --git a/www/apps/api-reference/app/_mdx/store.mdx b/www/apps/api-reference/app/_mdx/store.mdx index e9d368fab5..4cb87c070d 100644 --- a/www/apps/api-reference/app/_mdx/store.mdx +++ b/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} /> @@ -136,6 +138,8 @@ fetch(`/store/products`, { }} reportLink={formatReportLink("store", "Authentication - Cookie Session ID")} pathName="/api/store" + question="Was this section helpful?" + vertical={true} /> @@ -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} /> @@ -204,6 +210,8 @@ x-no-compression: true }} reportLink={formatReportLink("store", "HTTP Compression")} pathName="/api/store" + question="Was this section helpful?" + vertical={true} /> @@ -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} /> @@ -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} /> @@ -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} /> \ No newline at end of file diff --git a/www/apps/book/app/layout.tsx b/www/apps/book/app/layout.tsx index e8ffa61972..13c157f552 100644 --- a/www/apps/book/app/layout.tsx +++ b/www/apps/book/app/layout.tsx @@ -43,10 +43,10 @@ export default function RootLayout({ }} showPagination={true} bodyClassName={clsx(inter.variable, robotoMono.variable)} + feedbackComponent={} + editComponent={} > {children} - - ) } diff --git a/www/apps/resources/app/layout.tsx b/www/apps/resources/app/layout.tsx index 3147e4e014..795717e2fc 100644 --- a/www/apps/resources/app/layout.tsx +++ b/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={} + editComponent={} > {children} - - ) } diff --git a/www/packages/docs-ui/src/components/DottedSeparator/index.tsx b/www/packages/docs-ui/src/components/DottedSeparator/index.tsx new file mode 100644 index 0000000000..f8011455fc --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/www/packages/docs-ui/src/components/EditButton/index.tsx b/www/packages/docs-ui/src/components/EditButton/index.tsx index efd04b4dee..877fa05e23 100644 --- a/www/packages/docs-ui/src/components/EditButton/index.tsx +++ b/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 ( - + + Edit this page + + ) } diff --git a/www/packages/docs-ui/src/components/Feedback/index.tsx b/www/packages/docs-ui/src/components/Feedback/index.tsx index 0492a3bf46..d518c3cee0 100644 --- a/www/packages/docs-ui/src/components/Feedback/index.tsx +++ b/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 ( -
+
+ - +
{reportLink && ( - )}
@@ -259,6 +298,7 @@ export const Feedback = ({ +
) } diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx index 045e8c7bdc..10e0085428 100644 --- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx +++ b/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 + return case "link": return ( - {hasNextItems && } + {hasNextItems && } ) case "sub-category": @@ -32,6 +32,6 @@ export const SidebarItem = ({ case "link": return case "separator": - return + return } } diff --git a/www/packages/docs-ui/src/components/Sidebar/Separator/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Separator/index.tsx deleted file mode 100644 index f580ddfdc5..0000000000 --- a/www/packages/docs-ui/src/components/Sidebar/Separator/index.tsx +++ /dev/null @@ -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 ( -
- -
- ) -} diff --git a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx index 75909e9680..95c5c74623 100644 --- a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx +++ b/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( {parentItem && ( <> - + )} - +
) diff --git a/www/packages/docs-ui/src/components/Sidebar/index.tsx b/www/packages/docs-ui/src/components/Sidebar/index.tsx index e6f2332455..204da4b798 100644 --- a/www/packages/docs-ui/src/components/Sidebar/index.tsx +++ b/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} /> ))} - + {/* DESKTOP SIDEBAR */}
diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts index 06f5c1cdef..7e97501834 100644 --- a/www/packages/docs-ui/src/components/index.ts +++ b/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" diff --git a/www/packages/docs-ui/src/layouts/root.tsx b/www/packages/docs-ui/src/layouts/root.tsx index 42d0134702..18a523846b 100644 --- a/www/packages/docs-ui/src/layouts/root.tsx +++ b/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 = ({ diff --git a/www/packages/docs-ui/src/layouts/tight.tsx b/www/packages/docs-ui/src/layouts/tight.tsx index f899c3a62d..d170d8b9ce 100644 --- a/www/packages/docs-ui/src/layouts/tight.tsx +++ b/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 && } + {editComponent}
) diff --git a/www/packages/docs-ui/src/layouts/wide.tsx b/www/packages/docs-ui/src/layouts/wide.tsx index 4e1e71b015..02340b9613 100644 --- a/www/packages/docs-ui/src/layouts/wide.tsx +++ b/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 = ({
{children} + {feedbackComponent} {showPagination && } + {editComponent}
) diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js index b96335d147..f43e7c03d0 100644 --- a/www/packages/tailwind/base.tailwind.config.js +++ b/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",