feat: OPTIC-1088: Add duration time in info tab

web/libs/editor/src/common/Label/Label.scss

@@ -22,6 +22,13 @@
     line-height: 0;
   }
 
+  &_size_small &__text {
+    font-size: 10px;
+    margin: 0;
+    height: 14px;
+    line-height: 14px;
+  }
+
   &_size_large &__text {
     font-weight: 500;
     font-size: 16px;
@@ -44,12 +51,6 @@
     color: var(--sand_500);
   }
 
-  &_large &__text {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 16px;
-  }
-
   &_placement_right {
     display: inline-flex;
     flex-direction: row-reverse;
@@ -79,4 +80,4 @@
   &_placement_left.label_withDescription &__field {
     margin-top: 5px;
   }
-}
+}

web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx

@@ -96,6 +96,8 @@ const RegionEditorComponent: FC<RegionEditorProps> = ({ region }) => {
           isSidepanel={true}
           onChangeStartTime={changeStartTimeHandler}
           onChangeEndTime={changeEndTimeHandler}
+          showLabels
+          showDuration
         />
       </Elem>
     );

web/libs/editor/src/components/TimeDurationControl/TimeBox.scss

@@ -1,19 +1,15 @@
 .time-box {
   width: 100px;
   height: 24px;
-  border-radius: 4px 0 0 4px;
+  border-radius: 4px;
   border: 1px solid var(--sand_300);
   font-size: 14px;
+  font-weight: 400;
 
   &_sidepanel {
     width: 100%;
   }
 
-  &_inverted {
-    border-left: none;
-    border-radius: 0 4px 4px 0;
-  }
-
   &__input-time {
     border: none;
     padding: 0;
@@ -35,4 +31,4 @@
       color: var(--sand_400);
     }
   }
-}
+}

web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx

@@ -1,25 +1,19 @@
 import React, { type FC, useCallback, useEffect, useState } from "react";
 import { Block, Elem } from "../../utils/bem";
 import { MaskUtil } from "../../utils/InputMask";
+import Label from "../../common/Label/Label";
 
 import "./TimeBox.scss";
 
 export interface TimerProps {
   sidepanel: boolean;
   value: number;
   readonly?: boolean;
-  inverted?: boolean;
   onChange: (value: number) => void;
+  label?: string;
 }
 
-export const TimeBox: FC<TimerProps> = ({
-  sidepanel = false,
-  value,
-  inverted = false,
-  readonly = false,
-  onChange,
-  ...props
-}) => {
+export const TimeBox: FC<TimerProps> = ({ sidepanel = false, value, readonly = false, onChange, label, ...props }) => {
   const inputRef = React.createRef<HTMLInputElement>();
   const [currentInputTime, setCurrentInputTime] = useState<string | number | undefined>(value);
 
@@ -97,9 +91,17 @@ export const TimeBox: FC<TimerProps> = ({
     );
   };
 
-  return (
-    <Block name="time-box" mod={{ inverted, sidepanel }} {...props}>
+  const timeBoxContent = (
+    <Block name="time-box" mod={{ sidepanel }} {...props}>
       {renderInputTime()}
     </Block>
   );
+
+  return label ? (
+    <Label size="small" flat text={label}>
+      {timeBoxContent}
+    </Label>
+  ) : (
+    timeBoxContent
+  );
 };

web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.scss

@@ -1,3 +1,16 @@
 .timer-duration-control {
   display: flex;
-}
+
+  & > label:not(:first-child) .time-box,
+  & > .time-box:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > label:not(:last-child) .time-box,
+  & > .time-box:not(:last-child) {
+    border-right: none;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx

@@ -15,6 +15,8 @@ export interface TimerProps {
   endTimeReadonly?: boolean;
   onChangeStartTime?: (value: number) => void;
   onChangeEndTime?: (value: number) => void;
+  showDuration?: boolean;
+  showLabels?: boolean;
 }
 
 export const TimeDurationControl: FC<TimerProps> = ({
@@ -28,6 +30,8 @@ export const TimeDurationControl: FC<TimerProps> = ({
   endTimeReadonly = false,
   onChangeStartTime,
   onChangeEndTime,
+  showDuration = false,
+  showLabels = false,
 }) => {
   const _currentTime = !currentTime ? startTime : currentTime;
 
@@ -46,6 +50,7 @@ export const TimeDurationControl: FC<TimerProps> = ({
         readonly={startTimeReadonly}
         value={_currentTime}
         onChange={handleChangeCurrentTime}
+        label={showLabels ? "Start" : undefined}
         data-testid="timebox-current-time"
       />
       <TimeBox
@@ -54,8 +59,18 @@ export const TimeDurationControl: FC<TimerProps> = ({
         value={endTime}
         onChange={handleChangeEndTime}
         data-testid="timebox-end-time"
-        inverted
+        label={showLabels ? "End" : undefined}
       />
+      {showDuration && (
+        <TimeBox
+          sidepanel={isSidepanel}
+          readonly={true}
+          value={endTime - startTime}
+          onChange={() => {}}
+          data-testid="timebox-duration-time"
+          label={showLabels ? "Duration" : undefined}
+        />
+      )}
     </Block>
   );
 };