Skip to content

Commit 8feefb7

Browse files
gmacevgmacev
committed
Merge branch 'master' of https://github.com/nordcloud/GNUI into fix/support-installs-from-git
2 parents ab84d92 + 43f923d commit 8feefb7

5 files changed

Lines changed: 402 additions & 23 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@nordcloud/gnui",
33
"description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
4-
"version": "11.2.7",
4+
"version": "11.3.0",
55
"license": "MIT",
66
"repository": {
77
"type": "git",

‎src/components/message/Message.mdx‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,46 @@ import * as MessageStories from "./Message.stories";
77

88
#### Message properties
99

10-
| properties | required | type | description |
11-
| ----------: | :------: | :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
12-
| status | false | <code>success</code>, <code>notification</code>, <code>danger</code>, <code>warning</code>, <code>discovery</code> | |
13-
| image | false | string | to get icon names look into <a href="?path=/docs/components-svgicon--size">SVG icon component</a> |
14-
| borderColor | false | string | border color |
15-
| background | false | string | background color |
16-
| color | false | string | text color |
10+
| properties | required | type | description |
11+
| ---------------: | :------: | :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
12+
| status | false | <code>success</code>, <code>notification</code>, <code>danger</code>, <code>warning</code>, <code>discovery</code> | |
13+
| image | false | string | to get icon names look into <a href="?path=/docs/components-svgicon--size">SVG icon component</a> |
14+
| borderColor | false | string | border color |
15+
| background | false | string | background color |
16+
| color | false | string | text color |
17+
| expandable | false | boolean | enables expandable/collapsible message mode (default: <code>false</code>) |
18+
| defaultExpanded | false | boolean | initial expanded state for uncontrolled mode |
19+
| expanded | false | boolean | controlled expanded state |
20+
| onExpandedChange | false | <code>(expanded: boolean) =&gt; void</code> | called when expanded state changes |
21+
| onToggle | false | <code>(expanded: boolean) =&gt; void</code> | optional alias of <code>onExpandedChange</code> |
22+
| expandedContent | false | ReactNode | dedicated expanded content slot rendered below summary content |
23+
| expandIcon | false | string | icon used for expand toggle (default: <code>down</code>) |
24+
| collapseIcon | false | string | icon used when expanded; if omitted, <code>expandIcon</code> rotates like Accordion |
1725

1826
## default
1927

2028
<Canvas>
2129
<Story of={MessageStories.Default} />
2230
</Canvas>
2331

32+
## Expandable Uncontrolled
33+
34+
<Canvas>
35+
<Story of={MessageStories.ExpandableUncontrolled} />
36+
</Canvas>
37+
38+
## Expandable Controlled
39+
40+
<Canvas>
41+
<Story of={MessageStories.ExpandableControlled} />
42+
</Canvas>
43+
44+
## Expandable Custom Content
45+
46+
<Canvas>
47+
<Story of={MessageStories.ExpandableCustomContent} />
48+
</Canvas>
49+
2450
## Status
2551

2652
<Canvas>

‎src/components/message/Message.stories.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as React from "react";
12
import { Meta, StoryObj } from "@storybook/react";
23
import theme from "../../theme";
34
import { Button } from "../button";
@@ -13,6 +14,34 @@ const meta: Meta = {
1314

1415
export default meta;
1516

17+
function ExpandableControlledStory() {
18+
const [isExpanded, setIsExpanded] = React.useState(false);
19+
const controlledExpandedContent = (
20+
<Text color={theme.color.text.text02}>
21+
This message uses controlled expanded state.
22+
</Text>
23+
);
24+
25+
return (
26+
<FlexContainer direction="column" alignItems="start">
27+
<Button size="sm" onClick={() => setIsExpanded((current) => !current)}>
28+
{isExpanded ? "Collapse from parent" : "Expand from parent"}
29+
</Button>
30+
<Spacer height="0.5rem" />
31+
<Message
32+
expandable
33+
expanded={isExpanded}
34+
status="discovery"
35+
image="help"
36+
expandedContent={controlledExpandedContent}
37+
onExpandedChange={setIsExpanded}
38+
>
39+
Expandable message (controlled)
40+
</Message>
41+
</FlexContainer>
42+
);
43+
}
44+
1645
export const Default: StoryObj = {
1746
render: () => (
1847
<Message>
@@ -27,6 +56,71 @@ export const Default: StoryObj = {
2756
name: "default",
2857
};
2958

59+
export const ExpandableUncontrolled: StoryObj = {
60+
render: () => (
61+
<Message
62+
expandable
63+
defaultExpanded
64+
image="info"
65+
status="notification"
66+
expandedContent={
67+
<Text color={theme.color.text.text02}>
68+
This section is rendered from the dedicated expanded content slot.
69+
</Text>
70+
}
71+
>
72+
Expandable message (uncontrolled)
73+
</Message>
74+
),
75+
name: "expandable uncontrolled",
76+
};
77+
78+
export const ExpandableControlled: StoryObj = {
79+
render: () => <ExpandableControlledStory />,
80+
name: "expandable controlled",
81+
};
82+
83+
export const ExpandableCustomContent: StoryObj = {
84+
render: () => (
85+
<Message
86+
expandable
87+
image="success"
88+
status="success"
89+
expandedContent={
90+
<div>
91+
<Text mb={theme.spacing.spacing02}>Arbitrary JSX content:</Text>
92+
<a href="https://www.nordcloud.com" target="_blank" rel="noreferrer">
93+
Open link
94+
</a>
95+
<table
96+
style={{
97+
marginTop: theme.spacing.spacing02,
98+
width: "100%",
99+
tableLayout: "fixed",
100+
}}
101+
>
102+
<thead>
103+
<tr>
104+
<th align="left">Region</th>
105+
<th align="left">Status</th>
106+
</tr>
107+
</thead>
108+
<tbody>
109+
<tr>
110+
<td>eu-west-1</td>
111+
<td>Healthy</td>
112+
</tr>
113+
</tbody>
114+
</table>
115+
</div>
116+
}
117+
>
118+
Expandable message with custom content
119+
</Message>
120+
),
121+
name: "expandable custom content",
122+
};
123+
30124
export const Status: StoryObj = {
31125
render: () => (
32126
<>

0 commit comments

Comments
 (0)