@carbon-labs/react-animated-header 0.38.0 → 0.39.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/es/__stories__/AnimatedHeader.stories.d.ts +2 -2
- package/es/components/Tiles/AIPromptTile/AIPromptTile.d.ts +4 -0
- package/es/components/Tiles/AIPromptTile/AIPromptTile.js +16 -4
- package/es/components/Tiles/AITile/AITile.d.ts +4 -0
- package/es/components/Tiles/AITile/AITile.js +6 -0
- package/es/components/Tiles/AITile/AITileBody.d.ts +8 -1
- package/es/components/Tiles/AITile/AITileBody.js +16 -4
- package/es/components/Tiles/GlassTile/GlassTile.d.ts +3 -0
- package/es/components/Tiles/GlassTile/GlassTile.js +4 -0
- package/es/components/Tiles/GlassTile/GlassTileBody.d.ts +6 -1
- package/es/components/Tiles/GlassTile/GlassTileBody.js +8 -2
- package/lib/__stories__/AnimatedHeader.stories.d.ts +2 -2
- package/lib/components/Tiles/AIPromptTile/AIPromptTile.d.ts +4 -0
- package/lib/components/Tiles/AIPromptTile/AIPromptTile.js +15 -3
- package/lib/components/Tiles/AITile/AITile.d.ts +4 -0
- package/lib/components/Tiles/AITile/AITile.js +6 -0
- package/lib/components/Tiles/AITile/AITileBody.d.ts +8 -1
- package/lib/components/Tiles/AITile/AITileBody.js +15 -3
- package/lib/components/Tiles/GlassTile/GlassTile.d.ts +3 -0
- package/lib/components/Tiles/GlassTile/GlassTile.js +4 -0
- package/lib/components/Tiles/GlassTile/GlassTileBody.d.ts +6 -1
- package/lib/components/Tiles/GlassTile/GlassTileBody.js +7 -1
- package/lib/es/_virtual/_commonjsHelpers.d.ts +7 -0
- package/lib/es/_virtual/_rollupPluginBabelHelpers.d.ts +8 -0
- package/lib/es/_virtual/lottie.d.ts +2 -0
- package/lib/es/_virtual/lottie2.d.ts +4 -0
- package/lib/es/assets/animated/header_animated_data_fabric_dark_06.json.d.ts +1097 -0
- package/lib/es/assets/animated/header_animated_data_fabric_light_03.json.d.ts +1097 -0
- package/lib/es/assets/animated/header_animated_db2_dark_03.json.d.ts +2639 -0
- package/lib/es/assets/animated/header_animated_db2_light_03.json.d.ts +2639 -0
- package/lib/es/assets/animated/header_animated_watsonx_a_dark_06.json.d.ts +771 -0
- package/lib/es/assets/animated/header_animated_watsonx_a_light_06.json.d.ts +771 -0
- package/lib/es/assets/animated/header_animated_watsonx_data_dark_03.json.d.ts +1963 -0
- package/lib/es/assets/animated/header_animated_watsonx_data_light_04.json.d.ts +2043 -0
- package/lib/es/assets/animated/header_animated_wxbia_dark_06.json.d.ts +1053 -0
- package/lib/es/assets/animated/header_animated_wxbia_light_09.json.d.ts +1053 -0
- package/lib/es/assets/static/header_static_data_fabric_dark_06.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_data_fabric_light_06.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_db2_dark_01.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_db2_light_01.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_watsonx_a_dark_01.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_watsonx_a_light_01.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_watsonx_data_dark_05.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_watsonx_data_light_06.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_wxbia_dark_01.svg.d.ts +8 -0
- package/lib/es/assets/static/header_static_wxbia_light_01.svg.d.ts +8 -0
- package/lib/es/components/AnimatedHeader/AnimatedHeader.d.ts +99 -0
- package/lib/es/components/ContentSwitcherSelector/ContentSwitcherSelector.d.ts +10 -0
- package/lib/es/components/HeaderAction/HeaderAction.d.ts +11 -0
- package/lib/es/components/HeaderTitle/HeaderTitle.d.ts +8 -0
- package/lib/es/components/TasksController/TasksController.d.ts +11 -0
- package/lib/es/components/Tiles/AIPromptTile/AIPromptTile.d.ts +25 -0
- package/lib/es/components/Tiles/AITile/AITile.d.ts +26 -0
- package/lib/es/components/Tiles/AITile/AITileBody.d.ts +16 -0
- package/lib/es/components/Tiles/BaseTile/BaseTile.d.ts +2 -0
- package/lib/es/components/Tiles/GlassTile/GlassTile.d.ts +24 -0
- package/lib/es/components/Tiles/GlassTile/GlassTileBody.d.ts +15 -0
- package/lib/es/components/WorkspaceSelector/WorkspaceSelector.d.ts +9 -0
- package/lib/es/index.d.ts +24 -0
- package/package.json +2 -2
- package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss +5 -0
- package/scss/Tiles/AITile/ai-tile.scss +5 -0
- package/scss/Tiles/GlassTile/glass-tile.scss +5 -0
|
@@ -15065,7 +15065,7 @@ export declare const ThemeG10: {
|
|
|
15065
15065
|
type: string;
|
|
15066
15066
|
button: {
|
|
15067
15067
|
href: string;
|
|
15068
|
-
icon: import("@carbon/react
|
|
15068
|
+
icon: import("@carbon/icons-react").CarbonIconType;
|
|
15069
15069
|
text: string;
|
|
15070
15070
|
type: "tertiary";
|
|
15071
15071
|
};
|
|
@@ -30258,7 +30258,7 @@ export declare const ThemeG100: {
|
|
|
30258
30258
|
type: string;
|
|
30259
30259
|
button: {
|
|
30260
30260
|
href: string;
|
|
30261
|
-
icon: import("@carbon/react
|
|
30261
|
+
icon: import("@carbon/icons-react").CarbonIconType;
|
|
30262
30262
|
text: string;
|
|
30263
30263
|
type: "tertiary";
|
|
30264
30264
|
};
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import React, { ElementType } from 'react';
|
|
10
|
+
import { type AITileBodyProps, type AITileLabelVariant } from '../AITile/AITileBody';
|
|
10
11
|
export type AIPromptTileProps = {
|
|
11
12
|
variant: 'aiPrompt';
|
|
12
13
|
tileId: string;
|
|
@@ -16,6 +17,9 @@ export type AIPromptTileProps = {
|
|
|
16
17
|
productName?: string;
|
|
17
18
|
promptPlaceholder?: string;
|
|
18
19
|
primaryIcon?: ElementType | null;
|
|
20
|
+
aiLabelVariant?: AITileLabelVariant;
|
|
21
|
+
aiLabelText?: string;
|
|
22
|
+
aiLabelTagType?: AITileBodyProps['aiLabelTagType'];
|
|
19
23
|
onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
|
|
20
24
|
ariaLabel?: string;
|
|
21
25
|
open?: boolean;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React, { useState } from 'react';
|
|
9
|
-
import { SkeletonPlaceholder, AILabel, TextInput, IconButton, Button } from '@carbon/react';
|
|
9
|
+
import { SkeletonPlaceholder, Tag, AILabel, TextInput, IconButton, Button } from '@carbon/react';
|
|
10
10
|
import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
|
|
11
11
|
import { Send } from '@carbon/react/icons';
|
|
12
12
|
|
|
@@ -19,6 +19,9 @@ const AIPromptTile = ({
|
|
|
19
19
|
productName,
|
|
20
20
|
promptPlaceholder = 'Start chatting...',
|
|
21
21
|
primaryIcon: PrimaryIcon,
|
|
22
|
+
aiLabelVariant = 'aiLabel',
|
|
23
|
+
aiLabelText = 'AI',
|
|
24
|
+
aiLabelTagType = 'gray',
|
|
22
25
|
onClick,
|
|
23
26
|
ariaLabel,
|
|
24
27
|
open,
|
|
@@ -64,11 +67,20 @@ const AIPromptTile = ({
|
|
|
64
67
|
}, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
|
|
65
68
|
fill: `var(--cds-icon-secondary)`,
|
|
66
69
|
size: 24
|
|
67
|
-
}),
|
|
70
|
+
}), aiLabelVariant === 'tag' ? /*#__PURE__*/React.createElement(Tag, {
|
|
71
|
+
size: "sm",
|
|
72
|
+
type: aiLabelTagType,
|
|
73
|
+
className: `${blockClass}--tag`,
|
|
74
|
+
decorator: _AILabel || (_AILabel = /*#__PURE__*/React.createElement(AILabel, {
|
|
75
|
+
aiText: "AI",
|
|
76
|
+
size: "xs",
|
|
77
|
+
kind: "inline"
|
|
78
|
+
}))
|
|
79
|
+
}, aiLabelText) : /*#__PURE__*/React.createElement(AILabel, {
|
|
68
80
|
autoAlign: true,
|
|
69
|
-
aiText:
|
|
81
|
+
aiText: aiLabelText,
|
|
70
82
|
size: "xs"
|
|
71
|
-
}))
|
|
83
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
72
84
|
className: `${blockClass}--title`
|
|
73
85
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
74
86
|
className: `${blockClass}--text-input-container ${textInput && `${blockClass}--text-input-container__active`}`
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import React, { ElementType } from 'react';
|
|
10
|
+
import { AITileBodyProps, AITileLabelVariant } from '../AITile/AITileBody';
|
|
10
11
|
export type AITileProps = {
|
|
11
12
|
variant: 'ai';
|
|
12
13
|
tileId: string;
|
|
@@ -17,6 +18,9 @@ export type AITileProps = {
|
|
|
17
18
|
customContent?: React.ReactNode | null;
|
|
18
19
|
primaryIcon?: ElementType | null;
|
|
19
20
|
secondaryIcon?: ElementType | null;
|
|
21
|
+
aiLabelVariant?: AITileLabelVariant;
|
|
22
|
+
aiLabelText?: string;
|
|
23
|
+
aiLabelTagType?: AITileBodyProps['aiLabelTagType'];
|
|
20
24
|
onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
|
|
21
25
|
ariaLabel?: string;
|
|
22
26
|
open?: boolean;
|
|
@@ -19,6 +19,9 @@ const AITile = ({
|
|
|
19
19
|
customContent,
|
|
20
20
|
primaryIcon: PrimaryIcon,
|
|
21
21
|
secondaryIcon: SecondaryIcon,
|
|
22
|
+
aiLabelVariant,
|
|
23
|
+
aiLabelText,
|
|
24
|
+
aiLabelTagType,
|
|
22
25
|
onClick: aiTileClickHandler,
|
|
23
26
|
ariaLabel,
|
|
24
27
|
open,
|
|
@@ -34,6 +37,9 @@ const AITile = ({
|
|
|
34
37
|
title: title,
|
|
35
38
|
subtitle: subtitle,
|
|
36
39
|
customContent: customContent,
|
|
40
|
+
aiLabelVariant: aiLabelVariant,
|
|
41
|
+
aiLabelText: aiLabelText,
|
|
42
|
+
aiLabelTagType: aiLabelTagType,
|
|
37
43
|
isLoading: isLoading
|
|
38
44
|
});
|
|
39
45
|
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import { ElementType, ReactNode } from 'react';
|
|
10
|
+
import { type TagProps } from '@carbon/react';
|
|
11
|
+
type TagTypeName = TagProps<'div'>['type'];
|
|
12
|
+
export type AITileLabelVariant = 'aiLabel' | 'tag';
|
|
10
13
|
export type AITileBodyProps = {
|
|
11
14
|
open?: boolean;
|
|
12
15
|
title?: string | null;
|
|
@@ -14,6 +17,10 @@ export type AITileBodyProps = {
|
|
|
14
17
|
customContent?: ReactNode;
|
|
15
18
|
primaryIcon?: ElementType | null;
|
|
16
19
|
secondaryIcon?: ElementType | null;
|
|
20
|
+
aiLabelVariant?: AITileLabelVariant;
|
|
21
|
+
aiLabelText?: string;
|
|
22
|
+
aiLabelTagType?: TagTypeName;
|
|
17
23
|
isLoading?: boolean;
|
|
18
24
|
};
|
|
19
|
-
export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, aiLabelVariant, aiLabelText, aiLabelTagType, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
|
|
10
|
-
import { SkeletonPlaceholder, AILabel } from '@carbon/react';
|
|
10
|
+
import { SkeletonPlaceholder, Tag, AILabel } from '@carbon/react';
|
|
11
11
|
|
|
12
12
|
var _AILabel;
|
|
13
13
|
const AITileBody = ({
|
|
@@ -17,6 +17,9 @@ const AITileBody = ({
|
|
|
17
17
|
customContent,
|
|
18
18
|
primaryIcon: PrimaryIcon,
|
|
19
19
|
secondaryIcon: SecondaryIcon,
|
|
20
|
+
aiLabelVariant = 'aiLabel',
|
|
21
|
+
aiLabelText = 'AI',
|
|
22
|
+
aiLabelTagType = 'gray',
|
|
20
23
|
isLoading
|
|
21
24
|
}) => {
|
|
22
25
|
const prefix = usePrefix();
|
|
@@ -40,11 +43,20 @@ const AITileBody = ({
|
|
|
40
43
|
}, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
|
|
41
44
|
fill: `var(--cds-icon-secondary)`,
|
|
42
45
|
size: 24
|
|
43
|
-
}),
|
|
46
|
+
}), aiLabelVariant === 'tag' ? /*#__PURE__*/React.createElement(Tag, {
|
|
47
|
+
size: "sm",
|
|
48
|
+
type: aiLabelTagType,
|
|
49
|
+
className: `${blockClass}--tag`,
|
|
50
|
+
decorator: _AILabel || (_AILabel = /*#__PURE__*/React.createElement(AILabel, {
|
|
51
|
+
aiText: "AI",
|
|
52
|
+
size: "xs",
|
|
53
|
+
kind: "inline"
|
|
54
|
+
}))
|
|
55
|
+
}, aiLabelText) : /*#__PURE__*/React.createElement(AILabel, {
|
|
44
56
|
autoAlign: true,
|
|
45
|
-
aiText:
|
|
57
|
+
aiText: aiLabelText,
|
|
46
58
|
size: "xs"
|
|
47
|
-
}))
|
|
59
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
48
60
|
className: `${blockClass}--title`
|
|
49
61
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
50
62
|
className: `${blockClass}--footer`
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import React, { ElementType } from 'react';
|
|
10
|
+
import { GlassTileBodyProps } from './GlassTileBody';
|
|
10
11
|
export type GlassTileProps = {
|
|
11
12
|
variant?: 'glass';
|
|
12
13
|
tileId: string;
|
|
@@ -17,6 +18,8 @@ export type GlassTileProps = {
|
|
|
17
18
|
customContent?: React.ReactNode | null;
|
|
18
19
|
primaryIcon?: ElementType | null;
|
|
19
20
|
secondaryIcon?: ElementType | null;
|
|
21
|
+
tagLabel?: string | null;
|
|
22
|
+
tagType?: GlassTileBodyProps['tagType'];
|
|
20
23
|
onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
|
|
21
24
|
ariaLabel?: string;
|
|
22
25
|
open?: boolean;
|
|
@@ -19,6 +19,8 @@ const GlassTile = ({
|
|
|
19
19
|
customContent,
|
|
20
20
|
primaryIcon: PrimaryIcon,
|
|
21
21
|
secondaryIcon: SecondaryIcon,
|
|
22
|
+
tagLabel,
|
|
23
|
+
tagType,
|
|
22
24
|
onClick: glassTileClickHandler,
|
|
23
25
|
ariaLabel,
|
|
24
26
|
open,
|
|
@@ -34,6 +36,8 @@ const GlassTile = ({
|
|
|
34
36
|
title: title,
|
|
35
37
|
subtitle: subtitle,
|
|
36
38
|
customContent: customContent,
|
|
39
|
+
tagLabel: tagLabel,
|
|
40
|
+
tagType: tagType,
|
|
37
41
|
isLoading: isLoading
|
|
38
42
|
});
|
|
39
43
|
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import { ElementType, ReactNode } from 'react';
|
|
10
|
+
import { type TagProps } from '@carbon/react';
|
|
11
|
+
type TagTypeName = TagProps<'div'>['type'];
|
|
10
12
|
export type GlassTileBodyProps = {
|
|
11
13
|
open?: boolean;
|
|
12
14
|
title?: string | null;
|
|
@@ -14,6 +16,9 @@ export type GlassTileBodyProps = {
|
|
|
14
16
|
customContent?: ReactNode;
|
|
15
17
|
primaryIcon?: ElementType | null;
|
|
16
18
|
secondaryIcon?: ElementType | null;
|
|
19
|
+
tagLabel?: string | null;
|
|
20
|
+
tagType?: TagTypeName;
|
|
17
21
|
isLoading?: boolean;
|
|
18
22
|
};
|
|
19
|
-
export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, tagLabel, tagType, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
|
|
10
|
-
import { SkeletonPlaceholder } from '@carbon/react';
|
|
10
|
+
import { SkeletonPlaceholder, Tag } from '@carbon/react';
|
|
11
11
|
|
|
12
12
|
const GlassTileBody = ({
|
|
13
13
|
open,
|
|
@@ -16,6 +16,8 @@ const GlassTileBody = ({
|
|
|
16
16
|
customContent,
|
|
17
17
|
primaryIcon: PrimaryIcon,
|
|
18
18
|
secondaryIcon: SecondaryIcon,
|
|
19
|
+
tagLabel,
|
|
20
|
+
tagType = 'gray',
|
|
19
21
|
isLoading
|
|
20
22
|
}) => {
|
|
21
23
|
const prefix = usePrefix();
|
|
@@ -37,7 +39,11 @@ const GlassTileBody = ({
|
|
|
37
39
|
}, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
|
|
38
40
|
fill: `var(--cds-icon-secondary)`,
|
|
39
41
|
size: 24
|
|
40
|
-
})
|
|
42
|
+
}), tagLabel && /*#__PURE__*/React.createElement(Tag, {
|
|
43
|
+
size: "sm",
|
|
44
|
+
type: tagType,
|
|
45
|
+
className: `${blockClass}--tag`
|
|
46
|
+
}, tagLabel)), /*#__PURE__*/React.createElement("div", {
|
|
41
47
|
className: `${blockClass}--title`
|
|
42
48
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
43
49
|
className: `${blockClass}--footer`
|
|
@@ -15065,7 +15065,7 @@ export declare const ThemeG10: {
|
|
|
15065
15065
|
type: string;
|
|
15066
15066
|
button: {
|
|
15067
15067
|
href: string;
|
|
15068
|
-
icon: import("@carbon/react
|
|
15068
|
+
icon: import("@carbon/icons-react").CarbonIconType;
|
|
15069
15069
|
text: string;
|
|
15070
15070
|
type: "tertiary";
|
|
15071
15071
|
};
|
|
@@ -30258,7 +30258,7 @@ export declare const ThemeG100: {
|
|
|
30258
30258
|
type: string;
|
|
30259
30259
|
button: {
|
|
30260
30260
|
href: string;
|
|
30261
|
-
icon: import("@carbon/react
|
|
30261
|
+
icon: import("@carbon/icons-react").CarbonIconType;
|
|
30262
30262
|
text: string;
|
|
30263
30263
|
type: "tertiary";
|
|
30264
30264
|
};
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import React, { ElementType } from 'react';
|
|
10
|
+
import { type AITileBodyProps, type AITileLabelVariant } from '../AITile/AITileBody';
|
|
10
11
|
export type AIPromptTileProps = {
|
|
11
12
|
variant: 'aiPrompt';
|
|
12
13
|
tileId: string;
|
|
@@ -16,6 +17,9 @@ export type AIPromptTileProps = {
|
|
|
16
17
|
productName?: string;
|
|
17
18
|
promptPlaceholder?: string;
|
|
18
19
|
primaryIcon?: ElementType | null;
|
|
20
|
+
aiLabelVariant?: AITileLabelVariant;
|
|
21
|
+
aiLabelText?: string;
|
|
22
|
+
aiLabelTagType?: AITileBodyProps['aiLabelTagType'];
|
|
19
23
|
onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
|
|
20
24
|
ariaLabel?: string;
|
|
21
25
|
open?: boolean;
|
|
@@ -21,6 +21,9 @@ const AIPromptTile = ({
|
|
|
21
21
|
productName,
|
|
22
22
|
promptPlaceholder = 'Start chatting...',
|
|
23
23
|
primaryIcon: PrimaryIcon,
|
|
24
|
+
aiLabelVariant = 'aiLabel',
|
|
25
|
+
aiLabelText = 'AI',
|
|
26
|
+
aiLabelTagType = 'gray',
|
|
24
27
|
onClick,
|
|
25
28
|
ariaLabel,
|
|
26
29
|
open,
|
|
@@ -66,11 +69,20 @@ const AIPromptTile = ({
|
|
|
66
69
|
}, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
|
|
67
70
|
fill: `var(--cds-icon-secondary)`,
|
|
68
71
|
size: 24
|
|
69
|
-
}),
|
|
72
|
+
}), aiLabelVariant === 'tag' ? /*#__PURE__*/React.createElement(react.Tag, {
|
|
73
|
+
size: "sm",
|
|
74
|
+
type: aiLabelTagType,
|
|
75
|
+
className: `${blockClass}--tag`,
|
|
76
|
+
decorator: _AILabel || (_AILabel = /*#__PURE__*/React.createElement(react.AILabel, {
|
|
77
|
+
aiText: "AI",
|
|
78
|
+
size: "xs",
|
|
79
|
+
kind: "inline"
|
|
80
|
+
}))
|
|
81
|
+
}, aiLabelText) : /*#__PURE__*/React.createElement(react.AILabel, {
|
|
70
82
|
autoAlign: true,
|
|
71
|
-
aiText:
|
|
83
|
+
aiText: aiLabelText,
|
|
72
84
|
size: "xs"
|
|
73
|
-
}))
|
|
85
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
74
86
|
className: `${blockClass}--title`
|
|
75
87
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
76
88
|
className: `${blockClass}--text-input-container ${textInput && `${blockClass}--text-input-container__active`}`
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import React, { ElementType } from 'react';
|
|
10
|
+
import { AITileBodyProps, AITileLabelVariant } from '../AITile/AITileBody';
|
|
10
11
|
export type AITileProps = {
|
|
11
12
|
variant: 'ai';
|
|
12
13
|
tileId: string;
|
|
@@ -17,6 +18,9 @@ export type AITileProps = {
|
|
|
17
18
|
customContent?: React.ReactNode | null;
|
|
18
19
|
primaryIcon?: ElementType | null;
|
|
19
20
|
secondaryIcon?: ElementType | null;
|
|
21
|
+
aiLabelVariant?: AITileLabelVariant;
|
|
22
|
+
aiLabelText?: string;
|
|
23
|
+
aiLabelTagType?: AITileBodyProps['aiLabelTagType'];
|
|
20
24
|
onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
|
|
21
25
|
ariaLabel?: string;
|
|
22
26
|
open?: boolean;
|
|
@@ -23,6 +23,9 @@ const AITile = ({
|
|
|
23
23
|
customContent,
|
|
24
24
|
primaryIcon: PrimaryIcon,
|
|
25
25
|
secondaryIcon: SecondaryIcon,
|
|
26
|
+
aiLabelVariant,
|
|
27
|
+
aiLabelText,
|
|
28
|
+
aiLabelTagType,
|
|
26
29
|
onClick: aiTileClickHandler,
|
|
27
30
|
ariaLabel,
|
|
28
31
|
open,
|
|
@@ -38,6 +41,9 @@ const AITile = ({
|
|
|
38
41
|
title: title,
|
|
39
42
|
subtitle: subtitle,
|
|
40
43
|
customContent: customContent,
|
|
44
|
+
aiLabelVariant: aiLabelVariant,
|
|
45
|
+
aiLabelText: aiLabelText,
|
|
46
|
+
aiLabelTagType: aiLabelTagType,
|
|
41
47
|
isLoading: isLoading
|
|
42
48
|
});
|
|
43
49
|
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import { ElementType, ReactNode } from 'react';
|
|
10
|
+
import { type TagProps } from '@carbon/react';
|
|
11
|
+
type TagTypeName = TagProps<'div'>['type'];
|
|
12
|
+
export type AITileLabelVariant = 'aiLabel' | 'tag';
|
|
10
13
|
export type AITileBodyProps = {
|
|
11
14
|
open?: boolean;
|
|
12
15
|
title?: string | null;
|
|
@@ -14,6 +17,10 @@ export type AITileBodyProps = {
|
|
|
14
17
|
customContent?: ReactNode;
|
|
15
18
|
primaryIcon?: ElementType | null;
|
|
16
19
|
secondaryIcon?: ElementType | null;
|
|
20
|
+
aiLabelVariant?: AITileLabelVariant;
|
|
21
|
+
aiLabelText?: string;
|
|
22
|
+
aiLabelTagType?: TagTypeName;
|
|
17
23
|
isLoading?: boolean;
|
|
18
24
|
};
|
|
19
|
-
export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, aiLabelVariant, aiLabelText, aiLabelTagType, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -19,6 +19,9 @@ const AITileBody = ({
|
|
|
19
19
|
customContent,
|
|
20
20
|
primaryIcon: PrimaryIcon,
|
|
21
21
|
secondaryIcon: SecondaryIcon,
|
|
22
|
+
aiLabelVariant = 'aiLabel',
|
|
23
|
+
aiLabelText = 'AI',
|
|
24
|
+
aiLabelTagType = 'gray',
|
|
22
25
|
isLoading
|
|
23
26
|
}) => {
|
|
24
27
|
const prefix = usePrefix.usePrefix();
|
|
@@ -42,11 +45,20 @@ const AITileBody = ({
|
|
|
42
45
|
}, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
|
|
43
46
|
fill: `var(--cds-icon-secondary)`,
|
|
44
47
|
size: 24
|
|
45
|
-
}),
|
|
48
|
+
}), aiLabelVariant === 'tag' ? /*#__PURE__*/React.createElement(react.Tag, {
|
|
49
|
+
size: "sm",
|
|
50
|
+
type: aiLabelTagType,
|
|
51
|
+
className: `${blockClass}--tag`,
|
|
52
|
+
decorator: _AILabel || (_AILabel = /*#__PURE__*/React.createElement(react.AILabel, {
|
|
53
|
+
aiText: "AI",
|
|
54
|
+
size: "xs",
|
|
55
|
+
kind: "inline"
|
|
56
|
+
}))
|
|
57
|
+
}, aiLabelText) : /*#__PURE__*/React.createElement(react.AILabel, {
|
|
46
58
|
autoAlign: true,
|
|
47
|
-
aiText:
|
|
59
|
+
aiText: aiLabelText,
|
|
48
60
|
size: "xs"
|
|
49
|
-
}))
|
|
61
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
50
62
|
className: `${blockClass}--title`
|
|
51
63
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
52
64
|
className: `${blockClass}--footer`
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import React, { ElementType } from 'react';
|
|
10
|
+
import { GlassTileBodyProps } from './GlassTileBody';
|
|
10
11
|
export type GlassTileProps = {
|
|
11
12
|
variant?: 'glass';
|
|
12
13
|
tileId: string;
|
|
@@ -17,6 +18,8 @@ export type GlassTileProps = {
|
|
|
17
18
|
customContent?: React.ReactNode | null;
|
|
18
19
|
primaryIcon?: ElementType | null;
|
|
19
20
|
secondaryIcon?: ElementType | null;
|
|
21
|
+
tagLabel?: string | null;
|
|
22
|
+
tagType?: GlassTileBodyProps['tagType'];
|
|
20
23
|
onClick?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
|
|
21
24
|
ariaLabel?: string;
|
|
22
25
|
open?: boolean;
|
|
@@ -21,6 +21,8 @@ const GlassTile = ({
|
|
|
21
21
|
customContent,
|
|
22
22
|
primaryIcon: PrimaryIcon,
|
|
23
23
|
secondaryIcon: SecondaryIcon,
|
|
24
|
+
tagLabel,
|
|
25
|
+
tagType,
|
|
24
26
|
onClick: glassTileClickHandler,
|
|
25
27
|
ariaLabel,
|
|
26
28
|
open,
|
|
@@ -36,6 +38,8 @@ const GlassTile = ({
|
|
|
36
38
|
title: title,
|
|
37
39
|
subtitle: subtitle,
|
|
38
40
|
customContent: customContent,
|
|
41
|
+
tagLabel: tagLabel,
|
|
42
|
+
tagType: tagType,
|
|
39
43
|
isLoading: isLoading
|
|
40
44
|
});
|
|
41
45
|
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
9
|
import { ElementType, ReactNode } from 'react';
|
|
10
|
+
import { type TagProps } from '@carbon/react';
|
|
11
|
+
type TagTypeName = TagProps<'div'>['type'];
|
|
10
12
|
export type GlassTileBodyProps = {
|
|
11
13
|
open?: boolean;
|
|
12
14
|
title?: string | null;
|
|
@@ -14,6 +16,9 @@ export type GlassTileBodyProps = {
|
|
|
14
16
|
customContent?: ReactNode;
|
|
15
17
|
primaryIcon?: ElementType | null;
|
|
16
18
|
secondaryIcon?: ElementType | null;
|
|
19
|
+
tagLabel?: string | null;
|
|
20
|
+
tagType?: TagTypeName;
|
|
17
21
|
isLoading?: boolean;
|
|
18
22
|
};
|
|
19
|
-
export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, tagLabel, tagType, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -18,6 +18,8 @@ const GlassTileBody = ({
|
|
|
18
18
|
customContent,
|
|
19
19
|
primaryIcon: PrimaryIcon,
|
|
20
20
|
secondaryIcon: SecondaryIcon,
|
|
21
|
+
tagLabel,
|
|
22
|
+
tagType = 'gray',
|
|
21
23
|
isLoading
|
|
22
24
|
}) => {
|
|
23
25
|
const prefix = usePrefix.usePrefix();
|
|
@@ -39,7 +41,11 @@ const GlassTileBody = ({
|
|
|
39
41
|
}, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
|
|
40
42
|
fill: `var(--cds-icon-secondary)`,
|
|
41
43
|
size: 24
|
|
42
|
-
})
|
|
44
|
+
}), tagLabel && /*#__PURE__*/React.createElement(react.Tag, {
|
|
45
|
+
size: "sm",
|
|
46
|
+
type: tagType,
|
|
47
|
+
className: `${blockClass}--tag`
|
|
48
|
+
}, tagLabel)), /*#__PURE__*/React.createElement("div", {
|
|
43
49
|
className: `${blockClass}--title`
|
|
44
50
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
45
51
|
className: `${blockClass}--footer`
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
declare function _extends(...args: any[]): any;
|
|
8
|
+
export { _extends as extends, _extends as extends };
|