@equinor/echo-components 0.5.16 → 0.5.17

package/dist/components/workOrderListItem/WorkOrderStatusLabel.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface WorkOrderStatusLabelProps {
+    workOrderStatus: string;
+}
+export declare function WorkOrderStatusLabel({ workOrderStatus }: WorkOrderStatusLabelProps): JSX.Element;
+export declare function resolveStatusColor(workOrderStatus: string): string;
+export declare const WorkOrderStatusColorMap: {
+    completed: string;
+    active: string;
+};
+export {};

package/dist/index.js

@@ -23498,62 +23498,87 @@ function setWorkOrderIconName(type) {
       return 'workorders_main_group';
   }
 }
-function getStatusColor(statusIds) {
-  if (statusIds.includes('TECO') || statusIds.includes('CLSD')) return '#4bb748';
-  return '#fbca36';
-}
-function getStatusText(statusIds) {
-  if (statusIds.includes('TECO') || statusIds.includes('CLSD')) return 'Completed';
-  return 'Active';
+function getIsActive(statusIds) {
+  if (statusIds.includes('TECO') || statusIds.includes('CLSD')) return false;
+  return true;
 }
 
-var css_248z$3 = ".WorkOrderListItem-module_container__AaZwJ{padding:1rem}.WorkOrderListItem-module_container__AaZwJ>div:not(:first-of-type){gap:8px}.WorkOrderListItem-module_topRow__cps3H{align-items:center;display:flex}.WorkOrderListItem-module_title__S3kG9{font-weight:500}.WorkOrderListItem-module_status__V1jcr{display:flex;margin-left:8px}.WorkOrderListItem-module_statusCircle__m2cc2{border-radius:160px;height:12px;width:12px}.WorkOrderListItem-module_statusText__a2z46{font-size:12px;font-weight:500;margin-left:4px}.WorkOrderListItem-module_tertiary__9VMmL{display:flex;font-size:12px;font-weight:500}.WorkOrderListItem-module_tertiaryMobile__hMer-{display:block}.WorkOrderListItem-module_date__mXBx9{margin-left:16px}.WorkOrderListItem-module_dateMobile__aRJ-6{margin-left:0;margin-top:5px}.WorkOrderListItem-module_medium__4F2RQ{font-size:14px;font-weight:500}.WorkOrderListItem-module_visual__UCRRo{align-items:center;background-color:var(--echoText);border-radius:50%;color:#fff;display:flex;flex-direction:column;font-size:12px;font-weight:500;height:40px;justify-content:center;margin:.5rem;padding:.5rem;width:40px}";
-var styles$3 = {"container":"WorkOrderListItem-module_container__AaZwJ","topRow":"WorkOrderListItem-module_topRow__cps3H","title":"WorkOrderListItem-module_title__S3kG9","status":"WorkOrderListItem-module_status__V1jcr","statusCircle":"WorkOrderListItem-module_statusCircle__m2cc2","statusText":"WorkOrderListItem-module_statusText__a2z46","tertiary":"WorkOrderListItem-module_tertiary__9VMmL","tertiaryMobile":"WorkOrderListItem-module_tertiaryMobile__hMer- WorkOrderListItem-module_tertiary__9VMmL","date":"WorkOrderListItem-module_date__mXBx9","dateMobile":"WorkOrderListItem-module_dateMobile__aRJ-6","medium":"WorkOrderListItem-module_medium__4F2RQ","visual":"WorkOrderListItem-module_visual__UCRRo"};
+var css_248z$3 = ".WorkOrderListItem-module_container__AaZwJ{padding:1rem}.WorkOrderListItem-module_container__AaZwJ>div:not(:first-of-type){gap:8px}.WorkOrderListItem-module_visual__UCRRo{align-items:center;background-color:var(--echoText);border-radius:50%;color:#fff;display:flex;flex-direction:column;font-size:12px;font-weight:500;height:40px;justify-content:center;margin:.5rem;padding:.5rem;width:40px}.WorkOrderListItem-module_primary__aflKC{align-items:center;display:flex;flex-flow:row nowrap}.WorkOrderListItem-module_tertiary__9VMmL{gap:.75rem}.WorkOrderListItem-module_tertiaryMultiline__fnZfW{align-items:flex-start;flex-direction:column;gap:.1rem}.WorkOrderListItem-module_primaryText__Fdd7q{width:auto}.WorkOrderListItem-module_secondaryText__I85sw{color:#565656}.WorkOrderListItem-module_tertiaryText__TRbrY{color:var(--tertiaryText)}.WorkOrderListItem-module_divider__XvYes{border:1px solid #d9d9d9;height:.75rem}.WorkOrderListItem-module_statusContainer__YJ0If{align-items:center;display:flex;flex-flow:row nowrap;gap:.2rem}.WorkOrderListItem-module_statusIndicator__aCFoR{border-radius:50%;height:.75rem;margin-left:.5rem;width:.75rem}.WorkOrderListItem-module_statusText__a2z46{display:contents;margin-left:.25rem}";
+var styles$3 = {"container":"WorkOrderListItem-module_container__AaZwJ","visual":"WorkOrderListItem-module_visual__UCRRo","primary":"WorkOrderListItem-module_primary__aflKC","tertiary":"WorkOrderListItem-module_tertiary__9VMmL WorkOrderListItem-module_primary__aflKC","tertiaryMultiline":"WorkOrderListItem-module_tertiaryMultiline__fnZfW WorkOrderListItem-module_primary__aflKC","primaryText":"WorkOrderListItem-module_primaryText__Fdd7q","secondaryText":"WorkOrderListItem-module_secondaryText__I85sw","tertiaryText":"WorkOrderListItem-module_tertiaryText__TRbrY","divider":"WorkOrderListItem-module_divider__XvYes","statusContainer":"WorkOrderListItem-module_statusContainer__YJ0If","statusIndicator":"WorkOrderListItem-module_statusIndicator__aCFoR","statusText":"WorkOrderListItem-module_statusText__a2z46"};
 styleInject(css_248z$3);
 
+function WorkOrderStatusLabel(_ref) {
+  var workOrderStatus = _ref.workOrderStatus;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$3.statusContainer
+  }, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      background: resolveStatusColor(workOrderStatus)
+    },
+    className: styles$3.statusIndicator
+  }), /*#__PURE__*/React__default.createElement(Typography, {
+    variant: 'chart',
+    group: 'ui',
+    className: styles$3.statusText
+  }, getIsActive(workOrderStatus) ? 'Active' : 'Completed'));
+}
+function resolveStatusColor(workOrderStatus) {
+  if (getIsActive(workOrderStatus)) {
+    return WorkOrderStatusColorMap['active'];
+  }
+  return WorkOrderStatusColorMap['completed'];
+}
+var WorkOrderStatusColorMap = {
+  completed: '#4BB748',
+  active: '#FF9200'
+};
+
 function WorkOrderListItem(props) {
-  var _classnames, _classnames2;
+  var _classnames;
   var isMobile = useIsMobile();
-  var date = classnames$1((_classnames = {}, _defineProperty$1(_classnames, styles$3.dateMobile, isMobile), _defineProperty$1(_classnames, styles$3.date, !isMobile), _classnames));
-  var tertiary = classnames$1((_classnames2 = {}, _defineProperty$1(_classnames2, styles$3.tertiaryMobile, isMobile), _defineProperty$1(_classnames2, styles$3.tertiary, !isMobile), _classnames2));
+  var wo = props.workOrder;
   var displayHeaderDate = function displayHeaderDate() {
-    if (props.workOrder.orderType.toUpperCase() === 'PM01') {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: date
-      }, "Req. end date: ", dateToStringOrEmpty(props.workOrder.requiredEndDateTime));
+    if (wo.orderType.toUpperCase() === 'PM01') {
+      return /*#__PURE__*/React__default.createElement("div", null, "Req. end date: ", dateToStringOrEmpty(wo.requiredEndDateTime));
     }
-    if (props.workOrder.orderType.toUpperCase() === 'PM02') {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: date
-      }, "Planned date: ", dateToStringOrEmpty(props.workOrder.maintenancePlanDate));
+    if (wo.orderType.toUpperCase() === 'PM02') {
+      return /*#__PURE__*/React__default.createElement("div", null, "Planned date: ", dateToStringOrEmpty(wo.maintenancePlanDate));
     }
     return null;
   };
+  var isOverflow = wo.planningPlant && wo.planningPlant.length > 26 || wo.requiredEndDateTime && wo.requiredEndDateTime.toString().length > 26;
+  var tertiary = classnames$1((_classnames = {}, _defineProperty$1(_classnames, styles$3.tertiaryMultiline, isOverflow || isMobile), _defineProperty$1(_classnames, styles$3.tertiary, !isOverflow && !isMobile), _classnames));
   return /*#__PURE__*/React__default.createElement(ListItem, {
     className: styles$3.container,
     onCardClick: props.isHeader ? undefined : props.itemClicked,
-    primary: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3.topRow
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3.title
-    }, props.workOrder.id.substring(4)), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3.status
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        background: getStatusColor(props.workOrder.activeStatusIds)
-      },
-      className: styles$3.statusCircle
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3.statusText
-    }, getStatusText(props.workOrder.activeStatusIds)))), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3.medium
-    }, props.workOrder.description), /*#__PURE__*/React__default.createElement("div", {
+    primary: /*#__PURE__*/React__default.createElement("div", {
+      className: styles$3.primary
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: 'h6'
+    }, wo.id.substring(4)), /*#__PURE__*/React__default.createElement(WorkOrderStatusLabel, {
+      workOrderStatus: wo.activeStatusIds
+    })),
+    secondary: /*#__PURE__*/React__default.createElement(Typography, {
+      variant: 'caption',
+      className: styles$3.secondaryText
+    }, wo.description),
+    tertiary: /*#__PURE__*/React__default.createElement("div", {
       className: tertiary
-    }, /*#__PURE__*/React__default.createElement("div", null, props.workOrder.planningPlant), displayHeaderDate())),
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: 'chart',
+      group: 'ui',
+      className: styles$3.tertiaryText
+    }, wo.planningPlant), !isOverflow && !isMobile && /*#__PURE__*/React__default.createElement("div", {
+      className: styles$3.divider
+    }), /*#__PURE__*/React__default.createElement(Typography, {
+      variant: 'chart',
+      group: 'ui',
+      className: styles$3.tertiaryText
+    }, displayHeaderDate())),
     visual: /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.visual
     }, /*#__PURE__*/React__default.createElement(Icon$1, {
-      name: setWorkOrderIconName(props.workOrder.orderType),
+      name: setWorkOrderIconName(wo.orderType),
       color: "white"
     })),
     itemAction: props.itemAction,