@wallarm-org/design-system 0.56.1 → 0.57.1-rc-feature-AS-1085.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/Banner/Banner.d.ts +31 -0
- package/dist/components/Banner/Banner.figma.d.ts +1 -0
- package/dist/components/Banner/Banner.figma.js +69 -0
- package/dist/components/Banner/Banner.js +31 -0
- package/dist/components/Banner/BannerClose.d.ts +14 -0
- package/dist/components/Banner/BannerClose.js +31 -0
- package/dist/components/Banner/BannerContent.d.ts +10 -0
- package/dist/components/Banner/BannerContent.js +16 -0
- package/dist/components/Banner/BannerContext.d.ts +8 -0
- package/dist/components/Banner/BannerContext.js +7 -0
- package/dist/components/Banner/BannerControls.d.ts +11 -0
- package/dist/components/Banner/BannerControls.js +16 -0
- package/dist/components/Banner/BannerDescription.d.ts +12 -0
- package/dist/components/Banner/BannerDescription.js +30 -0
- package/dist/components/Banner/BannerIcon.d.ts +14 -0
- package/dist/components/Banner/BannerIcon.js +30 -0
- package/dist/components/Banner/BannerLink.d.ts +11 -0
- package/dist/components/Banner/BannerLink.js +17 -0
- package/dist/components/Banner/BannerTitle.d.ts +24 -0
- package/dist/components/Banner/BannerTitle.js +37 -0
- package/dist/components/Banner/classes.d.ts +23 -0
- package/dist/components/Banner/classes.js +58 -0
- package/dist/components/Banner/index.d.ts +7 -0
- package/dist/components/Banner/index.js +8 -0
- package/dist/components/FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.js +23 -3
- package/dist/components/FilterInput/index.d.ts +1 -1
- package/dist/components/FilterInput/index.js +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -1
- package/dist/metadata/components.json +2104 -2
- package/package.json +1 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { type TestableProps } from '../../utils/testId';
|
|
4
|
+
import { type BannerVariant, bannerVariants } from './classes';
|
|
5
|
+
export type { BannerVariant };
|
|
6
|
+
export interface BannerProps extends Omit<VariantProps<typeof bannerVariants>, 'variant'>, HTMLAttributes<HTMLDivElement>, TestableProps {
|
|
7
|
+
ref?: Ref<HTMLDivElement>;
|
|
8
|
+
/** Visual variant of the banner */
|
|
9
|
+
variant?: BannerVariant;
|
|
10
|
+
/**
|
|
11
|
+
* Leading icon. The destructive, info, and warning variants render a default
|
|
12
|
+
* icon when this is omitted; primary and secondary render none. Passing an
|
|
13
|
+
* icon always overrides the default.
|
|
14
|
+
*/
|
|
15
|
+
icon?: ReactNode;
|
|
16
|
+
/** Banner content — compose with Banner sub-components */
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Banner displays a prominent, full-width message at the top of the page
|
|
21
|
+
* (above the header) to communicate system-wide status, announcements,
|
|
22
|
+
* warnings, errors, or promotional messages to all users.
|
|
23
|
+
*
|
|
24
|
+
* Banners persist until dismissed by the user or until the state that caused
|
|
25
|
+
* them is resolved.
|
|
26
|
+
*
|
|
27
|
+
* Supports 5 variants: primary (dark/neutral), secondary, destructive, info,
|
|
28
|
+
* and warning. Compose with: BannerContent, BannerTitle, BannerDescription,
|
|
29
|
+
* BannerLink, BannerControls, BannerClose.
|
|
30
|
+
*/
|
|
31
|
+
export declare const Banner: FC<BannerProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import code_connect from "@figma/code-connect";
|
|
3
|
+
import { Button } from "../Button/index.js";
|
|
4
|
+
import { Banner } from "./Banner.js";
|
|
5
|
+
import { BannerClose } from "./BannerClose.js";
|
|
6
|
+
import { BannerContent } from "./BannerContent.js";
|
|
7
|
+
import { BannerControls } from "./BannerControls.js";
|
|
8
|
+
import { BannerDescription } from "./BannerDescription.js";
|
|
9
|
+
import { BannerLink } from "./BannerLink.js";
|
|
10
|
+
import { BannerTitle } from "./BannerTitle.js";
|
|
11
|
+
const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7688-3741';
|
|
12
|
+
const typeToVariant = {
|
|
13
|
+
Primary: 'primary',
|
|
14
|
+
Secondary: 'secondary',
|
|
15
|
+
Destructive: 'destructive',
|
|
16
|
+
Info: 'info',
|
|
17
|
+
Warning: 'warning'
|
|
18
|
+
};
|
|
19
|
+
code_connect.connect(Banner, figmaNodeUrl, {
|
|
20
|
+
props: {
|
|
21
|
+
variant: code_connect["enum"]('Type', typeToVariant),
|
|
22
|
+
description: code_connect.boolean("description"),
|
|
23
|
+
inlineAction: code_connect.boolean('inlineAction'),
|
|
24
|
+
rightActions: code_connect.boolean('rightActions'),
|
|
25
|
+
closable: code_connect.boolean('closable'),
|
|
26
|
+
title: code_connect.string('title'),
|
|
27
|
+
text: code_connect.string('text')
|
|
28
|
+
},
|
|
29
|
+
example: ({ variant, description, inlineAction, rightActions, closable, title, text })=>/*#__PURE__*/ jsxs(Banner, {
|
|
30
|
+
variant: variant,
|
|
31
|
+
children: [
|
|
32
|
+
/*#__PURE__*/ jsxs(BannerContent, {
|
|
33
|
+
children: [
|
|
34
|
+
/*#__PURE__*/ jsx(BannerTitle, {
|
|
35
|
+
action: inlineAction && /*#__PURE__*/ jsx(BannerLink, {
|
|
36
|
+
href: "#",
|
|
37
|
+
children: "Link"
|
|
38
|
+
}),
|
|
39
|
+
children: title
|
|
40
|
+
}),
|
|
41
|
+
description && /*#__PURE__*/ jsx(BannerDescription, {
|
|
42
|
+
children: text
|
|
43
|
+
})
|
|
44
|
+
]
|
|
45
|
+
}),
|
|
46
|
+
(rightActions || closable) && /*#__PURE__*/ jsxs(BannerControls, {
|
|
47
|
+
children: [
|
|
48
|
+
rightActions && /*#__PURE__*/ jsxs(Fragment, {
|
|
49
|
+
children: [
|
|
50
|
+
/*#__PURE__*/ jsx(Button, {
|
|
51
|
+
variant: "secondary",
|
|
52
|
+
color: "neutral",
|
|
53
|
+
size: "small",
|
|
54
|
+
children: "Button"
|
|
55
|
+
}),
|
|
56
|
+
/*#__PURE__*/ jsx(Button, {
|
|
57
|
+
variant: "secondary",
|
|
58
|
+
color: "neutral",
|
|
59
|
+
size: "small",
|
|
60
|
+
children: "Button"
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
}),
|
|
64
|
+
closable && /*#__PURE__*/ jsx(BannerClose, {})
|
|
65
|
+
]
|
|
66
|
+
})
|
|
67
|
+
]
|
|
68
|
+
})
|
|
69
|
+
});
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { TestIdProvider } from "../../utils/testId.js";
|
|
4
|
+
import { BannerVariantProvider } from "./BannerContext.js";
|
|
5
|
+
import { BannerIcon } from "./BannerIcon.js";
|
|
6
|
+
import { bannerVariants } from "./classes.js";
|
|
7
|
+
const Banner = ({ ref, variant = 'primary', icon, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(BannerVariantProvider, {
|
|
8
|
+
value: variant,
|
|
9
|
+
children: /*#__PURE__*/ jsx(TestIdProvider, {
|
|
10
|
+
value: testId,
|
|
11
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
12
|
+
...props,
|
|
13
|
+
ref: ref,
|
|
14
|
+
role: "status",
|
|
15
|
+
"data-slot": "banner",
|
|
16
|
+
"data-testid": testId,
|
|
17
|
+
"data-variant": variant,
|
|
18
|
+
className: cn(bannerVariants({
|
|
19
|
+
variant
|
|
20
|
+
}), className),
|
|
21
|
+
children: [
|
|
22
|
+
/*#__PURE__*/ jsx(BannerIcon, {
|
|
23
|
+
icon: icon
|
|
24
|
+
}),
|
|
25
|
+
children
|
|
26
|
+
]
|
|
27
|
+
})
|
|
28
|
+
})
|
|
29
|
+
});
|
|
30
|
+
Banner.displayName = 'Banner';
|
|
31
|
+
export { Banner };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, FC, Ref } from 'react';
|
|
2
|
+
export interface BannerCloseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
3
|
+
ref?: Ref<HTMLButtonElement>;
|
|
4
|
+
/** Callback when the close button is clicked */
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Close button for Banner.
|
|
9
|
+
*
|
|
10
|
+
* Renders an outline icon button (white background with a border) and a "Close"
|
|
11
|
+
* tooltip. The same style is used across all variants — it stays legible on both
|
|
12
|
+
* the light variants and the dark primary banner.
|
|
13
|
+
*/
|
|
14
|
+
export declare const BannerClose: FC<BannerCloseProps>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { X } from "../../icons/index.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
import { Button } from "../Button/index.js";
|
|
5
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
|
|
6
|
+
const BannerClose = ({ ref, onClick, ...props })=>{
|
|
7
|
+
const testId = useTestId('close');
|
|
8
|
+
return /*#__PURE__*/ jsxs(Tooltip, {
|
|
9
|
+
children: [
|
|
10
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
11
|
+
asChild: true,
|
|
12
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
13
|
+
...props,
|
|
14
|
+
ref: ref,
|
|
15
|
+
"data-testid": testId,
|
|
16
|
+
variant: "outline",
|
|
17
|
+
color: "neutral",
|
|
18
|
+
size: "small",
|
|
19
|
+
"aria-label": "close",
|
|
20
|
+
onClick: onClick,
|
|
21
|
+
children: /*#__PURE__*/ jsx(X, {})
|
|
22
|
+
})
|
|
23
|
+
}),
|
|
24
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
25
|
+
children: "Close"
|
|
26
|
+
})
|
|
27
|
+
]
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
BannerClose.displayName = 'BannerClose';
|
|
31
|
+
export { BannerClose };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, Ref } from 'react';
|
|
2
|
+
export interface BannerContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
ref?: Ref<HTMLDivElement>;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Container for the Banner's main content (title row and description).
|
|
7
|
+
*
|
|
8
|
+
* Provides the flex column layout and takes up the remaining horizontal space.
|
|
9
|
+
*/
|
|
10
|
+
export declare const BannerContent: FC<BannerContentProps>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
const BannerContent = ({ ref, className, children, ...props })=>{
|
|
5
|
+
const testId = useTestId('content');
|
|
6
|
+
return /*#__PURE__*/ jsx("div", {
|
|
7
|
+
...props,
|
|
8
|
+
ref: ref,
|
|
9
|
+
"data-slot": "banner-content",
|
|
10
|
+
"data-testid": testId,
|
|
11
|
+
className: cn('flex flex-1 flex-col justify-center gap-0 min-w-0', className),
|
|
12
|
+
children: children
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
BannerContent.displayName = 'BannerContent';
|
|
16
|
+
export { BannerContent };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { BannerVariant } from './classes';
|
|
2
|
+
/**
|
|
3
|
+
* Provides the active Banner variant to sub-components so they can derive their
|
|
4
|
+
* own theme-aware tokens (text, icon, link, close) during render.
|
|
5
|
+
*/
|
|
6
|
+
export declare const BannerVariantProvider: import("react").Provider<BannerVariant>;
|
|
7
|
+
/** Returns the variant of the nearest parent Banner. */
|
|
8
|
+
export declare function useBannerVariant(): BannerVariant;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
const BannerVariantContext = createContext('primary');
|
|
3
|
+
const BannerVariantProvider = BannerVariantContext.Provider;
|
|
4
|
+
function useBannerVariant() {
|
|
5
|
+
return useContext(BannerVariantContext);
|
|
6
|
+
}
|
|
7
|
+
export { BannerVariantProvider, useBannerVariant };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, Ref } from 'react';
|
|
2
|
+
export interface BannerControlsProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
ref?: Ref<HTMLDivElement>;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Trailing controls container for Banner.
|
|
7
|
+
*
|
|
8
|
+
* Use this to place action buttons and/or the BannerClose button on the right
|
|
9
|
+
* side of the banner. Buttons should use size="small".
|
|
10
|
+
*/
|
|
11
|
+
export declare const BannerControls: FC<BannerControlsProps>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
const BannerControls = ({ ref, className, children, ...props })=>{
|
|
5
|
+
const testId = useTestId('controls');
|
|
6
|
+
return /*#__PURE__*/ jsx("div", {
|
|
7
|
+
...props,
|
|
8
|
+
ref: ref,
|
|
9
|
+
"data-slot": "banner-controls",
|
|
10
|
+
"data-testid": testId,
|
|
11
|
+
className: cn('flex items-center gap-8 shrink-0', className),
|
|
12
|
+
children: children
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
BannerControls.displayName = 'BannerControls';
|
|
16
|
+
export { BannerControls };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
export interface BannerDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
3
|
+
ref?: Ref<HTMLParagraphElement>;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Secondary description text for Banner.
|
|
8
|
+
*
|
|
9
|
+
* Rendered below the title with regular weight and a muted color appropriate
|
|
10
|
+
* to the variant. Truncates with a tooltip when the text overflows.
|
|
11
|
+
*/
|
|
12
|
+
export declare const BannerDescription: FC<BannerDescriptionProps>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
|
|
5
|
+
import { useBannerVariant } from "./BannerContext.js";
|
|
6
|
+
import { bannerDescriptionVariants } from "./classes.js";
|
|
7
|
+
const BannerDescription = ({ ref, children, className, ...props })=>{
|
|
8
|
+
const testId = useTestId("description");
|
|
9
|
+
const variant = useBannerVariant();
|
|
10
|
+
return /*#__PURE__*/ jsxs(OverflowTooltip, {
|
|
11
|
+
children: [
|
|
12
|
+
/*#__PURE__*/ jsx(OverflowTooltipTrigger, {
|
|
13
|
+
children: /*#__PURE__*/ jsx("p", {
|
|
14
|
+
...props,
|
|
15
|
+
ref: ref,
|
|
16
|
+
"data-testid": testId,
|
|
17
|
+
className: cn(bannerDescriptionVariants({
|
|
18
|
+
variant
|
|
19
|
+
}), 'truncate', className),
|
|
20
|
+
children: children
|
|
21
|
+
})
|
|
22
|
+
}),
|
|
23
|
+
/*#__PURE__*/ jsx(OverflowTooltipContent, {
|
|
24
|
+
children: children
|
|
25
|
+
})
|
|
26
|
+
]
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
BannerDescription.displayName = "BannerDescription";
|
|
30
|
+
export { BannerDescription };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { FC, ReactNode } from 'react';
|
|
2
|
+
export interface BannerIconProps {
|
|
3
|
+
/** Custom icon — always overrides the variant default. */
|
|
4
|
+
icon?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Leading icon for Banner — rendered internally by Banner, not part of the
|
|
8
|
+
* public API.
|
|
9
|
+
*
|
|
10
|
+
* The destructive, info, and warning variants show a default icon; primary and
|
|
11
|
+
* secondary show none. A custom `icon` (passed via Banner's `icon` prop) always
|
|
12
|
+
* overrides the default. Renders nothing when there is no icon to show.
|
|
13
|
+
*/
|
|
14
|
+
export declare const BannerIcon: FC<BannerIconProps>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Info, OctagonAlert, TriangleAlert } from "../../icons/index.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
import { useBannerVariant } from "./BannerContext.js";
|
|
5
|
+
import { bannerIconVariants } from "./classes.js";
|
|
6
|
+
const defaultIconMap = {
|
|
7
|
+
destructive: OctagonAlert,
|
|
8
|
+
info: Info,
|
|
9
|
+
warning: TriangleAlert
|
|
10
|
+
};
|
|
11
|
+
const BannerIcon = ({ icon })=>{
|
|
12
|
+
const testId = useTestId('icon');
|
|
13
|
+
const variant = useBannerVariant();
|
|
14
|
+
const DefaultIcon = defaultIconMap[variant];
|
|
15
|
+
const content = icon ?? (DefaultIcon ? /*#__PURE__*/ jsx(DefaultIcon, {
|
|
16
|
+
size: "lg",
|
|
17
|
+
className: bannerIconVariants({
|
|
18
|
+
variant
|
|
19
|
+
})
|
|
20
|
+
}) : null);
|
|
21
|
+
if (null == content) return null;
|
|
22
|
+
return /*#__PURE__*/ jsx("div", {
|
|
23
|
+
"data-slot": "banner-icon",
|
|
24
|
+
"data-testid": testId,
|
|
25
|
+
className: "flex items-center py-2 shrink-0",
|
|
26
|
+
children: content
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
BannerIcon.displayName = 'BannerIcon';
|
|
30
|
+
export { BannerIcon };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import { type LinkProps } from '../Link';
|
|
3
|
+
export type BannerLinkProps = Omit<LinkProps, 'type' | 'size'>;
|
|
4
|
+
/**
|
|
5
|
+
* Inline action link for Banner.
|
|
6
|
+
*
|
|
7
|
+
* Rendered next to the title (pass via `BannerTitle`'s `action` prop). The link
|
|
8
|
+
* color adapts to the variant — light blue on the dark primary banner, default
|
|
9
|
+
* blue on the light variants.
|
|
10
|
+
*/
|
|
11
|
+
export declare const BannerLink: FC<BannerLinkProps>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTestId } from "../../utils/testId.js";
|
|
3
|
+
import { Link } from "../Link/index.js";
|
|
4
|
+
import { useBannerVariant } from "./BannerContext.js";
|
|
5
|
+
const BannerLink = ({ weight = 'regular', ...props })=>{
|
|
6
|
+
const testId = useTestId('link');
|
|
7
|
+
const variant = useBannerVariant();
|
|
8
|
+
return /*#__PURE__*/ jsx(Link, {
|
|
9
|
+
...props,
|
|
10
|
+
"data-testid": testId,
|
|
11
|
+
type: 'primary' === variant ? 'alt' : 'default',
|
|
12
|
+
size: "md",
|
|
13
|
+
weight: weight
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
BannerLink.displayName = 'BannerLink';
|
|
17
|
+
export { BannerLink };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
export interface BannerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
|
+
ref?: Ref<HTMLParagraphElement>;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Optional inline action rendered next to the title (e.g. a BannerLink).
|
|
7
|
+
* Sits on the same row and wraps below on narrow viewports.
|
|
8
|
+
*/
|
|
9
|
+
action?: ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Maximum number of lines before the message is truncated (default: 1).
|
|
12
|
+
* The design budget is 2 lines; 1 line is preferred.
|
|
13
|
+
*/
|
|
14
|
+
lineClamp?: number;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Title (message) for Banner.
|
|
18
|
+
*
|
|
19
|
+
* Renders the primary message with medium weight, truncating with a tooltip
|
|
20
|
+
* when the text overflows. By default the message is a single line; set
|
|
21
|
+
* `lineClamp` (e.g. 2) to allow it to wrap and clamp to that many lines.
|
|
22
|
+
* An optional inline `action` (such as a BannerLink) is rendered on the same row.
|
|
23
|
+
*/
|
|
24
|
+
export declare const BannerTitle: FC<BannerTitleProps>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { useTestId } from "../../utils/testId.js";
|
|
4
|
+
import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
|
|
5
|
+
import { useBannerVariant } from "./BannerContext.js";
|
|
6
|
+
import { bannerTitleVariants } from "./classes.js";
|
|
7
|
+
const BannerTitle = ({ ref, children, action, lineClamp = 1, className, ...props })=>{
|
|
8
|
+
const testId = useTestId('title');
|
|
9
|
+
const variant = useBannerVariant();
|
|
10
|
+
const clampClass = lineClamp > 1 ? `line-clamp-${lineClamp}` : 'truncate';
|
|
11
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
12
|
+
className: "flex flex-wrap items-center gap-8 w-full",
|
|
13
|
+
children: [
|
|
14
|
+
/*#__PURE__*/ jsxs(OverflowTooltip, {
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsx(OverflowTooltipTrigger, {
|
|
17
|
+
children: /*#__PURE__*/ jsx("p", {
|
|
18
|
+
...props,
|
|
19
|
+
ref: ref,
|
|
20
|
+
"data-testid": testId,
|
|
21
|
+
className: cn(bannerTitleVariants({
|
|
22
|
+
variant
|
|
23
|
+
}), clampClass, className),
|
|
24
|
+
children: children
|
|
25
|
+
})
|
|
26
|
+
}),
|
|
27
|
+
/*#__PURE__*/ jsx(OverflowTooltipContent, {
|
|
28
|
+
children: children
|
|
29
|
+
})
|
|
30
|
+
]
|
|
31
|
+
}),
|
|
32
|
+
action
|
|
33
|
+
]
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
BannerTitle.displayName = 'BannerTitle';
|
|
37
|
+
export { BannerTitle };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export type BannerVariant = 'primary' | 'secondary' | 'destructive' | 'info' | 'warning';
|
|
2
|
+
/**
|
|
3
|
+
* Root container styles.
|
|
4
|
+
*
|
|
5
|
+
* The Banner is full-width and edge-to-edge (no border, no radius) since it
|
|
6
|
+
* renders at the very top of the page, above the header.
|
|
7
|
+
*
|
|
8
|
+
* NOTE: this component is tagged "No dark-ui" in Figma — it is not meant to
|
|
9
|
+
* adapt to the dark theme. The semantic tokens below reflect the Figma
|
|
10
|
+
* (light-mode) mapping; revisit if dark-mode behavior is ever specced.
|
|
11
|
+
*/
|
|
12
|
+
export declare const bannerVariants: (props?: ({
|
|
13
|
+
variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
|
|
14
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
|
+
export declare const bannerTitleVariants: (props?: ({
|
|
16
|
+
variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
|
|
17
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
18
|
+
export declare const bannerDescriptionVariants: (props?: ({
|
|
19
|
+
variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
|
|
20
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
21
|
+
export declare const bannerIconVariants: (props?: ({
|
|
22
|
+
variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
|
|
23
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const bannerVariants = cva('font-sans flex w-full items-start justify-between gap-8 overflow-hidden pl-16 pr-12 py-12', {
|
|
3
|
+
variants: {
|
|
4
|
+
variant: {
|
|
5
|
+
primary: 'bg-component-toast-bg',
|
|
6
|
+
secondary: 'bg-bg-surface-5',
|
|
7
|
+
destructive: 'bg-bg-danger',
|
|
8
|
+
info: 'bg-bg-info',
|
|
9
|
+
warning: 'bg-bg-warning'
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
defaultVariants: {
|
|
13
|
+
variant: 'primary'
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
const bannerTitleVariants = cva('text-sm font-medium py-2 min-w-0 max-w-full', {
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
primary: 'text-text-primary-alt',
|
|
20
|
+
secondary: 'text-text-primary',
|
|
21
|
+
destructive: 'text-text-primary',
|
|
22
|
+
info: 'text-text-primary',
|
|
23
|
+
warning: 'text-text-primary'
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: 'primary'
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
const bannerDescriptionVariants = cva('text-sm font-normal', {
|
|
31
|
+
variants: {
|
|
32
|
+
variant: {
|
|
33
|
+
primary: 'text-text-tertiary',
|
|
34
|
+
secondary: 'text-text-secondary',
|
|
35
|
+
destructive: 'text-text-secondary',
|
|
36
|
+
info: 'text-text-secondary',
|
|
37
|
+
warning: 'text-text-secondary'
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
defaultVariants: {
|
|
41
|
+
variant: 'primary'
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
const bannerIconVariants = cva('shrink-0', {
|
|
45
|
+
variants: {
|
|
46
|
+
variant: {
|
|
47
|
+
primary: 'text-icon-primary-alt',
|
|
48
|
+
secondary: 'text-icon-primary',
|
|
49
|
+
destructive: 'text-icon-danger',
|
|
50
|
+
info: 'text-icon-info',
|
|
51
|
+
warning: 'text-icon-warning'
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
defaultVariants: {
|
|
55
|
+
variant: 'primary'
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
export { bannerDescriptionVariants, bannerIconVariants, bannerTitleVariants, bannerVariants };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { Banner, type BannerProps, type BannerVariant } from './Banner';
|
|
2
|
+
export { BannerClose, type BannerCloseProps } from './BannerClose';
|
|
3
|
+
export { BannerContent, type BannerContentProps } from './BannerContent';
|
|
4
|
+
export { BannerControls, type BannerControlsProps } from './BannerControls';
|
|
5
|
+
export { BannerDescription, type BannerDescriptionProps } from './BannerDescription';
|
|
6
|
+
export { BannerLink, type BannerLinkProps } from './BannerLink';
|
|
7
|
+
export { BannerTitle, type BannerTitleProps } from './BannerTitle';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Banner } from "./Banner.js";
|
|
2
|
+
import { BannerClose } from "./BannerClose.js";
|
|
3
|
+
import { BannerContent } from "./BannerContent.js";
|
|
4
|
+
import { BannerControls } from "./BannerControls.js";
|
|
5
|
+
import { BannerDescription } from "./BannerDescription.js";
|
|
6
|
+
import { BannerLink } from "./BannerLink.js";
|
|
7
|
+
import { BannerTitle } from "./BannerTitle.js";
|
|
8
|
+
export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle };
|
package/dist/components/FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
|
|
3
|
+
import { CONNECTOR_ID_PATTERN, chipIdToConditionIndex, hasStaticAllowlist, validateValueForField } from "../../lib/index.js";
|
|
3
4
|
import { buildChips } from "./buildChips.js";
|
|
4
5
|
import { buildExpression, expressionToConditions } from "./expression.js";
|
|
5
6
|
const EMPTY_STATE = {
|
|
@@ -7,6 +8,24 @@ const EMPTY_STATE = {
|
|
|
7
8
|
connectors: []
|
|
8
9
|
};
|
|
9
10
|
const DEFAULT_CONNECTOR = 'and';
|
|
11
|
+
const revalidateConditions = (conditions, fields)=>conditions.map((condition)=>{
|
|
12
|
+
if (condition.disabled) return condition;
|
|
13
|
+
const field = fields.find((f)=>f.name === condition.field);
|
|
14
|
+
if (!field || condition.error === SEGMENT_VARIANT.attribute) return condition;
|
|
15
|
+
if (!field.validate && !hasStaticAllowlist(field)) return condition;
|
|
16
|
+
if (validateValueForField(field, condition.value)) return condition.error === SEGMENT_VARIANT.value ? condition : {
|
|
17
|
+
...condition,
|
|
18
|
+
error: SEGMENT_VARIANT.value
|
|
19
|
+
};
|
|
20
|
+
if (condition.error === SEGMENT_VARIANT.value) {
|
|
21
|
+
const next = {
|
|
22
|
+
...condition
|
|
23
|
+
};
|
|
24
|
+
delete next.error;
|
|
25
|
+
return next;
|
|
26
|
+
}
|
|
27
|
+
return condition;
|
|
28
|
+
});
|
|
10
29
|
const removeConnectorAtConditionIndex = (connectors, idx)=>{
|
|
11
30
|
const updated = [
|
|
12
31
|
...connectors
|
|
@@ -78,12 +97,13 @@ const useFilterInputExpression = ({ fields, value, onChange, error })=>{
|
|
|
78
97
|
if (void 0 !== value) {
|
|
79
98
|
const result = expressionToConditions(value);
|
|
80
99
|
setState({
|
|
81
|
-
conditions: result.conditions,
|
|
100
|
+
conditions: revalidateConditions(result.conditions, fields),
|
|
82
101
|
connectors: result.connectors
|
|
83
102
|
});
|
|
84
103
|
}
|
|
85
104
|
}, [
|
|
86
|
-
value
|
|
105
|
+
value,
|
|
106
|
+
fields
|
|
87
107
|
]);
|
|
88
108
|
const chips = useMemo(()=>buildChips(state.conditions, state.connectors, fields, error), [
|
|
89
109
|
state.conditions,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { FilterInput, type FilterInputProps } from './FilterInput';
|
|
2
2
|
export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
|
|
3
3
|
export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
|
|
4
|
-
export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, } from './lib';
|
|
4
|
+
export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField, } from './lib';
|
|
5
5
|
export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FilterInput } from "./FilterInput.js";
|
|
2
2
|
import { FilterInputChip } from "./FilterInputField/index.js";
|
|
3
3
|
import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
|
|
4
|
-
import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
|
|
5
|
-
export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression };
|
|
4
|
+
import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField } from "./lib/index.js";
|
|
5
|
+
export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField };
|
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/
|
|
|
16
16
|
export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell';
|
|
17
17
|
export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
|
|
18
18
|
export { Badge, type BadgeProps } from './components/Badge';
|
|
19
|
+
export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner';
|
|
19
20
|
export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs';
|
|
20
21
|
export { Button, type ButtonProps } from './components/Button';
|
|
21
22
|
export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';
|