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

docs: redesign vertical tabs (#8673)

Browse Source
This commit is contained in:
Shahed Nasser
2024-08-20 15:48:09 +03:00
committed by GitHub
parent 43202dde0f
commit 48fe819d9e
3 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
www/apps/book/app/advanced-development/modules/remote-query/page.mdx
View File

@@ -1,4 +1,4 @@
import { TypeList, Tabs, TabsList, TabsTrigger, TabsContent, TabsContentWrapper } from "docs-ui"
import { TypeList, Tabs, TabsList, TabsTriggerVertical, TabsContent, TabsContentWrapper } from "docs-ui"
export const metadata = {
title: `${pageNumber} Remote Query`,
@@ -242,10 +242,10 @@ The remote query function alternatively accepts a string with GraphQL syntax as
<Tabs defaultValue="basic" layoutType="vertical" className="mt-2">
<TabsList>
<TabsTrigger value="basic">Basic Usage</TabsTrigger>
<TabsTrigger value="filters">Apply Filters</TabsTrigger>
<TabsTrigger value="sort">Sort Records</TabsTrigger>
<TabsTrigger value="pagination">Apply Pagination</TabsTrigger>
<TabsTriggerVertical value="basic">Basic Usage</TabsTriggerVertical>
<TabsTriggerVertical value="filters">Apply Filters</TabsTriggerVertical>
<TabsTriggerVertical value="sort">Sort Records</TabsTriggerVertical>
<TabsTriggerVertical value="pagination">Apply Pagination</TabsTriggerVertical>
</TabsList>
<TabsContentWrapper>
<TabsContent value="basic" className="[&_h3]:!mt-0">

18
www/apps/book/app/advanced-development/modules/service-factory/page.mdx
View File

@@ -1,4 +1,4 @@
import { Tabs, TabsContent, TabsContentWrapper, TabsList, TabsTrigger } from "docs-ui"
import { Tabs, TabsContent, TabsContentWrapper, TabsList, TabsTriggerVertical } from "docs-ui"
export const metadata = {
title: `${pageNumber} Service Factory`,
@@ -68,14 +68,14 @@ Find a complete reference of each of the methods in [this documentation](!resour
<Tabs defaultValue="listMyCustoms" layoutType="vertical" className="mt-2">
<TabsList>
<TabsTrigger value="listMyCustoms">listMyCustoms</TabsTrigger>
<TabsTrigger value="listAndCountMyCustoms">listAndCountMyCustoms</TabsTrigger>
<TabsTrigger value="retrieveMyCustom">retrieveMyCustom</TabsTrigger>
<TabsTrigger value="createMyCustoms">createMyCustoms</TabsTrigger>
<TabsTrigger value="updateMyCustoms">updateMyCustoms</TabsTrigger>
<TabsTrigger value="deleteMyCustoms">deleteMyCustoms</TabsTrigger>
<TabsTrigger value="softDeleteMyCustoms">softDeleteMyCustoms</TabsTrigger>
<TabsTrigger value="restoreMyCustoms">restoreMyCustoms</TabsTrigger>
<TabsTriggerVertical value="listMyCustoms">listMyCustoms</TabsTriggerVertical>
<TabsTriggerVertical value="listAndCountMyCustoms">listAndCount</TabsTriggerVertical>
<TabsTriggerVertical value="retrieveMyCustom">retrieveMyCustom</TabsTriggerVertical>
<TabsTriggerVertical value="createMyCustoms">createMyCustoms</TabsTriggerVertical>
<TabsTriggerVertical value="updateMyCustoms">updateMyCustoms</TabsTriggerVertical>
<TabsTriggerVertical value="deleteMyCustoms">deleteMyCustoms</TabsTriggerVertical>
<TabsTriggerVertical value="softDeleteMyCustoms">softDeleteMyCustoms</TabsTriggerVertical>
<TabsTriggerVertical value="restoreMyCustoms">restoreMyCustoms</TabsTriggerVertical>
</TabsList>
<TabsContentWrapper className="[&_h3]:!mt-0">
<TabsContent value="listMyCustoms">

21
www/packages/docs-ui/src/components/Tabs/index.tsx
View File

@@ -4,6 +4,7 @@ import React from "react"
import { Tabs as UiTabs } from "@medusajs/ui"
import { ComponentProps } from "react"
import clsx from "clsx"
import { EllipseMiniSolid } from "@medusajs/icons"
type TabsProps = ComponentProps<typeof UiTabs> & {
layoutType?: "horizontal" | "vertical"
@@ -22,6 +23,7 @@ export const Tabs = ({
"flex gap-docs_1",
"[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start",
"[&_[role=tablist]+*]:flex-1 [&_[role=tablist]+*]:!mt-0",
"[&_[role=tablist]+*]:w-3/4 [&_[role=tablist]]:w-1/4",
]
)}
/>
@@ -48,6 +50,25 @@ export const TabsTrigger = ({
/>
)
export const TabsTriggerVertical = ({
className,
children,
...props
}: ComponentProps<typeof UiTabs.Trigger>) => (
<UiTabs.Trigger
{...props}
className={clsx(
className,
"px-docs_0.5 py-docs_0.25 !text-medusa-fg-base text-compact-small data-[state=active]:!text-compact-small-plus",
"[&[data-state=active]_svg]:!visible hover:!bg-medusa-bg-base-hover rounded-docs_DEFAULT",
"!shadow-none"
)}
>
<EllipseMiniSolid className="invisible" />
{children}
</UiTabs.Trigger>
)
type TabsContentWrapperProps = {
className?: string
children: React.ReactNode