fix(TimelineStep): move subLabel below timeline

kiwicom · Jan 1, 2024 · c80b66c · c80b66c
1 parent 1b1444c
commit c80b66c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 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
@@ -9,6 +9,7 @@ import Text from "../../../Text";
 import Stack from "../../../Stack";
 import defaultTheme from "../../../defaultTheme";
 import type { Props as StepProps, Type } from "../types";
+import useTheme from "../../../hooks/useTheme";
 
 const StyledDescription = styled.div<{ active?: boolean }>`
   ${({ theme, active }) => css`
@@ -28,6 +29,7 @@ interface Props extends StepProps {
   last: boolean;
   prevType: Type;
   nextType: Type;
+  hasSubLabelMargin?: boolean;
 }
 
 const TimelineStepDesktop = ({
@@ -39,14 +41,12 @@ const TimelineStepDesktop = ({
   active,
   label,
   subLabel,
+  hasSubLabelMargin,
 }: Props) => {
+  const theme = useTheme();
+
   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,8 +59,19 @@ const TimelineStepDesktop = ({
         />
       </StyledRelative>
       <Stack flex align="center" spacing="XSmall" direction="column">
+        {subLabel && (
+          <StyledText>
+            <Text align="center" size="small">
+              {subLabel}
+            </Text>
+          </StyledText>
+        )}
         <StyledText active={active || (last && type === "success")}>
-          <Text align="center" weight="bold">
+          <Text
+            align="center"
+            weight="bold"
+            margin={{ top: !subLabel && hasSubLabelMargin ? theme.orbit.spaceLarge : 0 }}
+          >
             {label}
           </Text>
         </StyledText>

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>
               );