feat: swcr scaling improvements (#1088)

equinor · Aug 26, 2024 · 485ac9c · 485ac9c
1 parent 4b0636c
commit 485ac9c
Show file tree

Hide file tree

Showing 20 changed files with 135 additions and 76 deletions.
diff --git a/apps/swcr/prod.skip b/apps/swcr/prod.skip
diff --git a/libs/handoverapp/src/lib/ui-garden/PopoverContent.tsx b/libs/handoverapp/src/lib/ui-garden/PopoverContent.tsx
@@ -46,7 +46,7 @@ export const PopoverContent = ({
         {data.description}
       </StyledPopoverProjectDescription>
       <hr />
-      <StyledPopoverProgressBar barColor={barColor} textColor={textColor}>
+      <StyledPopoverProgressBar $barColor={barColor} $textColor={textColor}>
         <strong>{`Milestone: ${status}`}</strong>
         <span>
           <SizeIcons color={getTextColor(status)} size={size} />
@@ -74,14 +74,14 @@ export const PopoverContent = ({
       )}
       <StyledStatuses>
         <h5>MC status</h5>
-        <StyledPopoverStatus color={mcPackageColor}>
+        <StyledPopoverStatus $color={mcPackageColor}>
           {['OS', 'OK', 'PA'].includes(data.mechanicalCompletionStatus)
             ? data.mechanicalCompletionStatus
             : 'PB'}
         </StyledPopoverStatus>
 
         <h5>CommPkg status</h5>
-        <StyledPopoverStatus color={commStatusColor}>
+        <StyledPopoverStatus $color={commStatusColor}>
           {['OS', 'OK', 'PA'].includes(data.status) ? data.status : 'PB'}
         </StyledPopoverStatus>
       </StyledStatuses>

diff --git a/libs/heattraceapp/src/lib/ui-garden/Item.tsx b/libs/heattraceapp/src/lib/ui-garden/Item.tsx
@@ -54,20 +54,20 @@ const HeattraceGardenItem = (props: CustomItemView<HeatTrace>) => {
             hoverTimeout && clearTimeout(hoverTimeout);
             setIsOpen(false);
           }}
-          backgroundColor={backgroundColor}
+          $backgroundColor={backgroundColor}
           color={textColor}
           onClick={onClick}
           style={{ width: `${columnExpanded ? 100 : width}%`, maxWidth }}
-          isSelected={isSelected}
+          $isSelected={isSelected}
         >
           <StyledItemText>{displayName}</StyledItemText>
           <StyledStatusCircles
-            mcColor={
+            $mcColor={
               data.mechanicalCompletionStatus
                 ? colorMap[data.mechanicalCompletionStatus as PackageStatus]
                 : null
             }
-            commColor={
+            $commColor={
               data.commissioningStatus
                 ? colorMap[data.commissioningStatus as PackageStatus]
                 : null

diff --git a/libs/heattraceapp/src/lib/ui-garden/garden.styles.ts b/libs/heattraceapp/src/lib/ui-garden/garden.styles.ts
@@ -9,15 +9,15 @@ export const StyledRoot = styled.div`
   margin-left: 5px;
   position: relative;
 `;
-export type ItemProps = { backgroundColor: string; isSelected: boolean };
+export type ItemProps = { $backgroundColor: string; $isSelected: boolean };
 
 export const StyledItemWrapper = styled.div<ItemProps>`
   display: grid;
   grid-template-columns: 3fr auto;
   align-items: center;
   box-sizing: border-box;
   position: relative;
-  background: ${(props) => props.backgroundColor};
+  background: ${(props) => props.$backgroundColor};
   color: ${tokens.colors.text.static_icons__default.rgba};
   cursor: pointer;
   border: 1px solid #ededed;
@@ -27,8 +27,8 @@ export const StyledItemWrapper = styled.div<ItemProps>`
   font-size: 13px;
   padding-left: 20px;
   padding-right: 2px;
-  outline: ${(props) => (props.isSelected ? '2px dashed green' : '')};
-  outline-offset: ${(props) => (props.isSelected ? '2px' : '')};
+  outline: ${(props) => (props.$isSelected ? '2px dashed green' : '')};
+  outline-offset: ${(props) => (props.$isSelected ? '2px' : '')};
   width: 100%;
 `;
 
@@ -40,8 +40,8 @@ export const StyledItemText = styled.div`
 `;
 
 type StatusCirclesProps = {
-  mcColor: string | null;
-  commColor: string | null;
+  $mcColor: string | null;
+  $commColor: string | null;
 };
 export const StyledStatusCircles = styled.div<StatusCirclesProps>`
   display: flex;
@@ -53,7 +53,7 @@ export const StyledStatusCircles = styled.div<StatusCirclesProps>`
     width: 12px;
     height: 12px;
     border: 1px solid white;
-    background-color: ${(props) => props.mcColor};
+    background-color: ${(props) => props.$mcColor};
     border-radius: 50%;
     margin: 0px 1px;
     content: ' ';
@@ -62,7 +62,7 @@ export const StyledStatusCircles = styled.div<StatusCirclesProps>`
     width: 12px;
     height: 12px;
     border: 1px solid white;
-    background-color: ${(props) => props.commColor};
+    background-color: ${(props) => props.$commColor};
     border-radius: 50%;
     margin: 0px 1px;
     content: ' ';

diff --git a/libs/loopapp/src/lib/ui-garden/Popover.tsx b/libs/loopapp/src/lib/ui-garden/Popover.tsx
@@ -24,15 +24,15 @@ export const PopoverContent = ({ loop }: PopoverContentProps) => {
       <StyledStatuses>
         <h5>MC content status</h5>
         {loop.loopContentStatus ? (
-          <StyledPopoverStatus color={statusColorMap[loop.loopContentStatus]}>
+          <StyledPopoverStatus $color={statusColorMap[loop.loopContentStatus]}>
             {loop.loopContentStatus}
           </StyledPopoverStatus>
         ) : (
           <StyledNoStatus size="medium" />
         )}
         <h5>Loop checklist status</h5>
         {loop.status ? (
-          <StyledPopoverStatus color={statusColorMap[loop.status]}>
+          <StyledPopoverStatus $color={statusColorMap[loop.status]}>
             {loop.status}
           </StyledPopoverStatus>
         ) : (

diff --git a/libs/mechanicalcompletionapp/src/lib/ui-garden/Popover/PopoverContent.tsx b/libs/mechanicalcompletionapp/src/lib/ui-garden/Popover/PopoverContent.tsx
@@ -9,6 +9,7 @@ import {
   StyledPopoverProjectDescription,
 } from '@cc-components/shared/common';
 import { McPackage } from '../../../../../mechanicalcompletionshared';
+
 type ItemOptions = {
   size: TagSize;
   backgroundColor: string;
@@ -17,10 +18,12 @@ type ItemOptions = {
   commDotColor: string;
   status: string;
 };
+
 type PopoverContentProps = {
   data: McPackage;
   options: ItemOptions;
 };
+
 export const PopoverContent = ({
   data,
   options: { size, backgroundColor, contentsColor, mcDotColor, commDotColor, status },
@@ -33,7 +36,7 @@ export const PopoverContent = ({
         {data.description}
       </StyledPopoverProjectDescription>
       <hr />
-      <StyledPopoverProgressBar barColor={backgroundColor} textColor={contentsColor}>
+      <StyledPopoverProgressBar $barColor={backgroundColor} $textColor={contentsColor}>
         <span>
           <strong>Milestone: {status}</strong>
         </span>
@@ -46,14 +49,14 @@ export const PopoverContent = ({
       </StyledPopoverProgressBar>
       <Statuses>
         <h5>MC status</h5>
-        <StyledPopoverStatus color={mcDotColor}>
+        <StyledPopoverStatus $color={mcDotColor}>
           {['OS', 'OK', 'PA'].includes(data.mechanicalCompletionStatus)
             ? data.mechanicalCompletionStatus
             : 'PB'}
         </StyledPopoverStatus>
 
         <h5>Comm status</h5>
-        <StyledPopoverStatus color={commDotColor}>
+        <StyledPopoverStatus $color={commDotColor}>
           {['OS', 'OK', 'PA'].includes(data.commpkgStatus) ? data.commpkgStatus : 'PB'}
         </StyledPopoverStatus>
       </Statuses>

diff --git a/libs/shared/src/packages/common/src/lib/StatusCircle.tsx b/libs/shared/src/packages/common/src/lib/StatusCircle.tsx
@@ -10,10 +10,10 @@ const Wrapper = styled.div`
   font-size: 13px;
 `;
 type StatusCircleProps = {
-  statusColor: string;
+  $statusColor: string;
 };
 const StyledStatusCircle = styled.div<StatusCircleProps>`
-  background-color: ${(props) => props.statusColor};
+  background-color: ${(props) => props.$statusColor};
   height: 12px;
   width: 12px;
   border-radius: 50%;
@@ -28,7 +28,7 @@ type StatusProps = {
 export const StatusCircle = ({ content, statusColor, infoMessage }: StatusProps) => {
   return (
     <Wrapper>
-      <StyledStatusCircle statusColor={statusColor} />
+      <StyledStatusCircle $statusColor={statusColor} />
       {infoMessage ? (
         <Tooltip title={infoMessage}>
           <Icon data={info_circle} size={18} color="rgb(0, 112, 121)" rotation={180} />

diff --git a/libs/shared/src/packages/common/src/lib/popover/popover.styles.ts b/libs/shared/src/packages/common/src/lib/popover/popover.styles.ts
@@ -29,8 +29,8 @@ export const StyledPopoverProjectDescription = styled.p`
 `;
 
 type PopoverProgressBarProps = {
-  barColor: string;
-  textColor: string;
+  $barColor: string;
+  $textColor: string;
 };
 export const StyledPopoverProgressBar = styled.div<PopoverProgressBarProps>`
   display: flex;
@@ -40,8 +40,8 @@ export const StyledPopoverProgressBar = styled.div<PopoverProgressBarProps>`
   padding: 4px 8px;
   margin-top: 16px;
   text-transform: capitalize;
-  background: ${(p) => p.barColor};
-  color: ${(p) => p.textColor};
+  background: ${(p) => p.$barColor};
+  color: ${(p) => p.$textColor};
   line-height: 24px;
   text-align: center;
   justify-content: space-between;
@@ -52,7 +52,7 @@ export const StyledPopoverProgressBar = styled.div<PopoverProgressBarProps>`
 `;
 
 type StatusProps = {
-  color: string;
+  $color: string;
 };
 export const StyledPopoverStatus = styled.div<StatusProps>`
   width: 40px;
@@ -65,5 +65,5 @@ export const StyledPopoverStatus = styled.div<StatusProps>`
   font-size: 12px;
   font-weight: 600;
   border-radius: 12px;
-  background: ${(p) => p.color};
+  background: ${(p) => p.$color};
 `;
diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/cells/EstimateCell.tsx b/libs/shared/src/packages/table-helpers/src/lib/table/cells/EstimateCell.tsx
@@ -26,9 +26,9 @@ export const EstimateCell = ({ current, max }: EstimateCellProps): JSX.Element =
       <StyledProgressBarContainer>
         {percentage > 0 ? (
           <StyledActualProgress
-            borderColor="#0084C4"
-            width={percentage}
-            color="#CCE6F3"
+            $borderColor="#0084C4"
+            $width={percentage}
+            $color="#CCE6F3"
           ></StyledActualProgress>
         ) : (
           <></>

diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/cells/ProgressCell.tsx b/libs/shared/src/packages/table-helpers/src/lib/table/cells/ProgressCell.tsx
@@ -18,9 +18,9 @@ export const ProgressCell = ({ percentWidth }: ProgressCellProps): JSX.Element =
       <StyledProgressBarContainer>
         {Math.round(percentWidth) > 0 ? (
           <StyledActualProgress
-            borderColor="#40D38F"
-            width={percentWidth}
-            color="#D9F6E9"
+            $borderColor="#40D38F"
+            $width={percentWidth}
+            $color="#D9F6E9"
           ></StyledActualProgress>
         ) : (
           <></>

diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/cells/cell.styles.ts b/libs/shared/src/packages/table-helpers/src/lib/table/cells/cell.styles.ts
@@ -32,14 +32,14 @@ export const StyledProgressBarContainer = styled.div`
 `;
 
 export const StyledActualProgress = styled.div<{
-  width: number;
-  borderColor?: string;
-  color?: string;
+  $width: number;
+  $borderColor?: string;
+  $color?: string;
 }>`
-  background-color: ${({ color }) => `${color ?? '#CCE6F3'}`};
-  width: ${({ width }) => `${width}%`};
+  background-color: ${({ $color }) => `${$color ?? '#CCE6F3'}`};
+  width: ${({ $width: width }) => `${width}%`};
   height: 100%;
-  border: ${({ borderColor }) => `2px ${borderColor ?? '#0084C4'} solid`};
+  border: ${({ $borderColor }) => `2px ${$borderColor ?? '#0084C4'} solid`};
   border-radius: 10px;
   margin: -2px;
   position: relative;

diff --git a/libs/sharedcomponents/src/packages/sidesheet/Banner/banner.styles.ts b/libs/sharedcomponents/src/packages/sidesheet/Banner/banner.styles.ts
@@ -1,14 +1,14 @@
 import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
 
-export const StyledBanner = styled.div<{ padding?: string }>`
+export const StyledBanner = styled.div<{ $padding?: string }>`
   height: 76px;
   width: 100%;
   background-color: ${tokens.colors.ui.background__light.hex};
   display: flex;
   flex-direction: row;
   gap: 5rem;
-  padding: ${({ padding = '0 1em' }) => `${padding}`};
+  padding: ${({ $padding = '0 1em' }) => `${$padding}`};
   align-items: center;
 `;
 export const BannerItemTitle = styled.div`

diff --git a/libs/sharedcomponents/src/packages/sidesheet/Header/Header.tsx b/libs/sharedcomponents/src/packages/sidesheet/Header/Header.tsx
@@ -42,11 +42,11 @@ const StyledWrapTitles = styled.div`
   overflow: hidden;
   white-space: nowrap;
 `;
-const StyledColor = styled.div<{ color?: string }>`
+const StyledColor = styled.div<{ $color?: string }>`
   width: 20px;
   height: 100%;
   display: flex;
-  background-color: ${(prop) => prop.color || '#8c1159'};
+  background-color: ${(prop) => prop.$color || '#8c1159'};
 `;
 const StyledButton = styled.div`
   position: absolute;

diff --git a/libs/swcrapp/src/lib/config/gardenConfig.tsx b/libs/swcrapp/src/lib/config/gardenConfig.tsx
@@ -25,7 +25,7 @@ export const useGardenConfig = (
     getHeader,
     getSubgroupItems,
     getDisplayName: (item) => item.softwareChangeRecordNo,
-    initialGrouping: ['RFC_PlannedDate'],
+    initialGrouping: ['RFO_ForecastDate'],
     visuals: {
       rowHeight: 25,
     },

diff --git a/libs/swcrapp/src/lib/ui-garden/Item.tsx b/libs/swcrapp/src/lib/ui-garden/Item.tsx
@@ -26,10 +26,10 @@ export const SwcrItem = (props: CustomItemView<SwcrPackage>) => {
     <StyledRoot>
       <StyledItemWrapper
         style={{ width: `${columnExpanded ? 100 : width}%`, maxWidth }}
-        backgroundColor={statusColor}
-        textColor={textColor}
+        $backgroundColor={statusColor}
+        $textColor={textColor}
         onClick={onClick}
-        isSelected={isSelected}
+        $isSelected={isSelected}
       >
         {displayName}
       </StyledItemWrapper>

diff --git a/libs/swcrapp/src/lib/ui-garden/garden.styles.ts b/libs/swcrapp/src/lib/ui-garden/garden.styles.ts
@@ -1,19 +1,19 @@
 import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
-type SwcrItemProps = { backgroundColor: string; textColor: string; isSelected: boolean };
+type SwcrItemProps = { $backgroundColor: string; $textColor: string; $isSelected: boolean };
 
 export const StyledItemWrapper = styled.div<SwcrItemProps>`
-  background-color: ${(props) => props.backgroundColor};
-  color: ${(props) => props.textColor};
+  background-color: ${(props) => props.$backgroundColor};
+  color: ${(props) => props.$textColor};
   cursor: pointer;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   height: 100%;
-  outline: ${(props) => (props.isSelected ? '2px dashed green' : '')};
-  outline-offset: ${(props) => (props.isSelected ? '2px' : '')};
+  outline: ${(props) => (props.$isSelected ? '2px dashed green' : '')};
+  outline-offset: ${(props) => (props.$isSelected ? '2px' : '')};
 `;
 
 export const StyledRoot = styled.div`

diff --git a/libs/swcrsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx b/libs/swcrsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
@@ -3,11 +3,11 @@ import { SwcrPackage } from '@cc-components/swcrshared';
 import { SwcrSignature } from '../types';
 import { PreBlock, StyledTextBlock, StyledTextBlockEmpty } from './sidesheet.styles';
 import styled from 'styled-components';
+
 type DetailsTabProps = {
   item: SwcrPackage | undefined;
   signatures: SwcrSignature[] | undefined;
   signaturesFetching: boolean;
-  attachmentsUrls: string | undefined;
 };
 export const DetailsTab = ({ item }: DetailsTabProps) => {
   return (