beem-component 1.5.7 → 1.6.0

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 (155) hide show
  1. package/.eslintrc +62 -0
  2. package/.prettierrc +6 -0
  3. package/babel.config.js +9 -10
  4. package/dist/components/Accordion/Accordion.js +7 -7
  5. package/dist/components/Accordion/Accordion.stories.js +28 -28
  6. package/dist/components/Avatars/avatars.js +22 -22
  7. package/dist/components/Avatars/avatars.stories.js +17 -17
  8. package/dist/components/BannerCard/bannerCard.stories.js +12 -12
  9. package/dist/components/BannerCard/bannerCards.js +14 -14
  10. package/dist/components/Buttons/Stories/basicbutton.stories.js +23 -23
  11. package/dist/components/Buttons/Stories/buttonAlertIcons.stories.js +16 -16
  12. package/dist/components/Buttons/Stories/buttonIconsOnly.stories.js +16 -16
  13. package/dist/components/Buttons/buttonAlertIcons.js +16 -16
  14. package/dist/components/Buttons/buttonIconsOnly.js +22 -22
  15. package/dist/components/Buttons/buttons.js +56 -56
  16. package/dist/components/Cards/cards.js +1 -1
  17. package/dist/components/Cards/cards.stories.js +6 -6
  18. package/dist/components/ChatComponents/ChatBody/chatBody.js +36 -36
  19. package/dist/components/ChatComponents/ChatBody/chatBody.stories.js +4 -4
  20. package/dist/components/ChatComponents/ChatHeader/chatHeader.js +1 -1
  21. package/dist/components/ChatComponents/ChatHeader/chatHeader.stories.js +1 -1
  22. package/dist/components/ChatComponents/ColorPicker/colorPicker.stories.js +7 -3
  23. package/dist/components/ChatComponents/ContactCards/contactCards.js +1 -2
  24. package/dist/components/ChatComponents/ContactCards/contactCards.stories.js +1 -1
  25. package/dist/components/ChatComponents/FormAccordion/FormAccordion.stories.js +9 -5
  26. package/dist/components/ChatComponents/InfoTab/infoTab.js +1 -1
  27. package/dist/components/ChatComponents/InfoTab/infoTab.stories.js +4 -4
  28. package/dist/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js +12 -7
  29. package/dist/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js +14 -12
  30. package/dist/components/Checkbox/checkboxToggler.js +64 -0
  31. package/dist/components/Checkbox/checkboxToggler.stories.js +92 -0
  32. package/dist/components/Lists/listBox.js +5 -5
  33. package/dist/components/Lists/listBox.stories.js +5 -5
  34. package/dist/components/Lists/listHeader.stories.js +11 -11
  35. package/dist/components/Lists/listheader.js +4 -4
  36. package/dist/components/Lists/rowLabels.js +2 -2
  37. package/dist/components/Lists/rowLabels.stories.js +16 -16
  38. package/dist/components/Loader/loader.js +7 -7
  39. package/dist/components/Loader/loader.stories.js +11 -11
  40. package/dist/components/MessageCounter/MessageCounter.stories.js +13 -13
  41. package/dist/components/MessageCounter/messageCounter.js +11 -11
  42. package/dist/components/Modals/modal.js +6 -8
  43. package/dist/components/Modals/modals.stories.js +6 -6
  44. package/dist/components/NoteBar/noteBar.js +14 -14
  45. package/dist/components/NoteBar/noteBar.stories.js +15 -15
  46. package/dist/components/PerformanceIndicator/performaceIndicator.stories.js +13 -13
  47. package/dist/components/PerformanceIndicator/performanceIndicator.js +14 -12
  48. package/dist/components/Pills/pills.js +10 -10
  49. package/dist/components/Pills/pills.stories.js +19 -21
  50. package/dist/components/ProfileIcon/ProfileIcon.js +14 -14
  51. package/dist/components/ProfileIcon/profileIcon.stories.js +16 -16
  52. package/dist/components/ProgressBar/progressbar.stories.js +6 -8
  53. package/dist/components/ProgressRing/progressRing.js +19 -19
  54. package/dist/components/ProgressRing/progressRing.stories.js +14 -14
  55. package/dist/components/RouteLink/link.js +3 -3
  56. package/dist/components/RouteLink/link.stories.js +1 -1
  57. package/dist/components/ScrollBar/scrollBar.js +9 -9
  58. package/dist/components/SuperFluid/SegmentCard/index.js +2 -2
  59. package/dist/components/Tabs/tabs.js +6 -6
  60. package/dist/components/Tabs/tabs.stories.js +17 -17
  61. package/dist/components/Tags/tags.js +21 -21
  62. package/dist/components/Tags/tags.stories.js +16 -16
  63. package/dist/components/breakpoints.js +3 -3
  64. package/dist/components/checkbox.js +4 -4
  65. package/dist/components/colors.js +32 -30
  66. package/dist/components/dropdownButton.js +35 -35
  67. package/dist/components/examples/InfoAccordion.js +0 -1
  68. package/dist/components/iconStyles.js +45 -45
  69. package/dist/components/index.js +32 -16
  70. package/dist/components/input.js +16 -16
  71. package/dist/components/typography.js +14 -14
  72. package/package.json +54 -31
  73. package/src/App.js +10 -7
  74. package/src/index.js +6 -8
  75. package/src/lib/components/Accordion/Accordion.js +32 -14
  76. package/src/lib/components/Accordion/Accordion.stories.js +31 -31
  77. package/src/lib/components/Avatars/avatars.js +33 -28
  78. package/src/lib/components/Avatars/avatars.stories.js +18 -18
  79. package/src/lib/components/BannerCard/bannerCard.stories.js +16 -17
  80. package/src/lib/components/BannerCard/bannerCards.js +18 -18
  81. package/src/lib/components/Buttons/Stories/basicbutton.stories.js +29 -29
  82. package/src/lib/components/Buttons/Stories/buttonAlertIcons.stories.js +17 -17
  83. package/src/lib/components/Buttons/Stories/buttonIconsOnly.stories.js +24 -24
  84. package/src/lib/components/Buttons/buttonAlertIcons.js +22 -25
  85. package/src/lib/components/Buttons/buttonIconsOnly.js +32 -28
  86. package/src/lib/components/Buttons/buttons.js +70 -73
  87. package/src/lib/components/Cards/cards.js +2 -3
  88. package/src/lib/components/Cards/cards.stories.js +10 -10
  89. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +46 -45
  90. package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js +34 -28
  91. package/src/lib/components/ChatComponents/ChatBody/sessionDetails.js +2 -2
  92. package/src/lib/components/ChatComponents/ChatHeader/chatHeader.js +2 -2
  93. package/src/lib/components/ChatComponents/ChatHeader/chatHeader.stories.js +4 -4
  94. package/src/lib/components/ChatComponents/ColorPicker/colorPicker.js +2 -2
  95. package/src/lib/components/ChatComponents/ColorPicker/colorPicker.stories.js +4 -3
  96. package/src/lib/components/ChatComponents/ContactCards/contactCards.js +7 -5
  97. package/src/lib/components/ChatComponents/ContactCards/contactCards.stories.js +6 -6
  98. package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.js +3 -3
  99. package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.stories.js +4 -3
  100. package/src/lib/components/ChatComponents/InfoTab/infoTab.js +2 -2
  101. package/src/lib/components/ChatComponents/InfoTab/infoTab.stories.js +7 -7
  102. package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js +5 -3
  103. package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.js +2 -2
  104. package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js +6 -5
  105. package/src/lib/components/Checkbox/checkboxToggler.js +89 -0
  106. package/src/lib/components/Checkbox/checkboxToggler.stories.js +48 -0
  107. package/src/lib/components/Lists/listBox.js +7 -7
  108. package/src/lib/components/Lists/listBox.stories.js +8 -11
  109. package/src/lib/components/Lists/listHeader.stories.js +13 -13
  110. package/src/lib/components/Lists/listheader.js +7 -7
  111. package/src/lib/components/Lists/rowLabels.js +6 -6
  112. package/src/lib/components/Lists/rowLabels.stories.js +18 -18
  113. package/src/lib/components/Loader/loader.js +13 -13
  114. package/src/lib/components/Loader/loader.stories.js +14 -14
  115. package/src/lib/components/MainWrapper/index.js +2 -2
  116. package/src/lib/components/MessageCounter/MessageCounter.stories.js +14 -14
  117. package/src/lib/components/MessageCounter/messageCounter.js +16 -16
  118. package/src/lib/components/Modals/modal.js +25 -23
  119. package/src/lib/components/Modals/modals.stories.js +9 -9
  120. package/src/lib/components/NoteBar/noteBar.js +20 -20
  121. package/src/lib/components/NoteBar/noteBar.stories.js +18 -17
  122. package/src/lib/components/PerformanceIndicator/performaceIndicator.stories.js +15 -15
  123. package/src/lib/components/PerformanceIndicator/performanceIndicator.js +11 -10
  124. package/src/lib/components/Pills/pills.js +16 -16
  125. package/src/lib/components/Pills/pills.stories.js +22 -23
  126. package/src/lib/components/ProfileIcon/ProfileIcon.js +50 -52
  127. package/src/lib/components/ProfileIcon/profileIcon.stories.js +22 -22
  128. package/src/lib/components/ProgressBar/progressbar.js +4 -5
  129. package/src/lib/components/ProgressBar/progressbar.stories.js +8 -9
  130. package/src/lib/components/ProgressRing/progressRing.js +25 -24
  131. package/src/lib/components/ProgressRing/progressRing.stories.js +18 -18
  132. package/src/lib/components/RouteLink/link.js +10 -8
  133. package/src/lib/components/RouteLink/link.stories.js +4 -4
  134. package/src/lib/components/ScrollBar/scrollBar.js +15 -14
  135. package/src/lib/components/SuperFluid/Content/index.js +2 -2
  136. package/src/lib/components/SuperFluid/ContentTitle.js/index.js +2 -2
  137. package/src/lib/components/SuperFluid/SegmentCard/index.js +9 -8
  138. package/src/lib/components/Tabs/tabs.js +11 -11
  139. package/src/lib/components/Tabs/tabs.stories.js +20 -20
  140. package/src/lib/components/Tags/tags.js +26 -24
  141. package/src/lib/components/Tags/tags.stories.js +19 -19
  142. package/src/lib/components/breakpoints.js +3 -3
  143. package/src/lib/components/checkbox.js +7 -6
  144. package/src/lib/components/colors.js +30 -28
  145. package/src/lib/components/dropdownButton.js +36 -39
  146. package/src/lib/components/examples/InfoAccordion.js +1 -1
  147. package/src/lib/components/globalStyles.js +2 -2
  148. package/src/lib/components/iconStyles.js +45 -48
  149. package/src/lib/components/index.js +48 -45
  150. package/src/lib/components/input.js +20 -20
  151. package/src/lib/components/text.js +1 -1
  152. package/src/lib/components/typography.js +14 -14
  153. package/src/reportWebVitals.js +1 -1
  154. package/dist/components/checkboxToggler.js +0 -50
  155. package/src/lib/components/checkboxToggler.js +0 -19
@@ -1,23 +1,22 @@
1
- import React from "react";
1
+ import React from 'react';
2
2
 
3
- import { withStyles } from "@material-ui/core/styles";
3
+ import { withStyles } from '@material-ui/core/styles';
4
+ import SvgIcon from '@material-ui/core/SvgIcon';
4
5
  import {
5
6
  BmPrimaryWhite,
6
7
  BmPrimaryBlue,
7
8
  BmGrey400,
8
9
  BmPrimaryBlack,
9
10
  BmSecondaryGrey,
10
- } from "./colors";
11
-
12
- import SvgIcon from "@material-ui/core/SvgIcon";
11
+ } from './colors';
13
12
 
14
13
  const size = (props) => {
15
- if (props.size === "xsmall") return "1.143rem !important";
16
- if (props.size === "small") return "1.429rem !important";
17
- if (props.size === "medium") return "1.714rem !important";
18
- if (props.size === "large") return "1.714rem !important";
19
- if (props.size === "xlarge") return "2.286rem !important";
20
- if (!props.size) return "1.714rem !important";
14
+ if (props.size === 'xsmall') return '1.143rem !important';
15
+ if (props.size === 'small') return '1.429rem !important';
16
+ if (props.size === 'medium') return '1.714rem !important';
17
+ if (props.size === 'large') return '1.714rem !important';
18
+ if (props.size === 'xlarge') return '2.286rem !important';
19
+ if (!props.size) return '1.714rem !important';
21
20
  return props.size;
22
21
  };
23
22
 
@@ -28,34 +27,32 @@ const ButtonIcon = {
28
27
  width: (props) => size(props),
29
28
  fill: ({ variant, disabled, color }) => {
30
29
  if (!disabled) {
31
- if (variant === "active") return `${BmPrimaryWhite}`;
32
- if (variant === "enabled") return `${BmPrimaryBlack}`;
33
- if (variant === "destructive") return `${BmPrimaryWhite}`;
34
- if (variant === "success") return `${BmPrimaryWhite}`;
35
- if (variant === "neutral") return `${color ? color : BmPrimaryBlue}`;
36
- if (variant === "primary") return `${BmPrimaryWhite}`;
37
- if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
38
- if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`;
30
+ if (variant === 'active') return `${BmPrimaryWhite}`;
31
+ if (variant === 'enabled') return `${BmPrimaryBlack}`;
32
+ if (variant === 'destructive') return `${BmPrimaryWhite}`;
33
+ if (variant === 'success') return `${BmPrimaryWhite}`;
34
+ if (variant === 'neutral') return `${color || BmPrimaryBlue}`;
35
+ if (variant === 'primary') return `${BmPrimaryWhite}`;
36
+ if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
37
+ if (variant === 'tertiary') return `${color || BmPrimaryBlue}`;
39
38
  return `${BmPrimaryWhite}`;
40
- } else {
41
- return `${BmGrey400}`;
42
39
  }
40
+ return `${BmGrey400}`;
43
41
  },
44
42
  color: ({ variant, disabled, color }) => {
45
43
  if (color) return color;
46
44
  if (!disabled) {
47
- if (variant === "active") return `${BmPrimaryWhite}`;
48
- if (variant === "enabled") return `${BmPrimaryBlack}`;
49
- if (variant === "destructive") return `${BmPrimaryWhite}`;
50
- if (variant === "success") return `${BmPrimaryWhite}`;
51
- if (variant === "neutral") return `${BmPrimaryBlue}`;
52
- if (variant === "primary") return `${BmPrimaryWhite}`;
53
- if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
54
- if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`;
45
+ if (variant === 'active') return `${BmPrimaryWhite}`;
46
+ if (variant === 'enabled') return `${BmPrimaryBlack}`;
47
+ if (variant === 'destructive') return `${BmPrimaryWhite}`;
48
+ if (variant === 'success') return `${BmPrimaryWhite}`;
49
+ if (variant === 'neutral') return `${BmPrimaryBlue}`;
50
+ if (variant === 'primary') return `${BmPrimaryWhite}`;
51
+ if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
52
+ if (variant === 'tertiary') return `${color || BmPrimaryBlue}`;
55
53
  return `${BmPrimaryWhite}`;
56
- } else {
57
- return `${BmGrey400}`;
58
54
  }
55
+ return `${BmGrey400}`;
59
56
  },
60
57
  },
61
58
  };
@@ -71,13 +68,13 @@ export const BmButtonIcon = withStyles(ButtonIcon)((props) => {
71
68
  // Tags
72
69
  const TagIcon = {
73
70
  root: {
74
- height: (props) => size(props) || "1.143rem !important",
75
- width: (props) => size(props) || "1.143rem !important",
71
+ height: (props) => size(props) || '1.143rem !important',
72
+ width: (props) => size(props) || '1.143rem !important',
76
73
  fill: ({ variant, color }) => {
77
74
  if (color) {
78
75
  return color;
79
76
  }
80
- if (variant === "neutral" || variant === "light")
77
+ if (variant === 'neutral' || variant === 'light')
81
78
  return `${BmPrimaryBlack}`;
82
79
  return `${BmPrimaryWhite}`;
83
80
  },
@@ -85,7 +82,7 @@ const TagIcon = {
85
82
  if (color) {
86
83
  return color;
87
84
  }
88
- if (variant === "neutral" || variant === "light")
85
+ if (variant === 'neutral' || variant === 'light')
89
86
  return `${BmPrimaryBlack}`;
90
87
  return `${BmPrimaryWhite}`;
91
88
  },
@@ -101,11 +98,11 @@ export const BmTagIcon = withStyles(TagIcon)((props) => {
101
98
 
102
99
  // Avatar Icons
103
100
  const Avatarsize = (props) => {
104
- if (props.size === "xsmall") return "0.857rem !important";
105
- if (props.size === "small") return "1.143rem !important";
106
- if (props.size === "medium") return "1.429rem !important";
107
- if (props.size === "large") return "2.286rem !important";
108
- if (!props.size) return "2.286rem !important";
101
+ if (props.size === 'xsmall') return '0.857rem !important';
102
+ if (props.size === 'small') return '1.143rem !important';
103
+ if (props.size === 'medium') return '1.429rem !important';
104
+ if (props.size === 'large') return '2.286rem !important';
105
+ if (!props.size) return '2.286rem !important';
109
106
  return props.size;
110
107
  };
111
108
 
@@ -126,13 +123,13 @@ export const BmAvatarIcon = withStyles(AvatarIcon)((props) => {
126
123
  return null;
127
124
  });
128
125
 
129
- //check on sizing
126
+ // check on sizing
130
127
  export const BmChatbotIcon = withStyles(AvatarIcon)((props) => {
131
128
  return (
132
129
  <SvgIcon action {...props}>
133
130
  <path
134
131
  d="M19 8.975V6C19 5.46957 18.7893 4.96086 18.4142 4.58579C18.0391 4.21072 17.5304 4 17 4H11V2.688C11.305 2.414 11.5 2.02 11.5 1.578C11.5 1.18018 11.342 0.798647 11.0607 0.517343C10.7794 0.236038 10.3978 0.0780029 10 0.0780029C9.60218 0.0780029 9.22064 0.236038 8.93934 0.517343C8.65804 0.798647 8.5 1.18018 8.5 1.578C8.5 2.02 8.695 2.414 9 2.688V4H3C2.46957 4 1.96086 4.21072 1.58579 4.58579C1.21071 4.96086 1 5.46957 1 6V8.998L0.928 9.003C0.675888 9.02097 0.439955 9.13382 0.26775 9.31883C0.095544 9.50384 -0.000132994 9.74725 1.38752e-07 10V12C1.38752e-07 12.2652 0.105357 12.5196 0.292893 12.7071C0.48043 12.8946 0.734784 13 1 13V18C1 18.5304 1.21071 19.0391 1.58579 19.4142C1.96086 19.7893 2.46957 20 3 20H17C17.5304 20 18.0391 19.7893 18.4142 19.4142C18.7893 19.0391 19 18.5304 19 18V13C19.2652 13 19.5196 12.8946 19.7071 12.7071C19.8946 12.5196 20 12.2652 20 12V10.062C20.0116 9.90681 19.9869 9.75104 19.928 9.607C19.726 9.119 19.293 9.002 19 8.975ZM5 10C5 8.896 5.672 8 6.5 8C7.328 8 8 8.896 8 10C8 11.104 7.328 12 6.5 12C5.672 12 5 11.104 5 10ZM13.998 16C12.997 15.997 6.001 16 6 16V14C6 14 13.001 13.998 14.002 14L13.998 16ZM13.5 12C12.672 12 12 11.104 12 10C12 8.896 12.672 8 13.5 8C14.328 8 15 8.896 15 10C15 11.104 14.328 12 13.5 12Z"
135
- fill={props.color || "white"}
132
+ fill={props.color || 'white'}
136
133
  />
137
134
  </SvgIcon>
138
135
  );
@@ -144,7 +141,7 @@ const EmojiSize = () => {
144
141
  // if (props.size === "small") return "1.429rem";
145
142
  // if (props.size === "medium") return "1.714rem";
146
143
  // if (props.size === "large") return "1.714rem";
147
- return "2.286rem !important";
144
+ return '2.286rem !important';
148
145
  };
149
146
 
150
147
  const EmojiIcon = {
@@ -169,7 +166,7 @@ export const BmQuickReplyIcon = withStyles(EmojiIcon)((props) => {
169
166
  <SvgIcon action {...props}>
170
167
  <path
171
168
  d="M5.33332 23.3932V5.83317H26.6667V13.8332H29.3333V5.83317C29.3333 4.3665 28.1333 3.1665 26.6667 3.1665H5.33332C3.86666 3.1665 2.67999 4.3665 2.67999 5.83317L2.66666 29.8332L7.99999 24.4998H20V21.8332H6.89332L5.33332 23.3932Z"
172
- fill={props.color || "#575757"}
169
+ fill={props.color || '#575757'}
173
170
  />
174
171
  </SvgIcon>
175
172
  );
@@ -208,19 +205,19 @@ export const BmSupport = withStyles(icon)((props) => {
208
205
  <SvgIcon action {...props}>
209
206
  <path
210
207
  d="M21 12.22C21 6.73 16.74 3 12 3C7.31 3 3 6.65 3 12.28C2.4 12.62 2 13.26 2 14V16C2 17.1 2.9 18 4 18H5V11.9C5 8.03 8.13 4.9 12 4.9C15.87 4.9 19 8.03 19 11.9V19H11V21H19C20.1 21 21 20.1 21 19V17.78C21.59 17.47 22 16.86 22 16.14V13.84C22 13.14 21.59 12.53 21 12.22Z"
211
- fill={props.color || "black"}
208
+ fill={props.color || 'black'}
212
209
  />
213
210
  <path
214
211
  d="M9 14C9.55228 14 10 13.5523 10 13C10 12.4477 9.55228 12 9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14Z"
215
- fill={props.color || "black"}
212
+ fill={props.color || 'black'}
216
213
  />
217
214
  <path
218
215
  d="M15 14C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14Z"
219
- fill={props.color || "black"}
216
+ fill={props.color || 'black'}
220
217
  />
221
218
  <path
222
219
  d="M18 11.03C17.7615 9.62413 17.0334 8.34796 15.9444 7.42738C14.8555 6.5068 13.4759 6.00117 12.05 6C9.01997 6 5.75997 8.51 6.01997 12.45C7.2531 11.9454 8.34221 11.1435 9.1902 10.1158C10.0382 9.08808 10.6187 7.86652 10.88 6.56C12.19 9.19 14.88 11 18 11.03Z"
223
- fill={props.color || "black"}
220
+ fill={props.color || 'black'}
224
221
  />
225
222
  </SvgIcon>
226
223
  );
@@ -1,26 +1,27 @@
1
- import BmAccordion from "./Accordion/Accordion";
2
- import BmAvatar from "./Avatars/avatars";
3
- import { BmAlertIcon } from "./Buttons/buttonAlertIcons";
4
- import { BmBtnIcon } from "./Buttons/buttonIconsOnly";
5
- import { BmButton } from "./Buttons/buttons";
6
- import BmCard from "./Cards/cards";
7
- import { BmButtonDropDown } from "./dropdownButton";
8
- import { GlobalStyle } from "./globalStyles";
9
- import { BmInput } from "./input";
10
- import { BmRouteLink } from "./RouteLink/link";
11
- import { BmListHeader } from "./Lists/listheader";
12
- import { BmRowLabel } from "./Lists/rowLabels";
13
- import { BmListBox } from "./Lists/listBox";
14
- import BmModal from "./Modals/modal";
15
- import { BmProgressBar } from "./ProgressBar/progressbar";
16
- import { BmTab } from "./Tabs/tabs";
17
- import * as BmColors from "./colors";
18
- import { BmLoader } from "./Loader/loader";
19
- import { BmCheckbox } from "./checkbox";
20
- import { BmTag } from "../components/Tags/tags";
21
- import BmBanner from "../components/BannerCard/bannerCards";
22
- import BmProgressRing from "./ProgressRing/progressRing";
23
-
1
+ import BmAccordion from './Accordion/Accordion';
2
+ import BmAvatar from './Avatars/avatars';
3
+ import { BmAlertIcon } from './Buttons/buttonAlertIcons';
4
+ import { BmBtnIcon } from './Buttons/buttonIconsOnly';
5
+ import { BmButton } from './Buttons/buttons';
6
+ import BmCard from './Cards/cards';
7
+ import { BmButtonDropDown } from './dropdownButton';
8
+ import { GlobalStyle } from './globalStyles';
9
+ import { BmInput } from './input';
10
+ import { BmRouteLink } from './RouteLink/link';
11
+ import { BmListHeader } from './Lists/listheader';
12
+ import { BmRowLabel } from './Lists/rowLabels';
13
+ import { BmListBox } from './Lists/listBox';
14
+ import BmModal from './Modals/modal';
15
+ import { BmProgressBar } from './ProgressBar/progressbar';
16
+ import { BmTab } from './Tabs/tabs';
17
+ import * as BmColors from './colors';
18
+ import { BmLoader } from './Loader/loader';
19
+ import { BmCheckbox } from './checkbox';
20
+ import { BmTag } from './Tags/tags';
21
+ import BmBanner from './BannerCard/bannerCards';
22
+ import BmProgressRing from './ProgressRing/progressRing';
23
+ import { BmProfileIcon } from './ProfileIcon/ProfileIcon';
24
+ import { BmCheckboxToggle } from './Checkbox/checkboxToggler';
24
25
  import {
25
26
  BmTagIcon,
26
27
  BmAvatarIcon,
@@ -30,30 +31,30 @@ import {
30
31
  BmQuickReplyIcon,
31
32
  BmSupport,
32
33
  CopyToClipBoard,
33
- } from "./iconStyles";
34
- import { BmNoteBar } from "./NoteBar/noteBar";
35
- import { MainWrapper } from "../components/MainWrapper";
34
+ } from './iconStyles';
35
+ import { BmNoteBar } from './NoteBar/noteBar';
36
+ import { MainWrapper } from './MainWrapper';
36
37
 
37
- //Chat Components
38
- import BmChat from "./ChatComponents/ChatBody/chatBody";
39
- import { BmChatHeader } from "./ChatComponents/ChatHeader/chatHeader";
40
- import BmContactCard from "./ChatComponents/ContactCards/contactCards";
41
- import BmInfoTab from "./ChatComponents/InfoTab/infoTab";
42
- import BmCounter from "./MessageCounter/messageCounter";
43
- //Chat Accordion components
44
- import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";
45
- import BmChatLabels from "./ChatComponents/LabelAccordion/LabelAccordion";
46
- import BmChatNotes from "./ChatComponents/NoteAccordion/NoteAccordion";
47
- import { BmColorPicker } from "./ChatComponents/ColorPicker/colorPicker";
38
+ // Chat Components
39
+ import BmChat from './ChatComponents/ChatBody/chatBody';
40
+ import { BmChatHeader } from './ChatComponents/ChatHeader/chatHeader';
41
+ import BmContactCard from './ChatComponents/ContactCards/contactCards';
42
+ import BmInfoTab from './ChatComponents/InfoTab/infoTab';
43
+ import BmCounter from './MessageCounter/messageCounter';
44
+ // Chat Accordion components
45
+ import BmChatForm from './ChatComponents/FormAccordion/FormAccordion';
46
+ import BmChatLabels from './ChatComponents/LabelAccordion/LabelAccordion';
47
+ import BmChatNotes from './ChatComponents/NoteAccordion/NoteAccordion';
48
+ import { BmColorPicker } from './ChatComponents/ColorPicker/colorPicker';
48
49
 
49
- //SuperFluid Components
50
- import { BmContent } from "./SuperFluid/Content/index";
50
+ // SuperFluid Components
51
+ import { BmContent } from './SuperFluid/Content/index';
51
52
  import {
52
53
  BmContentFooter,
53
54
  BmContentTitle,
54
55
  BmFooterLeft,
55
56
  BmFooterRight,
56
- } from "./SuperFluid/ContentTitle.js/index.js";
57
+ } from './SuperFluid/ContentTitle.js';
57
58
  import {
58
59
  BmSegmentCard,
59
60
  BmSegmentSelector,
@@ -62,7 +63,7 @@ import {
62
63
  BmSegmentCompleteContent,
63
64
  BmSegmentCompleteIcon,
64
65
  BmSegmentCreateContent,
65
- } from "./SuperFluid/SegmentCard/index";
66
+ } from './SuperFluid/SegmentCard/index';
66
67
 
67
68
  export {
68
69
  BmAccordion,
@@ -77,6 +78,8 @@ export {
77
78
  BmRowLabel,
78
79
  BmBanner,
79
80
  BmProgressRing,
81
+ BmProfileIcon,
82
+ BmCheckboxToggle,
80
83
  // Fix height and if there is dropdown option inside the modal body
81
84
  BmModal,
82
85
  BmNoteBar,
@@ -91,7 +94,7 @@ export {
91
94
  BmButtonDropDown,
92
95
  BmCheckbox,
93
96
  BmInput,
94
- //Old SFL componets to be refactored
97
+ // Old SFL componets to be refactored
95
98
  BmContent,
96
99
  BmContentFooter,
97
100
  BmContentTitle,
@@ -104,7 +107,7 @@ export {
104
107
  BmSegmentCompleteContent,
105
108
  BmSegmentCompleteIcon,
106
109
  BmSegmentCreateContent,
107
- //Icons (Remove unused ones and check on the sizing for custom icons)
110
+ // Icons (Remove unused ones and check on the sizing for custom icons)
108
111
  BmAvatarIcon,
109
112
  BmIcons,
110
113
  BmTagIcon,
@@ -113,13 +116,13 @@ export {
113
116
  BmQuickReplyIcon,
114
117
  BmSupport,
115
118
  CopyToClipBoard,
116
- //Chat Components
119
+ // Chat Components
117
120
  BmChatHeader,
118
121
  BmChat,
119
122
  BmInfoTab,
120
123
  BmContactCard,
121
124
  BmCounter,
122
- //Chat Accordion Components
125
+ // Chat Accordion Components
123
126
  BmChatForm,
124
127
  BmChatLabels,
125
128
  BmChatNotes,
@@ -1,7 +1,7 @@
1
- import { Done, ErrorOutline } from "@material-ui/icons";
2
- import React from "react";
3
- import styled from "styled-components";
4
- import { BmIcons } from ".";
1
+ import { Done, ErrorOutline } from '@material-ui/icons';
2
+ import React from 'react';
3
+ import styled from 'styled-components';
4
+ import { BmIcons } from './iconStyles';
5
5
  import {
6
6
  BmPrimaryWhite,
7
7
  BmGrey400,
@@ -13,7 +13,7 @@ import {
13
13
  BmSecondaryDarkGreen,
14
14
  BmSecondaryRed15,
15
15
  BmGrey100,
16
- } from "./colors";
16
+ } from './colors';
17
17
 
18
18
  const BmInputLabel = styled.div`
19
19
  font-family: Open Sans;
@@ -25,7 +25,7 @@ const BmInputLabel = styled.div`
25
25
  letter-spacing: -0.02em;
26
26
  color: ${({ state }) => {
27
27
  if (state) {
28
- if (state === "incomplete") return `${BmSecondaryRed}`;
28
+ if (state === 'incomplete') return `${BmSecondaryRed}`;
29
29
  return `${BmSecondaryGrey}`;
30
30
  }
31
31
  return `${BmSecondaryGrey}`;
@@ -38,7 +38,7 @@ export const BmInputField = styled.input`
38
38
  letter-spacing: -0.02em;
39
39
  color: ${({ state }) => {
40
40
  if (state) {
41
- if (state === "disabled") return `${BmGrey400}`;
41
+ if (state === 'disabled') return `${BmGrey400}`;
42
42
  return `${BmPrimaryBlack}`;
43
43
  }
44
44
  return `${BmPrimaryBlack}`;
@@ -53,10 +53,10 @@ export const BmInputField = styled.input`
53
53
  }
54
54
  background: ${({ state }) => {
55
55
  if (state) {
56
- if (state === "pressed") return `${BmGrey50}`; // TODO: to be reviewed
57
- if (state === "positive") return `${BmSecondaryGreen15}`;
58
- if (state === "negative") return `${BmSecondaryRed15}`;
59
- if (state === "disabled") return `${BmGrey100}`;
56
+ if (state === 'pressed') return `${BmGrey50}`; // TODO: to be reviewed
57
+ if (state === 'positive') return `${BmSecondaryGreen15}`;
58
+ if (state === 'negative') return `${BmSecondaryRed15}`;
59
+ if (state === 'disabled') return `${BmGrey100}`;
60
60
  return `${BmPrimaryWhite}`;
61
61
  }
62
62
  return `${BmPrimaryWhite}`;
@@ -80,9 +80,9 @@ const BmInputWrapper = styled.div`
80
80
  padding: 0rem;
81
81
  background: ${({ state }) => {
82
82
  if (state) {
83
- if (state === "pressed") return `${BmGrey50}`;
84
- if (state === "positive") return `${BmSecondaryGreen15}`;
85
- if (state === "disabled") return `${BmGrey100}`;
83
+ if (state === 'pressed') return `${BmGrey50}`;
84
+ if (state === 'positive') return `${BmSecondaryGreen15}`;
85
+ if (state === 'disabled') return `${BmGrey100}`;
86
86
  return `${BmPrimaryWhite}`;
87
87
  }
88
88
  return `${BmPrimaryWhite}`;
@@ -90,9 +90,9 @@ const BmInputWrapper = styled.div`
90
90
 
91
91
  border: ${({ state }) => {
92
92
  if (state) {
93
- if (state === "positive") return `0.071rem solid ${BmSecondaryDarkGreen}`;
94
- if (state === "negative") return `0.071rem solid ${BmSecondaryRed}`;
95
- if (state === "disabled") return `0.071rem solid ${BmGrey100}`;
93
+ if (state === 'positive') return `0.071rem solid ${BmSecondaryDarkGreen}`;
94
+ if (state === 'negative') return `0.071rem solid ${BmSecondaryRed}`;
95
+ if (state === 'disabled') return `0.071rem solid ${BmGrey100}`;
96
96
  return `0.071rem solid ${BmGrey400}`;
97
97
  }
98
98
  return `0.071rem solid ${BmGrey400}`;
@@ -113,12 +113,12 @@ export const BmInput = ({ id, iconSize, label, state, ...rest }) => {
113
113
  id={id}
114
114
  {...rest}
115
115
  state={state}
116
- disabled={state === "disabled" ? true : false}
116
+ disabled={state === 'disabled'}
117
117
  />
118
- {state && state === "complete" && (
118
+ {state && state === 'complete' && (
119
119
  <BmIcons icon={<ErrorOutline />} size="small" />
120
120
  )}
121
- {state && state === "incomplete" && (
121
+ {state && state === 'incomplete' && (
122
122
  <BmIcons icon={<Done />} size="small" />
123
123
  )}
124
124
  </BmInputWrapper>
@@ -1,4 +1,4 @@
1
- import { PoppinsMedium, OpenSans } from "./typography";
1
+ import { PoppinsMedium, OpenSans } from './typography';
2
2
 
3
3
  // 32px
4
4
  export const h1 = `font-family: ${PoppinsMedium};
@@ -1,16 +1,16 @@
1
- export const H1 = "2.286rem";
2
- export const H2 = "1.714rem";
3
- export const H3 = "1.286rem";
4
- export const H4 = "1.143rem";
5
- export const H5 = "0.857rem";
6
- export const H6 = "0.714rem";
7
- export const P = "0.929rem";
1
+ export const H1 = '2.286rem';
2
+ export const H2 = '1.714rem';
3
+ export const H3 = '1.286rem';
4
+ export const H4 = '1.143rem';
5
+ export const H5 = '0.857rem';
6
+ export const H6 = '0.714rem';
7
+ export const P = '0.929rem';
8
8
 
9
- export const QuoteMark = "3.429rem";
10
- export const PullQuote = "1.286rem";
11
- export const Captions = "0.714rem";
12
- export const Hero = "1rem";
9
+ export const QuoteMark = '3.429rem';
10
+ export const PullQuote = '1.286rem';
11
+ export const Captions = '0.714rem';
12
+ export const Hero = '1rem';
13
13
 
14
- export const PoppinsMedium = "PoppinsMedium";
15
- export const Poppins = "Poppins";
16
- export const OpenSans = "OpenSans";
14
+ export const PoppinsMedium = 'PoppinsMedium';
15
+ export const Poppins = 'Poppins';
16
+ export const OpenSans = 'OpenSans';
@@ -1,4 +1,4 @@
1
- const reportWebVitals = onPerfEntry => {
1
+ const reportWebVitals = (onPerfEntry) => {
2
2
  if (onPerfEntry && onPerfEntry instanceof Function) {
3
3
  import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4
4
  getCLS(onPerfEntry);
@@ -1,50 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.BmCheckboxToggler = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
-
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
-
18
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
19
-
20
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
21
-
22
- 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."); }
23
-
24
- 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); }
25
-
26
- 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; }
27
-
28
- 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; }
29
-
30
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
31
-
32
- var BmCheckboxToggler = function BmCheckboxToggler() {
33
- var _React$useState = _react.default.useState(false),
34
- _React$useState2 = _slicedToArray(_React$useState, 2),
35
- state = _React$useState2[0],
36
- setState = _React$useState2[1];
37
-
38
- var handleChange = function handleChange(event) {
39
- setState(_objectSpread(_objectSpread({}, state), {}, _defineProperty({}, event.target.name, event.target.checked)));
40
- };
41
-
42
- return /*#__PURE__*/_react.default.createElement(_Switch.default, {
43
- checked: state,
44
- onChange: handleChange,
45
- name: "checkedA" // inputProps={{ "aria-label": "secondary checkbox" }}
46
-
47
- });
48
- };
49
-
50
- exports.BmCheckboxToggler = BmCheckboxToggler;
@@ -1,19 +0,0 @@
1
- import React from "react";
2
- import Switch from "@material-ui/core/Switch";
3
-
4
- export const BmCheckboxToggler = () => {
5
- const [state, setState] = React.useState(false);
6
-
7
- const handleChange = (event) => {
8
- setState({ ...state, [event.target.name]: event.target.checked });
9
- };
10
-
11
- return (
12
- <Switch
13
- checked={state}
14
- onChange={handleChange}
15
- name="checkedA"
16
- // inputProps={{ "aria-label": "secondary checkbox" }}
17
- />
18
- );
19
- }