beem-component 1.1.2 → 1.1.3

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.
Files changed (10) hide show
  1. package/dist/assets/css/sidebar.css +20 -0
  2. package/dist/components/ChatBody/chatBody.js +2 -2
  3. package/dist/components/ChatHeader/chatHeader.js +1 -1
  4. package/package.json +1 -1
  5. package/src/Chat.js +29 -19
  6. package/src/ChatHeader.js +5 -2
  7. package/src/lib/assets/css/sidebar.css +20 -0
  8. package/src/lib/components/ChatBody/chatBody.js +4 -4
  9. package/src/lib/components/ChatHeader/chatHeader.js +1 -4
  10. package/src/lib/components/index.js +1 -0
package/dist/assets/css/sidebar.css CHANGED
@@ -77,4 +77,24 @@
77
77
  overflow: auto;
78
78
  width: 25%;
79
79
  border: 1px solid #E2E2E2;
80
+ }
81
+
82
+ .chat-header-buttons {
83
+ display: flex;
84
+ flex-direction: row;
85
+ margin-left: auto;
86
+ }
87
+
88
+ .chat-header-buttons>*:not(:last-child) {
89
+ margin-right: 0.5rem;
90
+ }
91
+
92
+ .chat-footer {
93
+ display: flex;
94
+ flex-direction: row;
95
+ align-items: center;
96
+ }
97
+
98
+ .chat-footer>*:not(:last-child) {
99
+ margin-right: 0.5rem;
80
100
  }
package/dist/components/ChatBody/chatBody.js CHANGED
@@ -133,8 +133,8 @@ BmChat.Details = function (_ref6) {
133
133
  }));
134
134
  };
135
135
 
136
- BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n border-top: 0.071rem solid ", ";\n padding: 0.5rem 0rem;\n align-items: center;\n justify-content: center;\n ", "\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n"])), _colors.BmGrey400, ''
137
- /* background: ${BmGrey50}; */
136
+ BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n ", "\n padding: 0.5rem 0rem;\n align-items: center;\n justify-content: center;\n > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n"])), ''
137
+ /* border-top: 0.071rem solid ${BmGrey200}; */
138
138
  );
139
139
  var _default = BmChat;
140
140
  exports.default = _default;
package/dist/components/ChatHeader/chatHeader.js CHANGED
@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
14
14
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
15
 
16
16
  // import { BmGrey400 } from "../colors";
17
- var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n ", "\n padding: 1rem;\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n button {\n margin-left: auto;\n }\n"])), ''
17
+ var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n ", "\n padding: 1rem;\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n"])), ""
18
18
  /* border: 0.071rem solid ${BmGrey400}; */
19
19
  );
20
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/Chat.js CHANGED
@@ -1,14 +1,16 @@
1
- import React from 'react';
2
- import { AttachFile } from '@material-ui/icons';
3
- import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
4
- import QuickreplyIcon from '@mui/icons-material/Quickreply';
5
- import SendIcon from '@mui/icons-material/Send';
6
- import { BmChat, BmIcons, BmInput } from './lib/components';
1
+ import React from "react";
2
+ import { AttachFile } from "@material-ui/icons";
3
+ import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
4
+ import QuickreplyIcon from "@mui/icons-material/Quickreply";
5
+ import SendIcon from "@mui/icons-material/Send";
6
+ import { BmChat, BmIcons, BmInput } from "./lib/components";
7
+ import "../src/lib/assets/css/sidebar.css";
8
+ import { BmMessage, BmMessageTabInput } from "./lib/components/Chats/chatInput";
7
9
 
8
10
  const Chat = () => {
9
11
  return (
10
12
  <BmChat>
11
- <BmChat.Body style={{ flex: 1 }}>
13
+ <BmChat.Body>
12
14
  <BmChat.Details
13
15
  state="inbound"
14
16
  session="bot"
@@ -48,7 +50,7 @@ const Chat = () => {
48
50
  status="failed"
49
51
  >
50
52
  <p>Outbound</p>
51
- </BmChat.Details>{' '}
53
+ </BmChat.Details>{" "}
52
54
  <BmChat.Details
53
55
  state="outbound"
54
56
  session="live"
@@ -56,7 +58,7 @@ const Chat = () => {
56
58
  status="failed"
57
59
  >
58
60
  <p>Outbound</p>
59
- </BmChat.Details>{' '}
61
+ </BmChat.Details>{" "}
60
62
  <BmChat.Details
61
63
  state="outbound"
62
64
  session="live"
@@ -64,7 +66,7 @@ const Chat = () => {
64
66
  status="failed"
65
67
  >
66
68
  <p>Outbound</p>
67
- </BmChat.Details>{' '}
69
+ </BmChat.Details>{" "}
68
70
  <BmChat.Details
69
71
  state="outbound"
70
72
  session="live"
@@ -72,7 +74,7 @@ const Chat = () => {
72
74
  status="failed"
73
75
  >
74
76
  <p>Outbound</p>
75
- </BmChat.Details>{' '}
77
+ </BmChat.Details>{" "}
76
78
  <BmChat.Details
77
79
  state="outbound"
78
80
  session="live"
@@ -80,7 +82,7 @@ const Chat = () => {
80
82
  status="failed"
81
83
  >
82
84
  <p>Outbound</p>
83
- </BmChat.Details>{' '}
85
+ </BmChat.Details>{" "}
84
86
  <BmChat.Details
85
87
  state="outbound"
86
88
  session="live"
@@ -88,7 +90,7 @@ const Chat = () => {
88
90
  status="failed"
89
91
  >
90
92
  <p>Outbound</p>
91
- </BmChat.Details>{' '}
93
+ </BmChat.Details>{" "}
92
94
  <BmChat.Details
93
95
  state="outbound"
94
96
  session="live"
@@ -96,7 +98,7 @@ const Chat = () => {
96
98
  status="failed"
97
99
  >
98
100
  <p>Outbound</p>
99
- </BmChat.Details>{' '}
101
+ </BmChat.Details>{" "}
100
102
  <BmChat.Details
101
103
  state="outbound"
102
104
  session="live"
@@ -107,11 +109,19 @@ const Chat = () => {
107
109
  </BmChat.Details>
108
110
  </BmChat.Body>
109
111
  <BmChat.Footer>
110
- <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
111
- <BmIcons icon={<AttachFile />} size="xlarge" />
112
- <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
113
- <BmInput placeholder="Enter Message" />
114
- <BmIcons icon={<SendIcon />} size="xlarge" />
112
+ <div class="footer">
113
+ <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
114
+ </div>
115
+ <div class="footer">
116
+ <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
117
+ <BmIcons icon={<AttachFile />} size="xlarge" />
118
+ <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
119
+ {/* <BmInput placeholder="Enter Message" /> */}
120
+ <BmMessage>
121
+ <BmMessageTabInput placeholder="Type your message" />
122
+ </BmMessage>
123
+ <BmIcons icon={<SendIcon />} size="xlarge" />
124
+ </div>
115
125
  </BmChat.Footer>
116
126
  </BmChat>
117
127
  );
package/src/ChatHeader.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { BmChatHeader, BmButton } from "../src/lib/components/";
3
- import '../src/lib/assets/css/sidebar.css';
3
+ import "../src/lib/assets/css/sidebar.css";
4
4
 
5
5
  export const ChatHeader = () => {
6
6
  return (
@@ -9,7 +9,10 @@ export const ChatHeader = () => {
9
9
  <BmChatHeader>
10
10
  <h2>Contact Name</h2>
11
11
  <p>Last seen: 00:00</p>
12
- <BmButton size="medium">End Session</BmButton>
12
+ <div className="chat-header-buttons">
13
+ <BmButton size="medium">End Session</BmButton>
14
+ <BmButton size="medium">End Session</BmButton>
15
+ </div>
13
16
  </BmChatHeader>
14
17
  </div>
15
18
  </>
package/src/lib/assets/css/sidebar.css CHANGED
@@ -77,4 +77,24 @@
77
77
  overflow: auto;
78
78
  width: 25%;
79
79
  border: 1px solid #E2E2E2;
80
+ }
81
+
82
+ .chat-header-buttons {
83
+ display: flex;
84
+ flex-direction: row;
85
+ margin-left: auto;
86
+ }
87
+
88
+ .chat-header-buttons>*:not(:last-child) {
89
+ margin-right: 0.5rem;
90
+ }
91
+
92
+ .chat-footer {
93
+ display: flex;
94
+ flex-direction: row;
95
+ align-items: center;
96
+ }
97
+
98
+ .chat-footer>*:not(:last-child) {
99
+ margin-right: 0.5rem;
80
100
  }
package/src/lib/components/ChatBody/chatBody.js CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  BmPrimaryBlue,
10
10
  BmPrimaryBlack,
11
11
  BmSecondaryDarkGreen,
12
+ BmGrey200,
12
13
  } from "../colors";
13
14
 
14
15
  const BmChat = styled.div`
@@ -134,14 +135,13 @@ BmChat.Details = ({
134
135
 
135
136
  BmChat.Footer = styled.div`
136
137
  display: flex;
137
- flex-direction: row;
138
- border-top: 0.071rem solid ${BmGrey400};
138
+ flex-direction: column;
139
+ ${'' /* border-top: 0.071rem solid ${BmGrey200}; */}
139
140
  padding: 0.5rem 0rem;
140
141
  align-items: center;
141
142
  justify-content: center;
142
- ${'' /* background: ${BmGrey50}; */}
143
143
  > *:not(:last-child) {
144
- margin-right: 0.5rem;
144
+ margin-bottom: 0.5rem;
145
145
  }
146
146
  `;
147
147
 
package/src/lib/components/ChatHeader/chatHeader.js CHANGED
@@ -5,12 +5,9 @@ export const BmChatHeader = styled.div`
5
5
  display: flex;
6
6
  flex-direction: row;
7
7
  align-items: center;
8
- ${'' /* border: 0.071rem solid ${BmGrey400}; */}
8
+ ${"" /* border: 0.071rem solid ${BmGrey400}; */}
9
9
  padding: 1rem;
10
10
  > *:not(:last-child) {
11
11
  margin-right: 0.5rem;
12
12
  }
13
- button {
14
- margin-left: auto;
15
- }
16
13
  `;
package/src/lib/components/index.js CHANGED
@@ -67,6 +67,7 @@ export {
67
67
  BmListBox,
68
68
  BmListHeader,
69
69
  BmRowLabel,
70
+ // Fix height and if there is dropdown option inside the modal body
70
71
  BmModal,
71
72
  BmNoteBar,
72
73
  BmProgressBar,