feat(Wizard): allow column on desktop

kiwicom · May 30, 2022 · e375ba4 · e375ba4
1 parent fe9ebcf
commit e375ba4
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 43 deletions.
diff --git a/packages/orbit-components/src/Wizard/Wizard.stories.jsx b/packages/orbit-components/src/Wizard/Wizard.stories.jsx
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import { number, array } from "@storybook/addon-knobs";
+import { number, array, select } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 
 import RenderInRtl from "../utils/rtl/RenderInRtl";
@@ -13,8 +13,16 @@ export default {
 };
 
 export const Default = (): React.Node => {
+  const direction = select("direction", ["row", "column"], "row");
+
   return (
-    <Wizard id="wizard" completedSteps={3} activeStep={3} onChangeStep={action("onChangeStep")}>
+    <Wizard
+      id="wizard"
+      direction={direction}
+      completedSteps={3}
+      activeStep={3}
+      onChangeStep={action("onChangeStep")}
+    >
       <WizardStep title="Search" />
       <WizardStep title="Passenger details" />
       <WizardStep title="Ticket fare" />

diff --git a/packages/orbit-components/src/Wizard/WizardContext.js b/packages/orbit-components/src/Wizard/WizardContext.js
@@ -8,7 +8,9 @@ export const WizardStepContext: React.Context<WizardStepContextValue> = React.cr
     index: 0,
     status: "disabled",
     nextStepStatus: "disabled",
+    isColumnOnDesktop: false,
     isCompact: false,
+    isLastStep: false,
     isActive: false,
     onChangeStep: () => {},
     onClose: () => {},

diff --git a/packages/orbit-components/src/Wizard/WizardContext.js.flow b/packages/orbit-components/src/Wizard/WizardContext.js.flow
@@ -6,8 +6,10 @@ export type Status = "available" | "completed" | "disabled";
 export type WizardStepContextValue = {|
   +index: number,
   +status: Status,
+  +isColumnOnDesktop: boolean,
   +nextStepStatus: Status,
   +isCompact: boolean,
+  +isLastStep: boolean,
   +isActive: boolean,
   +onChangeStep?: (stepIndex: number) => void | Promise<any>,
   +onClose: () => void,

diff --git a/packages/orbit-components/src/Wizard/WizardStep.jsx b/packages/orbit-components/src/Wizard/WizardStep.jsx
@@ -13,6 +13,7 @@ import { WizardStepContext } from "./WizardContext";
 import defaultTheme from "../defaultTheme";
 import { left, right } from "../utils/rtl";
 import type { Props } from "./WizardStep";
+import { resolveStepBorder } from "./helpers";
 
 const StyledBorder = styled.div`
   ${({ theme }) => css`
@@ -94,30 +95,8 @@ StyledActiveMarker.defaultProps = {
 };
 
 const StyledProgressBar = styled.div`
-  ${({ theme, status, nextStepStatus }) => css`
-    position: relative;
-    &:before,
-    &:after {
-      content: "";
-      display: block;
-      position: absolute;
-      top: ${parseFloat(theme.orbit.heightIconSmall) / 2 - 1}px;
-      width: 50%;
-      height: 2px;
-    }
-    &:before {
-      ${left}: 0;
-      background: ${status === "disabled"
-        ? theme.orbit.paletteCloudNormalHover
-        : theme.orbit.paletteProductNormal};
-    }
-    &:after {
-      ${right}: 0;
-      background: ${status === "disabled" || nextStepStatus === "disabled"
-        ? theme.orbit.paletteCloudNormalHover
-        : theme.orbit.paletteProductNormal};
-    }
-  `}
+  position: relative;
+  ${resolveStepBorder};
 `;
 // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
 StyledProgressBar.defaultProps = {
@@ -174,11 +153,13 @@ const WizardStep = ({ dataTest, title, onClick }: Props): React.Node => {
   const {
     index,
     status,
+    isColumnOnDesktop,
     nextStepStatus,
     isCompact,
     isActive,
     onChangeStep,
     onClose,
+    isLastStep,
   } = React.useContext(WizardStepContext);
 
   const handleClick = (event: SyntheticEvent<HTMLElement>) => {
@@ -213,7 +194,13 @@ const WizardStep = ({ dataTest, title, onClick }: Props): React.Node => {
   }
 
   const step = (
-    <Stack flex direction="column" align="center" spacing="XSmall">
+    <Stack
+      flex
+      direction={isColumnOnDesktop ? "row" : "column"}
+      align={isColumnOnDesktop ? "start" : "center"}
+      spacing="XSmall"
+      spaceAfter={isColumnOnDesktop ? "large" : "none"}
+    >
       <WizardStepIcon />
       <div
         css={css`
@@ -237,11 +224,23 @@ const WizardStep = ({ dataTest, title, onClick }: Props): React.Node => {
 
   return (
     <StyledContainer data-test={dataTest} isCompact={isCompact} status={status}>
-      <StyledProgressBar status={status} nextStepStatus={nextStepStatus} />
+      <StyledProgressBar
+        status={status}
+        index={index}
+        isLastStep={isLastStep}
+        nextStepStatus={nextStepStatus}
+        isColumnOnDesktop={isColumnOnDesktop}
+      />
       <StyledContent>
-        <Stack flex direction="column" align="center">
+        <Stack flex direction="column" align={isColumnOnDesktop ? "start" : "center"}>
           {status === "disabled" ? (
-            step
+            <span
+              css={css`
+                padding: 0 ${theme.orbit.spaceXSmall};
+              `}
+            >
+              {step}
+            </span>
           ) : (
             <StyledButtonWrapper
               active={isActive}

diff --git a/packages/orbit-components/src/Wizard/helpers.js b/packages/orbit-components/src/Wizard/helpers.js
@@ -0,0 +1,74 @@
+// @flow
+import { css } from "styled-components";
+import type { CSSRules } from "styled-components";
+
+import { left, right } from "../utils/rtl";
+import type { Status } from "./WizardContext";
+import type { Theme } from "../defaultTheme";
+
+type ResolveStepBorder = ({|
+  isColumnOnDesktop: boolean,
+  isLastStep: boolean,
+  index: number,
+  status: string,
+  nextStepStatus: Status,
+|}) => ({|
+  theme: Theme,
+|}) => CSSRules;
+
+export const resolveStepBorder: ResolveStepBorder = ({
+  isColumnOnDesktop,
+  index,
+  status,
+  isLastStep,
+  nextStepStatus,
+}) => ({ theme }) => {
+  return css`
+    ${isColumnOnDesktop
+      ? css`
+          &:before {
+            display: ${index === 0 ? "none" : "block"};
+          }
+
+          &:after {
+            display: ${isLastStep ? "none" : "block"};
+          }
+
+          &:after {
+            content: "";
+            position: absolute;
+            ${left}: ${parseFloat(theme.orbit.heightIconSmall) + 1}px;
+            top: ${parseFloat(theme.orbit.heightIconSmall) + 1}px;
+            width: 2px;
+            height: 40px;
+          }
+        `
+      : css`
+          &:before,
+          &:after {
+            display: block;
+            content: "";
+            position: absolute;
+            top: ${parseFloat(theme.orbit.heightIconSmall) / 2 - 1}px;
+            width: 50%;
+            height: 2px;
+          }
+        `}
+
+    &:before {
+      ${left}: 0;
+      background: ${status === "disabled"
+        ? theme.orbit.paletteCloudNormalHover
+        : theme.orbit.paletteProductNormal};
+    }
+
+    &:after {
+      ${right}: 0;
+      background: ${status === "disabled" || nextStepStatus === "disabled"
+        ? theme.orbit.paletteCloudNormalHover
+        : theme.orbit.paletteProductNormal};
+    }
+  `;
+};
+
+export default resolveStepBorder;
diff --git a/packages/orbit-components/src/Wizard/index.d.ts b/packages/orbit-components/src/Wizard/index.d.ts
@@ -5,6 +5,7 @@ import WizardStep from "./WizardStep";
 
 export interface Props extends Common.Global {
   readonly id: string;
+  readonly direction?: "row" | "column";
   readonly completedSteps: number;
   readonly activeStep: number;
   readonly lockScrolling?: boolean;

diff --git a/packages/orbit-components/src/Wizard/index.jsx b/packages/orbit-components/src/Wizard/index.jsx
@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import { css } from "styled-components";
+import styled, { css } from "styled-components";
 
 import WizardStep from "./WizardStep";
 import { WizardStepContext } from "./WizardContext";
@@ -13,6 +13,8 @@ import Modal from "../Modal";
 import { CardSection } from "../Card";
 import useMediaQuery from "../hooks/useMediaQuery";
 import useTranslate from "../hooks/useTranslate";
+import defaultTheme from "../defaultTheme";
+import mq from "../utils/mediaQuery";
 
 import type { Props } from ".";
 
@@ -22,9 +24,30 @@ const unstyledListMixin = css`
   padding: 0;
 `;
 
+const StyledList = styled.ul`
+  ${({ $direction }) => css`
+    display: flex;
+    ${unstyledListMixin};
+    ${mq.largeMobile(css`
+      // support column layout on desktop
+      // https://github.com/kiwicom/orbit/issues/3308
+      flex-direction: ${$direction};
+      li {
+        flex: 1 1 0%;
+      }
+    `)}
+  `}
+`;
+
+// $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
+StyledList.defaultProps = {
+  theme: defaultTheme,
+};
+
 const Wizard = ({
   dataTest,
   lockScrolling = true,
+  direction,
   id,
   completedSteps,
   activeStep,
@@ -52,6 +75,8 @@ const Wizard = ({
       value={{
         index,
         status: stepStatuses[index],
+        isLastStep: index === stepsCount - 1,
+        isColumnOnDesktop: direction === "column",
         nextStepStatus: stepStatuses[index + 1],
         isCompact,
         isActive: activeStep === index,
@@ -84,7 +109,7 @@ const Wizard = ({
                 number: activeStep + 1,
                 total: stepsCount,
               })}
-            </b>{" "}
+            </b>
             <span
               css={css`
                 font-weight: normal;
@@ -141,17 +166,7 @@ const Wizard = ({
 
   return (
     <nav>
-      <ul
-        css={css`
-          ${unstyledListMixin};
-          display: flex;
-          li {
-            flex: 1 1 0%;
-          }
-        `}
-      >
-        {steps}
-      </ul>
+      <StyledList $direction={direction}>{steps}</StyledList>
     </nav>
   );
 };

diff --git a/packages/orbit-components/src/Wizard/index.jsx.flow b/packages/orbit-components/src/Wizard/index.jsx.flow
@@ -7,6 +7,7 @@ import typeof WizardStepComponent from "./WizardStep";
 export type Props = {|
   ...Globals,
   +id: string,
+  +direction?: "row" | "column",
   +lockScrolling?: boolean,
   +completedSteps: number,
   +activeStep: number,