@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.
- package/dist/components/Section/SectionItem.d.ts +9 -0
- package/dist/components/{TextListItem/TextListItem.d.ts → Section/SectionItemWithContent.d.ts} +3 -3
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/components/Tag/Tag.utils.d.ts +4 -0
- package/dist/components/Tag/TagGroup.d.ts +2 -5
- package/dist/index.d.ts +2 -2
- package/dist/web-ui-tailwind.css +2111 -0
- package/dist/web-ui.cjs.development.css +70 -70
- package/dist/web-ui.cjs.development.js +29 -29
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.css +70 -70
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.css +70 -70
- package/dist/web-ui.esm.js +28 -28
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +13 -5
- package/src/components/{ListItem/ListItem.scss → Section/SectionItem.scss} +0 -0
- package/src/components/{ListItem/ListItem.tsx → Section/SectionItem.tsx} +7 -7
- package/src/components/{TextListItem/TextListItem.js → Section/SectionItemWithContent.js} +10 -9
- package/src/components/{TextListItem/TextListItem.scss → Section/SectionItemWithContent.scss} +2 -2
- package/src/components/Tag/Tag.tsx +1 -1
- package/src/components/Tag/Tag.utils.ts +4 -0
- package/src/components/Tag/TagGroup.tsx +12 -8
- package/src/index.tsx +4 -4
- package/dist/components/ListItem/ListItem.d.ts +0 -9
package/dist/web-ui.esm.css
CHANGED
|
@@ -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");
|
package/dist/web-ui.esm.js
CHANGED
|
@@ -1890,7 +1890,7 @@ Line.propTypes = {
|
|
|
1890
1890
|
};
|
|
1891
1891
|
|
|
1892
1892
|
var _excluded$7 = ["children", "className", "onClick"];
|
|
1893
|
-
var
|
|
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
|
-
|
|
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
|
|
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
|
|
3577
|
+
src: icon.default
|
|
3578
3578
|
});
|
|
3579
3579
|
} else if (icon) {
|
|
3580
|
-
calculatedIcon = isSelected ? icon.active : icon
|
|
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
|
-
|
|
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
|
|
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-
|
|
4029
|
-
var iconClasses = classNames("cweb-text-
|
|
4030
|
-
return /*#__PURE__*/React__default.createElement(
|
|
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
|
-
|
|
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,
|
|
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
|