@wallarm-org/design-system 0.30.0 → 0.31.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/components/Attribute/Attribute.d.ts +7 -0
- package/dist/components/Attribute/Attribute.js +18 -23
- package/dist/components/Attribute/AttributeLabel.d.ts +6 -0
- package/dist/components/Attribute/AttributeLabel.js +16 -2
- package/dist/components/Attribute/AttributeLoading.d.ts +2 -0
- package/dist/components/Attribute/AttributeLoading.js +29 -0
- package/dist/components/Attribute/AttributeOrientationContext.d.ts +3 -0
- package/dist/components/Attribute/AttributeOrientationContext.js +5 -0
- package/dist/components/Attribute/AttributeValue.js +4 -1
- package/dist/components/Flex/Flex.d.ts +2 -2
- package/dist/components/InputGroup/InputGroupAddon.d.ts +1 -1
- package/dist/components/SimpleCharts/BarList/classes.d.ts +1 -1
- package/dist/components/Stack/Stack.d.ts +2 -2
- package/dist/metadata/components.json +42 -4
- package/package.json +1 -1
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
2
|
import { type TestableProps } from '../../utils/testId';
|
|
3
|
+
import { type AttributeOrientation } from './AttributeOrientationContext';
|
|
3
4
|
export interface AttributeProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
|
|
4
5
|
ref?: Ref<HTMLDivElement>;
|
|
5
6
|
/** Show skeleton placeholders instead of children */
|
|
6
7
|
loading?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Layout direction of the label and value.
|
|
10
|
+
* - `vertical` (default): label above value
|
|
11
|
+
* - `horizontal`: label on the left, value on the right
|
|
12
|
+
*/
|
|
13
|
+
orientation?: AttributeOrientation;
|
|
7
14
|
children?: ReactNode;
|
|
8
15
|
}
|
|
9
16
|
export declare const Attribute: FC<AttributeProps>;
|
|
@@ -1,30 +1,25 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../../utils/cn.js";
|
|
3
3
|
import { TestIdProvider } from "../../utils/testId.js";
|
|
4
|
-
import {
|
|
5
|
-
|
|
4
|
+
import { AttributeLoading } from "./AttributeLoading.js";
|
|
5
|
+
import { AttributeOrientationProvider } from "./AttributeOrientationContext.js";
|
|
6
|
+
const Attribute = ({ ref, loading = false, orientation = 'vertical', children, className, 'data-testid': testId, ...props })=>{
|
|
7
|
+
const isHorizontal = 'horizontal' === orientation;
|
|
8
|
+
return /*#__PURE__*/ jsx(TestIdProvider, {
|
|
6
9
|
value: testId,
|
|
7
|
-
children: /*#__PURE__*/ jsx(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
rounded: 6
|
|
19
|
-
}),
|
|
20
|
-
/*#__PURE__*/ jsx(Skeleton, {
|
|
21
|
-
width: "100%",
|
|
22
|
-
height: "24px",
|
|
23
|
-
rounded: 6
|
|
24
|
-
})
|
|
25
|
-
]
|
|
26
|
-
}) : children
|
|
10
|
+
children: /*#__PURE__*/ jsx(AttributeOrientationProvider, {
|
|
11
|
+
value: orientation,
|
|
12
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
13
|
+
...props,
|
|
14
|
+
ref: ref,
|
|
15
|
+
"data-testid": testId,
|
|
16
|
+
"data-slot": "attribute",
|
|
17
|
+
"data-orientation": orientation,
|
|
18
|
+
className: cn(isHorizontal ? 'flex flex-row items-start gap-4' : 'flex flex-col', className),
|
|
19
|
+
children: loading ? /*#__PURE__*/ jsx(AttributeLoading, {}) : children
|
|
20
|
+
})
|
|
27
21
|
})
|
|
28
22
|
});
|
|
23
|
+
};
|
|
29
24
|
Attribute.displayName = 'Attribute';
|
|
30
25
|
export { Attribute };
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
2
|
export interface AttributeLabelProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
ref?: Ref<HTMLDivElement>;
|
|
4
|
+
/**
|
|
5
|
+
* Width of the label cell in horizontal orientation, in pixels.
|
|
6
|
+
* Defaults to MIN_LABEL_WIDTH. Clamped to [MIN_LABEL_WIDTH, MAX_LABEL_WIDTH].
|
|
7
|
+
* Ignored in vertical orientation.
|
|
8
|
+
*/
|
|
9
|
+
width?: number;
|
|
4
10
|
children?: ReactNode;
|
|
5
11
|
}
|
|
6
12
|
export declare const AttributeLabel: FC<AttributeLabelProps>;
|
|
@@ -1,14 +1,28 @@
|
|
|
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
|
-
|
|
4
|
+
import { useAttributeOrientation } from "./AttributeOrientationContext.js";
|
|
5
|
+
const MIN_LABEL_WIDTH = 100;
|
|
6
|
+
const MAX_LABEL_WIDTH = 256;
|
|
7
|
+
const HORIZONTAL_CLAMP_STYLE = {
|
|
8
|
+
minWidth: `${MIN_LABEL_WIDTH}px`,
|
|
9
|
+
maxWidth: `${MAX_LABEL_WIDTH}px`
|
|
10
|
+
};
|
|
11
|
+
const AttributeLabel = ({ ref, children, className, width = MIN_LABEL_WIDTH, style, ...props })=>{
|
|
5
12
|
const testId = useTestId('label');
|
|
13
|
+
const orientation = useAttributeOrientation();
|
|
14
|
+
const isHorizontal = 'horizontal' === orientation;
|
|
6
15
|
return /*#__PURE__*/ jsx("div", {
|
|
7
16
|
...props,
|
|
8
17
|
ref: ref,
|
|
18
|
+
style: isHorizontal ? {
|
|
19
|
+
...style,
|
|
20
|
+
...HORIZONTAL_CLAMP_STYLE,
|
|
21
|
+
width: `${width}px`
|
|
22
|
+
} : style,
|
|
9
23
|
"data-testid": testId,
|
|
10
24
|
"data-slot": "attribute-label",
|
|
11
|
-
className: cn('
|
|
25
|
+
className: cn('font-sans-display text-sm font-normal text-text-secondary', isHorizontal ? 'block py-4 shrink-0 truncate' : 'flex items-center gap-4 flex-wrap', className),
|
|
12
26
|
children: children
|
|
13
27
|
});
|
|
14
28
|
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Skeleton } from "../Skeleton/index.js";
|
|
3
|
+
import { AttributeLabel } from "./AttributeLabel.js";
|
|
4
|
+
import { useAttributeOrientation } from "./AttributeOrientationContext.js";
|
|
5
|
+
import { AttributeValue } from "./AttributeValue.js";
|
|
6
|
+
const AttributeLoading = ()=>{
|
|
7
|
+
const orientation = useAttributeOrientation();
|
|
8
|
+
const valueHeight = 'horizontal' === orientation ? '16px' : '24px';
|
|
9
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
10
|
+
children: [
|
|
11
|
+
/*#__PURE__*/ jsx(AttributeLabel, {
|
|
12
|
+
children: /*#__PURE__*/ jsx(Skeleton, {
|
|
13
|
+
width: "100px",
|
|
14
|
+
height: "16px",
|
|
15
|
+
rounded: 6
|
|
16
|
+
})
|
|
17
|
+
}),
|
|
18
|
+
/*#__PURE__*/ jsx(AttributeValue, {
|
|
19
|
+
children: /*#__PURE__*/ jsx(Skeleton, {
|
|
20
|
+
width: "100%",
|
|
21
|
+
height: valueHeight,
|
|
22
|
+
rounded: 6
|
|
23
|
+
})
|
|
24
|
+
})
|
|
25
|
+
]
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
AttributeLoading.displayName = 'AttributeLoading';
|
|
29
|
+
export { AttributeLoading };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
const AttributeOrientationContext = createContext('vertical');
|
|
3
|
+
const AttributeOrientationProvider = AttributeOrientationContext.Provider;
|
|
4
|
+
const useAttributeOrientation = ()=>useContext(AttributeOrientationContext);
|
|
5
|
+
export { AttributeOrientationProvider, useAttributeOrientation };
|
|
@@ -3,17 +3,20 @@ import { Children } from "react";
|
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { useTestId } from "../../utils/testId.js";
|
|
5
5
|
import { Text } from "../Text/index.js";
|
|
6
|
+
import { useAttributeOrientation } from "./AttributeOrientationContext.js";
|
|
6
7
|
function isEmpty(children) {
|
|
7
8
|
return null == children || false === children || 0 === Children.count(children);
|
|
8
9
|
}
|
|
9
10
|
const AttributeValue = ({ ref, children, className, ...props })=>{
|
|
10
11
|
const testId = useTestId('value');
|
|
12
|
+
const orientation = useAttributeOrientation();
|
|
13
|
+
const isHorizontal = 'horizontal' === orientation;
|
|
11
14
|
return /*#__PURE__*/ jsx("div", {
|
|
12
15
|
...props,
|
|
13
16
|
ref: ref,
|
|
14
17
|
"data-testid": testId,
|
|
15
18
|
"data-slot": "attribute-value",
|
|
16
|
-
className: cn('pt-4 min-h-[28px]
|
|
19
|
+
className: cn('flex items-center', isHorizontal ? 'flex-1 min-w-0 py-4 truncate' : 'pt-4 min-h-[28px]', className),
|
|
17
20
|
children: isEmpty(children) ? /*#__PURE__*/ jsx(Text, {
|
|
18
21
|
size: "sm",
|
|
19
22
|
color: "secondary",
|
|
@@ -3,10 +3,10 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
3
3
|
import type { TestableProps } from '../../utils/testId';
|
|
4
4
|
declare const flexVariants: (props?: ({
|
|
5
5
|
inline?: boolean | null | undefined;
|
|
6
|
-
direction?: "row" | "column" | "
|
|
6
|
+
direction?: "row" | "column" | "column-reverse" | "row-reverse" | null | undefined;
|
|
7
7
|
align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
|
|
8
8
|
justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
|
|
9
|
-
wrap?: "reverse" | "
|
|
9
|
+
wrap?: "reverse" | "nowrap" | "wrap" | null | undefined;
|
|
10
10
|
gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
11
11
|
grow?: boolean | null | undefined;
|
|
12
12
|
shrink?: boolean | null | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ComponentProps, FC } from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const inputGroupAddonVariants: (props?: ({
|
|
4
|
-
align?: "inline-
|
|
4
|
+
align?: "inline-end" | "inline-start" | null | undefined;
|
|
5
5
|
variant?: "outline" | "ghost" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export declare const InputGroupAddon: FC<ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>>;
|
|
@@ -17,7 +17,7 @@ export declare const barListItemVariants: (props?: ({
|
|
|
17
17
|
* `<BarListBar className='bg-sky-500/16' />`.
|
|
18
18
|
*/
|
|
19
19
|
export declare const barListBarVariants: (props?: ({
|
|
20
|
-
color?: "brand" | "
|
|
20
|
+
color?: "brand" | "blue" | "cyan" | "green" | "indigo" | "pink" | "purple" | "red" | "teal" | "slate" | "amber" | "rose" | null | undefined;
|
|
21
21
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
22
22
|
export declare const barListLabelClasses: string;
|
|
23
23
|
export declare const barListValueClasses: string;
|
|
@@ -3,10 +3,10 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
3
3
|
import type { TestableProps } from '../../utils/testId';
|
|
4
4
|
declare const stackVariants: (props?: ({
|
|
5
5
|
inline?: boolean | null | undefined;
|
|
6
|
-
direction?: "row" | "column" | "
|
|
6
|
+
direction?: "row" | "column" | "column-reverse" | "row-reverse" | null | undefined;
|
|
7
7
|
align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
|
|
8
8
|
justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
|
|
9
|
-
wrap?: "reverse" | "
|
|
9
|
+
wrap?: "reverse" | "nowrap" | "wrap" | null | undefined;
|
|
10
10
|
fullWidth?: boolean | null | undefined;
|
|
11
11
|
flexGrow?: boolean | null | undefined;
|
|
12
12
|
flexShrink?: boolean | null | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-04-28T07:
|
|
2
|
+
"version": "0.30.0",
|
|
3
|
+
"generatedAt": "2026-04-28T07:50:53.965Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -2073,6 +2073,13 @@
|
|
|
2073
2073
|
"description": "Show skeleton placeholders instead of children",
|
|
2074
2074
|
"defaultValue": "false"
|
|
2075
2075
|
},
|
|
2076
|
+
{
|
|
2077
|
+
"name": "orientation",
|
|
2078
|
+
"type": "AttributeOrientation | undefined",
|
|
2079
|
+
"required": false,
|
|
2080
|
+
"description": "Layout direction of the label and value.\n- `vertical` (default): label above value\n- `horizontal`: label on the left, value on the right",
|
|
2081
|
+
"defaultValue": "vertical"
|
|
2082
|
+
},
|
|
2076
2083
|
{
|
|
2077
2084
|
"name": "defaultChecked",
|
|
2078
2085
|
"type": "boolean | undefined",
|
|
@@ -3234,6 +3241,13 @@
|
|
|
3234
3241
|
{
|
|
3235
3242
|
"name": "AttributeLabel",
|
|
3236
3243
|
"props": [
|
|
3244
|
+
{
|
|
3245
|
+
"name": "width",
|
|
3246
|
+
"type": "number | undefined",
|
|
3247
|
+
"required": false,
|
|
3248
|
+
"description": "Width of the label cell in horizontal orientation, in pixels.\nDefaults to MIN_LABEL_WIDTH. Clamped to [MIN_LABEL_WIDTH, MAX_LABEL_WIDTH].\nIgnored in vertical orientation.",
|
|
3249
|
+
"defaultValue": "MIN_LABEL_WIDTH"
|
|
3250
|
+
},
|
|
3237
3251
|
{
|
|
3238
3252
|
"name": "defaultChecked",
|
|
3239
3253
|
"type": "boolean | undefined",
|
|
@@ -4367,7 +4381,7 @@
|
|
|
4367
4381
|
},
|
|
4368
4382
|
{
|
|
4369
4383
|
"name": "WithTags",
|
|
4370
|
-
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>Tags</AttributeLabel>\n <AttributeValue>\n <
|
|
4384
|
+
"code": "() => (\n <div className='w-[400px]'>\n <Attribute>\n <AttributeLabel>Tags</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['production', 'us-east-1', 'critical', 'tier-1', 'public', 'monitored']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4371
4385
|
},
|
|
4372
4386
|
{
|
|
4373
4387
|
"name": "WithCodeSnippet",
|
|
@@ -4387,11 +4401,35 @@
|
|
|
4387
4401
|
},
|
|
4388
4402
|
{
|
|
4389
4403
|
"name": "Composition",
|
|
4390
|
-
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <
|
|
4404
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>3 sessions</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n <Ip>\n <IpCountry code='JP' />\n <IpAddress>192.168.1.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4391
4405
|
},
|
|
4392
4406
|
{
|
|
4393
4407
|
"name": "WithActions",
|
|
4394
4408
|
"code": "() => (\n <div className='w-[400px] flex flex-col gap-16'>\n <Attribute>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-with-actions'>\n <AttributeActionsTarget>\n <Text size='sm'>142.198.167.52</Text>\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4409
|
+
},
|
|
4410
|
+
{
|
|
4411
|
+
"name": "Horizontal",
|
|
4412
|
+
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4413
|
+
},
|
|
4414
|
+
{
|
|
4415
|
+
"name": "HorizontalLabelTruncation",
|
|
4416
|
+
"code": "() => (\n <div className='w-[500px] flex flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel width={256}>Short</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>Fits in 256px label cell</Text>\n </AttributeValue>\n </Attribute>\n <Attribute orientation='horizontal'>\n <AttributeLabel width={256}>\n This label text is much longer than 256 pixels and must be truncated\n </AttributeLabel>\n <AttributeValue>\n <Text size='sm'>Value</Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4417
|
+
},
|
|
4418
|
+
{
|
|
4419
|
+
"name": "HorizontalValueTruncation",
|
|
4420
|
+
"code": "() => (\n <div className='w-[400px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <Text size='sm' truncate>\n artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com\n </Text>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4421
|
+
},
|
|
4422
|
+
{
|
|
4423
|
+
"name": "HorizontalComposition",
|
|
4424
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Last seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2025-04-02T14:03:00Z' format='date' />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>3 sessions</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={renderOverflowPopover}\n />\n </AttributeValue>\n </Attribute>\n\n <div className='col-span-2'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <IpList type='horizontal'>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n </IpList>\n </AttributeValue>\n </Attribute>\n </div>\n </div>\n)"
|
|
4425
|
+
},
|
|
4426
|
+
{
|
|
4427
|
+
"name": "HorizontalLoading",
|
|
4428
|
+
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'>\n <Attribute orientation='horizontal' loading>\n <AttributeLabel>Created at</AttributeLabel>\n <AttributeValue />\n </Attribute>\n <Attribute orientation='horizontal' loading>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue />\n </Attribute>\n </div>\n)"
|
|
4429
|
+
},
|
|
4430
|
+
{
|
|
4431
|
+
"name": "HorizontalWithActions",
|
|
4432
|
+
"code": "() => (\n <div className='w-[400px] flex flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-horizontal-with-actions'>\n <AttributeActionsTarget>\n <Text size='sm'>142.198.167.52</Text>\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeActionsTarget>\n <AttributeActionsContent>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Filter />\n Investigate by this value\n </AttributeActionsItem>\n <AttributeActionsItem\n onSelect={() => {\n /* story mock */\n }}\n >\n <Copy />\n Copy value\n </AttributeActionsItem>\n </AttributeActionsContent>\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n </div>\n)"
|
|
4395
4433
|
}
|
|
4396
4434
|
]
|
|
4397
4435
|
},
|