@luscii-healthtech/web-ui 0.3.0 → 0.4.2

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.
@@ -190,6 +190,18 @@
190
190
  .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {
191
191
  left: 32px; }
192
192
 
193
+ .vitals-confirmation-dialog {
194
+ margin-top: 4rem !important; }
195
+ .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
196
+ padding: 24px; }
197
+ .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
198
+ display: flex;
199
+ justify-content: space-between;
200
+ flex-direction: row;
201
+ align-items: center;
202
+ width: 100%;
203
+ margin-top: 16px; }
204
+
193
205
  .cweb-box-shadow-default {
194
206
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
195
207
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -432,18 +444,6 @@
432
444
  .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {
433
445
  color: #cccccc; }
434
446
 
435
- .vitals-confirmation-dialog {
436
- margin-top: 4rem !important; }
437
- .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
438
- padding: 24px; }
439
- .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
440
- display: flex;
441
- justify-content: space-between;
442
- flex-direction: row;
443
- align-items: center;
444
- width: 100%;
445
- margin-top: 16px; }
446
-
447
447
  .cweb-box-shadow-default {
448
448
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
449
449
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -546,6 +546,64 @@
546
546
  .cweb-list-item.cweb-list-item-clickable:hover {
547
547
  background-color: #f2fafd; }
548
548
 
549
+ .cweb-section .cweb-button:last-of-type {
550
+ margin-right: 24px; }
551
+
552
+ .cweb-section .cweb-button:not(:last-of-type) {
553
+ margin-right: 8px; }
554
+
555
+ .cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
556
+ margin-left: auto;
557
+ width: 32px;
558
+ height: 32px; }
559
+
560
+ .cweb-section .cweb-button.add-button {
561
+ background: url("../../assets/add.svg") no-repeat center;
562
+ background-size: contain; }
563
+ .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
564
+ background: url("../../assets/add_hover.svg") no-repeat center;
565
+ background-size: contain; }
566
+
567
+ .cweb-section .cweb-button.edit-button {
568
+ background: url("../../assets/edit.svg") no-repeat center;
569
+ background-size: contain; }
570
+ .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
571
+ background: url("../../assets/edit_hover.svg") no-repeat center;
572
+ background-size: contain; }
573
+
574
+ .cweb-section .cweb-button.delete-button {
575
+ background: url("../../assets/delete.svg") no-repeat center;
576
+ background-size: contain; }
577
+ .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
578
+ background: url("../../assets/delete_hover.svg") no-repeat center;
579
+ background-size: contain; }
580
+
581
+ .cweb-section > .cweb-section-header {
582
+ display: flex;
583
+ justify-content: space-between;
584
+ flex-direction: row;
585
+ align-items: center;
586
+ border-bottom: 1px solid #eeeeee;
587
+ width: 100%;
588
+ padding: 18px 24px; }
589
+
590
+ .cweb-section > .cweb-section-footer {
591
+ display: flex;
592
+ justify-content: space-between;
593
+ flex-direction: row;
594
+ align-items: center;
595
+ border-top: 1px solid #eeeeee;
596
+ width: 100%;
597
+ padding: 1rem 24px 1rem 24px; }
598
+ .cweb-section > .cweb-section-footer img {
599
+ width: 32px;
600
+ height: 32px; }
601
+
602
+ .cweb-section-text-item .cweb-section-text-item-icon {
603
+ width: 24px;
604
+ height: 24px;
605
+ margin-right: 16px; }
606
+
549
607
  .cweb-loading {
550
608
  display: flex;
551
609
  justify-content: center;
@@ -745,59 +803,6 @@
745
803
  .cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {
746
804
  border: 1px solid #ff6266 !important; }
747
805
 
748
- .cweb-section .cweb-button:last-of-type {
749
- margin-right: 24px; }
750
-
751
- .cweb-section .cweb-button:not(:last-of-type) {
752
- margin-right: 8px; }
753
-
754
- .cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
755
- margin-left: auto;
756
- width: 32px;
757
- height: 32px; }
758
-
759
- .cweb-section .cweb-button.add-button {
760
- background: url("../../assets/add.svg") no-repeat center;
761
- background-size: contain; }
762
- .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
763
- background: url("../../assets/add_hover.svg") no-repeat center;
764
- background-size: contain; }
765
-
766
- .cweb-section .cweb-button.edit-button {
767
- background: url("../../assets/edit.svg") no-repeat center;
768
- background-size: contain; }
769
- .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
770
- background: url("../../assets/edit_hover.svg") no-repeat center;
771
- background-size: contain; }
772
-
773
- .cweb-section .cweb-button.delete-button {
774
- background: url("../../assets/delete.svg") no-repeat center;
775
- background-size: contain; }
776
- .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
777
- background: url("../../assets/delete_hover.svg") no-repeat center;
778
- background-size: contain; }
779
-
780
- .cweb-section > .cweb-section-header {
781
- display: flex;
782
- justify-content: space-between;
783
- flex-direction: row;
784
- align-items: center;
785
- border-bottom: 1px solid #eeeeee;
786
- width: 100%;
787
- padding: 18px 24px; }
788
-
789
- .cweb-section > .cweb-section-footer {
790
- display: flex;
791
- justify-content: space-between;
792
- flex-direction: row;
793
- align-items: center;
794
- border-top: 1px solid #eeeeee;
795
- width: 100%;
796
- padding: 1rem 24px 1rem 24px; }
797
- .cweb-section > .cweb-section-footer img {
798
- width: 32px;
799
- height: 32px; }
800
-
801
806
  .cweb-textarea {
802
807
  border: 1px solid #cccccc;
803
808
  border-radius: 4px;
@@ -917,11 +922,6 @@
917
922
  .editor .rdw-editor .rdw-editor-main .DraftEditor-root {
918
923
  margin: 0 12px; }
919
924
 
920
- .cweb-text-list-item .cweb-text-list-item-icon {
921
- width: 24px;
922
- height: 24px;
923
- margin-right: 16px; }
924
-
925
925
  @font-face {
926
926
  font-family: "AvenirNextLTPro-Regular";
927
927
  src: url("../../styles/fonts/avenir/3A0AF8_1_0.eot");
@@ -1890,7 +1890,7 @@ Line.propTypes = {
1890
1890
  };
1891
1891
 
1892
1892
  var _excluded$7 = ["children", "className", "onClick"];
1893
- var ListItem = function ListItem(props) {
1893
+ var SectionItem = function SectionItem(props) {
1894
1894
  var children = props.children,
1895
1895
  className = props.className,
1896
1896
  onClick = props.onClick,
@@ -3537,7 +3537,7 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
3537
3537
  SwitcherItem.propTypes = {
3538
3538
  name: PropTypes.string,
3539
3539
  icon: /*#__PURE__*/PropTypes.shape({
3540
- "default": /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
3540
+ default: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
3541
3541
  active: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
3542
3542
  showBadge: PropTypes.bool
3543
3543
  }),
@@ -3566,7 +3566,7 @@ function SwitcherItem(_ref) {
3566
3566
  });
3567
3567
  var calculatedIcon;
3568
3568
 
3569
- if (icon && typeof icon["default"] === "string") {
3569
+ if (icon && typeof icon.default === "string") {
3570
3570
  calculatedIcon = isSelected ? /*#__PURE__*/React__default.createElement("img", {
3571
3571
  alt: "",
3572
3572
  className: "",
@@ -3574,10 +3574,10 @@ function SwitcherItem(_ref) {
3574
3574
  }) : /*#__PURE__*/React__default.createElement("img", {
3575
3575
  alt: "",
3576
3576
  className: "",
3577
- src: icon["default"]
3577
+ src: icon.default
3578
3578
  });
3579
3579
  } else if (icon) {
3580
- calculatedIcon = isSelected ? icon.active : icon["default"];
3580
+ calculatedIcon = isSelected ? icon.active : icon.default;
3581
3581
  }
3582
3582
 
3583
3583
  return /*#__PURE__*/React__default.createElement("li", {
@@ -3633,7 +3633,7 @@ Switcher.propTypes = {
3633
3633
  items: /*#__PURE__*/PropTypes.arrayOf( /*#__PURE__*/PropTypes.shape({
3634
3634
  name: PropTypes.string,
3635
3635
  icon: /*#__PURE__*/PropTypes.shape({
3636
- "default": /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
3636
+ default: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
3637
3637
  active: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
3638
3638
  showBadge: PropTypes.bool
3639
3639
  }),
@@ -3777,22 +3777,6 @@ var TagSize;
3777
3777
  TagSize["base"] = "base";
3778
3778
  })(TagSize || (TagSize = {}));
3779
3779
 
3780
- var TagGroup = function TagGroup(_ref) {
3781
- var tags = _ref.tags,
3782
- _ref$tagSize = _ref.tagSize,
3783
- tagSize = _ref$tagSize === void 0 ? TagSize.base : _ref$tagSize,
3784
- className = _ref.className;
3785
- return /*#__PURE__*/React__default.createElement("div", {
3786
- className: classNames("flex flex-row flex-wrap", className)
3787
- }, tags.map(function (tag) {
3788
- return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
3789
- size: tagSize
3790
- }, tag, {
3791
- className: classNames("mr-2 last:mr-0 mb-2")
3792
- }));
3793
- }));
3794
- };
3795
-
3796
3780
  var TagColorTheme;
3797
3781
 
3798
3782
  (function (TagColorTheme) {
@@ -3829,6 +3813,22 @@ var Tag = function Tag(_ref) {
3829
3813
  }));
3830
3814
  };
3831
3815
 
3816
+ var TagGroup = function TagGroup(_ref) {
3817
+ var tags = _ref.tags,
3818
+ _ref$tagSize = _ref.tagSize,
3819
+ tagSize = _ref$tagSize === void 0 ? TagSize.base : _ref$tagSize,
3820
+ className = _ref.className;
3821
+ return /*#__PURE__*/React__default.createElement("div", {
3822
+ className: classNames("flex flex-row flex-wrap", className)
3823
+ }, tags.map(function (tag) {
3824
+ return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
3825
+ size: tagSize
3826
+ }, tag, {
3827
+ className: classNames("mr-2 last:mr-0 mb-2")
3828
+ }));
3829
+ }));
3830
+ };
3831
+
3832
3832
  var _excluded$e = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
3833
3833
  var RESIZE_TYPES = {
3834
3834
  NONE: "none",
@@ -4017,7 +4017,7 @@ var TextEditorV2 = function TextEditorV2(_ref) {
4017
4017
 
4018
4018
  var _excluded$f = ["text", "icon", "className", "iconClass", "onClick"];
4019
4019
 
4020
- function TextListItem(props) {
4020
+ function SectionItemWithContent(props) {
4021
4021
  var text = props.text,
4022
4022
  icon = props.icon,
4023
4023
  className = props.className,
@@ -4025,9 +4025,9 @@ function TextListItem(props) {
4025
4025
  onClick = props.onClick,
4026
4026
  rest = _objectWithoutPropertiesLoose(props, _excluded$f);
4027
4027
 
4028
- var mergedClasses = classNames("cweb-text-list-item", className);
4029
- var iconClasses = classNames("cweb-text-list-item-icon", iconClass);
4030
- return /*#__PURE__*/React__default.createElement(ListItem, _extends({
4028
+ var mergedClasses = classNames("cweb-section-text-item", className);
4029
+ var iconClasses = classNames("cweb-section-text-item-icon", iconClass);
4030
+ return /*#__PURE__*/React__default.createElement(SectionItem, _extends({
4031
4031
  className: mergedClasses,
4032
4032
  onClick: onClick
4033
4033
  }, rest), icon && /*#__PURE__*/React__default.createElement("img", {
@@ -4039,7 +4039,7 @@ function TextListItem(props) {
4039
4039
  }));
4040
4040
  }
4041
4041
 
4042
- TextListItem.propTypes = {
4042
+ SectionItemWithContent.propTypes = {
4043
4043
  text: PropTypes.string.isRequired,
4044
4044
  icon: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
4045
4045
  className: PropTypes.string,
@@ -4915,5 +4915,5 @@ var SearchCancelIcon$1 = function SearchCancelIcon(props) {
4915
4915
  }));
4916
4916
  };
4917
4917
 
4918
- export { ACKNOWLEDGEMENT_TYPE_OPTIONS, Acknowledgement, AddIcon, AlertsIcon, Avatar, Badge, BellIcon, CRUDPage, Carousel, CenteredHero, ChartIcon, ChatBoxIcon, CheckIcon, Checkbox, ChevronDoubleIcon, ConfirmationDialog, CrossIcon, Datepicker as DatePicker, DeleteIcon, DownArrowIcon, DragIcon, Dropdown, EditIcon, EmptyListMessage, EmptyStateDashboardIcon, ErrorBlock, ExclamationMarkIcon, EyeIcon, GearIcon, GroupIcon, HamburgerIcon$1 as HamburgerIcon, HeartIcon, INPUT_TYPES, InfoBlock, InfoField, Input, LeftArrowIcon, LightBulbIcon, Line, ListItem, ListTable, LoadingIndicator, LockIcon, Menu, MessagesIcon, MultiSelect, NavLayout, NavMenu, NotesIcon, NotificationBanner, Page, PaginationMenu, PinIcon, PreviewPhone, PrimaryButton, PrintIcon, Radio, RadioGroup, RightArrowIcon, SearchCancelIcon$1 as SearchCancelIcon, SearchIcon$1 as SearchIcon, SecondaryButton, Section, SettingsMenuButton, SmallCircleIcon, SmallDiamondIcon, SmallSquareIcon, SpaceRocketIcon, Spinner, StarIcon$1 as StarIcon, Steps, Switcher, TabLinks, Tabbar, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, TextListItem, Title, ViewItem };
4918
+ export { ACKNOWLEDGEMENT_TYPE_OPTIONS, Acknowledgement, AddIcon, AlertsIcon, Avatar, Badge, BellIcon, CRUDPage, Carousel, CenteredHero, ChartIcon, ChatBoxIcon, CheckIcon, Checkbox, ChevronDoubleIcon, ConfirmationDialog, CrossIcon, Datepicker as DatePicker, DeleteIcon, DownArrowIcon, DragIcon, Dropdown, EditIcon, EmptyListMessage, EmptyStateDashboardIcon, ErrorBlock, ExclamationMarkIcon, EyeIcon, GearIcon, GroupIcon, HamburgerIcon$1 as HamburgerIcon, HeartIcon, INPUT_TYPES, InfoBlock, InfoField, Input, LeftArrowIcon, LightBulbIcon, Line, ListTable, LoadingIndicator, LockIcon, Menu, MessagesIcon, MultiSelect, NavLayout, NavMenu, NotesIcon, NotificationBanner, Page, PaginationMenu, PinIcon, PreviewPhone, PrimaryButton, PrintIcon, Radio, RadioGroup, RightArrowIcon, SearchCancelIcon$1 as SearchCancelIcon, SearchIcon$1 as SearchIcon, SecondaryButton, Section, SectionItem, SectionItemWithContent, SettingsMenuButton, SmallCircleIcon, SmallDiamondIcon, SmallSquareIcon, SpaceRocketIcon, Spinner, StarIcon$1 as StarIcon, Steps, Switcher, TabLinks, Tabbar, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, Title, ViewItem };
4919
4919
  //# sourceMappingURL=web-ui.esm.js.map