Skip to content

Commit b5cc3b6

Browse files
jphawkElena Kazakova
jphawk
and
Elena Kazakova
authored
Add Message (#103)
* Add Messages * Add story improvements Co-authored-by: Elena Kazakova <[email protected]>
1 parent 0f76a92 commit b5cc3b6

File tree

4 files changed

+123
-0
lines changed

4 files changed

+123
-0
lines changed

‎src/components/message/Message.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { FunctionComponent } from "react";
2+
import styled, { css } from "styled-components";
3+
import theme from "../../theme";
4+
import { Icon } from "../icon";
5+
6+
type MessageProps = {
7+
image?: string;
8+
status?: "success" | "notification" | "danger";
9+
children?: React.ReactNode;
10+
};
11+
12+
export const MessageWrapper = styled.div<MessageProps>`
13+
display:flex;
14+
align-items:center;
15+
border-radius: ${theme.radiusDefault};
16+
color: ${theme.colors.white};
17+
font-size: ${theme.fontSizes.regular};
18+
padding: ${theme.spacing.spacing03};
19+
line-height:1.5rem;
20+
21+
${({ status }) =>
22+
status === "success" &&
23+
css`
24+
background: ${theme.colors.success};
25+
`}
26+
${({ status }) =>
27+
status === "danger" &&
28+
css`
29+
background: ${theme.colors.danger};
30+
`}
31+
${({ status }) =>
32+
status === "notification" &&
33+
css`
34+
background: ${theme.colors.notification};
35+
`}
36+
`;
37+
38+
export const IconBox = styled.div<MessageProps>`
39+
display:flex;
40+
align-items:center;
41+
border-radius: ${theme.radiusDefault};
42+
padding: ${theme.spacing.spacing02};
43+
margin-right: ${theme.spacing.spacing03};
44+
45+
${({ status }) =>
46+
status === "success" &&
47+
css`
48+
background: rgba(30, 132, 73, 0.5);
49+
`}
50+
${({ status }) =>
51+
status === "danger" &&
52+
css`
53+
background: rgba(176, 58, 46, 0.5);
54+
`}
55+
${({ status }) =>
56+
status === "notification" &&
57+
css`
58+
background: rgba(40, 116, 166, 0.5);
59+
`}
60+
`;
61+
62+
export const Align = styled.div`
63+
margin-bottom:auto;
64+
`;
65+
66+
export const Message: FunctionComponent<MessageProps> = ({
67+
children,
68+
image,
69+
status
70+
}) =>
71+
<MessageWrapper status={status}>
72+
<Align>
73+
<IconBox status={status}>
74+
<Icon image={image} width="1.5rem" height="1.5rem"/>
75+
</IconBox>
76+
</Align>
77+
{children}
78+
</MessageWrapper>;

‎src/components/message/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Message";

‎src/stories/Message.stories.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useState } from "react";
2+
import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
3+
import { Message } from "../components/message";
4+
import { Text } from "../components/text";
5+
import { Spacer } from "../components/spacer";
6+
7+
<Meta title="Components/Message" component={Message} />
8+
9+
# Message
10+
#### Props
11+
12+
```typescript
13+
type MessageProps = {
14+
image?: string;
15+
status?: "success" | "notification" | "danger";
16+
children?: React.ReactNode;
17+
};
18+
```
19+
20+
## Default
21+
22+
<Preview>
23+
<Story name="default">
24+
<>
25+
<Message status="success" image="SUCCESS">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</Message>
26+
<Spacer height="1rem" />
27+
<Message status="danger" image="DANGER">Account has been added</Message>
28+
<Spacer height="1rem" />
29+
<Message status="notification" image="NOTIFY">Account has been added</Message>
30+
</>
31+
</Story>
32+
</Preview>

‎src/utils/icons.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,4 +227,16 @@ fill="#fff"/><g transform="matrix(2 0 0 2 256 256)"><path d="M-32-25c-3 7-24 29-
227227
<path d="M4 16H6V18H4V16Z" fill="#161632"/>
228228
</svg>
229229
`,
230+
SUCCESS: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
231+
<path d="M15.9052 9.59476C15.6127 9.30189 15.1372 9.30189 14.8447 9.59476L11.625 12.8141L10.2802 11.4698C9.98772 11.1769 9.51222 11.1769 9.21972 11.4698C8.92684 11.7626 8.92684 12.2374 9.21972 12.5303L11.0947 14.4053C11.241 14.5519 11.433 14.625 11.625 14.625C11.817 14.625 12.009 14.5519 12.1552 14.4053L15.9052 10.6553C16.1981 10.3624 16.1981 9.88764 15.9052 9.59476Z" fill="white"/>
232+
<path d="M19.3333 11.3333C18.9653 11.3333 18.6667 11.632 18.6667 12C18.6667 15.676 15.676 18.6667 12 18.6667C8.324 18.6667 5.33333 15.676 5.33333 12C5.33333 8.324 8.324 5.33333 12 5.33333C13.7897 5.33333 15.4697 6.03267 16.731 7.30267C16.99 7.56433 17.4123 7.56567 17.6737 7.306C17.935 7.04667 17.9363 6.62467 17.677 6.36333C16.1637 4.83933 14.1473 4 12 4C7.58867 4 4 7.58867 4 12C4 16.4113 7.58867 20 12 20C16.4113 20 20 16.4113 20 12C20 11.632 19.7013 11.3333 19.3333 11.3333Z" fill="white"/>
233+
</svg>`,
234+
DANGER: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
235+
<path d="M12.0004 16.9626C11.6552 16.9626 11.3751 16.6829 11.3751 16.3376C11.3751 15.9924 11.6548 15.7126 12 15.7126H12.0004C12.3455 15.7126 12.6254 15.9924 12.6254 16.3376C12.6254 16.6829 12.3455 16.9626 12.0004 16.9626ZM12.625 14.1501V10.2751C12.625 9.92993 12.3452 9.65015 12 9.65015C11.6548 9.65015 11.375 9.92993 11.375 10.2751V14.1501C11.375 14.4954 11.6548 14.7751 12 14.7751C12.3452 14.7751 12.625 14.4954 12.625 14.1501ZM20 18.5392V18.447C20 18.2975 19.962 18.1492 19.8901 18.0181L18.8038 16.0371C18.6378 15.7345 18.2579 15.6237 17.9552 15.7897C17.6526 15.9556 17.5417 16.3356 17.7078 16.6382L18.5541 18.1814H5.44592L12 6.2301L16.2854 14.0444C16.4513 14.347 16.8313 14.4579 17.1339 14.2919C17.4365 14.1259 17.5474 13.746 17.3813 13.4434L12.7822 5.05688C12.6256 4.77124 12.3258 4.59375 12 4.59375C11.6742 4.59375 11.3744 4.77124 11.2178 5.05688L4.10986 18.0181C4.03796 18.1492 4 18.2975 4 18.447V18.5392C4 19.0311 4.40027 19.4314 4.89221 19.4314H19.1078C19.5997 19.4314 20 19.0311 20 18.5392Z" fill="white"/>
236+
</svg>`,
237+
NOTIFY: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
238+
<path d="M12 8.59375C12.3452 8.59375 12.625 8.31393 12.625 7.96875C12.625 7.62357 12.3452 7.34375 12 7.34375C11.6548 7.34375 11.375 7.62357 11.375 7.96875C11.375 8.31393 11.6548 8.59375 12 8.59375Z" fill="white"/>
239+
<path d="M17.6569 6.34313C16.1458 4.83216 14.1369 4 12 4C9.86312 4 7.85416 4.83216 6.34313 6.34313C4.83216 7.85416 4 9.86312 4 12C4 14.1369 4.83216 16.1458 6.34313 17.6569C7.85416 19.1678 9.86312 20 12 20C13.4629 20 14.8943 19.6013 16.1394 18.8471C16.4347 18.6682 16.529 18.2839 16.3502 17.9887C16.1713 17.6934 15.787 17.5991 15.4918 17.7779C14.442 18.4139 13.2346 18.75 12 18.75C8.27803 18.75 5.25 15.722 5.25 12C5.25 8.27803 8.27803 5.25 12 5.25C15.722 5.25 18.75 8.27803 18.75 12C18.75 13.3309 18.3542 14.6264 17.6054 15.7464C17.4136 16.0333 17.4907 16.4215 17.7776 16.6133C18.0646 16.8051 18.4527 16.7281 18.6446 16.4411C19.5313 15.1148 20 13.5791 20 12C20 9.86312 19.1678 7.85416 17.6569 6.34313Z" fill="white"/>
240+
<path d="M12 9.84375C11.6548 9.84375 11.375 10.1236 11.375 10.4688V16.0312C11.375 16.3764 11.6548 16.6562 12 16.6562C12.3452 16.6562 12.625 16.3764 12.625 16.0312V10.4688C12.625 10.1236 12.3452 9.84375 12 9.84375Z" fill="white"/>
241+
</svg>`,
230242
};

0 commit comments

Comments
 (0)