fix(TimelineStep): move subLabel below timeline

kiwicom · Dec 20, 2023 · be7758b · be7758b
1 parent 1b1444c
commit be7758b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/packages/orbit-components/src/Timeline/TimelineContext.tsx b/packages/orbit-components/src/Timeline/TimelineContext.tsx
@@ -13,6 +13,7 @@ interface Context {
 interface StepContext {
   index: number;
   last: boolean;
+  hasSubLabelMargin?: boolean;
 }
 
 export const TimelineStatusContext = React.createContext<Context>({
@@ -24,6 +25,7 @@ export const TimelineStatusContext = React.createContext<Context>({
 export const TimelineStepContext = React.createContext<StepContext>({
   index: 0,
   last: false,
+  hasSubLabelMargin: false,
 });
 
 export const TimelineStatusProvider = ({ children, direction }) => {
@@ -37,8 +39,11 @@ export const TimelineStatusProvider = ({ children, direction }) => {
   return <TimelineStatusContext.Provider value={value}>{children}</TimelineStatusContext.Provider>;
 };
 
-export const TimelineStepProvider = ({ children, index, last }) => {
-  const value = React.useMemo(() => ({ index, last }), [index, last]);
+export const TimelineStepProvider = ({ children, index, last, hasSubLabelMargin }) => {
+  const value = React.useMemo(
+    () => ({ index, last, hasSubLabelMargin }),
+    [index, last, hasSubLabelMargin],
+  );
   return <TimelineStepContext.Provider value={value}>{children}</TimelineStepContext.Provider>;
 };
 

diff --git a/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepDesktop.tsx b/packages/orbit-components/src/Timeline/TimelineStep/components/TimelineStepDesktop.tsx
@@ -28,6 +28,7 @@ interface Props extends StepProps {
   last: boolean;
   prevType: Type;
   nextType: Type;
+  hasSubLabelMargin: boolean;
 }
 
 const TimelineStepDesktop = ({
@@ -39,14 +40,10 @@ const TimelineStepDesktop = ({
   active,
   label,
   subLabel,
+  hasSubLabelMargin,
 }: Props) => {
   return (
     <Stack inline shrink direction="column" align="center">
-      <StyledText>
-        <Text align="center" size="small">
-          {subLabel}
-        </Text>
-      </StyledText>
       <StyledRelative inner>
         <StyledProgressLine desktop status={type} prevStatus={prevType} nextStatus={nextType} />
         <TypeIcon type={type} active={!!active} />
@@ -59,6 +56,13 @@ const TimelineStepDesktop = ({
         />
       </StyledRelative>
       <Stack flex align="center" spacing="XSmall" direction="column">
+        {hasSubLabelMargin && (
+          <StyledText>
+            <Text align="center" size="small">
+              {subLabel}
+            </Text>
+          </StyledText>
+        )}
         <StyledText active={active || (last && type === "success")}>
           <Text align="center" weight="bold">
             {label}

diff --git a/packages/orbit-components/src/Timeline/TimelineStep/index.tsx b/packages/orbit-components/src/Timeline/TimelineStep/index.tsx
@@ -27,7 +27,7 @@ const getActiveState = ({
 
 const TimelineStep = ({ children, label, subLabel, type, active }: Props) => {
   const { types, setTypes, isColumnOnDesktop } = useStatuses();
-  const { index, last } = useStep();
+  const { index, last, hasSubLabelMargin } = useStep();
   const { isDesktop } = useMediaQuery();
 
   const nextType = types[index + 1];
@@ -57,6 +57,7 @@ const TimelineStep = ({ children, label, subLabel, type, active }: Props) => {
       <TimelineStepDesktop
         nextType={nextType}
         prevType={prevType}
+        hasSubLabelMargin={hasSubLabelMargin}
         label={label}
         last={last}
         active={isActive}

diff --git a/packages/orbit-components/src/Timeline/index.tsx b/packages/orbit-components/src/Timeline/index.tsx
@@ -30,14 +30,23 @@ const Timeline = ({ children, spaceAfter, direction, dataTest, id }: Props) => {
     return isDesktop ? "row" : "column";
   };
 
+  const hasSubLabelMargin = React.useMemo(
+    () => childrenArr.some(child => React.isValidElement(child) && child.props.subLabel),
+    [childrenArr],
+  );
+
   return childrenArr && childrenArr.length > 0 ? (
     <WrapperStyled spaceAfter={spaceAfter} data-test={dataTest} id={id}>
       <Stack flex shrink direction={getDirection()}>
         <TimelineStatusProvider direction={direction}>
           {React.Children.map(childrenArr, (child, i) => {
             if (React.isValidElement(child)) {
               return (
-                <TimelineStepProvider index={i} last={i + 1 === childrenArr.length}>
+                <TimelineStepProvider
+                  index={i}
+                  last={i + 1 === childrenArr.length}
+                  hasSubLabelMargin={hasSubLabelMargin}
+                >
                   {child}
                 </TimelineStepProvider>
               );