beem-component 2.0.7 → 2.0.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 (10) hide show
  1. package/dist/components/Buttons/buttons.js +54 -51
  2. package/dist/components/Modals/modal.js +32 -22
  3. package/dist/components/Modals/modals.stories.js +6 -1
  4. package/dist/components/dropdownButton.js +1 -1
  5. package/package.json +1 -1
  6. package/src/App.js +77 -2
  7. package/src/lib/components/Buttons/buttons.js +20 -19
  8. package/src/lib/components/Modals/modal.js +61 -25
  9. package/src/lib/components/Modals/modals.stories.js +7 -7
  10. package/src/lib/components/dropdownButton.js +2 -2
package/dist/components/Buttons/buttons.js CHANGED
@@ -20,11 +20,11 @@ var ButtonText = _styledComponents.default.div.withConfig({
20
20
  displayName: "buttons__ButtonText"
21
21
  })(["", " text-align:center;color:", ";padding:0rem;"], function (_ref) {
22
22
  var size = _ref.size;
23
- if (size === 'large') return "".concat(_text.h3);
24
- if (size === 'medium') return "".concat(_text.h3);
25
- if (size === 'small') return "".concat(_text.h4);
26
- if (size === 'xsmall') return "".concat(_text.h6);
27
- return "".concat(_text.h3);
23
+ if (size === 'large') return "".concat(_text.h5);
24
+ if (size === 'medium') return "".concat(_text.h5);
25
+ if (size === 'small') return "".concat(_text.h5);
26
+ if (size === 'xsmall') return "".concat(_text.h5);
27
+ return "".concat(_text.h5);
28
28
  }, function (_ref2) {
29
29
  var variant = _ref2.variant,
30
30
  disabled = _ref2.disabled,
@@ -42,24 +42,27 @@ var ButtonText = _styledComponents.default.div.withConfig({
42
42
  });
43
43
  var BeemButton = _styledComponents.default.button.withConfig({
44
44
  displayName: "buttons__BeemButton"
45
- })(["display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:0.2857rem;padding:", ";line-height:", ";background:", ";border:0.071rem solid ", ";&:hover{background:", ";border:0.071rem solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], function (_ref3) {
46
- var size = _ref3.size;
47
- if (size === 'large') return '0.625rem 1.5rem';
48
- if (size === 'medium') return '0.4375rem 1rem';
49
- if (size === 'small') return '.375rem .75rem';
50
- if (size === 'xsmall') return '.4286rem .8571rem';
51
- return '.625rem 1.5rem';
45
+ })(["display:flex;flex-direction:row;justify-content:center;align-items:center;width:", ";border-radius:0.5714rem;padding:", ";line-height:", ";background:", ";border:0.994px solid ", ";&:hover{background:", ";border:0.994px solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], function (_ref3) {
46
+ var width = _ref3.width;
47
+ return width || '';
52
48
  }, function (_ref4) {
53
49
  var size = _ref4.size;
54
- // if (size === 'large') return '0.625rem 1.5rem';
55
- // if (size === 'medium') return '0.4375rem 1rem';
56
- // if (size === 'small') return '.375rem .75rem';
57
- if (size === 'xsmall') return '1.4286rem';
58
- return 'normal';
50
+ if (size === 'large') return '.7143rem 1.2857rem';
51
+ if (size === 'medium') return '.7143rem 1.1429rem';
52
+ if (size === 'small') return '.5714rem 1rem';
53
+ if (size === 'xsmall') return '.4286rem .8571rem';
54
+ return '.7143rem 1.1429rem';
59
55
  }, function (_ref5) {
60
- var variant = _ref5.variant,
61
- disabled = _ref5.disabled,
62
- color = _ref5.color;
56
+ var size = _ref5.size;
57
+ if (size === 'large') return '1.7143rem';
58
+ if (size === 'medium') return '1.4286rem';
59
+ if (size === 'small') return '1.4286rem';
60
+ if (size === 'xsmall') return '1.4286rem';
61
+ return '1.4286rem';
62
+ }, function (_ref6) {
63
+ var variant = _ref6.variant,
64
+ disabled = _ref6.disabled,
65
+ color = _ref6.color;
63
66
  if (!disabled) {
64
67
  if (variant === 'primary') return "".concat(color || _colors.BmPrimaryBlue);
65
68
  if (variant === 'secondary') return 'none';
@@ -73,10 +76,10 @@ var BeemButton = _styledComponents.default.button.withConfig({
73
76
  if (variant === 'secondary') return 'none';
74
77
  if (variant === 'tertiary') return 'none';
75
78
  return "".concat(_colors.BmGrey100);
76
- }, function (_ref6) {
77
- var variant = _ref6.variant,
78
- disabled = _ref6.disabled,
79
- color = _ref6.color;
79
+ }, function (_ref7) {
80
+ var variant = _ref7.variant,
81
+ disabled = _ref7.disabled,
82
+ color = _ref7.color;
80
83
  if (!disabled) {
81
84
  if (variant === 'primary') return "".concat(color || _colors.BmPrimaryBlue);
82
85
  if (variant === 'secondary') return "".concat(color || _colors.BmPrimaryBlue);
@@ -89,10 +92,10 @@ var BeemButton = _styledComponents.default.button.withConfig({
89
92
  if (variant === 'primary') return "".concat(_colors.BmGrey100);
90
93
  if (variant === 'secondary') return "".concat(_colors.BmGrey400);
91
94
  if (variant === 'tertiary') return 'transparent';
92
- }, function (_ref7) {
93
- var variant = _ref7.variant,
94
- disabled = _ref7.disabled,
95
- color = _ref7.color;
95
+ }, function (_ref8) {
96
+ var variant = _ref8.variant,
97
+ disabled = _ref8.disabled,
98
+ color = _ref8.color;
96
99
  if (!disabled) {
97
100
  if (variant === 'primary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
98
101
  if (variant === 'neutral') return "".concat(_colors.BmGrey50);
@@ -102,18 +105,18 @@ var BeemButton = _styledComponents.default.button.withConfig({
102
105
  return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
103
106
  }
104
107
  }
105
- }, function (_ref8) {
106
- var variant = _ref8.variant,
107
- disabled = _ref8.disabled,
108
- color = _ref8.color;
109
- if (!disabled) {
110
- if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
111
- }
112
- return 'none';
113
108
  }, function (_ref9) {
114
109
  var variant = _ref9.variant,
115
110
  disabled = _ref9.disabled,
116
111
  color = _ref9.color;
112
+ if (!disabled) {
113
+ if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
114
+ }
115
+ return 'none';
116
+ }, function (_ref10) {
117
+ var variant = _ref10.variant,
118
+ disabled = _ref10.disabled,
119
+ color = _ref10.color;
117
120
  if (!disabled) {
118
121
  if (variant === 'primary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
119
122
  if (variant === 'neutral') return "".concat(_colors.BmGrey100);
@@ -123,30 +126,23 @@ var BeemButton = _styledComponents.default.button.withConfig({
123
126
  return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
124
127
  }
125
128
  }
126
- }, function (_ref10) {
127
- var variant = _ref10.variant,
128
- disabled = _ref10.disabled;
129
- if (!disabled) {
130
- if (variant === 'primary' || variant === 'success' || variant === 'destructive') return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
131
- if (!variant) {
132
- return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
133
- }
134
- }
135
129
  }, function (_ref11) {
136
130
  var variant = _ref11.variant,
137
- disabled = _ref11.disabled,
138
- color = _ref11.color;
131
+ disabled = _ref11.disabled;
139
132
  if (!disabled) {
140
- if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
133
+ if (variant === 'primary' || variant === 'success' || variant === 'destructive') return 'inset 0rem .125rem .25rem rgba(0, 0, 0, 0.25)';
134
+ if (!variant) {
135
+ return 'inset 0rem .125rem .25rem rgba(0, 0, 0, 0.25)';
136
+ }
141
137
  }
142
- return 'none';
143
- }, ButtonText, function (_ref12) {
138
+ }, function (_ref12) {
144
139
  var variant = _ref12.variant,
145
140
  disabled = _ref12.disabled,
146
141
  color = _ref12.color;
147
142
  if (!disabled) {
148
- if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
143
+ if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
149
144
  }
145
+ return 'none';
150
146
  }, ButtonText, function (_ref13) {
151
147
  var variant = _ref13.variant,
152
148
  disabled = _ref13.disabled,
@@ -154,6 +150,13 @@ var BeemButton = _styledComponents.default.button.withConfig({
154
150
  if (!disabled) {
155
151
  if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
156
152
  }
153
+ }, ButtonText, function (_ref14) {
154
+ var variant = _ref14.variant,
155
+ disabled = _ref14.disabled,
156
+ color = _ref14.color;
157
+ if (!disabled) {
158
+ if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
159
+ }
157
160
  });
158
161
  var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
159
162
  displayName: "buttons__BmLeftIcon"
package/dist/components/Modals/modal.js CHANGED
@@ -12,7 +12,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
12
12
  var _colors = require("../colors");
13
13
  var _iconStyles = require("../iconStyles");
14
14
  var _excluded = ["children", "show", "size", "onHide", "centered"],
15
- _excluded2 = ["children", "size", "onHide", "closeButton", "show"];
15
+ _excluded2 = ["children", "size", "onHide", "subtTitle", "closeButton", "show", "icon", "trailingIcon"];
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
  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); }
18
18
  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,11 +30,11 @@ var _React$createContext = /*#__PURE__*/_react.default.createContext(),
30
30
  Consumer = _React$createContext.Consumer;
31
31
  var Overlay = _styledComponents.default.div.withConfig({
32
32
  displayName: "modal__Overlay"
33
- })(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:", ";}"], _colors.BmBgGrey45);
33
+ })(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:", ";"], _colors.BmBgGrey45);
34
34
  exports.Overlay = Overlay;
35
35
  var ModalContent = _styledComponents.default.div.withConfig({
36
36
  displayName: "modal__ModalContent"
37
- })(["display:flex;flex-direction:column;border-radius:0.25rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){max-width:500px;width:500px;}"], _colors.BmPrimaryWhite);
37
+ })(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){max-width:500px;width:500px;}"], _colors.BmPrimaryWhite);
38
38
  exports.ModalContent = ModalContent;
39
39
  var ModalWrapper = _styledComponents.default.div.withConfig({
40
40
  displayName: "modal__ModalWrapper"
@@ -83,44 +83,54 @@ var BmModal = function BmModal(_ref) {
83
83
  };
84
84
  var ModalHeader = _styledComponents.default.div.withConfig({
85
85
  displayName: "modal__ModalHeader"
86
- })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;"]);
86
+ })(["display:flex;padding:1.7143rem 1.7143rem 1.7143rem 1.7143rem;flex-direction:row;align-items:center;gap:1.1429rem;align-self:stretch;"]);
87
+ var ModalHeaderContent = _styledComponents.default.div.withConfig({
88
+ displayName: "modal__ModalHeaderContent"
89
+ })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;"]);
90
+ var IconContainer = _styledComponents.default.div.withConfig({
91
+ displayName: "modal__IconContainer"
92
+ })(["display:flex;padding:0.5714rem;justify-content:center;align-items:center;border-radius:0.7143rem;border:0.0714rem solid var(--Gray-200,#eaecf0);background:var(--Base-White,#fff);box-shadow:0rem 0.0714rem 0.1429rem 0rem rgba(16,24,40,0.05);"]);
87
93
  BmModal.Header = function (_ref2) {
88
94
  var children = _ref2.children,
89
95
  size = _ref2.size,
90
96
  onHide = _ref2.onHide,
97
+ subtTitle = _ref2.subtTitle,
91
98
  closeButton = _ref2.closeButton,
92
99
  show = _ref2.show,
100
+ icon = _ref2.icon,
101
+ trailingIcon = _ref2.trailingIcon,
93
102
  rest = _objectWithoutProperties(_ref2, _excluded2);
94
103
  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
95
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), children, closeButton ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
96
- size: "xlarge",
104
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, /*#__PURE__*/_react.default.createElement(IconContainer, null, trailingIcon), /*#__PURE__*/_react.default.createElement("div", {
105
+ style: {
106
+ width: '100%'
107
+ }
108
+ }, /*#__PURE__*/_react.default.createElement(ModalHeaderContent, null, children || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), closeButton ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
109
+ size: "large",
97
110
  icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
98
111
  onClick: function onClick() {
99
112
  return value && value.onHide && value.onHide(!value.show);
100
113
  }
101
- }, rest)) : /*#__PURE__*/_react.default.createElement("p", null, "\xA0")));
114
+ }, rest)) : /*#__PURE__*/_react.default.createElement("p", null, "\xA0")), /*#__PURE__*/_react.default.createElement("p", null, " ", subtTitle))));
102
115
  });
103
116
  };
104
- BmModal.SubHeader = _styledComponents.default.div.withConfig({
105
- displayName: "modal__SubHeader"
106
- })(["display:flex;flex-direction:row;justify-content:center;align-items:center;"]);
107
117
  BmModal.Body = _styledComponents.default.div.withConfig({
108
118
  displayName: "modal__Body"
109
- })(["display:flex;flex-direction:column;justify-content:space-between;> *:not(:last-child){margin-bottom:0.5rem;}", ""], '' /* max-height: ${({ size }) => {
110
- if (size) {
111
- if (size === "small") return "21.429rem";
112
- if (size === "default") return "35.714rem";
113
- if (size === "large") return "57.143rem";
114
- if (size === "xlarge") return "81.429rem";
115
- return size;
116
- }
117
- return "35.714rem";
118
- }};
119
- overflow: auto; */);
119
+ })(["display:flex;padding:0rem 1.7143rem;flex-direction:column;justify-content:space-between;> *:not(:last-child){margin-bottom:0.5rem;}", ""], '' /* max-height: ${({ size }) => {
120
+ if (size) {
121
+ if (size === "small") return "21.429rem";
122
+ if (size === "default") return "35.714rem";
123
+ if (size === "large") return "57.143rem";
124
+ if (size === "xlarge") return "81.429rem";
125
+ return size;
126
+ }
127
+ return "35.714rem";
128
+ }};
129
+ overflow: auto; */);
120
130
 
121
131
  BmModal.Footer = _styledComponents.default.div.withConfig({
122
132
  displayName: "modal__Footer"
123
- })(["display:flex;justify-content:space-between;"]);
133
+ })(["display:flex;justify-content:space-between;padding:0rem 1.7143rem 1.7143rem 1.7143rem;padding-top:2.2857rem;gap:0.8571rem;"]);
124
134
  BmModal.propTypes = {
125
135
  size: _propTypes.default.string,
126
136
  centered: _propTypes.default.bool,
package/dist/components/Modals/modals.stories.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.SampleModal = exports.ModalWithSubHeader = exports.ExampleModal = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
+ var _LocalOfferOutlined = _interopRequireDefault(require("@mui/icons-material/LocalOfferOutlined"));
9
10
  var _modal = _interopRequireDefault(require("./modal"));
10
11
  var _buttons = require("../Buttons/buttons");
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,8 +80,9 @@ var ModalWithSubHeader = function ModalWithSubHeader() {
79
80
  return setShowModal(false);
80
81
  }
81
82
  }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
83
+ subtTitle: /*#__PURE__*/_react.default.createElement("h4", null, "Subtext this is yo"),
82
84
  closeButton: true
83
- }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.SubHeader, null, /*#__PURE__*/_react.default.createElement("h5", null, "This modal has a sub heading")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer"))));
85
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer"))));
84
86
  };
85
87
  exports.ModalWithSubHeader = ModalWithSubHeader;
86
88
  var ExampleModal = function ExampleModal() {
@@ -100,10 +102,13 @@ var ExampleModal = function ExampleModal() {
100
102
  },
101
103
  centered: true
102
104
  }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
105
+ trailingIcon: /*#__PURE__*/_react.default.createElement(_LocalOfferOutlined.default, null),
103
106
  closeButton: true
104
107
  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
108
+ width: "100%",
105
109
  size: "small"
106
110
  }, "Send"), /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
111
+ width: "100%",
107
112
  size: "small",
108
113
  variant: "secondary"
109
114
  }, "View"))));
package/dist/components/dropdownButton.js CHANGED
@@ -20,7 +20,7 @@ var Wrapper = _styledComponents.default.div.withConfig({
20
20
  })(["display:flex;padding:0rem;margin:0rem;"]);
21
21
  var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withConfig({
22
22
  displayName: "dropdownButton__Drop"
23
- })(["background:", ";border:0.071rem solid ", ";border-left:0.0857rem solid ", ";border-top-left-radius:0.071rem;border-bottom-left-radius:0.071rem;border-radius:none;padding:0rem;"], function (_ref) {
23
+ })(["background:", ";border:0.071rem solid ", ";border-left:0.0857rem solid ", ";border-top-left-radius:0.071rem;border-bottom-left-radius:0.071rem;border-top-right-radius:0.5714rem;border-bottom-right-radius:0.5714rem;padding:0rem;"], function (_ref) {
24
24
  var variant = _ref.variant,
25
25
  disabled = _ref.disabled,
26
26
  color = _ref.color;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -2,7 +2,7 @@
2
2
  /* eslint-disable jsx-a11y/media-has-caption */
3
3
  import React, { useState } from 'react';
4
4
  import AbcIcon from '@mui/icons-material/Abc';
5
- // import CircleIcon from '@mui/icons-material/Circle';
5
+ import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
6
6
 
7
7
  import {
8
8
  BmChat,
@@ -18,6 +18,7 @@ import {
18
18
  BmButton,
19
19
  BmButtonDropDown,
20
20
  BmBtnIcon,
21
+ BmModal,
21
22
  } from './lib/components';
22
23
 
23
24
  const Chat = () => {
@@ -132,6 +133,7 @@ const Chat = () => {
132
133
  ];
133
134
  // State to manage the visibility of checkboxes
134
135
  const [checkboxVisibility, setCheckboxVisibility] = useState(msg);
136
+ const [showModal, setShowModal] = useState(false);
135
137
 
136
138
  // Handler function for the checkbox change event
137
139
  const handleCheckboxChange = (id) => {
@@ -357,10 +359,83 @@ const Chat = () => {
357
359
  Hello
358
360
  </BmButton>
359
361
  <BmButton variant="success">Test</BmButton>
360
- <BmButtonDropDown size="xsmall">Test</BmButtonDropDown>
362
+ <div style={{ width: '30%' }}>
363
+ <BmButtonDropDown size="xsmall">Test</BmButtonDropDown>
364
+ </div>
361
365
  <BmBtnIcon icon={<AbcIcon />} size="xsmall" />
362
366
  </div>
367
+ <br />
368
+ <div style={{ width: '50%' }}>
369
+ <BmButton size="xsmall" color="black" variant="neutral">
370
+ Hello
371
+ </BmButton>
372
+ </div>
373
+ <BmButton size="small" variant="secondary">
374
+ Hello
375
+ </BmButton>
376
+ <BmButton size="medium" variant="primary">
377
+ Hello
378
+ </BmButton>
379
+ <BmButton variant="success">Hello</BmButton>
380
+ <BmButton size="large" variant="destructive">
381
+ Hello
382
+ </BmButton>
383
+ {/* <BmButton size="small" variant="tertiary">
384
+ Hello
385
+ </BmButton>
386
+ <BmButton size="large" variant="success">
387
+ Hello
388
+ </BmButton> */}
363
389
  </BmChat>
390
+ <>
391
+ <div>
392
+ <BmButton onClick={() => setShowModal(!showModal)}>
393
+ Click Me!
394
+ </BmButton>
395
+ </div>
396
+ <BmModal
397
+ size="small"
398
+ show={showModal}
399
+ onHide={() => setShowModal(false)}
400
+ centered
401
+ >
402
+ <BmModal.Header
403
+ closeButton
404
+ trailingIcon={<LocalOfferOutlinedIcon />}
405
+ subtTitle={
406
+ <h4>Upload and send files or add them to the catalog</h4>
407
+ }
408
+ >
409
+ <h3>Header</h3>
410
+ </BmModal.Header>
411
+ <BmModal.Body>
412
+ <p>This is a body</p>
413
+ <input />
414
+ <p>This is a body</p>
415
+ <input />
416
+ <p>This is a body</p>
417
+ <input />
418
+ <p>This is a body</p>
419
+ <input />
420
+ <p>This is a body</p>
421
+ <input />
422
+ <p>This is a body</p>
423
+ <input />
424
+ <p>This is a body</p>
425
+ <input />
426
+ <p>This is a body</p>
427
+ <input />
428
+ </BmModal.Body>
429
+ <BmModal.Footer>
430
+ <BmButton width="100%" size="small">
431
+ Send
432
+ </BmButton>
433
+ <BmButton width="100%" size="small" variant="secondary">
434
+ View
435
+ </BmButton>
436
+ </BmModal.Footer>
437
+ </BmModal>
438
+ </>
364
439
  </>
365
440
  );
366
441
  };
package/src/lib/components/Buttons/buttons.js CHANGED
@@ -16,15 +16,15 @@ import {
16
16
  BmSecondaryRed8,
17
17
  } from '../colors';
18
18
  import { BmButtonIcon } from '../iconStyles';
19
- import { h3, h4, h6 } from '../text';
19
+ import { h5 } from '../text';
20
20
 
21
21
  const ButtonText = styled.div`
22
22
  ${({ size }) => {
23
- if (size === 'large') return `${h3}`;
24
- if (size === 'medium') return `${h3}`;
25
- if (size === 'small') return `${h4}`;
26
- if (size === 'xsmall') return `${h6}`;
27
- return `${h3}`;
23
+ if (size === 'large') return `${h5}`;
24
+ if (size === 'medium') return `${h5}`;
25
+ if (size === 'small') return `${h5}`;
26
+ if (size === 'xsmall') return `${h5}`;
27
+ return `${h5}`;
28
28
  }}
29
29
  text-align: center;
30
30
  color: ${({ variant, disabled, color }) => {
@@ -47,20 +47,21 @@ const BeemButton = styled.button`
47
47
  flex-direction: row;
48
48
  justify-content: center;
49
49
  align-items: center;
50
- border-radius: 0.2857rem;
50
+ width: ${({ width }) => width || ''};
51
+ border-radius: 0.5714rem;
51
52
  padding: ${({ size }) => {
52
- if (size === 'large') return '0.625rem 1.5rem';
53
- if (size === 'medium') return '0.4375rem 1rem';
54
- if (size === 'small') return '.375rem .75rem';
53
+ if (size === 'large') return '.7143rem 1.2857rem';
54
+ if (size === 'medium') return '.7143rem 1.1429rem';
55
+ if (size === 'small') return '.5714rem 1rem';
55
56
  if (size === 'xsmall') return '.4286rem .8571rem';
56
- return '.625rem 1.5rem';
57
+ return '.7143rem 1.1429rem';
57
58
  }};
58
59
  line-height: ${({ size }) => {
59
- // if (size === 'large') return '0.625rem 1.5rem';
60
- // if (size === 'medium') return '0.4375rem 1rem';
61
- // if (size === 'small') return '.375rem .75rem';
60
+ if (size === 'large') return '1.7143rem';
61
+ if (size === 'medium') return '1.4286rem';
62
+ if (size === 'small') return '1.4286rem';
62
63
  if (size === 'xsmall') return '1.4286rem';
63
- return 'normal';
64
+ return '1.4286rem';
64
65
  }};
65
66
  background: ${({ variant, disabled, color }) => {
66
67
  if (!disabled) {
@@ -78,7 +79,7 @@ const BeemButton = styled.button`
78
79
  return `${BmGrey100}`;
79
80
  }};
80
81
 
81
- border: 0.071rem solid
82
+ border: 0.994px solid
82
83
  ${({ variant, disabled, color }) => {
83
84
  if (!disabled) {
84
85
  if (variant === 'primary') return `${color || BmPrimaryBlue}`;
@@ -107,7 +108,7 @@ const BeemButton = styled.button`
107
108
  }
108
109
  }
109
110
  }};
110
- border: 0.071rem solid
111
+ border: 0.994px solid
111
112
  ${({ variant, disabled, color }) => {
112
113
  if (!disabled) {
113
114
  if (variant === 'secondary')
@@ -136,9 +137,9 @@ const BeemButton = styled.button`
136
137
  variant === 'success' ||
137
138
  variant === 'destructive'
138
139
  )
139
- return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
140
+ return 'inset 0rem .125rem .25rem rgba(0, 0, 0, 0.25)';
140
141
  if (!variant) {
141
- return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
142
+ return 'inset 0rem .125rem .25rem rgba(0, 0, 0, 0.25)';
142
143
  }
143
144
  }
144
145
  }};
package/src/lib/components/Modals/modal.js CHANGED
@@ -12,19 +12,18 @@ import { BmIcons } from '../iconStyles';
12
12
  const { Provider, Consumer } = React.createContext();
13
13
 
14
14
  export const Overlay = styled.div`
15
- position: fixed;
15
+ position: fixed;
16
16
  top: 0;
17
17
  left: 0;
18
18
  z-index: 9999;
19
19
  width: 100vw;
20
20
  height: 100vh;
21
21
  background-color: ${BmBgGrey45};
22
- }
23
22
  `;
24
23
  export const ModalContent = styled.div`
25
24
  display: flex;
26
25
  flex-direction: column;
27
- border-radius: 0.25rem;
26
+ border-radius: 0.8571rem;
28
27
  padding: 1rem;
29
28
  margin: 2rem auto;
30
29
  background: ${BmPrimaryWhite};
@@ -94,32 +93,71 @@ const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
94
93
  };
95
94
 
96
95
  const ModalHeader = styled.div`
96
+ display: flex;
97
+ padding: 1.7143rem 1.7143rem 1.7143rem 1.7143rem;
98
+ flex-direction: row;
99
+ align-items: center;
100
+ gap: 1.1429rem;
101
+ align-self: stretch;
102
+ `;
103
+ const ModalHeaderContent = styled.div`
97
104
  display: flex;
98
105
  flex-direction: row;
99
106
  justify-content: space-between;
100
107
  align-items: center;
108
+ width: 100%;
109
+ `;
110
+
111
+ const IconContainer = styled.div`
112
+ display: flex;
113
+
114
+ padding: 0.5714rem;
115
+ justify-content: center;
116
+ align-items: center;
117
+ border-radius: 0.7143rem;
118
+ border: 0.0714rem solid var(--Gray-200, #eaecf0);
119
+ background: var(--Base-White, #fff);
120
+
121
+ /* Shadow/xs */
122
+ box-shadow: 0rem 0.0714rem 0.1429rem 0rem rgba(16, 24, 40, 0.05);
101
123
  `;
102
124
 
103
- BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
125
+ BmModal.Header = ({
126
+ children,
127
+ size,
128
+ onHide,
129
+ subtTitle,
130
+ closeButton,
131
+ show,
132
+ icon,
133
+ trailingIcon,
134
+ ...rest
135
+ }) => {
104
136
  return (
105
137
  <Consumer>
106
138
  {(value) => (
107
139
  <>
108
140
  <ModalHeader {...rest}>
109
- <p>&nbsp;</p>
110
- {children}
111
- {closeButton ? (
112
- <BmIcons
113
- size="xlarge"
114
- icon={<Clear />}
115
- onClick={() =>
116
- value && value.onHide && value.onHide(!value.show)
117
- }
118
- {...rest}
119
- />
120
- ) : (
121
- <p>&nbsp;</p>
122
- )}
141
+ <IconContainer>{trailingIcon}</IconContainer>
142
+ <div style={{ width: '100%' }}>
143
+ <ModalHeaderContent>
144
+ {children || <p>&nbsp;</p>}
145
+
146
+ {closeButton ? (
147
+ <BmIcons
148
+ size="large"
149
+ icon={<Clear />}
150
+ onClick={() =>
151
+ value && value.onHide && value.onHide(!value.show)
152
+ }
153
+ {...rest}
154
+ />
155
+ ) : (
156
+ <p>&nbsp;</p>
157
+ )}
158
+ </ModalHeaderContent>
159
+ <p> {subtTitle}</p>
160
+ </div>
123
161
  </ModalHeader>
124
162
  </>
125
163
  )}
@@ -127,15 +165,10 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
127
165
  );
128
166
  };
129
167
 
130
- BmModal.SubHeader = styled.div`
131
- display: flex;
132
- flex-direction: row;
133
- justify-content: center;
134
- align-items: center;
135
- `;
136
-
137
168
  BmModal.Body = styled.div`
138
169
  display: flex;
170
+ padding: 0rem 1.7143rem;
171
+
139
172
  flex-direction: column;
140
173
  justify-content: space-between;
141
174
  > *:not(:last-child) {
@@ -159,6 +192,9 @@ BmModal.Body = styled.div`
159
192
  BmModal.Footer = styled.div`
160
193
  display: flex;
161
194
  justify-content: space-between;
195
+ padding: 0rem 1.7143rem 1.7143rem 1.7143rem;
196
+ padding-top: 2.2857rem;
197
+ gap: 0.8571rem;
162
198
  `;
163
199
 
164
200
  BmModal.propTypes = {
package/src/lib/components/Modals/modals.stories.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /* eslint-disable import/no-anonymous-default-export */
2
2
  import React, { useState } from 'react';
3
+ import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
3
4
  import BmModal from './modal';
4
5
  import { BmButton } from '../Buttons/buttons';
5
6
 
@@ -60,12 +61,9 @@ export const ModalWithSubHeader = () => {
60
61
  <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
61
62
  </div>
62
63
  <BmModal show={showModal} onHide={() => setShowModal(false)}>
63
- <BmModal.Header closeButton>
64
+ <BmModal.Header subtTitle={<h4>Subtext this is yo</h4>} closeButton>
64
65
  <h2>Header</h2>
65
66
  </BmModal.Header>
66
- <BmModal.SubHeader>
67
- <h5>This modal has a sub heading</h5>
68
- </BmModal.SubHeader>
69
67
  <BmModal.Body>
70
68
  <p>This is a body</p>
71
69
  </BmModal.Body>
@@ -89,15 +87,17 @@ export const ExampleModal = () => {
89
87
  onHide={() => setShowModal(false)}
90
88
  centered
91
89
  >
92
- <BmModal.Header closeButton>
90
+ <BmModal.Header trailingIcon={<LocalOfferOutlinedIcon />} closeButton>
93
91
  <h2>Header</h2>
94
92
  </BmModal.Header>
95
93
  <BmModal.Body>
96
94
  <p>This is a body</p>
97
95
  </BmModal.Body>
98
96
  <BmModal.Footer>
99
- <BmButton size="small">Send</BmButton>
100
- <BmButton size="small" variant="secondary">
97
+ <BmButton width="100%" size="small">
98
+ Send
99
+ </BmButton>
100
+ <BmButton width="100%" size="small" variant="secondary">
101
101
  View
102
102
  </BmButton>
103
103
  </BmModal.Footer>
package/src/lib/components/dropdownButton.js CHANGED
@@ -66,14 +66,14 @@ export const Drop = styled(BmBtnIcon)`
66
66
  }};
67
67
  border-top-left-radius: 0.071rem;
68
68
  border-bottom-left-radius: 0.071rem;
69
- border-radius: none;
69
+ border-top-right-radius: 0.5714rem;
70
+ border-bottom-right-radius: 0.5714rem;
70
71
  padding: 0rem;
71
72
  `;
72
73
 
73
74
  export const Button = styled(BmButton)`
74
75
  border-top-right-radius: 0.071rem;
75
76
  border-bottom-right-radius: 0.071rem;
76
- /* border-radius: none; */
77
77
  border-right: none;
78
78
  padding: ${({ size }) => {
79
79
  // if (size === 'large') return '0.625rem 1.5rem';