@dust-tt/sparkle 0.4.9 → 0.4.10
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/cjs/index.js +1 -1
- package/dist/esm/components/ContentMessage.d.ts +2 -1
- package/dist/esm/components/ContentMessage.d.ts.map +1 -1
- package/dist/esm/components/ContentMessage.js +8 -5
- package/dist/esm/components/ContentMessage.js.map +1 -1
- package/dist/esm/stories/ContentMessage.stories.d.ts +5 -42
- package/dist/esm/stories/ContentMessage.stories.d.ts.map +1 -1
- package/dist/esm/stories/ContentMessage.stories.js +10 -0
- package/dist/esm/stories/ContentMessage.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ContentMessage.tsx +27 -11
- package/src/stories/ContentMessage.stories.tsx +22 -3
|
@@ -11,8 +11,9 @@ export interface ContentMessageProps {
|
|
|
11
11
|
size?: ContentMessageSizeType;
|
|
12
12
|
variant?: ContentMessageVariantType;
|
|
13
13
|
icon?: ComponentType;
|
|
14
|
+
action?: React.ReactNode;
|
|
14
15
|
}
|
|
15
|
-
declare function ContentMessage({ title, variant, children, size, className, icon, }: ContentMessageProps): React.JSX.Element;
|
|
16
|
+
declare function ContentMessage({ title, variant, children, size, className, icon, action, }: ContentMessageProps): React.JSX.Element;
|
|
16
17
|
declare function ContentMessageAction(props: ButtonProps): React.JSX.Element;
|
|
17
18
|
export interface ContentMessageInlineProps {
|
|
18
19
|
title?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ContentMessage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAU,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIjE,QAAA,MAAM,wBAAwB,+GAWpB,CAAC;AAEX,KAAK,yBAAyB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E,QAAA,MAAM,qBAAqB,6BAA8B,CAAC;AAE1D,KAAK,sBAAsB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAiGrE,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,IAAI,CAAC,EAAE,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"ContentMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ContentMessage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAU,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIjE,QAAA,MAAM,wBAAwB,+GAWpB,CAAC;AAEX,KAAK,yBAAyB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E,QAAA,MAAM,qBAAqB,6BAA8B,CAAC;AAE1D,KAAK,sBAAsB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAiGrE,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,OAAgB,EAChB,QAAQ,EACR,IAAW,EACX,SAAc,EACd,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,qBAiCrB;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,WAAW,qBAQ/C;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,OAAgB,EAChB,QAAQ,EACR,SAAc,EACd,IAAI,GACL,EAAE,yBAAyB,qBA+B3B;AAED,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -100,12 +100,15 @@ var textVariants = cva("s-text-sm", {
|
|
|
100
100
|
},
|
|
101
101
|
});
|
|
102
102
|
function ContentMessage(_a) {
|
|
103
|
-
var title = _a.title, _b = _a.variant, variant = _b === void 0 ? "info" : _b, children = _a.children, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, icon = _a.icon;
|
|
103
|
+
var title = _a.title, _b = _a.variant, variant = _b === void 0 ? "info" : _b, children = _a.children, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, icon = _a.icon, action = _a.action;
|
|
104
104
|
return (React.createElement("div", { className: cn(contentMessageVariants({ variant: variant, size: size }), className) },
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
React.createElement("div", { className: cn("s-flex s-gap-3", action ? "s-items-center s-justify-between" : "s-flex-col") },
|
|
106
|
+
React.createElement("div", { className: "s-flex s-flex-col s-gap-1" },
|
|
107
|
+
(icon || title) && (React.createElement("div", { className: "s-flex s-items-center s-gap-1.5" },
|
|
108
|
+
icon && (React.createElement(Icon, { size: "sm", visual: icon, className: iconVariants({ variant: variant }) })),
|
|
109
|
+
title && (React.createElement("div", { className: titleVariants({ variant: variant }) }, title)))),
|
|
110
|
+
children && (React.createElement("div", { className: textVariants({ variant: variant }) }, children))),
|
|
111
|
+
action && React.createElement("div", { className: "s-shrink-0" }, action))));
|
|
109
112
|
}
|
|
110
113
|
function ContentMessageAction(props) {
|
|
111
114
|
return (React.createElement(Button, __assign({ size: "xs", className: cn("s-shrink-0", props.className) }, props)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentMessage.js","sourceRoot":"","sources":["../../../src/components/ContentMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAe,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,wBAAwB,GAAG;IAC/B,SAAS;IACT,SAAS;IACT,SAAS;IACT,WAAW;IACX,MAAM;IACN,OAAO;IACP,MAAM;IACN,MAAM;IACN,QAAQ;IACR,SAAS;CACD,CAAC;AAIX,IAAM,qBAAqB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAI1D,IAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,wDAAwD;IACjE,OAAO,EAAE,8CAA8C;IACvD,OAAO,EAAE,8CAA8C;IACvD,SAAS,EAAE,kDAAkD;IAC7D,IAAI,EAAE,wCAAwC;IAC9C,KAAK,EAAE,0CAA0C;IACjD,IAAI,EAAE,wCAAwC;IAC9C,IAAI,EAAE,wCAAwC;IAC9C,MAAM,EAAE,4CAA4C;IACpD,OAAO,EACL,sEAAsE;CACzE,CAAC;AAEF,IAAM,sBAAsB,GAAG,GAAG,CAChC,qEAAqE,EACrE;IACE,QAAQ,EAAE;QACR,OAAO,EAAE,mBAAmB;QAC5B,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;SACjB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAEF,IAAM,4BAA4B,GAAG,GAAG,CACtC,wEAAwE,EACxE;IACE,QAAQ,EAAE;QACR,OAAO,EAAE,mBAAmB;KAC7B;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CACF,CAAC;AAEF,IAAM,YAAY,GAAG,GAAG,CAAC,YAAY,EAAE;IACrC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,OAAO,EAAE,kDAAkD;YAC3D,OAAO,EAAE,kDAAkD;YAC3D,SAAS,EAAE,sDAAsD;YACjE,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,4CAA4C;YAClD,MAAM,EAAE,gDAAgD;YACxD,OAAO,EAAE,4DAA4D;SACtE;KACF;CACF,CAAC,CAAC;AAEH,IAAM,aAAa,GAAG,GAAG,CAAC,cAAc,EAAE;IACxC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,gDAAgD;YACzD,OAAO,EAAE,kDAAkD;YAC3D,OAAO,EAAE,kDAAkD;YAC3D,SAAS,EAAE,sDAAsD;YACjE,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,4CAA4C;YAClD,MAAM,EAAE,gDAAgD;YACxD,OAAO,EAAE,gDAAgD;SAC1D;KACF;CACF,CAAC,CAAC;AAEH,IAAM,YAAY,GAAG,GAAG,CAAC,WAAW,EAAE;IACpC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,OAAO,EAAE,kDAAkD;YAC3D,OAAO,EAAE,kDAAkD;YAC3D,SAAS,EAAE,sDAAsD;YACjE,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,4CAA4C;YAClD,MAAM,EAAE,gDAAgD;YACxD,OAAO,EAAE,4DAA4D;SACtE;KACF;CACF,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ContentMessage.js","sourceRoot":"","sources":["../../../src/components/ContentMessage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,49 +1,12 @@
|
|
|
1
|
-
import type { StoryObj } from "@storybook/react";
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { ContentMessage } from "../index_with_tw_base";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
component: typeof ContentMessage;
|
|
7
|
-
argTypes: {
|
|
8
|
-
title: {
|
|
9
|
-
control: "text";
|
|
10
|
-
description: string;
|
|
11
|
-
};
|
|
12
|
-
children: {
|
|
13
|
-
control: "text";
|
|
14
|
-
description: string;
|
|
15
|
-
};
|
|
16
|
-
variant: {
|
|
17
|
-
options: string[];
|
|
18
|
-
control: {
|
|
19
|
-
type: "select";
|
|
20
|
-
};
|
|
21
|
-
description: string;
|
|
22
|
-
};
|
|
23
|
-
size: {
|
|
24
|
-
options: string[];
|
|
25
|
-
control: {
|
|
26
|
-
type: "select";
|
|
27
|
-
};
|
|
28
|
-
description: string;
|
|
29
|
-
};
|
|
30
|
-
icon: {
|
|
31
|
-
options: string[];
|
|
32
|
-
mapping: {
|
|
33
|
-
readonly none: null;
|
|
34
|
-
readonly InformationCircleIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
|
|
35
|
-
readonly ChatBubbleBottomCenterTextIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
|
|
36
|
-
readonly HeartIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
|
|
37
|
-
};
|
|
38
|
-
control: {
|
|
39
|
-
type: "select";
|
|
40
|
-
};
|
|
41
|
-
description: string;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
4
|
+
type ContentMessageStoryProps = React.ComponentProps<typeof ContentMessage> & {
|
|
5
|
+
showAction?: boolean;
|
|
44
6
|
};
|
|
7
|
+
declare const meta: Meta<ContentMessageStoryProps>;
|
|
45
8
|
export default meta;
|
|
46
|
-
type Story = StoryObj<
|
|
9
|
+
type Story = StoryObj<ContentMessageStoryProps>;
|
|
47
10
|
export declare const Basic: Story;
|
|
48
11
|
export declare const WithIcon: Story;
|
|
49
12
|
export declare const WithList: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ContentMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"ContentMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ContentMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,cAAc,EAKf,MAAM,uBAAuB,CAAC;AAE/B,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AASF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,wBAAwB,CA4CxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,wBAAwB,CAAC,CAAC;AAEhD,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
1
2
|
import React from "react";
|
|
2
3
|
import { ChatBubbleBottomCenterTextIcon, ContentMessage, ContentMessageAction, ContentMessageInline, HeartIcon, InformationCircleIcon, } from "../index_with_tw_base";
|
|
3
4
|
var ICONS = {
|
|
@@ -45,14 +46,23 @@ var meta = {
|
|
|
45
46
|
control: { type: "select" },
|
|
46
47
|
description: "Icon to display",
|
|
47
48
|
},
|
|
49
|
+
showAction: {
|
|
50
|
+
control: "boolean",
|
|
51
|
+
description: "Show a right-aligned action button",
|
|
52
|
+
},
|
|
48
53
|
},
|
|
49
54
|
};
|
|
50
55
|
export default meta;
|
|
51
56
|
export var Basic = {
|
|
57
|
+
render: function (_a) {
|
|
58
|
+
var showAction = _a.showAction, args = __rest(_a, ["showAction"]);
|
|
59
|
+
return (React.createElement(ContentMessage, __assign({}, args, { action: showAction ? (React.createElement(ContentMessageAction, { variant: "primary", label: "Action" })) : undefined })));
|
|
60
|
+
},
|
|
52
61
|
args: {
|
|
53
62
|
title: "This is a title",
|
|
54
63
|
children: "This is a message. It can be multiple lines long.",
|
|
55
64
|
size: "md",
|
|
65
|
+
showAction: false,
|
|
56
66
|
},
|
|
57
67
|
};
|
|
58
68
|
export var WithIcon = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ContentMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,8BAA8B,EAC9B,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,SAAS,EACT,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ContentMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ContentMessage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,8BAA8B,EAC9B,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,SAAS,EACT,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAM/B,IAAM,KAAK,GAAG;IACZ,IAAI,EAAE,IAAI;IACV,qBAAqB,EAAE,qBAAqB;IAC5C,8BAA8B,EAAE,8BAA8B;IAC9D,SAAS,EAAE,SAAS;CACZ,CAAC;AAEX,IAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACpC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;SACtC;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,SAAS;gBACT,SAAS;gBACT,SAAS;gBACT,WAAW;gBACX,MAAM;gBACN,OAAO;gBACP,MAAM;gBACN,MAAM;gBACN,QAAQ;gBACR,SAAS;aACV;YACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,sBAAsB;SACpC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,qBAAqB;SACnC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,iBAAiB;SAC/B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oCAAoC;SAClD;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,UAAC,EAAuB;QAArB,IAAA,UAAU,gBAAA,EAAK,IAAI,cAArB,cAAuB,CAAF;QAAO,OAAA,CACnC,oBAAC,cAAc,eACT,IAAI,IACR,MAAM,EACJ,UAAU,CAAC,CAAC,CAAC,CACX,oBAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG,CAC1D,CAAC,CAAC,CAAC,SAAS,IAEf,CACH,CAAA;KAAA;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,QAAQ,EAAE,mDAAmD;QAC7D,IAAI,EAAE,IAAI;QACV,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,qBAAqB;QAC3B,QAAQ,EAAE,mDAAmD;QAC7D,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,CACR,4BAAI,SAAS,EAAC,oDAAoD;YAChE,4BAAI,SAAS,EAAC,+CAA+C;gBAC3D,6BAAK,SAAS,EAAC,mFAAmF,oHAG5F,CACH;YACL,4BAAI,SAAS,EAAC,+CAA+C;gBAC3D,6BAAK,SAAS,EAAC,mFAAmF,8HAG5F,CACH,CACF,CACN;KACF;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,QAAQ,EAAE,CACR,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,qFAA4D;YAC5D;;gBACqE,GAAG;gBACtE,kDAA4B;oBACxB,CACF,CACP;QACD,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAU;IAClC,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,gEAAgE,IAC5E;QACC,SAAS;QACT,SAAS;QACT,SAAS;QACT,WAAW;QACX,MAAM;QACN,OAAO;QACP,MAAM;QACN,MAAM;QACN,QAAQ;KACT,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CACjB,oBAAC,cAAc,IACb,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,UAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,aAAU,EACtE,OAAO,EACL,OASY,EAEd,IAAI,EAAC,IAAI;;QAEE,OAAO;qFAEH,CAClB,EArBkB,CAqBlB,CAAC,CACE,CACP,EAnCa,CAmCb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAU;IAChC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,oBAAoB,IAAC,IAAI,EAAE,qBAAqB,EAAE,OAAO,EAAC,MAAM,4EAE1C,CACxB,EAJa,CAIb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,oBAAoB,IAAC,IAAI,EAAE,qBAAqB,EAAE,OAAO,EAAC,MAAM;;QAE/D,oBAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG,CACpC,CACxB,EALa,CAKb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAU;IACzC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,oBAAoB,IAAC,IAAI,EAAE,qBAAqB,EAAE,OAAO,EAAC,MAAM;;QAE/D,oBAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG;QACzD,oBAAC,oBAAoB,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ,GAAG,CACtC,CACxB,EANa,CAMb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAU;IACpC,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,2BAA2B;QACxC,oBAAC,oBAAoB,IACnB,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EAAC,MAAM;;YAGd,oBAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG,CACpC;QACvB,oBAAC,oBAAoB,IACnB,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EAAC,SAAS,GACjB,CACE,CACP,EAhBa,CAgBb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAU;IACnC,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,2BAA2B,IACvC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CACvE,oBAAC,oBAAoB,IACnB,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EACL,OASY;QAGb,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;;QACnD,oBAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG,CACpC,CACxB,EApBwE,CAoBxE,CAAC,CACE,CACP,EAxBa,CAwBb;CACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -126,6 +126,7 @@ export interface ContentMessageProps {
|
|
|
126
126
|
size?: ContentMessageSizeType;
|
|
127
127
|
variant?: ContentMessageVariantType;
|
|
128
128
|
icon?: ComponentType;
|
|
129
|
+
action?: React.ReactNode;
|
|
129
130
|
}
|
|
130
131
|
|
|
131
132
|
function ContentMessage({
|
|
@@ -135,22 +136,37 @@ function ContentMessage({
|
|
|
135
136
|
size = "md",
|
|
136
137
|
className = "",
|
|
137
138
|
icon,
|
|
139
|
+
action,
|
|
138
140
|
}: ContentMessageProps) {
|
|
139
141
|
return (
|
|
140
142
|
<div className={cn(contentMessageVariants({ variant, size }), className)}>
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
143
|
+
<div
|
|
144
|
+
className={cn(
|
|
145
|
+
"s-flex s-gap-3",
|
|
146
|
+
action ? "s-items-center s-justify-between" : "s-flex-col"
|
|
147
|
+
)}
|
|
148
|
+
>
|
|
149
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
150
|
+
{(icon || title) && (
|
|
151
|
+
<div className="s-flex s-items-center s-gap-1.5">
|
|
152
|
+
{icon && (
|
|
153
|
+
<Icon
|
|
154
|
+
size="sm"
|
|
155
|
+
visual={icon}
|
|
156
|
+
className={iconVariants({ variant })}
|
|
157
|
+
/>
|
|
158
|
+
)}
|
|
159
|
+
{title && (
|
|
160
|
+
<div className={titleVariants({ variant })}>{title}</div>
|
|
161
|
+
)}
|
|
162
|
+
</div>
|
|
163
|
+
)}
|
|
164
|
+
{children && (
|
|
165
|
+
<div className={textVariants({ variant })}>{children}</div>
|
|
149
166
|
)}
|
|
150
|
-
{title && <div className={titleVariants({ variant })}>{title}</div>}
|
|
151
167
|
</div>
|
|
152
|
-
|
|
153
|
-
|
|
168
|
+
{action && <div className="s-shrink-0">{action}</div>}
|
|
169
|
+
</div>
|
|
154
170
|
{/* TODO(2025-08-13 aubin): Allow passing a ContentMessageAction here. */}
|
|
155
171
|
</div>
|
|
156
172
|
);
|
|
@@ -10,6 +10,10 @@ import {
|
|
|
10
10
|
InformationCircleIcon,
|
|
11
11
|
} from "../index_with_tw_base";
|
|
12
12
|
|
|
13
|
+
type ContentMessageStoryProps = React.ComponentProps<typeof ContentMessage> & {
|
|
14
|
+
showAction?: boolean;
|
|
15
|
+
};
|
|
16
|
+
|
|
13
17
|
const ICONS = {
|
|
14
18
|
none: null,
|
|
15
19
|
InformationCircleIcon: InformationCircleIcon,
|
|
@@ -17,7 +21,7 @@ const ICONS = {
|
|
|
17
21
|
HeartIcon: HeartIcon,
|
|
18
22
|
} as const;
|
|
19
23
|
|
|
20
|
-
const meta = {
|
|
24
|
+
const meta: Meta<ContentMessageStoryProps> = {
|
|
21
25
|
title: "Components/ContentMessage",
|
|
22
26
|
component: ContentMessage,
|
|
23
27
|
argTypes: {
|
|
@@ -56,17 +60,32 @@ const meta = {
|
|
|
56
60
|
control: { type: "select" },
|
|
57
61
|
description: "Icon to display",
|
|
58
62
|
},
|
|
63
|
+
showAction: {
|
|
64
|
+
control: "boolean",
|
|
65
|
+
description: "Show a right-aligned action button",
|
|
66
|
+
},
|
|
59
67
|
},
|
|
60
|
-
}
|
|
68
|
+
};
|
|
61
69
|
|
|
62
70
|
export default meta;
|
|
63
|
-
type Story = StoryObj<
|
|
71
|
+
type Story = StoryObj<ContentMessageStoryProps>;
|
|
64
72
|
|
|
65
73
|
export const Basic: Story = {
|
|
74
|
+
render: ({ showAction, ...args }) => (
|
|
75
|
+
<ContentMessage
|
|
76
|
+
{...args}
|
|
77
|
+
action={
|
|
78
|
+
showAction ? (
|
|
79
|
+
<ContentMessageAction variant="primary" label="Action" />
|
|
80
|
+
) : undefined
|
|
81
|
+
}
|
|
82
|
+
/>
|
|
83
|
+
),
|
|
66
84
|
args: {
|
|
67
85
|
title: "This is a title",
|
|
68
86
|
children: "This is a message. It can be multiple lines long.",
|
|
69
87
|
size: "md",
|
|
88
|
+
showAction: false,
|
|
70
89
|
},
|
|
71
90
|
};
|
|
72
91
|
|