beem-component 0.9.8 → 0.9.9

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.
@@ -45,7 +45,6 @@ var BmAccordicon = function BmAccordicon(_ref) {
45
45
  trailingIcon = _ref.trailingIcon,
46
46
  rest = _objectWithoutProperties(_ref, _excluded);
47
47
 
48
- console.log(children);
49
48
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmAccordiconMenu, rest, dropdown && (isOpen ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest)), /*#__PURE__*/_react.default.createElement(BmAccordiconDetails, null, children)));
50
49
  };
51
50
 
@@ -0,0 +1,138 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _colors = require("./colors");
17
+
18
+ var _iconStyles = require("./iconStyles");
19
+
20
+ var _excluded = ["children", "disabled", "expandIcon"],
21
+ _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
22
+
23
+ var _templateObject, _templateObject2, _templateObject3;
24
+
25
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
+
27
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
28
+
29
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
30
+
31
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
32
+
33
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
34
+
35
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
36
+
37
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
38
+
39
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
40
+
41
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
42
+
43
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
44
+
45
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
46
+
47
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
48
+
49
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
50
+
51
+ var _React$createContext = /*#__PURE__*/_react.default.createContext({}),
52
+ Provider = _React$createContext.Provider,
53
+ Consumer = _React$createContext.Consumer;
54
+
55
+ var Dropdown = function Dropdown(value, rest) {
56
+ if (value.expandIcon && value.expandIcon === "none") {
57
+ return;
58
+ }
59
+
60
+ if (!value.expandIcon) {
61
+ return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest);
62
+ }
63
+
64
+ if (value.expandIcon && value.expandIcon !== "none") {
65
+ return /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
66
+ icon: value.expandIcon
67
+ });
68
+ }
69
+ };
70
+
71
+ var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: row;\n ", "\n padding: 0.571rem 1.143rem;\n border: 1px solid \n background: ", ";\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n"])), ""
72
+ /* padding: 0.571rem; */
73
+ , _colors.BmPrimaryWhite);
74
+
75
+ var BmAccordionDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n"])));
76
+
77
+ var BmAccordionWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
78
+
79
+ var BmAccordion = function BmAccordion(_ref) {
80
+ var children = _ref.children,
81
+ disabled = _ref.disabled,
82
+ expandIcon = _ref.expandIcon,
83
+ rest = _objectWithoutProperties(_ref, _excluded);
84
+
85
+ var _useState = (0, _react.useState)(false),
86
+ _useState2 = _slicedToArray(_useState, 2),
87
+ toggle = _useState2[0],
88
+ setToggle = _useState2[1];
89
+
90
+ return /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, null, /*#__PURE__*/_react.default.createElement(Provider, {
91
+ value: {
92
+ toggle: toggle,
93
+ setToggle: setToggle,
94
+ disabled: disabled,
95
+ expandIcon: expandIcon
96
+ }
97
+ }, children));
98
+ };
99
+
100
+ BmAccordion.Title = function (_ref2) {
101
+ var children = _ref2.children,
102
+ leadingIcon = _ref2.leadingIcon,
103
+ trailingIcon = _ref2.trailingIcon,
104
+ size = _ref2.size,
105
+ rest = _objectWithoutProperties(_ref2, _excluded2);
106
+
107
+ return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
108
+ return /*#__PURE__*/_react.default.createElement(BmAccordionMenu, _extends({}, rest, {
109
+ onClick: function onClick() {
110
+ return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
111
+ }
112
+ }), Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
113
+ icon: leadingIcon,
114
+ size: size
115
+ }), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
116
+ icon: trailingIcon,
117
+ size: size
118
+ }));
119
+ });
120
+ };
121
+
122
+ BmAccordion.Body = function (_ref3) {
123
+ var children = _ref3.children;
124
+ return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
125
+ return value.toggle && /*#__PURE__*/_react.default.createElement("div", null, children);
126
+ });
127
+ };
128
+
129
+ BmAccordion.propTypes = {
130
+ children: _propTypes.default.object,
131
+ size: _propTypes.default.string,
132
+ expandIcon: _propTypes.default.string,
133
+ leadingIcon: _propTypes.default.node,
134
+ trailingIcon: _propTypes.default.node,
135
+ disabled: _propTypes.default.bool
136
+ };
137
+ var _default = BmAccordion;
138
+ exports.default = _default;
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "BmAccordion", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Accordion.default;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "BmAvatar", {
7
13
  enumerable: true,
8
14
  get: function get() {
@@ -1180,6 +1186,8 @@ Object.defineProperty(exports, "BmAccordicon", {
1180
1186
  }
1181
1187
  });
1182
1188
 
1189
+ var _Accordion = _interopRequireDefault(require("./Accordion"));
1190
+
1183
1191
  var _avatars = require("./avatars");
1184
1192
 
1185
1193
  var _buttonAlertIcons = require("./buttonAlertIcons");
@@ -1274,4 +1282,6 @@ var _notesInfo = require("./CustomerInfo/notesInfo");
1274
1282
 
1275
1283
  var _labelsInfo = require("./CustomerInfo/labelsInfo");
1276
1284
 
1277
- var _Accordicon = require("./Accordicon");
1285
+ var _Accordicon = require("./Accordicon");
1286
+
1287
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "0.9.8",
3
+ "version": "0.9.9",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "peerDependencies": {
package/src/App.js CHANGED
@@ -7,26 +7,21 @@ import { Complete } from "./Complete";
7
7
  import { CreateSegment } from "./CreateSegments";
8
8
  // import Buttons from "../src/examples/Buttons";
9
9
  import Chat from "./CHAT";
10
- import {
11
- CloseModal,
12
- HeaderText,
13
- Modal,
14
- ModalHeader,
15
- } from "./lib/components/Modals/noteModalHeader";
16
10
  import { BmAccordicon } from "./lib/components/Accordicon";
17
-
11
+ import BmAccordion from "./lib/components/Accordion";
18
12
  export const App = () => {
19
13
  return (
20
14
  <>
21
15
  <GlobalStyle />
22
- {/* <Chat /> */}
23
- {/* <Modal show>
24
- <ModalHeader>
25
- <HeaderText>hello</HeaderText>
26
- <CloseModal></CloseModal>
27
- </ModalHeader>
28
- </Modal> */}
29
- <BmAccordicon>Hello</BmAccordicon>
16
+ <BmAccordicon dropdown trailingIcon>
17
+ <h4>jclkdj</h4>
18
+ <h2>kghgfih</h2>
19
+ </BmAccordicon>
20
+ <Chat />
21
+ <BmAccordion>
22
+ <BmAccordion.Title>SMS</BmAccordion.Title>
23
+ <BmAccordion.Body>Reports</BmAccordion.Body>
24
+ </BmAccordion>
30
25
  {/* <Buttons /> */}
31
26
  {/* <h1>hello</h1> */}
32
27
  {/* <MainWrapper>
@@ -31,7 +31,6 @@ export const BmAccordicon = ({
31
31
  trailingIcon,
32
32
  ...rest
33
33
  }) => {
34
- console.log(children);
35
34
  return (
36
35
  <>
37
36
  <BmAccordiconMenu {...rest}>
@@ -0,0 +1,103 @@
1
+ import React, { useState } from "react";
2
+ import styled from "styled-components";
3
+ import PropTypes from "prop-types";
4
+ import { BmPrimaryWhite } from "./colors";
5
+ import { BmDropdownIcon, BmDropupIcon, BmIcons } from "./iconStyles";
6
+
7
+ const { Provider, Consumer } = React.createContext({});
8
+
9
+ const Dropdown = (value, rest) => {
10
+ if (value.expandIcon && value.expandIcon === "none") {
11
+ return;
12
+ }
13
+ if (!value.expandIcon) {
14
+ return value.toggle ? (
15
+ <BmDropupIcon {...rest} />
16
+ ) : (
17
+ <BmDropdownIcon {...rest} />
18
+ );
19
+ }
20
+ if (value.expandIcon && value.expandIcon !== "none") {
21
+ return <BmIcons icon={value.expandIcon} />;
22
+ }
23
+ };
24
+ const BmAccordionMenu = styled.div`
25
+ display: flex;
26
+ align-items: center;
27
+ flex-direction: row;
28
+ ${"" /* padding: 0.571rem; */}
29
+ padding: 0.571rem 1.143rem;
30
+ border: 1px solid
31
+ background: ${BmPrimaryWhite};
32
+ > *:not(:last-child) {
33
+ margin-right: 0.5rem;
34
+ }
35
+ `;
36
+
37
+ const BmAccordionDetails = styled.div`
38
+ display: flex;
39
+ justify-content: space-between;
40
+ width: 100%;
41
+ `;
42
+
43
+ const BmAccordionWrapper = styled.div`
44
+ display: flex;
45
+ flex-direction: column;
46
+ `;
47
+
48
+ const BmAccordion = ({ children, disabled, expandIcon, ...rest }) => {
49
+ const [toggle, setToggle] = useState(false);
50
+
51
+ return (
52
+ <BmAccordionWrapper>
53
+ <Provider value={{ toggle, setToggle, disabled, expandIcon }}>
54
+ {children}
55
+ </Provider>
56
+ </BmAccordionWrapper>
57
+ );
58
+ };
59
+
60
+ BmAccordion.Title = ({
61
+ children,
62
+ leadingIcon,
63
+ trailingIcon,
64
+ size,
65
+ ...rest
66
+ }) => {
67
+ return (
68
+ <Consumer>
69
+ {(value) => (
70
+ <BmAccordionMenu
71
+ {...rest}
72
+ onClick={() =>
73
+ !value.disabled || value.disabled === false
74
+ ? value.setToggle(!value.toggle)
75
+ : value.setToggle(false)
76
+ }
77
+ >
78
+ {Dropdown(value, rest)}
79
+ {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
80
+ <BmAccordionDetails>{children}</BmAccordionDetails>
81
+ {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
82
+ </BmAccordionMenu>
83
+ )}
84
+ </Consumer>
85
+ );
86
+ };
87
+
88
+ BmAccordion.Body = ({ children }) => {
89
+ return (
90
+ <Consumer>{(value) => value.toggle && <div>{children}</div>}</Consumer>
91
+ );
92
+ };
93
+
94
+ BmAccordion.propTypes = {
95
+ children: PropTypes.object,
96
+ size: PropTypes.string,
97
+ expandIcon: PropTypes.string,
98
+ leadingIcon: PropTypes.node,
99
+ trailingIcon: PropTypes.node,
100
+ disabled: PropTypes.bool,
101
+ };
102
+
103
+ export default BmAccordion;
@@ -1,3 +1,4 @@
1
+ import BmAccordion from "./Accordion";
1
2
  import { BmAvatar } from "./avatars";
2
3
  import { BmAlertIcon } from "./buttonAlertIcons";
3
4
  import { BmBtnIcon } from "./buttonIconsOnly";
@@ -266,6 +267,7 @@ import {
266
267
  import { BmAccordicon } from "./Accordicon";
267
268
 
268
269
  export {
270
+ BmAccordion,
269
271
  BmButton,
270
272
  BmAvatar,
271
273
  BmAlertIcon,
@@ -1,61 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.BmPreviousAgentMessage = exports.BmPreviousAgentName = exports.BmPreviousAgent = exports.BmPreviousAgentIcon = exports.BmPreviousAgentContent = exports.BmPreviousAgentTitle = exports.BmPreviousAgentWrapper = exports.BmAgentButton = exports.BmAgentPill = exports.BmAgentName = exports.BmAgentSearch = void 0;
7
-
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
- var _avatars = require("../avatars");
11
-
12
- var _buttons = require("../buttons");
13
-
14
- var _colors = require("../colors");
15
-
16
- var _pills = require("../pills");
17
-
18
- var _search = require("../search");
19
-
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
21
-
22
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
25
-
26
- var BmAgentSearch = (0, _styledComponents.default)(_search.BmSearch)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 20vw;\n max-width: 20vw;\n display: flex-end;\n"])));
27
- exports.BmAgentSearch = BmAgentSearch;
28
-
29
- var BmAgentName = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n margin-top: 1.714rem;\n"])), _colors.BmPrimaryBlack);
30
-
31
- exports.BmAgentName = BmAgentName;
32
- var BmAgentPill = (0, _styledComponents.default)(_pills.BmPill)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-top: 0.571rem;\n"])));
33
- exports.BmAgentPill = BmAgentPill;
34
- var BmAgentButton = (0, _styledComponents.default)(_buttons.BmButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-top: 1.143rem;\n"])));
35
- exports.BmAgentButton = BmAgentButton;
36
-
37
- var BmPreviousAgentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0rem;\n margin: 1.714rem 0rem;\n width: 100%;\n"])));
38
-
39
- exports.BmPreviousAgentWrapper = BmPreviousAgentWrapper;
40
-
41
- var BmPreviousAgentTitle = _styledComponents.default.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n"])), _colors.BmPrimaryBlack);
42
-
43
- exports.BmPreviousAgentTitle = BmPreviousAgentTitle;
44
-
45
- var BmPreviousAgentContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0rem;\n margin-top: 0.571rem;\n width: 100%;\n"])));
46
-
47
- exports.BmPreviousAgentContent = BmPreviousAgentContent;
48
- var BmPreviousAgentIcon = (0, _styledComponents.default)(_avatars.BmAvatar)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin-right: 1.143rem;\n"])));
49
- exports.BmPreviousAgentIcon = BmPreviousAgentIcon;
50
-
51
- var BmPreviousAgent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n"])));
52
-
53
- exports.BmPreviousAgent = BmPreviousAgent;
54
-
55
- var BmPreviousAgentName = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n color: ", ";\n"])), _colors.BmPrimaryBlack);
56
-
57
- exports.BmPreviousAgentName = BmPreviousAgentName;
58
-
59
- var BmPreviousAgentMessage = _styledComponents.default.p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n color: ", ";\n"])), _colors.BmPrimaryBlack);
60
-
61
- exports.BmPreviousAgentMessage = BmPreviousAgentMessage;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ModalBody = void 0;
7
-
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
- var _templateObject;
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
-
16
- var ModalBody = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", "\n margin-top: 0.571rem;\n"])), ''
17
- /* padding: 0rem 1.143rem; */
18
- );
19
-
20
- exports.ModalBody = ModalBody;
@@ -1,24 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.BmFooterButtons = exports.ModalFooter = void 0;
7
-
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
- var _templateObject, _templateObject2;
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
-
16
- var ModalFooter = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n padding: 1.143rem;\n margin-top: 0.571rem;\n"])));
17
-
18
- exports.ModalFooter = ModalFooter;
19
-
20
- var BmFooterButtons = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n ", "\n align-items: center;\n justify-content: space-between;\n"])), ''
21
- /* width: 50%; */
22
- );
23
-
24
- exports.BmFooterButtons = BmFooterButtons;
@@ -1,93 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Modal = exports.ModalHeader = exports.CloseModal = exports.Close = exports.HeaderText = exports.HeaderWrapper = exports.ModalWrapper = exports.ModalContent = exports.Overlay = void 0;
9
-
10
- var _react = _interopRequireWildcard(require("react"));
11
-
12
- var _icons = require("@material-ui/icons");
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _colors = require("../colors");
17
-
18
- var _iconStyles = require("../iconStyles");
19
-
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
21
-
22
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
-
26
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
-
28
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
-
30
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
31
-
32
- var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n top: 0;\n left: 0;\n z-index: 9999;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0.5;\n}\n"])), _colors.BmPrimaryBlack);
33
-
34
- exports.Overlay = Overlay;
35
-
36
- var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 0rem 1.143rem;\n border: 0.071rem solid black;\n width: 30vw;\n margin: auto;\n background: ", ";\n"])), _colors.BmPrimaryWhite);
37
-
38
- exports.ModalContent = ModalContent;
39
-
40
- var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n z-index: 9999;\n overflow-x: auto;\n overflow-y: auto;\n outline: 0;\n position: fixed;\n height: auto;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
41
-
42
- exports.ModalWrapper = ModalWrapper;
43
-
44
- var HeaderWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 1.143rem 0rem;\n"])));
45
-
46
- exports.HeaderWrapper = HeaderWrapper;
47
-
48
- var HeaderText = _styledComponents.default.h2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n text-align: center;\n display: flex;\n color: ", ";\n margin-left: auto;\n"])), _colors.BmPrimaryBlack);
49
-
50
- exports.HeaderText = HeaderText;
51
-
52
- var Close = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n margin-left: auto;\n"])));
53
-
54
- exports.Close = Close;
55
-
56
- var CloseModal = function CloseModal(_ref) {
57
- var rest = _extends({}, _ref);
58
-
59
- return /*#__PURE__*/_react.default.createElement(Close, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
60
- size: "xlarge",
61
- icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null)
62
- }, rest)));
63
- };
64
-
65
- exports.CloseModal = CloseModal;
66
-
67
- var ModalHeader = function ModalHeader(props) {
68
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HeaderWrapper, null, props.children));
69
- };
70
-
71
- exports.ModalHeader = ModalHeader;
72
-
73
- var Modal = function Modal(_ref2) {
74
- var children = _ref2.children,
75
- show = _ref2.show,
76
- setShowModal = _ref2.setShowModal;
77
- var keyPress = (0, _react.useCallback)(function (e) {
78
- if (e.key === "Escape" && show) {
79
- setShowModal(false);
80
- }
81
- }, [setShowModal, show]);
82
- (0, _react.useEffect)(function () {
83
- document.addEventListener("keydown", keyPress);
84
- return function () {
85
- return document.removeEventListener("keydown", keyPress);
86
- };
87
- }, [keyPress]);
88
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, show && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, null), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
89
- showModal: show
90
- }, /*#__PURE__*/_react.default.createElement(ModalContent, null, children))));
91
- };
92
-
93
- exports.Modal = Modal;
@@ -1,66 +0,0 @@
1
- import styled from "styled-components";
2
- import { BmAvatar } from "../avatars";
3
- import { BmButton } from "../buttons";
4
- import { BmPrimaryBlack } from "../colors";
5
- import { BmPill } from "../pills";
6
- import { BmSearch } from "../search";
7
-
8
- export const BmAgentSearch = styled(BmSearch)`
9
- width: 20vw;
10
- max-width: 20vw;
11
- display: flex-end;
12
- `;
13
-
14
- export const BmAgentName = styled.p`
15
- color: ${BmPrimaryBlack};
16
- margin-top: 1.714rem;
17
- `;
18
-
19
- export const BmAgentPill = styled(BmPill)`
20
- margin-top: 0.571rem;
21
- `;
22
-
23
- export const BmAgentButton = styled(BmButton)`
24
- margin-top: 1.143rem;
25
- `;
26
-
27
- export const BmPreviousAgentWrapper = styled.div`
28
- display: flex;
29
- flex-direction: column;
30
- align-items: flex-start;
31
- padding: 0rem;
32
- margin: 1.714rem 0rem;
33
- width: 100%;
34
- `;
35
-
36
- export const BmPreviousAgentTitle = styled.p`
37
- color: ${BmPrimaryBlack};
38
- display: flex;
39
- `;
40
-
41
- export const BmPreviousAgentContent = styled.div`
42
- display: flex;
43
- flex-direction: row;
44
- align-items: center;
45
- padding: 0rem;
46
- margin-top: 0.571rem;
47
- width: 100%;
48
- `;
49
-
50
- export const BmPreviousAgentIcon = styled(BmAvatar)`
51
- margin-right: 1.143rem;
52
- `;
53
-
54
- export const BmPreviousAgent = styled.div`
55
- display: flex;
56
- flex-direction: column;
57
- flex-grow: 1;
58
- `;
59
-
60
- export const BmPreviousAgentName = styled.h3`
61
- color: ${BmPrimaryBlack};
62
- `;
63
-
64
- export const BmPreviousAgentMessage = styled.p`
65
- color: ${BmPrimaryBlack};
66
- `;
@@ -1,10 +0,0 @@
1
- import styled from "styled-components";
2
-
3
- export const ModalBody = styled.div`
4
- display: flex;
5
- flex-direction: column;
6
- align-items: flex-start;
7
- ${'' /* padding: 0rem 1.143rem; */}
8
- margin-top: 0.571rem;
9
- `;
10
-
@@ -1,16 +0,0 @@
1
- import styled from "styled-components";
2
-
3
- export const ModalFooter = styled.div`
4
- display: flex;
5
- flex-direction: row;
6
- padding: 1.143rem;
7
- margin-top: 0.571rem;
8
- `;
9
-
10
- export const BmFooterButtons = styled.div`
11
- display: flex;
12
- margin-left: auto;
13
- ${'' /* width: 50%; */}
14
- align-items: center;
15
- justify-content: space-between;
16
- `;
@@ -1,103 +0,0 @@
1
- import React, { useEffect, useCallback } from "react";
2
- import { Clear } from "@material-ui/icons";
3
- import styled from "styled-components";
4
- import { BmPrimaryBlack, BmPrimaryWhite } from "../colors";
5
- import { BmIcons } from "../iconStyles";
6
-
7
- export const Overlay = styled.div`
8
- position: fixed;
9
- top: 0;
10
- left: 0;
11
- z-index: 9999;
12
- width: 100%;
13
- height: 100%;
14
- background-color: ${BmPrimaryBlack};
15
- opacity: 0.5;
16
- }
17
- `;
18
- export const ModalContent = styled.div`
19
- display: flex;
20
- flex-direction: column;
21
- padding: 0rem 1.143rem;
22
- border: 0.071rem solid black;
23
- width: 30vw;
24
- margin: auto;
25
- background: ${BmPrimaryWhite};
26
- `;
27
-
28
- export const ModalWrapper = styled.div`
29
- z-index: 9999;
30
- overflow-x: auto;
31
- overflow-y: auto;
32
- outline: 0;
33
- position: fixed;
34
- height: auto;
35
- top: 50%;
36
- left: 50%;
37
- transform: translate(-50%, -50%);
38
- `;
39
-
40
- export const HeaderWrapper = styled.div`
41
- display: flex;
42
- flex-direction: row;
43
- justify-content: space-between;
44
- padding: 1.143rem 0rem;
45
- `;
46
-
47
- export const HeaderText = styled.h2`
48
- text-align: center;
49
- display: flex;
50
- color: ${BmPrimaryBlack};
51
- margin-left: auto;
52
- `;
53
-
54
- export const Close = styled.div`
55
- display: flex;
56
- justify-content: flex-end;
57
- margin-left: auto;
58
- `;
59
-
60
- export const CloseModal = ({ ...rest }) => {
61
- return (
62
- <Close>
63
- <BmIcons size="xlarge" icon={<Clear />} {...rest} />
64
- </Close>
65
- );
66
- };
67
-
68
- export const ModalHeader = (props) => {
69
- return (
70
- <>
71
- <HeaderWrapper>{props.children}</HeaderWrapper>
72
- </>
73
- );
74
- };
75
-
76
- export const Modal = ({ children, show, setShowModal }) => {
77
- const keyPress = useCallback(
78
- (e) => {
79
- if (e.key === "Escape" && show) {
80
- setShowModal(false);
81
- }
82
- },
83
- [setShowModal, show],
84
- );
85
-
86
- useEffect(() => {
87
- document.addEventListener("keydown", keyPress);
88
- return () => document.removeEventListener("keydown", keyPress);
89
- }, [keyPress]);
90
-
91
- return (
92
- <>
93
- {show && (
94
- <>
95
- <Overlay />
96
- <ModalWrapper showModal={show}>
97
- <ModalContent>{children}</ModalContent>
98
- </ModalWrapper>
99
- </>
100
- )}
101
- </>
102
- );
103
- };