@ubx/docs-ui 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PageShell.d.ts +23 -1
- package/dist/PageShell.js +12 -5
- package/package.json +1 -1
package/dist/PageShell.d.ts
CHANGED
|
@@ -27,6 +27,28 @@ export type PageShellProps = {
|
|
|
27
27
|
* both, and leaving it configurable would just re-open the drift.
|
|
28
28
|
*/
|
|
29
29
|
searchPlaceholder?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Where the search box goes.
|
|
32
|
+
*
|
|
33
|
+
* "header" is right for a content page: search is a persistent tool
|
|
34
|
+
* next to the theme toggle, out of the way of the page's own subject.
|
|
35
|
+
* "hero" is right for a landing page, where search IS the subject and
|
|
36
|
+
* the page has room to say so.
|
|
37
|
+
*
|
|
38
|
+
* A prop on the shell rather than two different pages assembling it,
|
|
39
|
+
* because the difference is one of arrangement, not of components.
|
|
40
|
+
* Both placements use the same GlobalSearch and the same tokens.
|
|
41
|
+
*/
|
|
42
|
+
searchPlacement?: "header" | "hero";
|
|
43
|
+
/**
|
|
44
|
+
* Heading and lede, rendered above a hero search box.
|
|
45
|
+
*
|
|
46
|
+
* Only meaningful with searchPlacement "hero": the search sits between
|
|
47
|
+
* the intro and `children`, and the shell cannot slot itself into the
|
|
48
|
+
* middle of content it does not own. On a header-search page put the
|
|
49
|
+
* heading in `children` as normal.
|
|
50
|
+
*/
|
|
51
|
+
intro?: React.ReactNode;
|
|
30
52
|
/** Footer identity. Required for the reason stated on Footer itself. */
|
|
31
53
|
footer: {
|
|
32
54
|
tagline: React.ReactNode;
|
|
@@ -37,7 +59,7 @@ export type PageShellProps = {
|
|
|
37
59
|
};
|
|
38
60
|
children: React.ReactNode;
|
|
39
61
|
};
|
|
40
|
-
export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, footer, children, }: PageShellProps): React.JSX.Element;
|
|
62
|
+
export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, footer, children, }: PageShellProps): React.JSX.Element;
|
|
41
63
|
/**
|
|
42
64
|
* Sets data-theme from localStorage before paint.
|
|
43
65
|
*
|
package/dist/PageShell.js
CHANGED
|
@@ -3,12 +3,19 @@ import { Header } from "./Header";
|
|
|
3
3
|
import { Footer } from "./Footer";
|
|
4
4
|
import { GlobalSearch } from "./GlobalSearch";
|
|
5
5
|
import { MobileSidebarToggle } from "./MobileSidebarToggle";
|
|
6
|
-
/**
|
|
7
|
-
const
|
|
6
|
+
/** Compact, for sitting beside the theme toggle. */
|
|
7
|
+
const HEADER_SEARCH_CLASS = "w-full rounded-full bg-field px-4 py-1.5 text-sm text-foreground outline-none " +
|
|
8
8
|
"placeholder:text-foreground-muted focus:ring-2 focus:ring-primary/30";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
/** Full size, for a landing page where search is the point. */
|
|
10
|
+
const HERO_SEARCH_CLASS = "w-full rounded-full bg-field px-5 py-3 text-base text-foreground outline-none " +
|
|
11
|
+
"placeholder:text-foreground-muted focus:ring-2 focus:ring-primary/30";
|
|
12
|
+
export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, footer, children, }) {
|
|
13
|
+
const headerSearch = searchPlaceholder && searchPlacement === "header" ? (_jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HEADER_SEARCH_CLASS })) : undefined;
|
|
14
|
+
const heroSearch = searchPlaceholder && searchPlacement === "hero" ? (_jsx("div", { className: "mx-auto mt-8 max-w-xl", children: _jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HERO_SEARCH_CLASS }) })) : null;
|
|
15
|
+
return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, mobileMenu: sidebar ? (_jsx(MobileSidebarToggle, { label: sidebarLabel, children: sidebar })) : undefined }), sidebar ? (
|
|
16
|
+
// No intro or hero search here on purpose: a page with a sidebar
|
|
17
|
+
// is a content page, and a hero belongs to a landing page.
|
|
18
|
+
_jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-1 gap-10 px-6 py-10", children: [_jsx("aside", { className: "hidden w-64 shrink-0 lg:block", children: sidebar }), _jsx("main", { className: "min-w-0 flex-1", children: children })] })) : (_jsxs("main", { className: "mx-auto w-full max-w-7xl flex-1 px-6 py-12", children: [intro, heroSearch, children] })), _jsx(Footer, { tagline: footer.tagline, links: footer.links })] }));
|
|
12
19
|
}
|
|
13
20
|
/**
|
|
14
21
|
* Sets data-theme from localStorage before paint.
|
package/package.json
CHANGED