@wallarm-org/design-system 0.50.0 → 0.50.1
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/components/Logo/Logo.js +1 -1
- package/dist/components/Page/Page.d.ts +1 -0
- package/dist/components/Page/Page.js +2 -2
- package/dist/components/Page/PageActions.js +1 -1
- package/dist/components/Page/PageHeader.d.ts +1 -0
- package/dist/components/Page/PageHeader.js +2 -2
- package/dist/components/TopHeader/TopHeader.js +1 -1
- package/dist/components/TopHeader/TopHeaderLogo.js +1 -1
- package/dist/metadata/components.json +18 -4
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@ const Logo = ({ ref, type = 'full', color = 'default', size = 'lg', className, .
|
|
|
35
35
|
}),
|
|
36
36
|
('wordmark' === type || 'full' === type) && /*#__PURE__*/ jsx("g", {
|
|
37
37
|
className: WORDMARK_COLOR[color],
|
|
38
|
-
transform: 'full' === type ? 'translate(
|
|
38
|
+
transform: 'full' === type ? 'translate(44, 0)' : void 0,
|
|
39
39
|
children: /*#__PURE__*/ jsx(LogoWordmarkPath, {})
|
|
40
40
|
})
|
|
41
41
|
]
|
|
@@ -3,7 +3,7 @@ import { useEffect } from "react";
|
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { TestIdProvider } from "../../utils/testId.js";
|
|
5
5
|
import { usePageHost } from "./PageHostContext.js";
|
|
6
|
-
const Page = ({ ref, name, title, fullSize, fixedHeight, children, className, 'data-testid': testId, ...props })=>{
|
|
6
|
+
const Page = ({ ref, name, title, fullSize, fixedHeight, contained, children, className, 'data-testid': testId, ...props })=>{
|
|
7
7
|
const host = usePageHost();
|
|
8
8
|
useEffect(()=>{
|
|
9
9
|
host?.setLayout({
|
|
@@ -28,7 +28,7 @@ const Page = ({ ref, name, title, fullSize, fixedHeight, children, className, 'd
|
|
|
28
28
|
ref: ref,
|
|
29
29
|
"data-testid": testId,
|
|
30
30
|
"data-slot": "page",
|
|
31
|
-
className: cn('flex flex-col', fixedHeight && 'h-full', className),
|
|
31
|
+
className: cn('flex flex-col', fixedHeight && 'h-full', contained && 'max-h-screen max-w-screen overflow-auto overscroll-none [scrollbar-width:thin]', className),
|
|
32
32
|
children: children
|
|
33
33
|
})
|
|
34
34
|
]
|
|
@@ -8,7 +8,7 @@ const PageActions = ({ ref, children, className, ...props })=>{
|
|
|
8
8
|
ref: ref,
|
|
9
9
|
"data-testid": testId,
|
|
10
10
|
"data-slot": "page-actions",
|
|
11
|
-
className: cn('flex items-center gap-8 shrink-0', className),
|
|
11
|
+
className: cn('flex items-center gap-8 shrink-0 ml-auto', className),
|
|
12
12
|
children: children
|
|
13
13
|
});
|
|
14
14
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../../utils/cn.js";
|
|
3
3
|
import { useTestId } from "../../utils/testId.js";
|
|
4
|
-
const PageHeader = ({ ref, children, className, ...props })=>{
|
|
4
|
+
const PageHeader = ({ ref, sticky, children, className, ...props })=>{
|
|
5
5
|
const testId = useTestId('header');
|
|
6
6
|
return /*#__PURE__*/ jsx("div", {
|
|
7
7
|
...props,
|
|
8
8
|
ref: ref,
|
|
9
9
|
"data-testid": testId,
|
|
10
10
|
"data-slot": "page-header",
|
|
11
|
-
className: cn('flex items-center
|
|
11
|
+
className: cn('flex items-center px-24 py-16 gap-12', sticky && 'sticky top-0 z-10 bg-bg-primary', className),
|
|
12
12
|
children: children
|
|
13
13
|
});
|
|
14
14
|
};
|
|
@@ -8,7 +8,7 @@ const TopHeader = ({ ref, className, children, 'data-testid': testId, ...props }
|
|
|
8
8
|
ref: ref,
|
|
9
9
|
"data-slot": "top-header",
|
|
10
10
|
"data-testid": testId,
|
|
11
|
-
className: cn('flex items-center justify-between
|
|
11
|
+
className: cn('flex items-center justify-between pl-8 pr-12 py-6', className),
|
|
12
12
|
children: children
|
|
13
13
|
})
|
|
14
14
|
});
|
|
@@ -10,7 +10,7 @@ const TopHeaderLogo = ({ ref, asChild = false, className, children, ...props })=
|
|
|
10
10
|
ref: ref,
|
|
11
11
|
"data-slot": "top-header-logo",
|
|
12
12
|
"data-testid": testId,
|
|
13
|
-
className: cn('flex items-center gap-
|
|
13
|
+
className: cn('overlay inline-flex items-center gap-6 rounded-6 px-7 py-4 text-sm font-semibold outline-none transition-colors', 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
|
|
14
14
|
children: children
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-05-
|
|
2
|
+
"version": "0.50.0",
|
|
3
|
+
"generatedAt": "2026-05-28T20:17:11.602Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -4436,7 +4436,7 @@
|
|
|
4436
4436
|
"examples": [
|
|
4437
4437
|
{
|
|
4438
4438
|
"name": "Basic",
|
|
4439
|
-
"code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [loading, setLoading] = useState(true);\n const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n return (\n <AppShell>\n <AppShellHeader>\n <TopHeader>\n <TopHeaderLogo href='/'>\n <Logo
|
|
4439
|
+
"code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [loading, setLoading] = useState(true);\n const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n return (\n <AppShell>\n <AppShellHeader>\n <TopHeader>\n <TopHeaderLogo href='/'>\n <Logo className='h-[15px]' />\n </TopHeaderLogo>\n\n <TopHeaderActions>\n {loading ? (\n <>\n <Skeleton width='150px' height='20px' rounded={6} />\n <TopHeaderSeparator />\n <Skeleton width='150px' height='20px' rounded={6} />\n </>\n ) : (\n <>\n <Button\n variant='ghost'\n size='small'\n color='neutral'\n className='p-4 gap-6 rounded-6'\n >\n <Code size='s' color='secondary'>\n Search Wallarm\n </Code>\n <Kbd size='xsmall'>⌘ K</Kbd>\n </Button>\n\n <TopHeaderSeparator />\n\n <Button variant='ghost' size='small' color='neutral' className='py-4 rounded-6'>\n <Text size='xs' weight='medium'>\n Tenant Name\n </Text>\n <span className='text-text-tertiary mx-[-2px]'>•</span>\n <Code size='s' color='secondary'>\n 12345\n </Code>\n <ChevronUpDown className='!icon-sm' />\n </Button>\n </>\n )}\n\n <Tooltip>\n <TooltipTrigger asChild>\n <Button variant='ghost' size='small' color='neutral' aria-label='Wallarm Updates'>\n <Bell />\n </Button>\n </TooltipTrigger>\n <TooltipContent>Wallarm updates</TooltipContent>\n </Tooltip>\n\n <QuickHelpDropdown />\n </TopHeaderActions>\n </TopHeader>\n </AppShellHeader>\n\n <AppShellRail>\n <NavRail collapsed={collapsed}>\n <NavRailBody>\n <NavRailItem\n icon={Home}\n label='Home'\n shortcut={['G', 'H']}\n active={activeProduct === 'home'}\n onClick={() => navigateToProduct('home')}\n />\n <RecentDropdown />\n\n <NavRailSeparator />\n\n {loading ? (\n <NavRailSkeleton />\n ) : (\n <>\n <NavRailItem\n icon={CircleDashed}\n label='Edge'\n shortcut={['G', 'E']}\n active={activeProduct === 'edge'}\n onClick={() => navigateToProduct('edge')}\n />\n <NavRailItem\n icon={CircleDashed}\n label='AI Hypervisor'\n shortcut={['G', 'A']}\n active={activeProduct === 'ai-hypervisor'}\n onClick={() => navigateToProduct('ai-hypervisor')}\n />\n <NavRailItem\n icon={CircleDashed}\n label='Infra Discovery'\n shortcut={['G', 'I']}\n active={activeProduct === 'infra-discovery'}\n onClick={() => navigateToProduct('infra-discovery')}\n />\n <NavRailItem\n icon={CircleDashed}\n label='Security Testing'\n shortcut={['G', 'T']}\n active={activeProduct === 'security-testing'}\n onClick={() => navigateToProduct('security-testing')}\n />\n </>\n )}\n </NavRailBody>\n\n <NavRailFooter>\n <NavRailItem\n icon={Settings}\n label='Settings'\n shortcut={['G', 'S']}\n active={activeProduct === 'settings'}\n onClick={() => navigateToProduct('settings')}\n />\n <AccountDropdown\n sidebarMode={sidebarMode}\n onSidebarModeChange={setSidebarMode}\n theme={theme}\n onThemeChange={setTheme}\n />\n </NavRailFooter>\n </NavRail>\n </AppShellRail>\n\n <AppShellRemote>\n <div className='absolute top-4 right-4 z-10'>\n <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n {loading ? 'Finish loading' : 'Start loading'}\n </Button>\n </div>\n\n <RemoteForProduct product={activeProduct} />\n </AppShellRemote>\n </AppShell>\n );\n}"
|
|
4440
4440
|
}
|
|
4441
4441
|
]
|
|
4442
4442
|
},
|
|
@@ -30743,6 +30743,11 @@
|
|
|
30743
30743
|
"type": "boolean | undefined",
|
|
30744
30744
|
"required": false
|
|
30745
30745
|
},
|
|
30746
|
+
{
|
|
30747
|
+
"name": "contained",
|
|
30748
|
+
"type": "boolean | undefined",
|
|
30749
|
+
"required": false
|
|
30750
|
+
},
|
|
30746
30751
|
{
|
|
30747
30752
|
"name": "defaultChecked",
|
|
30748
30753
|
"type": "boolean | undefined",
|
|
@@ -31573,6 +31578,11 @@
|
|
|
31573
31578
|
{
|
|
31574
31579
|
"name": "PageHeader",
|
|
31575
31580
|
"props": [
|
|
31581
|
+
{
|
|
31582
|
+
"name": "sticky",
|
|
31583
|
+
"type": "boolean | undefined",
|
|
31584
|
+
"required": false
|
|
31585
|
+
},
|
|
31576
31586
|
{
|
|
31577
31587
|
"name": "defaultChecked",
|
|
31578
31588
|
"type": "boolean | undefined",
|
|
@@ -32124,7 +32134,11 @@
|
|
|
32124
32134
|
"examples": [
|
|
32125
32135
|
{
|
|
32126
32136
|
"name": "Basic",
|
|
32127
|
-
"code": "() => {\n return (\n <Page name='full-featured' fullSize>\n <PageHeader>\n <PageTitle>Page title</PageTitle>\n\n <PageActions>\n <Button variant='secondary' color='neutral' size='small'>\n Export\n </Button>\n <Button size='small'>Settings</Button>\n </PageActions>\n </PageHeader>\n\n <PageContent>\n <p>Full-featured page with header actions, tabs (including disabled), and content area.</p>\n </PageContent>\n </Page>\n );\n}"
|
|
32137
|
+
"code": "() => {\n return (\n <Page name='full-featured' fullSize fixedHeight>\n <PageHeader>\n <PageTitle>Page title</PageTitle>\n\n <Badge>1000</Badge>\n\n <PageActions>\n <Button variant='secondary' color='neutral' size='small'>\n Export\n </Button>\n <Button size='small'>Settings</Button>\n </PageActions>\n </PageHeader>\n\n <PageContent>\n <p>Full-featured page with header actions, tabs (including disabled), and content area.</p>\n </PageContent>\n </Page>\n );\n}"
|
|
32138
|
+
},
|
|
32139
|
+
{
|
|
32140
|
+
"name": "StickyHeader",
|
|
32141
|
+
"code": "() => {\n return (\n <Page name='sticky-header' contained>\n <PageHeader sticky>\n <PageTitle>Sticky header</PageTitle>\n\n <PageActions>\n <Button variant='secondary' color='neutral' size='small'>\n Export\n </Button>\n <Button size='small'>Settings</Button>\n </PageActions>\n </PageHeader>\n\n <PageContent>\n {Array.from({ length: 40 }, (_, i) => (\n <p key={`row-${i + 1}`} className='py-8'>\n Content row {i + 1}\n </p>\n ))}\n </PageContent>\n </Page>\n );\n}"
|
|
32128
32142
|
}
|
|
32129
32143
|
]
|
|
32130
32144
|
},
|