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

docs: added show/hide sidebar button (#4150)

Browse Source 
* docs: added show/hide sidebar button

* added check for browser

* fix build error

* solve build errors
This commit is contained in:
Shahed Nasser
2023-05-22 19:44:50 +03:00
committed by GitHub
parent 0476f52519
commit 87444488b5
29 changed files with 589 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/docs/src/components/LargeCard/index.tsx
+8 -12
View File
@@ -15,6 +15,7 @@ type LargeCardProps = {
href: string
}
isSoon?: boolean
className?: string
} & React.HTMLAttributes<HTMLDivElement>
const LargeCard: React.FC<LargeCardProps> = ({
@@ -23,26 +24,21 @@ const LargeCard: React.FC<LargeCardProps> = ({
title,
action: { href },
isSoon = false,
className = "",
children,
}) => {
return (
<article
className={clsx(
"tw-group tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark",
"tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded",
"tw-pt-6 tw-pb-1 tw-px-1 tw-mb-2",
"tw-rounded",
"tw-p-1 !tw-pb-1.5 tw-shadow-card-rest dark:tw-shadow-card-rest-dark",
"tw-flex tw-flex-col tw-justify-between tw-relative",
"before:tw-content-[''] before:tw-absolute before:tw-left-0 before:tw-w-full before:tw-rounded before:tw-z-[1] before:tw-h-8 before:tw-top-0",
"before:tw-bg-large-card dark:before:tw-bg-large-card-dark before:tw-bg-docs-bg-surface dark:before:tw-bg-docs-bg-surface-dark",
"[&:nth-child(3n+1):before]:tw-bg-[2%_52%] [&:nth-child(3n+2):before]:tw-bg-[19%_16%] [&:nth-child(3n+3):before]:tw-bg-[17%_50%]",
"after:tw-content-[''] after:tw-absolute after:tw-left-0 after:tw-w-full after:tw-rounded",
"after:tw-z-[2] after:tw-left-0 after:tw-top-4 after:tw-height-4 after:tw-bg-large-card-fade dark:after:tw-bg-large-card-fade-dark",
!isSoon &&
"hover:after:tw-bg-large-card-fade-hover dark:hover:after:tw-bg-large-card-fade-hover",
!isSoon &&
"hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark",
!isSoon &&
"hover:before:tw-bg-medusa-bg-subtle-hover dark:hover:before:tw-bg-medusa-bg-base-hover-dark"
"hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark hover:tw-shadow-card-hover dark:hover:tw-shadow-card-hover-dark",
"large-card",
className
)}
>
<div className={clsx("tw-z-[3]")}>
@@ -60,7 +56,7 @@ const LargeCard: React.FC<LargeCardProps> = ({
iconWrapperClassName="tw-p-[6px]"
/>
)}
<div className="tw-mb-0.5">
<div className="tw-mb-[4px]">
<span
className={clsx(
isSoon &&
www/docs/src/components/LargeCardList/index.tsx
+10 -1
View File
@@ -12,7 +12,16 @@ const LargeCardList: React.FC<LargeCardListProps> = ({
children,
}) => {
return (
<section className={clsx("cards-grid", `grid-${colSize}`, className)}>
<section
className={clsx(
"cards-grid",
`grid-${colSize}`,
"tw-gap-1",
"[&+*:not(.large-card)]:tw-mt-2",
"[&+.large-card]:tw-mt-1",
className
)}
>
{children}
</section>
)
www/docs/src/components/Navbar/Actions/index.tsx
+35 -10
View File
@@ -6,27 +6,32 @@ import clsx from "clsx"
type NavbarActionsProps = {
items: NavbarAction[]
className?: string
} & React.HTMLAttributes<HTMLDivElement>
const NavbarActions: React.FC<NavbarActionsProps> = ({ items = [] }) => {
const NavbarActions: React.FC<NavbarActionsProps> = ({
items = [],
className = "",
}) => {
return (
<div className="lg:tw-block tw-hidden">
<div className={clsx("lg:tw-block tw-hidden", className)}>
{items.map((item, index) => {
// eslint-disable-next-line no-case-declarations
const ItemIcon = item.icon ? Icon[item.icon] : null
switch (item.type) {
case "link":
// eslint-disable-next-line no-case-declarations
const ItemIcon = item.icon ? Icon[item.icon] : null
return (
<Tooltip text={item.title} key={index}>
<Tooltip
text={item.title}
html={item.html}
key={index}
tooltipClassName="!tw-text-label-x-small-plus"
>
<a
href={item.href}
title={item.title}
// className={`${ItemIcon ? "navbar-link-icon" : ""} ${
// item.className || ""
// }`}
className={clsx(
ItemIcon &&
"tw-bg-medusa-button-secondary dark:tw-bg-medusa-button-secondary-dark tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded tw-w-2 tw-h-2 tw-flex tw-justify-center tw-items-center hover:tw-bg-medusa-button-secondary-hover dark:hover:tw-bg-medusa-button-secondary-hover-dark",
ItemIcon && "navbar-action-icon-item",
item.className
)}
>
@@ -35,6 +40,26 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({ items = [] }) => {
</a>
</Tooltip>
)
case "button":
return (
<Tooltip
text={item.title}
html={item.html}
key={index}
tooltipClassName="!tw-text-label-x-small-plus"
>
<button
className={clsx(
ItemIcon && "navbar-action-icon-item",
item.className
)}
{...item.events}
>
{item.label}
{ItemIcon && <ItemIcon />}
</button>
</Tooltip>
)
default:
return <></>
}
www/docs/src/components/Tooltip/index.tsx
+5 -3
View File
@@ -5,15 +5,17 @@ import uuid from "react-uuid"
import "react-tooltip/dist/react-tooltip.css"
type TooltipProps = {
text: string
text?: string
tooltipClassName?: string
html?: string
} & React.HTMLAttributes<HTMLSpanElement> &
ITooltip
const Tooltip: React.FC<TooltipProps> = ({
text,
text = "",
tooltipClassName = "",
children,
html = "",
}) => {
const [elementId, setElementId] = useState(null)
@@ -25,7 +27,7 @@ const Tooltip: React.FC<TooltipProps> = ({
return (
<>
<span id={elementId} data-tooltip-content={text}>
<span id={elementId} data-tooltip-content={text} data-tooltip-html={html}>
{children}
</span>
<ReactTooltip