beem-component 1.1.7 → 1.1.8

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 (19) hide show
  1. package/dist/components/ChatComponents/ColorPicker/colorPicker.stories.js +3 -3
  2. package/dist/components/{ContactCards → ChatComponents/ContactCards}/contactCards.js +1 -1
  3. package/dist/components/{ContactCards → ChatComponents/ContactCards}/contactCards.stories.js +4 -4
  4. package/dist/components/ChatComponents/FormAccordion/FormAccordion.stories.js +6 -2
  5. package/dist/components/{InfoTab → ChatComponents/InfoTab}/infoTab.js +0 -1
  6. package/dist/components/{InfoTab → ChatComponents/InfoTab}/infoTab.stories.js +3 -5
  7. package/dist/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js +6 -2
  8. package/dist/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js +43 -0
  9. package/dist/components/index.js +2 -2
  10. package/package.json +1 -1
  11. package/src/lib/components/ChatComponents/ColorPicker/colorPicker.stories.js +1 -1
  12. package/src/lib/components/{ContactCards → ChatComponents/ContactCards}/contactCards.js +1 -1
  13. package/src/lib/components/{ContactCards → ChatComponents/ContactCards}/contactCards.stories.js +4 -4
  14. package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.stories.js +23 -19
  15. package/src/lib/components/{InfoTab → ChatComponents/InfoTab}/infoTab.js +0 -1
  16. package/src/lib/components/{InfoTab → ChatComponents/InfoTab}/infoTab.stories.js +3 -4
  17. package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js +24 -22
  18. package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js +47 -0
  19. package/src/lib/components/index.js +2 -2
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.ChatBody = void 0;
6
+ exports.default = exports.ColorPicker = void 0;
7
7
 
8
8
  var _colorPicker = require("./colorPicker");
9
9
 
@@ -14,7 +14,7 @@ var _default = {
14
14
  };
15
15
  exports.default = _default;
16
16
 
17
- var ChatBody = function ChatBody() {
17
+ var ColorPicker = function ColorPicker() {
18
18
  return /*#__PURE__*/React.createElement(React.Fragment, null, ["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map(function (color) {
19
19
  return /*#__PURE__*/React.createElement(_colorPicker.BmColorPicker, {
20
20
  key: color,
@@ -23,4 +23,4 @@ var ChatBody = function ChatBody() {
23
23
  }));
24
24
  };
25
25
 
26
- exports.ChatBody = ChatBody;
26
+ exports.ColorPicker = ColorPicker;
@@ -7,7 +7,7 @@ exports.default = exports.BmContactCard = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
 
10
- var _colors = require("../colors");
10
+ var _colors = require("../../colors");
11
11
 
12
12
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
13
13
 
@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  var _contactCards = _interopRequireDefault(require("./contactCards"));
11
11
 
12
- var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
12
+ var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
13
13
 
14
- var _messageCounter = _interopRequireDefault(require("../MessageCounter/messageCounter"));
14
+ var _messageCounter = _interopRequireDefault(require("../../MessageCounter/messageCounter"));
15
15
 
16
- var _tags = require("../tags");
16
+ var _tags = require("../../tags");
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
@@ -25,7 +25,7 @@ var _default = {
25
25
  BmTag: _tags.BmTag,
26
26
  BmCounter: _messageCounter.default
27
27
  },
28
- title: "components/ContactCard"
28
+ title: "components/Chat/Components/ContactCard"
29
29
  };
30
30
  exports.default = _default;
31
31
 
@@ -15,11 +15,15 @@ var _default = {
15
15
  exports.default = _default;
16
16
 
17
17
  var FormAccordion = function FormAccordion() {
18
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Information")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatForm, null, /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Account No.")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
18
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
19
+ style: {
20
+ width: "30%"
21
+ }
22
+ }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Information")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatForm, null, /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Account No.")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
19
23
  placeholder: "Enter here"
20
24
  })), /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Preferred Language")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
21
25
  placeholder: "Enter here"
22
- }))))));
26
+ })))))));
23
27
  };
24
28
 
25
29
  exports.FormAccordion = FormAccordion;
@@ -13,7 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
13
13
 
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
- // import { BmGrey400 } from "../colors";
17
16
  var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 1.5rem;\n ", "\n > *:not(:last-child) {\n margin-bottom: 1rem;\n }\n"])), ''
18
17
  /* border: 0.071rem solid ${BmGrey400}; */
19
18
  );
@@ -9,20 +9,18 @@ var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  var _infoTab = _interopRequireDefault(require("./infoTab"));
11
11
 
12
- var _tags = require("../tags");
13
-
14
- var _buttonIconsOnly = require("../Buttons/buttonIconsOnly");
12
+ var _buttonIconsOnly = require("../../Buttons/buttonIconsOnly");
15
13
 
16
14
  var _icons = require("@material-ui/icons");
17
15
 
18
- var _iconStyles = require("../iconStyles");
16
+ var _iconStyles = require("../../iconStyles");
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
19
 
22
20
  /* eslint-disable import/no-anonymous-default-export */
23
21
  var _default = {
24
22
  component: _infoTab.default,
25
- title: "components/InfoTab"
23
+ title: "components/Chat/Components/InfoTab"
26
24
  };
27
25
  exports.default = _default;
28
26
 
@@ -15,13 +15,17 @@ var _default = {
15
15
  exports.default = _default;
16
16
 
17
17
  var LabelAccordion = function LabelAccordion() {
18
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Labels"), /*#__PURE__*/React.createElement("a", null, "Manage Labels")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatLabels, null, /*#__PURE__*/React.createElement("h4", null, "Added labels"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmTag, {
18
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
19
+ style: {
20
+ width: "30%"
21
+ }
22
+ }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Labels"), /*#__PURE__*/React.createElement("a", null, "Manage Labels")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatLabels, null, /*#__PURE__*/React.createElement("h4", null, "Added labels"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmTag, {
19
23
  variant: "success"
20
24
  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
21
25
  variant: "warning"
22
26
  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
23
27
  variant: "error"
24
- }, /*#__PURE__*/React.createElement("p", null, "label")))))));
28
+ }, /*#__PURE__*/React.createElement("p", null, "label"))))))));
25
29
  };
26
30
 
27
31
  exports.LabelAccordion = LabelAccordion;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.NoteAccordion = void 0;
7
+
8
+ var _ = require("../..");
9
+
10
+ var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
11
+
12
+ var _icons = require("@material-ui/icons");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ // eslint-disable-next-line import/no-anonymous-default-export
17
+ var _default = {
18
+ component: _.BmChatLabels,
19
+ title: "components/Chat/Components/NoteAccordion"
20
+ };
21
+ exports.default = _default;
22
+
23
+ var NoteAccordion = function NoteAccordion() {
24
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
25
+ style: {
26
+ width: "30%"
27
+ }
28
+ }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Notes")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatNotes, null, /*#__PURE__*/React.createElement(_.BmChatNotes.Input, {
29
+ type: "text",
30
+ placeholder: "Add Note"
31
+ }), /*#__PURE__*/React.createElement(_.BmChatNotes.Details, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmIcons, {
32
+ icon: /*#__PURE__*/React.createElement(_icons.Edit, null),
33
+ size: "xsmall"
34
+ }), /*#__PURE__*/React.createElement(_.BmIcons, {
35
+ icon: /*#__PURE__*/React.createElement(_ContentCopy.default, null),
36
+ size: "xsmall"
37
+ }), /*#__PURE__*/React.createElement(_.BmIcons, {
38
+ icon: /*#__PURE__*/React.createElement(_icons.Delete, null),
39
+ size: "xsmall"
40
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "By User")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "12:00pm")))))))));
41
+ };
42
+
43
+ exports.NoteAccordion = NoteAccordion;
@@ -359,9 +359,9 @@ var _chatBody = _interopRequireDefault(require("./ChatComponents/ChatBody/chatBo
359
359
 
360
360
  var _chatHeader = require("./ChatComponents/ChatHeader/chatHeader");
361
361
 
362
- var _contactCards = _interopRequireDefault(require("./ContactCards/contactCards"));
362
+ var _contactCards = _interopRequireDefault(require("./ChatComponents/ContactCards/contactCards"));
363
363
 
364
- var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
364
+ var _infoTab = _interopRequireDefault(require("./ChatComponents/InfoTab/infoTab"));
365
365
 
366
366
  var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
367
367
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
@@ -6,7 +6,7 @@ export default {
6
6
  title: "components/Chat/Components/ColorPicker",
7
7
  };
8
8
 
9
- export const ChatBody = () => {
9
+ export const ColorPicker = () => {
10
10
  return (
11
11
  <>
12
12
  {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
@@ -1,5 +1,5 @@
1
1
  import styled from "styled-components";
2
- import { BmGrey100 } from "../colors";
2
+ import { BmGrey100 } from "../../colors";
3
3
 
4
4
  export const BmContactCard = styled.div`
5
5
  display: flex;
@@ -1,13 +1,13 @@
1
1
  /* eslint-disable import/no-anonymous-default-export */
2
2
  import React from "react";
3
3
  import BmContactCard from "./contactCards";
4
- import BmAvatar from "../Avatars/avatars";
5
- import BmCounter from "../MessageCounter/messageCounter";
6
- import { BmTag } from "../tags";
4
+ import BmAvatar from "../../Avatars/avatars";
5
+ import BmCounter from "../../MessageCounter/messageCounter";
6
+ import { BmTag } from "../../tags";
7
7
 
8
8
  export default {
9
9
  component: { BmContactCard, BmAvatar, BmTag, BmCounter },
10
- title: "components/ContactCard",
10
+ title: "components/Chat/Components/ContactCard",
11
11
  };
12
12
 
13
13
  export const ContactCard = () => {
@@ -9,25 +9,29 @@ export default {
9
9
  export const FormAccordion = () => {
10
10
  return (
11
11
  <>
12
- <BmAccordion>
13
- <BmAccordion.Title><h3>Information</h3></BmAccordion.Title>
14
- <BmAccordion.Body>
15
- <BmChatForm>
16
- <BmChatForm.Group>
17
- <BmChatForm.Label>
18
- <h4>Account No.</h4>
19
- </BmChatForm.Label>
20
- <BmChatForm.Input placeholder="Enter here" />
21
- </BmChatForm.Group>
22
- <BmChatForm.Group>
23
- <BmChatForm.Label>
24
- <h4>Preferred Language</h4>
25
- </BmChatForm.Label>
26
- <BmChatForm.Input placeholder="Enter here" />
27
- </BmChatForm.Group>
28
- </BmChatForm>
29
- </BmAccordion.Body>
30
- </BmAccordion>
12
+ <div style={{ width: "30%" }}>
13
+ <BmAccordion>
14
+ <BmAccordion.Title>
15
+ <h3>Information</h3>
16
+ </BmAccordion.Title>
17
+ <BmAccordion.Body>
18
+ <BmChatForm>
19
+ <BmChatForm.Group>
20
+ <BmChatForm.Label>
21
+ <h4>Account No.</h4>
22
+ </BmChatForm.Label>
23
+ <BmChatForm.Input placeholder="Enter here" />
24
+ </BmChatForm.Group>
25
+ <BmChatForm.Group>
26
+ <BmChatForm.Label>
27
+ <h4>Preferred Language</h4>
28
+ </BmChatForm.Label>
29
+ <BmChatForm.Input placeholder="Enter here" />
30
+ </BmChatForm.Group>
31
+ </BmChatForm>
32
+ </BmAccordion.Body>
33
+ </BmAccordion>
34
+ </div>
31
35
  </>
32
36
  );
33
37
  };
@@ -1,5 +1,4 @@
1
1
  import styled from "styled-components";
2
- // import { BmGrey400 } from "../colors";
3
2
 
4
3
  const BmInfoTab = styled.div`
5
4
  display: flex;
@@ -1,14 +1,13 @@
1
1
  /* eslint-disable import/no-anonymous-default-export */
2
2
  import React from "react";
3
3
  import BmInfoTab from "./infoTab";
4
- import { BmTag } from "../tags";
5
- import { BmBtnIcon } from "../Buttons/buttonIconsOnly";
4
+ import { BmBtnIcon } from "../../Buttons/buttonIconsOnly";
6
5
  import { MoreVert, Phone } from "@material-ui/icons";
7
- import { BmIcons } from "../iconStyles";
6
+ import { BmIcons } from "../../iconStyles";
8
7
 
9
8
  export default {
10
9
  component: BmInfoTab,
11
- title: "components/InfoTab",
10
+ title: "components/Chat/Components/InfoTab",
12
11
  };
13
12
 
14
13
  export const InfoTab = () => {
@@ -9,28 +9,30 @@ export default {
9
9
  export const LabelAccordion = () => {
10
10
  return (
11
11
  <>
12
- <BmAccordion>
13
- <BmAccordion.Title>
14
- <h3>Labels</h3>
15
- <a>Manage Labels</a>
16
- </BmAccordion.Title>
17
- <BmAccordion.Body>
18
- <BmChatLabels>
19
- <h4>Added labels</h4>
20
- <div>
21
- <BmTag variant="success">
22
- <p>label</p>
23
- </BmTag>
24
- <BmTag variant="warning">
25
- <p>label</p>
26
- </BmTag>
27
- <BmTag variant="error">
28
- <p>label</p>
29
- </BmTag>
30
- </div>
31
- </BmChatLabels>
32
- </BmAccordion.Body>
33
- </BmAccordion>
12
+ <div style={{ width: "30%" }}>
13
+ <BmAccordion>
14
+ <BmAccordion.Title>
15
+ <h3>Labels</h3>
16
+ <a>Manage Labels</a>
17
+ </BmAccordion.Title>
18
+ <BmAccordion.Body>
19
+ <BmChatLabels>
20
+ <h4>Added labels</h4>
21
+ <div>
22
+ <BmTag variant="success">
23
+ <p>label</p>
24
+ </BmTag>
25
+ <BmTag variant="warning">
26
+ <p>label</p>
27
+ </BmTag>
28
+ <BmTag variant="error">
29
+ <p>label</p>
30
+ </BmTag>
31
+ </div>
32
+ </BmChatLabels>
33
+ </BmAccordion.Body>
34
+ </BmAccordion>
35
+ </div>
34
36
  </>
35
37
  );
36
38
  };
@@ -0,0 +1,47 @@
1
+ import { BmAccordion, BmChatLabels, BmChatNotes, BmIcons } from "../..";
2
+ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
3
+ import { Delete, Edit } from "@material-ui/icons";
4
+
5
+ // eslint-disable-next-line import/no-anonymous-default-export
6
+ export default {
7
+ component: BmChatLabels,
8
+ title: "components/Chat/Components/NoteAccordion",
9
+ };
10
+
11
+ export const NoteAccordion = () => {
12
+ return (
13
+ <>
14
+ <div style={{ width: "30%" }}>
15
+ <BmAccordion>
16
+ <BmAccordion.Title>
17
+ <h3>Notes</h3>
18
+ </BmAccordion.Title>
19
+ <BmAccordion.Body>
20
+ <BmChatNotes>
21
+ <BmChatNotes.Input type="text" placeholder="Add Note" />
22
+ {/* Display Note */}
23
+ <BmChatNotes.Details>
24
+ <div>
25
+ <p>Description</p>
26
+ </div>
27
+ <div>
28
+ <BmIcons icon={<Edit />} size="xsmall" />
29
+ <BmIcons icon={<ContentCopyIcon />} size="xsmall" />
30
+ <BmIcons icon={<Delete />} size="xsmall" />
31
+ </div>
32
+ <div>
33
+ <p>
34
+ <i>By User</i>
35
+ </p>
36
+ <p>
37
+ <i>12:00pm</i>
38
+ </p>
39
+ </div>
40
+ </BmChatNotes.Details>
41
+ </BmChatNotes>
42
+ </BmAccordion.Body>
43
+ </BmAccordion>
44
+ </div>
45
+ </>
46
+ );
47
+ };
@@ -34,8 +34,8 @@ import { MainWrapper } from "../components/MainWrapper";
34
34
  //Chat Components
35
35
  import BmChat from "./ChatComponents/ChatBody/chatBody";
36
36
  import { BmChatHeader } from "./ChatComponents/ChatHeader/chatHeader";
37
- import BmContactCard from "./ContactCards/contactCards";
38
- import BmInfoTab from "./InfoTab/infoTab";
37
+ import BmContactCard from "./ChatComponents/ContactCards/contactCards";
38
+ import BmInfoTab from "./ChatComponents/InfoTab/infoTab";
39
39
  import BmCounter from "./MessageCounter/messageCounter";
40
40
  //Chat Accordion components
41
41
  import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";