asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: redesign footer (#8651)

Browse Source
This commit is contained in:
Shahed Nasser
2024-08-20 14:47:53 +02:00
committed by GitHub
parent b8ba020cd5
commit 43202dde0f
17 changed files with 150 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/packages/docs-ui/src/components/DottedSeparator/index.tsx
+26
View File
@@ -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
+13 -6
View File
@@ -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
+58 -18
View File
@@ -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
+2 -2
View File
@@ -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
+3 -3
View File
@@ -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
-22
View File
@@ -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 -3
View File
@@ -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
+2 -3
View File
@@ -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
+1
View File
@@ -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"