@equinor/echo-components 0.5.24 → 0.5.26

package/dist/components/index.d.ts

@@ -19,4 +19,4 @@ export * from './sidesheet';
 export * from './splitView';
 export * from './tagContextMenu/TagContextMenu';
 export * from './timePicker/TimePicker';
-export * from './workOrderListItem/WorkOrdertListItem';
+export * from './workOrderListItem/WorkOrderListItem';

package/dist/components/workOrderListItem/{WorkOrdertListItem.d.ts → WorkOrderListItem.d.ts}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { WorkOrderItem } from '@types';
-interface WorkOrderListItemProps {
+export interface WorkOrderListItemProps {
     workOrder: WorkOrderItem;
-    itemClicked?: () => void;
+    onCardClick?: () => void;
     itemAction?: React.ReactNode;
     isHeader?: boolean;
 }

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

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

package/dist/index.js

@@ -17272,12 +17272,12 @@ function useIsMobile() {
 }
 
 var Keys = {
-  ArrowUp: "up",
-  ArrowRight: "right",
-  ArrowDown: "down",
-  ArrowLeft: "left",
-  Enter: "enter",
-  Escape: "escape"
+  ArrowUp: 'up',
+  ArrowRight: 'right',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  Enter: 'enter',
+  Escape: 'escape'
 };
 var useListNavigator = function useListNavigator(listLength) {
   var initialIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -17414,7 +17414,7 @@ var useKeyboardNavigation = function useKeyboardNavigation(keyboardEvents) {
       handler(e);
     }
   }, [keyboardEvents]);
-  useEventListener("keydown", handleKeyDown, false, listenerTarget);
+  useEventListener('keydown', handleKeyDown, false, listenerTarget);
 };
 
 function classnames$1() {
@@ -23634,7 +23634,7 @@ var usePanelStore = create(function (set) {
   };
 });
 
-var css_248z$b = ".panelWrapper-module_wrapper__asJxL{position:fixed;right:0;z-index:5}.panelWrapper-module_topBarWrapper__Nt84G{background-color:#fff;border-left:1px solid #dcdcdc;box-sizing:border-box;height:calc(100dvh - 64px);padding-left:0;padding-right:0;width:64px;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:none}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{background:#fff;box-sizing:border-box;height:100%;overflow:hidden;position:absolute;right:64px;top:0;transition:width .4s ease-in-out;width:0;z-index:1200}.panelWrapper-module_narrowPanel__zW0DI{width:320px!important}.panelWrapper-module_activeContentPanel__1nAhR{border-left:2px solid #f7f7f7;width:480px}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:none}.panelWrapper-module_buttonWrapper__xbmQI{height:calc(100dvh - 70px)}.panelWrapper-module_buttonAtBottomWrapper__jLd-d{bottom:6px;position:absolute;width:100%}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_topBarWrapper__Nt84G{width:calc(100dvw - 56px)}}@media screen and (max-width:767px) and (orientation:portrait){.panelWrapper-module_activeContentPanel__1nAhR,.panelWrapper-module_topBarWrapper__Nt84G{width:100dvw}}@media screen and (max-width:767px) and (orientation:portrait),screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_buttonAtBottomWrapper__jLd-d{display:none}.panelWrapper-module_topBarWrapper__Nt84G{border-bottom:1px solid #dcdcdc;border-left:none;display:flex;flex-direction:row;height:48px;padding-bottom:0;padding-top:0;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:flex}.panelWrapper-module_moduleTitle__4Wloo{display:flex;margin:auto 0 auto 16px}.panelWrapper-module_moduleTitle__4Wloo p{color:var(--echoText);font-size:16px;font-weight:500;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{height:100dvh;right:0}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:flex;justify-content:flex-end;margin-right:8px}.panelWrapper-module_buttonWrapper__xbmQI{display:none}}@media screen and (max-width:768px) and (orientation:portrait){.panelWrapper-module_moduleTitle__4Wloo{width:140px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 140px)}}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_moduleTitle__4Wloo{width:240px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 240px)}}";
+var css_248z$b = ".panelWrapper-module_wrapper__asJxL{position:fixed;right:0;z-index:5}.panelWrapper-module_topBarWrapper__Nt84G{background-color:#fff;border-left:1px solid #dcdcdc;box-sizing:border-box;height:calc(100dvh - 64px);padding-left:0;padding-right:0;width:64px;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:none}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{background:#fff;box-sizing:border-box;height:100%;overflow:hidden;position:absolute;right:64px;top:0;transition:width .4s ease-in-out;width:0;z-index:1200}.panelWrapper-module_narrowPanel__zW0DI{width:320px!important}.panelWrapper-module_activeContentPanel__1nAhR{border-left:2px solid #f7f7f7;width:480px}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:none}.panelWrapper-module_buttonWrapper__xbmQI{height:calc(100dvh - 70px)}.panelWrapper-module_buttonAtBottomWrapper__jLd-d{bottom:6px;position:absolute;width:100%}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_topBarWrapper__Nt84G{width:calc(100dvw - 56px)}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{height:100dvh;right:0}}@media screen and (max-width:767px) and (orientation:portrait){.panelWrapper-module_topBarWrapper__Nt84G{width:100dvw}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{height:calc(100dvh - 48px);right:0}.panelWrapper-module_activeContentPanel__1nAhR{width:100dvw}}@media screen and (max-width:767px) and (orientation:portrait),screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_buttonAtBottomWrapper__jLd-d{display:none}.panelWrapper-module_topBarWrapper__Nt84G{border-bottom:1px solid #dcdcdc;border-left:none;display:flex;flex-direction:row;height:48px;padding-bottom:0;padding-top:0;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:flex}.panelWrapper-module_moduleTitle__4Wloo{display:flex;margin:auto 0 auto 16px}.panelWrapper-module_moduleTitle__4Wloo p{color:var(--echoText);font-size:16px;font-weight:500;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:flex;justify-content:flex-end;margin-right:8px}.panelWrapper-module_buttonWrapper__xbmQI{display:none}}@media screen and (max-width:768px) and (orientation:portrait){.panelWrapper-module_moduleTitle__4Wloo{width:140px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 140px)}}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_moduleTitle__4Wloo{width:240px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 240px)}}";
 var styles$a = {"wrapper":"panelWrapper-module_wrapper__asJxL","topBarWrapper":"panelWrapper-module_topBarWrapper__Nt84G","narrowPanel":"panelWrapper-module_narrowPanel__zW0DI","contentPanel":"panelWrapper-module_contentPanel__JWij5","activeContentPanel":"panelWrapper-module_activeContentPanel__1nAhR","buttonWrapperMobile":"panelWrapper-module_buttonWrapperMobile__pcR1V","buttonWrapper":"panelWrapper-module_buttonWrapper__xbmQI","buttonAtBottomWrapper":"panelWrapper-module_buttonAtBottomWrapper__jLd-d","moduleTitle":"panelWrapper-module_moduleTitle__4Wloo"};
 styleInject(css_248z$b);
 
@@ -23904,7 +23904,7 @@ var Panel = function Panel(_ref) {
   });
 };
 
-var css_248z$a = ".panelContent-module_headerWrapper__BAc2H{display:flex;padding:12px 8px}.panelContent-module_headerActionsWrapper__l-nIj,.panelContent-module_headerFullActionsWrapper__No2uY{display:flex;margin:4px 4px 4px 8px}.panelContent-module_headerFullActionsWrapper__No2uY{justify-content:space-between}.panelContent-module_headerActionsWrapper__l-nIj{justify-content:end}.panelContent-module_narrowPanelTitleWithBackButton__YtZI5,.panelContent-module_narrowPanelTitleWithoutBackButton__gwhZD,.panelContent-module_panelTitleWithBackButton__5rlga,.panelContent-module_panelTitle__jqqJT{flex-grow:2;margin:auto 0!important;overflow:hidden;padding-left:4px;padding-right:4px;text-overflow:ellipsis;white-space:nowrap}.panelContent-module_narrowPanelTitleWithoutBackButton__gwhZD,.panelContent-module_panelTitle__jqqJT{max-width:calc(100% - 48px)}.panelContent-module_narrowPanelTitleWithBackButton__YtZI5,.panelContent-module_panelTitleWithBackButton__5rlga{max-width:calc(100% - 88px)}.panelContent-module_bodyWrapperWithFooter__uoMyR,.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 128px);overflow-x:hidden;overflow-y:hidden}.panelContent-module_bodyWrapperWithFooter__uoMyR{height:calc(100dvh - 184px)}.panelContent-module_footer__P1Nr8{border-top:1px solid #dcdcdc;height:55px}.panelContent-module_contentWrapper__1re5K{height:calc(100% - 16px);margin-right:8px;overflow-x:auto;padding-left:16px;padding-right:8px}@media screen and (max-width:767px) and (orientation:portrait),screen and (max-width:927px) and (orientation:landscape){.panelContent-module_bodyWrapperWithFooter__uoMyR{height:calc(100dvh - 104px)}.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 48px)}.panelContent-module_headerWrapper__BAc2H{padding:4px}}";
+var css_248z$a = ".panelContent-module_headerWrapper__BAc2H{display:flex;padding:12px 8px}.panelContent-module_headerActionsWrapper__l-nIj,.panelContent-module_headerFullActionsWrapper__No2uY{display:flex;margin:4px 4px 4px 8px}.panelContent-module_headerFullActionsWrapper__No2uY{justify-content:space-between}.panelContent-module_headerActionsWrapper__l-nIj{justify-content:end}.panelContent-module_narrowPanelTitleWithBackButton__YtZI5,.panelContent-module_narrowPanelTitleWithoutBackButton__gwhZD,.panelContent-module_panelTitleWithBackButton__5rlga,.panelContent-module_panelTitle__jqqJT{flex-grow:2;margin:auto 0!important;overflow:hidden;padding-left:4px;padding-right:4px;text-overflow:ellipsis;white-space:nowrap}.panelContent-module_narrowPanelTitleWithoutBackButton__gwhZD,.panelContent-module_panelTitle__jqqJT{max-width:calc(100% - 48px)}.panelContent-module_narrowPanelTitleWithBackButton__YtZI5,.panelContent-module_panelTitleWithBackButton__5rlga{max-width:calc(100% - 88px)}.panelContent-module_bodyWrapperWithFooter__uoMyR,.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 128px);overflow-x:hidden;overflow-y:hidden}.panelContent-module_bodyWrapperWithFooter__uoMyR{height:calc(100dvh - 184px)}.panelContent-module_footer__P1Nr8{border-top:1px solid #dcdcdc;height:55px}.panelContent-module_contentWrapper__1re5K{height:calc(100% - 16px);margin-right:8px;overflow-x:auto;padding-left:16px;padding-right:8px}@media screen and (max-width:767px) and (orientation:portrait),screen and (max-width:927px) and (orientation:landscape){.panelContent-module_headerWrapper__BAc2H{padding:4px}}@media screen and (max-width:927px) and (orientation:landscape){.panelContent-module_bodyWrapperWithFooter__uoMyR{height:calc(100dvh - 104px)}.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 48px)}}@media screen and (max-width:767px) and (orientation:portrait){.panelContent-module_bodyWrapperWithFooter__uoMyR{height:calc(100dvh - 152px)}.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 96px)}.panelContent-module_headerWrapper__BAc2H{padding:4px}}";
 var styles$9 = {"headerWrapper":"panelContent-module_headerWrapper__BAc2H","headerFullActionsWrapper":"panelContent-module_headerFullActionsWrapper__No2uY","headerActionsWrapper":"panelContent-module_headerActionsWrapper__l-nIj","narrowPanelTitleWithBackButton":"panelContent-module_narrowPanelTitleWithBackButton__YtZI5","narrowPanelTitleWithoutBackButton":"panelContent-module_narrowPanelTitleWithoutBackButton__gwhZD","panelTitleWithBackButton":"panelContent-module_panelTitleWithBackButton__5rlga","panelTitle":"panelContent-module_panelTitle__jqqJT","bodyWrapper":"panelContent-module_bodyWrapper__EHsg5","bodyWrapperWithFooter":"panelContent-module_bodyWrapperWithFooter__uoMyR","footer":"panelContent-module_footer__P1Nr8","contentWrapper":"panelContent-module_contentWrapper__1re5K"};
 styleInject(css_248z$a);
 
@@ -24341,91 +24341,73 @@ function setWorkOrderIconName(type) {
       return 'workorders_main_group';
   }
 }
-function getIsActive(statusIds) {
-  if (statusIds && (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_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}.WorkOrderListItem-module_title__S3kG9{width:auto}";
-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","title":"WorkOrderListItem-module_title__S3kG9"};
+var css_248z$3 = ".WorkOrderListItem-module_container__AaZwJ{padding:1rem}.WorkOrderListItem-module_container__AaZwJ>div:not(:first-of-type){gap:4px}.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;justify-content:center;margin:.5rem;min-height:40px;min-width:40px;padding:.5rem}.WorkOrderListItem-module_primary__aflKC{align-items:center;display:flex;flex-flow:row nowrap;gap:5px}.WorkOrderListItem-module_tertiary__9VMmL{color:var(--tertiaryText)!important;flex-direction:row;font-size:.75rem!important;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;margin-bottom:5px}.WorkOrderListItem-module_workorderStatusContainer__rerr6{align-items:center;display:inline-flex;gap:5px}.WorkOrderListItem-module_workorderstatusText__GGO-u{line-height:0!important;margin-left:.25rem}.WorkOrderListItem-module_activeIndicator__t9TzB,.WorkOrderListItem-module_completedIndicator__0cN-Q{border-radius:50%;height:.75rem;margin-bottom:3px;width:.75rem}.WorkOrderListItem-module_activeIndicator__t9TzB{background-color:#ff9200}.WorkOrderListItem-module_completedIndicator__0cN-Q{background-color:#4bb748}.WorkOrderListItem-module_workorderId__QXhKw{width:auto}";
+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","workorderStatusContainer":"WorkOrderListItem-module_workorderStatusContainer__rerr6","workorderstatusText":"WorkOrderListItem-module_workorderstatusText__GGO-u","completedIndicator":"WorkOrderListItem-module_completedIndicator__0cN-Q","activeIndicator":"WorkOrderListItem-module_activeIndicator__t9TzB","workorderId":"WorkOrderListItem-module_workorderId__QXhKw"};
 styleInject(css_248z$3);
 
 function WorkOrderStatusLabel(_ref) {
-  var workOrderStatus = _ref.workOrderStatus;
+  var isActive = _ref.isActive;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.statusContainer
+    className: styles$3.workorderStatusContainer,
+    role: "status"
   }, /*#__PURE__*/React__default.createElement("span", {
-    style: {
-      background: resolveStatusColor(workOrderStatus)
-    },
-    className: styles$3.statusIndicator
+    className: isActive ? styles$3.activeIndicator : styles$3.completedIndicator
   }), /*#__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'];
+    className: styles$3.workorderstatusText
+  }, isActive ? 'Active' : 'Completed'));
 }
-var WorkOrderStatusColorMap = {
-  completed: '#4BB748',
-  active: '#FF9200'
-};
 
 function setShowDate(wo) {
   if (wo.orderType.toUpperCase() === 'PM01' && wo.requiredEndDateTime) return true;
   if (wo.orderType.toUpperCase() === 'PM02' && wo.maintenancePlanDate) return true;
   return false;
 }
+function getFullLocaledDatetime(date) {
+  return date === null || date === void 0 ? void 0 : date.toLocaleString();
+}
 function WorkOrderListItem(props) {
-  var _classnames;
-  var isMobile = useIsMobile();
   var wo = props.workOrder;
   var showDate = setShowDate(wo);
   var displayHeaderDate = function displayHeaderDate() {
     var _a, _b;
     if (((_a = wo.orderType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'PM01') {
-      return /*#__PURE__*/React__default.createElement("span", null, "Req. end date: ", dateToStringOrEmpty(wo.requiredEndDateTime));
+      return /*#__PURE__*/React__default.createElement("time", {
+        dateTime: getFullLocaledDatetime(wo.requiredEndDateTime)
+      }, "Req. end date: ", dateToStringOrEmpty(wo.requiredEndDateTime));
     }
     if (((_b = wo.orderType) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'PM02') {
-      return /*#__PURE__*/React__default.createElement("span", null, "Planned date: ", dateToStringOrEmpty(wo.maintenancePlanDate));
+      return /*#__PURE__*/React__default.createElement("time", {
+        dateTime: getFullLocaledDatetime(wo.maintenancePlanDate)
+      }, "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,
+    onCardClick: props.isHeader ? undefined : props.onCardClick,
     primary: /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.primary
     }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: styles$3.title,
+      className: styles$3.workorderId,
       variant: 'h6'
     }, wo.id.substring(4)), /*#__PURE__*/React__default.createElement(WorkOrderStatusLabel, {
-      workOrderStatus: wo.activeStatusIds
+      isActive: wo.isActive
     })),
     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(Typography, {
-      variant: 'chart',
-      group: 'ui',
-      className: styles$3.tertiaryText
-    }, wo.planningPlant), showDate && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isOverflow && !isMobile && /*#__PURE__*/React__default.createElement("div", {
+    tertiary: /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "meta",
+      className: styles$3.tertiary
+    }, wo.planningPlant, /*#__PURE__*/React__default.createElement("span", {
+      role: "seperator",
+      "aria-orientation": "vertical",
       className: styles$3.divider
-    }), /*#__PURE__*/React__default.createElement(Typography, {
-      variant: 'chart',
-      group: 'ui',
-      className: styles$3.tertiaryText
-    }, displayHeaderDate()))),
+    }), showDate && displayHeaderDate()),
     visual: /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.visual
     }, /*#__PURE__*/React__default.createElement(Icon$1, {