@luscii-healthtech/web-ui 0.3.0 → 0.4.0

package/dist/components/Section/SectionItem.d.ts

@@ -0,0 +1,9 @@
+import React, { SyntheticEvent } from "react";
+import "./SectionItem.scss";
+export interface SectionItemProps {
+    className?: string;
+    onClick?: (event: SyntheticEvent) => void;
+    children?: React.ReactNode;
+}
+export declare const SectionItem: React.FC<SectionItemProps>;
+export default SectionItem;

package/dist/components/{TextListItem/TextListItem.d.ts → Section/SectionItemWithContent.d.ts}

@@ -1,6 +1,6 @@
-export default TextListItem;
-declare function TextListItem(props: any): JSX.Element;
-declare namespace TextListItem {
+export default SectionItemWithContent;
+declare function SectionItemWithContent(props: any): JSX.Element;
+declare namespace SectionItemWithContent {
     export namespace propTypes {
         export const text: PropTypes.Validator<string>;
         export const icon: PropTypes.Requireable<string | object>;

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { default as InfoBlock } from "./components/InfoBlock/InfoBlock";
 export { InfoField } from "./components/InfoField/InfoField";
 export { INPUT_TYPES, default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
-export { default as ListItem, ListItemProps, } from "./components/ListItem/ListItem";
+export { default as SectionItem, SectionItemProps, } from "./components/Section/SectionItem";
 export { ListTable, ListTableProps, ListTablePropsConfiguration, ListTablePropsConfigurationField, } from "./components/ListTable/ListTable";
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
@@ -45,7 +45,7 @@ export { default as TextArea } from "./components/Textarea/Textarea";
 export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
-export { default as TextListItem } from "./components/TextListItem/TextListItem";
+export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { Title, TitleStyle } from "./components/Title/Title";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 export { default as Text } from "./components/Text/Text";

package/dist/web-ui.cjs.development.css

@@ -190,6 +190,18 @@
     .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {
       left: 32px; }
 
+.vitals-confirmation-dialog {
+  margin-top: 4rem !important; }
+  .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
+    padding: 24px; }
+    .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      margin-top: 16px; }
+
 .cweb-box-shadow-default {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -432,18 +444,6 @@
     .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {
       color: #cccccc; }
 
-.vitals-confirmation-dialog {
-  margin-top: 4rem !important; }
-  .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
-    padding: 24px; }
-    .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      margin-top: 16px; }
-
 .cweb-box-shadow-default {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -546,6 +546,64 @@
   .cweb-list-item.cweb-list-item-clickable:hover {
     background-color: #f2fafd; }
 
+.cweb-section .cweb-button:last-of-type {
+  margin-right: 24px; }
+
+.cweb-section .cweb-button:not(:last-of-type) {
+  margin-right: 8px; }
+
+.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
+  margin-left: auto;
+  width: 32px;
+  height: 32px; }
+
+.cweb-section .cweb-button.add-button {
+  background: url("../../assets/add.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
+    background: url("../../assets/add_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section .cweb-button.edit-button {
+  background: url("../../assets/edit.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
+    background: url("../../assets/edit_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section .cweb-button.delete-button {
+  background: url("../../assets/delete.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
+    background: url("../../assets/delete_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section > .cweb-section-header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+  width: 100%;
+  padding: 18px 24px; }
+
+.cweb-section > .cweb-section-footer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-top: 1px solid #eeeeee;
+  width: 100%;
+  padding: 1rem 24px 1rem 24px; }
+  .cweb-section > .cweb-section-footer img {
+    width: 32px;
+    height: 32px; }
+
+.cweb-section-text-item .cweb-section-text-item-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px; }
+
 .cweb-loading {
   display: flex;
   justify-content: center;
@@ -745,59 +803,6 @@
   .cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {
     border: 1px solid #ff6266 !important; }
 
-.cweb-section .cweb-button:last-of-type {
-  margin-right: 24px; }
-
-.cweb-section .cweb-button:not(:last-of-type) {
-  margin-right: 8px; }
-
-.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
-  margin-left: auto;
-  width: 32px;
-  height: 32px; }
-
-.cweb-section .cweb-button.add-button {
-  background: url("../../assets/add.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
-    background: url("../../assets/add_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section .cweb-button.edit-button {
-  background: url("../../assets/edit.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
-    background: url("../../assets/edit_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section .cweb-button.delete-button {
-  background: url("../../assets/delete.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
-    background: url("../../assets/delete_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section > .cweb-section-header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  border-bottom: 1px solid #eeeeee;
-  width: 100%;
-  padding: 18px 24px; }
-
-.cweb-section > .cweb-section-footer {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  border-top: 1px solid #eeeeee;
-  width: 100%;
-  padding: 1rem 24px 1rem 24px; }
-  .cweb-section > .cweb-section-footer img {
-    width: 32px;
-    height: 32px; }
-
 .cweb-textarea {
   border: 1px solid #cccccc;
   border-radius: 4px;
@@ -917,11 +922,6 @@
     .editor .rdw-editor .rdw-editor-main .DraftEditor-root {
       margin: 0 12px; }
 
-.cweb-text-list-item .cweb-text-list-item-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 16px; }
-
 @font-face {
   font-family: "AvenirNextLTPro-Regular";
   src: url("../../styles/fonts/avenir/3A0AF8_1_0.eot");

package/dist/web-ui.cjs.development.js

@@ -1898,7 +1898,7 @@ Line.propTypes = {
 };
 
 var _excluded$7 = ["children", "className", "onClick"];
-var ListItem = function ListItem(props) {
+var SectionItem = function SectionItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
@@ -4025,7 +4025,7 @@ var TextEditorV2 = function TextEditorV2(_ref) {
 
 var _excluded$f = ["text", "icon", "className", "iconClass", "onClick"];
 
-function TextListItem(props) {
+function SectionItemWithContent(props) {
   var text = props.text,
       icon = props.icon,
       className = props.className,
@@ -4033,9 +4033,9 @@ function TextListItem(props) {
       onClick = props.onClick,
       rest = _objectWithoutPropertiesLoose(props, _excluded$f);
 
-  var mergedClasses = classNames("cweb-text-list-item", className);
-  var iconClasses = classNames("cweb-text-list-item-icon", iconClass);
-  return /*#__PURE__*/React__default.createElement(ListItem, _extends({
+  var mergedClasses = classNames("cweb-section-text-item", className);
+  var iconClasses = classNames("cweb-section-text-item-icon", iconClass);
+  return /*#__PURE__*/React__default.createElement(SectionItem, _extends({
     className: mergedClasses,
     onClick: onClick
   }, rest), icon && /*#__PURE__*/React__default.createElement("img", {
@@ -4047,7 +4047,7 @@ function TextListItem(props) {
   }));
 }
 
-TextListItem.propTypes = {
+SectionItemWithContent.propTypes = {
   text: PropTypes.string.isRequired,
   icon: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   className: PropTypes.string,
@@ -4962,7 +4962,6 @@ exports.Input = Input;
 exports.LeftArrowIcon = LeftArrowIcon;
 exports.LightBulbIcon = LightBulbIcon;
 exports.Line = Line;
-exports.ListItem = ListItem;
 exports.ListTable = ListTable;
 exports.LoadingIndicator = LoadingIndicator;
 exports.LockIcon = LockIcon;
@@ -4986,6 +4985,8 @@ exports.SearchCancelIcon = SearchCancelIcon$1;
 exports.SearchIcon = SearchIcon$1;
 exports.SecondaryButton = SecondaryButton;
 exports.Section = Section;
+exports.SectionItem = SectionItem;
+exports.SectionItemWithContent = SectionItemWithContent;
 exports.SettingsMenuButton = SettingsMenuButton;
 exports.SmallCircleIcon = SmallCircleIcon;
 exports.SmallDiamondIcon = SmallDiamondIcon;
@@ -5005,7 +5006,6 @@ exports.TextArea = Textarea;
 exports.TextEditor = TextEditor;
 exports.TextEditorV2 = TextEditorV2;
 exports.TextLink = TextLink;
-exports.TextListItem = TextListItem;
 exports.Title = Title;
 exports.ViewItem = ViewItem;
 //# sourceMappingURL=web-ui.cjs.development.js.map