beem-component 1.2.0 → 1.2.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/Avatars/avatars.stories.js +1 -1
- package/dist/components/ChatComponents/ChatBody/chatBody.js +1 -1
- package/dist/components/Modals/modal.js +15 -1
- package/package.json +1 -1
- package/src/App.js +75 -2
- package/src/Chat.js +10 -0
- package/src/lib/components/Avatars/avatars.stories.js +1 -1
- package/src/lib/components/ChatComponents/ChatBody/chatBody.js +1 -0
- package/src/lib/components/Modals/modal.js +12 -0
|
@@ -39,7 +39,7 @@ var _default = {
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
user: {
|
|
42
|
-
description: "Type of the Avatar ('chatbot', 'employee' or Material-UI icon)",
|
|
42
|
+
description: "Type of the Avatar ('chatbot', 'employee' or Material-UI icon), If not chatbot or employee, background color will be grey",
|
|
43
43
|
defaultValue: {
|
|
44
44
|
summary: undefined
|
|
45
45
|
}
|
|
@@ -59,7 +59,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
|
|
|
59
59
|
return "row";
|
|
60
60
|
});
|
|
61
61
|
|
|
62
|
-
var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-width: 50%;\n > * {\n margin-top: 0.5rem;\n }\n"])));
|
|
62
|
+
var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-width: 50%;\n > * {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem; \n }\n"])));
|
|
63
63
|
|
|
64
64
|
var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.5rem;\n background: ", ";\n color: ", ";\n border-radius: ", ";\n border: 0.071rem solid ", ";\n word-break: break-all;\n margin: 0rem;\n"])), function (_ref2) {
|
|
65
65
|
var state = _ref2.state;
|
|
@@ -153,7 +153,21 @@ BmModal.Header = function (_ref4) {
|
|
|
153
153
|
});
|
|
154
154
|
};
|
|
155
155
|
|
|
156
|
-
BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n ", "\n"])),
|
|
156
|
+
BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n height: ", ";\n overflow: auto;\n ", "\n ", "\n"])), function (_ref5) {
|
|
157
|
+
var size = _ref5.size;
|
|
158
|
+
|
|
159
|
+
if (size) {
|
|
160
|
+
if (size === "small") return "21.429rem";
|
|
161
|
+
if (size === "default") return "35.714rem";
|
|
162
|
+
if (size === "large") return "57.143rem";
|
|
163
|
+
if (size === "xlarge") return "81.429rem";
|
|
164
|
+
return size;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
return "35.714rem";
|
|
168
|
+
}, ''
|
|
169
|
+
/* height: 100%; */
|
|
170
|
+
, ''
|
|
157
171
|
/* > * {
|
|
158
172
|
display: flex;
|
|
159
173
|
flex-direction: row;
|
package/package.json
CHANGED
package/src/App.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import "../src/main.scss";
|
|
3
|
-
import { MainWrapper } from "./lib/components";
|
|
3
|
+
import { BmButton, MainWrapper, BmModal } from "./lib/components";
|
|
4
4
|
import { GlobalStyle } from "./lib/components/globalStyles";
|
|
5
5
|
import "./lib/assets/css/sidebar.scss";
|
|
6
6
|
import SideBar from "./SideBar";
|
|
@@ -10,10 +10,83 @@ import CustomerInfo from "./CustomerInfo";
|
|
|
10
10
|
import InfoAccordion from "./InfoAccordion";
|
|
11
11
|
|
|
12
12
|
export const App = () => {
|
|
13
|
+
const [showModal, setShowModal] = useState(false);
|
|
13
14
|
return (
|
|
14
15
|
<>
|
|
15
16
|
<GlobalStyle />
|
|
16
17
|
<MainWrapper>
|
|
18
|
+
<div>
|
|
19
|
+
<BmButton onClick={() => setShowModal(!showModal)}>
|
|
20
|
+
Click Me!
|
|
21
|
+
</BmButton>
|
|
22
|
+
</div>
|
|
23
|
+
<BmModal show={showModal} onHide={() => setShowModal(false)} centered>
|
|
24
|
+
<BmModal.Header closeButton>
|
|
25
|
+
<h2>Header</h2>
|
|
26
|
+
</BmModal.Header>
|
|
27
|
+
<BmModal.Body>
|
|
28
|
+
<p>This is a body</p>
|
|
29
|
+
<p>This is a body</p>
|
|
30
|
+
<p>This is a body</p>
|
|
31
|
+
<p>This is a body</p>
|
|
32
|
+
<p>This is a body</p>
|
|
33
|
+
<p>This is a body</p>
|
|
34
|
+
<p>This is a body</p>
|
|
35
|
+
<p>This is a body</p>
|
|
36
|
+
<p>This is a body</p>
|
|
37
|
+
<p>This is a body</p>
|
|
38
|
+
<p>This is a body</p>
|
|
39
|
+
<p>This is a body</p>
|
|
40
|
+
<p>This is a body</p>
|
|
41
|
+
<p>This is a body</p>
|
|
42
|
+
<p>This is a body</p>
|
|
43
|
+
<p>This is a body</p>
|
|
44
|
+
<p>This is a body</p>
|
|
45
|
+
<p>This is a body</p>
|
|
46
|
+
<p>This is a body</p>
|
|
47
|
+
<p>This is a body</p>
|
|
48
|
+
<p>This is a body</p>
|
|
49
|
+
<p>This is a body</p>
|
|
50
|
+
<p>This is a body</p>
|
|
51
|
+
<p>This is a body</p>
|
|
52
|
+
<p>This is a body</p>
|
|
53
|
+
<p>This is a body</p>
|
|
54
|
+
<p>This is a body</p>
|
|
55
|
+
<p>This is a body</p>
|
|
56
|
+
<p>This is a body</p>
|
|
57
|
+
<p>This is a body</p>
|
|
58
|
+
<p>This is a body</p>
|
|
59
|
+
<p>This is a body</p>
|
|
60
|
+
<p>This is a body</p>
|
|
61
|
+
<p>This is a body</p>
|
|
62
|
+
<p>This is a body</p>
|
|
63
|
+
<p>This is a body</p>
|
|
64
|
+
<p>This is a body</p>
|
|
65
|
+
<p>This is a body</p>
|
|
66
|
+
<p>This is a body</p>
|
|
67
|
+
<p>This is a body</p>
|
|
68
|
+
<p>This is a body</p>
|
|
69
|
+
<p>This is a body</p>
|
|
70
|
+
<p>This is a body</p>
|
|
71
|
+
<p>This is a body</p>
|
|
72
|
+
<p>This is a body</p>
|
|
73
|
+
<p>This is a body</p>
|
|
74
|
+
<p>This is a body</p>
|
|
75
|
+
<p>This is a body</p>
|
|
76
|
+
<p>This is a body</p>
|
|
77
|
+
<p>This is a body</p>
|
|
78
|
+
<p>This is a body</p>
|
|
79
|
+
<p>This is a body</p>
|
|
80
|
+
<p>This is a body</p>
|
|
81
|
+
<p>This is a body</p>
|
|
82
|
+
<p>This is a body</p>
|
|
83
|
+
<p>This is a body</p>
|
|
84
|
+
<p>This is a body</p>
|
|
85
|
+
</BmModal.Body>
|
|
86
|
+
<BmModal.Footer>
|
|
87
|
+
<p>This is a footer</p>
|
|
88
|
+
</BmModal.Footer>
|
|
89
|
+
</BmModal>
|
|
17
90
|
<div className="main-chat-container">
|
|
18
91
|
<div className="chat-container">
|
|
19
92
|
<div className="sidebar">
|
package/src/Chat.js
CHANGED
|
@@ -20,6 +20,16 @@ const Chat = () => {
|
|
|
20
20
|
src={image}
|
|
21
21
|
fileName={<p>attachment.jpg</p>}
|
|
22
22
|
/>
|
|
23
|
+
<BmChat.Details
|
|
24
|
+
state="inbound"
|
|
25
|
+
session="bot"
|
|
26
|
+
displayTime={<p>12:00pm</p>}
|
|
27
|
+
status="sent"
|
|
28
|
+
// src={image}
|
|
29
|
+
// fileName={<p>attachment.jpg</p>}
|
|
30
|
+
>
|
|
31
|
+
Hello
|
|
32
|
+
</BmChat.Details>
|
|
23
33
|
<BmChat.Details
|
|
24
34
|
state="outbound"
|
|
25
35
|
session="live"
|
|
@@ -21,7 +21,7 @@ export default {
|
|
|
21
21
|
},
|
|
22
22
|
user: {
|
|
23
23
|
description:
|
|
24
|
-
"Type of the Avatar ('chatbot', 'employee' or Material-UI icon)",
|
|
24
|
+
"Type of the Avatar ('chatbot', 'employee' or Material-UI icon), If not chatbot or employee, background color will be grey",
|
|
25
25
|
defaultValue: { summary: undefined },
|
|
26
26
|
},
|
|
27
27
|
},
|
|
@@ -138,6 +138,18 @@ BmModal.Body = styled.div`
|
|
|
138
138
|
> *:not(:last-child) {
|
|
139
139
|
margin-bottom: 0.5rem;
|
|
140
140
|
}
|
|
141
|
+
height: ${({ size }) => {
|
|
142
|
+
if (size) {
|
|
143
|
+
if (size === "small") return "21.429rem";
|
|
144
|
+
if (size === "default") return "35.714rem";
|
|
145
|
+
if (size === "large") return "57.143rem";
|
|
146
|
+
if (size === "xlarge") return "81.429rem";
|
|
147
|
+
return size;
|
|
148
|
+
}
|
|
149
|
+
return "35.714rem";
|
|
150
|
+
}};
|
|
151
|
+
overflow: auto;
|
|
152
|
+
${'' /* height: 100%; */}
|
|
141
153
|
${'' /* > * {
|
|
142
154
|
display: flex;
|
|
143
155
|
flex-direction: row;
|